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

本文主要是介绍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;
});

文件目录