電商網站前端架構學習筆記(全是干貨)

1:前端架構的基本知識

1: 前端工程師必須會的一些技能

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

2: 前端架構基本知識

什么是前端架構?
每個人對每個架構有不同的認識和一些想法。沒有一個架構是完美的，只有一個架構是不是適合你的。哪個個架構符合你的需求的時候，你使用它就是了啦。另外,要記住的是架構是為完成產品服務的.一個簡單的網站也可能涉及到前端架構,比如代碼的復用.
做前端架構的目的?
做架構的目的并不是為了技術做架構而是因為產品才做架構的;
single page application (SPA)
單頁網站頁面的應用,所有應用頁面的切換通過頁面的哈希完成,做這樣的事需要一些比較復雜的框架,像backbone,anjular.js.單頁面應用最近幾年開始流行起來了,像qq郵箱,雅虎郵箱等都已經在應用了.

2:前端建構技術基礎介紹

技術基礎的作用:做好技術基礎的好處在于:后面做網站的整體規劃和架構設計就會輕松非常多

語言基礎

javascript,html & css

基本框架和類庫

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

設計模式

繼承,重用
代碼如何組織:比如我們在頁面上有兩個地方的代碼有重復,我們把代碼封裝成一個函數,這是最基本的設計模式-代碼重用

性能優化

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

如何解決性能瓶頸問題:
1: 最常見的就是找到緩存的點,可以從http協議層面可以做緩存,利用HTML5做本地緩存
2: 做代碼壓縮
3:更科學的做DOM樹的渲染

其它

Resful API design(前后臺數據聯調),自動化(Group/node.js),跨終端適配,代碼托管

3:產品設計和發布

如果我們想讓產品更加具有靈魂感,我們必須自己去思考產品應該被設計成什么樣

交互設計圖.PNG

4:數據分析和優化

數據分析和優化是做前端架構的必要前提,因為前端頁面的數據對于我們前端工程師來說是非常重要的,比如可以根據數據波動去發現頁面中的bug等等;最終的目的是提高產品的整體的體驗和質量
大家以一個比較全局的觀點去考慮這個問題的時候,不要以技術的觀點去想,而要以產品的規劃和產品怎么為用戶服務的理念去想

5:前端架構組織方式和目錄組織

架構組織的維度分以下幾個方面

目錄層面
利用操作系統與生俱來的目錄結構,合理規劃目錄結構,是好的架構實現的基礎
頁面層面
頁面層面,通常用來組織視圖( HTML )
功能層面
最簡單的網站,單個文件通常是一個或多個相關功能的聚合
組件化和設計模式層面
當一個邏輯需要多次被使用時,我們就開始組件化和抽象

1 :目錄層面的組織

目錄系統在前端架構中所充當的作用:
更高效的組織開發目錄: 好的組織方式,甚至可以代替那些復雜的代碼組織框架
CSS,JS 和圖片要分開存放:分開存放,往往不是出于技術的考量,而是從團隊協作和迭代管理層面觸發

舉例: js目錄結構,根據以下三層,分門別類的放置文件
1: Model: 數據層,存放與服務器打交道的代碼 
2: UI: 控制視圖業務邏輯的代碼
3: Controller: 控制層

2:?頁面層面的組織

由于頁面中有不同的代碼,所以不能用相同的方式進行組織架構的劃分,在我們頁面中有?js(邏輯性代碼);?html(結構性代碼);css 描述性代碼
重用:一般頁面與頁面之間經常會有公共的部分,我們把公共的部分抽象出來,存放到一個文件夾,然后將里面的文件作為公用部分.
同常來講,頁面與頁面之間之間不太存在邏輯之間的關系,而是包含與被包含的關系,比如一個頁面包含某個子結構.

3:?功能層面

最簡單的網站,單個文件通常是一個或多個相關功能的聚合

6: 組件化和設計模式層面(詳細講解,單獨作為一節)

JS中的繼承和Extend
繼承和拷貝是JS中抽象的基礎,因為JS不像其它面對對象語言,與生俱來就有這些功能,所以呢,要自己寫
淺拷貝簡單例子

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

//封裝函數
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函數的this指向 people對象
}
//繼承
//想要man獲取people對象上的屬性
//最簡單的方式,也是偷懶的方式
man.prototype = people.prototype;
var Man = new man();
Man.getName()

偷懶方式的問題: man 的 prototype 中的 constructor 屬性指向的是 people 的構造函數,當 people 的 getName 方法被重寫后,man再調用 getName 方法也會被重寫

修改后的繼承方式

//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函數的this指向 people對象
}
//繼承
//不讓man的原型指向people的原型,而是指向people的實例
//指向people的實例后,man的constructor改變了,得把它設回它本身
man.prototype = new peopl();
man.prototype.constructor = man;
var Man = new man();
Man.getName() //jiangdeng

命名空間
命名空間的基礎:前端模塊拆分的最基本形式可以認為是閉包的一種應用,但是這種方式對于命名空間的管理過于隨意
組件化
高級一點的組件化:可以使用開源框架完成最終的組件的組織和管理,例如requirejs/seajs
require.js(國外人寫的)
sea.js(國人寫的)