Javascript模块化的写法—原始写法

  • 模块就是实现特定功能的一组方法。

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
比如:tool.js

  1.   function aaa(){
  2.   }
  3.     function bbb(){
  4.   }

这种做法的缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

Javascript模块化的写法—对象写法

  1.     var moudleA = {
  2.     var count = 0;
  3.     m1:function (){
  4.     }
  5.         m2:function (){
  6.     }
  7.   }
  8.   moudleA.m1()
  9.     moudle.m2()

这样写的话会暴露模块中的所有成员，内部状态可以被外部状态改写。

Javascript模块化的写法—立即执行函数（闭包）

  1. var moduleA = (function(){
  2.       var count = 0; //私有变量
  3.       function showA(){ //私有方法
  4.         count += 10;
  5.         console.log(count);
  6.       }
  8.       function showB(){
  9.         count *= 5;
  10.         console.log(count);
  11.       }
  12.       return {
  13.         outA: showA,
  14.         outB: showB
  15.       }
  16.     })();
  18.     moduleA.outA();
  19.     moduleA.outB();
  20.     console.log(showA);

解决了全局变量的污染，使其私有化，闭包后的程序无法进行二次编写

Javascript模块化的写法—放大模式

  • 如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用”放大模式”（augmentation）。

    1.            var moduleA = (function () {
    2.       var count = 0; //私有变量
    3.       function showA() {
    4.         //私有方法
    5.         count += 10;
    6.         console.log(count);
    7.       }
    9.       function showB() {
    10.         count *= 5;
    11.         console.log(count);
    12.       }
    13.       return {
    14.         outA: showA,
    15.         outB: showB,
    16.       };
    17.     })();
    19.     moduleA = (function(mod){
    20.       function showC(){
    21.         console.log("我是showC");
    22.       }
    23.       mod.outC = showC;
    24.       return mod;
    25.     })(moduleA);
    27.     moduleA.outA();
    28.     moduleA.outB();
    29.     moduleA.outC();

    Javascript模块化的写法—宽放大模式

    在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用”宽放大模式”。 ```javascript

    1.       var moduleA = (function (mod) {
    2.   var count = 0; //私有变量
    3.   function showA() {
    4.     //私有方法
    5.     count += 10;
    6.     console.log(count);
    7.   }
    9.   function showB() {
    10.     count *= 5;
    11.     console.log(count);
    12.   }
    14.   mod.outA = showA;
    15.   mod.outB = showB;
    17.   return mod;
    18. })(moduleA || {});
  1.   var moduleA = (function(mod){
  2.     function showC(){
  3.       console.log("我是showC");
  4.     }
  5.     mod.outC = showC;
  6.     return mod;
  7.   })(moduleA || {});
  9.   moduleA.outA();
  10.   moduleA.outB();
  11.   moduleA.outC();    
  1. <a name="YSAEC"></a>
  2. ## require.js
  4. - 主要功能是：将页面上所有的.js文件，进行模块化。
  6.     【注】将这个页面要引入的js文件，全部变成模块。
  8. - 声明异步加载
  10. 从这个文件开始，所有的后缀都省略。<br />     【注】一个.html独享一个入口文件。这个入口文件负责管理当前页面上所有的js文件。
  11. ```javascript
  12. <script src = 'js/require.js' defer async = 'true' data-main = 'js/main'></script>

主js页面的写法

  • 对于引入模块的路径，我们可以提前引入
  • 第一个参数是一个数组，写着要引入的模块的路径，第二个参数是回调函数，在回调函数的形参位置，我们可以引入对应的模块 ```javascript console.log(“加载成功”); //配置路径 require.config({ paths: { add: “demo/add” } }) require([“add”], function(add){ console.log(add.addOut(10, 20)); add.showOut(); })
  1. <a name="r5ziE"></a>
  2. ### 副js写法
  3. ```javascript
  4. define(function(){
  5.   function add(x, y){
  6.     return x + y;
  7.   }
  9.   function show(){
  10.     console.log("hello world");
  11.   }
  13.   //对外暴露
  14.   return {
  15.     addOut: add,
  16.     showOut: show
  17.   }
  18. })
  21. define(function(){
  22.   function drag(node){
  23.     node.onmousedown = function(ev){
  24.       var e = ev || window.event;
  25.       var offsetX = e.clientX - this.offsetLeft;
  26.       var offsetY = e.clientY - this.offsetTop;
  28.       document.onmousemove = function(ev){
  29.         var e = ev || window.event;
  30.         var l = e.clientX - offsetX;
  31.         l = range(l, 0, document.documentElement.clientWidth - node.offsetWidth);
  33.         var t = e.clientY - offsetY;
  34.         t = range(t, 0, document.documentElement.clientHeight - node.offsetHeight);
  35.         node.style.left = l + 'px';
  36.         node.style.top = t + 'px';
  37.       }
  38.     }
  39.     document.onmouseup = function(){
  40.       document.onmousemove = null;
  41.     }
  42.   }
  44.   //限制出界
  45.   function range(iCur, iMin, iMax){
  46.     if(iCur <= iMin){
  47.       return iMin;
  48.     }else if(iCur >= iMax){
  49.       return iMax;
  50.     }else{
  51.       return iCur;
  52.     }
  53.   }
  56.   //限制出界函数
  57.   return {
  58.     drag: drag,
  59.     range: range
  60.     // drag
  61.   }
  62. })

如果副js依赖另一个副js的写法

  1. define(['drag'], function(drag){
  2.   /*
  3.     node1 是要缩放的节点
  4.     node2 是拖拽的节点
  6.     当前模块，依赖另外一个模块
  7.   */
  8.   function scale(node1, node2){
  9.     node2.onmousedown = function(ev){
  10.       var e = ev || window.event;
  11.       var l = e.clientX;
  12.       var t = e.clientY;
  13.       var w = node1.offsetWidth;
  15.       var h = node1.offsetHeight;
  17.       document.onmousemove = function(ev){
  18.         var e = ev || window.event;
  19.         //计算两次鼠标的偏移位置
  20.         var W = drag.range(w + e.clientX - l, 100, 500);
  21.         var H = drag.range(h + e.clientY - t, 100, 500);
  22.         node1.style.width = W + 'px';
  23.         node1.style.height = H + 'px';
  24.       }
  25.     }
  26.     document.onmouseup = function(){
  27.       document.onmousemove = null;
  28.     }
  29.   }
  30.   return {
  31.     scale: scale
  32.   }
  33. })

jquery-cookie 依赖于jquery和某一模块不遵从AMD的写法

  1. require.config({
  2.   paths: {
  3.     jquery: "jquery-1.11.3",
  4.     "jquery-cookie": "jquery.cookie",
  5.     parabola: "parabola",
  6.     index: "index"
  7.   },
  8.   //jquery-cookie 依赖于jquery
  9.   shim: {
  10.     //设置依赖关系
  11.     "jquery-cookie": ["jquery"],
  12.     //某一个模块，不遵从AMD
  13.     parabola: {
  14.       exports: "_",
  15.     },
  16.   },
  17. })
  1. define(["jquery", "jquery-cookie"], function($){
  2.   //jquery 和 jquery-cookie 可以通过形参 $拿到
  3.   //编写一些代码在页面上
  4.   //点击页面弹出点击
  5.   function main(){
  6.     $(document).click(function(){
  7.       alert("点击");
  8.     })
  9.   }
  11.   function cookieFunc(){
  12.     var aBtns = $("button");
  13.     aBtns.eq(0).click(function(){
  14.       $.cookie("变种人", "万磁王", {
  15.         expires: 7
  16.       })
  19.       $.cookie("超级赛亚人", "孙悟空", {
  20.         expires: 30
  21.       })
  24.       $.cookie("葫芦娃", "金刚葫芦娃", {
  25.         expires: 1000
  26.       })
  27.     })
  29.     aBtns.eq(1).click(function(){
  30.       console.log($.cookie("变种人"));
  31.       console.log($.cookie("超级赛亚人"));
  32.       console.log($.cookie("葫芦娃"));
  33.     })
  35.     aBtns.eq(2).click(function(){
  36.       $.cookie("葫芦娃", null);
  37.     })
  38.   }
  39.   return {
  40.     main: main,
  41.     cookieFunc: cookieFunc
  42.   }
  43. })