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 ...
随机推荐
- crossplatfrom---electron入门教程
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- EF for Oracle,dotConnect for Oracle,ODP.NET
dotConnect for Oracle dotConnect for Oracle是一款为Microsoft .NET Framework提供直接Oracle数据库连接的数据发生器控件.它完全基于 ...
- window下Nodejs的部署
nodejs http://nodejs.org/#download npm node cli.js install npm -gf //可以安装最新版的NPM node cli.js install ...
- 学习3ds max插件开发过程中的一些小结
1. 3ds max是以树状结构来管理整个场景的,每个树节点类型为INode 2. Interface类很关键,可以通过其中的GetRootNode.NumberOfChildren和GetChild ...
- 通过HTTP协议上传文件
HTTP是很常见的协议,虽然用得很多,但对细节的了解却是很浅,这回通过向服务端上传文件信息来理解细节.网络库的选择:1.WinHTTP是windows下常用的库:2.CURL是广受喜爱的开源 ...
- MySQL中RESET SLAVE和RESET MASTER的区别
RESET SLAVE的语法如下: RESET SLAVE [ALL] [channel_option] channel_option: FOR CHANNEL channel 其中,channel_ ...
- [c++] Templates
Template是编译时多态.所有的模板都是在编译时产生对应的代码,它没有面向对象中的虚表,无法实现动态多态. Function Template A function template is a p ...
- ZOJ Problem Set - 1001 A + B Problem
ZOJ ACM题集,编译环境VC6.0 #include <stdio.h> int main() { int a,b; while(scanf("%d%d",& ...
- spring整合hibernate的时候报异常org.hibernate.HibernateException: createQuery is not valid without active transaction
在整合Spring4+hibernate4时候,当代码执行到dao中CRUD操作时,报了一个异常, org.hibernate.HibernateException: createQuery is n ...
- .net基本数据类型操作
代码编写的过程中,较多的会涉及到基本数据类型的使用和定义,在项目中,对于类型的判定和类型间的相互转换,有时也较为的麻烦,先提供几种基本数据类型的判断方法: 1.判断对象是否为Int32类型的数字: / ...