在angular中使用jquery以及其它依赖于jquery库的第三方插件的一种方法

angular中使用了webpack作为依赖管理器，相较于之前在html中使用<script type="text/javascript" src="xxxx"的方式，使用webpack能够实现使在须要某些依赖的时候才进行加载。性能虽然好，但在使用一些历史的依赖于jquery的依赖时每每会出现找不到jquery的问题。

情景

假设当前项目须要iCheck插件，此插件依赖于jquery。

引用jQuery

在javascript中，能够经过向window对象上添加属性的方式来实现全局变量。好比：

var a = 'hello';
window.test = a;
console.log(test);

jquery能够经过npm来进行安装，安装完成后可使用import语句将其引入到当前的项目中。想到项目中随处使用$、jQuery的关键字，则须要将$、jquery声明为全局变量。打开angular中启动模块app.moudle.ts并向其中加入如下代码：

import * as jq from 'jquery';  ➊
declare var window: any; ➋

window.jQuery = jq; ➌
window.$ = jq; ➍

• ➊ 从jquery中引入jquery，并将值赋予jq
• ➋ 声明window的类型为any，以防在其上添加全局变量时发生错误
• ➌ 添加全局变量jQuery
• ➍ 添加全局变量$

---

只因此这样使用是因为jquery最后的几行代码以下，有兴趣的能够继续研究下

if ( !noGlobal ) { ➊
    window.jQuery = window.$ = jQuery; 
}

return jQuery; ➋
}));

• ➊ 使用import引用时noGlobal的值为true
• ➋ 将jQuery作为返回值返回

---

如此一来即可以在项目中使用$或jQuery了。但因为typeScript是强类型的，因此在其它使用到$的地方还须要声明$的类型为任意类型。

declare var $: any;
console.log($);

引用iCheck

iCheck官方未给出使用npm安装的方法。咱们下载js文件后放到项目的任意文件中。iCheck并未像jquery同样进行相应的return，因此也就不能像使用引入jquery同样来进行引用了。这种状况则可使用require方法来解决。假设当前icheck文件的存储地址为：./../bower_components/iCheck/icheck，则能够在成功引用jquery后使用如下代码引用icheck。

import * as $ from 'jquery';
declare var window: any;
declare var require: any; ➊

window.jQuery = $;
window.$ = $;

require('./../bower_components/iCheck/icheck'); ➋

• ➊ 定义require变量类型为any
• ➋ 使用require引用特定位置的文件

引用其它依赖

有些依赖已经能够经过npm进行安装，则引用起来就很简单了。只须要使用如下语句则能够完成引用：

require('依赖名');

总结

在angular中使用jquery时，主要解决的是向window中添加全局变量的问题。当window中存在$全局变量后，即可以在其它须要jquery功能的地方使用$()方法。当window中存在jQuery全局变量后，其它依赖于该jQuery的第三方依赖即可以成功的执行。

大多依赖于jquery的库会有如下格式：

(function($★) {
   // 功能代码
})(window.jQuery || window.Zepto);

• ➊ 若是window.jQuery已定义，则将★的值设置为window.jQuery并当即执行function($)。
• ➋ 若是window.jQuery未这义、window.Zepto已定义，则将★的值设置为window.Zepto并当即执行function($)。
• ➌ 若是window.jQuery、window.Zepto均未定义，则将★的设置设置为undefined并当即执行function($)。

这种写法还有一个好处是：此时 $变量为局部变量，不会对全局的 $形成影响

若是在执行到该代码时未引入window.jQuery，则window.jQuery、window.Zepto的值均为undefined，此时执行function($){ 依赖于$的功能代码 }的功能代码时便会发生在undefined上调用xxx的错误。解决该错误的方法是在执行这段代码前将jQuery添加到window中。也就是本文的解决的方案。

require与import

那么为何引入jquery时使用的是import，而引用iCheck使用的是require呢。这是由jquery与iCheck的功能特色以及require及import的特色所决定的：

名称	功能特色	示例代码
jquery	定义对象，返回对象	return jQuery
iCheck	执行了匿名函数	(function(){ 这里是功能代码 })()

名称	功能	必然执行	做用域	执行时机
require('icheck')	将icheck的代码复制到当前位置	是	应用上下文	当即执行
import * as $ from 'jquery';	声明变量$的来源	否	jquery.js文件内部	使用$时执行

以示例代码为例：咱们须要jquery中的返回的jQuery对象，因此须要import来进行引入（import * as $ from 'jquery';）此时$的值为jQuery。对于iCheck而言咱们须要执行该匿名函数，因此使用require('iCheck'）。

简单来讲：require等于复制一份相同的js代码放在require代码所在的位置上，因此js代码的做用域为上下文；import等于建立一个js文件的引用（快捷方式），只有使用该引用时才会尝试找js文件要内容，此时js文件执行的做用域为此js文件内部。