模块化编程理解

背景

工作中在做客户运营系统时，发现js和css的引用还处于最原始的状态没有更新。在上一个项目中通过对象和其中的方法实现了简单的模块化编程。但随着工程项目的庞大程度增加，简单的对象已经满足不了模块化编程的需求了，所以接触了RequireJS，了解了AMD编程规范。

什么是AMD

和AMD对应的是CMD,在nodeJS里面的依赖是基于CMD，同步加载要依赖的文件。而在浏览器中，如果同步加载需要依赖的文件会导致阻塞，造成浏览器假死，所以需要进行异步依赖。AMD-Asychronous Module Loader，支持这个规范的一个库是requirejs,可以用于优化代码。

从小了说，在做几个简单页面构成的小应用程序时，调用一个js,用不同的对象把各个方法封装起来，也是模块化的一种实现。但这更偏向业务层，涉及到其他其他第三方控件时，就会变得不好管理。

RequireJS使用

• 下载requireJS，下载页面：http://requirejs.org/docs/download.html 压缩后大约8k左右。下载的版本是1.8.3
• 在应用中引用requireJS进行开发

requirejs demo

1. 创建一个应用程序，moduletest,工程的目录如下

   |---index.html
   |---app.js
   |---lib
   |-------require.js
   |----|---modules
   |----|------|------math.js
   

2. 在index.html中添加requirejs

   data-main指出了入口js，类似于C++中的main函数。可以忽略js后缀。

3. data-main所在的目录是baseurl，所有的require里面的路径都是相对于它的相对路径，当然也可以在require.config里面指定baseUrl,这样path就是以指定的baseUrl为准了。

4. 这个app要实现的功能是当用户输入两个数字之后，显示结果。app.js注册求和按钮事件，再调用math.add求和。
5. 在math中写入以下代码：

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

    return{
        add:add
    }
});

具体的函数实现写在define函数中，第一个参数是需要引用的模块，为赋新词强说愁，引用了jquery，然后实现了add函数，return的结果是一个对象，里面包含需要返回的方法。

6.在app中引用math，调用其方法。

require.config({
    paths:{
        'jquery':"http://libs.ainemo.com/jquery/2.2.2/jquery.min"//注意path后面的js需要省略
    }
});

因为要用到公用的已经存放在cdn上比较稳定的jquery版本，所以在这里指定了jquery的路径。

require(['jquery','lib/modules/math'],function($,math){
    $(function(){
       $('#add').click(function(){
           var result = math.add($('#param1').val() , $('#param2').val());
           $('#addResult').html(result);
       });
    });
});

demo done.
demo 地址：https://coding.net/u/fiona2016/p/requirejs-learn/git