Angular2中如何使用jquery

Angular2中如何使用jquery

Angular2是以TypeScript語言作為默認(rèn)編碼語言,所以你看到的全部都是.ts結(jié)尾的文件。

那什么是TypeScript

首先,它是一個(gè)編譯型語言;既然是編譯型,那么你像重構(gòu)、導(dǎo)航、智能提醒這種工具屬性就可以發(fā)揮出來,所以你會(huì)發(fā)現(xiàn)使用VS CODE來寫Angular簡(jiǎn)直就是絕配。

同時(shí),TypeScript還帶來一些ES6/7才有特性,比如let、const、async等,你無須關(guān)心ES幾。

最霸氣,TypeScript還是一個(gè)強(qiáng)類型、泛型、多態(tài)等一些面向?qū)ο缶幊痰臇|西。

那,為何我們不選它呢?

當(dāng)然,說了這么多,這跟主題看似無關(guān),但如果你了解這些,才能看到問題的本質(zhì)

首先,第一關(guān)鍵點(diǎn)編譯型,既然是編譯型,那么你在代碼中出現(xiàn)的任何變量、類、函數(shù)都是必須要存在,否則TA就會(huì)在編譯時(shí)報(bào)錯(cuò)但,問題來了,現(xiàn)在的JavaScript世界中已經(jīng)有那么多現(xiàn)成的第三方庫,難道說都不能用了?非也!

TypeScript一開始就照顧這些了,所以就會(huì)有一個(gè)叫.d.ts的聲明文件。MS當(dāng)然不會(huì)讓你去編寫這一個(gè)文件,所以就有一個(gè)叫http://definitelytyped.org/ 網(wǎng)站,TA匯集了很多現(xiàn)成類庫的第三方.d.ts的聲明文件提供我們下載。

方法一

當(dāng)然是使用最正規(guī)軍了,用命令安裝jQuery的聲明文件。

npm install -D @types/jquery

以及使用

import * as $ from 'jquery';

$('body').addClass('');

完美的智能提示,如果你在VS CODE下的話。

方法二

對(duì)于一些并未提供 .d.ts 聲明文件的類庫,我們?cè)趺崔k?那當(dāng)然只能自己寫了。

什么?自己寫?很困難吧!很復(fù)雜吧!

沒那么一回事,聲明文件其實(shí)是對(duì)一些類庫接口的描述,以下是我截取一段jQuery聲明文件的部分代碼

interface JQueryStatic {

? ? /**

? ? ?* 去掉字符串首尾空格

? ? ?*

? ? ?* @param str 字符串

? ? ?* @see {@link https://api.jquery.com/jQuery.trim/}

? ? ?*/

? ? trim(str: string): string;

}

declare var $: JQueryStatic;

我還特意譯成中文,這里的含量很少,最關(guān)鍵的就是 declare 它就是把一個(gè)變量 $ 定義成類型 JQueryStatic (還是個(gè)接口)。

這樣,TS編譯器在遇到 $ 時(shí)會(huì)去找該類型,并且你的代碼里面不能出現(xiàn) $.time1() 之類的,因?yàn)槟愕慕涌?,只有一個(gè) $.trim()。

等等,jQuery幾十個(gè)接口,我都要這么寫嗎?

NO?。。‘?dāng)然不是,除非你想寫一個(gè)又漂亮、又好看、又是中文、又是完美智能提示的聲明文件的話。

否則,你那就拿 any 類型吧,TA就是萬能貨。你不需要寫一個(gè)很復(fù)雜的聲明文件,只需要:

declare var $: any;

簡(jiǎn)單粗暴有效!

結(jié)論

哎~其實(shí)是因群里每天都可以看到一句【怎么使用jQuery】;雖然最簡(jiǎn)單的結(jié)果只需要一句話 declare var $: any;,但我還是啰里吧嗦將了一大堆,可不把前因后果將清楚,我煩~。

另,此解只是拋磚引玉,在很多類庫中都是通用的辦法。但我建議還是找一些Angular2類庫來使用,因?yàn)槿绾胃行У墓芾鞪avaScript運(yùn)行,是一門學(xué)問。

希望此篇對(duì)你的幫助,快樂編程!

轉(zhuǎn)載github Roy9218PP?

個(gè)人建議Angular2中不要使用jquery,會(huì)出現(xiàn)瀏覽器加載緩沖期,第一次打開頁面jQuery效果不出現(xiàn),再次刷新才會(huì)出現(xiàn),在windows10上面會(huì)出現(xiàn)火狐瀏覽器不兼容,這種問題很奇怪,兩個(gè)相同的版本的火狐在window10和window7出現(xiàn)的效果不同,window10則會(huì)出現(xiàn)不兼容的現(xiàn)象.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容