第十期 阿甘Javascript开发思想(入门篇)

1,428 views

Published on

Published in: Self Improvement
  • Be the first to comment

第十期 阿甘Javascript开发思想(入门篇)

  1. 1. 演讲人:雨林木风 - 甘晓聪 ( 阿甘 )
  2. 2. <ul><li>基于数据模型的开发 </li></ul><ul><li>JS 对象化语法 </li></ul><ul><li>设计模式 --- 观察者 </li></ul>
  3. 3. 基于数据模型的开发 <ul><li>目的: </li></ul><ul><li> 规划我们的代码,思考功能如何去实现,让我们对解决问题有一个合适的思维方式 </li></ul>
  4. 4. 例子: <ul><li>114 啦个性设置功能 </li></ul><ul><li>思考如何去实现,核心在哪里? </li></ul><ul><li>代码要做什么事? </li></ul>改变 CSS 路径 怎么去知道我们的个性是需要哪些 CSS , 如何取得 CSS 路径
  5. 5. 分析行为 <ul><li>用户点击屏幕、字体颜色、风格、背景、布局上的其中一个按钮可以改变 </li></ul><ul><li>点击按钮后是在原来的基础上做一些改变 </li></ul>
  6. 6. <ul><li>无论是用户点击或者是其它的方式,目的是为了改变主题。虽有很多方式去改变主题,但我们确定的是,路径是由 屏幕、字体颜色、风格、背景、布局 而生成的。 </li></ul><ul><li>结论: </li></ul><ul><li>   路径的改变是有数据参考的。 </li></ul>下一步思考:    到底是怎样的一个数据呢?
  7. 7. 描述数据 var DataModel = { Screen: 0, // 屏幕设置: 0 标准版  1 宽屏版 2Hao123 风格 Style: 0, // 风格设置: 0 蓝 1 绿 2 粉红 Font: 'Black', // 风格设置 LayOut: 0, // 布局设置 0 为左边 1 为右边 BgImg:0 // 背景图片 } 针对功能这些有结构的数据我们就称它为 这一个功能的 数据模型
  8. 8. 控制模型
  9. 9. <ul><li>var Control = { </li></ul><ul><li>   Change: function (key,value){ </li></ul><ul><li>    // 改变数据模型代码 </li></ul><ul><li>    if (DataModel[key]){ </li></ul><ul><li>     DataModel[key] = value; </li></ul><ul><li>    }   </li></ul><ul><li>    Control.Display(); </li></ul><ul><li>   }, </li></ul><ul><li>   Display: function (){ </li></ul><ul><li>      //TODO: 根据数据模型生成 CSS 路径代码 </li></ul><ul><li>      //................CODE </li></ul><ul><li>      //TODO: 改变页面 css 路径 </li></ul><ul><li>      //................CODE </li></ul><ul><li>   } </li></ul><ul><li>} </li></ul>
  10. 10. <ul><li>总结: </li></ul><ul><li>功能实现的重点就是要找到根据,行为的改变不单是能见到,而且会带来内部的改变。找出其中改变的数据,抽象出功能的数据根据,再从数据出发去规划代码的结构与实现。 </li></ul>
  11. 11. JS 对象化语法 <ul><li>对象 </li></ul><ul><li>var Obj = {}; </li></ul><ul><li>var Fun = (function(){ </li></ul><ul><li>  })(); </li></ul>
  12. 12. <ul><li>类 </li></ul><ul><li>私有字段 </li></ul><ul><li>私有方法 </li></ul><ul><li>公有属性 </li></ul><ul><li>公有方法 </li></ul>/*** 定义类 ***/ 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();
  13. 13. <ul><li>问题 </li></ul><ul><li>“ var _self = this; ” 这一句有何用 ? </li></ul>建立一个指向本对象的引用 原因: this 直接指向父级对象 window var privateMethod = function (){ // 私有方法 alert( this .Property); }
  14. 14. <ul><li>静态类 </li></ul>/*** 定义静态类 ***/ 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();
  15. 15. <ul><li>var Control = (function(){ </li></ul><ul><ul><li>var Return = {}; </li></ul></ul><ul><ul><li>var _dataModel = { </li></ul></ul><ul><ul><li>Screen: 0, // 屏幕设置: 0 标准版  1 宽屏版 2Hao123 风格 </li></ul></ul><ul><ul><li>Style: 0, // 风格设置: 0 蓝 1 绿 2 粉红 </li></ul></ul><ul><ul><li>Font: 'Black', // 风格设置 </li></ul></ul><ul><ul><li>LayOut: 0, // 布局设置 0 为左边 1 为右边 </li></ul></ul><ul><ul><li>BgImg:0 // 背景图片 </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>var display = function (){ </li></ul><ul><li>      //TODO: 改变页面 css 路径 </li></ul><ul><li>   } </li></ul><ul><li>Return.Change = function (key,value){ // 我们要做的功能 </li></ul><ul><li>    // 改变数据模型代码 </li></ul><ul><li>    if (dataModel[key]){ </li></ul><ul><li>     dataModel[key] = value; </li></ul><ul><li>    }   </li></ul><ul><li>    display(); </li></ul><ul><li>   } </li></ul><ul><li>return Return; </li></ul><ul><li>})(); </li></ul>
  16. 16. <ul><li>继承 </li></ul><ul><li>目的:抽象出公用的功能,让我们的代码更为优雅,让我们做一个聪明的程序员。 </li></ul>var A = function(p){ this.Show: function(){ alert(p); } } var B = function(){ A.call(this,1); // 继承 A } new B().Show();
  17. 17. 设计模式篇 --- 观察者 <ul><li>概念:定义对象间的一种一对多的依赖关系 , 当一个对象的状态发生改变时 , 所有依赖于它的对象都得到通知并被自动更新。 </li></ul>文章地址: http://gandev.com/archives/14 <ul><li>适用于: </li></ul><ul><li>当对一个对象的改变需要同时改变其它对象 , </li></ul><ul><li>  而不知道具体 有多少对象有待改变。 </li></ul><ul><li>当一个对象必须通知其它对象, </li></ul><ul><li> 而它又不能假定其它对象是谁。换言之 , 你 不希望这些对象是紧密耦合的。 </li></ul>
  18. 18. <ul><li>谢谢! </li></ul>

×