随着网站的不断迭代更新，js代码越来越多，那么问题来了

  • 代码比较乱

  • 命名出现冲突

  • 文件依赖比较繁杂

为了解决以上问题，模块化开发出现了

1、一个简单的demo，维护和扩展模块

模块的维护和扩展一定要遵守一个约定：开闭原则

对添加开放，对修改封闭

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>扩展和维护模块</title>

</head>

<body>

  <div>

    <input type="text" id="x">

    <select name="" id="opt">

      <option value="0"> + </option>

      <option value="1"> - </option>

      <option value="2"> * </option>

      <option value="3"> / </option>

      <option value="4"> % </option>

    </select>

    <input type="text" id="y">

    <input type="button" id="btn" value="=">

    <input type="text" id="result">

  </div>

  <script>

  /**

   * 通过 匿名自执行函数，利用函数作用域的机制 隔离私有变量

   */

  var calculator = (function() {

    // 对于 _count 来说，如果不通过 return ，外部是无法访问的，无法修改

    var _count = 10;

    function add(x, y) {

      return parseFloat(x) + parseFloat(y);

    };

    function substract(x, y) {

      return parseFloat(x) - parseFloat(y);

    };

    function multiply(x, y) {

      return parseFloat(x) * parseFloat(y);

    };

    function divide(x, y) {

      return parseFloat(x) / parseFloat(y);

    };

    return {

      add: add,

      substract: substract,

      multiply: multiply,

      divide: divide

    };

  })();

  var calculator = (function(cal) {

    cal.mod = function(x, y) {

      return x % y;

    };

    return cal;

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

  // 看一下 全局有没有 calculator 该对象，如果有，直接使用该对象就可以了

  // 如果没有，给一个默认的空对象，一种更 鲁棒 的做法，更高的容错性，永远不要相信用户的输入

  var oX = document.getElementById('x');

  var oY = document.getElementById('y');

  var oOpt = document.getElementById('opt');

  var oBtn = document.getElementById('btn');

  var oResult = document.getElementById('result');

  oBtn.addEventListener('click', function(e) {

    var x = oX.value.trim();

    var y = oY.value.trim();

    var opt = oOpt.value;

    var result = 0;

    switch (opt) {

      case '0':

        result = calculator.add(x, y);

        break;

      case '1':

        result = calculator.substract(x, y);

        break;

      case '2':

        result = calculator.multiply(x, y);

        break;

      case '3':

        result = calculator.divide(x, y);

        break;

      case '4':

        result = calculator.mod(x, y);

        break;

    }

    oResult.value = result;

  });

  </script>

</body>

</html>

2、第三方包依赖的解决

不要直接在模块内部使用第三方依赖，因为模块与模块之间的依赖关系不够明显，最好通过将依赖项注入的形式来解决第三方依赖的问题

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>第三方包依赖的问题</title>

</head>

<body>

  <div>

    <input type="text" id="x">

    <select name="" id="opt">

      <option value="0"> + </option>

      <option value="1"> - </option>

      <option value="2"> * </option>

      <option value="3"> / </option>

      <option value="4"> % </option>

    </select>

    <input type="text" id="y">

    <input type="button" id="btn" value="=">

    <input type="text" id="result">

  </div>

  <!--

    模块依赖的问题

    1. 手动方式加载：不方便

    2. 模块的加载顺序：可能会出错

   -->

  <script src="../js/jquery-1.11.3.js"></script>

  <script>

  /**

   * 通过 匿名自调用函数，利用函数作用域的机制隔离私有变量

   */

  var calculator = (function() {

    // 对于 _count 来说，如果不通过 return ，外部是无法访问的，无法修改

    var _count = 10;

    function add(x, y) {

      return parseFloat(x) + parseFloat(y);

    };

    function substract(x, y) {

      return parseFloat(x) - parseFloat(y);

    };

    function multiply(x, y) {

      return parseFloat(x) * parseFloat(y);

    };

    function divide(x, y) {

      return parseFloat(x) / parseFloat(y);

    };

    return {

      add: add,

      substract: substract,

      multiply: multiply,

      divide: divide

    };

  })();

  var calculator = (function(cal,$) {

    cal.changeColor = function() {

      $('#x').css('backgroundColor', 'red');

      $('#y').css('backgroundColor', 'green');

    };

    return cal;

    // 不要直接用$或其他第三方包，一定要把依赖项 通过参数的形式 注入进来，然后在内部使用注入的属性

    // 好处：

    // 1. 依赖关系变的明显，有利于代码的阅读

    // 2. 提高了性能：减少了作用域的查找范围

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

  var oX = document.getElementById('x');

  var oY = document.getElementById('y');

  var oOpt = document.getElementById('opt');

  var oBtn = document.getElementById('btn');

  var oResult = document.getElementById('result');

  oBtn.addEventListener('click', function(e) {

    calculator.changeColor();

    var x = oX.value.trim();

    var y = oY.value.trim();

    var opt = oOpt.value;

    var result = 0;

    switch (opt) {

      case '0':

        result = calculator.add(x, y);

        break;

      case '1':

        result = calculator.substract(x, y);

        break;

      case '2':

        result = calculator.multiply(x, y);

        break;

      case '3':

        result = calculator.divide(x, y);

        break;

      case '4':

        result = calculator.mod(x, y);

        break;

    }

    oResult.value = result;

  });

  </script>

</body>

</html>

模块化开发的总结：

最大的问题，即规范问题，尤其在多人协作开发过程中，因此在多人协作开发过程中，一定要注意代码风格的统一。

为了解决模块化规范问题，出现了第三方库，基于AMD规范的Require.js和基于CMD规范的Sea.js,具体使用方法，参考其文档，至于AMD和CMD规范的区别可以参考以下博客

http://www.cnblogs.com/dojo-lzz/p/4707725.html

http://blog.chinaunix.net/uid-26672038-id-4112229.html

javascript模块化开发编程的更多相关文章

  1. JavaScript模块化开发整理

    在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...

  2. JavaScript模块化开发的那些事

    模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...

  3. Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  4. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  5. Javascript模块化开发－轻巧自制

    Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...

  6. JavaScript模块化开发&&模块规范

    在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...

  7. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

  8. 2.精通前端系列技术之JavaScript模块化开发 seajs（一）

    在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...

  9. JavaScript模块化开发实例

    最近接触了一些JavaScript开发的例子,在这里与大家一起分享一下: 例子:当我们一个团队在写Js文件的时候,你一个人写的JS代码自己可以看懂也可以维护,但是别人想对你的JS进行扩展的话,如果都在 ...

随机推荐

  1. aix puppet agent

    demo控制脚本tel,150 5519 8367 Running Puppet on AIX Puppet on AIX is… not officially supported, yet stil ...

  2. network is unreachable 解决方案之一

    请按http://blog.csdn.net/oxiaoxio/article/details/41775183 一文中的设置方法设置:

  3. C# base和this[转]

    new关键字引起了大家的不少关注,尤其感谢Anders Liu的补充,让我感觉博客园赋予的交流平台真的无所不在.所以,我们就有必要继续这个话题,把我认为最值得关注的关键字开展下去,本文的重点是访问关键 ...

  4. hdu 1520Anniversary party(简单树形dp)

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  5. Nagios利用NSClient++监控Windows主机

    在Nagios的libexec下有check_nt这个插件,它就是用来检查windows机器的服务的.其功能类似于check_nrpe.不过还需要搭配另外一个软件NSClient++,它则类似于NRP ...

  6. setter设置器 gutter访问器

    set方法书写规范: 1.必须以set开头,set后跟去掉下划线的实例变量并且首字母大写.ps: setAge:2.一定有参数3.不能有返回值4.一定是对象方法(-开头)5.形参一般是去掉下划线的实例 ...

  7. 标准建立二叉树NEW

    #include<iostream> #include<sstream> #include<stdio.h> #include<string> #inc ...

  8. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  9. 《javascript dom编程艺术》笔记（二）——美术馆示例

    这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是 ...

  10. css3之border-color

    -moz-border-top-colors:上边框-moz-border-right-colors:右边框-moz-border-bottom-colors:下边框-moz-border-left- ...