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 类
Nov 07 Javascript
关于JavaScript的一些看法
May 27 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
在antd Form表单中select设置初始值操作
Nov 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获取网络文件的实现代码
2010/01/01 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
js轮播图代码分享
2016/07/14 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
jQuery解析json格式数据示例
2018/09/01 jQuery
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
兼职学生的自我评价
2013/11/24 职场文书
迟到检讨书800字
2014/01/13 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
大学生见习报告范文
2014/11/03 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
《为人民服务》教学反思
2016/02/20 职场文书