随着网站的不断迭代更新，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. ln 命令

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

  2. poj3006

                                                                                 Dirichlet's Theorem on ...

  3. jQuery中的supersized的插件的功能描述

    Supersized特性: 自动等比例调整图片并填充整浏览器个屏幕. 循环展示图片,支持滑动和淡入淡出等多种图片切换效果. 导航按钮,支持键盘方向键导航. XHTML <div id=" ...

  4. 全国计算机等级考试二级教程-C语言程序设计_第6章_字符型数据

    #include <stdio.h> main() { char c; char d; c = ; d = '; if (c == d) { printf("yes\n" ...

  5. android 网络状态判断【转】

    import java.net.InetAddress; import android.app.Activity;import android.content.Context;import andro ...

  6. android入门——数据存储

    首先是SharedPreferences 用户偏好 package com.example.wkp.aboutdata; import android.content.Intent; import a ...

  7. 第9课_3_db库安装

    四 安装listener监听 使用oracle用户,在rac1和rac2上都可以起netca 1.打开网络配置界面,选择"Cluster configuration"集群配置方案, ...

  8. 关于new 和delete

    这是百度知道上的答案,感觉讲的很生动形象,接下来要搞清楚的是new是关键字还是函数,new可以重载吗? 你想弄懂这个问题,首先你要弄清楚数据的3种存储方式. 1.静态区: 全局变量. 2.堆: 程序执 ...

  9. Qt QtableView使用

    ui->setupUi(this); ui->mainToolBar->hide(); tableView = new QTableView(this); // 设置表头 QStan ...

  10. leetcode Search for a Range python

    class Solution(object): def searchRange(self, nums, target): """ :type nums: List[int ...