以酬答日益复杂,大规模的JavaScript开发。我们化整为零,化繁为简。将复杂的逻辑划分一个个小单元,各个击破。这时一个项目或者会见生几十独甚至群个JS文件,每个文件也一个模块单元。如果上丝时还是这些多少文件,那用对性能造成一定影响。

 

RequireJS提供了一个装进压缩工具r.js来针对模块进行联合减。r.js非常有力,不但可压缩js,css,甚至可以对整个项目进展打包。

r.js的压缩工具使用UglifyJS或Closure
Compiler。默认使用UglifyJS(jQuery也是采取它减少)。此外r.js需要node.js环境,当然她吧堪运行在Java环境遭到如Rhino。

 

即时首以一个简单的以身作则来感受下r.js,创建的目录如下

jQuery 1

和入门的三目结构同样,写了三独模块cache,event,selector。这三个模块的代码就不以粘贴了。main.js也非举行修改,实现的成效还是吗页面及之拥有段落P元素添加个点击事件,点击后弹出P的innerHTML。唯一的区别是目录中多了个r.js

 

index.html做了修改,如下

<!doctype html>
<html>
    <head>
        <title>requirejs进阶(一)</title>
        <meta charset="utf-8"/>
        <style type="text/css">
            p {
                background: #999;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p>
        <script data-main="built" src="require.js"></script>
    </body>
</html>

注意,data-main改为了“built”,上等同篇之凡“main”。我们拿以r.js把js目录下之cache.js,event.js,selector.js,main.js合并减后写到r4目录中。

 

哼,让咱开集合减吧。

1,打开windows命令窗口,cd到r4目录中

jQuery 2

 

2,输入指令

node r.js -o
baseUrl=js name=main out=built.js

jQuery 3

 

命令执行信息可以视曾经将逐一js文件合并成了。这时回到r4目录会发现差不多矣一个built.js文件。

jQuery 4

哼了,合并减过程完成了。

 

将目录r4放权apache或外web服务器上,访问index.html。网络要如下

jQuery 5

 

可以看除了require.js,就惟有built.js了。大大减少了JS文件的http请求。这时点击页面及相继P元素,会弹来相应的innerHTML

jQuery 6

顿时说明效益完损无缺。

 

下对命令执行做只简易讲。
node r.js -o
baseUrl=js name=main out=built.js

-o         表示优化,该参数是固定的,必选。
baseUrl
 指存放模块的根目录,这里是r4/js,因为cd到r4中了,只需要安装为js。可选,如果没安装将起r4中搜索main.js。
name    
模块的输入文件,这里设置成“main”,那么r.js会从baseUrl+main去搜寻。这里实在是r4/js/main.js。r.js会分析main.js,找有其所据的具备其他模块,然后合并减。
out      
 指合减后输出的文本路径,这里一直是built.js,那么以出口到根目录r4下。

 

好了,再介绍两独参数

1,excludeShallow 合并时将解除该文件

node r.js -o
baseUrl=js name=main out=built.js excludeShallow=selector

jQuery 7

 

可见到输出信息遭到不再包括selector.js。这时运行index.html页面,会意识selector.js被单独请求下来了。

jQuery 8

 

2,optimize (none/uglify/closure)  指定是否减少,默认为uglify
未传染该参数时r.js默认以UglifyJS压缩。设置为none则无见面削减,仅合并,这当开发阶段是殊用用底。
node r.js -o
baseUrl=js name=main out=built.js optimize=none

jQuery 9

这时候别的built.js是从未有过滑坡的。

 

总结:
立刻首演示了使用模块出后上线前之一个小示例:把所有模块文件合并为一个文件。

预先下载r.js放到开发目录中,然后下命令执行来统一减。其中演示了命令执行参数-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必选的,其它为可选。

 

r4.zip

相关文章

网站地图xml地图