成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

《前端架構(gòu)設(shè)計(jì)》讀后筆記

Ocean / 3178人閱讀

摘要：作為一名前端架構(gòu)師，你的工作是不斷地探索和評(píng)估新的技術(shù)平臺(tái)方法和框架。世界上沒(méi)有一刀切式的解決方案，而前端架構(gòu)師的使命正是將項(xiàng)目的需求與前端開(kāi)發(fā)的實(shí)際情況相結(jié)合。

做前端工作一段時(shí)間了，也寫(xiě)了不少的項(xiàng)目。但是突然好像快要失去了興趣。美工、后臺(tái)、項(xiàng)目經(jīng)理、測(cè)試等人員多層夾擊。美工說(shuō)就這么設(shè)計(jì)，你就得完全按著來(lái)。后臺(tái)說(shuō)這個(gè)需求做不了，得那樣做，于是已經(jīng)做好的頁(yè)面推倒重來(lái)。測(cè)試說(shuō)，這樣做更符合大眾習(xí)慣，這樣的流程才正確。于是，一遍遍地改，沒(méi)有話語(yǔ)權(quán)。就這樣興趣被慢慢磨滅著...。直到我看到了這本書(shū)。興趣的小火苗又開(kāi)始突突的竄了起來(lái).
這本書(shū)把前端結(jié)構(gòu)師，比喻成建筑工程師。都在一層層的搭建著自己的產(chǎn)品。這個(gè)產(chǎn)品有著完善的可遵循的體系設(shè)計(jì)、有著流暢運(yùn)轉(zhuǎn)的工作規(guī)劃、有著持續(xù)優(yōu)化的監(jiān)督跟進(jìn)。想象一下，我們親手編碼(繪制)的產(chǎn)品，大家都能看到，能為大家的生活帶來(lái)些許的變化，甚至為之驚嘆，那將是件多么美好的事情。
那什么是前端架構(gòu)呢？
本書(shū)作者定義為：前端架構(gòu)是一系列工具和流程的集合，旨在提升前端代碼的質(zhì)量，并實(shí)現(xiàn)高效、可持續(xù)的工作流。
作為一名前端架構(gòu)師，你的工作是不斷地探索和評(píng)估新的技術(shù)、平臺(tái)、方法和框架。世界上沒(méi)有一刀切式的解決方案，而前端架構(gòu)師的使命正是將項(xiàng)目的需求與前端開(kāi)發(fā)的實(shí)際情況相結(jié)合。
那怎么來(lái)實(shí)現(xiàn)一個(gè)好的前端架構(gòu)呢？
本書(shū)作者認(rèn)為應(yīng)圍繞四個(gè)核心來(lái)工作：
(1)代碼
(2)流程
(3)測(cè)試
(4)文檔

一、代碼

作為前端架構(gòu)師，你需要評(píng)估標(biāo)記產(chǎn)生的過(guò)程。你對(duì)內(nèi)容的順序、使用的元素和 CSS 類(lèi)名有多大的控制權(quán)？這些元素在將來(lái)改動(dòng)起來(lái)會(huì)有多大難度？模板是否易用，或者是否只有后端開(kāi)發(fā)人員才能更改？甚至，你的標(biāo)記全是基于模板系統(tǒng)的嗎？你可以通過(guò)系統(tǒng)做出更改，還是需要手動(dòng)處理？通過(guò)回答這些問(wèn)題，來(lái)不斷優(yōu)化自己的代碼。同時(shí)要意識(shí)到我們的工作不是單純地實(shí)現(xiàn)，某個(gè)頁(yè)面，而是設(shè)計(jì)整個(gè)系統(tǒng)。
通過(guò)BEM原則模塊化一個(gè)簡(jiǎn)單的導(dǎo)航，代碼如下：

1、模塊化CSS有幾種方法：
(1)OOCSS（Object-Oriented CSS，面向?qū)ο蟮?CSS）方法：
OOCSS（http://oocss.org/）有兩個(gè)主要的原則：分離結(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 使用非常簡(jiǎn)潔的約定來(lái)創(chuàng)建 CSS 類(lèi)名，而這些字符串可能會(huì)相當(dāng)長(zhǎng)。元素名加在雙下劃線后（例如 toggle__details），修飾符加在雙橫杠后（如 toggle__details--active）。這里的 details 是元素，active 是修飾符，這個(gè)約定使得 CSS 類(lèi)名非常清晰。使用雙橫杠是為了避免塊名被混淆為修飾符。


  

    
Title 1

2、css采取原則：
(1)分離容器和內(nèi)容

(2)區(qū)分布局與組件的角色和職責(zé)

(3)在標(biāo)記上使用單一、扁平的選擇器

(4)使用其他原則，比如單一職責(zé)原則、單一樣式來(lái)源、內(nèi)容修飾符
單一職責(zé)原則：規(guī)定你創(chuàng)建的所有東西必須有單一的、高度聚焦的理由。你應(yīng)用到某個(gè)選擇器里的樣式應(yīng)該是為了單一目的而創(chuàng)建的，并且能夠很好地實(shí)現(xiàn)這個(gè)目標(biāo)。
單一樣式來(lái)源：在一個(gè)模塊化設(shè)計(jì)中，任何組件的設(shè)計(jì)必須由組件本身決定，而不應(yīng)該被它的父類(lèi)名限制。
組件修飾符：讓你能夠定義一個(gè)組件在多個(gè)不同情況下的多種變化。

3、js的原則

(1)保持代碼整潔:使用JS Hint
(2)創(chuàng)造可復(fù)用的函數(shù)

二、流程

(1)工作流
(2)任務(wù)處理流

三、測(cè)試

(1)單元測(cè)試
(2)性能測(cè)試
(3)視覺(jué)還原測(cè)試

四、文檔

(1)樣式文檔
使用SassDoc來(lái)自動(dòng)化生成sass文檔。
(2)圖形庫(kù)
使用Brad Frost 的原子設(shè)計(jì)原則（http://patternlab.io）來(lái)生成圖形庫(kù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94789.html

相關(guān)文章

  • 《Java編程思想》讀后總結(jié)（一）

    摘要：前言編程思想這本書(shū)，陸陸續(xù)續(xù)讀了年，終于基本都瀏覽了一遍。每個(gè)對(duì)象對(duì)外暴露接口，程序通過(guò)對(duì)象暴露的接口向?qū)ο蟀l(fā)送消息，獲取該對(duì)象的服務(wù)能力。異常處理異常處理，為編寫(xiě)程序階段提供了一種預(yù)見(jiàn)性的防止程序崩潰的出路。 前言 《Java編程思想》這本書(shū)，陸陸續(xù)續(xù)讀了1年，終于基本都瀏覽了一遍。通過(guò)這本書(shū)，試圖理解作者的想法，才真的體會(huì)到Java思想。感謝本書(shū)的作者，不僅講述了java的語(yǔ)法，更...

    hufeng 評(píng)論0 收藏0

  • 代碼之髓讀后感——如何高效的學(xué)習(xí)語(yǔ)言

    摘要：代碼之髓讀后感如何高效的學(xué)習(xí)語(yǔ)言技術(shù)讀后感王垠如何掌握程序語(yǔ)言代碼之髓這本書(shū)里提出了三種學(xué)習(xí)語(yǔ)言的方法如何高效的學(xué)習(xí)語(yǔ)言在比較中學(xué)習(xí)在歷史中學(xué)習(xí)在實(shí)踐中學(xué)習(xí)在比較中學(xué)習(xí)通過(guò)比較多種語(yǔ)言，總結(jié)出某種語(yǔ)言的獨(dú)有特點(diǎn)，以及多種語(yǔ)言的共有特點(diǎn)。 title: 代碼之髓讀后感——如何高效的學(xué)習(xí)語(yǔ)言date: 2017-07-08 17:17:00categories: 技術(shù)tags: 讀后感 ...

    ivyzhang 評(píng)論0 收藏0

  • 兩篇文章讀后感, 關(guān)于數(shù)據(jù)庫(kù), 關(guān)于 MVC, 也關(guān)于 React

    摘要：兩篇文章今天看了兩篇文章我覺(jué)得對(duì)我的影響會(huì)很大當(dāng)然都是相關(guān)的一篇是在大會(huì)上的演講有視頻也有文字版關(guān)于數(shù)據(jù)庫(kù)另一篇是關(guān)于的文章從上看到的關(guān)于架構(gòu)來(lái)源前面一篇是在的文檔上看到的這文檔上有不少我關(guān)心的技術(shù)的作者最近在上 兩篇文章 今天看了兩篇文章, 我覺(jué)得對(duì)我的影響會(huì)很大, 當(dāng)然, 都是 React 相關(guān)的: 一篇是 Martin Kleppmann 在 Strangeloop 2014...

    BenCHou 評(píng)論0 收藏0

  • Java技術(shù)轉(zhuǎn)（兼顧）產(chǎn)品經(jīng)理——讀《快速轉(zhuǎn)行做產(chǎn)品經(jīng)理》有感

    摘要：第四章總結(jié)最后的章節(jié)其實(shí)是一些自學(xué)路上的建議與避免小白走錯(cuò)路的坑。結(jié)語(yǔ)感謝作者的分享，也看出作者在行業(yè)的豐富經(jīng)驗(yàn)，同時(shí)此書(shū)確實(shí)很適合小白閱讀，閱讀輕松而且沒(méi)有太多專業(yè)性詞匯，讓很多人都能對(duì)有一個(gè)大致的概念。 博客 貓叔的博客 前言 年前部門(mén)一次性購(gòu)買(mǎi)了一批書(shū)，我知道這次我應(yīng)該會(huì)被指派閱讀一些偏向于管理類(lèi)的書(shū)籍，但是沒(méi)想到美女領(lǐng)導(dǎo)直接給了我這本書(shū)《快速轉(zhuǎn)行做產(chǎn)品經(jīng)理》，其實(shí)一開(kāi)始我有點(diǎn)...

    MockingBird 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<