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/seajsrequire.js(國外人寫的)sea.js(國人寫的)
- 組件化中的AMD和CMD的區別
CMD -- 依賴就近 (按需求再加載)AMD -- 依賴前置 (提前一鍋端,都加載)
7:前端架構實施
1:前端架構實施前的思考
- 更合理的技術選型 --例如團隊成員都精通jQuery,就沒必要選YUI作爲類庫;
- 需求分解後,模塊的邊界劃分;模塊的邊界劃分不是一個人的事,每個代碼的貢獻者都有義務提出建議;
- 如何設計藉口更加友好
- 自動化的發佈和快速迭代
- 如何降低維護成本,維護成本通常體現在架構的可擴展性和易用性,好的設計會一勞永逸;
2:優化和擴展
從哪些方面着手?
- 代碼層面
code review & 代碼規範 - 架構層面
可擴展性是否受約束 - 協議層面
通過 http(s) 協議優化 - 綜合
優化往往是多種技術的綜合使用
3: 前端自動化
- 前端自動化
原因: 人會犯錯 ;提高開發效率 - 前端自動化
基礎: node.js /grunt - 自動化的
方向: 發佈 測試 開發
課程地址: 電商網站前端架構
作者：一杯濁酒
鏈接：https://www.jianshu.com/p/9df989dedd08
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。