电商网站前端架构 学习笔记(全是干货)
1:前端架構(gòu)的基本知識(shí)
1: 前端工程師必須會(huì)的一些技能
前端工程師基本技能圖.PNG
2: 前端架構(gòu)基本知識(shí)
- 什么是前端架構(gòu)?
每個(gè)人對(duì)每個(gè)架構(gòu)有不同的認(rèn)識(shí)和一些想法。沒(méi)有一個(gè)架構(gòu)是完美的,只有一個(gè)架構(gòu)是不是適合你的。哪個(gè)個(gè)架構(gòu)符合你的需求的時(shí)候,你使用它就是了啦。另外,要記住的是架構(gòu)是為完成產(chǎn)品服務(wù)的.一個(gè)簡(jiǎn)單的網(wǎng)站也可能涉及到前端架構(gòu),比如代碼的復(fù)用. - 做前端架構(gòu)的目的?
做架構(gòu)的目的并不是為了技術(shù)做架構(gòu)而是因?yàn)楫a(chǎn)品才做架構(gòu)的; - single page application (SPA)
單頁(yè)網(wǎng)站頁(yè)面的應(yīng)用,所有應(yīng)用頁(yè)面的切換通過(guò)頁(yè)面的哈希完成,做這樣的事需要一些比較復(fù)雜的框架,像backbone,anjular.js.單頁(yè)面應(yīng)用最近幾年開(kāi)始流行起來(lái)了,像qq郵箱,雅虎郵箱等都已經(jīng)在應(yīng)用了.
2:前端建構(gòu)技術(shù)基礎(chǔ)介紹
- 技術(shù)基礎(chǔ)的作用:做好技術(shù)基礎(chǔ)的好處在于:后面做網(wǎng)站的整體規(guī)劃和架構(gòu)設(shè)計(jì)就會(huì)輕松非常多
語(yǔ)言基礎(chǔ)
- javascript,html & css
基本框架和類(lèi)庫(kù)
- jQuery (更方便做代碼開(kāi)發(fā))& require.js/ seajs(模塊化框架),MVX farmwork
- 幫助我們更高效的去開(kāi)發(fā)代碼
設(shè)計(jì)模式
- 繼承,重用
- 代碼如何組織:比如我們?cè)陧?yè)面上有兩個(gè)地方的代碼有重復(fù),我們把代碼封裝成一個(gè)函數(shù),這是最基本的設(shè)計(jì)模式-代碼重用
性能優(yōu)化
- http cache,local cache,compress(代碼壓縮),DOM render(DOM渲染)
- 如何解決性能瓶頸問(wèn)題:
1: 最常見(jiàn)的就是找到緩存的點(diǎn),可以從http協(xié)議層面可以做緩存,利用HTML5做本地緩存
2: 做代碼壓縮
3:更科學(xué)的做DOM樹(shù)的渲染
其它
- Resful API design(前后臺(tái)數(shù)據(jù)聯(lián)調(diào)),自動(dòng)化(Group/node.js),跨終端適配,代碼托管
3:產(chǎn)品設(shè)計(jì)和發(fā)布
如果我們想讓產(chǎn)品更加具有靈魂感,我們必須自己去思考產(chǎn)品應(yīng)該被設(shè)計(jì)成什么樣
交互設(shè)計(jì)圖.PNG
4:數(shù)據(jù)分析和優(yōu)化
數(shù)據(jù)分析和優(yōu)化是做前端架構(gòu)的必要前提,因?yàn)榍岸隧?yè)面的數(shù)據(jù)對(duì)于我們前端工程師來(lái)說(shuō)是非常重要的,比如可以根據(jù)數(shù)據(jù)波動(dòng)去發(fā)現(xiàn)頁(yè)面中的bug等等;最終的目的是提高產(chǎn)品的整體的體驗(yàn)和質(zhì)量
大家以一個(gè)比較全局的觀點(diǎn)去考慮這個(gè)問(wèn)題的時(shí)候,不要以技術(shù)的觀點(diǎn)去想,而要以產(chǎn)品的規(guī)劃和產(chǎn)品怎么為用戶(hù)服務(wù)的理念去想
5:前端架構(gòu)組織方式和目錄組織
架構(gòu)組織的維度分以下幾個(gè)方面
目錄層面
利用操作系統(tǒng)與生俱來(lái)的目錄結(jié)構(gòu),合理規(guī)劃目錄結(jié)構(gòu),是好的架構(gòu)實(shí)現(xiàn)的基礎(chǔ)
頁(yè)面層面
頁(yè)面層面,通常用來(lái)組織視圖( HTML )
功能層面
最簡(jiǎn)單的網(wǎng)站,單個(gè)文件通常是一個(gè)或多個(gè)相關(guān)功能的聚合
組件化和設(shè)計(jì)模式層面
當(dāng)一個(gè)邏輯需要多次被使用時(shí),我們就開(kāi)始組件化和抽象
1 :目錄層面的組織
- 目錄系統(tǒng)在前端架構(gòu)中所充當(dāng)?shù)淖饔?
- 更高效的組織開(kāi)發(fā)目錄: 好的組織方式,甚至可以代替那些復(fù)雜的代碼組織框架
- CSS,JS 和圖片要分開(kāi)存放:分開(kāi)存放,往往不是出于技術(shù)的考量,而是從團(tuán)隊(duì)協(xié)作和迭代管理層面觸發(fā)
2:?頁(yè)面層面的組織
-
由于頁(yè)面中有不同的代碼,所以不能用相同的方式進(jìn)行組織架構(gòu)的劃分,在我們頁(yè)面中有?js(邏輯性代碼);?html(結(jié)構(gòu)性代碼);css 描述性代碼
-
重用:一般頁(yè)面與頁(yè)面之間經(jīng)常會(huì)有公共的部分,我們把公共的部分抽象出來(lái),存放到一個(gè)文件夾,然后將里面的文件作為公用部分.
同常來(lái)講,頁(yè)面與頁(yè)面之間之間 不太存在邏輯之間的關(guān)系,而是包含與被包含的關(guān)系,比如一個(gè)頁(yè)面包含某個(gè)子結(jié)構(gòu).
3:?功能層面
- 最簡(jiǎn)單的網(wǎng)站,單個(gè)文件通常是一個(gè)或多個(gè)相關(guān)功能的聚合
6: 組件化和設(shè)計(jì)模式層面(詳細(xì)講解,單獨(dú)作為一節(jié))
-
JS中的繼承和Extend
繼承和拷貝是JS中抽象的基礎(chǔ),因?yàn)镴S不像其它面對(duì)對(duì)象語(yǔ)言,與生俱來(lái)就有這些功能,所以呢,要自己寫(xiě) -
淺拷貝簡(jiǎn)單例子
- JS繼承繼承方式:原型鏈
偷懶繼承方式:
偷懶方式的問(wèn)題: man 的 prototype 中的 constructor 屬性指向的是 people 的構(gòu)造函數(shù),當(dāng) people 的 getName 方法 被重寫(xiě)后,man再調(diào)用 getName 方法也會(huì)被重寫(xiě)
修改后的繼承方式
//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函數(shù)的this指向 people對(duì)象 } //繼承 //不讓man的原型指向people的原型,而是指向people的實(shí)例 //指向people的實(shí)例后,man的constructor改變了,得把它設(shè)回它本身 man.prototype = new peopl(); man.prototype.constructor = man; var Man = new man(); Man.getName() //jiangdeng- 命名空間
命名空間的基礎(chǔ):前端模塊拆分的最基本形式可以認(rèn)為是閉包的一種應(yīng)用,但是這種方式對(duì)于命名空間的管理過(guò)于隨意 - 組件化
高級(jí)一點(diǎn)的組件化:可以使用開(kāi)源框架完成最終的組件的組織和管理,例如requirejs/seajs
require.js(國(guó)外人寫(xiě)的)
sea.js(國(guó)人寫(xiě)的)
- 組件化中的AMD和CMD的區(qū)別
CMD -- 依賴(lài)就近 (按需求再加載)
AMD -- 依賴(lài)前置 (提前一鍋端,都加載)
7:前端架構(gòu)實(shí)施
1:前端架構(gòu)實(shí)施前的思考
- 更合理的技術(shù)選型 --例如團(tuán)隊(duì)成員都精通jQuery,就沒(méi)必要選YUI作為類(lèi)庫(kù);
- 需求分解后,模塊的邊界劃分;模塊的邊界劃分不是一個(gè)人的事,每個(gè)代碼的貢獻(xiàn)者都有義務(wù)提出建議;
- 如何設(shè)計(jì)借口更加友好
- 自動(dòng)化的發(fā)布和快速迭代
- 如何降低維護(hù)成本,維護(hù)成本通常體現(xiàn)在架構(gòu)的可擴(kuò)展性和易用性,好的設(shè)計(jì)會(huì)一勞永逸;
2:優(yōu)化和擴(kuò)展
從哪些方面著手?
- 代碼層面
code review & 代碼規(guī)范 - 架構(gòu)層面
可擴(kuò)展性是否受約束 - 協(xié)議層面
通過(guò) http(s) 協(xié)議優(yōu)化 - 綜合
優(yōu)化往往是多種技術(shù)的綜合使用
3: 前端自動(dòng)化
- 前端自動(dòng)化原因: 人會(huì)犯錯(cuò) ;提高開(kāi)發(fā)效率
- 前端自動(dòng)化基礎(chǔ): node.js /grunt
- 自動(dòng)化的方向: 發(fā)布 測(cè)試 開(kāi)發(fā)
課程地址:?電商網(wǎng)站前端架構(gòu)
作者:一杯濁酒
鏈接:https://www.jianshu.com/p/9df989dedd08
來(lái)源:簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有,任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
總結(jié)
以上是生活随笔為你收集整理的电商网站前端架构 学习笔记(全是干货)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: c语言学籍管理系统小程序,学籍业务办理系
- 下一篇: 2019前端必会黑科技之PWA