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 相关文章推荐
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
Vue和Flask通信的实现
May 19 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
基于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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
Js+XML 操作
2006/09/20 Javascript
图片自动更新(说明)
2006/10/02 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Python正则表达式完全指南
2017/05/25 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
设计总监岗位职责
2013/12/07 职场文书
银行实习生的自我评价
2013/12/09 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2015年大学生工作总结
2015/04/21 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS