现在web前端动不动就模块化,艾玛,吓死宝宝了。所以最近就打听模块化的消息,结果不知咋地就撞到了requirejs,说到Requirjs就要说到 AMD和CMD,
首先:AMD和CMD是规范,而requirejs和sealjs是具体的实现。
可以参考:
基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。
不是我不相信sealjs,只是查阅后,老有人说sealjs什么文档啊,什么打包上线一些问题,突然就转向requirejs了。
官方网站:
http://www.requirejs.org/
http://www.requirejs.cn/
哎呀,本人很懒,不想上传图片啊。
目录:
scripts
helper
util.js
lib
jquery-1.8.2.js
require.js
main.js
project.html
util.js代码:
define({ add :function (x,y) { return x +y; } })
html代码:
<!DOCTYPE html> <html> <head> <title>My Sample Project</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script data-main="scripts/main" src="scripts/lib/require.js"></script> <!-- <script src="scripts/main.js"></script> --> </head> <body> <h1>My Sample Project</h1> </body> </html>
main.js代码:
require.config({ baseUrl:"scripts", //map:{ // //}, paths:{ jquery:"lib/jquery-1.8.2", util:"helper/util" } }) require(["util","jquery"],function (util,$) { console.log(util.add(1,3)); $(document.body).append(‘<span>Content added by Jquery</span>‘); })
执行,就会在控制台输出 4,和在body下面出现Content added by Jquery的字。
当然,这是入门级别,知识点:
1. data-main属性说明默认入口,你当然可以单独添加一个script标签
2. baseurl:基地址,paths等配置里面就可以直接抒写后面部分就可以
3.path里面是键值对的定义,值里面不需要.js
4. require第一个参数是依赖模块列表,第二个是加载依赖完毕后的回调,回调参数里面是依赖模块
基本上知道这个几点,简单的requirejs加载就回了喽喽。
so easy ,妈妈叫我吃饭去了。