[JS] JS模块化开发之RequireJS

本节将简述RequireJS常用的功能

RequireJS 实现了 Asynchronous Module API.

 

目录:

• 为什么使用RequireJS

• 加载RequireJS

• Hello World

• 自定义模块

• 引入第三方插件

• 多版本js库处理

• RequireJS插件

 

Nuget:Install-Package RequireJS(会包含2个文件.r.js是用来通过nodejs压缩js的)

 

为什么使用RequireJS

• 加载script标签会停止响应
• js文件存在依赖性
• 模块化开发

 

加载RequireJS

• 异步加载script

<script src="scripts/require.js" defer async="true"></script>

• 加载自定义js

　<script src="scripts/require.js" data-main="scripts/main"></script>　

 

RequireJS函数

• require.config({}):配置Require信息

 

包括baseUrl,paths,shim,map,enforceDefine

 

• require([],funcLoad,funcErro):加载模块后,执行方法

 

• define([],func):加载模块,定义模块

 

Hello World

• 加载requirejs

<script data-main="main" src="Scripts/require.js"></script>

• 编写main.js

?

1 2 3 4 5 6 7 8 9 10

require.config({     baseUrl: 'Scripts',     paths: {         jquery: ['//cdn.bootcss.com/jquery/2.2.3/jquery', 'jquery-2.2.4']     } });   require(['jquery'], function (a) {     alert(a.fn.jquery); });

• • baseUrl默认与mainjs同一目录
  • paths支持多个js源
  • paths默认为地址加上.js
  • require第一个参数为依赖的模块
  • require第二个参数方法中的变量名依次与依赖模块一一对应

 

自定义模块

定义1个Cache模块,缓存页面中的js对象.

?

1 2 3 4 5 6 7 8 9 10 11

define(['jquery'], function ($) {     var cache = {};     return {         set: function (key, val) {             cache[key] = val;         },         get: function (key) {             return cache[key];         }     } });

 

main.js

?

1 2 3 4 5 6 7 8

require(['cache'], function (cache) {     alert(jQuery.fn.jquery);     cache.set('a', 'hello'); });   require(['cache'], function (cache) {     alert(cache.get('a')); });

 

引入第三方插件

很多js库  并没有支持AMD方式的模块化开发.

本例子实现上面的cache功能

定义cached.js

?

1 2 3 4 5 6 7 8 9

var cache = {     data: {},     set: function (key, val) {         this.data[key] = val;     },     get: function (key) {         return this.data[key];     } };

 

main.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

require.config({     baseUrl: 'Scripts',     paths: {         jquery: ['//cdn.bootcss.com/jquery/2.2.3/jquery', 'jquery-2.2.4']     },     shim: {         cached: {             exports: 'cache',             deps: ['jquery']         }     } });   require(['cached'], function (cache) {     cache.set('a', 'hello'); });   require(['cached'], function (cache) {     alert(cache.get('a')); });

• shim解决依赖与非AMD载入方式.
• exports指定js中提供的对象或方法名.
• deps指定依赖的js库

 

多版本js库处理

我们的项目如果使用新版本js功能,但又不能直接替换老版本的js.多个版本共存的时候.

使用map函数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

requirejs.config({     map: {         '*': {             'jquery': 'scripts/jquery-2.2.4'         },         'scripts/cache': {             'jquery': '//cdn.bootcss.com/jquery/2.2.3/jquery.js'         }     } });   require(['scripts/cache'], function (a) {     alert($.fn.jquery); });

map定义了2种jquery版本

*表示默认情况下的jquery模块使用本地2.2.4

scripts/cache表示模块名为此的时候,jquery使用远程库.远程库需添加js扩展名.

 

RequireJS插件

https://github.com/requirejs/requirejs/wiki/Plugins

 

AMD(中文版):

https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)