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 使用form表单select类实现级联菜单效果
Dec 19 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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简介
2006/10/09 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
10款实用的PHP开源工具
2015/10/23 PHP
php实现异步数据调用的方法
2015/12/24 PHP
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python操作MongoDB基础知识
2013/11/01 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python使用tornado实现简单爬虫
2018/07/28 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python中的print()输出
2019/04/12 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
汇源肾宝广告词
2014/03/20 职场文书
初三班主任寄语大全
2014/04/04 职场文书
食品安全承诺书
2014/05/22 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
委托证明模板
2014/09/16 职场文书
社区活动总结范文
2015/05/07 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
导游词之青岛崂山
2019/12/27 职场文书