前端变化太快,如今RequireJS已经无法吸引眼球了。
介绍一款模块加载工具:RequireJS的入门,并且重点介绍其优化工具。
一、RequireJS简介
RequireJS是一个代码模块加载器。
最古老的时候,前端在开发页面的时候,一般情况下,都是在Html文件里一次把所有会用到的JavaScript文件通过<script>标签引用进来。
随着前端项目越来越复杂,这种方式带来了很多问题:
命名冲突。在以前的项目里,经常为了命名冲突,出现很多类似 comm.utils.dialog的对象名。
文件依赖。例如上述代码,如果某开发人员要调用dialog.js,那么必须在此之前知道它依赖于util.js,并在dialog.js之前引用util.js,否则会报错。
更详细的请看文章前端模块化开发的价值(https://github.com/seajs/seajs/issues/54...)
所以很多人去研究模块化开发,成果也不错。出现了许多模块化方案和标准,目前有以下:
符合AMD规范,如RequireJS
符合CMD 规范,如SeaJS
NodeJS规范 CommonJS
ECMAScript 6的模块化
RequireJS就是符合AMD规范一种实现。
二、使用
官网下载RequireJS,并在页面中引用,即可享用RequireJS的所有特性。
从一个DEMO开始,此Demo没有很多逻辑,当加载某模块时在控制台打印该模块的名称。
以上是Demo的代码结构。
release:发布目录
src:项目源代码
tools:工具目录,例如构建工具等。
点击查看完整代码
DEMO代码分析
入口文件,main.html
暂忽略release和tools目录,只关注src目录。
先看main.html
先引入了require.js,再引入配置信息config.js,最后是一段引导启动代码。此Demo的启动代码,在require函数的第一个参数里传入它所需要的模块,one和two,而不需要关心它们分别依赖于什么
配置文件config.js
引入require.js后,需要先进行配置,例如baseUrl是指加载资源时,是相对此路径的资源。
定义模块
require函数的加载对象是模块,对于requireJS来说,一个文件定义一个模块。那么怎么定义模块呢?
使用define函数定义,例如two.js里的代码是:
其中return的对象是该模块对外曝露的接口,调用方require此模块后,可使用此对象所定义的所有方法和属性。
运行DEMO
使用Chrome运行src/main.html,先后初始化了three,one,two等三个模块。如下图
网络请求是这样的
main.html通过script标签加载require.js和config.js,然后启动代码通过require函数加载 one.js和two.js,two.js通过require函数加载它所依赖的three.js。
requireJs的入门要关注四样东西
页面引用 require.js
在使用require函数前,使用require.config方法配置路径等信息
使用require函数加载模块
使用define函数定义模块
三、优化工具
以上是RequireJS最基本的使用方法。然而,它还提供了优化工具,用于提升性能,此优化工具为 r.js(http://requirejs.org/docs/optimization.h...)
requireJS认为一个文件只能定义一个模块。然而,有些模块很小,分开文件来开发虽然有利于源代码的维护和可读性,但却不利于浏览器环境下的加载,因此会有一些合并代码的需求,即将几个模块合并到一个文件里,例如如果一个工程里使用到了jquery和backbone等第三方代码库,而且又是常常一起使用的,那么在发布之前就可以把它们合并成一个文件。
另外,前端代码发布前都会进行压缩,使文件足够小。因此,现在介绍一下如何使用r.js的优化工具实现此两点述求。
安装与使用
下载r.js。
安装NodeJS和NPM,官网去下载安装包即可
同样是上一节的Demo,我们要合并one.js和two.js,同时压缩所有的代码。
以下文件目录中
tools里面的r.js是优化工具的代码库;而build.js是配置文件
src/js目录下多了一个combine.js文件。此文件用于存放合并后的代码。
配置文件
优化工具根据配置文件进行优化,即tools里面的build.js。
配置选项有很多,详情请看
https://github.com/jrburke/r.js/blob/mas...
优化一:合并文件
在src/js下新建combine.js,内容为空都可以。
tools/build.js里配置要合并的config.modules。
命令行cd到tools目录
执行 node r.js –o build.js
从输出的信息看来,combine.js合并了one.js,three.js和two.js。
但我们在tools/build.js里明明配置的是合并one和two。原来是因为two.js里require了three.js,所以优化工具把three.js也合并进来了。那么如果我本意其实并不想把three.js合并进来呢?
Rjs的合并策略:传入define,require的模块参数如果是直接量就会合并,如果是变量那么不合并,例如
Two.js里require(‘three’)这样加载,three.js是会被合并到combine.js的,而如果是var mod=”three”; require(mod),那么three.js是不会被合并的。
优化二:代码压缩
默认情况下,优化工具是会压缩代码,但是如果某些情况下不想压缩可以,在tools/build.js里关掉,即optimize选项设置为none。
运行结果
编译后的release目录文件:
运行release/main.html,同样在控制台打印了加载的模块名称,即实现了跟之前src/main.html一样的功能。
但是,不再单独加载 one.js、two.js和three.js了,而是只加载 combine.js
至此结束,只会用requireJS是不够的,优化工具会使你的程序性能得到提升。
而优化工具要用好,要多尝试他们的配置选项。http://requirejs.org/docs/api.html#confi...
我在深圳,欢迎关注我的公众号