現在前端技術越來在專案中擔當比較重要的角色。特別Node.js 的出現。使JS又可以承擔前端和後臺，使用專案程式語言統一。

比如流行的

模組化:seajs(CMD)、Coomonjs、requirejs(AMD)

MVVM框架:avalon、vue、kendo、knockout、angular 。

UI框架：bootstrap、jqueryui、kendoui、easyui、amazeui、ext、JX、dwz

工具類:underscore、lodash

DOM庫:prototype、zepto、jquery

JS構建工具:NODE、GULP、express(基於node 的web伺服器框架)

現在網上有各種庫，框架。有時候讓人不知道到底用哪個才好。那就自己寫一個唄。開發簡單又滿足自己業務的框架才是好框架。

一般專案開發

原裝：完全自己寫。

封裝：在成熟的UI上面做擴充套件、封裝（推薦這個）

原封不動的引用：極不推薦。

下面我開發的一個例子，：

專案模組化：我選的是AMD規範。比如，我整個專案有一個main的配置檔案，裡面有整個專案依整的資源和一些全域性的配置引數。模組化對於元件顯的更加重要。

一個元件的組成部分大概就分為這幾類：資料來源、事件監聽、方法、引數

資料來源的封裝：（元件必須可以呈現本地靜態資料，也要對遠端資料的處理）

Configs:配置專案中，資料開發環境.現在很多專案都是前端先開發，那前端就得造靜態資料。本地資料必不可少。搭建可配置的本地資料與後臺真實資料介面，能快速便捷的切換開發資料環境。比如後臺介面釋出了.我只要把開發環境變數配成prd.那前端就會自動讀取prd下面所有後臺釋出的資料介面.

Request:網路請求.專案中與後臺的互動都是通過ajax 。那麼使用ajax 。那你得包封一下。因為專案中一些共性問題的處理。你需要統一處理。

dataSource:這是我寫的一個簡單的資料來源.它主要有倆個引數：data(本地資料),transport(遠端資料)

元件:(做一個例子，我開發一個grid 。grid 應該是很多專案中會用到的)

grid元件包含:資料展示、資料分頁（單獨抽出寫一個分頁元件）

引數設定: {  element: null, // 頁面中需要生成Grid元件元素
                columns: [],  欄位
                dataSource: null, 資料來源
                pager: null, 分頁面元件的引數
                parseTotalCount: function (d) {
                    return d.length || 0;
                }, 頁面總數的轉換
                autoBind:true 是否自動繫結資料}

事件監聽的幾種狀態:    events: ["onSuccess", "onError", "onPageChange", "onItemDataBound", "onDataBound", "onRender"],

HTML的拼接處理:元件展示的效果最終還是html，那要把死的HTML，變活，就得靠JS。開元件就像建房子。

要一步一步來。

比如Grid的HTML:它的元件的部分是哪些。table、tr、td就這麼簡單

根據資料來源返回資料記錄，生成多少TR，有多少欄位需要顯示，那就在TR裡面生成多少個TD。

grid 的初始化方法.

dataSource:返回資料，我就呼叫renderContent 顯現grid資料，這個方法就只有兩點。資料有多少條記錄就生成多少行，如果有分頁，去重新設定分頁元件的總記錄數

使用例子:

完成後的效果