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 相关文章推荐
Javascript 面向对象(三)接口代码
May 23 Javascript
javascript中常用编程知识
Apr 08 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
精美漂亮的php分页类代码
2013/04/02 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jquery实现submit提交表单
2015/02/03 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
十个Python程序员易犯的错误
2015/12/15 Python
python学生信息管理系统
2018/03/13 Python
详解python配置虚拟环境
2019/04/08 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Django 大文件下载实现过程解析
2019/08/01 Python
softmax及python实现过程解析
2019/09/30 Python
Python生成词云的实现代码
2020/01/14 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
某公司部分笔试题
2013/11/05 面试题
妇科医生自荐信
2013/11/05 职场文书
总经理助理的八要求
2013/11/12 职场文书
教师自我评价范文
2013/12/16 职场文书
劳动模范事迹材料
2014/01/19 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书