⑴ 什麼是"前端工程化"
前端工程化是指使用軟體工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規范化、標准化。其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重復工作時間。
前端工程化是前端架構中重要的一環，主要就是為了解決上述大部分問題的。而前端工程本質上是軟體工程的一種，因此我們應該從軟體工程的角度來研究前端工程。
前端工程化有四個特點：模塊化、組件化、自動化、規范化。
1、模塊化：
就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和載入。只有這樣，才有多人協助的可能。在工程化之前，一直是使用js、jquery、ajax，這沒有模塊概念，對於開發大型且復雜的系統會有一定的限制。
2、組件化：
組件化≠模塊化。模板化只是在文件層面上，對代碼和資源的拆分；組件化是在設計層面上，對於UI的拆分。目前市場上的組件化框架最多，主要的有Vue，React，Angular2。
3、自動化：
「簡單重復的工作交給機器來做」，自動化也就是有很多自動化工具代替我們來完成，例如持續集成、自動化構建、自動化部署、自動化測試等等。
4、規范化：（至關重要的一環）
在項目規劃初期制定的好壞對於後期的開發有一定影響。包括的規范有：
目錄結構的制定、編碼規范、前後端介面規范、文檔規范、組件管理、Git分支管理、Commit描述規范、定期codeReview、視覺圖標規范。
(1)前端組件化開發是什麼擴展閱讀：
為什麼需要前端工程化：
前端越來越復雜，設計的問題和環節也越來越多，不採用工程化管理，就無法很好的實現團隊協同和降低復雜性。 原因如下：
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、部署：將構建好的代碼部署到生產環境。
⑵ Web前端學習新手的常見疑問匯總
今天小編要跟大家分享的文章是關於Web前端學習新手的常見疑問匯總。正在學習web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對小夥伴們有所幫助。
1、Vue.js是什麼?
漸進式框架
自底向上增量開發的設計
易學習
易整合
Vue.js(讀音/vju_/,類似於view)是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue
採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue完全有能力驅動採用單文件組件和
Vue生態系統支持的庫開發的復雜單頁應用。
2、vue.js到底適合做哪種類型的界面?
a、表單項繁多
b、內容需要根據用戶的操作進行修改
Vue.js就是一個用於搭建類似於網頁版知乎這種表單項繁多，且內容需要根據用戶的操作進行修改的網頁版應用。
3、單頁應用程序(SPA)是什麼?
一個頁面就是應用(子應用)
顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用。單頁應用程序中一般交互處理非常多，而且頁面中的內容需要根據用戶的操作動態變化。
4、前面說的網頁版知乎我也可以用JQuery寫啊，為什麼要用Vue.js呢?
a、產品是絕對需要反復修改的
b、修改可能會導致DOM的關聯與嵌套層次要發生改變從而使jquery結構相關代碼變的異常復雜
c、vue.js可以解決這個問題
你是否還記得你當初寫JQuery的時候，有寫過('#xxx').parent().parent().parent()這種代碼呢?當你第一次寫的時候，你覺得頁面元素不多，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在注釋裡面寫清楚這個元素的爸爸的爸爸的爸爸不就好了。但是萬一過幾天之後你的項目組長或者你的產品經理突然對你做的網頁提出修改要求，這個修改要求將會影響頁面的結構，也就是DOM的關聯與嵌套層次要發生改變，那麼(『#xxx』).parent().parent().parent()可能就會變成$(『#xxx』).parent().parent().parent().parent().parent()了。
這還不算什麼，等以後產品迭代越來越快，修改越來越多，而且頁面中類似的關聯和嵌套DOM元素不止一個，那麼修改起來將非常費勁。而且JQuery選擇器查找頁面元素以及DOM操作本身也是有性能損失的，可能到時候打開這個頁面，會變得越來越卡，而你卻無從下手。
這個時候如果你學過Vue.js，那麼這些抱怨將不復存在。
5、前端裡面常說的視圖層是什麼?
我們把HTML中的DOM就可以與其他的部分獨立開來劃分出一個層次，這個層次就叫做視圖層。
Vue的核心庫只關注視圖層
6、使用jquery開發完整頁面的流程?
a、html寫構架
b、css裝飾
c、js交互
講到JQuery，就不得不說到JavaScript的DOM操作了。如果你用JQuery來開發一個知乎，那麼你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結構了。
現在我們把一個網頁應用抽象一下，那麼HTML中的DOM其實就是視圖，一個網頁就是通過DOM的組合與嵌套，形成了最基本的視圖結構，再通過CSS的修飾，在基本的視圖結構上「化妝」讓他們看起來更加美觀。最後涉及到交互部分，就需要用到JavaScript來接受用戶的交互請求，並且通過事件機制來響應用戶的交互操作，並且在事件的處理函數中進行各種數據的修改，比如說修改某個DOM中的innerHTML或者innerText部分。
7、Vue.js為什麼能讓基於網頁的前端應用程序開發起來這么方便?
a、有聲明式
b、響應式的數據綁定
c、組件化的開發
d、VirtualDOM
因為Vue.js有聲明式，響應式的數據綁定，與組件化的開發，並且還使用了VirtualDOM這個看名字就覺得高大上的技術。
8、vue.js中常說的數據動態綁定是什麼?
就是vue.js會自動響應數據的變化情況，並且根據用戶在代碼中預先寫好的綁定關系，對所有綁定在一起的數據和視圖內容都進行修改。而這種綁定關系，在圖上是以input
標簽的v-model屬性來聲明的，因此你在別的地方可能也會看到有人粗略的稱vue.js為聲明式渲染的模版引擎。
9、前端中為什麼要組件化開發?
a、非組件化開發代碼和工作量都非常大
b、修改起來生不如死
但是現在我們做單頁應用，頁面交互和結構十分復雜，一個頁面上就有許許多多的模塊需要編寫，而且往往一個模塊的代碼量和工作量就非常龐大，如果還按照原先的方法來開發，那麼會累死人。而且遇到以後的產品需求變更，修改起來也非常麻煩，生怕動了其中一個div之後，其他div跟著雪崩，整個頁面全部亂套，或者由於JavaScript的事件冒泡機制，導致修改一些內層的DOM事件處理函數之後，出現各種莫名其妙的詭異BUG。
10、前端中如何進行組件化開發?
a、借用的後端的面向對象中的模塊化思想(把一些大功能拆分成許多函數，然後分配給不同的人來開發)
b、把一個單頁應用中的各種模塊拆分到一個一個單獨的組件(component)中，我們只要先在父級應用中寫好各種組件標簽(占坑)，並且在組件標簽中寫好要傳入組件的參數(就像給函數傳入參數一樣，這個參數叫做組件的屬性)，然後再分別寫好各種組件的實現(填坑)
在面向對象編程中，我們可以使用面向對象的思想將各種模塊打包成類或者把一個大的業務模塊拆分成更多更小的幾個類。在面向過程編程中，我們也可以把一些大功能拆分成許多函數，然後分配給不同的人來開發。
在前端應用，我們是否也可以像編程一樣把模塊封裝呢?這就引入了組件化開發的思想。
Vue.js通過組件，把一個單頁應用中的各種模塊拆分到一個一個單獨的組件(component)中，我們只要先在父級應用中寫好各種組件標簽(占坑)，並且在組件標簽中寫好要傳入組件的參數(就像給函數傳入參數一樣，這個參數叫做組件的屬性)，然後再分別寫好各種組件的實現(填坑)，然後整個應用就算做完了。
11、為什麼有VirtualDOM技術?
a、問題
現在的網速越來越快了，很多人家裡都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網頁才幾百K，而且瀏覽器本身還會緩存很多資源文件，那麼幾十M的光纖為什麼打開一個之前已經打開過，已經有緩存的頁面還是感覺很慢呢?
b、原因
(1)、瀏覽器本身處理DOM也是有性能瓶頸的
(2)、用JQuery或者原生的JavaScriptDOM操作函數對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹
這就是因為瀏覽器本身處理DOM也是有性能瓶頸的，尤其是在傳統開發中，用JQuery或者原生的JavaScript
DOM操作函數對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。
12、VirtualDOM如何實現?
a、預計算dom的各種操作，把最後一次的結果渲染出來(減少dom的渲染次數)
而Virtual
DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來並優化，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。
13、到底該怎麼用Vue.js做單頁應用開發?
其實可以直接看學習視頻開始干，應該是最好的
a、介紹-vue.js官方文檔的基礎部分硬著頭皮看一遍
我的建議是，先把介紹-
vue.js官方文檔的基礎部分硬著頭皮看一遍。除了組件這個小節涉及到了很多晦澀難懂的名詞以外，前面幾章完全就是把Vue.js當作一個模版引擎來用。
b、ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好對Node.js也要有所了解
然後開始學習ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好對Node.js也要有所了解。
c、看網上各種實戰視頻以及文章還有別人開源的源代碼
最後組件部分先大致看一遍，了解組件裡面都有哪些概念之後，開始看網上各種實戰視頻以及文章還有別人開源的源代碼。
14、ECMAScript是啥?
ECMAScript和JavaScript的關系是，前者是後者的規格，後者是前者的一種實現(另外的ECMAScript方言還有
Jscript和ActionScript)。日常場合，這兩個詞是可以互換的。
而ECMAScript6就是新一代的JavaScript語言。
15、Webpack是啥?
a、前端打包工具
Webpack是一個前端打包和構建工具。如果你之前一直是手寫HTML，CSS，JavaScript，並且通過link標簽將CSS引入你的HTML文件，以及通過Script標簽的src屬性引入外部的JS腳本，那麼你肯定會對這個工具感到陌生。不要緊，我們先來了解一下為什麼要用Webpack，然後帶著原因去學習就好了。
16、為什麼要用Webpack?
a、方便管理各種素材
b、打包以便減少瀏覽器的訪問次數
前面說了，做一個單頁應用程序本身就相當復雜，而且在做的時候肯定會使用到很多素材和別的第三方庫，我們該如何去管理這些東西呢?
還有前面講到了Webpack是一個前端打包工具，前端代碼為什麼要打包呢?因為單頁應用程序中用到很多素材，如果每一個素材都通過在HTML中以src屬性或者link來引入，那麼請求一個頁面的時候，可能瀏覽器就要發起十多次請求，往往請求的這些資源都是一些腳本代碼或者很小的圖片，這些資源本身才幾k，下載連1秒都不需要，但是由於HTTP是應用層協議，它的下層是TCP這個運輸層協議，TCP的握手和揮手過程消耗的時間可能比下載資源本身還要長，所以需要把這些小文件全部打包成一個文件，這樣只要一次TCP握手和揮手的過程，就把多個資源給下載下來了，並且多個資源由於都是共享一個HTTP請求，所以head等部分也是共享的，相當於形成了規模效應，讓網頁展現更快，用戶體驗更好。
17、NPM和Node.js又是什麼?它們是什麼關系?
a、Node.js是一個服務端的JavaScript運行環境
Node.js是一個服務端的JavaScript運行環境，通過Node.js可以實現用JavaScript寫獨立程序。
b、Node.js可以寫獨立程序(Webpack就是Node.js寫的)
像我們之前提到的Webpack就是Node.js寫的，所以作為一個前端開發，即使你不用Node.js寫獨立程序，也得配一個Node.js運行環境，畢竟很多前端工具都是使用它寫的。
c、NPM是一個node.js的包管理器(類似java的maven(包的依賴管理)，php也有一個類似的)。
NPM是一個node.js的包管理器。我們在傳統開發的時候，JQuery.js大多都是網路搜索，然後去官網下載，或者直接引入CDN資源，這種方法太過於麻煩。如果以後遇到其他的包，這個包的代碼本身可能還調用了其他的包(也稱這個包和其他的那幾個包存在依賴關系)，那麼我們要在自己的項目中引入一個包將變得十分困難。現在我們有了NPM這個包管理器，直接可以通過
npminstallxxx包名稱
的方式引入它，比如說
npminstallvue
18、Vue-CLi是啥?
它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好項目目錄，配置好Webpack，以及各種依賴包的工具，它可以通過
npminstallvue-cli-g
的方式安裝，後面的-g表示全局安裝的意思，意味著你可以打開命令行之後直接通過vue命令調用它。
19、Vuex和Vue-route是什麼(暫時了解即可)?
Vuex是vue的一個狀態管理器。用於集中管理一個單頁應用程序中的各種狀態。
Vue-route是vue的一個前端路由器，這個路由器不是我們上網用的路由器，而是一個管理請求入口和頁面映射關系的東西。它可以實現對頁面局部進行無刷新的替換，讓用戶感覺就像切換到了網頁一樣。
要講清楚這兩個東西，又得花費大量篇幅，所以這里只是簡單提一下，先學好vue.js本身才是最重要的。
以上就是小編今天為大家分享的關於Web前端學習新手的常見疑問匯總的文章，希望本篇文章能夠對正在學習web前端知識的小夥伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網，最後祝願小夥伴們學習成功，成為一名優秀的web前端工程師。
來源：原創小才君軟體編程網站開發
⑶ 在前端中什麼是組件化 什麼是模塊化
模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如 ，一個頁面 分好多個功能， 這時候你要是都寫在一個js 中 會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，後期別人拉手，或你接手別人的項目， 這時候來個需求讓你把分頁去掉，或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的，
組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用 ，不需要再單獨開發的
⑷ 常見的前端集成部署方案有哪些各自的優缺點是什麼
前端行業經歷了這么長時間的發展，技術元素非常豐富，這里列舉出一般web團隊需要用到的技術元素：
開發規范：包括開發、部署的目錄規范，編碼規范等。不要小瞧規范的威力，可以極大的提升開發效率，真正優秀的規范不會讓使用者感到約束，而是能幫助他們快速定位問題，提升效率。
模塊化開發：針對js、css，以功能或業務為單元組織代碼。js方面解決獨立作用域、依賴管理、api暴露、按需載入與執行、安全合並等問題，css方面解決依賴管理、組件內部樣式管理等問題。是提升前端開發效率的重要基礎。現在流行的模塊化框架有requirejs、seajs等。
組件化開發：在模塊化基礎上，以頁面小部件(component)為單位將頁面小部件的js、css、html代碼片段放在一起進行開發、維護，組件單元是資源獨立的，組件在系統內可復用。比如頭部(header)、尾部(footer)、搜索框(searchbar)、導航(menu)、對話框(dialog)等，甚至一些復雜的組件比如編輯器(editor)等。通常業務會針對組件化的js部分進行必要的封裝，解決一些常見的組件渲染、交互問題。
組件倉庫：有了組件化，我們希望將一些非常通用的組件放到一個公共的地方供團隊共享，方便新項目復用，這個時候我們就需要引入一個組件倉庫的東西，現在流行的組件庫有bower、component等。團隊發展到一定規模後，組件庫的需求會變得非常強烈。
性能優化：這里的性能優化是指能夠通過工程手段保證的性能優化點。由於其內容比較豐富，就不在這里展開了，感興趣的同學可以閱讀我的這兩篇文章 [1] [2]。性能優化是前端項目發展到一定階段必須經歷的過程。這部分我想強調的一點是性能優化一定是一個工程問題和統計問題，不能用工程手段保證的性能優化是不靠譜的，優化時只考慮一個頁面的首次載入，不考慮全局在宏觀統計上的優化提升也是片面的。
項目部署：部署按照現行業界的分工標准，雖然不是前端的工作范疇，但它對性能優化有直接的影響，包括靜態資源緩存、cdn、非覆蓋式發布等問題。合理的靜態資源資源部署可以為前端性能帶來較大的優化空間。
開發流程：完整的開發流程包括本地開發調試、視覺效果走查確認、前後端聯調、提測、上線等環節。對開發流程的改善可以大幅降低開發的時間成本，工作這些年見過很多獨立的系統（cms系統、靜態資源推送系統）將開發流程割裂開，對前端開發的效率有嚴重的阻礙。
開發工具：這里說的工具不是指IDE，而是工程工具，包括構建與優化工具、開發-調試-部署等流程工具，以及組件庫獲取、提交等相關工具，甚至運營、文檔、配置發布等平台工具。前端開發需要工具支持，這個問題的根本原因來自前端領域語言特性（未來我會單獨寫一篇文章介紹前端領域語言缺陷問題）。前端開發所使用的語言（js、css、html）以及前端工程資源的載入與定位策略決定了前端工程必須要工具支持。由於這些工具通常都是獨立的系統，要想把它們串聯起來，才有了yeoman這樣的封裝。前面提到的7項技術元素都直接或間接的對前端開發工具設計產生一定的影響，因此能否串聯其他技術要素，使得前端開發形成一個連貫可持續優化的開發體系，工具的設計至關重要。
⑸ 前端如何提升開發效率
來具體聊一聊提高前端工程師開發效率的那些方法！
當然除了以上5點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。希望以上幾點能夠給初識前端的同學帶來啟發並能夠親自實踐。
⑹ 模塊化和組件化的區別
組件和模塊的定位不同。組件一般用於前端,模塊化在後台運用的比較多。例如vue中的組件,主要是為了拆分vue實例的代碼量,讓我們可以以不同的組件來劃分不同的功能模塊,將來我們需要什麼樣的功能,就直接調用對應的組件即可。
⑺ 如何理解前端模塊化
前端模塊化
在JavaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹
這時候JavaScript作為嵌入式的腳本語言的定位動搖了，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（mole）了，JavaScript極其簡單的代碼組織規范不足以駕馭如此龐大規模的代碼
模塊
既然JavaScript不能handle如此大規模的代碼，我們可以借鑒一下其它語言是怎麼處理大規模程序設計的，在Java中有一個重要帶概念——package，邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的王國，不用擔心命名沖突什麼的，那麼外部如果使用呢？直接import對應的package即可
import java.util.ArrayList;
遺憾的是JavaScript在設計時定位原因，沒有提供類似的功能，開發者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼，我們稱為模塊化。
一個模塊就是實現特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什麼功能，就載入什麼模塊。模塊開發需要遵循一定的規范，各行其是就都亂套了
規范形成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到現在初具規模，簡單了解一下這段不凡的歷程
函數封裝
我們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函數的，所以把函數作為模塊化的第一步是很自然的事情，在一個文件裡面編寫幾個相關函數就是最開始的模塊了
function fn1(){
statement
}
function fn2(){
statement
}
這樣在需要的以後夾在函數所在文件，調用函數就可以了
這種做法的缺點很明顯：污染了全局變數，無法保證不與其他模塊發生變數名沖突，而且模塊成員之間沒什麼關系。
對象
為了解決上面問題，對象的寫法應運而生，可以把所有的模塊成員封裝在一個對象中
var myMole = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
這樣我們在希望調用模塊的時候引用對應文件，然後
myMole.fn2();
這樣避免了變數污染，只要保證模塊名唯一即可，同時同一模塊內的成員也有了關系
看似不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員
myModel.var1 = 100;
這樣就會產生意外的安全問題
立即執行函數
可以通過立即執行函數，來達到隱藏細節的目的
var myMole = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
這樣在模塊外部無法修改我們沒有暴露出來的變數、函數
上述做法就是我們模塊化的基礎，目前，通行的JavaScript模塊規范主要有兩種：CommonJS和AMD
CommonJS
我們先從CommonJS談起，因為在網頁端沒有模塊化編程只是頁面JavaScript邏輯復雜，但也可以工作下去，在伺服器端卻一定要有模塊，所以雖然JavaScript在web端發展這么多年，第一個流行的模塊化規范卻由伺服器端的JavaScript應用帶來，CommonJS規范是由NodeJS發揚光大，這標志著JavaScript模塊化編程正式登上舞台。
定義模塊
根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變數，無法被其他模塊讀取，除非定義為global對象的屬性
模塊輸出：
模塊只有一個出口，mole.exports對象，我們需要把模塊希望輸出的內容放入該對象
載入模塊：
載入模塊使用require方法，該方法讀取一個文件並執行，返迴文件內部的mole.exports對象
⑻ 前端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的組件化。
⑼ 什麼叫組件化開發
張克軍 提出的「組件化就是函數式界面開發」這一說法我是難以接受的，函數式界面開發就讓它好好地叫「函數式組件化」吧，不然我們會在所謂的「傳統UI框架」和「函數式界面開發」之間出現一個Gap，豈不是又要造個詞給填上，多累……
我前面說會有一個Gap，這個Gap很可能就是我們現在想用「組件化」這個定義去表達的一些點，我想在此做一些個人的見解
我將之理解為以下幾要素：
組件是對邏輯的封裝，不限於圖形元素。即我們可以把if做成組件、把一個倒計時做成組件、把一段動畫做成組件、把路由做成組件、把數據架構做成組件，而這些並不能稱為控制項
組件具備單個可移植性，即「隨載入隨用」，不需要為其准備復雜的基礎條件（如引入樣式、引入框架等）。然而這一點現有那些所謂組件庫做得並不好，技術上也不大現實
組件是聲明式定義的，而非命令式。這個不想多說，很大程度上是自己主觀的一個想法
而上面最重要的就是第一點，所以要問我什麼是「組件化開發」，我的說法是：
把圖形、非圖形的各種邏輯均抽象為一個統一的概念（組件）來實現開發的模式
這與傳統開發框架的最大區別就是統一了圖形元素與非圖形元素，除此之外我再想不出其它真正體現區別的點了
在這個概念下，包括router、ajax、mole loader、timer、animation、interval等，都是組件，共享統一的生命周期管理和對外介面，且都是聲明式地進行組合
我的一位同事告訴我去年的深JS上，有位淘寶的朋友的話題叫做「前端組件服務化」，這裡面提的那些個概念，是很符合我對「組件化」的認識的，他要是不給再強安個「服務化」的噱頭就好了- -
不過話說回來，在這個要求之下，組件其實不是那麼好進行抽象設計的，隨便說幾個例子，有難的也有簡單的：
非圖形元素的各種需求如何統一介面，如timer和ajax
組件可以橫向組件，但是縱向復用如何解決，如希望任何圖形元素都可以實現被滑鼠拖拽的效果，則滑鼠拖拽應該也是個組件，這個組件與其它組件的關系是什麼
有些組件對其可被組合的組件是有要求的，比如HTML里就不大好意思把一個<p>放進一個<span>里，這一點如何在組件上表達（實現不難，表達比較難）
一些我們原本想當然認為純的小函數的東西，是不是也能當組件玩，比如underscore.pick要不要也是個組件
⑽ 既然html都是由後端動態生成，為什麼前端還要強調組件化開發
誰告訴你html都是後端動態生成的
後端開發還得基於前端來做
組件化開發可以減少頁面開發成本 提高頁面的可維護性和拓展性