js几种常见【模块化的编程方式】。。。

 一、对象方式：减少对全局变量的污染

简单而常用的方法

var math = {};
    math.calculator = {};
    math.calculator.add = function(a, b) {
      return a + b;
    };
   //--------------------
    math.convertor = {};
    math.convertor .add = function(a, b) {
      return a + b;
    };      

二、私有空间划分：减少对全局变量的污染

var calculator = (function() {
      // 这里形成一个单独的私有的空间

      // 私有成员的作用，将一个成员私有化， 抽象公共方法（其他成员中都会用到的）

      // 私有的转换逻辑
      function convert(input){
        return parseInt(input);
      }

      function add(a, b) {
        return convert(a) + convert(b);
      }

      function subtract(a, b) {
        return convert(a) - convert(b);
      }

      function multiply(a, b) {
        return convert(a) * convert(b);
      }

      function divide(a, b) {
        return convert(a) / convert(b);
      }

　　　//向外抛出对外接口
      return {
        add: add,
        subtract: subtract,
        multiply: multiply,
        divide: divide
      }
    })();

      

//使用方法：
 calculator.add(ta.value, tb.value)；
 calculator.subtract(ta.value, tb.value);
 calculator.multiply(ta.value, tb.value);
 calculator.divide(ta.value, tb.value);      

三、自执行函数方式：减少对全局变量的污染   方便维护和在外部进行扩展

相对较为流行的做法。

原则：高内聚，低耦合！

(function(calculator) {

      function convert(input) {
        return parseInt(input);
      }

      calculator.add = function(a, b) {
        return convert(a) + convert(b);
      }

      window.calculator = calculator;

    })(window.calculator || {});

    // 如果想要新增需求的话，可以再函数的外部进行。这样可以有效的避免冲突
    // calc_v2016.js
    (function(calculator) {
      function convert(input) {
        return parseInt(input);
      }
      // calculator 如果存在的话，我就是扩展，不存在我就是新加
      calculator.remain = function(a, b) {
        return convert(a) % convert(b);
      }
      window.calculator = calculator;
    })(window.calculator || {});

//使用方法：
 calculator.add(ta.value, tb.value);

      

 // 开闭原则，对新增开放，对修改关闭；

四、 依赖第三方的方式：减少对全局变量的污染  方便维护和在外部进行扩展，减少对外部文件的依赖。

(function(calculator) {
      // 对全局产生依赖，不能这样用
      console.log($);  //------------------------------不推荐这种直接依赖外部文件的方式
      function convert(input) {
        return parseInt(input);
      }
      calculator.add = function(a, b) {
        return convert(a) + convert(b);
      }

      window.calculator = calculator;

    })(window.calculator || {});

    // 新增需求，可以再函数的外部进行。这样可以有效的避免冲突
    // calc_v2016.js
    (function(calculator, $) {    //引用外部的对象进行传参，减少内部直接对外部的依赖
      // 依赖函数的参数，是属于模块内部
      // console.log($);
      // $().
      function convert(input) {
        return parseInt(input);
      }
      // calculator 如果存在的话，我就是扩展，不存在我就是新加
      calculator.remain = function(a, b) {
        return convert(a) % convert(b);
      }
      window.calculator = calculator;
    })(window.calculator || {}, jQuery);    //---------------------推荐使用传参的方式，来实现依赖      

给心灵一个纯净空间，让思想，情感，飞扬！