JavaScript--模块化 JavaScript module designer

module: 模块就是实现特定功能的一组方法。
1、在首页的一个接口js;首先下载好require.js文件引入首页。
　　<script src="require.js" data-main="main.js"/>
2、在main.js中加载需要的模块。require()地方法。
　　

require(["XXX"],["yyy"],function(xxx,yyy) {
　　　　xxx.mmm;
　　　　//some code
　　});　　

　　require(),方法中有两个参数，第一个以数组的形式存放加载依赖模块，注意模块的顺序。

3、模块中的注意事项：要符合AMD规范。采用define();来定义模块，然后return出去。
　　

define(function() {
　　　　var add = function(a,b) {
　　　　　　return a+b;
　　　　};　　

　　　　return {
　　　　　　add : add
　　　　}　　
　　});

　　在define();方法中也可以传入依赖模块，同样以数组的形式存放。

4、require的config()方法参数配置：
　　require.config({ });他接受一个对象格式的数据：
　　1)、paths: {},paths属性接受依赖模块的的路径，
　　

paths: {
　　　　"jquery" : "js/bin/jquery.js",
　　　　...
　　}

　　也可以改变基本目录：

　　

baseUrl : "js/bin",
　　paths : {
　　　　"jquery" : "jquery.js",
　　　　...
　　　　}

　　2)、shim:{},属性专门来配置不兼容的模块，每个模块都要定义一个exports值输出的变量名，表明外部模块调用的名称。deps数组表示该模块的依赖模块。

　　

shim: {
　　　　"backbone" : {
　　　　　　deps : ["jQuery"],
　　　　　　exports : "_"
　　　　}
　　}
　　shim: {
　　　　'jquery.scroll': {
　　　　　　deps: ['jquery'],
　　　　　　exports: 'jQuery.fn.scroll'
　　　　}
　　}
　　index.js：
　　require.config({
　　　　paths: {
　　　　　　"jQuery" : "jquery-1.12.4.js"
　　　　}
　　});

　　require(["module1","module2"],function(module1,module2) {
　　　　// console.log( math.num(3,4) );
　　　　// alert("主js加载成功！");
　　　　alert( module1.add(5,3) );
　　　　alert( $(".box").length );
　　　　// alert(module1.a);
　　　　alert(module2.sub(100,2));
　　　　module1.spanFn();
　　});

　　module1.js:
　　define(["jquery-1.12.4","module2"],function() {
　　　　// var a = module2.sub(100,2);
　　　　// for(var i = 0;i < 10;i++) {
　　　　　　// a++;
　　　　// }

　　　　var add = function(a,b) {
　　　　　　return a+b;
　　　　};　　
　　　　var spanFn = function() {
　　　　　　$("span").click(function() {
　　　　　　　　alert("span");
　　　　　　});
　　　　};

　　　　return {
　　　　　　add : add,
　　　　　　spanFn :spanFn
　　　　}
　　});
　　module2.js:
　　define(function() {
　　　　var sub = function(a,b) {
　　　　　　return a/b;
　　　　};
　　　　return {
　　　　　　sub : sub
　　　　}
　　});