js模块化编程发展历程

随着业务需求的不断发展变化，web前端用到的js代码也变得越来越复杂，过去松散的代码管理方式使开发和维护就变得越发困难，管理好js代码就成为前端工程师们不得不面对的问题，而js的模块化编程就是在这一实践中的产物。本文旨在对js模化编程做一记录。

一、为什么要模块化？

解决全局变量灾难
避免命名冲突
代码解耦
利于多人开发、代码共享
方便维护

二、历程

命名空间 + 闭包

namespaceA.app.module = function(){var a = 0;return {add:function(){return a++;},minus:function(){return a--;}}
}

即调匿名函数

;(function(global){//此处写代码
})(window);

CommonJs模块

规范来至node.js:http://wiki.commonjs.org/wiki/Modules/1.0

//otherModule.js
exports.log = function(){console.log("this is a module");
}//mymodule.js
var log = require("otherModule").log;
exports.mylog = function(){console.log("===mylog===");log();
}

不过，以上的写法并不适合在浏览器端使用,原因在于：

外层没有function包裹，变量全暴漏在全局。
资源的加载方式与服务端完全不同。前端通过创建一个script标签来加载js代码，难以保证代码同步执行。

而对于如何在浏览器中实现模块化，制定以上规范的大牛们出现了意见分歧，以致产生了三种：

1. 用工具将按服务端规范编写的代码转换成能够在客户端运行的js代码，browserify工具就是这样的一个工具。

2. AMD模块（Asynchronous Module Definition）
https://github.com/amdjs/amdjs-api/wiki/AMD, require.js即为该规范的实现。（预加载，预执行；或懒加载执行）

思想基础：模块的加载通过下载-回调这样的过程来进行。

– 用全局函数define来定义模块，用法为：define(id?, dependencies?, factory);

Example:

Sets up the module with ID of “alpha”, that uses require, exports and the module with ID of “beta”:

 define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {exports.verb = function() {return beta.verb();//Or:return require("beta").verb();}});

An anonymous module that returns an object literal:

  define(["alpha"], function (alpha) {return {verb: function(){return alpha.verb() + 2;}};});

A dependency-free module can define a direct object literal:

  define({add: function(x, y){return x + y;}});

A module defined using the simplified CommonJS wrapping:

 define(function (require, exports, module) {var a = require('a'),b = require('b');exports.action = function () {};});

3. CMD（兼容 CommonJs和AMD优点的规范，Wrappings规范。）
http://wiki.commonjs.org/wiki/Modules/Wrappings

sea.js即为该规范的实现。（http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html）（就近书写，延迟执行）

Example:
A basic wrapped module:

module.declare(function(require, exports, module)
{exports.foo = "bar";
});

A wrapped module returning a value:

module.declare(function(require)
{return { foo: "bar" };
});

A wrapped module with an object factory:

module.declare(
{foo: "bar"
});

ES6模块化
http://es6.ruanyifeng.com/#docs/module

import a from 'a.js';
var b = a;
export {b};

参考：http://web.jobbole.com/83761/

js模块化编程发展历程相关推荐

JavaScript进阶(十二)JS 模块化编程规范-CommonJS、AMD、CMD、ES6
文章目录一.前言二.AMD-异步模块定义三.CMD-同步模块定义四.CommonJS 规范五.ES6 六.拓展阅读一.前言 AMD.CMD.CommonJs是ES5中提供的模块化编程方案, ...
js模块化编程之彻底弄懂CommonJS和AMD/CMD！
为什么80%的码农都做不了架构师?>>> 先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前 ...
js模块化编程之彻底弄懂CommonJS和AMD/CMD
转载地址:http://www.cnblogs.com/chenguangliang/p/5856701.html 先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想 ...
node.js模块化编程---学生信息管理系统demo(2)
功能模块化新建student.js文件,将要实现的功能进行模块化处理,同时封装要调用的函数API student.js,导出对象为student.(API这里就不写了,在后面会给出) var exp ...
JS模块化编程require.js简介
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
Vue.js 框架的发展历程
一.框架的出现尤雨溪表示: 在我使用一些现有框架去完成一些特殊处理的时候发现这些框架并不能真正解决我的问题,第一个使用过的框架是Backbone,但这个更像是一个应用程序框架,它不会给你任何的视图互 ...
从头开始写框架(一):浅谈JS模块化发展
博客申请下来已经过去一个月了,一直不知道写点什么,毕竟我的文笔不是很好orz. 不过既然申请下来了,不写点什么总是觉得很可惜.正好最近在自己写框架,就把自己的进程和一些心得体会分享出来吧. 写在前面: ...
JS模块化的'前世今生'
一.模块化定义模块,又称构件,是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体) ------ 百度百科模块化的关键字为:单独命名. 特定功能.程序集合二.原始写 ...
js define函数_聊聊JS模块化发展历程
1 引言如今,Javascript 模块化规范非常方便.自然,但这个新规范仅执行了2年,就在 4 年前,js 的模块化还停留在运行时支持,10 年前,通过后端模版定义.注释定义模块依赖.对经历过来的 ...
javascript模块化发展历程
什么是模块化 ? 为什么要做Javascript模块化? JavaScript 模块化发展历程什么是模块化 ? 模块化是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职 ...

js模块化编程发展历程

js模块化编程发展历程相关推荐

最新文章

热门文章