如何組織大型JavaScript應(yīng)用中的代碼

以下為CSDN編譯：地板上堆放的衣服首先，我們來(lái)看看angular-seed，它是AngularJS應(yīng)用開(kāi)發(fā)的官方入門(mén)項(xiàng)目，其文件結(jié)構(gòu)是這樣的：css/img/js/app.jscontrollers.jsdirectives.jsfilters.jsservices.jslib/partials/看起來(lái)就像是把衣服按類型堆在地板上，一堆襪子、一堆內(nèi)衣、一堆襯衫等等。你知道拐角的那堆襪子里有今天要穿的黑色羊毛襪，但你仍需要花上一段時(shí)間來(lái)尋找。這種組織方式很凌亂。一旦你的代碼中存在6、7個(gè)甚至更多的控制器或者服務(wù)，文件管理就會(huì)變得難以處理：很難找到想要尋找的對(duì)象，源代碼控制中的文件也變更集變得難懂。襪子抽屜常見(jiàn)的JavaScript文件結(jié)構(gòu)還有另一種形式，即按原型將文件分類。我們繼續(xù)用整理衣服來(lái)比喻：現(xiàn)在我們買(mǎi)了有很多抽屜的衣柜，打算將襪子放在其中一個(gè)抽屜里，內(nèi)衣放在另一個(gè)抽屜，再把襯衫整齊地疊在第三個(gè)抽屜……想象一下，我們正在開(kāi)發(fā)一個(gè)簡(jiǎn)單的電子商務(wù)網(wǎng)站，包括登陸流程、產(chǎn)品目錄以及購(gòu)物車(chē)UI。同樣，我們將文件分為以下幾個(gè)原型：models（業(yè)務(wù)邏輯和狀態(tài)）、controllers以及services（HTTP/JSON端點(diǎn)加密），而按照Angular默認(rèn)那樣非籠統(tǒng)地歸到“service”架構(gòu)。因此我們的JavaScript目錄變成了這樣：controllers/LoginController.jsRegistrationController.jsProductDetailController.jsSearchResultsController.jsdirectives.jsfilters.jsmodels/CartModel.jsProductModel.jsSearchResultsModel.jsUserModel.jsservices/CartService.jsUserService.jsProductService.js不錯(cuò)，現(xiàn)在已經(jīng)可以通過(guò)樹(shù)形文件目錄或者IDE快捷鍵更方便地查找文件了，源代碼控制中的變更集（changeset）也能夠清楚地描述文件修改記錄。雖然已經(jīng)獲得了極大的改進(jìn)，但是仍有一定的局限性。想象一下，你現(xiàn)在正在辦公室，突然發(fā)現(xiàn)明天有個(gè)商務(wù)出差，需要幾套干洗的衣服，因此給家里打電話告訴另一半把黑色和藍(lán)色的西裝交給清潔工，還有黑紋領(lǐng)帶配灰色襯衫、白襯衫配純黃領(lǐng)帶。如果你的另一半并不熟悉衣柜，又該如何從三條黃色的領(lǐng)帶中挑出你的正確需求？模塊化希望衣服的比喻沒(méi)有讓你覺(jué)得過(guò)于陳舊，下面舉一個(gè)實(shí)例：你的搭檔是新來(lái)的開(kāi)發(fā)者，他被要求去修補(bǔ)這個(gè)復(fù)雜應(yīng)用中的一處bug。他掃過(guò)這些文件夾，看到了controllers、models、services等文件夾整齊地排列著，但是他仍然不清楚對(duì)象間的依賴關(guān)系。處于某些原因，他希望能夠重用部分代碼，這需要從各個(gè)文件夾中搜集相關(guān)文件，而且常常會(huì)遺漏某些文件夾中的對(duì)象。信或不信，你確實(shí)很少會(huì)在新項(xiàng)目中重用很多代碼，但你很可能需要重用登陸系統(tǒng)這樣的整個(gè)模塊。所以，是不是按功能劃分文件會(huì)更好？下面的文件結(jié)構(gòu)是以功能劃分后的應(yīng)用結(jié)構(gòu)：cart/CartModel.jsCartService.jscommon/directives.jsfilters.jsproduct/search/SearchResultsController.jsSearchResultsModel.jsProductDetailController.jsProductModel.jsProductService.jsuser/LoginController.jsRegistrationController.jsUserModel.jsUserService.js雖然現(xiàn)實(shí)世界中有空間限制，難以隨意整理服裝，但是編程中類似的處理卻是零成本的?，F(xiàn)在即使是新來(lái)的開(kāi)發(fā)者也能通過(guò)頂級(jí)文件夾的命名理解應(yīng)用的功能，相同文件夾下的文件會(huì)存在互相依賴等關(guān)系，而且僅僅通過(guò)瀏覽文件組織結(jié)構(gòu)就能輕易理解登錄、注冊(cè)等功能的原理。新的項(xiàng)目也可以通過(guò)復(fù)制粘貼來(lái)重用其中的代碼了。使用AngularJS我們可以進(jìn)一步將相關(guān)代碼組織為模塊：var userModule = angular.module('userModule',[]); userModule.factory('userService', ['$http', function($http) { return new UserService($http); }]); userModule.factory('userModel', ['userService', function(userService) { return new UserModel(userService); }]); userModule.controller('loginController', ['$scope', 'userModel', LoginController]); userModule.controller('registrationController', ['$scope', 'userModel', RegistrationController]);如果我們將UserModule.js文件放到user文件夾，它就成了這個(gè)模塊中使用到的對(duì)象的“manifest”，這也是適合RequireJS或者Browserify中放置某些加載指令的地方如何處理通用代碼每個(gè)應(yīng)用都會(huì)有某些代碼廣泛使用在多個(gè)模塊中，我們常常使用名為“commom”或者“shared”的文件夾來(lái)存放這些功能代碼。又該如何處理這些通用代碼呢？如果模塊中的對(duì)象需要直接訪問(wèn)幾個(gè)“通用”對(duì)象，為這些對(duì)象提供幾個(gè)Facade（外觀模式）。這有助于減少每個(gè)對(duì)象的依賴者，而過(guò)多的關(guān)聯(lián)對(duì)象通常意味著糟糕的代碼結(jié)構(gòu)。如果“通用”模塊變得過(guò)于龐大，你需要將它按功能領(lǐng)域細(xì)分為多個(gè)子模塊。確保每個(gè)應(yīng)用模塊只使用它需要的“通用”模塊，這即是SOLID中“接口隔離原則”的變種。在根范圍（$rootScope）添加實(shí)體，這樣子范圍也可以使用，適合多個(gè)控制器都依賴同一個(gè)對(duì)象（比如“PermissionsModel”）的情況。在解耦兩個(gè)不明確互相引用的組件時(shí)，請(qǐng)使用事件。Angular中Scope對(duì)象的$emit、$broadcast以及$on方法使得這種方式變得現(xiàn)實(shí)?？刂破髂軌蛴|發(fā)一個(gè)事件來(lái)執(zhí)行某些動(dòng)作，然后再動(dòng)作結(jié)束后收到相應(yīng)地通知。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)大同,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792

怎么樣格式化javascript，怎么樣格式化js

格式化的話感覺(jué)可以使用firefox來(lái)實(shí)現(xiàn)，在firefox的開(kāi)發(fā)者工具中有一個(gè)選項(xiàng)，叫美化原代碼， 這樣就直接格式化了js代碼

美化后

Web前端工程師應(yīng)該知道的JavaScript使用小技巧

今天小編要跟大家分享的文章是關(guān)于Web前端工程師應(yīng)該知道的JavaScript使用小技巧。任何一門(mén)技術(shù)在實(shí)際中都會(huì)有一些屬于自己的小技巧。同樣的，在使用JavaScript時(shí)也有一些自己的小技巧，只不過(guò)很多時(shí)候有可能容易被大家忽略。而在互聯(lián)網(wǎng)上，時(shí)不時(shí)的有很多同行朋友會(huì)總結(jié)(或收集)一些這方面的小技巧。

今天在這篇文章中，小編會(huì)整理一些大家熟悉或不熟悉的有關(guān)于JavaScript的小技巧，希望能夠?qū)Υ蠹业膶W(xué)習(xí)和工作有所幫助。

一、數(shù)組

先來(lái)看使用數(shù)組中常用的一些小技巧。

01、數(shù)組去重

ES6提供了幾種簡(jiǎn)潔的數(shù)組去重的方法，但該方法并不適合處理非基本類型的數(shù)組。對(duì)于基本類型的數(shù)組去重，可以使用...new

Set()來(lái)過(guò)濾掉數(shù)組中重復(fù)的值，創(chuàng)建一個(gè)只有唯一值的新數(shù)組。

constarray=[1,1,2,3,5,5,1]

constuniqueArray=[...newSet(array)];

console.log(uniqueArray);

Result:(4)[1,2,3,5]

這是ES6中的新特性，在ES6之前，要實(shí)現(xiàn)同樣的效果，我們需要使用更多的代碼。該技巧適用于包含基本類型的數(shù)組：undefined、null、boolean、string和number。如果數(shù)組中包含了一個(gè)object,function或其他數(shù)組，那就需要使用另一種方法。

除了上面的方法之外，還可以使用Array.from(newSet())來(lái)實(shí)現(xiàn)：

constarray=[1,1,2,3,5,5,1]

Array.from(newSet(array))

Result:(4)[1,2,3,5]

另外，還可以使用Array的.filter及indexOf()來(lái)實(shí)現(xiàn)：

constarray=[1,1,2,3,5,5,1]

array.filter((arr,index)=array.indexOf(arr)===index)

Result:(4)[1,2,3,5]

注意，indexOf()方法將返回?cái)?shù)組中第一個(gè)出現(xiàn)的數(shù)組項(xiàng)。這就是為什么我們可以在每次迭代中將indexOf()方法返回的索引與當(dāng)索索引進(jìn)行比較，以確定當(dāng)前項(xiàng)是否重復(fù)。

02、確保數(shù)組的長(zhǎng)度

在處理網(wǎng)格結(jié)構(gòu)時(shí)，如果原始數(shù)據(jù)每行的長(zhǎng)度不相等，就需要重新創(chuàng)建該數(shù)據(jù)。為了確保每行的數(shù)據(jù)長(zhǎng)度相等，可以使用Array.fill來(lái)處理：

letarray=Array(5).fill('');

console.log(array);

Result:(5)["","","","",""]

03、數(shù)組映射

不使用Array.map來(lái)映射數(shù)組值的方法。

constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constname=Array.from(array,({name})=name)

Result:(2)["大漠","Airen"]

04、數(shù)組截?cái)?/p>

如果你想從數(shù)組末尾刪除值(刪除數(shù)組中的最后一項(xiàng))，有比使用splice()更快的替代方法。

例如，你知道原始數(shù)組的大小，可以重新定義數(shù)組的length屬性的值，就可以實(shí)現(xiàn)從數(shù)組末尾刪除值：

letarray=[0,1,2,3,4,5,6,7,8,9]

console.log(array.length)

Result:10

array.length=4

console.log(array)

Result:(4)[0,1,2,3]

這是一個(gè)特別簡(jiǎn)潔的解決方案。但是，slice()方法運(yùn)行更快，性能更好：

letarray=[0,1,2,3,4,5,6,7,8,9];

array=array.slice(0,4);

console.log(array);

Result:[0,1,2,3]

05、過(guò)濾掉數(shù)組中的falsy值

如果你想過(guò)濾數(shù)組中的falsy值，比如0、undefined、null、false，那么可以通過(guò)map和filter方法實(shí)現(xiàn)：

constarray=[0,1,'0','1','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN','1'+0]

array.map(item={

returnitem

}).filter(Boolean)

Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]

06、獲取數(shù)組的最后一項(xiàng)

數(shù)組的slice()取值為正值時(shí)，從數(shù)組的開(kāi)始處截取數(shù)組的項(xiàng)，如果取值為負(fù)整數(shù)時(shí)，可以從數(shù)組末屬開(kāi)始獲取數(shù)組項(xiàng)。

letarray=[1,2,3,4,5,6,7]

constfirstArrayVal=array.slice(0,1)

Result:[1]

constlastArrayVal=array.slice(-1)

Result:[7]

console.log(array.slice(1))

Result:(6)[2,3,4,5,6,7]

console.log(array.slice(array.length))

Result:[]

正如上面示例所示，使用array.slice(-1)獲取數(shù)組的最后一項(xiàng)，除此之外還可以使用下面的方式來(lái)獲取數(shù)組的最后一項(xiàng)：

console.log(array.slice(array.length-1))

Result:[7]

07、過(guò)濾并排序字符串列表

你可能有一個(gè)很多名字組成的列表，需要過(guò)濾掉重復(fù)的名字并按字母表將其排序。

在我們的例子里準(zhǔn)備用不同版本語(yǔ)言的JavaScript

保留字的列表，但是你能發(fā)現(xiàn)，有很多重復(fù)的關(guān)鍵字而且它們并沒(méi)有按字母表順序排列。所以這是一個(gè)完美的字符串列表(數(shù)組)來(lái)測(cè)試我們的JavaScript小知識(shí)。

varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];

因?yàn)槲覀儾幌敫淖兾覀兊脑剂斜恚晕覀儨?zhǔn)備用高階函數(shù)叫做filter，它將基于我們傳遞的回調(diào)方法返回一個(gè)新的過(guò)濾后的數(shù)組?；卣{(diào)方法將比較當(dāng)前關(guān)鍵字在原始列表里的索引和新列表中的索引，僅當(dāng)索引匹配時(shí)將當(dāng)前關(guān)鍵字push到新數(shù)組。

最后我們準(zhǔn)備使用sort方法排序過(guò)濾后的列表，sort只接受一個(gè)比較方法作為參數(shù)，并返回按字母表排序后的列表。

在ES6下使用箭頭函數(shù)看起來(lái)更簡(jiǎn)單:

constfilteredAndSortedKeywords=keywords

.filter((keyword,index)=keywords.lastIndexOf(keyword)===index)

.sort((a,b)=a

這是最后過(guò)濾和排序后的JavaScript保留字列表：

console.log(filteredAndSortedKeywords);

Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']

08、清空數(shù)組

如果你定義了一個(gè)數(shù)組，然后你想清空它。通常，你會(huì)這樣做：

letarray=[1,2,3,4];

functionemptyArray(){

array=[];

}

emptyArray();

但是，這有一個(gè)效率更高的方法來(lái)清空數(shù)組。你可以這樣寫(xiě):

letarray=[1,2,3,4];

functionemptyArray(){

array.length=0;

}

emptyArray();

09、拍平多維數(shù)組

使用...運(yùn)算符，將多維數(shù)組拍平：

10、從數(shù)組中獲取最大值和最小值

可以使用Math.max和Math.min取出數(shù)組中的最大小值和最小值：

constnumbers=[15,80,-9,90,-99]

constmaxInNumbers=Math.max.apply(Math,numbers)

constminInNumbers=Math.min.apply(Math,numbers)

console.log(maxInNumbers)

Result:90

console.log(minInNumbers)

Result:-99

另外還可以使用ES6的...運(yùn)算符來(lái)完成：

constnumbers=[1,2,3,4];

Math.max(...numbers)

Result:4

Math.min(...numbers)

Result:1

二、對(duì)象

在操作對(duì)象時(shí)也有一些小技巧。

01、使用...運(yùn)算符合并對(duì)象或數(shù)組中的對(duì)象

同樣使用ES的...運(yùn)算符可以替代人工操作，合并對(duì)象或者合并數(shù)組中的對(duì)象。

//合并對(duì)象

constobj1={

ame:'大漠',

url:'#'

}

constobj2={

ame:'airen',

age:30

}

constmergingObj={...obj1,...obj2}

Result:{name:"airen",url:"#",age:30}

//合并數(shù)組中的對(duì)象

constarray=[

{

ame:'大漠',

email:'w3cplus@#'

},

{

ame:'Airen',

email:'airen@#'

}

]

constresult=array.reduce((accumulator,item)={

return{

...accumulator,

[item.name]:item.email

}

},{})

Result:{大漠:"w3cplus@#",Airen:"airen@#"}

02、有條件的添加對(duì)象屬性

不再需要根據(jù)一個(gè)條件創(chuàng)建兩個(gè)不同的對(duì)象，以使它具有特定的屬性。為此，使用...操作符是最簡(jiǎn)單的。

constgetUser=(emailIncluded)={

return{

ame:'大漠',

blog:'w3cplus',

...emailIncluded{email:'w3cplus@#'}

}

}

constuser=getUser(true)

console.log(user)

Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

constuserWithoutEmail=getUser(false)

console.log(userWithoutEmail)

Result:{name:"大漠",blog:"w3cplus"}

03、解構(gòu)原始數(shù)據(jù)

你可以在使用數(shù)據(jù)的時(shí)候，把所有數(shù)據(jù)都放在一個(gè)對(duì)象中。同時(shí)想在這個(gè)數(shù)據(jù)對(duì)象中獲取自己想要的數(shù)據(jù)。

在這里可以使用ES6的Destructuring特性來(lái)實(shí)現(xiàn)。比如你想把下面這個(gè)obj中的數(shù)據(jù)分成兩個(gè)部分：

constobj={

ame:'大漠',

blog:'w3cplus',

email:'w3cplus@#',

joined:'2019-06-19',

followers:45

}

letuser={},userDetails={}

({name:user.name,email:user.email,...userDetails}=obj)

{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}

console.log(user)

Result:{name:"大漠",email:"w3cplus@#"}

console.log(userDetails)

Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}

04、動(dòng)態(tài)更改對(duì)象的key

在過(guò)去，我們首先必須聲明一個(gè)對(duì)象，然后在需要?jiǎng)討B(tài)屬性名的情況下分配一個(gè)屬性。在以前，這是不可能以聲明的方式實(shí)現(xiàn)的。不過(guò)在ES6中，我們可以實(shí)現(xiàn)：

constdynamicKey='email'

letobj={

ame:'大漠',

blog:'w3cplus',

[dynamicKey]:'w3cplus@#'

}

console.log(obj)

Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}

05、判斷對(duì)象的數(shù)據(jù)類型

使用Object.prototype.toString配合閉包來(lái)實(shí)現(xiàn)對(duì)象數(shù)據(jù)類型的判斷：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisArray=isType('Array')([1,2,3])

console.log(isArray)

Result:true

上面的代碼相當(dāng)于：

functionisType(type){

returnfunction(target){

return`[object${type}]`===Object.prototype.toString.call(target)

}

}

isType('Array')([1,2,3])

Result:true

或者：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisString=isType('String')

constres=isString(('1'))

console.log(res)

Result:true

06、檢查某對(duì)象是否有某屬性

當(dāng)你需要檢查某屬性是否存在于一個(gè)對(duì)象，你可能會(huì)這樣做：

varobj={

ame:'大漠'

}

if(obj.name){

console.l

網(wǎng)頁(yè)題目：整理javascript,整理師培訓(xùn)費(fèi)用大概是多少
URL鏈接：http://jinyejixie.com/article26/dssiocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、搜索引擎優(yōu)化、Google、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站

廣告

聲明：本網(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)