《前端架構設計》讀後筆記

作前端工做一段時間了，也寫了很多的項目。可是忽然好像快要失去了興趣。美工、後臺、項目經理、測試等人員多層夾擊。美工說就這麼設計，你就得徹底按着來。後臺說這個需求作不了，得那樣作，因而已經作好的頁面推倒重來。測試說，這樣作更符合大衆習慣，這樣的流程才正確。因而，一遍遍地改，沒有話語權。就這樣興趣被慢慢磨滅着...。直到我看到了這本書。興趣的小火苗又開始突突的竄了起來.
這本書把前端結構師，比喻成建築工程師。都在一層層的搭建着本身的產品。這個產品有着完善的可遵循的體系設計、有着流暢運轉的工做規劃、有着持續優化的監督跟進。想象一下，咱們親手編碼(繪製)的產品，你們都能看到，能爲你們的生活帶來些許的變化，甚至爲之驚歎，那將是件多麼美好的事情。
那什麼是前端架構呢？
本書做者定義爲：前端架構是一系列工具和流程的集合，旨在提高前端代碼的質量，並實現高效、可持續的工做流。
做爲一名前端架構師，你的工做是不斷地探索和評估新的技術、平臺、方法和框架。世界上沒有一刀切式的解決方案，而前端架構師的使命正是將項目的需求與前端開發的實際狀況相結合。
那怎麼來實現一個好的前端架構呢？
本書做者認爲應圍繞四個核心來工做：
(1)代碼
(2)流程
(3)測試
(4)文檔

1、代碼

做爲前端架構師，你須要評估標記產生的過程。你對內容的順序、使用的元素和 CSS 類名有多大的控制權？這些元素在未來改動起來會有多大難度？模板是否易用，或者是否只有後端開發人員才能更改？甚至，你的標記全是基於模板系統的嗎？你能夠經過系統作出更改，仍是須要手動處理？經過回答這些問題，來不斷優化本身的代碼。同時要意識到咱們的工做不是單純地實現，某個頁面，而是設計整個系統。
經過BEM原則模塊化一個簡單的導航，代碼以下：

<nav class="nav">
  <ul class="nav__container">
    <li class="nav__item">
      <a href="/products" class="nav__link">
        <ul class="nav__container--secondary">
          <li class="nav__item--secondary">
            <a href="/socks" class="nav__link--secondary">

一、模塊化CSS有幾種方法：
(1)OOCSS（Object-Oriented CSS，面向對象的 CSS）方法：
OOCSS（http://oocss.org/）有兩個主要的原則：分離結構和外觀，以及分離容器和內容。

<div class="toggle simple">
  <div class="toggle-control open">
    <h1 class="toggle-title">Title 1</h1>
  </div>
  <div class="toggle-details open"> ... </div>
  ...
</div>

(2)SMACSS（Scalable and Modular Architecture for CSS，模塊化架構的可擴展 CSS）方法

<div class="toggle toggle-simple">
  <div class="toggle-control is-active">
    <h2 class="toggle-title">Title 1</h2>
  </div>

  <div class="toggle-details is-active">
    ...
  </div>
  ...
</dl>

(3)BEM（Block Element Modifier，塊元素修飾符）方法
包括塊名、元素和修飾符。BEM 使用很是簡潔的約定來建立 CSS 類名，而這些字符串可能會至關長。元素名加在雙下劃線後（例如 toggle__details），修飾符加在雙橫槓後（如 toggle__details--active）。這裏的 details 是元素，active 是修飾符，這個約定使得 CSS 類名很是清晰。使用雙橫槓是爲了不塊名被混淆爲修飾符。

<div class="toggle toggle--simple">
  <div class="toggle__control toggle__control--active">
    <h2 class="toggle__title">Title 1</h2>
    </div>

    <div class="toggle__details toggle__details--active">
    </div>

  </dl>

二、css採起原則：
(1)分離容器和內容

(2)區分佈局與組件的角色和職責

(3)在標記上使用單1、扁平的選擇器

(4)使用其餘原則，好比單一職責原則、單同樣式來源、內容修飾符
單一職責原則：規定你建立的全部東西必須有單一的、高度聚焦的理由。你應用到某個選擇器裏的樣式應該是爲了單一目的而建立的，而且可以很好地實現這個目標。
單同樣式來源：在一個模塊化設計中，任何組件的設計必須由組件自己決定，而不該該被它的父類名限制。
組件修飾符：讓你可以定義一個組件在多個不一樣狀況下的多種變化。

三、js的原則

(1)保持代碼整潔:使用JS Hint
(2)創造可複用的函數

2、流程

(1)工做流
(2)任務處理流

3、測試

(1)單元測試
(2)性能測試
(3)視覺還原測試

4、文檔

(1)樣式文檔
使用SassDoc來自動化生成sass文檔。
(2)圖形庫
使用Brad Frost 的原子設計原則（http://patternlab.io）來生成圖形庫