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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
代码整洁之道(重构)
Oct 25 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
JavaScript实现点击图片换背景
Nov 20 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代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python实现微信机器人的方法
2019/09/06 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
基于FME使用Python过程图解
2020/05/13 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
市场开发计划书
2014/05/07 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
中班教师个人总结
2015/02/05 职场文书
出生证明范本
2015/06/15 职场文书
导游词书写之黄山
2019/08/06 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP