數(shù)據(jù)模型驅(qū)動開發(fā)

1、數(shù)據(jù)模型驅(qū)動開發(fā)對于新手來說書是看得夠多了，不過書上的東西一般都是介紹一些語法，工具，框架之類的東西，對于新人來說都是被忽悠到一個見是見過，但不會用的一個狀態(tài)。對于說說開發(fā)思想的書還是偏少的，就算是有也是很高級的，一來就什么設(shè)計模式的那種，完全讓人難以入手。今天我介紹的這一思想是我經(jīng)過了服務(wù)端腳本與客戶端腳本開發(fā)后的一些編碼經(jīng)驗，對大家在學(xué)習(xí)或者在項目開發(fā)的過程會有一定的幫助。我會拿項目的一些功能才討論這一思想。設(shè)計師出圖后，我們會打量一下我們該如何去實現(xiàn)這個介面，比如，對于寫HTML的朋友首先會看這頁面應(yīng)如何布局的，有哪些地方是公共，代碼應(yīng)該放在哪些文件里，等等都會有一個很好的規(guī)劃，而在JS

2、方面我們應(yīng)該是如何開始呢？好了，下面就開始如何去分析，如何開始我們的編碼了，這就是我要介紹的數(shù)據(jù)模型驅(qū)動開發(fā)思想。我拿雨林木風(fēng)的114啦（）的一個功能作為例子,首先看看圖:上圖的個性設(shè)置就是我所要介紹的一個功能。看到了此圖后，我們就會想到，重點是改變CSS路徑而已，對，但寫代碼時重點就不是這一點了，我們的重點是如何去知道我要怎么改，我們怎么去知道我們的個性是需要哪些CSS，這就是我們寫JS，要寫的代碼。我們來如何改吧，分析一下吧，功能點上有屏幕、字體顏色、風(fēng)格、背景、布局一個銨鈕可以讓用戶點擊去改變的，我們可以這樣去分析，比如當(dāng)用戶點擊黑色字體顏色后，我們就保持原來的風(fēng)格、布局等等，只改變字體

3、顏色，也就是說，用戶點擊字體之后，是要一個有標(biāo)準(zhǔn)版，藍色布局，黑色字體，左邊的布局，默認背的頁面。這樣我們很容易就想到了，CSS是根據(jù)某些數(shù)據(jù)來生成的，用戶點擊了按鈕后，是改變了一些數(shù)據(jù)，我們再根據(jù)這些數(shù)據(jù)，生成所需的CSS路徑，最后就是改變CSS路徑，從而做到這一功能。其中這些數(shù)據(jù)是有結(jié)構(gòu)的，這些有結(jié)構(gòu)的數(shù)據(jù)我們就稱它為這一個功能的數(shù)據(jù)模型。var DataModel = Screen: 0, /屏幕設(shè)置：0標(biāo)準(zhǔn)版1寬屏版 2Hao123風(fēng)格 Style: 0, /風(fēng)格設(shè)置：0藍 1綠 2粉紅 Font: 'Black', /風(fēng)格設(shè)置 LayOut: 0, /布局設(shè)置 0為左

4、邊 1為右邊 BgImg:0 /背景圖片上面的就是我們的數(shù)據(jù)模型。我們的JS代碼就是根據(jù)數(shù)據(jù)模型來改變CSS路徑。所以我們要有生成路徑的代碼，還要有改變CSS路徑的代碼。最后我們還要有改變數(shù)據(jù)模型的代碼，好吧，我們把代碼打包好吧，下面就是代碼了。var CSSControl = Change: function(key,value) /改變數(shù)據(jù)模型代碼 if(DataModelkey) DataModelkey = value;   CssControl.Display(); , Display: function() /TODO:根據(jù)數(shù)據(jù)模型生成CSS路徑代碼 /.CODE /TODO:改變頁面css路徑 /.CODE 好了基本上我們已經(jīng)完成的了，就差如何讓用戶點擊就改變了，用戶點擊這是一事件，不說也可以明白，你有很多方式的綁定到按鈕上比如:<a href=”javascript:;” onclick=”CSSControl.Change(Font,'Blac