requirejs 简单示例一
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了requirejs 简单示例一相关的知识，希望对你有一定的参考价值。
现在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 ,妈妈叫我吃饭去了。
以上是关于requirejs 简单示例一的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery、RequireJS 和 KnockoutJS 创建基本的 TypeScript 项目
在android中使用带有片段的roboguice的任何简单示例？