RequireJS实例分析【转】
转自http://www.cnblogs.com/xing901022/p/4658548.html
随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供两种解决思路:
1 模块化组织JS
2 异步加载JS文件
有了这两种解决办法,能有效的帮助我们解决前端代码库的组织难题。
本文下面就模拟一个小例子,由于并没有应用实践,因此命名很戳,还请见谅。
关于Require.js在多页面应用的实践,可以参考:multipage
层次组织
/public
|------require.js、config.js、index.html
|-------lib/
|-------a.js、b.js
|-------orthers/
|-------c.js
文件功能
require.js:
其中requirejs的核心代码就是require.js文件,可以从官方网站上下载:
config.js:
用于配置requirejs的相关内容,可以设置文件目录,加载模块命名匹配,以及一些依赖关系等等。
index.html:
我们的测试页面或者网址首页。
/lib/a.js和/lib/b.js 以及 /others/c.js
是测试的模块js文件。
代码详情
index.html
<doctype html> <html> <meta http-quiv="Content-Type" content="text/html;charset=UTF-8"> <script data-main="config" src="require.js"></script> </html> <body> <h1>This is test for RequireJS</h1> <script type="text/javascript"> alert("index"); </script> </body>
其中,data-main指定主要的配置文件;src为requirejs的文件。
config.js
require.config({ // baseUrl:'/', paths:{ "a":"lib/a", "b":"lib/b", "c":"others/c" } }); require(['a','b','c'],function(a,b,c){ a.hello(); b.hello(); c.hello(); });
baseUrl指定所有文件的主要目录,paths配置模块名字以及其匹配的加载路径。
当有需要使用某些模块时,就可以通过require([xxx],function(xxx){xxx});的方式使用。
a.js
define([], function() { return { hello: function() { alert("hello, a"); } } });
b.js
define([], function() { return { hello: function() { alert("hello, b"); } } });
c.js
define([], function() { return { hello: function() { alert("hello, c"); } } });
模块化文件,一般是一个功能是一个文件。文件的名字,就是上面requireconfig中配置的模块名字。require加载文件时,会自动加上.js后缀。
当某些模块依赖其他模块时,可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系,require会在异步加载后,自动调整次序。
当访问index.html时,会先加载require.js然后把需要加载的文件都通过appendChild的方式,添加到index.html的底部。
因此会先弹出index对话框,当执行config.js的后半部分代码时,会依次使用a.js b.js c.js,因此也会依次弹出三个对话框。
这就是简单的模块化组织架构,如果需要参考实例项目,可以学习测试样例的源码,它主要为elasticsearch提供前端UI。
参考
【1】阮一峰requirejs:http://www.ruanyifeng.com/blog/2012/11/require_js.html
【2】requirejs中文文档:http://www.requirejs.cn/
最新文章
- [转] C++的引用传递、指针传递参数在java中的相应处理方法
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
- WIn2003的IIS6解决IE11登录问题。
- ASP.NET MVC程序中动态修改form的Action值
- 【poj3264】 Balanced Lineup
- smarty变量调节器案例
- I/O地址映射
- HTML5+CSS3-机器猫
- Silverlight动画的基本知识、关键帧动画
- iOS学习之根据文本内容动态计算文本框高度的步骤
- Qt String 与char* char int之间的转换
- NEC遥控信号解码(包含完整代码)
- sql: update from
- kettle新建资源库(4)
- check2
- 使用 Python 实现命令行词典(一)
- Ajax 学习笔记
- 【转】C缺陷和陷阱学习笔记
- Android IllegalArgumentException: Cannot draw recycled bitmaps解决方法
- Python面试笔记三
热门文章
- java 24 - 9 GUI 之 给窗体换图标、设置启动在屏幕中间、更换皮肤
- Android系统自带APP分析——短信app
- HTML 学习笔记 CSS样式(简介和语法)
- iOS UIControl 详解
- memcache分布式 [一致性hash算法] 的php实现
- Mac下搭建php开发环境教程
- MySQL迁移[转]
- noi题库(noi.openjudge.cn) 1.7编程基础之字符串T21——T30
- 前端见微知著JavaScript基础篇:你所不知道的apply, call 和 bind
- 【深圳】OSC源创会第44期 开始报名