nodejs快速入门（一）-模块化开发

随着网站开发的复杂度越来越高，js代码和js文件的增多，出现了开发者头疼的两个问题：① 命名冲突；②文件依赖。

js模块化开发可以解决这些问题。

①变量命令冲突

在js文件中，如下创建一个变量并赋予一个函数。如果文件的代码过多，在后续的代码中再次使用add变量，就会将原来的add变量覆盖，就造成了变量的命名冲突。

var add=function(v1,v2){
	return v1+v2;
}

// 此处省略一万行代码

var add = 123;

我们逐渐试着重代码进行改善

（1）对象封装

var calculator={
	num:123;
}
calculator.add=function(v1,v2){
	return v1+v2;
}

这时候 add的作用范围在caculator对象中，就不会避免后续代码直接写 var add = value 造成变量命名冲入。但是这样的代码还是有很大的局限性，对象里面的属性和方法很容易被修改掉，很不安全。

（2）划分私有命名空间

var calculator=(function(){
	var num=123;
	var add=function(v1,v2){
		return v1+v2;
	};

	return {
		num:num,
		add:add
	}
})()

通过匿名函数，闭包将add的私有化到calculator中，可以保护好里面的属性和方法，但是这种方式的局限在于不能维护和扩展功能。

（3）开闭原则-维护扩展

var calculator=(function(){
	var num=123;
	var add=function(v1,v2){
		return v1+v2;
	};

	return {
	num:num,
	add:add
	}
})();

var calculator=(function(global){
	global.mod=function(v1,v2){
		return v1%v2;
	}
	return global;
})(window.calculator||{});

对add的修改关闭了，同时提供了对calculator的功能扩展，window.caucluator传递就是为了打破封装性。

②文件依赖

在开发js代码的过程中，例如使用了jquery.js，就需要通过<script src="./jquery.js"></script>的形式引入文件，形成硬编码。如以下代码

var calculator=(function(){
	var num=123;
	var add=function(v1,v2){
		return v1+v2;
	};

	return {
	num:num,
	add:add
	}
})();

var calculator=(function(global){
	global.mod=function(v1,v2){
		return $(v1) % $(v2); // 这里使用了jquery的$
	}
	return global;
})(window.calculator||{});

根据以上问题，引入模块化开发

模块化规范

①服务器端规范

nodejs就是遵循了CommonJS规范。

②浏览器端规范

RequireJS遵循AMD规范。

SeaJS遵循CMD规范。

这里先介绍SeaJS Demo

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SeaJS Demo</title>
    <script type="text/javascript" src="./modules/seajs/2.2.0/sea.js"></script>
</head>
<body>
<input type="" name="" value="1" id="v1">
<input type="" name="" value="2" id="v2">
    
</body>
    <script type="text/javascript">
     seajs.use('./modules/calculator',function(cal){ // 参数1：引入模块路径；参数2：回调函数
         console.log(cal.add2());

     });
    </script>
</html>

在index.js的同级目录modules中，创建如下文件

calculator.js

define(function(require,exports,module) {
  var operator = require('./add');
 
  exports.add=operator.add;
  exports.add2=operator.add2;
});

add.js

define(function(require,exports,module) {
 var add=function(v1,v2){
   return v1+v2;
 }
 $=require('./jquery.js');
  var add2=function(){
      var v1= $('#v1').val();
      var v2= $('#v2').val();
   return (v1-0)+(v2-0);
 }
 
	exports.add=add;
	exports.add2=add2;
});

文件目录

（1）define是SeaJS的全局函数，定义模块。

（2）modules是一个全局变量相当于浏览器解析dom 的window对象。

（3）exports是modules.exports的属性对象别名；不能直接给exports赋值，暴露单个属性和方法直接给module.exports赋值。exports提供多个属性和方法向外暴露。

（4）seajs.user()函数启动模块；

（5）require() 用于加载模块。

模块化开发保证了复合“单一职责”设计，通过匿名函数的注入，保证了模块的独立性，而且也能清晰的表达模块之间的依赖。这里简单介绍SeaJS，如果需要知道更多，访问http://www.zhangxinxu.com/sp/seajs/

nodejs快速入门（一）-模块化开发

模块化规范

猜你喜欢