今天看了一下node.js的书,理解了模块化的意思,之前在项目中,不论是react-native还是vue,只要是看见exports和require,总是一头雾水,今天就来解释一下,来加深一哈理解。
1.为何要进行模块化? 模块化就是将功能进行拆解,再组合的过程。因为一个项目不可能总是由一个文件构成的,模块化可以更好地服务于你。
2.模块化的两种方法:
第一种方法最简单的就是创建两个文件,在另外一个文件中引用这个文件,并调用这个模块中的方法。
举个栗子:
在module.js中有这样的代码:
1 //module.js 2 3 var name; 4 5 exports.setName = function(BName) { 6 7 name = BName; 8 9 }; 10 11 exports.sayHello = function() { 12 13 console.log('看你不爽的 ' + name); 14 15 }; 16 17 在另外一个文件getModule.js中: 18 19 //getmodule.js 20 21 var myModule = require('./module'); //在同一目录文件下 22 23 myModule.setName('Bacon'); 24 25 myModule.sayHello();
在另外一个文件getModule.js中:
1 //getmodule.js 2 3 var myModule = require('./module'); //在同一目录文件下 4 5 myModule.setName('Bacon'); 6 7 myModule.sayHello();
运行node getmodule.js,可也以安装supervisor,可以进行实时调试,很舒服。
输出结果是:
看你不爽的 Bacon
第二种方法就是进行封装,再来看:
//capsuleModule.js function fSBacon() { var name; this.setName = function (BName) { name = BName; }; this.sayHello = function () { console.log('依然看你不爽的 ' + name); }; }; module.exports = fSBacon;
注:也可用exports.Hello = Hello; 不可以通过对 exports 直接赋值代替对 module.exports 赋值。 exports 实际上只是一个和 module.exports 指向同一个对象的变量, 它本身会在模块执行结束后释放,但 module 不会,因此只能通过指定 module.exports 来改变访问接口。
在另外一个文件getCapsuleModule.js中:
//getCapsuleModule.js var fSBacon = require('./ capsuleModule’); bacon = new fSBacon (); bacon.setName('Bacon'); bacon.sayHello();
接管依然如是。
今天要写的就这么些喽,主要是对模块化和封装有了一些更深的认识,知道的太少。
然而秋招的脚本更近了……,实习还没有着落......