JavaScript 模块化发展与简介

解决问题：

1.命名冲突
2.文件依赖问题

什么是模块化

将软件产品看作一系列功能模块的组合，
通过特定的方式实现软件所需模块的划分、管理、加载。

模块化开发演变

全局函数

• 命名冲突
• 文件依赖的问题

<script type="text/javascript">
    //命名冲突 代码写的可读性差而且没法完整的写在一块
       var add=function(v1,v2){
        return v1+v2;
       }
      var substract=function(v1,v2){
        return v1-v2;
       }
      var getDate=function(){
        return new Date();
      }
      var mutiply=function(v1,v2){
        return v1*v2;
     }
      var divide=function(v1,v2){
        return v1/v2;
     }
     var add=123;
    </script>

对象封装

• 用命名空间的方式进行封装
• 先约定命名的规范的形式（驼峰命名法、匈牙利命名法(例如:(fnCalculate、numB))）
• 对象里面的属性和方法很容易被修改掉，很不安全

<script type="text/javascript">
    //命名空间法是通过，约定的方式定义的
    //是可以解决命名冲突问题的，但是很牵强
    //驼峰命名，匈牙利命名法
    //没法做私有性封装
     var calculator={
        a:123;
     }
      calculator.add=function(v1,v2){ 
        return v1+v2;
       }
      calculator.substract=function(v1,v2){
        return v1-v2;
       }
      calculator.mutiply=function(v1,v2){
        return v1*v2;
       }
      calculator.divide=function(v1,v2){
        return v1/v2;
       }

    calculator.a=123;
    </script>

划分私有空间

• 通过匿名函数自执行的方法封装模块，返回值的方式得到模块的公共成员
• 可以保护私有变量和方法，有选择的对外暴露自身成员
• 从某种意义上来说解决变量命名冲突的问题

<script type="text/javascript">
    //封装性 划分私有空间
    //还是需要约定
    var calculator=(function(){
        var a=123;
       var add=function(v1,v2){
        return v1+v2;
       }
       var substract=function(v1,v2){
            return v1-v2;
       }
        var mutiply=function(v1,v2){
            return v1*v2;
       }
       var divide=function(v1,v2){
         return v1/v2;
       }
       return {
            add:add,
            substract:substract,
            mutiply:mutiply,
            divide:divide
       }
    })()

    var  cal=calculator;
    cal.add(1,1);
    </script>

模块的维护扩展

• 开闭原则，对修改关闭，对扩展开放。
• 增加了代码的健壮性和容错性

<script>
        var calculate={
            add:function(v1,v2){
                return v1+v2;
            }
        }
    </script>
    //扩展：
   <script>  
    var calculate = (function(cal){
        cal.sub=function(v1,v2){
            return v1-v2;
        }
    })(window.calculate||{});
    </script>

模块的第三方依赖

• 模块职责唯一性
• 把依赖的模块，通过依赖注入的形式，在你的参数上进行体现。(沙箱思想)

(function(win,$){
    //依赖注入
})(window,window.$);

总结

• 最大的问题，规范的问题
• 多人协作开发过程中：代码的风格一定要统一

模块化规范

服务器端模块化规范

CommonJS ->nodejs

浏览器端模块化规范

• AMD
  
  • RequireJS
• CMD
  
  • SeaJS
    commonjs
  • node.js

SeaJS

一个基于CMD规范实现的模块化开发解决方案

整体感知

特性：

• 简单友好的模块定义规范
• 自然直观的代码组织方式

哲学：一切皆模块

基本使用

定义模块 define

• 定义模块 define(function(){})
• 函数体内的方法属性都属于这个方法，对外有封装性；
• 解决了命名冲突问题，使js代码有了封装性
• 直接调用 jQuery 插件等非标准模块的方法:
  http://my.oschina.net/briviowang/blog/208587

启动模块 seajs.use

• 加载入口模块，我们把define定义的js就叫模块
• 这个用于在html代码里面的加载

加载模块 require

-加载文件依赖、模块依赖的，用于define函数体内

暴露接口 exports 和 module.exports

• module.exports曝露出一个完整的对象，只能扔一次只能曝露出来一个
• exports是module.exports的别名，可以用来单个属性、方法、对象的曝露，用.的形式,exports能做的事情module.exports也可以做

requirejs与seajs的区别

• requirejs是优先加载的
• seajs是懒加载的，就是有拖延症，用的时候才加载
  http://www.requirejs.cn/