<<編寫可維護的javascript>> 筆記5(UI層的松耦合)

saucxs 發(fā)布于2019-08-21 12:02 / 993人閱讀

摘要：由于第四章太稀松平常了于是就直接跳到第五章了這里我就草草的說一下第四章的幾個點吧在嚴格模式的應用下不推薦將用在全局作用域中相等推薦盡量使用和守則如果是在沒有別的方法來完成當前任務這時可以使用原始包裝類型不推薦創(chuàng)建類型時用等創(chuàng)建類型從這一章節(jié)

由于第四章太稀松平常了, 于是就直接跳到第五章了.
這里我就草草的說一下第四章的幾個點吧

在嚴格模式的應用下不推薦將"use strict;"用在全局作用域中

相等. 推薦盡量使用===和!==

eval(). 守則如果是在沒有別的方法來完成當前任務, 這時可以使用eval()

原始包裝類型. 不推薦創(chuàng)建類型時用String、Number等創(chuàng)建類型.

從這一章節(jié)開始就邁向了我們變成實踐的部分了.

5.1 什么事松耦合
很多設計模式就是為了解決緊耦合的問題. 如果兩個組件耦合太緊, 則說明一個組件和另一個組件直接相關, 這樣的話, 如果修改一個組建的邏輯, 那么另一個組建的邏輯也需要修改. 比如, 結社有一個名為error的CSS類名, 它是貫穿整個站點的, 它被嵌入到HTML中. 如果有一天你覺得error的取名并不合適, 想將它改為warning, 你不僅需要修改CSS還要修改用到這className的HTML. HTML和CSS緊耦合在一起. 這只是一個簡單的例子. 想象一下, 如果一個系統(tǒng)包含上百個組件, 那這簡直就是異常噩夢.

當你能夠做到修改一個組件而不需要修改更多其他組件時, 你就做到了松耦合. 對于多人大型系統(tǒng)來說, 有很多參與維護代碼, 松耦合對于代碼可維護性來說只管重要. 你要絕對希望開發(fā)人員在修改某部分代碼時不會破壞其他人的代碼.

當你哥大系統(tǒng)的每個組件的內(nèi)容喲了限制, 就做到了松耦合. 本質(zhì)上講, 每個組件主要保持足夠瘦身來確保松耦合. 組件知道的越少, 就越有利于形成整個系統(tǒng).

有一點需要注意: 在一起工作的組件無法達到"無耦合"(no coupling). 在所有系統(tǒng)中, 組件之間總要共享一些信息來完成各自的工作. 這很好理解, 我們的目標是確保對一個組建的修改不會經(jīng)常影響其他部分.

如果一個Web UI是松耦合的, 則很容易調(diào)試. 和文本或結構相關的問題, 通過查找HTML即可定位. 當發(fā)生了樣式相關的問題, 你知道問題出現(xiàn)在CSS中. 最后, 對于那些行為相關的問題, 你直接去找JavaScript的問題所在, 這中能力是Web界面的可維護性的核心部分.

到這里感觸頗深, 對于現(xiàn)在項目各種組件化開發(fā)項目對于組件的依賴和優(yōu)化有著密不可分的關系, 如果你的組件寫的足夠松耦合的話, 這樣對于開發(fā)者后期的維護和bug的修改以及新功能的添加來說可以用喜大奔普來形容了. 我在這里可以提供一種方法來設計組件化.

你可以將你的項目主要劃分為兩種組件, 一個提供各種方法啊執(zhí)行條件啊獲取數(shù)據(jù)等等的功能另一個只需要來展示它所想要表達的內(nèi)容. 你只需要將正確的數(shù)據(jù)傳遞至展示組件即可.

5.2 將js從css中抽離
在IE8和更早版本的瀏覽器中有一個特性讓人愛少恨多, 即CSS表達式(CSS expression). CSS表達式允許你將JavaScript直接插入到CSS中, 這樣可以在CSS代碼中直接執(zhí)行運算或其他操作.

/* 不好的代碼 設置元素寬度以匹配瀏覽器寬度 */
.box {
    width: expression(document.body.offsetWith + "px");

}

CSS表達式包裹在一個特殊的expression()函數(shù)中, 可以給它傳入任意js代碼. 瀏覽器會以高頻率重復計算CSS表達式, 嚴重影響性能, 甚至在<高性能網(wǎng)站建設指南>也特意提到這點, 避免使用CSS表達式!

5.3 將css從js中抽離
盡量不要直接在js中操作DOM元素的style屬性來修改樣式. 會對你的項目維護造成很大的麻煩.
比較好的方式就是操作CSS的className, 也就是說你再CSS中定義好類名, 在js中操作元素的className即可.
就是不應當直接操作樣式, 以便于保持和CSS的松耦合.

GPU云服務器云服務器 asp中&lt&gt的意思 python &lt&gt java &lt=&gt java&lt &gt

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87369.html

<<編寫可維護的javascript>> 筆記7(事件處理)

摘要：在所有應用中事件處理都是非常重要的所有的均通過事件綁定到上所以大多數(shù)前端工程師需要花費很多時間來編寫和修改事件處理程序遺憾的是在誕生之初這部分內(nèi)容并未受太多重視甚至當開發(fā)者們開始熱衷于將傳統(tǒng)的軟件架構概念融入到里時事件綁定仍然沒有收到多大重在所有JavaScript應用中事件處理都是非常重要的. 所有的JavaScript均通過事件綁定到UI上, 所以大多數(shù)前端工程師需要花費很多時間...

microelec 2019-08-21 17:10 評論0 收藏0
<<編寫可維護的javascript>> 筆記3(語句和表達式)

摘要：所有的塊語句都應當使用花括號包括花括號的對齊方式第一種風格第二種風格塊語句間隔第一種在語句名圓括號和左花括號之間沒有空格間隔第二種在左圓括號之前和右圓括號之后各添加一個空格第三種在左圓括號后和右圓括號前各添加一個空格我個人喜歡在右括號之后添所有的塊語句都應當使用花括號, 包括: if for while do...while... try...catch...finally 3....

OBKoro1 2019-08-21 12:02 評論0 收藏0
<<編寫可維護的javascript>> 筆記9(將配置數(shù)據(jù)從代碼中分離出來

摘要：代碼無非是定義一些指令的集合讓計算機來執(zhí)行我們常常將數(shù)據(jù)傳入計算機由指令對數(shù)據(jù)進行操作并最終產(chǎn)生一個結果當不得不修改數(shù)據(jù)時問題就來了任何時候你修改源代碼都會有引入的風險且值修改一些數(shù)據(jù)的值也會帶來一些不必要的風險因為數(shù)據(jù)時不應當影響指令的正代碼無非是定義一些指令的集合讓計算機來執(zhí)行. 我們常常將數(shù)據(jù)傳入計算機, 由指令對數(shù)據(jù)進行操作, 并最終產(chǎn)生一個結果. 當不得不修改數(shù)據(jù)時問題就來...

xbynet 2019-08-22 14:00 評論0 收藏0
<<編寫可維護的javascript>> 筆記1(基本格式化)

摘要：程序是寫給人讀的只是偶爾讓計算機執(zhí)行一下當你剛剛組建一個團隊時團隊中的每個人都各自有一套編程習慣畢竟每個成員都有著不同的背景有些人可能來自某個皮包公司身兼數(shù)職在公司里面什么事都做還有些人會來自不同的團隊對某種特定的做事風格情有獨鐘或恨之入骨程序是寫給人讀的,只是偶爾讓計算機執(zhí)行一下. Donald Knuth 當你剛剛組建一個團隊時,團隊中的每個人都各自有一套編程習慣.畢竟,...

wfc_666 2019-08-21 11:59 評論0 收藏0
<<編寫可維護的javascript>> 筆記6(避免使用全局變量)

摘要：執(zhí)行環(huán)境在很多方面都有其獨特之處全局變量和函數(shù)便是其中之一事實上的初始執(zhí)行環(huán)境是由多種多樣的全局變量所定義的這寫全局變量在腳本環(huán)境創(chuàng)建之初就已經(jīng)存在了我們說這些都是掛載在全局對象上的全局對象是一個神秘的對象它表示了腳本最外層上下文在瀏覽器中 JavaScript執(zhí)行環(huán)境在很多方面都有其獨特之處. 全局變量和函數(shù)便是其中之一. 事實上, js的初始執(zhí)行環(huán)境是由多種多樣的全局變量所定義的,...

MoAir 2019-08-21 17:11 評論0 收藏0