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获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
javascript类型转换示例
Apr 29 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
详谈javascript异步编程
Feb 21 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
Javascript的this详解
Mar 23 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python解析xml简单示例
2019/06/21 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python实现最常见加密方式详解
2019/07/13 Python
Django models.py应用实现过程详解
2019/07/29 Python
python的命名规则知识点总结
2019/10/04 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
励志演讲稿300字
2014/08/21 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python