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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
基于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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php echo 输出字符串函数详解
2010/05/13 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
Python内置函数 next的具体使用方法
2017/11/24 Python
浅谈Python中的私有变量
2018/02/28 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
小班上学期评语
2014/05/05 职场文书
股权转让协议书
2014/12/07 职场文书
领导欢迎词致辞
2015/01/23 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
校园新闻稿范文
2015/07/18 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL