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 parsefloat parseint 转换函数
Jan 21 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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 Smarty模板生成html文档的方法
2010/04/12 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php 生成短网址原理及代码
2014/01/23 PHP
PHP如何实现跨域
2016/05/30 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
vue2.x select2 指令封装详解
2017/10/12 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
JS实现密码框效果
2020/09/10 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
毕业生文员求职信
2013/11/03 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
营销与策划专业求职信
2014/06/20 职场文书
爱的教育观后感
2015/06/17 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
Golang入门之计时器
2022/05/04 Golang
MySQL查询日期时间
2022/05/15 MySQL