JavaScript中Require调用js的实例分享


Posted in Javascript onOctober 27, 2017

在我最初开始写 JavaScript 函数时,通常是这样的:

function fun1() {
 // some code here
}
function fun2() {
 // some other code here
}
...

函数全写在全局环境中,项目很小时,通常不会有什么冲突问题。

但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了。于是引入命名空间的概念,开始模块化代码。

命名空间下的函数

在命名空间下,我的代码这样写:

var com = com || {};
com.zfanw = com.zfanw || {};
com.zfanw.module1 = (function() {
 // some code here
 return {
 func1: func1,
 ...
 };
}());
com.zfanw.module2 = (function() {
 // some other code here
 return {
 func1: func1,
 ...
 };
}());
...

本着要面向对象的原则,执行函数通常我要这么写的:

com.zfanw.module1.func1.apply({},['arg1',arg2]);
...

当然,为了少打些字符,我还会在闭包中导入1公共 API 接口:3water.com

(function($, mod1) {
 // some code here
 mod1.func1.apply({},['arg1',arg2]);
}(jQuery, com.zfanw.module1));
...

至此,代码冲突的可能性已经很小,但代码依赖的问题,多脚本文件管理、阻塞的问题,渐渐浮出水面 ? 命名空间的办法开始捉急。

于是 Require.js2 出场。

Require.js

首先了解下 require.js 里模块的概念3:

A module is different from a traditional script file in that it defines a well-scoped object that avoids polluting the global namespace. It can explicitly list its dependencies and get a handle on those dependencies without needing to refer to global objects, but instead receive the dependencies as arguments to the function that defines the module.

简单地说,有两点,一、模块作用域自成一体,不污染全局空间;二、模块指明依赖关系,并且依赖是通过参数传递的形式导入的,无需通过全局对象引用 ? 依赖同样不污染全局空间。

定义模块

与上面的老长的命名空间方式不同,require.js 用全局方法 define 来定义模块,形式如下:

define(id?, dependencies?, factory); // ? 表示可选项

我且把模块分两种。

无依赖的模块

假如一个模块并不依赖其他模块,那么定义起来是很简单的,比如模块 hello 放在 hello.js 文件中:

define(function() {
 // some code here
 return {
 // some public api
 };
});

有依赖的模块

有依赖的模块要稍稍复杂点,define 时,我们需要罗列出模块的依赖情况:

define(['jquery'], function($) { // 比如这个模块,代码的执行依赖 jQuery,require.js 会先加载 jquery 模块代码,并加以执行,然后将依赖模块 以 $ 的参数形式传入回调函数中,回调函数将执行结果注册为模块
 // maybe some code here
 return {
 // some public api
 };
});

这里,依赖中的 'jquery' 是模块相对于 baseUrl 的路径,等效于模块 ID。

现在,再回过头,看看上面写过的闭包中导入公共 API 的代码,跟 define 函数做个对比:

(function($, mod1) {
 // some code here
 mod1.func1.apply({},['arg1',arg2]);
}(jQuery, com.zfanw.module1));

这段代码里,我同样把 jQuery 导入了,在闭包里,我同样是通过 $ 这个外部传入的参数来访问 jQuery。可以说,它「定义依赖」的方式跟 define 方法很相似,不同的是,define 导入的 jquery 不是全局变量,所以不会污染全局环境。

关于模块名称

define 函数有三个参数,第一个 id 即模块名称,这个名称的格式是相对于 baseUrl 的路径除去文件格式,比如 baseUrl 为 js 目录,一个模块放在 js/libs/hi.js 里,则如果名称是这样定义的:

define('libs/hi', ['jquery'], function($){......});

这样的定义形式的好处是,模块不可能冲突,因为同一目录下不允许同名文件。但也因此 require.js 建议我们不要设置模块名称,因为设置了 ‘libs/hi' 的模块名称后,模块就必须放在 js/libs 目录下的 hi.js 文件中,要移动位置的话,模块名称要跟着改变。至于后期利用 r.js 优化时生成了模块名称,那已经是另外一回事。

使用模块

在定义好「有依赖」、「没依赖」的各种模块后,我们该怎么用它?Require.js 提供了一个函数,require(与 requirejs 等效)。

require 函数加载依赖并执行回调,与 define 不同的是,它不会把回调结果4注册成模块:

require(['jquery'], function($) { // 这个函数加载 jquery 依赖,然后执行回调代码
 console.log($);
});

举一个简单的例子。我有一个文件夹,文件结构如下:

index.html
 js/
  main.js
  require.js
  jquery.js

这里 jquery.js 已经注册为 AMD 模块,则 HTML 文件里这样引用 require.js:

<script src="js/require.js" data-main="js/main"></script>

require.js 会检查 data-main 属性值,这里是 js/main,根据设定,它会加载 js 目录下的 main.js 文件。

main.js 文件里,我只干一件事,用 jQuery 方法取得当前窗口的宽度:

require(['jquery'], function($) {
 var w = $(window).width();
 console.log(w);
});

执行代码就这么简单。

非 AMD 规范的模块

但事情远没有我们想像中那么美好,AMD 只是一种社区规范,并非标准,而且在它出现以前,已经有各种各样的流行库存在,更不用说我们自己早期写的代码,所以我们一定会碰上一堆非 AMD 规范的模块。为了让 require.js 能够加载它们,并且自动识别、载入依赖,我们有两种选择,一、给它们全穿上一个叫 define 的函数;二、使用 Require.js 提供的配置选项 shim,曲线救国。

比如我手上一个项目,因为某种原因,还在用 jQuery 1.4.1 版本,而 jQuery 是从1.7版本开始才注册为 AMD 模块的,我要在 require.js 中使用,就需要先做 shim:

require.config({
 shim: {
  'jquery-1.4.1': { // <= 这个是相对于 main.js 的路径www.45it.com
   exports: 'jQuery' // <= 这个值需要稍加注意,稍后会提及
  },
  'libs/jquery-throttle-debounce.min': { // <= jQuery 插件
   deps: ['jquery-1.4.1'] //无需 exports,因为我们只是在增强 jQuery 功能
  }
 },
});
require(['jquery-1.4.1', 'libs/jquery-throttle-debounce.min'], function($){
 console.log($.debounce);
});

写完 shim,发现 jquery-1.4.1、libs/jquery-throttle-debounce.min 这样的名称有点长。这里我们又有两种选择,一是直接打开修改 js 文件名,或者使用 require.js 提供的配置项 paths 给模块 ID 指定对应的真实文件路径:

require.config({
 paths: {
  'jquery': 'jquery-1.4.1', // <= 模块 jquery 指向 js/jquery-1.4.1.js 文件
  'debounce': 'libs/jquery-throttle-debounce.min'
 },
 shim: {
  'jquery': {
   exports: '$'
  },
  'debounce': {
   deps: ['jquery']
  }
 }
});
require(['jquery', 'debounce'], function($){
 console.log($.debounce);
});

这样,引用起来就方便多了。

另外,需要注意 shim 中的 exports 项,它的概念更接近 imports,即把全局变量导入。我们如果把 exports 值改成非全局变量名,就会导致传入回调的对象变成 undefined,举个例子:

require.config({
 paths: {
  'jquery': 'jquery-1.4.1',
 },
 shim: {
  'jquery': {
   exports: 'hellojQuery' // 这里我把 exports 值设置为 jQuery/$ 以外的值
  }
 }
});
require(['jquery'], function($){
 console.log($);// 这里,会显示 undefined
});

其他模块在做 shim 时同理,比如 underscore 需要 exports 成 _。

Require.js 的好处

说了这么多,Require.js 到底有什么好处?

并行加载

我们知道,<script></script> 标签会阻塞页面,加载 a.js 时,后面的所有文件都得等它加载完成并执行结束后才能开始加载、执行。而 require.js 的模块可以并行下载,没有依赖关系的模块还可以并行执行,大大加快页面访问速度。

不愁依赖

在我们定义模块的时候,我们就已经决定好模块的依赖 ? c 依赖 b,b 又依赖 a。当我想用 c 模块的功能时,我只要在 require函数的依赖里指定 c:

require(['c'], function(c) {...});

至于 c 依赖的模块,c 依赖的模块的依赖模块… 等等,require.js 会帮我们打理。

而传统的 script 办法,我们必须明确指定所有依赖顺序:

<script src="js/a.js"></script>
 <script src="js/b.js"></script>
 <script src="js/c.js"></script>

换句话说,传统的 script 方法里,我们极可能要靠记忆或者检查模块内容这种方式来确定依赖 ? 效率太低,还费脑。

减少全局冲突

通过 define 的方式,我们大量减少了全局变量,这样代码冲突的概率就极小极小 ? JavaScript 界有句话说,全局变量是魔鬼,想想,我们能减少魔鬼的数量,我想是件好事。

关于全局变量

有一点需要说明的是,require.js 环境中并不是只有 define 和 require 几个全局变量。许多库都会向全局环境中暴露变量,以 jQuery 为例,1.7版本后,它虽然注册自己为 AMD 模块,但同时也向全局环境中暴露了 jQuery 与 $。所以以下代码中,虽然我们没有向回调函数传入一份引用,jQuery/$ 同样是存在的:

require(['jquery'], function(){
 console.log(jQuery);
 console.log($);
});

以上这篇JavaScript中Require调用js的实例分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
vue项目环境变量配置的实现方法
Oct 12 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
Popup弹出框添加数据实现方法
Oct 27 #Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 #Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 #Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 #Javascript
vue中的event bus非父子组件通信解析
Oct 27 #Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 #Javascript
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
js中值引用和地址引用实例分析
2019/06/21 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
解决python 输出是省略号的问题
2018/04/19 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
如何基于python测量代码运行时间
2019/12/25 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
红旗团支部事迹材料
2014/01/27 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
五年级数学教学反思
2014/02/11 职场文书
2014年党支部工作总结
2014/11/13 职场文书
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技