require.js 入门笔记
网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高.
而且长长的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 请求;
require.js 入门笔记的更多相关文章
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- require.js 入门学习 (share)
以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...
- 【转】require.js学习笔记(二)
require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...
- require.js学习笔记(内容属于转载总结)
<script data-main="src/app" src="src/lib/require.js"></script> backb ...
- require.js入门指南(三)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- require.js入门指南(二)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- require.js入门指南(一)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- require.js 入门学习-备
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- require.js入门
小颖目前所在的公司在用require.js,小颖一只说要写个小demo,今天抽空把自己写的小demo分享出来,希望对初学者有一些帮助,嘻嘻 学习资料: CSDN上的一篇文章:使用RequireJS优化 ...
随机推荐
- javascript 利用匿名函数对象给你异步回调方法传参数
先来创建一个匿名函数对象: /*** * 匿名函数 */ var callChangeBtn=new function(bugBtn){ this.chage=function(json){ bugB ...
- SQL 存储过程中QUOTED_IDENTIFIER on/off
http://huihai.iteye.com/blog/1005144 在存储过程中经常会有 SET QUOTED_IDENTIFIER on SET QUOTED_IDENTIFIER off S ...
- [2014.01.27]WFsoft.wfLibrary.wfVerifyImage 1.8
全新开发的验证码图片控件--WFsoft.wfLibrary.wfVerifyImage,使用简单,功能强大. 完全支持.net 2.0编写,对下一代操作系统平稳过渡. 同时支持.ne ...
- iis WebSocket 搭建环境及配置
http://www.86y.org/art_detail.aspx?id=816 WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例如Chrome,S ...
- 使用ffmpeg转换webm格式
安装ffmpeg brew install ffmpeg --with-libvpx --with-libvorbis 如果已经装过 brew reinstall ffmpeg --with-libv ...
- ruby发送邮件方法
#encoding:utf-8require 'mail'def send_email sum,fail,case_path,name,receive smtp = { :address => ...
- CG Rendering v.s. Browser Rendering
浏览器的渲染技术 v.s. CG渲染器的渲染技术 看了两篇文章: 浏览器的渲染原理简介, How browsers work(译文), 想到了一些东西, 对比两者, 或许有些东西能想得更明白些. 以下 ...
- Lambda演算 - 简述Y组合子的作用
Y组合子:\f.(\x.f(xx))(\x.f(xx)),接受一个函数,返回一个高阶函数 Y组合子用于生成匿名递归函数. 什么叫匿名递归函数,考虑以下C语言递归函数 int sum(int n) { ...
- PHP 返回13位时间戳
13位时间戳生成函数如下所示: private function getMillisecond() { list($t1, $t2) = explode(' ', microtime()); retu ...
- linux查找日志技巧
对于从事web开发的人员来说.服务器上的日志多如牛毛,如何快速从中找出所需信息非常重要,以下是我在工作中用到的查找日志的简单命令,希望能对您有所帮助: 工具/原料 linux SecureCR ...