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 Tab 导航插件 (23个)
Jun 11 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
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
PHP常用编译参数中文说明
2014/09/27 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
php简单判断文本编码的方法
2015/07/30 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
跟老齐学Python之变量和参数
2014/10/10 Python
python实现下载文件的三种方法
2017/02/09 Python
python中的列表与元组的使用
2019/08/08 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python流程控制语句的深入讲解
2020/06/15 Python
flask开启多线程的具体方法
2020/08/02 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
会计自我鉴定范文
2013/10/06 职场文书
就业自荐信
2013/12/04 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
单位工资证明范本
2015/06/12 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Mysql排序的特性详情
2021/11/01 MySQL
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript