RequireJS入门学习篇

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

<!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是没有压缩的

时间: 2024-11-05 17:30:15

RequireJS入门学习篇的相关文章

Jsp Servlet基础入门学习篇处理Cookie

9.1 Cookie概述 Cookie是服务器发送给浏览器的体积很小的纯文本信息,用户以后访问同一个Web服务器时浏览器会把它们原样发送给服务器.通过让服务器读取它原先保存到客户端的信息,网站能够为浏览者提供一系列的方便,例如在线交易过程中标识用户身份.安全要求不高的场合避免用户重复输入名字和密码.门户网站的主页定制.有针对性地投放广告,等等. Cookie的目的就是为用户带来方便,为网站带来增值.虽然有着许多误传,事实上Cookie并不会造成严重的安全威胁.Cookie永远不会以任何方式执行,

Javascript入门学习资料收集整理篇_基础知识

Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型Javascript入门学习第三篇 js运算Javascript入门学习第四篇 js对象和数组Javascript入门学习第五篇 js函数Javascript入门学习第六篇 js DOM编程Javascript入门学习第七篇 js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

Json.Net6.0入门学习试水篇

原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序.这个字符串看起来有点儿古怪,但是 JavaScript 很容易解释它,而且 JSON 可以表示比"名称 / 值对"更复杂的结构.例如,可以表示数组和复杂的

移动交互小白零基础入门学习笔记之:手势篇

此贴为零基础入门学习贴,总结和积累些基础知识~ 1.基本手势 触屏设备中多样的手势操作,都是由这10种基本手势组合演变而来. 2.常用动作 基本动作是触屏界面中最常用的动作,如打开.选择等. 与对象有关的动作是对屏幕上某一目标对象的操作,如调整图片的位置大小,选择.删除或移动一个文件等. 导览动作是对屏幕视图的操作,如切换屏幕.滚动屏幕.缩放网页等. 画图示意动作是用画图的方式来示意某些操作,这些图形最好是常见易画的图形,符合用户心理预期,如画勾表示确认,画叉表示取消. 以上都是触屏设备中常用的

拒绝从入门到放弃_《鸟哥的 Linux 私房菜 — 基础学习篇(第三版)》必读目录

目录 目录 前言 关于这本书 必看知识点 最后 前言 相信部分刚进入这个行业的新同学会对一个问题感到疑惑,为什么从培训学校出来的学员不被欢迎? 这里记录下一些我个人的看法(博主也曾有面试新员工的经历):说到底还是一个学习能力的问题.就这一点,从我的经历看来(曾到多家企业培训新人),培训出身的技术人员大体而言确实没有科班出身的学得更快准狠一些.学习能力这个东西其实比较虚,它并没有一个直观的考量方式,所以企业一般都会简单粗暴的使用学历.专业.项目经验来衡量.这之间反映了你的计算机知识框架是否完善.基

React.js入门学习第一篇_javascript技巧

一.JSX介绍 ①定义 JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法.React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化.因此推荐在React中使用JSX. ②特点 1.元素名首字母大写 2.符合嵌套规则 3.可以写入求值表达式 4.驼峰式命名 5.不能使用javascript原生函数的一些关键词,如for和class.需要替换成htmlFor和className ③使用方法

JavaScript入门学习书籍的阶段选择

对于许多想学习JavaScript的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习JavaScript的理由. 在JavaScript 方面,自己不是什么专家,也不是什么高手,但自己一路走来,JavaScript 从迷茫到认识,对于JavaScript 书籍的认识或许还有些借鉴价值. 入门推荐首选书籍:<JavaScript DOM 编程艺术 > 当初读了不下4遍,书内容简单,易学,上手快,编程思想严谨.好的入门书,对你未来的编程都会有着深远的影响.此本

Javascript教程:入门学习正则表达式

文章简介:正则表达式30分钟入门教程. 本文目标 30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它. 如何使用本教程 别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有你想像中的那么困难.当然,如果你看完了这篇教程之后,发现自己明白了很多,却又几乎什么都记不得,那也是很正常的--我认为,没接触过正则表达式的人在看完这篇教程后,能把提到过的语法记住80%以上的可能性为零.这里只是让你明白基本的原理,以后你还需要多练习,多使

MySQL入门学习(一)

mysql MySQL入门学习(一)  安装篇   PHP+MySQL+Linux目前已逐渐成为小型web服务器的一种经典组合.在indows环境下构筑和调试MySQL数据库是许多网站开发者的一种首选.本人在Windows98环境下初学MySQL,现将学习过程与经验总结出来供大家参考. 1.下载mysql-3.23.35-win.zip并解压: 2.运行setup.exe;选择d:\mysql,"tyical install" 3.启动mysql,有如下方法:   方法一:使用winm