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 相关文章推荐
Javascript加载速度慢的解决方案
Mar 11 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
js+html制作简单验证码
2017/02/16 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python机器学习之决策树算法
2017/12/22 Python
Python实现ping指定IP的示例
2018/06/04 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
小学三年级学生评语
2014/04/22 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
授权委托书
2014/09/17 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
导游词之湖北武当山
2019/09/23 职场文书