【开发者的精进】 数据驱动下的程序设计

 数据驱动开发

　　那么什么是数据驱动开发？  我的理解是，它是一种顺序思维，我们在开发时，往往关注于功能点、一个代码单元、单个系统，这里我以一个web界面解释（博主擅长web），

日常，我们界面开发流程可能是这样的：

　　1.需求A，一个web界面，如下图

　2. ok 一张个人中心界面，这里面有什么呢，

　　　①.一个用户，包含头像,姓名等信息

          ②.两个记录表

　3.然后就开始开发了，

一般的思维，首先布局，头部》中间》底部》动画 ，然后请求服务器数据，最后把数据渲染到页面中。这符合我们一贯的思路，不论用什么框架，什么技术，流程大多如此，但是作为对比，我们来看看数据驱动下的界面开发

 界面制作动手之前，我们需要设计一个数据模型，例如个人中心界面，这个简单的界面可以分为两块。

　　1、用户信息

　　2、相关信息

现在我使用json表示这个界面

{
    "user":{
    },
    "about_msg":{
    }  
}

 在用户信息里有用户名，头像，在相关信息里，有用户详细信息，报修记录，宽带记录，其中报修记录，宽带记录是有图标，有链接的，那么最后的数据模型应该是这样的

{
    "user":{
        "name":"zhangtaifeng",
        "img":"..."
    },
    "about_msg":{
         "user_detail":[
             {
                   "title":"姓名",
                   "value":"zhangtaifeng"
              },
             {
                   "title":"学号",
                   "value":"123456"
              },
             {
                   "title":"邮箱",
                   "value":"..."
              }
        ],
         "maintenance":{
             "icon":"../images/...",
             "href":"",
              title:"保修"
        },
        "buy":{
              "icon":"../images/...",
              "href":"",
              "title":"购买"
        }
    }  
}                             

当数据模型准备完毕，界面的开发就变得简单起来，无论你是用什么样的框架都可以在这样的数据基础上，或循环、或模板引擎、或后台渲染，核心要求是，

数据必须在前面，数据改变，界面改变，如果界面更改了，数据没有同步，那么这些设计就变得毫无意义。

可以预见的是，一旦使用了数据模型驱动界面开发，那么这块工作是由难到易的，后期维护简单。

这还只是一个简单的个人中心界面。开发复杂的、大型的图形界面，数据驱动无疑是最好的开发方式。

要点

　　1、数据模型需要在用户界面的前面，也就是说，数据更改，界面更改。不可以直接更改界面，就算重新设计，也需要首先从数据修改入手。

　　2、你可以设置数据监听，改变时重新渲染界面。也可以做一个驱动函数，专门负责界面渲染，每次更改数据调用，例如：

var data = {name:"zhangtaifeng"};
//渲染函数
var changeView = function(data){
     document.body.innerHTML='<h1>'+data.name+'</h1>';
      return  data
};

changeView(data); //zhangtaifeng

setTimeout(function(){
    data.name="aaa";
   changeView(data); //aaa
},3000);

　　前端，像vue angular react都提供了简便的watch方法。

      3、尽量使页面数据化，如果你的项目不是依赖seo的话。

优势

　　假如A和B开发了一个一样的界面，A和平时一样，写html...写js....请求数据。 B首先设计数据模型，然后设计驱动函数，然后写html，写js，请求数据。 

　　一开始看，A大多数情况下会比B快很多的，按通常流程走，符合逻辑。 

       现在老板需要增加一行元素，比如”我的订单“。

       A需要修改html、增加js

　　B只需要在数据模型上加一行”我的订单“就行了。

　　类似的，如果要你保存页面状态，怎么办？   保存数据就行了。

　　跳转登录，返回回填表单，保存数据就行了。

       还有更多的好处。。。

结束

　　传达一些想法，表示一些逻辑，实属不易，若笔头略有顿挫，诸君见谅，若观点也有偏差，望各位海涵，然君指出后，言出必思，思之必改，谢谢大家。