第二次聊一聊JS require.js模块化工具的基础知识


Posted in Javascript onApril 17, 2016

前一篇:JS模块化工具我们以非常简单的方式引入了requirejs:https://3water.com/article/82527.htm,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等

基本API

require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短

define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块,并执行加载完后的回调函数
前一篇中的a.js:

define(function(){
  function fun1(){
   alert("it works");
  }
  fun1();
})

 通过define函数定义了一个模块,然后再页面中使用:

require(["js/a"]);
来加载该模块(注意require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义),requir API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑,如:

require(["js/a"],function(){
  alert("load finished");
})

加载文件

之前的例子中加载模块都是本地js,但是大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN,这样就不能通过这种方式来加载了,我们以加载一个jquery库为例:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] 
  }
})
require(["jquery","js/a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

这边涉及了require.config,require.config是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,比如将百度的jquery库地址标记为jquery,这样在require时只需要写["jquery"]就可以加载该js,本地的js我们也可以这样配置:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

通过paths的配置会使我们的模块名字更精炼,paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库,如:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished"); 
  })
})

这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的jquery

在使用requirejs时,加载模块时不用写.js后缀的,当然也是不能写后缀
上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:

require(["jquery","underscore"],function($, _){
  $(function(){
    _.each([1,2,3],alert);
  })
})

如果某个模块不输出变量值,则没有,所以尽量将输出的模块写在前面,防止位置错乱引发误解

全局配置

上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫"主数据"的功能,我们首先创建一个main.js:

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a" 
  }
})

然后再页面中使用下面的方式来使用requirejs:

<script data-main="js/main" src="js/require.js"></script>
解释一下,加载requirejs脚本的script标签加入了data-main属性,这个属性指定的js将在加载完reuqire.js后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名

data-main还有一个重要的功能,当script标签指定data-main属性时,require会默认的将data-main指定的js为根路径,是什么意思呢?如上面的data-main="js/main"设定后,我们在使用require(['jquery'])后(不配置jquery的paths),require会自动加载js/jquery.js这个文件,而不是jquery.js,相当于默认配置了:

require.config({
  baseUrl : "js"
})

第三方模块

通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim,shim解释起来也比较难理解,shim直接翻译为"垫",其实也是有这层意思的,目前我主要用在两个地方

1. 非AMD模块输出,将非标准的AMD模块"垫"成可用的模块,例如:在老版本的jquery中,是没有继承AMD规范的,所以不能直接require["jquery"],这时候就需要shim,比如我要是用underscore类库,但是他并没有实现AMD规范,那我们可以这样配置

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    }
  }
})

这样配置后,我们就可以在其他模块中引用underscore模块:

require(["underscore"], function(_){
  _.each([1,2,3], alert);
})

插件形式的非AMD模块,我们经常会用到jquery插件,而且这些插件基本都不符合AMD规范,比如jquery.form插件,这时候就需要将form插件"垫"到jquery中:

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : {
      deps : ["jquery"]
    }
  }
})

也可以简写为:

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : ["jquery"]
  }
})

这样配置之后我们就可以使用加载插件后的jquery了

require.config(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
})

好了,requirejs的基本配置大致就是这么多,还有一些扩展的功能会在之后的篇幅中提到,大家不要错过呀!

Javascript 相关文章推荐
javascript 表单验证常见正则
Sep 28 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
js运动事件函数详解
Oct 21 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
理解javascript对象继承
Apr 17 #Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
js如何准确获取当前页面url网址信息
Sep 13 #Javascript
基于javascript实现图片切换效果
Apr 17 #Javascript
You might like
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
python str与repr的区别
2013/03/23 Python
在python中的socket模块使用代理实例
2014/05/29 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
python3字符串输出常见面试题总结
2020/12/01 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
捐款倡议书范文
2014/02/02 职场文书
服装店营销方案
2014/03/10 职场文书
岗位聘任书范文
2014/03/29 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS