前端模块化
- 使用模块模块化的好处
- 避免变量污染，命名冲突
- 提高代码复用性
- 提高维护性
- 依赖关系的管理
- 基本思想
//使用立即执行函数
//闭包思想，内层作用域才能访问外层作用域 var module = (function() { let count = 5; let m1 = function() { count++ }; let m2 = function() { count-- }; let m3 = function() { console.log(count) } return{ m1, m2, m3 } })() - 前端模块化比较
- commonjs基于nodejs的模块化方案，同步的加载在充满异步的浏览器中会产生很多问题
- 一个文件就是一个模块，拥有自己的作用域
//a.js //被require的时候，只会执行一次这个函数，然后把结果存起来 var a = 100; a+=100; module.exports = { a }
//b.js var a = require('./a.js'); //{ a: 200 }
//c.js var a = require('a.js'); //{ a: 200 }
- 一个文件就是一个模块，拥有自己的作用域
- 基于amd规范的requireJs（依赖前置，你需要的模块之前写在之前），依赖模块谁下载好就执行，和书写顺序无关，最后在执行你的主要逻辑
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端模块化</title> <!-- 引入requieJs --> <script type="text/javascript" src="http://j1.58cdn.com.cn/ui7/post/pc/libs/require.min_v20150611214822.js"></script> <script> //参数一：依赖的模块； //参数二：模块加载完毕后执行的回掉函数，参数是依赖模块的返回值 require(["a.js"],(add)=>{ add() //并不会阻碍浏览器渲染，所以页面显示123后弹出123 }) </script> </head> <body> 123 </body> </html>//a.js
//require定义模块
define(function() { var add = ()=>{ alert("123") } return add }) - require.config()方法进行配置，相当于给你的路径制定一个简单的名字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端模块化</title> <!-- 引入requieJs 为了1防止阻碍浏览器渲染，指定异步加载 defer为了IE --> <script type="text/javascript" src="http://j1.58cdn.com.cn/ui7/post/pc/libs/require.min_v20150611214822.js"></script> <script> require.config({ baseUrl: 'js', //指定require的路径的目录，不指定的话就是加载require的这个文件的目录 paths: { //相当于对你的路径更改一个简单的名字 a: 'zimu/a', b: 'zimu/b', jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min' //也可以指定网络路径 } }) //引入模块a 从设置可以知道a==js/zimu/a require(['a']) </script> </head> <body> 123 </body> </html>//a.js
define(['b'],()=>{
//此处先引入一下b模块
console.log("a");
})//b.js define(()=>{ console.log("b"); })
控制台最终结果
-
- 基于cmd规范的seaJs（就近依赖，你需要用的时候写在附近），依赖模块下载之后不执行，当你require的时候才执行，和你的书写顺序有关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端模块化</title> <!-- 引入requieJs 为了1防止阻碍浏览器渲染，指定异步加载 defer为了IE --> <script type="text/javascript" src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script> <script> //引用的三种方式 //方式1：seajs.use(一般只用在页面载入入口模块) seajs.use(["./a.js"]) //方式2：require 同步往下加载 //方式3：require.async 异步往下加载，加载完成后，执行回调函数 </script> </head> <body> 123 </body> </html>//a.js //错误示例 define(function(require,exports,module) { var a = 100; console.log(a); require(["./b"]); module.exports = { a } }) //同样需要先指定你所依赖的模块 //修订之后 //require定义模块 define(["./b"],function(require,exports,module) { var a = 100; console.log(a); require(["./b"]); module.exports = { a } })
//b.js define((require,exports,module)=>{ console.log("b"); })
最终结果：
- commonjs基于nodejs的模块化方案，同步的加载在充满异步的浏览器中会产生很多问题
