数据模型驱动开发

对于新手来说书是看得够多了，不过书上的东西一般都是介绍一些语法，工具，框架之类的东西，对于新人来说都是被忽悠到一个见是见过，但不会用的一个状态。对于说说开发思想的书还是偏少的，就算是有也是很高级的，一来就什么设计模式的那种，完全让人难以入手。

今天我介绍的这一思想是我经过了服务端脚本与客户端脚本开发后的一些编码经验，对大家在学习或者在项目开发的过程会有一定的帮助。我会拿项目的一些功能才讨论这一思想。

设计师出图后，我们会打量一下我们该如何去实现这个介面，比如，对于写HTML的朋友首先会看这页面应如何布局的，有哪些地方是公共，代码应该放在哪些文件里，等等都会有一个很好的规划，而在JS方面我们应该是如何开始呢？好了，下面就开始如何去分析，如何开始我们的编码了，这就是我要介绍的数据模型驱动开发思想。

我拿雨林木风的114啦（http://www.114la.com/）的一个功能作为例子,首先看看图:

上图的个性设置就是我所要介绍的一个功能。看到了此图后，我们就会想到，重点是改变CSS路径而已，对，但写代码时重点就不是这一点了，我们的重点是如何去知道我要怎么改，我们怎么去知道我们的个性是需要哪些CSS，这就是我们写JS，要写的代码。

我们来如何改吧，分析一下吧，功能点上有屏幕、字体颜色、风格、背景、布局一个铵钮可以让用户点击去改变的，我们可以这样去分析，比如当用户点击黑色字体颜色后，我们就保持原来的风格、布局等等，只改变字体颜色，也就是说，用户点击字体之后，是要一个有标准版，蓝色布局，黑色字体，左边的布局，默认背的页面。

这样我们很容易就想到了，CSS是根据某些数据来生成的，用户点击了按钮后，是改变了一些数据，我们再根据这些数据，生成所需的CSS路径，最后就是改变CSS路径，从而做到这一功能。其中这些数据是有结构的，这些有结构的数据我们就称它为这一个功能的数据模型。

var  DataModel  =  {
     Screen:  0 ,       // 屏幕设置：0标准版　1宽屏版 2Hao123风格
    Style:  0 ,        // 风格设置：0蓝 1绿 2粉红
    Font:  ' Black ' ,  // 风格设置
    LayOut:  0 ,     // 布局设置 0为左边 1为右边
    BgImg: 0        // 背景图片
}

 

 

上面的就是我们的数据模型。我们的JS代码就是根据数据模型来改变CSS路径。所以我们要有生成路径的代码，还要有改变CSS路径的代码。最后我们还要有改变数据模型的代码，好吧，我们把代码打包好吧，下面就是代码了。

var  CSSControl  =  {
    Change:  function (key,value){
         // 改变数据模型代码
       if (DataModel[key]){
          DataModel[key]  =  value;
        }
 
        CssControl.Display();
    },
    Display:  function (){
         // TODO:根据数据模型生成CSS路径代码
       // ................CODE
       // TODO:改变页面css路径
       // ................CODE
    }
}

 

 

好了基本上我们已经完成的了，就差如何让用户点击就改变了，用户点击这是一事件，不说也可以明白，你有很多方式的绑定到按钮上比如:

<a href=”javascript:;” οnclick=”CSSControl.Change(‘Font’,'Black’)”>黑色字</a>

 

转载于:https://www.cnblogs.com/Max-Gan/archive/2011/01/25/1944549.html