模块用法

Posted 2020-12-05 mapsxy

require.js优点：
防止js加载阻塞页面渲染
使用程序调用的方式加载js，防止出现丑陋的场景

异步执行JS代码：
script标签中添加一下属性：async=“true” defer
防止阻塞页面的渲染

requirejs的基本写法.
主模块/入口模块 ，可以是define定义的模块，也可以是普通的
html页面载入主模块的方式
配置文件 一般存放在main.js中
require.config({
修改基址路径
baseUrl:"lib/js"
paths : {
省略js后缀名，相当于文件名的简写
"jquery" : "jquery-1.8.3.min"
}
})

加载依赖模块（使用）
require([依赖的模块],function(){
依赖的模块名与参数一一对应
});
参数说明：
第一个参数格式必须是数组格式【依赖模块的url】
第二个参数回调函数中的模块标识
它是依赖模块所对应的标识，用于接受模块

定义模块
第一个参数可以省略
define([依赖的模块],function(){
执行代码

导出 {
模块：模块
}
});

输出模块，提携模块接口供外部适用
return{
外部使用的东西作为对象的属性或方法
}

模块化的演变：
模块就是实现特定功能的一组方法。
1，原始写法
只要把不同的函数简单的放在一起就算是一个模块
function fn1(){
...
}
fn1();

缺点：污染了全局变量，无法保证不与其他模块发生命名冲突，而且模块成员之间看不出直接关系
2，对象写法
为了解决上面的缺点，可以把模块写出一个对象，所有的模块成员都放在这个对象里面。
var module = new Object({
_count : 0,
fn1 : function(){
...
},
fn2 : function(){
...
}
});

module.fn1();

缺点：这样的写法暴露了所有模块成员，内部状态可以被外部改写。
module._count = 100;

3，自执行匿名函数写法
使用此种方法可以达到不暴露私有成员的目的
var module = (function(){
var count = 0;
var fn1 = function(){

};
var fn1 = function(){

};
return {
fn1 : fn1,
fn2 : fn2
}
})();

使用此种方法，外部代码就无法读取内部的变量，从而无法修改内部变量

此种写法就是js模块的基本写法。

4，放大模式
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，此时就需要采用放大模式。

var module = (function(mod){
mod.a = function(){
...
};

return mod;
})(module);

以上代码为module模块添加一个新的a方法，然后返回新的module模块。

5，宽放大模式
在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用放大模式的写法，第一个执行的部分有可以加载一个不存在的空对象，这时就需要采用宽放大模式。
var module = (function(mod){
mod.a = function(){

};

return mod;
})(window.module||{});

简单说，宽放大模式就是立即执行函数的参数可以是空对象。

6，输入全部变量
独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式的将其他变量输入模块

var module = (function($,bootstrap){
...
})(jquery,bootstrap);

以上代码就是将jquery与bootstrap两个框架（模块）作为参数传入module模块中，这样既保证模块的独立性，又可以看清模块与模块之间的依赖关系。

7，模块的规范
模块存在的意义就是为了更加方便的使用别人的代码，需要什么功能就加载什么模块。
前提就是大家都要按照一定的规范来编写模块

8，commonJS
nodejs就是按照commonJs规范进行实现的。简称CMD规范

node的实现代码
var http = require("http"); 模块名称可以省略js后缀

http.createServer(function(){

}).listen(8080);

在浏览器环境下定义一个模块，一定要等到模块加载完毕才可以使用该模块，如果加载时间过长，浏览器就会进入“假死”状态。

因此浏览器端就不能使用同步加载，只能采用异步加载，这就是AMD规范的诞生。

9,AMD规范
AMD全称是：Asymchronous Module Definition ，即异步模块定义。
它采用的是异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖于这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会执行。

AMD规范定义模块的参数
require([module],callback);
参数1：数组中是依赖的模块，如有多个模块，以逗号隔开即可
参数2：加载成功后的回调函数

require的出现
1，为什么使用require?
对于一个需要加载多个js文件的项目来说，文件之间的依赖关系一定很复杂。文件位置一旦发生改变，程序就会报错或者是不执行。

缺点：
a:加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长。
b：由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当前依赖关系很复杂的时候，代码的编写和维护都会变的很困难。

因此：require的出现就是为了解决以下问题
a,实现js文件的异步加载，避免网页失去响应
b,管理模块之间的依赖性，便于代码的编写和维护

2，requirejs的使用方法
1),页面中引入requirejs文件，
为了网页不会失去响应，将js文件放在页面的最底部进行加载，或者是
<script src="require.js" defer async="true"></script>
表明该文件是异步加载的
2),加载自己的js代码
<script src="require.js" data-main="js/main"></script>

data-main的作用是指定网页程序的主模块。
requirejs默认的文件后缀名为js，所以main.js可以简写为main
程序会优先加载main.js

3，主模块的写法 main.js中的写法
require(["module1","module2","module3"],function(module1,module2,module3){
参数1：必须是一个数组，表示所依赖的模块
参数2:是一个回调函数，加载的模块会以参数的形式传入该函数中，在回调函数内部可以使用这些模块

数组中的模块与回调函数中的模块必须是一一对应
});

require(["jquery","autoPlay","select"],function($,auto,select){
...
});

4，模块的加载
require.config()方法的使用，一般写在主模块（main.js）的头部，参数为一个对象

require.config({
baseUrl : "", //指定根基目录
paths : { //各个模块的加载路径

},
shim : { //用来配置没有按照AMD规范写的模块
"jquery.scroll" : function(){
//deps数组：表明该模块的依赖性
deps : ["jquery"],
//exports值，表明这个模块外部调用时的名称
exports : "jQuery.fn.scroll"
}
}
});

5，AMD模块的写法
requirejs加载的模块，必须采用AMD的规范。

定义模块
a.js

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

return {
add : add
}
});

加载模块
main.js

require(["a"],function(a){
a.add();
});

如果这个模块还依赖其他模块，那么define()方法可以有两个参数
define(["jquery"],function($){

});