require.js 入门笔记
2016-03-26 11:52
441 查看
网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高.
而且长长的JS代码,没有很好的将他们 模块化,对以后的维护造成极大的困难.
为此特地去了解下 require.js 的用途以及使用方法,为以后 代码重构 和 模块化 提供帮助.让后来者能更好的去管理代码.
1 为什么我要用require.js?
最近在制作个网站.引入了
HTML里依次引入了 js 代码,在加载这些 js 的时候,页面将停止渲染,直到 js 文件加载完毕.
不同的 js 之间存在依赖关系,必须保证 js 文件按顺序执行,当依赖关系变得复杂的时候, 编写和维护将会变得极其困难.
为此我们引入 require.js, 正是为了解决这两个问题.
2 在页面中加载require
先去官网下载 最新的 require.js.
在 html 头部 引用该 JS
data-main 是必要的属性, 指定 require.js 的入口文件.浏览器将会在 require.js加载完时 自动加载 该 入口文件
3 加载 JavaScript
使用 require.config 来管理我们的 js
利用 require.config, 使用baseUrl及"paths" config去设置module ID.
4 定义模块
在test.js 里 定义模块
一个 js 文件里 应该只定义一个模块,模块里 云溪加载多个模块,顺序不定,但是 依赖的顺序 最终会是正确的.
5 加载模块.
6 加载非规范的模块
当模块没有才用 规范的 define() 定义的时候,我们就需要 shim
7 利用 r.js 压缩打包
将 js 分成了很多个文件和模块后,确实是方便维护了,但是还不够。
更多的 js 会造成 更多的 HTTP 响应,这将很严重的拖慢系统的速度。
为此我们 压缩这些 js 到一个或者几个文件,来减少 http 请求;
而且长长的JS代码,没有很好的将他们 模块化,对以后的维护造成极大的困难.
为此特地去了解下 require.js 的用途以及使用方法,为以后 代码重构 和 模块化 提供帮助.让后来者能更好的去管理代码.
1 为什么我要用require.js?
最近在制作个网站.引入了
<script src="static/script/jquery.js"></script> <script src="static/script/jquery.lazyload.min.js"></script> <script src="static/script/swiper.js"></script> <script src="static/script/laydate/laydate.js"></script> . . . <script scr="static/script/common.js"></script> <!--业务代码-->
HTML里依次引入了 js 代码,在加载这些 js 的时候,页面将停止渲染,直到 js 文件加载完毕.
不同的 js 之间存在依赖关系,必须保证 js 文件按顺序执行,当依赖关系变得复杂的时候, 编写和维护将会变得极其困难.
为此我们引入 require.js, 正是为了解决这两个问题.
2 在页面中加载require
先去官网下载 最新的 require.js.
在 html 头部 引用该 JS
<script data-main="static/script/main" src="static/script/require.js"></script>
data-main 是必要的属性, 指定 require.js 的入口文件.浏览器将会在 require.js加载完时 自动加载 该 入口文件
3 加载 JavaScript
使用 require.config 来管理我们的 js
require.config({ baseUrl: "static/script", paths:{ jquery:'jquery', lazy:'jquery.lazyload' common:'common', swiper:'swiper', laydate:'laydate/laydate', // 测试 test:'test', } });
利用 require.config, 使用baseUrl及"paths" config去设置module ID.
4 定义模块
在test.js 里 定义模块
一个 js 文件里 应该只定义一个模块,模块里 云溪加载多个模块,顺序不定,但是 依赖的顺序 最终会是正确的.
define(['jquery'],function($){ var width = 1000; return { //some function() setWidth():{ width = $(window).width() }, getWidth():{ return width; } }; });
5 加载模块.
require(['test'],function(test){ test.setWidth(); // 输出宽度 alert(test.getWidth()); });
6 加载非规范的模块
当模块没有才用 规范的 define() 定义的时候,我们就需要 shim
require.config({ paths:{ jquery:'jquery-2.1.4.min', }, shim:{ 'test':{ // 该不规范的模块所需要的依赖 deps:['jquery'], exports:'test', } }, });
7 利用 r.js 压缩打包
将 js 分成了很多个文件和模块后,确实是方便维护了,但是还不够。
更多的 js 会造成 更多的 HTTP 响应,这将很严重的拖慢系统的速度。
为此我们 压缩这些 js 到一个或者几个文件,来减少 http 请求;
相关文章推荐
- UITabBarController 根视图控制器
- HDU Buildings
- String、StringBuffer和StringBuilder使用和区别
- 在storyboard中的静态UITableView中拖入 UISearchBar and Search Display Controller出现的奇怪问题
- HDU 3436 Queue-jumpers
- java Queue集合
- hdu 4441 Queue Sequence
- Guice学习之Bindings
- 使用easyui-textbox, 点回车键,执行某个按钮的方法
- POJ 2524 Ubiquitous Religions
- UIScrollView的delaysContentTouches与canCencelContentTouches属性
- UIScrollView的作用原理,实现scrollView中touch事件作用子视图
- UIScrollView上的控件处理touch事件
- UIScrollView的属性总结
- UITableView 如何不动态计算返回的cell 的高度
- 利用UIStoryboard实现从一个视图控制器界面跳到另一个视图控制器界面
- run as maven build时报错
- WebSphere Message Queue(MQ)与WebSphere Message Queue Broker(MB)的区别
- lintcode-medium-Longest Consecutive Sequence
- lintcode-medium-Longest Common Subsequence