随着网站的不断迭代更新，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. C语言的本质（10）——指针本质

    指针,大概是C语言中最难理解的概念之一了.指针这个东西是C语言中的一个基本概念,C99中对于指针的定义是: 1. 指针的类型是derived from其它类型,也就是说指针的类型是由它指向的类型决定的 ...

  2. req.xhr在express中的应用

    req.xhr判断请求来自ajax还是普通请求: 若为ajax则是为true 这个属性是通过判断headers中的 x-requested-with的值来判断的 下面是来自ajax的请求: 1 hos ...

  3. 关于关注和取消关注的nodejs写法

    本例子的关注和取消关注,是通过ajax的方法实现的:nodejs后台写好api接口:响应前台的ajax 先看ajax的代码实现: // 用户关注标签 function subscribe(uid, t ...

  4. 如何在TableView上添加悬浮按钮

    如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬 ...

  5. MVC5 Controller简要创建过程（2）：由ControllerFactory创建Controller

    上文已经完成了ControllerFactory的创建,接下来就是调用其CreateController()方法创建Controller了. DefaultControllerFactory中Crea ...

  6. React系列（一）：React入门

    React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...

  7. 自学SQL语言的例子（使用MySQL实现）

    SQL语言作为一种数据库管理的标准语言有着极为广泛的应用场景,菜鸟入门选用的数据库软件是轻量级的免费(这个极为重要)的MySQL,下载链接如下:http://www.mysql.com/downloa ...

  8. EBS R12 修改 apps 密码[Z]

    注意:修改密码时应保证所有用户已退出, 最好是关闭应用实例.不用关闭数据库.在修改密码之前一定要改备下数据库中的FND_ORACLE_USERID和FND_USER表.FNDCPASS工具会自动把AP ...

  9. Global.asax 文件说明

    引用 来自  http://www.cnblogs.com/jianshao810/archive/2011/02/03/1948912.htm 在网上找了N多相关的东西总说的不够细,现在终于找到了. ...

  10. js——DOM操作（二）

    表格属性: tHead:表格头 tBodies:表格正文 tFoot:表格尾 rows:行 cells:列 表单操作: <form id="form1"> <in ...