演讲人：雨林木风 - 甘晓聪 ( 阿甘 )

1. 基于数据模型的开发2. JS 对象化语法3. 设计模式 --- 观察者

基于数据模型的开发

目的：　规划我们的代码，思考功

能如何去实现，让我们对解决问题有一个合适的思维方式

例子： 114 啦个性设置功能

•思考如何去实现，核心在哪里？

•代码要做什么事？

改变 CSS 路径

怎么去知道我们的个性是需要哪些 CSS ，如何取得 CSS 路径

分析行为

用户点击屏幕、字体颜色、风格、背景、布局上的其中一个按钮可以改变

点击按钮后是在原来的基础上做一些改变

无论是用户点击或者是其它的方式，目的是为了改变主题。虽有很多方式去改变主题，但我们确定的是，路径是由屏幕、字体颜色、风格、背景、布局而生成的。

结论：　　路径的改变是有数据参考的。

下一步思考：　　到底是怎样的一个数据呢？

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

针对功能这些有结构的数据我们就称它为这一个功能的数据模型

控制模型

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

　　 }}

总结：功能实现的重点就是要找到根据，行

为的改变不单是能见到，而且会带来内部的改变。找出其中改变的数据，抽象出功能的数据根据，再从数据出发去规划代码的结构与实现。

JS对象化语法 对象

var Obj = {};

var Fun = (function(){

　 　 })();

类• 私有字段• 私有方法 • 公有属性 • 公有方法

/*** 定义类 ***/ var TestClass = function(){ var _self = this; // 把本身引用负值到一变量上

var _Field = ”Test Field”; // 私有字段

var privateMethod = function(){ // 私有方法 alert(_self.Property); // 调用属性 }

this.Property = ”Test Property”; // 公有属性

this.Method = function(){ // 公有方法 alert(_Field); // 调用私用字段 privateMethod(); // 调用私用方法 } }

var test = new TestClass();test.Property = “ 测试一下” ;test.Method();

问题• “ var _self = this; ” 这一句有何用 ? 建立一个指向本对象的引用

var privateMethod = function(){ // 私有方法 alert(this.Property); }

原因： this 直接指向父级对象 window

静态类/*** 定义静态类 ***/ var StaticClass = (function(){ var Return = { Property: ”Test Static Property”, // 公有属性 Method: function(){ // 公有方法 alert(_Field); // 调用私用字段 privateMethod(); // 调用私用方法 } }; // 定义返回的公有对象 var _Field = ”Test Static Field”; // 私有字段 var privateMethod = function(){ // 私有方法 alert(Return.Property); // 调用属性 } return Return; // 生成公有静态元素 })();

StaticClass.Property = “ 测试一下” ;StaticClass.Method();

var Control = (function(){

var Return = {};

var _dataModel = {

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

var display = function(){

　　　　　 //TODO: 改变页面 css 路径 　　 }

Return.Change = function(key,value){ // 我们要做的功能　　　 // 改变数据模型代码 　　　 if(dataModel[key]){

　　　　　 dataModel[key] = value;

　　　 }  

　　　 display();

　　 }

return Return;

})();

继承目的：抽象出公用的功能，让我们的代码更为优雅，让我们做一个聪明的程序员。

var A = function(p){ this.Show: function(){ alert(p); } }

var B = function(){ A.call(this,1); // 继承 A } new B().Show();

设计模式篇 ---观察者概念：定义对象间的一种一对多的依赖关系 , 当一个对象的状态

发生改变时 , 所有依赖于它的对象都得到通知并被自动更新。

文章地址： http://gandev.com/archives/14

适用于：• 当对一个对象的改变需要同时改变其它对象 , 　　而不知道具体 有多少对象有待改变。 • 当一个对象必须通知其它对象，　而它又不能假定其它对象是谁。换言之 , 你 不希望这些对象是紧密耦合的。

谢谢！