RequireJS基础知识

灰太狼 2021-03-28 16:01 592阅读 0赞

# RequireJS解决代码依赖问题,异步加载js,避免页面失去相应 #

> RequireJS的目标是鼓励代码的模块化，它使用了不同于传统`<script>`标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。  
> RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层`<script>`标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。

## 加载 ##

这里的mian是脚本的入口，相当于c语言的main()主函数, 所有的模块都要集中在这里被解析. 默认加载的都是js文件,所以就不用加.js

之前我们引用js代码就会是这样, 依赖顺序不能颠倒, 这样就非常麻烦,

## AMD规范 ##

//AND规范的写法 require(['依赖一', '依赖二', '依赖三'], function(依赖一的别名, 依赖三的别名, 依赖三的别名){ //code })

require很好的解决了这个代码依赖的问题,它采用AMD(异步模块加载)规范加载脚本文件.  
  
比如:

require(['jquery', 'underscore', 'bankbone'], function($, _, Backbone) { //code })

## 配置 ##

有的模块肯定是不符合AMD规范的,那么我们就需要配置一下,shim属性就是配置不符合AMD规范的代码的,require.config()参数是一个对象,写在页面的最顶部.

require.config({ baseUrl: '路径', // 设置js文件的根目录,默认是main.js的目录,这里写相对与main.js的相对路径 paths: { jquery: '路径' // 为每个文件单独指定路径, 也可以是网络地址 } shim: { '模块名': { exports: '模块别名', deps: ['依赖一', '依赖二'] } } })

## AMD模块的写法 ##

define(['依赖'], function(依赖别名) { //code })

define(function(a, b) { var add = function(a, b) { return a + b; } return add }); //这样写只能返回一个方法 //在main.js里用该模块的名字(a,b)调用

还可以用下面的方法写

define(function(a, b) { var add = function(a, b) { return a + b; } var x = function(a, b) { return a * b } return { add: add, x: x } }); //这样写只能返回多个方法 //在main.js里用该模块的名字.add(a,b)或者模块名字.x(a,b)调用

## 模块的压缩合并 ##

> 模块化的写法肯定会增加文件数量, 从而增加请求次数, 放慢加载速度, require有自带的压缩工具r.js, 可以合并所有模块为一个js文件. 可以去官网下载也可以使用bower下载

bower install r.js

*  下载完后在main.js的目录新建一个build.js文件(配置如下)
 *  在build.js的文件目录下执行node r.js -o build.js
 *  构建完后会有一个main-built.js文件

({ appDir: './', 　　 //项目根目录 out: 'main-build.js',　　//输出文件名 dir: './outdir',　　 //输出目录，全部文件打包后要放入的文件夹（如果没有会自动新建的） 　　　　/* 有了dir，就不能使用out配置项了，你在编译时它有非常明确的提示 */ baseUrl: './js/pages', 　　 //相对于appDir，代表要查找js文件的起始文件夹，下文所有文件路径的定义都是基于这个baseUrl的 modules: [ 　　　　//要优化的模块 —— 里面的配置项即各页面的 相对baseUrl路径的 省略后缀“.js”的 入口文件(入口文件 ---- 即加载页面时引入require.js的script标签上data-main属性所指定的文件) 　　　　//该属性必不可少，因为一个程序至少需要有一个入口 { name:'main'}, { name:'index'} ], 　　fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/,　　 //正则匹配过滤文件，匹配到的文件将不会被输出到输出目录去，这里过滤掉的是 r.js、build.js、*.scss三类文件 　　optimizeCss: 'standard', 　　removeCombined: true, //如果为true，优化器将从输出目录中删除已合并的文件 　　paths: { //各模块相对baseUrl的路径，直接从require.config的path配置中烤取即可 "underscore": "../libs/underscore/underscore-min", "backbone": "../libs/backbone/backbone-min", 　　}, shim:{// 配置不符合AMD规范的模块，直接从require.config的shim配置中烤取即可 "underscore": { 　　 exports: "_" }, "backbone": { 　　 deps: ["underscore", "jquery"], 　　 exports: "Backbone" }, } })