广州蓝景技术分享—前端模块化(5分钟快速入门RequireJs)

Hello~~各位小伙伴，今天我们广州蓝景，继续和大家分享前端技术干货，前端模块化(5分钟快速入门RequireJs)，

各位开发项目的时候引用JS都会遇到以下的情景

产生AMD规范的背景

因为使用各种插件，或者团队协同合作，产生多个js文件，

假如使用的JQ插件，则必须先引用jquery库才能够正常执行，

JS文件之间强依赖关系，让我们不敢动文件的引入顺序。

并且，在渲染页面的过程中，同步读取JS文件会堵塞整个页面，

这对网站的性能起到很大的影响，因此，我们需要异步加载JS文件。

AMD规范

AMD规范全称为Asynchronous Moudle Definition,即异步模块加载机制。

AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。

从它被requireJS，NodeJs，Dojo，JQuery使用也可以看出它具有很大的价值，

JQuery也采用了AMD规范

//Jquery-2.1.0 源码

if ( typeof define === “function” && define.amd ) {

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

return jQuery;

});

}

AMD规范简单到只有一个API，即define函数

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

其中：

module-name: 模块标识，可以省略。

array-of-dependencies: 所依赖的模块，可以省略。

module-factory-or-object: 模块的实现，或者一个JavaScript对象。

举个例子：

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

return jQuery;

});

采用AMD规范的RequireJS

RequireJS采用AMD规范，让我们在使用过程中感受到了模块化的便利，

引入文件时，再不需要按照固定顺序，只需要定义好模块之间的依赖关系即可

1.使用?npm安装Requirejs

cnpm install requirejs

注意：requirejs是连起来的，中间没有点，请注意防伪

2.引入Requirejs

data-main属性的作用是，指定网页程序的主模块。

这个文件会第一时间被require.js加载。

由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

在main.js里面，引用其他js文件即可,

**补充：**假设index.js是临时工写的，他不符合AMD规范，我们就需要在require.config里传入的对象里面的shim属性进行配置

//index.js

//这是不符合AMD规范的

KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((this))

})

//下面写法就符合AMD规范

// define(‘index’,[‘jquery’],function(){

// KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log((this))

// })

// })

因此，在main.js就需要这样写

require.config({

//类似base标签，全局修改起始路径

//baseUrl: “js/lib”,

// 指明模块路径

paths:{

‘index’:‘lib/index’

},

// 兼容非AMD规范的模块

shim:{

‘index’:{

// 写上该模块的依赖,没有则为空

deps:[‘jquery’],

// 将改造好的模块输出出来

export:‘index’

}

}

})

//主入口文件

require([‘index’,‘jquery’],function(_,KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log()

})

如果你希望你的代码直接使用，获取兼容AMD规范，可以采取下列写法

//兼容AMD模块

if(typeof defined == “function” && define.amd){

define(“index”,[‘jquery-2.1.0’],function(){

alert(‘hello world’);

console.log(KaTeX parse error: Expected 'EOF', got '}' at position 17: …".baba")); }?) return } …(".baba"));

}

想要了解更多web前端开发技术资料，可在评论区留言！也可添加我们微信：philip_tan