随着网站的不断迭代更新，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. Qt入门学习——Qt 5 帮助文档的使用

    Qt入门学习——Qt 5 帮助文档的使用 学习图形界面开发,肯定离不开帮助文档的使用,因为它不像 C 语言那样就那么几个函数接口,图形接口的接口可以用海量来形容,常用的我们可能能记住,其它的真的没有必 ...

  2. ln 命令

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...

  3. error LNK2019: 无法解析的外部符号

    前些日子电脑系统崩了,重装了了下,原有的项目环境得重新搭建,总是在链接时提示:error LNK2019: 无法解析的外部符号………… 起初以为是库没包含全,可发现不是 有想了下可能是库的包含次序有问 ...

  4. magento 获取attribute的所有option

    $attribute = Mage::getSingleton('eav/config')->getAttribute('catalog_product', 'color');if ($attr ...

  5. C#程序之Main()方法

    一.Main()方法的简介 1.一般情况下,一个C#可执行程序只有一个应用程序对象(也就是就程序入口),但是在某些情况,可能会有多个应用程序对象(程序入口),如单元测试中,这个时候我们就需要通过命令行 ...

  6. Linux学习之more命令

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  7. C++ 获取UUID

    #include <string> #include <stdio.h> #if defined(WIN32)||defined(WINCE)||defined(WIN64) ...

  8. navigator.geolocation例子

    navigator.geolocation例子 <html> <head> <script type="text/javascript"> fu ...

  9. 走进C标准库(5)——"stdio.h"中的其他部分函数

    函数介绍来自:http://ganquan.info/standard-c/ 函数名: freopen 功  能: 替换一个流 用  法: FILE *freopen(char *filename, ...

  10. 什么是JSON对象

    1.什么是json? JSON全称是JavaScript Object Notation,是一种轻量级的数据交换格式.JSON 与XML具有相同的特性,是一种数据存储格式,但是JSON相比XML 更易 ...