是否支持es6主要看瀏覽器。

創(chuàng)新互聯(lián)主營(yíng)雙城網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,APP應(yīng)用開(kāi)發(fā),雙城h5微信小程序開(kāi)發(fā)搭建,雙城網(wǎng)站營(yíng)銷(xiāo)推廣歡迎雙城等地區(qū)企業(yè)咨詢
jquery是把常用的js方法進(jìn)行了封裝,并兼容各瀏覽器,但對(duì)es6并沒(méi)有進(jìn)行瀏覽器兼容。在支持es6的新版本瀏覽器下,jquery也可以直接使用es6語(yǔ)法。
如果需要對(duì)低版本瀏覽器兼容運(yùn)行es6的話一般使用babel。
交換兩個(gè)變量的值,可采用如下的方式:
//?交換x、y的值
var?x?=?1;
var?y?=?2;
var?arr?=?[x,?y].reverse();
x?=?arr[0];
y?=?arr[1];
如果使用es6語(yǔ)法,可以使用解構(gòu):
//?交換x、y的值
var?x?=?1;
var?y?=?2;
[x,?y]?=?[y,?x];
先學(xué)es6比較好。
ajax因?yàn)橐钆淝昂蠖私换ィ灾辽僖裯odejs的express框架學(xué)習(xí)了,掌握并且要會(huì)寫(xiě)基本的創(chuàng)建服務(wù)器,json數(shù)據(jù)轉(zhuǎn)換,跨域資源訪問(wèn),路由,端口等搭建服務(wù)器的基本知識(shí),建議中間適當(dāng)學(xué)習(xí)下mogodb數(shù)據(jù)庫(kù)的相關(guān)增刪改查操作,知道有這個(gè)東西就行,ajax時(shí)直接套用服務(wù)器模板進(jìn)行學(xué)習(xí)就行,自己原生ajax封住一個(gè),jquery使用一下就行了。
還有要先了解es6基本知識(shí),nodejs中的數(shù)據(jù)解構(gòu)和vue很多方法會(huì)用到es6的。
模塊化在項(xiàng)目中十分的重要,一個(gè)復(fù)雜的項(xiàng)目肯定有很多相似的功能模塊,如果每次都需要重新編寫(xiě)模塊肯定既費(fèi)時(shí)又耗力。但是引用別人編寫(xiě)模塊的前提是要有統(tǒng)一的“打開(kāi)姿勢(shì)”,如果每個(gè)人有各自的寫(xiě)法,那么肯定會(huì)亂套,下面介紹幾種JS的模塊化的規(guī)范。
一:模塊化進(jìn)程一:script標(biāo)簽
這是最原始的 JavaScript 文件加載方式,如果把每一個(gè)文件看做是一個(gè)模塊,那么他們的接口通常是暴露在全局作用域下,也就是定義在 window 對(duì)象中,不同模塊的接口調(diào)用都是一個(gè)作用域中,一些復(fù)雜的框架,會(huì)使用命名空間的概念來(lái)組織這些模塊的接口。
缺點(diǎn):
1、污染全局作用域
2、開(kāi)發(fā)人員必須主觀解決模塊和代碼庫(kù)的依賴關(guān)系
3、文件只能按照script標(biāo)簽的書(shū)寫(xiě)順序進(jìn)行加載
4、在大型項(xiàng)目中各種資源難以管理,長(zhǎng)期積累的問(wèn)題導(dǎo)致代碼庫(kù)混亂不堪
二:模塊化進(jìn)程二:CommonJS規(guī)范
該規(guī)范的核心思想是允許模塊通過(guò)require方法來(lái)同步加載所要依賴的其他模塊,然后通過(guò) exports 或 module.exports 來(lái)導(dǎo)出需要暴露的接口。
require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;
優(yōu)點(diǎn):
1、簡(jiǎn)單并容易使用
2、服務(wù)器端模塊便于重用
缺點(diǎn):
1、同步的模塊加載方式不適合在瀏覽器環(huán)境中,同步意味著阻塞加載,瀏覽器資源是異步加載的
2、不能非阻塞的并行加載多個(gè)模塊
module.exports與exports的區(qū)別
1、exports 是指向的 module.exports 的引用
2、module.exports 初始值為一個(gè)空對(duì)象 {},所以 exports 初始值也是 {}
3、require() 返回的是 module.exports 而不是 exports
exports示例:
// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
return r * r * Math.PI;
}
module.exports示例:
// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
return r * r * Math.PI;
}
錯(cuò)誤的情況:
// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
return r * r * Math.PI;
}
其實(shí)是對(duì) exports 進(jìn)行了覆蓋,也就是說(shuō) exports 指向了一塊新的內(nèi)存(內(nèi)容為一個(gè)計(jì)算圓面積的函數(shù)),也就是說(shuō) exports 和 module.exports 不再指向同一塊內(nèi)存,也就是說(shuō)此時(shí) exports 和 module.exports 毫無(wú)聯(lián)系,也就是說(shuō) module.exports 指向的那塊內(nèi)存并沒(méi)有做任何改變,仍然為一個(gè)空對(duì)象{},也就是說(shuō)area.js導(dǎo)出了一個(gè)空對(duì)象,所以我們?cè)?app.js 中調(diào)用 area(4) 會(huì)報(bào) TypeError: object is not a function 的錯(cuò)誤。
總結(jié):當(dāng)我們想讓模塊導(dǎo)出的是一個(gè)對(duì)象時(shí), exports 和 module.exports 均可使用(但 exports 也不能重新覆蓋為一個(gè)新的對(duì)象),而當(dāng)我們想導(dǎo)出非對(duì)象接口時(shí),就必須也只能覆蓋 module.exports 。
三:模塊化進(jìn)程三:AMD規(guī)范
由于瀏覽器端的模塊不能采用同步的方式加載,會(huì)影響后續(xù)模塊的加載執(zhí)行,因此AMD(Asynchronous Module Definition異步模塊定義)規(guī)范誕生了。
AMD標(biāo)準(zhǔn)中定義了以下兩個(gè)API
1、require([module], callback);
2、define(id, [depends], callback);
require接口用來(lái)加載一系列模塊,define接口用來(lái)定義并暴露一個(gè)模塊。
示例:
define("module", ["dep1", "dep2"], function(d1, d2){
return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });
優(yōu)點(diǎn):
1、適合在瀏覽器環(huán)境中異步加載模塊
2、可以并行加載多個(gè)模塊
缺點(diǎn):
1、提高了開(kāi)發(fā)成本,代碼的閱讀和書(shū)寫(xiě)比較困難,模塊定義方式的語(yǔ)義不順暢
2、不符合通用的模塊化思維方式,是一種妥協(xié)的實(shí)現(xiàn)
四:模塊化進(jìn)程四:CMD規(guī)范
CMD(Common Module Definition)規(guī)范和AMD很相似,盡量保持簡(jiǎn)單,并與CommonJS和Node.js的 Modules 規(guī)范保持了很大的兼容性。在CMD規(guī)范中,一個(gè)模塊就是一個(gè)文件。
示例:
define(function(require, exports, module){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})
優(yōu)點(diǎn):
1、依賴就近,延遲執(zhí)行
2、可以很容易在 Node.js 中運(yùn)行
缺點(diǎn):
1、依賴 SPM 打包,模塊的加載邏輯偏重
AMD和CMD的區(qū)別
AMD和CMD起來(lái)很相似,但是還是有一些細(xì)微的差別,讓我們來(lái)看一下他們的區(qū)別在哪里:
1、對(duì)于依賴的模塊,AMD是提前執(zhí)行,CMD是延遲執(zhí)行。
2、AMD推崇依賴前置;CMD推崇依賴就近,只有在用到某個(gè)模塊的時(shí)候再去require。看代碼:
// AMD
define(['./a', './b'], function(a, b){ // 依賴必須一開(kāi)始就寫(xiě)好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
});
// CMD
define(function(require, exports, module){
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b')
// 依賴可以就近書(shū)寫(xiě)
b.doSomething()
// ...
});
3、AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用,CMD 的 API 嚴(yán)格區(qū)分,推崇職責(zé)單一。
五:模塊化進(jìn)程五:ES6模塊化
EcmaScript6標(biāo)準(zhǔn)增加了JavaScript語(yǔ)言層面的模塊體系定義。ES6 模塊的設(shè)計(jì)思想,是盡量的靜態(tài)化,使得編譯時(shí)就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量。CommonJS和AMD模塊,都只能在運(yùn)行時(shí)確定這些東西。
在 ES6 中,我們使用export關(guān)鍵字來(lái)導(dǎo)出模塊,使用import關(guān)鍵字引用模塊。需要說(shuō)明的是,ES6的這套標(biāo)準(zhǔn)和目前的標(biāo)準(zhǔn)沒(méi)有直接關(guān)系,目前也很少有JS引擎能直接支持。因此Babel的做法實(shí)際上是將不被支持的import翻譯成目前已被支持的require。
盡管目前使用import和require的區(qū)別不大(本質(zhì)上是一回事),但依然強(qiáng)烈推薦使用import關(guān)鍵字,因?yàn)橐坏㎎S引擎能夠解析ES6的import關(guān)鍵字,整個(gè)實(shí)現(xiàn)方式就會(huì)和目前發(fā)生比較大的變化。如果目前就開(kāi)始使用import關(guān)鍵字,將來(lái)代碼的改動(dòng)會(huì)非常小。
示例:
import "jquery";
export functiondoStuff(){}
module "localModule" {}
優(yōu)點(diǎn):
1、容易進(jìn)行靜態(tài)分析
2、面向未來(lái)的 EcmaScript 標(biāo)準(zhǔn)
缺點(diǎn):
1、原生瀏覽器端還沒(méi)有實(shí)現(xiàn)該標(biāo)準(zhǔn)
2、全新的命令字,新版的 Node.js才支持
本文標(biāo)題:jqueryes6,jquery es6
標(biāo)題網(wǎng)址:http://chinadenli.net/article4/dsgscoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營(yíng)銷(xiāo)、外貿(mào)建站、定制開(kāi)發(fā)、搜索引擎優(yōu)化、、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)