RequireJS入门之一——实现第一个例子
为什么学习RequireJS？
像我这种菜鸟，会提到海量文章里提到的AMD、JS模块化编程、异步... ... 等等
RequireJS是一个Javascript 文件和模块框架，它可以帮我们去管理js代码（我的理解）。
深入学习，我们便会被迫接受一系列的名词：data-main、require、define、baseUrl、paths、shims、deps。。。等等；
总之，很多文章都在向我们推销一些自己都说不明白的名词和概念。
简单点，现在我们要做一个简单的需求，用RequireJS管理我们的js代码，还要能使用jquery！
1.构建一个web工程，跑起来！里面文件如图：
这里面有好多坑，所以我把文件都放在文件根目录，先排除掉这些小问题！
其中jquery.js和require.js是需要去网站下载的，请自行百度。
2. 在index.jsp中添加script标签
可以在<body>里添加一个标签 <p>RequireJS异步加载测试</p>
3. 补充main.js文件
require.config({
paths: {
jquery: 'jquery-2.1.1'
}
});
require(['jquery'], function($) {
alert($().jquery);
});
4.跑起来~
你会看到弹出框，页面已经渲染显示了 “RequireJS异步加载测试” 。
小结：
a. RequireJS由James Burke创建，他也是AMD规范的创始人。它是一个工具库，用于客户端的模块管理。
从本例体现出的：1. 弹出alert的时候页面同时也被渲染，体现了异步加载的功能，传统放在head中的写法会造成阻塞，只有点击确定后才能渲染页面。
2. 页面只需要引入一个require.js，不需要再引入其他繁多复杂的js代码，剩下的工作交给RequireJS框架来做！
b. 学习之前先了解AMD规范，AMD通过define来定义模块，基本模式：define("id",[deps1,deps2,...],callback);
为什么本例没有define就可以跑起来？ 因为jquery提供了对AMD的支持。path对象即是用来引入各种模块的。
普通的js代码可否被RequireJS管理？ 可以，使用shims来加载这些资源！
c. 总结以后的编码思路：
Xx.jsp Xx.js(同main.js) 通过 require.config 引入各种js模块（资源）；require加载所需模块，并在回调函数中传入对应变量，以方便在其中直接调用各模块中的函数和变量。
d. 自己实现： 页面加一个按钮；在main.js中加入juqery的click监听事件，测试是否监听成功！
e. 遗留问题：路径问题，肯定不能在根目录，不过这都不是事儿！
RequireJS入门之一——实现第一个例子的更多相关文章
- Activity工作流(2)-入门安装运行第一个例子
转: Activity工作流(2)-入门安装运行第一个例子 置顶 2017年05月24日 15:58:50 li_ch_ch 阅读数:24432 版权声明:本文为博主原创文章,未经博主允许不得转载 ...
- spring boot入门 -- 介绍和第一个例子
"越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...
- BootStrap入门_创建第一个例子
一.选择合适的IDE 一般前端开发选用的都是WebStorm.Brackets等,因为本人对VS比较熟悉,索性就拿VS进行练习了,而且VS练习有些好处,就是通过nuget方式获取BootStrap可以 ...
- RequireJS入门（一） 转
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS入门与进阶
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS入门（一）
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript.你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS 入门指南
RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...
- 【OpenCV入门指南】第一篇 安装OpenCV
http://blog.csdn.net/morewindows/article/details/8225783/ win10下vs2015配置Opencv3.1.0过程详解(转) http://ww ...
- RequireJS入门（三）转
这篇来写一个具有依赖的事件模块event.event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.da ...
随机推荐
- Fig 应用编排
Fig是Docker的应用编排工具,主要用来跟 Docker 一起来构建基于 Docker 的复杂应用,Fig 通过一个配置文件来管理多个Docker容器,非常适合组合使用多个容器进行开发的场景. 说 ...
- Java 网络爬虫获取页面源代码
原博文:http://www.cnblogs.com/xudong-bupt/archive/2013/03/20/2971893.html 1.网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网 ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- SSIS 参数的值
一,SSIS Parameter Value 的type 一个Parameter的Value共有三种类型,分别是Design Value,Server Value,Execution Value. D ...
- Entity Framework Code First执行SQL语句、视图及存储过程
1.Entity Framework Code First查询视图 Entity Framework Code First目前还没有特别针对View操作的方法,但对于可更新的视图,可以采用与Table ...
- 利用扩展事件进行调优和Troubleshooting PPT分享
本篇主题是我在2015年中国数据库大会(DTCC)上的分享,扩展事件从2008版本出来到现在已经有6-7年,国内却很少有相关资料和使用,现在分享一下PPT,希望对大家有所帮助. 可 ...
- 【转】oracle中in和exists的区别
原文地址:http://blog.itpub.net/7478833/viewspace-441043/ 感谢作者 in 和 exists区别 in 是把外表和内表作hash join,而ex ...
- 如何将MySQL help contents的内容有层次的输出
经常会遇到这种情况,在一个不能上网的环境通过MySQL客户端登录数据库,想执行一个操作,却忘了操作的具体语法,各种不方便. 其实,MySQL数据库内置了帮助文档,通过help contents即可查看 ...
- [OpenCV] Convolutional Neural Network
Ref: 从LeNet-5看卷积神经网络CNNs 关于这篇论文的一些博文的QAC: 1. 基本原理 MLP(Multilayer Perceptron,多层感知器)是一种前向神经网络(如下图所示),相 ...
- 触屏touch事件记录
一.chrome中的Remote Debugging 一开始并没有用这个调试,不过后面需要多点触碰,可chrome模拟器中我没看到这个功能.突然看到了Remote Debugging,网站需要FQ才能 ...