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实现把数字转换成中文
Jun 29 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
php代码书写习惯优化小结
2013/06/20 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
php5与php7的区别点总结
2019/10/11 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
vuex实现简易计数器
2016/10/27 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
JS原型对象操作实例分析
2020/06/06 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
大学生新学期计划书
2014/04/28 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
电影建党伟业观后感
2015/06/01 职场文书
考试后的感想
2015/08/07 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js