网站越来越庞大,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 入门笔记的更多相关文章

  1. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  2. require.js 入门学习 (share)

    以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...

  3. 【转】require.js学习笔记(二)

    require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...

  4. require.js学习笔记(内容属于转载总结)

    <script data-main="src/app" src="src/lib/require.js"></script> backb ...

  5. require.js入门指南(三)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  6. require.js入门指南(二)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  7. require.js入门指南(一)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. require.js 入门学习-备

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  9. require.js入门

    小颖目前所在的公司在用require.js,小颖一只说要写个小demo,今天抽空把自己写的小demo分享出来,希望对初学者有一些帮助,嘻嘻 学习资料: CSDN上的一篇文章:使用RequireJS优化 ...

随机推荐

  1. JMeter基础之一 一个简单的性能测试

    JMeter基础之一 一个简单的性能测试 上一节中,我们了解了jmeter的一此主要元件,那么这些元件如何使用到性能测试中呢.这一节创建一个简单的测试计划来使用这些元件.该计划对应的测试需求. 1)测 ...

  2. Android应用开发-数据存储和界面展现(一)(重制版)

    常见布局 相对布局(RelativeLayout) 相对布局下控件默认位置都是左上角(左对齐.顶部对齐父元素),控件之间可以重叠 可以相对于父元素上下左右对齐,相对于父元素水平居中.竖直居中.水平竖直 ...

  3. 如何判断exe或dll的目标平台及是否是.NET?

    1. COFF文件头中偏移0处的Machine指示目标机器类型(IMAGE_FILE_MACHINE_AMD64等),偏移18处的Characteristics位指示文件属性(IMAGE_FILE_3 ...

  4. ubuntu12.10 源更新出错(sudo apt-get update)

    Ubuntu12.10 刚安装完发现vi编辑器无法正常使用,后来用sudo apt-get install vim 一直出错,搜索相关资源发现需要更新源 首先,备份一下Ubuntu 12.10 原来的 ...

  5. cPage分页,asp.net自定义分页,url传值分页,支持datalist、gridview、Repeater等

    asp.net分页是最最常用的功能,实现方式也很多,使用不同的控件有不同的分页方式. 下面分享一个我们团队内部使用了多年的一个分页控件cPage,是自己设计编写,没有冗余,简单.快速. cPage,现 ...

  6. uml和模式01

    // */ // ]]> uml和模式01 1. UML 2. 用例图 3. 用例和类的关系 4. 类图 1 UML 模型语言(Modeling Language 检查ML)是一种设计语言,人们 ...

  7. C#:调用webservice时提示对操作的回复消息正文进行反序列化时出错

    主要原因webservice返回值的长度超过readerQuotas中的了maxStringContentLength值,造成返回值截断,不完整,反序列化时出错. <readerQuotas m ...

  8. 黄聪:CamtasiaStudio如何导出视频上传优酷实现高清

  9. Python基础(二)之元组及字典

    元组:以一对小括号表示,不可以增删改,只可查看. 字典:以一对大括号表示,字典中含key及value,字典是无序的. 下面介绍字典和元组的一些常见操作: 一.元组 a = ('haha','xixi' ...

  10. Oracle_RAC数据库GI的PSU升级(11.2.0.4.0到11.2.0.4.8)

    Oracle_RAC数据库GI的PSU升级(11.2.0.4.0到11.2.0.4.8) 本次演示为升级oracle rac数据库,用GI的psu升级,从11.2.0.4.0升级到11.2.0.4.8 ...