首页 > 代码库 > js 模块化的一些理解和es6模块化学习
js 模块化的一些理解和es6模块化学习
模块化
1 IIFE
2 commonjs
3 浏览器中js的模块化
4 简单理解模块加载器的原理
5 es6
之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式(IIFE)的模式,比如单个功能的时候当时想到是不会涉及到全局变量的污染,在封装基础的模块(比如里面的表单验证功能)
(function(win){ var obj = {}; function add() { console.log("add"); } obj.add = add; win.obj = obj; }(window)); obj.add();
是在立即调用表达中我们想要的功能 绑定在一个对象上 最后绑定到window上 这样的模式在写功能不多的时候,的确是不错的 但是随着你的功能越来越多,就会出现一定的问题
1)window上是不是挂载太多的对象
2)模块内部是否存在相同的变量的名字挂载window上 比如两个模块内部都挂载 window.obj 那么后来加载执行的一定是会覆盖之前的模块的
3)依赖的解决问题 一定在做好依赖的维护 也就是本模块需求的模块必须在之前被加载和执行 想想在页面中好多js的样子
4)在扩展上也并不是很友好 每次都需要将新的功能扩展到内部的对象或者window上 存在变量的污染问题 跟2)有点相似
上面的只是我的一些浅显的理解 对这种IIFE模式实现模块化的一点理解
commonjs commonjs是JavaScript模块化的一种规范 它为JavaScript实现模块化定义了一种规范 引用官网上的一句话 JavaScript:not just for browsers any more!
简单理解就是通过commonjs,JavaScript能做的事情更多了
如何写一个最简单的commonjs模块
/*模块引用部分 引用其他的模块
*/
/*模块定义部分
*/
function add(a,b) { return a+b; } function multiple(a,b) { return a*b; }
/* 模块导出部分 导出模块的功能
*/ module.exports.add = add; module.exports.multiple = multiple;
commonjs 规范定义实现一个模块分为模块引用 模块定义 模块标识(require()时候使用的标识) 这个是官网上一个简单的例子 这个是例子
浏览器中的js模块化 上面的这种方式在node中是完全没有问题的 但是在浏览器中首先出现的问题就是require module.exports 这些关键字在浏览器中不支持 也就是我们需要模块加载器帮我们实现require帮我们去加载commonjs模块 还有一个点就是浏览器中的环境不同于服务端 require是同步的 它会等待模块的下载和执行完毕之后在运行下面的代码 服务器端是从本地的磁盘读取对应的模块 这样的加载速度是可以接受的 但是在浏览器中 就涉及到从服务端加载对应的js 这样就会造成页面的锁死 这时候就出现了require.js 和sea.js
简单理解模块加载器的原理 首先通过将加载过的对象进行缓存 在进行多个依赖加载的时候,记录加载的数目 ,每加载一个模块 在回调中减少数目 当所有的依赖加载完毕后执行外层的回调 参考 理解requirejs-实现一个简答的模块加载器
es6 es6中推出了模块系统 可以参考这篇文章去学习es6的模块化 深入浅出ES6(十六):模块 这个系列的文章写得真的不错
js 模块化的一些理解和es6模块化学习