经验总结

  1. 首页 > 生活 > >

JavaScript之无题之让人烦躁的模块化( 三 )

生活百科


我们先来看个例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><script src="http://shimg.jingyanzongjie.com/230725/053Z963D-0.jpg"></script><body></body><script>require(["./a"]);</script></html>然后，我们的a.js是这样的：
define(function () {function fun1() {alert("it works");}fun1();});define用来声明一个模块，require导入 。我们还可以这样：
require(["./a"], function () {alert("load finished");});导入前置依赖的模块，在第二个参数也就是回调中执行 。RequireJs会在所有的模块解析完成后执行回调函数 。就算你倒入了一个没有使用的模块，RequireJs也一样会加载：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><script src="http://shimg.jingyanzongjie.com/230725/053Z963D-0.jpg"></script><body></body><script>require(["./a", "./b"], function (a, b) {a.fun1();});</script></html>然后分别是a.js和b.js：
// a.jsdefine(function () {function fun1() {alert("it works fun1");}return {fun1: fun1,};});// b.jsdefine(function () {function fun2() {alert("it works fun2");}return {fun2: fun2,};});结果大家可以试一试～
以上就是RequireJs的简单用法，我们据此知道了两个核心内容，RequireJs基于AMD规范，RequireJs会加载你引入的所有模块，哪怕你并不会真的用到它 。
2、CMD规范与SeaJs由于RequireJs的一些问题，又出现了基于CMD规范的SeaJs，SeaJs和RequireJs有一个最大的不同就是RequireJs希望可以通吃，但是SeaJs则更专注于浏览器，哦对了，CMD的全称叫做：Common Module Definition，即通用模块规范 。
SeaJs的简单用法如下：
// 所有模块都通过 define 来定义define(function(require, exports, module) {// 通过 require 引入依赖var a = require('xxx')var b = require('yyy')// 通过 exports 对外提供接口exports.doSomething = ...// 或者通过 module.exports 提供整个接口module.exports = ...})// a.jsdefine(function(require, exports, module){var name = 'morrain'var age = 18exports.name = nameexports.getAge = () => age})// b.jsdefine(function(require, exports, module){var name = 'lilei'var age = 15var a = require('a.js')console.log(a.name) // 'morrain'console.log(a.getAge()) //18exports.name = nameexports.getAge = () => age})上面的代码是从网上抄的，大概说明白了基本的使用方法 。我们可以看到，SeaJs的导入和导出的方式，跟NodeJs好像～～而SeaJs从书写形式上，更像是CommonJs和AMD的结合 。当然，我只是说书写形式上 。
而AMD和CMD，RequireJs和SeaJs，都是由社区发起的，并没有语言层面的规范，包括CommonJs以及NodeJs，所以，这个时代还是一个百花争艳，没有统一的时代，不过在现在，这些都不重要了 。如果非要我说些什么，那就是，忘记这两个东西，去学下面的重点 。
四、大一统百花争艳的时代确实有些烦人，这个那个那个这个，又都不被官方认可，还好，官方终于还是出手了，ES6的出现，在语言层面上就提出了对于模块化的规范，也就是ES6 Module 。它太重要了，具体语法我就不多说了，文末的链接附上了阮一峰大神的《ES6入门指南》关于ES6 Module的地址 。
所以到了ES6的时候，你要学习的就是ES6 Module，NodeJs也在逐步实现对ES6 Module的支持 。最终，秦始皇会一统天下，这是必然的结果 。
这篇文章到这里就结束了，说实话，模块化的问题和历史由来已久，从萌芽到统一，至少十几年的过程，而市面上也已有大量的文章介绍彼此的区别和各自的特点，我写来写去，也不过是复制一遍，毫无意义 。

经验总结扩展阅读


上一篇：比58大比57小的数是多少

下一篇：云梦有什么好玩的地方