A. 什麼叫組件化開發
張克軍 提出的「組件化就是函數式界面開發」這一說法我是難以接受的，函數式界面開發就讓它好好地叫「函數式組件化」吧，不然我們會在所謂的「傳統UI框架」和「函數式界面開發」之間出現一個Gap，豈不是又要造個詞給填上，多累……
我前面說會有一個Gap，這個Gap很可能就是我們現在想用「組件化」這個定義去表達的一些點，我想在此做一些個人的見解
我將之理解為以下幾要素：
組件是對邏輯的封裝，不限於圖形元素。即我們可以把if做成組件、把一個倒計時做成組件、把一段動畫做成組件、把路由做成組件、把數據架構做成組件，而這些並不能稱為控制項
組件具備單個可移植性，即「隨載入隨用」，不需要為其准備復雜的基礎條件（如引入樣式、引入框架等）。然而這一點現有那些所謂組件庫做得並不好，技術上也不大現實
組件是聲明式定義的，而非命令式。這個不想多說，很大程度上是自己主觀的一個想法
而上面最重要的就是第一點，所以要問我什麼是「組件化開發」，我的說法是：
把圖形、非圖形的各種邏輯均抽象為一個統一的概念（組件）來實現開發的模式
這與傳統開發框架的最大區別就是統一了圖形元素與非圖形元素，除此之外我再想不出其它真正體現區別的點了
在這個概念下，包括router、ajax、mole loader、timer、animation、interval等，都是組件，共享統一的生命周期管理和對外介面，且都是聲明式地進行組合
我的一位同事告訴我去年的深JS上，有位淘寶的朋友的話題叫做「前端組件服務化」，這裡面提的那些個概念，是很符合我對「組件化」的認識的，他要是不給再強安個「服務化」的噱頭就好了- -
不過話說回來，在這個要求之下，組件其實不是那麼好進行抽象設計的，隨便說幾個例子，有難的也有簡單的：
非圖形元素的各種需求如何統一介面，如timer和ajax
組件可以橫向組件，但是縱向復用如何解決，如希望任何圖形元素都可以實現被滑鼠拖拽的效果，則滑鼠拖拽應該也是個組件，這個組件與其它組件的關系是什麼
有些組件對其可被組合的組件是有要求的，比如HTML里就不大好意思把一個<p>放進一個<span>里，這一點如何在組件上表達（實現不難，表達比較難）
一些我們原本想當然認為純的小函數的東西，是不是也能當組件玩，比如underscore.pick要不要也是個組件
B. 前端開發需要學什麼啊
前端開發需要學習的內容包括PC網站布局、HTML5＋CSS3基礎項目、webapp頁面布局等。
學習web前端開發，web開發工具有frontpage，可以使用word讓人輕松學習frontpage，另一個常見的是Dreamweaver，這兩個是最常用的HTML網頁製作工具。
HTML、CSS和JavaScript、Html是內容，CSS是性能，JavaScript是行為，與伺服器端語言的學習曲線相比，前端開發的學習曲線先快後慢。
Html最基本，先學習網頁的布局，然後CSS用於美化HTML頁面，並為頁面提供布局和格式，最後，學習JavaScript。
(2)前端組建化開發實例擴展閱讀：
主要職能：
1、熟練使用DIV+CSS並結合JS負責產品的前端開發和頁面製作；
2、熟悉W3C標准和各主流瀏覽器在前端開發中的差異，能運用DIV+CSS解決瀏覽器的兼容性；
3、負責相關產品的需求以及前端程序的實現，提供合理的前端架構；
4、與產品、後台開發人員保持良好溝通，能快速理解、消化各方需求，並落實為具體的開發工作；
5、了解伺服器端的相關工作，在交互體驗、產品設計等方面有自己的見解。
參考資料來源：網路-前端開發
C. 既然html都是由後端動態生成，為什麼前端還要強調組件化開發
誰告訴你html都是後端動態生成的
後端開發還得基於前端來做
組件化開發可以減少頁面開發成本 提高頁面的可維護性和拓展性
D. 前端怎麼進行組件化的開發，以及如何解決組件之間依賴
可以用webpack，目前最火的前端構建工具。只要載入loader，你想引用什麼模塊就引用什麼模塊。現在用的就是webpack+react，組件化太方便了。更多問題可以去php中文網問答社區提問
E. 在前端中什麼是組件化 什麼是模塊化
模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如 ，一個頁面 分好多個功能， 這時候你要是都寫在一個js 中 會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，後期別人拉手，或你接手別人的項目， 這時候來個需求讓你把分頁去掉，或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的，
組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用 ，不需要再單獨開發的
F. 如何實現項目的模塊化（組件化）開發，最近的做這個
，產品形態五花八門，涉獵極廣，什麼高大上的基礎庫/框架，拽炫酷的宣傳頁面，還有屌炸天的小游戲……不過這些一兩個文件的小項目並非是前端技術的主要應用場景，更具商業價值的則是復雜的Web應用，它們功能完善，界面繁多，為用戶提供了完整的產品體驗，可能是新聞聚合網站，可能是在線購物平台，可能是社交網路，可能是金融信貸應用，可能是音樂互動社區，也可能是視頻上傳與分享平台……
G. web前端開發需要掌握的幾個必備技術
Web前端開發需要掌握的幾個必備技術是：
HTML +_CSS核心、JavaScript、VUE框架
前端的應用非常廣泛，基本網站、APP、HTML5小程序等都需要前端開發，所以只要是互聯網產品基本都需要前端。
前端程序猿切頁面寫頁面，Web上、H5上的炫酷效果，是前端開發大展身手的地方。最常見的用於前端開發的技術組合是：
HTML+CSS+JavaScript。
web前端是在開發人員中最直接面向產品、面向用戶的設計人員，一個開發團隊的成果是要靠web前端去展現，因為用戶不會去關心後台的處理有多麼強大。
後端開發是寫後台，各種業務邏輯、數據處理、模塊介面、客戶端介面等等。後端開發者通常精通於一種Web編程語言和一個資料庫管理系統。電商平台點擊篩選條件下面為你篩選出來的寶貝的功能以及付款人數數據的變化等都是由後台來實現提供的。
目前web產品交互越來越復雜，用戶使用體驗和網站前端性能優化這些都得靠web前端去做。
前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
前端開發需要學習的技術
1 掌握基本web前端開發技術：HTML、CSS、JavaScript、DOM、BOM、AJAX等，而且要了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug
2 必須掌握網站性能優化、SEO和伺服器端開發技術的基礎知識
3 必須學會運用各種web前端開發與測試工具進行輔助開發
4 除了掌握技術層面的知識，還要掌握理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等
5 未來web前端開發工程師還要研究HTML5、web視覺設計、網站配色、網站交互設計模式等相關技術
web前端有廣闊的發展空間，app、小程序、移動端、pc端等都網站是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
H. 前端如何提升開發效率
來具體聊一聊提高前端工程師開發效率的那些方法！
當然除了以上5點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。
I. 如何通過 Vue+Webpack 來做通用的前端組件化架構設計
angular:
我覺得angularjs的學習上手周期比較長，可能遇到問題，都無法立刻解決，而且編碼的質量明顯的很差，如果團隊沒有制定規范，那寫出來的代碼就沒法看。對於一個選用angularjs的團隊來說，我認為編碼規范是很重要的，否則對編碼能力是沒有提升的。
avalon:
avalonjs文檔資料沒有那麼全，我感覺一些開源支持的力量不夠多。不過，如果有項目需求，需要去做IE瀏覽器的支持話，我建議選擇avalonjs
vue：
vuejs 文檔比較齊全，vue吸取了angularjs
的一些優點，規避了一些缺點，至少編碼規范上有了一個質的飛躍，學習上手的周期比較短。vue起初只是一個輕量級的類庫，用來做類似於react的事情，
同時vue也是可以拿來做前端架構設計的，比如：vueify + vue-router （spa框架）。
vue學習地址：http://cn.vuejs.org/
以上說了那麼多沒用的，下面就來點幹活了！
我的前端組件化架構設計，目錄如下：
項目架構用到的知識點，還是挺多的，知識清單如下：
［1］: gulp + webpack 構建打包工具， 使用了一系列的loader，比如：vue-loader, sass-loader, babel-loader , 以及 postcss，postcss-custom-properties，等等
[2] : postcss-custom-properties : 用來做樣式全局化, 只需要通過變數去維護，通過編譯變數既可以換膚。
[3] : vue-loader （vue文件組件化）:用來去編譯處理 *.vue 的文件，一個vue 文件就是一個單獨的組件，vue組件開發具有高獨立且易維護。組件的劃分可大可小，一個頁面也可以看作成由多個vue 組件構成的，一個頁面也可以是一個vue組件, vue 文件結構如下：
[4] ： babel-loader ：實現對vue文件中 es6 語法的編譯解析
[5] ： vue-router ：用來做路由分發，而且文檔非常的齊全（學習地址:http://vuejs.github.io/vue-router/zh-cn/index.html）。
[6] ： vue （插件式方式）：vue本身提供了一個install 方式用來注入，我們可以注入一些全局的(屬性、方法、以及通用的ui組件)。
下面說說文件夾的含義：
common 文件夾: 是用來存一些通用的東西，比如樣式，以及全局的js等等
components 文件夾：用來放獨立的組件，我打算後期做細分，ui 組件，以及page 組件等等，這裡面就是團隊的心血，以後就能做成獨立的組件庫了。
filters 文件夾：用來放通用的過濾器操作。
plugins 文件夾：用來放 Vue.use 注入到Vue全局的插件庫，比如：請求載入、彈框、分頁、ui組件 等等。plugins 只是把 componets 組件暴露給 Vue全局。
views 文件夾: 用來存放頁面模塊
app.vue 文件：第一次啟動的主程序模塊
app.js 文件：啟動前的載入，注入，實例化
router.config.js 文件：路由模塊
目前該架構在前後台的SPA架構都適用，可能還是有很多不完善，不過我還很年輕，vue也還狠年輕，望各位道友多給我們年輕人一些機會。
J. 如何在不使用前端框架的情況下嘗試組件化開發
一個組件包括三個內容！
組件的結構（html）、組件的表現（css）、組件的行為（javascript）；
在你引入其中一個的時候，順帶將其他部分引入就可以了，
不過還有一個問題，就是作用於，css和js如果不限定作用於的話，會影響到其他組件，這些在很多blog裡面有說明的，詳細請 https://segmentfault.com 等網站查找吧