1:前端架構(gòu)的基本知識(shí)

1: 前端工程師必須會(huì)的一些技能

前端工程師基本技能圖.PNG

2: 前端架構(gòu)基本知識(shí)

• 什么是前端架構(gòu)?
  每個(gè)人對(duì)每個(gè)架構(gòu)有不同的認(rèn)識(shí)和一些想法。沒(méi)有一個(gè)架構(gòu)是完美的，只有一個(gè)架構(gòu)是不是適合你的。哪個(gè)個(gè)架構(gòu)符合你的需求的時(shí)候，你使用它就是了啦。另外,要記住的是架構(gòu)是為完成產(chǎn)品服務(wù)的.一個(gè)簡(jiǎn)單的網(wǎng)站也可能涉及到前端架構(gòu),比如代碼的復(fù)用.
• 做前端架構(gòu)的目的?
  做架構(gòu)的目的并不是為了技術(shù)做架構(gòu)而是因?yàn)楫a(chǎn)品才做架構(gòu)的;
• single page application (SPA)
  單頁(yè)網(wǎng)站頁(yè)面的應(yīng)用,所有應(yīng)用頁(yè)面的切換通過(guò)頁(yè)面的哈希完成,做這樣的事需要一些比較復(fù)雜的框架,像backbone,anjular.js.單頁(yè)面應(yīng)用最近幾年開(kāi)始流行起來(lái)了,像qq郵箱,雅虎郵箱等都已經(jīng)在應(yīng)用了.

2:前端建構(gòu)技術(shù)基礎(chǔ)介紹

• 技術(shù)基礎(chǔ)的作用:做好技術(shù)基礎(chǔ)的好處在于:后面做網(wǎng)站的整體規(guī)劃和架構(gòu)設(shè)計(jì)就會(huì)輕松非常多

語(yǔ)言基礎(chǔ)

• javascript,html & css

基本框架和類(lèi)庫(kù)

• jQuery (更方便做代碼開(kāi)發(fā))& require.js/ seajs(模塊化框架),MVX farmwork
• 幫助我們更高效的去開(kāi)發(fā)代碼

設(shè)計(jì)模式

• 繼承,重用
• 代碼如何組織:比如我們?cè)陧?yè)面上有兩個(gè)地方的代碼有重復(fù),我們把代碼封裝成一個(gè)函數(shù),這是最基本的設(shè)計(jì)模式-代碼重用

性能優(yōu)化

• http cache,local cache,compress(代碼壓縮),DOM render(DOM渲染)

• 如何解決性能瓶頸問(wèn)題:
  1: 最常見(jiàn)的就是找到緩存的點(diǎn),可以從http協(xié)議層面可以做緩存,利用HTML5做本地緩存
  2: 做代碼壓縮
  3:更科學(xué)的做DOM樹(shù)的渲染

其它

• Resful API design(前后臺(tái)數(shù)據(jù)聯(lián)調(diào)),自動(dòng)化(Group/node.js),跨終端適配,代碼托管

3:產(chǎn)品設(shè)計(jì)和發(fā)布

如果我們想讓產(chǎn)品更加具有靈魂感,我們必須自己去思考產(chǎn)品應(yīng)該被設(shè)計(jì)成什么樣

交互設(shè)計(jì)圖.PNG

4:數(shù)據(jù)分析和優(yōu)化

數(shù)據(jù)分析和優(yōu)化是做前端架構(gòu)的必要前提,因?yàn)榍岸隧?yè)面的數(shù)據(jù)對(duì)于我們前端工程師來(lái)說(shuō)是非常重要的,比如可以根據(jù)數(shù)據(jù)波動(dòng)去發(fā)現(xiàn)頁(yè)面中的bug等等;最終的目的是提高產(chǎn)品的整體的體驗(yàn)和質(zhì)量
大家以一個(gè)比較全局的觀點(diǎn)去考慮這個(gè)問(wèn)題的時(shí)候,不要以技術(shù)的觀點(diǎn)去想,而要以產(chǎn)品的規(guī)劃和產(chǎn)品怎么為用戶(hù)服務(wù)的理念去想

5:前端架構(gòu)組織方式和目錄組織

架構(gòu)組織的維度分以下幾個(gè)方面

目錄層面
利用操作系統(tǒng)與生俱來(lái)的目錄結(jié)構(gòu),合理規(guī)劃目錄結(jié)構(gòu),是好的架構(gòu)實(shí)現(xiàn)的基礎(chǔ)
頁(yè)面層面
頁(yè)面層面,通常用來(lái)組織視圖( HTML )
功能層面
最簡(jiǎn)單的網(wǎng)站,單個(gè)文件通常是一個(gè)或多個(gè)相關(guān)功能的聚合
組件化和設(shè)計(jì)模式層面
當(dāng)一個(gè)邏輯需要多次被使用時(shí),我們就開(kāi)始組件化和抽象

1 :目錄層面的組織

• 目錄系統(tǒng)在前端架構(gòu)中所充當(dāng)?shù)淖饔?
• 更高效的組織開(kāi)發(fā)目錄: 好的組織方式,甚至可以代替那些復(fù)雜的代碼組織框架
• CSS,JS 和圖片要分開(kāi)存放:分開(kāi)存放,往往不是出于技術(shù)的考量,而是從團(tuán)隊(duì)協(xié)作和迭代管理層面觸發(fā)

舉例: js目錄結(jié)構(gòu),根據(jù)以下三層,分門(mén)別類(lèi)的放置文件
1: Model: 數(shù)據(jù)層,存放與服務(wù)器打交道的代碼 
2: UI: 控制視圖業(yè)務(wù)邏輯的代碼
3: Controller: 控制層

2: 頁(yè)面層面的組織

• 由于頁(yè)面中有不同的代碼,所以不能用相同的方式進(jìn)行組織架構(gòu)的劃分,在我們頁(yè)面中有 js(邏輯性代碼); html(結(jié)構(gòu)性代碼) ;css 描述性代碼

• 重用 :一般頁(yè)面與頁(yè)面之間經(jīng)常會(huì)有公共的部分,我們把公共的部分抽象出來(lái),存放到一個(gè)文件夾,然后將里面的文件作為公用部分.
  同常來(lái)講,頁(yè)面與頁(yè)面之間之間 不太存在邏輯之間的關(guān)系,而是包含與被包含的關(guān)系,比如一個(gè)頁(yè)面包含某個(gè)子結(jié)構(gòu).

3: 功能層面

• 最簡(jiǎn)單的網(wǎng)站,單個(gè)文件通常是一個(gè)或多個(gè)相關(guān)功能的聚合

6: 組件化和設(shè)計(jì)模式層面(詳細(xì)講解,單獨(dú)作為一節(jié))

• JS中的繼承和Extend
  繼承和拷貝是JS中抽象的基礎(chǔ),因?yàn)镴S不像其它面對(duì)對(duì)象語(yǔ)言,與生俱來(lái)就有這些功能,所以呢,要自己寫(xiě)

• 淺拷貝簡(jiǎn)單例子

var a = {};
var b = {c:100, d:200};
//想讓 a 具有 b 的屬性,就用到淺拷貝; 其實(shí)用到的就是for in 方法
var i;
for (i in b){
a[i] = b[i] 
}
a; // {c: 100, d: 200}

//封裝函數(shù)
function extend(sub,sup) {
    var i ;
    for (i in sub) {
        sub[i] = sup[i]
    }
}

• JS繼承繼承方式:原型鏈
  偷懶繼承方式:

//people
var people = function(){
    this.name = 'jiangdeng'
}
people.prototype.getName = function() {
    return this.name
}
//man
var man = function() {
    this.sex = 'male';
    people.call(this); //將man函數(shù)的this指向 people對(duì)象
}
//繼承
//想要man獲取people對(duì)象上的屬性
//最簡(jiǎn)單的方式,也是偷懶的方式
man.prototype = people.prototype;
var Man = new man();
Man.getName()

偷懶方式的問(wèn)題: man 的 prototype 中的 constructor 屬性指向的是 people 的構(gòu)造函數(shù),當(dāng) people 的 getName 方法 被重寫(xiě)后,man再調(diào)用 getName 方法也會(huì)被重寫(xiě)

修改后的繼承方式

//peopel
var people = function() {
    this.name = 'jiangdeng'
}
people.prototype.getName = function() {
    return this.name
}
//man
var man = function() {
    this.sex = 'male';
    people.call(this); //將man函數(shù)的this指向 people對(duì)象
}
//繼承
//不讓man的原型指向people的原型,而是指向people的實(shí)例
//指向people的實(shí)例后,man的constructor改變了,得把它設(shè)回它本身
man.prototype = new peopl();
man.prototype.constructor = man;
var Man = new man();
Man.getName() //jiangdeng

• 命名空間
  命名空間的基礎(chǔ):前端模塊拆分的最基本形式可以認(rèn)為是閉包的一種應(yīng)用,但是這種方式對(duì)于命名空間的管理過(guò)于隨意
• 組件化
  高級(jí)一點(diǎn)的組件化:可以使用開(kāi)源框架完成最終的組件的組織和管理,例如requirejs/seajs
  require.js(國(guó)外人寫(xiě)的)
sea.js(國(guó)人寫(xiě)的)

• 組件化中的AMD和CMD的區(qū)別
  CMD -- 依賴(lài)就近 (按需求再加載)
AMD -- 依賴(lài)前置 (提前一鍋端,都加載)

7:前端架構(gòu)實(shí)施

1:前端架構(gòu)實(shí)施前的思考

• 更合理的技術(shù)選型 --例如團(tuán)隊(duì)成員都精通jQuery,就沒(méi)必要選YUI作為類(lèi)庫(kù);
• 需求分解后,模塊的邊界劃分;模塊的邊界劃分不是一個(gè)人的事,每個(gè)代碼的貢獻(xiàn)者都有義務(wù)提出建議;
• 如何設(shè)計(jì)借口更加友好
• 自動(dòng)化的發(fā)布和快速迭代
• 如何降低維護(hù)成本,維護(hù)成本通常體現(xiàn)在架構(gòu)的可擴(kuò)展性和易用性,好的設(shè)計(jì)會(huì)一勞永逸;

2:優(yōu)化和擴(kuò)展
從哪些方面著手?

• 代碼層面
  code review & 代碼規(guī)范
• 架構(gòu)層面
  可擴(kuò)展性是否受約束
• 協(xié)議層面
  通過(guò) http(s) 協(xié)議優(yōu)化
• 綜合
  優(yōu)化往往是多種技術(shù)的綜合使用

3: 前端自動(dòng)化

• 前端自動(dòng)化原因: 人會(huì)犯錯(cuò) ;提高開(kāi)發(fā)效率
• 前端自動(dòng)化基礎(chǔ) : node.js /grunt
• 自動(dòng)化的方向 : 發(fā)布 測(cè)試 開(kāi)發(fā)

課程地址: 電商網(wǎng)站前端架構(gòu)