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 代码的方法小结
Jul 16 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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
一个目录遍历函数
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
python导入库的具体方法
2020/06/18 Python
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
优秀大学生自荐信
2014/06/09 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
工作检讨书怎么写
2015/01/23 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python