正文
javascript创建模块,js模块开发教程
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
javascript最新版本是什么？引入了哪些新的特性？
EMCAScript6（ES6）是最新的Javascript，它包含了一些很棒的新特性。这些特性拥有不同程度的复杂性，对于简单的脚本和复杂的应用程序都非常的有用。\x0d\x0a\x0d\x0a增加的新特性：\x0d\x0a\x0d\x0a1.箭头操作符\x0d\x0a 如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头操作符=便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=outputs。\x0d\x0a 我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头操作符后可以方便地写回调了。\x0d\x0a\x0d\x0a2.类的支持\x0d\x0a ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。\x0d\x0a\x0d\x0a3.增强的对象字面量\x0d\x0a 对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：\x0d\x0a(1).可以在对象字面量里面定义原型\x0d\x0a(2).定义方法可以不用function关键字\x0d\x0a(3).直接调用父类方法\x0d\x0a\x0d\x0a4.字符串模板\x0d\x0a 字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。\x0d\x0a\x0d\x0a5.解构\x0d\x0a 自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。\x0d\x0a\x0d\x0a6.参数默认值，不定参数，拓展参数\x0d\x0a(1).默认参数值\x0d\x0a 现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。\x0d\x0a(2).不定参数\x0d\x0a 不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，?x代表了所有传入add函数的参数.\x0d\x0a(3).拓展参数\x0d\x0a 拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply。\x0d\x0a\x0d\x0a6.let与const 关键字\x0d\x0a 可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。\x0d\x0a\x0d\x0a7.for of 值遍历\x0d\x0a 我们都知道for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。\x0d\x0a8.模块\x0d\x0a 在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。\x0d\x0a\x0d\x0a9.Map，Set 和 WeakMap，WeakSet\x0d\x0a 这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的get，set方法。\x0d\x0a\x0d\x0a10.Proxies\x0d\x0a Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。\x0d\x0a\x0d\x0a11.Symbols\x0d\x0a 我们知道对象其实是键值对的集合，而键通常来说是字符串。而现在除了字符串外，我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型，像数字，字符串还有布尔一样，它不是一个对象。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。\x0d\x0a\x0d\x0a12.Math，Number，String，Object 的新API\x0d\x0a 对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features，对这些新API进行了简单展示。\x0d\x0a\x0d\x0a13.Promises\x0d\x0a Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式。
相关问答
Q1: 如何加载Nodejs模块
nodejs的几种模块加载方式
一.直接在exports对象中添加方法
1. 首先创建一个模块(module.js)module.js
exports.One = function(){
console.log('first module');
};
2.load.jsvar module =require('./module');
module.One();
这样我们就可以在引入了该模块后,返回一个exports对象,这里是指module对象,其实都只是两个引用或者句柄,只是都指向了同一个资源,在load.js里,module的名字可以是任意取的,因为它仅仅是指向require('./module');返回后的一个实例对象的引用,在load.js文件里的module和在module.js里的exports对象是同一个东西.因此上述两个文件可以用一个文件来表示:exports.One = function(){
console.log('first module');
};
exports.One();
其运行结果是一致的,这里我们可以很清晰的看到,我们在使用require('./xxxx')后其实返回的总是在 xxxx.js文件中的exports对象的引用,这个引用的名字我们可以任意取,但是为了规范我们还是最好取符号某些非标准规定(后面说道),但是这样会有不妥的地方,因为它是始终指向exports的实例对象,也就是说,我们虽然有了这个模块,但是这个模块我们只能使用一次,这取决于rquire('./module')只会加在一次该模块.比如我们修改上述代码,
module.js
var name ;
exports.setName = function(oName){
name = oName;
};
exports.getName = function(){
console.log(name);
};
load.jsvar module1 = require('./module');
module1.setName("felayman1");
module1.getName();
var module2 = require('./module');
module2.setName("felayman2");
module2.getName();
module1.getName();
我们可以看到,虽然我们使用了两次require('./module');,但是当我们修改module2后,module1的内容也被修改,这恰恰说明了,module1和module2是指向的同一个对象.有时候这并不影响我们的程序,但是如果我们的module是Person呢?我们希望我们require('./person')后返回的是不同的对象.因此,这种方式是有缺陷的,尽管很方便,这种方式在大部分nodejs的模块中都是很常见,比如fs模块,http模块等.
二.将模块中的函数挂载到exports对象的属性上
person.js
function Person{
var name;
this.setName = function(theName){
name = theName;
};
this.sayHello = function(){
console.log('Hello',name);
};
}
exports.Person = Person;
load.js
var Person = require('./person').Person;
var person1 = new Person();
person1.setName("felayman1");
person1.sayHello();
var person2 = new Person();
person2.setName("felayman2");
person2.sayHello();
person1.sayHello();
这样我们可以看到,我们就可以引入一个函数了,我们把在person.js文件中的Person函数设置为eports对象的一个属性,我们只需要在load.js文件中引入该属性,就可以获取到多个该函数的实例,在nodejs中的EventEmitter就是基于这种方式,但是这样我们总是在使用 require('./person').Person;这样的写法有点太复杂,因此nodejs允许我们使用其他更简洁的方式,利用全局变量--module,这样我们在其他文件中引入其他模块的时候,就更方便了.
三.利用全局变量module
person.js
function Person(){
var name;
this.setName = function(theName){
name = theName;
};
this.sayHello = function(){
console.log('Hello',name);
};
}
// exports.Person = Person;
module.exports = Person;
load.jsvar Person = require('./person');
var person1 = new Person();
person1.setName("felayman1");
person1.sayHello();
var person2 = new Person();
person2.setName("felayman2");
person2.sayHello();
person1.sayHello();
这样一修改,我们就在使用require函数的时候就方便了,如果觉得这里难以理解,我们可以把两个文件里语法放到一起:var Person = require('./person');
module.exports = Person;
这样,我们就可以看出,其实就是这样var Person = Person.
因为上述我们都已经说过,require('./person')其实就是module.exports 对象的,这里的module我们不用太在意,就跟javascript中的window一样,是一个全局变量,即 module.exports =exports就类似于window.alert() =alert()差不多的效果,这样我们就能看出,我们再次使用require('./person')的时候其实就是导入了我们所需要的exports对象的属性函数模板了,这样我们也可以多次实例化我们所需要的对象了.这种方式是综合了前两种的方法,因此也是官方推荐的使用方法.
Q2: 如何正确理解javascript的模块化
模块化在项目中十分的重要，一个复杂的项目肯定有很多相似的功能模块，如果每次都需要重新编写模块肯定既费时又耗力。但是引用别人编写模块的前提是要有统一的“打开姿势”，如果每个人有各自的写法，那么肯定会乱套，下面介绍几种JS的模块化的规范。
一:模块化进程一：script标签
这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中，不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。
缺点:
1、污染全局作用域
2、开发人员必须主观解决模块和代码库的依赖关系
3、文件只能按照script标签的书写顺序进行加载
4、在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪
二:模块化进程二：CommonJS规范
该规范的核心思想是允许模块通过require方法来同步加载所要依赖的其他模块，然后通过 exports 或 module.exports 来导出需要暴露的接口。
require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;
优点：
1、简单并容易使用
2、服务器端模块便于重用
缺点:
1、同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
2、不能非阻塞的并行加载多个模块
module.exports与exports的区别
1、exports 是指向的 module.exports 的引用
2、module.exports 初始值为一个空对象 {}，所以 exports 初始值也是 {}
3、require() 返回的是 module.exports 而不是 exports
exports示例：
// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
return r * r * Math.PI;
}
module.exports示例：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
return r * r * Math.PI;
}
错误的情况：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
return r * r * Math.PI;
}
其实是对 exports 进行了覆盖，也就是说 exports 指向了一块新的内存（内容为一个计算圆面积的函数），也就是说 exports 和 module.exports 不再指向同一块内存，也就是说此时 exports 和 module.exports 毫无联系，也就是说 module.exports 指向的那块内存并没有做任何改变，仍然为一个空对象{}，也就是说area.js导出了一个空对象，所以我们在 app.js 中调用 area(4) 会报 TypeError: object is not a function 的错误。
总结：当我们想让模块导出的是一个对象时， exports 和 module.exports 均可使用（但 exports 也不能重新覆盖为一个新的对象），而当我们想导出非对象接口时，就必须也只能覆盖 module.exports 。
三:模块化进程三：AMD规范
由于浏览器端的模块不能采用同步的方式加载，会影响后续模块的加载执行，因此AMD(Asynchronous Module Definition异步模块定义)规范诞生了。
AMD标准中定义了以下两个API
1、require([module], callback);
2、define(id, [depends], callback);
require接口用来加载一系列模块，define接口用来定义并暴露一个模块。
示例：
define("module", ["dep1", "dep2"], function(d1, d2){
return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });
优点：
1、适合在浏览器环境中异步加载模块
2、可以并行加载多个模块
缺点：
1、提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不顺畅
2、不符合通用的模块化思维方式，是一种妥协的实现
四:模块化进程四：CMD规范
CMD(Common Module Definition)规范和AMD很相似，尽量保持简单，并与CommonJS和Node.js的 Modules 规范保持了很大的兼容性。在CMD规范中，一个模块就是一个文件。
示例：
define(function(require, exports, module){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
优点：
1、依赖就近，延迟执行
2、可以很容易在 Node.js 中运行
缺点：
1、依赖 SPM 打包，模块的加载逻辑偏重
AMD和CMD的区别
AMD和CMD起来很相似，但是还是有一些细微的差别，让我们来看一下他们的区别在哪里：
1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。
2、AMD推崇依赖前置；CMD推崇依赖就近，只有在用到某个模块的时候再去require。看代码：
// AMD
define(['./a', './b'], function(a, b){ // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
});
// CMD
define(function(require, exports, module){
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b')
// 依赖可以就近书写
b.doSomething()
// ...
});
3、AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。
五:模块化进程五：ES6模块化
EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。
在 ES6 中，我们使用export关键字来导出模块，使用import关键字引用模块。需要说明的是，ES6的这套标准和目前的标准没有直接关系，目前也很少有JS引擎能直接支持。因此Babel的做法实际上是将不被支持的import翻译成目前已被支持的require。
尽管目前使用import和require的区别不大(本质上是一回事)，但依然强烈推荐使用import关键字，因为一旦JS引擎能够解析ES6的import关键字，整个实现方式就会和目前发生比较大的变化。如果目前就开始使用import关键字，将来代码的改动会非常小。
示例：
import "jquery";
export functiondoStuff(){}
module "localModule" {}
优点：
1、容易进行静态分析
2、面向未来的 EcmaScript 标准
缺点：
1、原生浏览器端还没有实现该标准
2、全新的命令字，新版的 Node.js才支持
Q3: js的模块化编程有哪些方式
基础
我们首先简单地概述一下，自从三年前Eric Miraglia（YUI的开发者）第一次发表博客描述模块化模式以来的一些模块化模式。如果你已经对于这些模块化模式非常熟悉了，大可以直接跳过本节，从“进阶模式”开始阅读。
匿名闭包
这是一种让一切变为可能的基本结构，同时它也是Javascript最棒的特性。我们将简单地创建一个匿名函数并立即执行它。所有的代码将跑在这个函数内，生存在一个提供私有化的闭包中，它足以使得这些闭包中的变量能够贯穿我们的应用的整个生命周期。
复制代码 代码如下:
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());
注意这对包裹匿名函数的最外层括号。因为Javascript的语言特性，这对括号是必须的。在js中由关键词function开头的语句总是会被认为是函数声明式。把这段代码包裹在括号中就可以让解释器知道这是个函数表达式。
全局变量导入
Javascript有一个特性叫做隐式全局变量。无论一个变量名在哪儿被用到了，解释器会根据作用域链来反向找到这个变量的var声明语句。如果没有找到var声明语句，那么这个变量就会被视为全局变量。如果这个变量用在一句赋值语句中，同时这个变量又不存在时，就会创建出一个全局变量。这意味着在匿名闭包中使用或创建全局变量是很容易的。不幸的是，这会导致写出的代码极难维护，因为对于人的直观感受来说，一眼根本分不清那些是全局的变量。
幸运的是，我们的匿名函数提供了简单的变通方法。只要将全局变量作为参数传递到我们的匿名函数中，就可以得到比隐式全局变量更清晰又快速的代码了。下面是示例：
复制代码 代码如下:
(function ($, YAHOO) {
// now have access to globals jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));
模块导出
有时你不仅想要使用全局变量，你还想要声明它们，以供反复使用。我们可以很容易地通过导出它们来做到这一点——通过匿名函数的返回值。这样做将会完成一个基本的模块化模式雏形，接下来会是一个完整的例子：
复制代码 代码如下:
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
注意我们已经声明了一个叫做MODULE的全局模块，它拥有2个公有的属性：一个叫做MODULE.moduleMethod的方法和一个叫做MODULE.moduleProperty的变量。另外，它还维护了一个利用匿名函数闭包的、私有的内置状态。同时，我们可以很容易地导入需要的全局变量，并像之前我们所学到的那样来使用这个模块化模式。
进阶模式
上面一节所描述的基础已经足以应对许多情况，现在我们可以将这个模块化模式进一步的发展，创建更多强大的、可扩展的结构。让我们从MODULE模块开始，一一介绍这些进阶模式。
放大模式
整个模块必须在一个文件中是模块化模式的一个限制。任何一个参与大型项目的人都会明白将js拆分多个文件的价值。幸运的是，我们拥有一个很棒的实现来放大模块。首先，我们导入一个模块，并为它添加属性，最后再导出它。下面是一个例子——从原本的MODULE中放大它：
复制代码 代码如下:
var MODULE = (function (my) {
my.anotherMethod = function () {
// added method...
};
return my;
}(MODULE));
我们用var关键词来保证一致性，虽然它在此处不是必须的。在这段代码执行完之后，我们的模块就已经拥有了一个新的、叫做MODULE.anotherMethod的公有方法。这个放大文件也会维护它自己的私有内置状态和导入的对象。
宽放大模式
我们的上面例子需要我们的初始化模块最先被执行，然后放大模块才能执行，当然有时这可能也不一定是必需的。Javascript应用可以做到的、用来提升性能的、最棒的事之一就是异步执行脚本。我们可以创建灵活的多部分模块并通过宽放大模式使它们可以以任意顺序加载。每一个文件都需要按下面的结构组织：
复制代码 代码如下:
var MODULE = (function (my) {
// add capabilities...
return my;
}(MODULE || {}));
在这个模式中，var表达式使必需的。注意如果MODULE还未初始化过，这句导入语句会创建MODULE。这意味着你可以用一个像LABjs的工具来并行加载你所有的模块文件，而不会被阻塞。
紧放大模式
宽放大模式非常不错，但它也会给你的模块带来一些限制。最重要的是，你不能安全地覆盖模块的属性。你也无法在初始化的时候，使用其他文件中的属性（但你可以在运行的时候用）。紧放大模式包含了一个加载的顺序序列，并且允许覆盖属性。这儿是一个简单的例子（放大我们的原始MODULE）：
复制代码 代码如下:
var MODULE = (function (my) {
var old_moduleMethod = my.moduleMethod;
my.moduleMethod = function () {
// method override, has access to old through old_moduleMethod...
};
return my;
}(MODULE));
我们在上面的例子中覆盖了MODULE.moduleMethod的实现，但在需要的时候，可以维护一个对原来方法的引用。
克隆与继承
复制代码 代码如下:
var MODULE_TWO = (function (old) {
var my = {},
key;
for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
}
var super_moduleMethod = old.moduleMethod;
my.moduleMethod = function () {
// override method on the clone, access to super through super_moduleMethod
};
return my;
}(MODULE));
这个模式可能是最缺乏灵活性的一种选择了。它确实使得代码显得很整洁，但那是用灵活性的代价换来的。正如我上面写的这段代码，如果某个属性是对象或者函数，它将不会被复制，而是会成为这个对象或函数的第二个引用。修改了其中的某一个就会同时修改另一个（译者注：因为它们根本就是一个啊！）。这可以通过递归克隆过程来解决这个对象克隆问题，但函数克隆可能无法解决，也许用eval可以解决吧。因此，我在这篇文章中讲述这个方法仅仅是考虑到文章的完整性。
跨文件私有变量
把一个模块分到多个文件中有一个重大的限制：每一个文件都维护了各自的私有变量，并且无法访问到其他文件的私有变量。但这个问题是可以解决的。这里有一个维护跨文件私有变量的、宽放大模块的例子：
复制代码 代码如下:
var MODULE = (function (my) {
var _private = my._private = my._private || {},
_seal = my._seal = my._seal || function () {
delete my._private;
delete my._seal;
delete my._unseal;
},
_unseal = my._unseal = my._unseal || function () {
my._private = _private;
my._seal = _seal;
my._unseal = _unseal;
};
// permanent access to _private, _seal, and _unseal
return my;
}(MODULE || {}));
所有文件可以在它们各自的_private变量上设置属性，并且它理解可以被其他文件访问。一旦这个模块加载完成，应用程序可以调用MODULE._seal()来防止外部对内部_private的调用。如果这个模块需要被重新放大，在任何一个文件中的内部方法可以在加载新的文件前调用_unseal()，并在新文件执行好以后再次调用_seal()。我如今在工作中使用这种模式，而且我在其他地方还没有见过这种方法。我觉得这是一种非常有用的模式，很值得就这个模式本身写一篇文章。
子模块
我们的最后一种进阶模式是显而易见最简单的。创建子模块有许多优秀的实例。这就像是创建一般的模块一样：
复制代码 代码如下:
MODULE.sub = (function () {
var my = {};
// ...
return my;
}());
虽然这看上去很简单，但我觉得还是值得在这里提一提。子模块拥有一切一般模块的进阶优势，包括了放大模式和私有化状态。
Q4: autojs模块链式调用
在auto就是中使用控件的时候是通过链式调用的，就像这样
id("recent_chat_list").className("AbsListView").findOne().scrollForward();
js的链式调用并不复杂，就是每次执行完返回this对象，这样后面的方法就可以继续在this环境下执行。
先创建一个简单的模块
var P = function () {
function Person() { };
return Person;
}();
module.exports = P;
给它添加两个get、set方法
Person.prototype = {
setName: function (name) {
this.name= name;
return this;
}, setAge: function (age) {
this.age = age
return this;
},getName:function(){
return this.name;
},getAge:function(){
return this.age;
}
}
再加init一个方法，返回一个Person对象，
Person.by = function () {
return new Person;
}
如果在模块里，new一个对象就会在require模块的时候初始化，导致混淆，所以写个方法，手动new一个对象。
调用的方法是
var p = require("p.js");
p.init().setAge(10).setName("小明").getName()
p.init().setAge(20).setName("老王").getAge()
就是这么简单。
