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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JQuery教学之性能优化
May 14 Javascript
JS判断字符串包含的方法
May 05 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
解决python 找不到module的问题
2020/02/12 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
使用Python构造hive insert语句说明
2020/06/06 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
廉洁家庭事迹材料
2014/05/15 职场文书
服务承诺书格式
2014/05/21 职场文书
电子专业求职信
2014/06/19 职场文书
国庆节慰问信
2015/02/15 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
Python连续赋值需要注意的一些问题
2021/06/03 Python
python_tkinter事件类型详情
2022/03/20 Python