第二次聊一聊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 21 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
浅谈javascript的分号的使用
May 12 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
使用 php4 加速 web 传输
2006/10/09 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
详解React中合并单元格的正确写法
2019/01/08 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
霸气队列口号
2014/06/18 职场文书
社区助残日活动总结
2014/08/29 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
小学运动会入场口号
2015/12/24 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python