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(國人寫的)

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

---

7:前端架構實施

1:前端架構實施前的思考

• 更合理的技術選型 --例如團隊成員都精通jQuery,就沒必要選YUI作為類庫;
• 需求分解后,模塊的邊界劃分;模塊的邊界劃分不是一個人的事,每個代碼的貢獻者都有義務提出建議;
• 如何設計借口更加友好
• 自動化的發布和快速迭代
• 如何降低維護成本,維護成本通常體現在架構的可擴展性和易用性,好的設計會一勞永逸;

2:優化和擴展
從哪些方面著手?

• 代碼層面
  code review & 代碼規范
• 架構層面
  可擴展性是否受約束
• 協議層面
  通過 http(s) 協議優化
• 綜合
  優化往往是多種技術的綜合使用

3: 前端自動化

• 前端自動化原因: 人會犯錯 ;提高開發效率
• 前端自動化基礎: node.js /grunt
• 自動化的方向: 發布 測試 開發

---

課程地址:?電商網站前端架構

作者：一杯濁酒
鏈接：https://www.jianshu.com/p/9df989dedd08
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

總結

以上是生活随笔為你收集整理的电商网站前端架构 学习笔记(全是干货)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。