1. 如何設計一個自己的前端MVC框架
對於一些中小型的web應用程序，為了縮短開發周期和降低開發和維護成本，往往會採用一種基本MVC開發模式的框架開發。現在市場 上的開發傳統web頁面的JavaScript框架比較多，但是專門對移動應用程序的MVC設計模式的框架比較少。所以開發一套針對移動應用程序的MVC設計模式的框架還是很有價值的。參考傳統MVC設計模式框架，移動應用框架應該實現以下幾個方面：
MVC的分離
移動應用程序中，model,view,controller得到嚴格的分離，使得應用程序的結構和開發的思路更加清晰，程序的維護更加方便。
數據的更新
Model中的數據與View中數據的雙向更新，當Model中的數據發生變化時，View中的數據隨著發生變化，當View中輸入或修改數據時，Model的數據也會發生變化，省去開發者手動操作數據的變化，避免發生錯誤。
數據的格式化
當Model中的數據需要先格式化再顯示在view中的時候，可以先進行數據格式的轉化。
數據的驗證
當view中輸入數據或者是改變數據的時候，需要驗證數據時，可以先對數據進行驗證，當驗證通過時，才賦給Model中相應的數據。
頁面管理調度
實現各個頁面之間的調度，避免由開發者實現頁面調度而產生的混亂，同時也加快程序的開發速度。
框架的實現與程序的開發離不開JavaScript庫，目前的Javascript庫的形勢也比較尷尬，一方面是傳統的web頁面javascript庫的成熟，一方面卻是針對移動端應用設計開發web應用JavaScript的相對落後，雖然也有幾款優秀的，但是相對體積比較大，而且有時候出了問題也很難跟蹤，所以有必要開發一套專門針對移動端開發的JavaScript庫，使它具有靈活，小巧，功能完善的工具集和UI組件，幫助開發移動端應用的開發者快速工發並容易維護，所以具體需求有以下幾個方面：
事件的支持
DOM2級的事件使對DOM元素的操作起到了解耦作用，在程序開發的過程中，對程序對象之間的解耦的作用，在程序開發的過程中，對對象之間的解耦也是相當必要的，所以有必要做一個統一的介面，而事件是一個不錯的選擇，而且事件在MVC設計模式的實現中佔有很重要的地位，他既可以使Model,view,controller之間分離解耦，又使他們之間存在內在聯系。
插件機制
一個好的Javascript庫，他應該有自己的靈活完善的插件機制，不僅可以為庫的開發台提供方便，也應該為開發應用程序時提供方便，針對相同的功能開發插件，避免代碼的多次開發。
頁面管理
一個移動應用程序會有很多頁面需要分級管理，這是由移動辦公設備的特性決定的，面對多級與多個頁面，需要一種機制來管理各個頁面之間的關系才而已痛苦誤會頁面的載入時機與載入方法。
動畫的功能
使用移動設置性能的提升與大量移動應用的出現，使用戶對程序的選擇更多。如果程序不能更炫更苦的表現來吸引用戶，那他將難以進入市場，而動畫就是其表現手段之一，所以有必要為開發者提供一套實現動畫的方法，使開發者可以迅速開發能吸引用戶的動畫。
手勢的支持
隨著觸摸移動設備的普及與蘋果公司在它原生 IOS 應用程序中推出了手勢操作後，人們越來越喜歡這種交互方式了。為了適應這種潮流與提升程序的競爭力，在面向移動應用開發的JavaScript庫中添加手勢的支持是有必要的。
數據的通信
作為一個信息時候的應用程序，數據通信的功能是不可或缺的。雖然 Ajax 技術提供了數據通信的相應的介面，但是如果每一次的數據通信都要開發者去創建，調用相應的介面，會出現很重復的代碼，而且效率也不高，所以有必要對 Ajax 數據通信介面進行封裝。
數據的本地化
當應用程序與後台通信取得數據的時候，有些數據是需要保存在本地的，還有一些數據的狀態，以及一些經過運算得到的數據也是需要保留在本地的。這就需要提供一種數據本地化的介面
UI 組件
開發者在開發應用程序的時候，常常會遇到一個功能相同的控制項在不現的應用程序程序中都會用到，為了提高應用程序的開發效率，縮短開發周期，有必要把一些常用的控制項抽象出來形成組件，供開發者調用
屏幕的適配
隨著移動設備的不斷更新發展，設備屏幕的尺寸與解析度越來越多樣化，這便成了跨平台應用程序「一次開發，多處運行」的最大難題。所以有必要形成一夽方案來解決這一問題。
總結
在這所有問題中，事件的擴展，插件機制，頁面的管理，MVC 設計模式的實現不僅是重點，也是難點，它們的實現具有以下價值：
事件在 web 開發中應用已經很廣泛，不過它只有在相應的 DOM 元素上才有事件，而且 MVC 設計模式的實現需要事件的驅動，所以需要擴展 DOM 事件到普通對象上，使它們具有訂閱發布消息功能，且與 DOM 事件有相同的介面。
插件機制需要代碼的高度抽象化，它是 UI 組件實現的基礎，它的實現提高了代碼的重復使用。
頁面的管理，它把應用程序按業務邏輯分解為以頁面為單位進行管理，使程序的邏輯結構更加清晰，而且它為 MVC 框架中頁面的調度實現提供了基礎。
MVC 設計模式的實現，即 MVC 框架的實現，對應用程序開發周期的縮短，開發成本的降低，應用程序後期的維護都會有很大的幫助。
2. bootstrap如何搭建前端框架
很簡單的，按照bootstrap官方文檔，引入他們的js和css就可以了。剩下的跟著文檔來即可。
3. 前端有什麼框架呀
一、 Web前端框架之Angular 2+
Angular 2+優點解析：
Angular 2+ 的最大優勢在於它的流行程度。也有人認為它和 Google 密切相關的名字，會影響團隊使用它。Angular 1 的迅速流行是因為那些來自其他互動式應用程序開發環境的人會發現對於開發單頁面 Web 應用程序具有相似的模型-視圖模式。通過對 Angular 1 進行現代化演變和重新構建框架的某些部分，Angular 2+ 已經真正的爆發了，大量的正式的和非正式培訓機構數量都讓人印象深刻，開發者有很強的市場競爭力。對於用戶來說它有一套用於構建用戶界面的豐富組件，這也是本系列中少有的幾個框架能夠做到這點。
缺點解析：
我們覺得 Angular 框架著重於在單個頁面應用程序中創建用戶界面並沒有處理構建完整的 Web 應用這個更大的關注點，如果不及早確定下來，這將會導致整個項目難以維護，在實際項目中，運行時提供不屬於核心框架的技術往往讓人覺得不可思議，這大大降低了 TypeScript 對最終開發者的價值。
發展方向：
Angular 5 剛剛發布，這看來是 Angular 已經成功的印證了快速發布版本的承諾，在 Google 的持續支持下，Angular 會越來越成熟。
像許多的大型組織一樣，Google 具有多重(分裂)的人格，從外表上看，Angular 團隊和那些專注於瀏覽器標準的團隊之間顯得很和諧。但我們的觀點是，和諧只是一層薄薄的窗戶紙。Angular 團隊對於 Web 組件和漸進式 Web 應用沒有一個真正解決方案。我們認為，業界普遍認可的標准將會在 Angular 框架中會逐步實現，這將會影響到如何更好的構建 Angular 應用將成為一個中/長期的風險。
使用環境：
如果你需要在一個大型的框架內獲取技術資源，框架內的技術通常很容易移植;或者你需要在框架中訓練開發人員，並且還要有一定的信心，他們會在短期內獲得一定的開發能力，這樣的話你可以考慮 Angular 2+ 。需要注意的是 Angular1(angular.js)與 Angular2+ 是截然不同的，其中的應用、技術和經驗不能直接移植到 Angular2+ 的開發中去。
如果你的 Web 應用能夠很好的轉化為標準的模型-視圖模式，那麼你也可以忽略其他直接考慮使用 Angular2+ 。
如果你對 Google Material UX 設計模式滿意，那麼 Material Angular 是遵循該模式的一種快速、簡單且可靠的方式。
二、Web前端框架之React + Rex
React + Rex優勢解析：
React 和 Rex 的最大優勢在於它們相對簡單和專注。做一件事情並把它做好是非常困難的，但這兩個庫都很有效地完成了它們的目標。雖然對於某些狀態容器方法可能是外部的，但大多數開發人員還是可以輕松掌握概念，並了解單向數據體系結構的好處，簡化大量的用戶界面應用程序。
缺點解析：
React 和 Rex 最大的弱點不是它們是什麼，而是它們不是什麼。要構建一個功能豐富的 Web 應用程序，你需要許多功能，一旦脫離 React 和 Rex 和其他一些庫的核心，你將發現一個非常分散的社區，擁有無數的解決方案和模式，不容易整合在一起。
因此，雖然 React 和 Rex 都是非常專注的庫，但缺乏經驗的團隊還是會很容易地生成不可維護的解決方案，而不是意識到他們所做的選擇會導致性能不佳或錯誤。即使有經驗的開發人員也可能意識到，一個鬆散的架構或慣例可能會在未來困擾他們。
假省錢是一種對自己的欺騙，組織范圍內採用 React 和 Rex 將輕松降低無效率問題。沒有其他庫和模式的廣泛約定和標准化，標准化 React + Rex 比較於我們正在採用的 JavaScript 來編寫我們的應用程序效率要高。
發展方向：
Facebook 和 React 最近從繁瑣的附加專利糾紛中抽離，他們認識到，就像其他項目一樣，更廣泛的社區能夠提高自己的聲音。我覺得這有助於 Facebook 意識到他們還不能更好地了解我們，相信我們來引導項目。希望這將繼續貫穿項目的特點和技術方向。
很難預測 React 和 Rex 的未來。但是，將庫集中在一起，確實會顯著提高適應性，大多數React + Rex 模式都會促進一個分離的體系結構，從而可以輕松地進行重構和迭代。兩年前，大家喜歡的還是React + Flux，但整個社區很快就擁抱了Rex。思維或模式的其他重大轉變可能很容易被採納。這種關鍵能力可能會持續到未來。
使用環境：
如果你很少需要手把手指導，並且正在尋找更好的庫而不是全面的框架，那麼 React + Rex 可能是正確的。在這一過程中，你不僅需要對你的團隊和組織的能力保持誠實，還要在你的初始開發過程中，以及在整個應用程序的長期維護過程中保持誠實。
三、Web前端框架之Vue.js
vue.js優勢介紹：
漸進式構建能力是vue.js最大的優勢，vue 有一個簡潔而且合理的架構，使得它易於理解和構建。
vue 有一個強大的充滿激情人群的社區，這為vue.js增加了巨大的價值，使得為一個空白項目創建一個綜合的解決方案變得十分容易。
缺點介紹：
在模型-視圖應用程序和狀態容器類型的應用程序之間的互相轉換可能會令人感到困惑，即使沒有完美包含一個模式到另一個模式的完美轉換，但讓人感覺希望能維持兩個模式的相關性。對於那些期待vue.js完美解決方案，並可能導致難以維護不一致的應用程序的人來說，這至少是令人困惑的。
一個更大的挑戰是vue.js依賴於一個單獨的人，很明顯，其他的項目基本是由一個組織提供支持，但這讓人感覺更加有意義，雖然它有一個強大文件的社區和許多有創新的新增項目，但是 vue 核心的開發基本落在一個人身上。
我們很高興看到 vue 更加容易接受新興的標准方法，但是它的類似於 Web 組件的模式，而不是真正的 Web 組件，這可能是 vue 所得不償失的地方。
發展前景：
雖然vue.js有相當廣泛的應用，但也很難預測在中期發展中這個勢頭能持續多久，它不是由一個商業組織直接支持並維護，因此，這很大程度上依賴於維護者的生存能力和繼續維護下去的願望來決定。
它也表現出了一定程度的語言適應能力，並且隨著某些模式的落伍和失寵而繼續保持自身語言的現代化和時代性，目前沒有跡象表明vue.js架構將來無法適應進一步發展。
使用場景：
如果你有一個傳統的Web應用程序，並需要一個強壯穩健的應用程序層，那麼vue.js 可能是一個很好的選擇，它有清晰的模式，即使沒有經驗的團隊也能正確或者錯誤的使用它。盡管vue UX框架沒有開箱即用的功能，但在vue.js上也能大量持續性構建應用，這將有利於你的項目。
4. 怎麼使用web前端框架bootstrap
如何使用Bootstrap
針對 Bootstrap 的 HTML
清單 • 是一個有用的框架 HTML 文件，用於結合使用 Bootstrap 與一個固定布局和響應特性：
清單 • 用於 Bootstrap 項目的基本框架 HTML 文件 (listing1.html)
縮小版本
在 Bootstrap 下載中，請注意，每個 CSS 和 JavaScript 文件有兩個版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一種形式是一個常規文件，第二種形式是壓縮文件或 「縮小文件」。就像在本文中一樣，使用縮小版本即可實現最有效的頁面載入。
listing1.html 的開始之處的 DOCTYPE 聲明將其標記為一個 HTML5 文件。head 元素內的 meta標記控制移動的小屏幕布局。(為方便起見，我將它們稱作 meta/viewport 標記。)默認情況下，大多數移動設備按比例縮小 Web 頁面，使之適應屏幕大小，就像在桌面瀏覽器窗口中一樣。這就是為什麼許多網站上的文本和圖像在手機瀏覽器中看起來很小的原因。meta/viewport 聲明中的 initial-scale=1.0 部分禁用了這一行為，告訴設備要保持頁面的原有尺寸。該聲明表示 Web 設計人員(在本例中為 Bootstrap)已經完成了實現較小屏幕的響應式設計這一任務，所以在默認情況下，沒必要採用蠻力方法。
稍後，清單 1 的 head 標記是 Bootstrap CSS 的鏈接。在文件的末尾，載入 jQuery 和 Bootstrap 實用程序 JavaScript。這些腳本在末尾運行可實現最佳性能。
設置代碼
當使用 Bootstrap(或任何 Web 支持文件集)時，您可以從多種方法中選擇用來設置 HTML 和其他代碼的方法。我建議您創建一個文件夾來存儲自己的項目，然後將 Bootstrap 文件及其完整的文件夾結構復制到項目文件夾中。將您自己的 HTML 文件放在最頂層，並將您自己的 CSS、JavaScript 和圖像文件放在相應的 Bootstrap 子文件夾中(這些文件夾的名稱分別為 css、js 和 img)。
5. 前端開發框架有哪些
前端框架好不好用還是要看具體情況分析，我這里給你推薦幾個常用的框架，可以按需使用。
1、vue-element-admin
一個基於vue2.0和Element的控制面板UI框架，這是使用vue技術棧開發的前端程序員的首選管理系統模板，模板已經非常成熟了，並且有相關的社區和維護人員，開發時候遇到問題也不要慌。
2、AdminLTE
非常流行的基於Bootstrap 3.x的免費的後台UI框架，這是一個非常老牌的後台管理系統模板，每個頁面都是單獨的html網頁，適合前端入門新手用來做項目。
3、ant-design-pro
這個就不多說了，選擇react技術棧的童鞋們必然離不開這個優秀開箱即用的中台前端/設計解決方案，文檔齊全，組件豐富，一鍵生成模板，更支持開啟復制粘貼模式哦。
4、ng2-admin
這是基於Angular 2、Bootstrap 4和webpack的後台管理面板框架，要收前面已經有了React和vue技術棧的模板，那怎麼能少了ng的？雖然在國外用的比較多，國內較少使用，但絲毫不影響ng作為前端框架三巨頭之一的地位。
9：material-dashboard
基於 Bootstrap 4 和 Material 風格的控制面板。Material Dashboard 是一個開源的 Material
Bootstrap Admin，其設計靈感來自谷歌的 Material Design 。
10：d2-admin
D2Admin 是一個完全 開源免費 的企業中後台產品前端集成方案，基於 vue.js 和 ElementUI 的管理系統前端解決方案 ，小於 60kb的本地首屏 js 載入,已經做好大部分項目前期准備工作
11：vuestic-admin
vuestic-admin管理台儀表盤是一個響應式的儀表盤模板，採用Bootstrap4和Vue.js構建。這個精美的管理台模板提供了自定義元素組件，如地圖，聊天，個人資料卡，圖標，進度條等，以及用於登錄和注冊的預建頁面。
6. 如何用vue.js和ionic搭建前端框架
前端可以用flightplan.js 部署。 var config = require("./webpack.config.js"); var webpack = require("webpack") var webpackDevServer=require("webpack-dev-server") confi
7. 前端開發框架是什麼
常見的web前端開發框架如下：
1、Bootstrap：
主流框架之一，Bootstrap 是基於 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
2、html5-boilerplate：
該框架可以快速構建健壯，且適應力強的web app或網站。
3、Meteor：
Meteor是新一代的開發即時web應用的開源框架，它能在較短時間內完成開發。
4、Materialize：
基於材料設計的現代化響應式前端框架。可提供默認的樣式，自定義組件。此外，Materialize還改進動畫和過渡，為開發人員提供流暢的體驗。
5、Amaze UI：
首個開源HTML5跨屏前端框架產品系列，中文排版前端的學習都是需要不斷的學習，學一天停一停相當於白學，學習效果很差，如果你想有人一起學習可以來這個扣裙，首先是132 中間是667最後是127 都是零基礎的同學，大家相互鼓勵 共同努力 只是學著玩就不建議來了!!!支持更優、本土化組件豐富。該產品系列中有專門針對移動端的HTML5混合應用開發框架Amaze UI Touch以及針對跨屏HTML5網頁開發的Amaze UI Web。
(7)如何搭建一個前端框架擴展閱讀：
web框架程序的作用：
Web框架使得在進行Web應用開發的時候，減少了工作量。Web框架主要用於動態網路開發，動態網路主要是指現在的主要的頁面，可以實現數據的交互和業務功能的完善。
使用Web框架進行Web開發的時候，在進行數據緩存、資料庫訪問、數據安全校驗等方面，不需要自己再重新實現，而是將業務邏輯相關的代碼寫入框架就可以。也就是說，通過對Web框架進行主觀上的「縫縫補補」，就可以實現自己進行Web開發的需求了。
以PHP為例，PHP可以在apache伺服器上進行Web開發，而不必使用框架。使用PHP進行開的時候，在不適用框架的情況下，資料庫連接就需要自己來實現，頁面的生成和顯示也是一樣。比如框架的話可以完成避免sql注入的工作，而使用PHP在不用框架的情況下，這部分要自己做。
8. 怎樣才能做出真正有意義的前端框架
js之後去學一門後台語言~這樣對你自己也是一個提升~而且全能型的人總比只會JS的人要好很多吧~
9. 怎麼用thinkphp搭建前端後台框架
以前用PHP做過一個很蹩腳的網站，為什麼這么說呢，因為寫的全是死代碼。做完以後覺得實在是累，前端要div+css,js 後端要php,MySQL，這么多東西要弄，十分頭疼。所以，在接到做網站的任務後，我第一時間想到一定要使用開發框架去做，絕不能跟以前一樣那麼累了。
我選擇的是PHP的ThinkPHP框架。說實話，真的蠻不錯的。瞬間覺得Web開發還是蠻有效率的。
超級鏈接：ThinkPHP中文網
按照套路，首先貼一下實驗環境：
1. WAMP（集成的那種，最Easy的幾乎不需要配置）
2. ZendStudio7.2（中文網址http://www.zendstudio.net/，裡面提供下載，在線注冊機以及使用教程）
3. ThinkPHP框架+網路UEditor編輯器插件
4. Win7-64bit操作系統
5. 瀏覽器（火狐，IE，Chrome），外加火狐FireBug插件用於調試以及偷樣式