最近在了解前端模块化开发,接下来会把相关的笔记/心得分几片文章记录下来。
一、为什么要模块化开发
- js越多,依赖越强,灵活性越小(如引入顺序);
- 多人开发,容易出现命名冲突等问题;
- ... ...
二、解决方案:
- 匿名闭包;
- 解决了命名冲突;
- 代码复用性变弱;
- 使用模块作为出口;
// 3.使用变量接收对象 var myModule = (function(){ // 1.在匿名函数内部定义一个对象; var obj = {}; var sum = function(a,b){ return a+b; } var flag = true; obj.sum = sum; obj.flag = flag; // 2.暴露对象; return obj; })();
其他成引入该js就能直接使用属于自己模块的属性和方法:
if(myModule.flag){ console.log(myModule.sum(1,0)); }
-
CommonJS
-
核心:导入,导出
-
导出示例:
module.exports={ flag: true, sum: function(a,b){ return a+b; } }
-
导入示例:
// 1.普通写法 var someModule = require('./config.js'); if(someModule.flag){ someModule.sum(1,2); } // 2.解构赋值 var {flag,sum} = require('./config.js'); if(flag){ sum(1,2); }
-
-
ES6的模块化:export/import
-
导出示例:
var flag = true; var sum = function(a,b){ return a+b; } // 导出方式1:报错就写export default // export default导出有且只能有一个,导入的时候也变成了import from './config.js',也就是说名字可以省略,由导入者自己命名; export {flag,sum} // 默认导出函数,导入者不能省略名字,但是可以自己命名 export default function(){ console.log("export default function") } // 导出方式2: export var name = "wayne"; export function mul(a,b){ return a*b; } export class Person{ run(){ console.log("run away!") } }
-
导入示例:
// 注意文件名简写的问题 import {flag,sum, Person} from './config.js'; if(flag){ console.log(sum(1,2)) } var p = new Person; p.run() // 导入的东西比较多的时候 import * as 自定义命名 from './config.js'
-
其他小记:
<!-- type="module"属性会让js文件模块化,其他js文件不能访问其中的变量和方法 -->
<script src="./config.js" type="module"></script>
END;