㈠ 怎麼看待前端 組件化 開源 知乎
前端相對後端又有點後台化，因為既要懂得網站前台的事情又要懂得後台代碼的事情！
㈡ 什麼叫組件化開發
張克軍 提出的「組件化就是函數式界面開發」這一說法我是難以接受的，函數式界面開發就讓它好好地叫「函數式組件化」吧，不然我們會在所謂的「傳統UI框架」和「函數式界面開發」之間出現一個Gap，豈不是又要造個詞給填上，多累……
我前面說會有一個Gap，這個Gap很可能就是我們現在想用「組件化」這個定義去表達的一些點，我想在此做一些個人的見解
我將之理解為以下幾要素：
組件是對邏輯的封裝，不限於圖形元素。即我們可以把if做成組件、把一個倒計時做成組件、把一段動畫做成組件、把路由做成組件、把數據架構做成組件，而這些並不能稱為控制項
組件具備單個可移植性，即「隨載入隨用」，不需要為其准備復雜的基礎條件（如引入樣式、引入框架等）。然而這一點現有那些所謂組件庫做得並不好，技術上也不大現實
組件是聲明式定義的，而非命令式。這個不想多說，很大程度上是自己主觀的一個想法
而上面最重要的就是第一點，所以要問我什麼是「組件化開發」，我的說法是：
把圖形、非圖形的各種邏輯均抽象為一個統一的概念（組件）來實現開發的模式
這與傳統開發框架的最大區別就是統一了圖形元素與非圖形元素，除此之外我再想不出其它真正體現區別的點了
在這個概念下，包括router、ajax、mole loader、timer、animation、interval等，都是組件，共享統一的生命周期管理和對外介面，且都是聲明式地進行組合
我的一位同事告訴我去年的深JS上，有位淘寶的朋友的話題叫做「前端組件服務化」，這裡面提的那些個概念，是很符合我對「組件化」的認識的，他要是不給再強安個「服務化」的噱頭就好了- -
不過話說回來，在這個要求之下，組件其實不是那麼好進行抽象設計的，隨便說幾個例子，有難的也有簡單的：
非圖形元素的各種需求如何統一介面，如timer和ajax
組件可以橫向組件，但是縱向復用如何解決，如希望任何圖形元素都可以實現被滑鼠拖拽的效果，則滑鼠拖拽應該也是個組件，這個組件與其它組件的關系是什麼
有些組件對其可被組合的組件是有要求的，比如HTML里就不大好意思把一個<p>放進一個<span>里，這一點如何在組件上表達（實現不難，表達比較難）
一些我們原本想當然認為純的小函數的東西，是不是也能當組件玩，比如underscore.pick要不要也是個組件
㈢ 怎樣提高前端工程師開發效率，都在這里
前端工程師其實是一個工作很雜的職位，除了要負責切圖、寫html/css/js外，還要解決一系列的瀏覽器兼容性、網頁性能優化等問題，所以提高前端工程師的開發效率是勢在必行的，也是前端工程化的體現。
對於開發效率，我個人理解是
開發效率 = 新增代碼的效率 + 修改代碼的效率 + 維護代碼的效率
那麼如何提高前端開發效率便可以按照前端工程化的理念來進行劃分。下面我就介紹下7個提高前端開發效率的方法。
1.切圖
切圖是一個前端最基礎的技能，一般我們使用Photoshop或者FireWorks基本都能搞定設計師交付給我們的設計圖，但是要提高切圖效率的話就得使用一些訣竅了，比如利用PS里的動作來實現「一鍵切圖」功能，這里除了切圖外還介紹了其他的實用方法和工具。
2.編碼
對於編寫代碼部分我們首先要找到一款合適自己的IDE工具，建議不要使用Notepad++或者Dreamweaver，這些工具已經不符合前端潮流了，無法讓自己優雅地敲代碼。這里我主要推薦Sublime Text、Atom或者Webstrom，因為它們除了人性化的界面和支持大多數語法的高亮外，還可以安裝各種各樣的插件來拓展你的IDE工具，下面我主要介紹幾款Sublime Text提高開發效率的插件：
其中Element是用於快速編寫html/CSS的，比如輸入 ul>li 後按下tab鍵便可以生成一個ul標簽裡麵包含一個li標簽
JSFormat用於格式化JS；CSScomb用於對樣式屬性進行一鍵排序；HTML-CSS-JS Prettify可以一鍵規范我們的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用於調用本地調色板功能。這些工具都非常實用，一定程度上可以提高我們的編碼效率。
3.自動化
說到提高開發效率，這里不得不提一些前端的自動化工具，畢竟前端自動化是目前及未來的趨勢，能夠很大程度上縮減前端不必要的工作量，使我們能夠專注前端本身。
這里我們可以使用NPM來管理我們的項目包文件；利用webpack來打包壓縮我們的代碼；利用Node.js來實現構建本地伺服器；利用Karma、Jasmine來測試我們的前端代碼。
用好前端自動化工具可以幫助我們處理很多瑣碎的事情，比如一鍵壓縮代碼、圖片，一鍵合並JS，檢測文件更新等。
4.模塊化
隨著web2.0時代的到來，Ajax技術得到廣泛應用，前端代碼日益膨脹，而前端模塊化能夠方便我們對項目代碼的維護，進行按需載入，從長遠角度來看對我們提高項目的開發效率同樣大有益處。
在ES6出來之前應該說前端代碼本身不具備實現模塊的功能，我們必須要使用一些模塊化載入器來實現，比如RequireJS、SeaJs等。而隨著ES6的普及，目前像RequireJS、SeaJs這樣的工具已經沒有存在的必要了。所以在基於ES6的開發環境下我建議使用ES6的模塊化功能來實現我們的前端模塊化。
5.組件化
前端組件化的概念也是由來已久，我們可以通過將我們的代碼劃分成不同組件來實現功能公用，一個同樣的功能我們可能不用再次編寫相同的代碼，同時也可以提高前端代碼的可維護性和清晰度。以下是目前流行的前端框架Vue的單文件組件的概念圖：
我們可以將公用的組件抽離，將大組件拆分成小組件的形式實現前端組件化，組件與組件之間可以存在父子關系，也可以存在兄弟關系。在Vue的單文件組件中，一個組件包含了其HTML、CSS、JS的代碼片段。
6.前後端分離
前後端分離的項目對提升前端開發效率非常有幫助，因為前端不再需要後台配置路由、搭建伺服器環境、編寫模板等，這樣一來前端的生產力就會得到很大程度的解放，但是前後端分離的項目有利也有弊，如下圖所示：
最終我們需要根據項目需求衡量利弊來決定是否使用前後端分離的模式。
7.規范與模式
團隊協作離不開編碼規范和開發模式的幫助。遵循編碼規範文檔可以幫助我們在團隊開發時提高合作開發的效率。一個團隊遵循一套編碼規范可以使每個人的代碼寫出一個人的風格，這樣團隊間相互審查、測試、完善功能時會非常高效。下方是一些開源的前端編碼規範文檔：
網頁鏈接
首頁-TGuide
網頁鏈接
網頁鏈接
除了編碼規范我們在開發時經常會沿襲了一些已經存在的模式來解決問題，比如當用JS編寫彈框時我們往往會用到單例模式，用CSS編寫動畫時直接套用動畫的常用屬性等，我們不再需要從頭開始思考某一個功能的實現，這就是模式帶來的意義。
結語
當然除了以上7點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。只有將前端無序、繁雜的操作組織起來，利用工具簡化、規范前端流程，才能實現項目構建、開發、維護的一體化。希望本文能夠給初識前端的同學帶來啟發並付諸實踐。
㈣ 前端怎麼進行組件化的開發，以及如何解決組件之間依賴
可以用webpack，目前最火的前端構建工具。只要載入loader，你想引用什麼模塊就引用什麼模塊。現在用的就是webpack+react，組件化太方便了。更多問題可以去php中文網問答社區提問
㈤ 電商前端架構設計
什麼是前端架構
說到架構，很容易拉出一系列的概念知識點，像系統架構、軟體架構、框架等等，這些不是今天探討的重點，大家可以下去網路來理解。架構的本質是什麼？其實也是一種管理。通常我們所說的管理，都是指對於任務和人員的管理，而架構管的是機器和代碼。比如說，機器的部署屬於運維的物理架構，SOA屬於服務架構，那麼，前端的架構指什麼呢？
長期以來，前端所處的位置是比較偏應用層，很薄的一層，而架構又要求深度和廣度，所以之前在前端裡面做架構，好比在小水塘里游泳，稍微撲騰兩下就到處碰壁。但最近這幾年來，隨著一些列新的技術和概念的出現，前端的范圍被大大拓展了，所以這一層逐漸變得大有可為。
單純從語言的角度來說，html、js、css是最簡單最容易上手的開發語言，不考慮模塊化、工具、壓縮優化，任何人都可以快速上手，完成一兩個功能簡單的頁面。在規模很小的項目中，前端技術要素彼此不會直接產生影響，因此無需架構相關的思考。由於前端語言這種靈活鬆散的特點，使得前端項目規模在達到一定規模後，工程問題凸顯，成為發展瓶頸，原來孤立的技術要素開始彼此產生影響，各種技術要素彼此之間開始出現關聯，要用模塊化開發，就必須對應某個模塊化框架，用這個框架就必須對應某個構建工具，要用這個工具，就必須對應某個包管理工具……這個時候，需要有人從比較高的角度去梳理、尋找適合自己團隊的集成解決方案。而這一系列解決問題的工具和手段就是所謂的前端架構。
架構不等於框架這一點很好理解，相信大家都能夠很深入的說明這里的差別，框架是架構的重要組成部分，架構決定框架的選型，框架決定架構的技術路線。架構圍繞框架進行一系列的流程工具建設，從而形成完善自動的開發體系。
+框架不等於類庫，這里就是很多人困惑的點，你用的什麼框架？jquery、underscore、linq、seajs、requirejs等等，每個人都能夠列舉一大堆。但這個是不準確的，一套編碼框架是有一系列的元素組成：開發模式，我們如何來實現代碼的職責分離。以前整個前端是mvc中v這一層，而現在前端內部也進行了mvc的邏輯細分，Javascript的MVC框架現在很多，有的強化m、有的強化c。每一個框架其實都有其特點的，並且有越來越多的創新改造，比如現在最流行的是mvvm。有angular、react等等。我們是為了引入mvvc才把他們納入到我們的開發體系，而不是因為他是一個好用的類庫。
通訊，模塊化、組件化是前端在推進開發模式過程中的一個過程產物，為了有效的進行組件隔離和獨立，現在有各種各樣的通信模型出來，不過由於實現簡單，代碼少，他往往是合入到某個類庫裡面，但本質也是一個類庫。比較成熟的比如：消息匯流排、事件模擬、緩存中轉、flux模型等等。
模板，我們用什麼樣的方式來集中的處理數據往html的轉換過程，這里就不用多展開，這種類庫現在太多了，光我們公司就有很多套，大家在代碼行、緩存管理、預編譯、運算性能、強大的語法等等各個維度不段追求各種極致。
基礎類庫最後才是傳統類庫，相信現在已經沒有同學會在項目中去約束團隊中的dom操作、常用函數、方法、非同步化等等各種很基礎東西，這個時候我們一般就是引入jq、zepto、underscor這些封裝好的東西就行了。核心就是為了改善編碼生產力。
對於框架的選型要從兩面看，一是看該框架的本領，二是看你們團隊的能耐。從經驗上給幾個點建議：
這里也可以順便展開聊一下現在前端產品的形態分類：
從這些分類裡面，我們這些年派生出了所謂全端和全棧的概念。但本質上怎麼走還是要由所在產品的形態來決定。
內容型Web站點 側重渲染方面的優化，前端邏輯比重小
操作型B/S系統 以數據和邏輯為中心，界面較規整
hybrid內置型，要處理緩存和一些本地介面，包括PC客戶端和移動端。現在的本地應用，基於很多考慮，都變成了混合應用，也就是說，開發這個應用的技術，既包含原生的代碼，也包含了嵌入的HTML5代碼
Web游戲，前端的邏輯非常重，在代碼結構上要求非常高的可管理性和更復雜的設計模式。
桌面應用型，現在有一些PC端的混合應用開發技術，比如node-webkit和hex，前者的典型應用是XDK，後者的典型應用是有道詞典，此外，豌豆莢的PC客戶端也是採用類似技術的，也有一些產品是用的qt-webkit。這類技術可以方便做跨平台，極大減少開發工作量。
大工程應該盡量避開谷歌產品，他的很多技術開源項目都是玩票性質的，GWT、Closure、Darty就是前車之鑒。曾今提出過很多的新技術，到現在還是獨家的，變出太大。包括現在angular，喜歡做斷崖式升級，做做運營後台系統問題不大，如果是線上系統的話，每次升級就是一次人月神話中的典型焦油坑。
關注應用場景，像剛才說到的boss後台是一種；另外我的平台是否有沉重的歷史包袱，需要兼容ie6，還是可以輕裝上陣；產品對於seo是什麼樣的態度？是否需要考慮自適應？或者我的團隊足夠大，能夠各搞一套？；產品特徵是強內容還是強交互或者是游戲性。這些都是選擇不同框架的主要出發點。
沒有最好，只有最適合自己的，基本上，針對每個平台，我們都可以列出一些主流框架，但不意味著你們都能駕馭得住。小馬過馬，老牛沒過膝，松鼠淹個半死，就是這么回事。但無論我們選擇什麼框架或決定自己動手造輪子，都勿忘初心，技術必須讓我們工作生活更為輕松愉快——我們只選擇我們能駕馭住的框架，我們不能保證它在一年後是否會過時落後。
而且按照我個人這么多年的經驗來看，任何框架都會過時，往往不是因為他不夠好，而是因為一定有更好的出來。我們再選擇一個框架或者一個類庫的時候就要想好，未來我如何拋棄他。至少不能成為我們引入新的框架的絆腳石。現實的工作中很多的團隊往往會陷入到年復一年的用今年的新框架去重構去年老框架代碼的歷史循環中去。對於引入框架如何盡量延長他的生命力，我個人的意見是選擇框架時去追求概念，而不是潮流，當我的架構可以接受新的設計概念的時候才去考慮引入新的框架。用設計理念的選擇代替框架的選擇。之所以這么說是因為我觀察到我們部門的後端架構的開發理念跟我進公司的時候是差不多的。更多你可以參考成都網站建設
架構的組成
組件框架
㈥ 什麼是"前端工程化"
前端工程化是指使用軟體工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規范化、標准化。其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重復工作時間。
前端工程化是前端架構中重要的一環，主要就是為了解決上述大部分問題的。而前端工程本質上是軟體工程的一種，因此我們應該從軟體工程的角度來研究前端工程。
前端工程化有四個特點：模塊化、組件化、自動化、規范化。
1、模塊化：
就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和載入。只有這樣，才有多人協助的可能。在工程化之前，一直是使用js、jquery、ajax，這沒有模塊概念，對於開發大型且復雜的系統會有一定的限制。
2、組件化：
組件化≠模塊化。模板化只是在文件層面上，對代碼和資源的拆分；組件化是在設計層面上，對於UI的拆分。目前市場上的組件化框架最多，主要的有Vue，React，Angular2。
3、自動化：
「簡單重復的工作交給機器來做」，自動化也就是有很多自動化工具代替我們來完成，例如持續集成、自動化構建、自動化部署、自動化測試等等。
4、規范化：（至關重要的一環）
在項目規劃初期制定的好壞對於後期的開發有一定影響。包括的規范有：
目錄結構的制定、編碼規范、前後端介面規范、文檔規范、組件管理、Git分支管理、Commit描述規范、定期codeReview、視覺圖標規范。
(6)什麼是前端組件化擴展閱讀：
為什麼需要前端工程化：
前端越來越復雜，設計的問題和環節也越來越多，不採用工程化管理，就無法很好的實現團隊協同和降低復雜性。 原因如下：
1、前端范疇不斷擴大
早期的前端只需要適配桌面瀏覽器，而現在的前端，需要適配不同類型和尺寸的設備，包括移動端網頁，app應用等。
2、前後端分離
早期的前端只是後端 MVC 框架的一層模塊， 而現在的前端普遍是從後端介面獲取數據，編寫處理邏輯，各種前端mvc前端框架也層出不窮。
3、模塊化開發的出現
現在的前端開發不再是從零寫起，重復造輪子，而是會引用大量內部和外部的組件和模塊，這也導致前端必須進行模塊管理。
4、轉碼器的盛行
為了提高效率，前端工程往往不會直接寫html,css,和js代碼，而是改用其他格式書寫，再用工具編譯為目標格式。
比如用Jade 寫HTML，用less、sass、stylus 編寫CSS,用ES6、Typescript編寫JavaScript。
5、開發流程和團隊
早期的前端團隊往往只有幾個人，而現在的前端團隊可以擴展到幾十人，甚至上百人。每個人只負責自己的一塊內容。所以，如何協調多人多團隊的工作，保證溝通順暢，保證許可權管理，越來越成為一大問題。
前端工程化的具體內容：
1、代碼規范: 保證團隊所有成員以同樣的規范開發代碼。
2、分支管理: 不同的開發人員開發不同的功能或組件，按照統一的流程合並到主幹。
3、模塊管理: 一方面，團隊引用的模塊應該是規范的;另一方面，必須保證這些模塊可以正確的加入到最終編譯好的包文件中。
4、自動化測試：為了保證和並進主幹的代碼達到質量標准，必須有測試，而且測試應該是自動化的，可以回歸的；
5、構建：主幹更新以後，自動將代碼編譯為最終的目標格式，並且准備好各種靜態資源；
6、部署：將構建好的代碼部署到生產環境。
㈦ 前端如何提升開發效率
來具體聊一聊提高前端工程師開發效率的那些方法！
當然除了以上5點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。
㈧ react vue選哪一個
個人推薦選擇vue
先給你上一個二者對比;
1、Vue上手更簡單，特別是從dom和jquery時代過來的程序員，或者習慣模板語言的後端開發，更容易接受Vue。
2、Vue從設計上講，跟趨向於簡化使用，就是說Vue從骨子裡面就是想用起來簡單，但React更多的是為大型工程考慮。
3、React上手稍微難一點，除了Vue那些基礎，你還得學習，純函數組件，函數式編程，JSX，css-in-js，高階組件，Rex等。
4、在組件化上，React更純粹，也可以說更強大一些，而Vue不是完全組件化，應對一些復雜組件，可能會有些麻煩。
5、React的設計，配合TypeScript，更適合大型或者超大型的多人協作項目，管理起來更規范，不容易出錯。
6、對於移動端跨平台的支持，React的兄弟項目ReactNative已經佔了半壁江山，雖然React和ReactNative可以看成兩個東西，但是也有很多關聯性。而Vue在移動端開發上，目前來看，有阿里的Weex基於Vue，據說也很強大，但是肯定不如ReactNative那麼主流和穩定，具體Vue在移動端的表現如何，需要時間觀察。
7、雖然Vue在中國、日本、韓國、法國等地區熱度很高，在美國也有一定影響力，但在全世界范圍看，React的社區比Vue要更大，資源也更豐富，React的背景Facebook，實力強於個人開發者-尤雨溪(背靠了阿里和一些小贊助公司)。但實力是相對的，實際上，兩者實力都很強，不用擔心Vue的實力不足或穩定性，Vue足夠優秀，3、5年內應該都會是主流，只能說React在全世界范圍內的資源更多，影響更大而已。
8、Vue和React本身只是一個基礎庫，對於稍微復雜一點的項目來說，大多數用戶都不會自己搭框架。所以說，選擇Vue還是React，要重點比較兩者的第三方開發框架、UI框架、組件庫及各種資源是否豐富、有活力。
9、就我目前看到的情況而言，Vue體系較熱的UI框架有ElementUI、iView/ViewUI、Ant Design Vue、vant、mint-ui、vux等，Vue Admin（後台管理系統）相關資源比較豐富，很多中小公司都在用；React熱門UI框架有Material-UI、Ant Design、Element-react等，比較集中。可以這樣說，Vue的生態就像是游擊隊，而React更像是正規軍。ElementUI和Ant Design都是阿里系的，如果沒有Ant Design的話，感覺Vue在國內要強盛一些，但有了阿里Ant Design強勢介入，許多中間派就倒向React了，特別是一些稍微大一點的公司。
10、其他因素：Vue的核心開發團隊只有尤雨溪一人（大概90%的代碼都是他寫的），假如他休假了、生病了，主要開發就暫停了，Vue想要健康的發展，應該要增加1~2個核心開發（每個人都深度參與開發，並可以推動開源生態發展）。
11、其他因素：React從一開始就抱上了TypeScript的大腿，而Vue目前仍以ES為主，不得不說，在很長一段時間內，TS都是優於ES的，而Vue社區要切換TS生態，還有一段路要走。這註定了大公司、大項目選React+TS的概率要大一些。中小公司多少也會受到大公司的影響。
總結：
1、如果只是做項目，兩者都很好，都是主流，都能極大的增強前端開發能力，選任何一個都沒有錯（做選擇時，可考慮其他一些因素，比如自身能力、第三方組件）。
2、如果想抱大腿、跳槽大公司，建議選React + TypeScript練手。
3、5年以後的長遠考慮？這兩個的生命力，足以支撐5年，但你要說5年之後，它們是否還是主流，這個真不好說。現在前端技術發展太快。
4、作為一個專業前端，建議前期學Vue，後期再學React；反之，如果之前直接學的React，則一般不需要再去學Vue了，做項目，選一個就行了。
希望看完我的觀點後，能對你有些幫助！
㈨ 模塊化和組件化的區別
組件和模塊的定位不同。組件一般用於前端,模塊化在後台運用的比較多。例如vue中的組件,主要是為了拆分vue實例的代碼量,讓我們可以以不同的組件來劃分不同的功能模塊,將來我們需要什麼樣的功能,就直接調用對應的組件即可。
㈩ 前端vue是什麼
Vue.js 是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js；同時比起 React + Rex 相對復雜的架構，Vue.js 更加輕量級也更加容易上手，是初創項目的首選前端框架。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
今天帶領大家來了解一款漸進式JavaScript框架——Vue。
近年來，前端開發領域，舊瀏覽器逐漸淘汰，移動端開發需求逐年增加，前端交互越來越多，功能越來越復雜。架構從傳統後台MVC向REST API + 前端MV* 遷移。
MV*相當於MVC即：
Model（模型）表示應用程序核心（比如資料庫記錄列表）。
View（視圖）顯示前端的學習都是需要不斷的學習，學一天停一停相當於白學，學習效果很差，如果你想有人一起學習可以來這個扣裙，首先是132 中間是667最後是127 都是零基礎的同學，大家相互鼓勵 共同努力 只是學著玩就不建議來了!!!數據（資料庫記錄）。
Controller（控制器）處理輸入（寫入資料庫記錄）。
MVP
Model（模型）表示應用程序核心（比如資料庫記錄列表）。
View（視圖）顯示數據（資料庫記錄）。
Presenter（表示器）負責邏輯處理業務。
與MVC差別在於：
1、View與Model完全隔離。
2、Presenter與View的具體實現技術無關。
3、可以進行View的模擬測試。
MVVM（Vue就是一種MVVM框架）
Model（模型）表示應用程序核心（比如資料庫記錄列表）。
View（視圖）顯示數據（資料庫記錄）。
ViewModel（觀察者）負責把Model的數據同步到View顯示出來，還負責把View的修改同步回Model。
優點：高內聚，低耦合（可重用性、可移植性）。
Vue是一款數據驅動+組件化的前端開發框架，對比於Angular和React，Vue.js更輕量，gzip後大小隻有26K （Angular 56K,React 44K），同時更易上手，學習曲線平穩，吸收兩家之長，借鑒了angular的指令和react的組件化。