js 模块化编程

还有个问题，上述代码暴露了两个全局变量，容易造成全局变量的污染

3. AMD

---

AMD 即 Asynchronous Module Definition（异步模块定义）。采取异步加载的方式加载模块，模块的加载不会影响它后面的语句执行。而且只有用到的时候才会去加载相关文件，属于浏览器端的标准

假设下面这种情况

// util.js

define(function(){

return {

getFormatDate:function(date,type){

if(type === 1){

return ‘2018-08-9’

}

if(type === 2){

return ‘2018 年 8 月 9 日’

}

}

}

})

// a-util.js

define([‘./util.js’],function(util){

return {

aGetFormatDate:function(date){

return util.getFormatDate(date,2)

}

}

})

// a.js

define([‘./a-util.js’],function(aUtil){

return {

printDate:function(date){

console.log(aUtil.aGetFormatDate(date))

}

}

})

// main.js

require([‘./a.js’],function(a){

var date = new Date()

a.printDate(date)

})

console.log(1);

// 使用

//

页面上先打印 1，然后才会打印 2018 年 8 月 9 日。因此 AMD 的加载并不会影响后续的语句执行。

如果不是异步加载会出现什么情况呢

var a = require(‘a’);

console.log(1)

后面的语句需要等待 a 加载完成才能执行，如果加载时间过长，整个程序都会卡在这。因此，浏览器不能同步加载资源，这也是 AMD 的产生背景。

AMD 是在浏览器端实现模块化开发的规范。由于该规范不是 JavaScript 原始支持的，使用 AMD 规范进行开发的时候需要引入第三方的库函数，也就是 RequireJS。

RequireJS 主要解决的问题

• 使 JS 异步加载，避免页面失去响应

• 管理代码之间的依赖性，有利于代码的编写和维护

下面来看看如何使用 require.js

要想使用 require.js，首先要 define

// ? 代表该参数可选

define(id?, dependencies?, factory);

• id：指的是定义的模块的名字

• dependencies：是定义的模块所依赖模块的数组

• factory：为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

具体的规范说明可以参考 AMD (中文版)

举个例子，创建一个名为 “alpha” 的模块，使用了 require，exports，和名为 “beta” 的模块:

define(“alpha”, [“require”, “exports”, “beta”], function (require, exports, beta) {

exports.verb = function() {

return beta.verb();

//Or:

return require(“beta”).verb();

}

});

一个返回对象的匿名模块：

define([“alpha”], function (alpha) {

return {

verb: function(){

return alpha.verb() + 2;

}

};

});

一个没有依赖性的模块可以直接定义对象：

define({

add: function(x, y){

return x + y;

}

});

如何使用

AMD 采用 require 语句加载模块

require([module],callback);

• module：是一个数组，里面的成员是要加载的模块

• callback：加载成功之后的回调函数

例如

require([‘./a.js’],function(a){

var date = new Date()

a.printDate(date)

})

具体的使用方法如下

// util.js

define(function(){

return {

getFormatDate:function(date,type){

if(type === 1){

return ‘2018-08-09’

}

if(type === 2){

return ‘2018 年 8 月 9 日’

}

}

}

})

// a-util.js

define([‘./util.js’],function(util){

return {

aGetFormatDate:function(date){

return util.getFormatDate(date,2)

}

}

})

// a.js

define([‘./a-util.js’],function(aUtil){

return {

printDate:function(date){

console.log(aUtil.aGetFormatDate(date))

}

}

})

// main.js

require([‘./a.js’],function(a){

var date = new Date()

a.printDate(date)

})

// 使用

//

假设这里有 4 个文件，util.js，a-util.js 引用了 util.js，a.js 引用了 a-util.js，main.js 引用了 a.js。

其中，data-main 属性的作用是加载网页程序的主模块。

上例演示了一个主模块最简单的写法，默认情况下，require.js 假设依赖和主模块在同一个目录。

使用 require.config() 方法可以对模块的加载行为进行自定义。require.config() 就写在主模块（main.js）的头部，参数是一个对象，这个对象的 paths 属性指定各个模块的加载路径

require.config({

paths:{

“a”:“src/a.js”,

“b”:“src/b.js”

}

})

还有一种方法是改变基础目录（baseUrl）

require.config({

baseUrl: “src”,

paths: {

“a”: “a.js”,

“b”: “b.js”,

}

});

4. CommonJS

---

commonJS 是 nodejs 的模块化规范，现在被大量用在前端，由于构建工具的高度自动化，使得使用 npm 的成本非常低。commonJS 不会异步加载 JS，而是同步一次性加载出来

在 commonJS 中，有一个全局性的方法 require()，用于加载模块，例如

const util = require(‘util’);

然后，就可以调用 util 提供的方法了

const util = require(‘util’);

var date = new date();

util.getFormatDate(date,1);

commonJS 对于模块的定义分三种，模块定义（exports），模块引用（require）和模块标示（module）

exports() 对象用于导出当前模块的变量或方法，唯一的导出口。require() 用来引入外部模块。module 对象代表模块本身。

举个栗子

// util.js

module.exports = {

getFormatDate:function(date, type){

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。