資訊專欄INFORMATION COLUMN
摘要：作為一名前端架構(gòu)師，你的工作是不斷地探索和評估新的技術(shù)平臺方法和框架。世界上沒有一刀切式的解決方案，而前端架構(gòu)師的使命正是將項目的需求與前端開發(fā)的實際情況相結(jié)合。
做前端工作一段時間了，也寫了不少的項目。但是突然好像快要失去了興趣。美工、后臺、項目經(jīng)理、測試等人員多層夾擊。美工說就這么設(shè)計，你就得完全按著來。后臺說這個需求做不了，得那樣做，于是已經(jīng)做好的頁面推倒重來。測試說，這樣做更符合大眾習(xí)慣，這樣的流程才正確。于是，一遍遍地改，沒有話語權(quán)。就這樣興趣被慢慢磨滅著...。直到我看到了這本書。興趣的小火苗又開始突突的竄了起來.
這本書把前端結(jié)構(gòu)師，比喻成建筑工程師。都在一層層的搭建著自己的產(chǎn)品。這個產(chǎn)品有著完善的可遵循的體系設(shè)計、有著流暢運轉(zhuǎn)的工作規(guī)劃、有著持續(xù)優(yōu)化的監(jiān)督跟進(jìn)。想象一下，我們親手編碼(繪制)的產(chǎn)品，大家都能看到，能為大家的生活帶來些許的變化，甚至為之驚嘆，那將是件多么美好的事情。
那什么是前端架構(gòu)呢？
本書作者定義為：前端架構(gòu)是一系列工具和流程的集合，旨在提升前端代碼的質(zhì)量，并實現(xiàn)高效、可持續(xù)的工作流。
作為一名前端架構(gòu)師，你的工作是不斷地探索和評估新的技術(shù)、平臺、方法和框架。世界上沒有一刀切式的解決方案，而前端架構(gòu)師的使命正是將項目的需求與前端開發(fā)的實際情況相結(jié)合。
那怎么來實現(xiàn)一個好的前端架構(gòu)呢？
本書作者認(rèn)為應(yīng)圍繞四個核心來工作：
(1)代碼
(2)流程
(3)測試
(4)文檔
作為前端架構(gòu)師，你需要評估標(biāo)記產(chǎn)生的過程。你對內(nèi)容的順序、使用的元素和 CSS 類名有多大的控制權(quán)？這些元素在將來改動起來會有多大難度？模板是否易用，或者是否只有后端開發(fā)人員才能更改？甚至，你的標(biāo)記全是基于模板系統(tǒng)的嗎？你可以通過系統(tǒng)做出更改，還是需要手動處理？通過回答這些問題，來不斷優(yōu)化自己的代碼。同時要意識到我們的工作不是單純地實現(xiàn)，某個頁面，而是設(shè)計整個系統(tǒng)。
通過BEM原則模塊化一個簡單的導(dǎo)航，代碼如下：
1、模塊化CSS有幾種方法：
(1)OOCSS（Object-Oriented CSS，面向?qū)ο蟮?CSS）方法：
OOCSS（http://oocss.org/）有兩個主要的原則：分離結(jié)構(gòu)和外觀，以及分離容器和內(nèi)容。
Title 1
......
(2)SMACSS（Scalable and Modular Architecture for CSS，模塊化架構(gòu)的可擴(kuò)展 CSS）方法
Title 1
......(3)BEM（Block Element Modifier，塊元素修飾符）方法
包括塊名、元素和修飾符。BEM 使用非常簡潔的約定來創(chuàng)建 CSS 類名，而這些字符串可能會相當(dāng)長。元素名加在雙下劃線后（例如 toggle__details），修飾符加在雙橫杠后（如 toggle__details--active）。這里的 details 是元素，active 是修飾符，這個約定使得 CSS 類名非常清晰。使用雙橫杠是為了避免塊名被混淆為修飾符。Title 1
2、css采取原則：
(1)分離容器和內(nèi)容(2)區(qū)分布局與組件的角色和職責(zé)
(3)在標(biāo)記上使用單一、扁平的選擇器
(4)使用其他原則，比如單一職責(zé)原則、單一樣式來源、內(nèi)容修飾符
單一職責(zé)原則：規(guī)定你創(chuàng)建的所有東西必須有單一的、高度聚焦的理由。你應(yīng)用到某個選擇器里的樣式應(yīng)該是為了單一目的而創(chuàng)建的，并且能夠很好地實現(xiàn)這個目標(biāo)。
單一樣式來源：在一個模塊化設(shè)計中，任何組件的設(shè)計必須由組件本身決定，而不應(yīng)該被它的父類名限制。
組件修飾符：讓你能夠定義一個組件在多個不同情況下的多種變化。3、js的原則
(1)保持代碼整潔:使用JS Hint
二、流程
(2)創(chuàng)造可復(fù)用的函數(shù)(1)工作流
三、測試
(2)任務(wù)處理流(1)單元測試
四、文檔
(2)性能測試
(3)視覺還原測試(1)樣式文檔
使用SassDoc來自動化生成sass文檔。
(2)圖形庫
使用Brad Frost 的原子設(shè)計原則（http://patternlab.io）來生成圖形庫文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/94789.html
相關(guān)文章
《Java編程思想》讀后總結(jié)（一）
摘要：前言編程思想這本書，陸陸續(xù)續(xù)讀了年，終于基本都瀏覽了一遍。每個對象對外暴露接口，程序通過對象暴露的接口向?qū)ο蟀l(fā)送消息，獲取該對象的服務(wù)能力。異常處理異常處理，為編寫程序階段提供了一種預(yù)見性的防止程序崩潰的出路。 前言 《Java編程思想》這本書，陸陸續(xù)續(xù)讀了1年，終于基本都瀏覽了一遍。通過這本書，試圖理解作者的想法，才真的體會到Java思想。感謝本書的作者，不僅講述了java的語法，更...
代碼之髓讀后感——如何高效的學(xué)習(xí)語言
摘要：代碼之髓讀后感如何高效的學(xué)習(xí)語言技術(shù)讀后感王垠如何掌握程序語言代碼之髓這本書里提出了三種學(xué)習(xí)語言的方法如何高效的學(xué)習(xí)語言在比較中學(xué)習(xí)在歷史中學(xué)習(xí)在實踐中學(xué)習(xí)在比較中學(xué)習(xí)通過比較多種語言，總結(jié)出某種語言的獨有特點，以及多種語言的共有特點。 title: 代碼之髓讀后感——如何高效的學(xué)習(xí)語言date: 2017-07-08 17:17:00categories: 技術(shù)tags: 讀后感 ...
兩篇文章讀后感, 關(guān)于數(shù)據(jù)庫, 關(guān)于 MVC, 也關(guān)于 React
摘要：兩篇文章今天看了兩篇文章我覺得對我的影響會很大當(dāng)然都是相關(guān)的一篇是在大會上的演講有視頻也有文字版關(guān)于數(shù)據(jù)庫另一篇是關(guān)于的文章從上看到的關(guān)于架構(gòu)來源前面一篇是在的文檔上看到的這文檔上有不少我關(guān)心的技術(shù)的作者最近在上 兩篇文章 今天看了兩篇文章, 我覺得對我的影響會很大, 當(dāng)然, 都是 React 相關(guān)的: 一篇是 Martin Kleppmann 在 Strangeloop 2014...
Java技術(shù)轉(zhuǎn)（兼顧）產(chǎn)品經(jīng)理——讀《快速轉(zhuǎn)行做產(chǎn)品經(jīng)理》有感
摘要：第四章總結(jié)最后的章節(jié)其實是一些自學(xué)路上的建議與避免小白走錯路的坑。結(jié)語感謝作者的分享，也看出作者在行業(yè)的豐富經(jīng)驗，同時此書確實很適合小白閱讀，閱讀輕松而且沒有太多專業(yè)性詞匯，讓很多人都能對有一個大致的概念。 博客 貓叔的博客 前言 年前部門一次性購買了一批書，我知道這次我應(yīng)該會被指派閱讀一些偏向于管理類的書籍，但是沒想到美女領(lǐng)導(dǎo)直接給了我這本書《快速轉(zhuǎn)行做產(chǎn)品經(jīng)理》，其實一開始我有點...
發(fā)表評論
0條評論
閱讀 2675·2021-10-14 09:42
閱讀 1216·2021-09-22 15:09
閱讀 3629·2021-09-09 09:33
閱讀 3089·2021-09-07 09:59
閱讀 3732·2021-09-03 10:34
閱讀 3682·2021-07-26 22:01
閱讀 2885·2019-08-30 13:06
閱讀 1265·2019-08-30 10:48
