RequireJS进阶(一)
为了应对日益复杂,大规模的JavaScript开发。我们化整为零,化繁为简。将复杂的逻辑划分一个个小单元,各个击破。这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元。如果上线时都是这些小文件,那将对性能造成一定影响。
RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包。
r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS(jQuery也是使用它压缩)。此外r.js需要node.js环境,当然它也可以运行在Java环境中如Rhino。
这篇以一个简单的示例来感受下r.js,创建的目录如下
和入门之三目录结构一样,写了三个模块cache,event,selector。这三个模块的代码就不在贴了。main.js也未做修改,实现的功能仍然是为页面上的所有段落P元素添加个点击事件,点击后弹出P的innerHTML。唯一的区别是目录中多了个r.js。
index.html做了修改,如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!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目录中
2,输入命令
node r.js -o baseUrl=js name=main out=built.js
命令行信息可以看到已经将各个js文件合并成功了。这时回到r4目录会发现多了一个built.js文件。
好了,合并压缩过程完成了。
把目录r4放到apache或其它web服务器上,访问index.html。网络请求如下
可以看到除了require.js,就只有built.js了。大大减少了JS文件的http请求。这时点击页面上各个P元素,会弹出对应的innerHTML
这说明功能完损无缺。
下面对命令行做个简单解释。
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
可以看到输出信息中不再包括selector.js。这时运行index.html页面,会发现selector.js被单独请求下来了。
2,optimize (none/uglify/closure) 指定是否压缩,默认为uglify
不传该参数时r.js默认以UglifyJS压缩。设置为none则不会压缩,仅合并,这在开发阶段是很用用的。
node r.js -o baseUrl=js name=main out=built.js optimize=none
这时生成的built.js是没有压缩的。
总结:
这篇演示了采用模块开发后上线前的一个小示例:把所有模块文件合并为一个文件。
先下载r.js放到开发目录中,然后使用命令行来合并压缩。其中演示了命令行参数-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必选的,其它为可选。
转载于:https://www.cnblogs.com/zhepama/archive/2013/05/01/3053266.html
RequireJS进阶(一)相关推荐
- RequireJS进阶(一) 转
为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...
- 使用requirejs编写模块化代码
写在前面 最早接触javascript的时候,javascript代码直接扔在script标签里面就完事了. 反正代码不多,交互简单,逻辑不难,和HTML混在一起也未尝不可. 后来交互越来越复杂,代码 ...
- 前端网站资源精编!!
前端网站资源精编!! 目录: 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- Angularjs 5-------- ES6 6---- ...
- 学习web的多个连接网站地址
https://segmentfault.com/a/1190000007062464#articleHeader7 原文链接 内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不 ...
- 各大网站,欢迎大家收藏转发
人整理来之不易请珍惜,如有错误请谅解,谢谢... 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2. ...
- 最全前端资源---快过来 最新鲜的资源这里都有
如果您阅读之后,感觉有缺失:麻烦您告诉我 我进行补充.谢谢 综合类 综合类 地址 前端知识体系 前端知识体系 - naniJser - 博客园 前端知识结构 https://github.com/Ja ...
- 转载 最全前端资源汇总
一.概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总:云集前端教程.开发资源.免费书籍.手册规范.求职面试等等,旨在为前端学习 & 技能提升提供方便.当然,并不期望这成为一个前端 ...
- 全栈工程师的思考 | 步步进阶经验之谈
什么是全栈工程师 在现在这一个时代来说,不会有人掌握所有的编程语言.技能,以后应该会有,但是掌握这些全部技术的不是人类了.所以,其实我们需要的是懂得多种技术的,并能借些独立完成产品的人. 当我们需要做 ...
- Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
- 0基础怎么学web前端?新手到大神的进阶路线在这!
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
最新文章
- 300多工程师死磕2年,vivo终于发布自研芯片V1,降低功耗50%全片上储存
- 计算机联锁与全电子执行单元,计算机联锁全电子执行单元.doc
- php dom xml解析,Php Xml解析之DOMDocument使用方法浅解
- 【存储过程】MySQL存储过程/存储过程与自定义函数的区别
- 配置apache支持PHP(win7)
- 理想汽车已累计交付2万台 仅用时10个月
- php留言簿,PHP 简易留言板
- shell 分割字符串_谈一谈Shell中的贪婪匹配和非贪婪匹配
- C#之xml配置文件读写
- MFC控件使用之ListCtrl
- SCVMM2012 SP1 之添加非受信任Hyper-V
- 新浪微博登录html代码,新浪微博登录仿DiscuzX1.5论坛QQ登录样式 - YangJunwei
- toms 尺寸 shoes or boots finds
- DIY一个UNISOLDER焊台无线红外休眠座
- 使用虚拟机备份软件备份VMware vSphere虚拟机
- Notepad++常用插件下载地址
- webkit研究日记2
- 小米5无线显示如何连接到服务器,小米电视无线显示怎么用?详细操作方法
- 2022刘仲文程聪孙迎迎--用Jensen不等式证明相对熵的非负性
- 《数值分析》李庆扬 09 常微分方程数值解
热门文章
- 简述使jdbc连接mysql数据库_java中简述使用JDBC完成数据库操作的基本步骤。
- JavaSE基础———Set接口中的常用类HashSet、LinkedHashSet和TreeSet
- java filterconfig_使用FilterConfig读取配置文件的信息 ---学习笔记
- 简述springmvc过程_Springmvc执行流程
- pythonbreak语句的用法_详解Python中break语句的用法
- HDFS之namenode文件解析
- consul 服务发现 集群 docker 版
- LayaAir 屏幕适配-分辨率、对齐模式
- centos7安装便捷小工具命令
- 阶段3 2.Spring_02.程序间耦合_2 编译期依赖