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类,兼容IE及Firefox
Jun 23 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
vue2路由基本用法实例分析
Mar 06 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
原生js实现弹窗消息动画
Nov 20 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
德生PL330的评价与改造
2021/03/02 无线电
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
Python与C/C++的相互调用案例
2021/03/04 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
大四自我鉴定
2014/02/08 职场文书
生产文员岗位职责
2014/04/05 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
党员承诺书怎么写
2014/05/20 职场文书
社区工作者演讲稿
2014/05/23 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
起诉书格式范文
2015/05/20 职场文书
物资采购管理制度
2015/08/06 职场文书