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

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

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

3、顏色，也就是說，用戶點(diǎn)擊字體之后，是要一個(gè)有標(biāo)準(zhǔn)版，藍(lán)色布局，黑色字體，左邊的布局，默認(rèn)背的頁面。這樣我們很容易就想到了，CSS是根據(jù)某些數(shù)據(jù)來生成的，用戶點(diǎn)擊了按鈕后，是改變了一些數(shù)據(jù)，我們?cè)俑鶕?jù)這些數(shù)據(jù)，生成所需的CSS路徑，最后就是改變CSS路徑，從而做到這一功能。其中這些數(shù)據(jù)是有結(jié)構(gòu)的，這些有結(jié)構(gòu)的數(shù)據(jù)我們就稱它為這一個(gè)功能的數(shù)據(jù)模型。var DataModel = Screen: 0, /屏幕設(shè)置：0標(biāo)準(zhǔn)版1寬屏版 2Hao123風(fēng)格 Style: 0, /風(fēng)格設(shè)置：0藍(lán) 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)完成的了，就差如何讓用戶點(diǎn)擊就改變了，用戶點(diǎn)擊這是一事件，不說也可以明白，你有很多方式的綁定到按鈕上比如:<a href=”javascript:;” onclick=”CSSControl.Change(Font,'Blac