博客
关于我
谈谈前端模块化的演变历程
阅读量:430 次
发布时间:2019-03-06

本文共 4291 字,大约阅读时间需要 14 分钟。

前言

Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了,随着前端发展对

模块需求越来越大,模块也是经历了从最初的简单模块写法到AMD和CMD规范的出现,再到ES6发布,目前已经可以
很方便的在Javascript中使用"类"和"模块"了。

一、以前的写法

1、原始写法

function m1(){    //...  }  function m2(){    //...  }

缺点 :

"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

2、对象写法

为了解决上面缺点,把模块写成一个对象,所有的模块成员都放到这个对象里面

var module1 = new Object({    _count : 0,    m1 : function (){      //...    },    m2 : function (){      //...    }  });

使用

module1.m1();

存在缺点:

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。

module1._count = 5;

3、立即执行函数写法

立即执行函数(IIFE),可以达到不暴露私有成员的目的。

var module1 = (function(){    var _count = 0;    var m1 = function(){      //...    };    var m2 = function(){      //...    };    return {      m1 : m1,      m2 : m2    };  })();

上面的写法,外部代码无法读取内部的_count变量。

console.info(module1._count); //undefined

4、放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块

  var module1 = (function (mod){    mod.m3 = function () {      //...    };    return mod;  })(module1);

上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。

5、宽放大模式

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

var module1 = ( function (mod){    //...    return mod;  })(window.module1 || {});

与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。

6、输入全局变量

独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量,必须显式地将其他变量输入模块

var module1 = (function ($, YAHOO) {    //...  })(jQuery, YAHOO);

上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module1

好处:
这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显

二、CommonJS、AMD和CMD的出现

谈到AMD和CMD,不得不说下CommonJS。2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程,

由于浏览器端网页还比较简单 ,对于模块不是特别依赖,但在服务器端因为要与操作系统和其他应用程序互动,CommonJS
就在这样的背景下诞生了。

引入第三方模块并调用方法

var math = require('math');math.add(2,3); // 5

这里有一个CommonJS模块使用的例子

//模块定义 myModule.jsvar name = 'Byron';function printName(){    console.log(name);}function printFullName(firstName){    console.log(firstName + name);}module.exports = {    printName: printName,    printFullName: printFullName}//加载模块var myModule = require('./myModule.js');myModule.printName();

1、AMD规范

想象一下如果把这段代码放到浏览器端 ,math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等

var math = require('math');  math.add(2, 3);

这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态

因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)

AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数

require([module], callback);

上面代码改写成AMD形式就是这样

require(['math'], function (math) {    math.add(2, 3);  });

目前实现AMD规范的有RequireJS和curl.js

RequireJS模块例子:

// 定义模块 myModule.jsdefine('myModule', ['dependency'], function(){    var name = 'Byron';    function printName(){        console.log(name);    }    return {        printName: printName    };});// 加载模块require(['myModule'], function (my){  my.printName();});

2、CMD规范

CMD: Common Module Definition通用模块定义, 由国内发展出来, SeaJS是其典型代表, 即SeaJS是通过浏览器对CMD的具体实现

SeaJS模块例子:

// 定义模块  myModule.jsdefine(function(require, exports, module) {  var $ = require('jquery.js');  var foo = require('foo');  var out = foo.bar();  $('div').addClass('active');  module.exports = out;});// 加载模块seajs.use(['myModule.js'], function(my){});

3、CommonJS、AMD和CMD区别

  • CommonJS是同步的, 主要用于服务器
  • AMD和CMD是异步的, 两者的模块定义和加载机制稍有不同, 主要用于浏览器
  • AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块,CMD`推崇就近依赖,只有在用到某个模块的时候再去require
    两个都是定义的全局define函数来定义模块, define接收函数function(require, exports, module)保持一致
  • CMD是懒加载, 仅在require时才会加载模块; - AMD是预加载, 在定义模块时就提前加载好所有依赖
  • CMD保留了CommonJS风格

三、ES6的使用

ES6在语言标准的层面上, 实现了模块功能, 而且实现得相当简单, 完全可以取代CommonJS和AMD规范, 是浏览器和服务器通用的模块解决方案

ES6模块例子:

//模块定义 myModule.jsconst name = 'Byron';function printName(){    console.log(name);}function printFullName(firstName){    console.log(firstName + name);}const myModule = {    printName: printName,    printFullName: printFullName};export myModule;//加载模块import myModule, { printFullName } from './myModule.js';myModule.printName();printFullName('Michael');

四、最后再说说browserify和webpack

说到 browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。

1、seajs / require :

是一种在线"编译"模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

2、browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。

参考阅读:

转载地址:http://zqiuz.baihongyu.com/

你可能感兴趣的文章
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法(mysql字符串替换)
查看>>
mysql replace用法
查看>>
Mysql Row_Format 参数讲解
查看>>
mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序
查看>>
MySQL Server 5.5安装记录
查看>>
mysql server has gone away
查看>>
mysql slave 停了_slave 停止。求解决方法
查看>>
MySQL SQL 优化指南:主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
查看>>
MYSQL sql语句针对数据记录时间范围查询的效率对比
查看>>
mysql sum 没返回,如果没有找到任何值,我如何在MySQL中获得SUM函数以返回'0'?
查看>>
mysql Timestamp时间隔了8小时
查看>>
Mysql tinyint(1)与tinyint(4)的区别
查看>>
mysql union orderby 无效
查看>>
mysql v$session_Oracle 进程查看v$session
查看>>
mysql where中如何判断不为空
查看>>
MySQL Workbench 使用手册:从入门到精通
查看>>
mysql workbench6.3.5_MySQL Workbench
查看>>
MySQL Workbench安装教程以及菜单汉化
查看>>