随着网站的不断迭代更新，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. ListView.setOnItemClickListener 点击无效

    如果ListView中的单个Item的view中存在checkbox,button等view,会导致ListView.setOnItemClickListener无效, 事件会被子View捕获到,Li ...

  2. Spring、使用注解方式装配对象（@Resource、@Autowired）

    使用手工注解方式有两种方式@Resource.@Autowired 首先,引入注解所使用的Jar包  :common-annotations.jar 然后在beans.xml中加入命名空间空间 xml ...

  3. 简单实现仿UITabBarController界面

    第一步:添加两个占位View 第二步:添加子控制器 第三步:添加按钮 #import "ViewController.h" #define SCREEN_WIDTH ([UIScr ...

  4. DQL

    DQL(Data QueryLanguage) 基本格式 select * from 表名 对于列进行限制 格式一:取指定列 select 列1,列2 from 表名 格式二:为列起别名的三种表示法, ...

  5. 切换tab，并且动态添加标签

    <script type="text/javascript"> /*处理ie7.ie8不兼容getElementsByClassName*/ if(!document. ...

  6. 20151214--JSTL

  7. 摩根斯坦利 - 2016年09月8日 面试题 - HashMap

    摩根斯坦利 - 2016年09月8日 面试题: 给定一个 Map<Person, Object> map = new HashMap<Person, Object>(); 放入 ...

  8. leetcode first bad version python

    # The isBadVersion API is already defined for you. # @param version, an integer # @return a bool # d ...

  9. leetcode Longest Valid Parentheses python

    class Solution(object): def longestValidParentheses(self, s): """ :type s: str :rtype ...

  10. ecshop开发日志之手机端虚拟商品自动发货

    在ecshop官方模版收,web端的虚拟商品购买后不能像pc端那般直接在付款后出现虚拟商品的卡号,密码,截止日期一下为让手机购买也可以在付款后自动显示发货并能显示卡号密码截止日期首 先找到pc端的fl ...