在网上已经有很多关于模块化开发的文章了，这里还是按照自己的理解来整理一下。

随着项目文件的越来越大和需求的越来越贴近现实（我发现现在客户不如：一个领导说我要审批你们报上来的资料，系统发布以后用的还不错，可能是有那个新鲜感，等领导烦了说：每个文件我都这么操作太累了，能不能一次报，到最后说能不能自动判断对不对……），以后的需求估计要让做个人工智能出来……借着上面继续，需求的内容越来越复杂，一个人开发时间长，多个人开发这样那样的问题一堆等等这时候Javascript模块化开发诞生了。

先说说发展历程

刚开始是这样写代码的：

function func1() { }

function func2() { }

后来经过变形是这样的：

var obj = {

    func1: function () {

    },

    func2: function () {

    }

}

最后经过总价实践后是这样的：

(function () { })();

闭包：至于这种方式防止全局变量的污染，有效的提高了开发的思路和开发的效率。

这里重点说下我设想的思路:

上面的项目文件列表是这样的；index主页上面有不同的标签，每个标签下面有不同的功能（很复杂的）。Index的代码如下

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>JavaScript模块化编程</title>

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

    <script src="Js/main.js"></script>

    <script src="Js/a.js"></script>

    <script src="Js/b.js"></script>

    <script src="Js/c.js"></script>

</head>

<body>

</body>
</html>

mian处理公用的业务逻辑，a，b，c不同的功能块

main.js的代码如下：

$(function () {

    var sum = myModule.addMethod(1),

        sub = myModule.subMethod(1, 3),

        mod = myModule.modMethod(1, 3);

    myModule.alert = function () {

        alert($().jquery);

    };

});

a.js的代码如下:

(function (my) {

    var x = 8;

    my.addMethod = function () {

        return arguments[0] + x;

    }

})(window.myModule = window.myModule || {});

b和c的代码就不帖了和a的雷同；

为什么这么写呢？假如说写成下面的样子行吗？

(function (my) {

    my.modMethod = function () {

        return arguments[0] / arguments[1];

    };

    //比如执行完异步后执行

    my.callBack = function () {

        if (typeof arguments[0] == "function") {

            arguments[0]();

        }

    }

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

如果写成了以上的这种，在index页面上引入js的顺序变化有可能window.myModule就是undefined.

a,b,c都是一个页面上不用的业务逻辑处理，当然相互可以关联，导入。

这样就有效的阻止了全局变量的污染, 可以找不同的开发者开发同一个模块。

那这样暴漏出另一个问题就是index页面上引入的js过于过，而且会影响加载速度，在访问index的时候也许只用到a脚本，点击某个按钮才用到b脚本。这就引入下个话题："require.js"

JavaScript模块化开发整理的更多相关文章

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

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

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

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

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

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

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

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

  5. 详解JavaScript模块化开发

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

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

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

  7. JavaScript模块化开发实例

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

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

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

  9. （转）详解JavaScript模块化开发

    https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...

随机推荐

  1. 【noiOJ】p8210

    10:河中跳房子 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 每年奶牛们都要举办各种特殊版本的跳房子比赛,包括在河里从一个岩石跳到另一个岩石.这项激动人心 ...

  2. SQL 学习笔记

    1.判断数据库中某个值是否为null(而不是'null',空字符串'',若干个空格' ') 一定不能用=null 或 !=null,而要用is null 或 is not null. 2.在sqlse ...

  3. 基于S5PC100裸机程序之SPI(上)

    作者:杨老师,华清远见嵌入式学院讲师. SPI作为应用最为广泛的通信总线协议之一,开发人员应当掌握,本章将介绍SPI总线协议的基本理论,以及S5PC100的SPI总线控制器的操作方法. 1. SPI总 ...

  4. 最完美解决方案：js弹出窗口关闭当前页面，而不弹出提示框

    该功能主要用于业务系统中的登录操作,登录后弹出全屏的业务系统主界面,而不需要工具栏.地址栏.菜单等功能. 之前针对不同浏览器找了无数种方法,包括网上能查到的所有方法,弹出的结果都不理想.结果有的IE6 ...

  5. HBase1.0以上版本的API改变

    HBase1.0以上版本已经废弃了 HTableInterface,HTable,HBaseAdmin等API的使用,新增了一些API来实现之前的功能: Connectioninterface: Co ...

  6. golang 简易聊天

    client.go ------------------------------ package main import ( "net" "fmt" " ...

  7. onselectstart

    以前在做图片滚动时,在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题IE及Chrome下的方法一样,对相应的元素 ...

  8. 李洪强iOS经典面试题132-版本控制

    面试过程中,可能会问及一些关于版本控制的问题,理解下SVN和Git的原理,记住常用命令即可. SVN SVN 是集中式源代码管理工具 概念: 1> Repository 代码仓库,保存代码的仓库 ...

  9. 获取IP（windows和linux）

    #ifdef _WIN32 #include <winsock2.h> #include <Ws2tcpip.h> #pragma comment(lib,"ws2_ ...

  10. html制作一个美观的搜索框

    一般情况下搜索栏就是form标签中的一个input标签. 如: <form> <input type="text" placeholder=" 搜索关键 ...