RequireJS入门一之实现第一个例子


Posted in Javascript onSeptember 30, 2015

为什么学习RequireJS?

像我这种菜鸟,会提到海量文章里提到的AMD、JS模块化编程、异步... ... 等等

RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。

RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理js代码(我的理解)。

深入学习,我们便会被迫接受一系列的名词:data-main、require、define、baseUrl、paths、shims、deps。。。等等;

总之,很多文章都在向我们推销一些自己都说不明白的名词和概念。

简单点,现在我们要做一个简单的需求,用RequireJS管理我们的js代码,还要能使用jquery!

1.构建一个web工程,跑起来!

里面文件如图:

RequireJS入门一之实现第一个例子 

这里面有好多坑,所以我把文件都放在文件根目录,先排除掉这些小问题!

其中jquery.js和require.js是需要去网站下载的,请自行百度。

2. 在index.jsp中添加script标签

RequireJS入门一之实现第一个例子 

可以在<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入门一之实现第一个例子的全部叙述,希望对大家有所帮助。

Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
js 深拷贝函数
Dec 04 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 #Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 #Javascript
浅谈Javascript中substr和substring的区别
Sep 30 #Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 #Javascript
js实现创建删除html元素小结
Sep 30 #Javascript
node.js下LDAP查询实例分享
Sep 30 #Javascript
Javascript中replace()小结
Sep 30 #Javascript
You might like
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python实现的简单RPG游戏流程实例
2015/06/28 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python subprocess库的使用详解
2018/10/26 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
如何通过python实现人脸识别验证
2020/01/17 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
论文评语大全
2014/04/29 职场文书
反对邪教标语
2014/06/30 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
详解Django的MVT设计模式
2021/04/29 Python