浅理解模块化和封装

Posted 2021-11-07 baconcy

今天看了一下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();

接管依然如是。
今天要写的就这么些喽，主要是对模块化和封装有了一些更深的认识，知道的太少。
然而秋招的脚本更近了……，实习还没有着落......