论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

如何写出可维护面向对象的JS

文章类别:Javascript | 发表日期:2011-7-26 9:40:23

很多人看到这个题目的时候是不是都会有namespace的想法;

  平时的工作跟javascript打交道的时候一般是做一些页面里的交互体验增强,基本上全是用jQuery,查找一些元素,做些计算,做些属性更改,做一些事件绑定处理,做些AJAX;

  数据模型也就是定义JSON对象,其实用javascript OO定义前端的model的情况比较少啦;

  这两天读了网上的一些文章,今天稍微整理一下关于这个问题的多个角度。


  1. Object Instantiation

 // 基础,不多解释了

var People = function People(firstName,lastName) {

     this.firstName = firstName;

     this.lastName = lastName;

     this.getName = function() {

          return this.lastName+" "+this.firstName;     // chinese way

     }

}
 

  2. Prototype Inheritence

// 常规写法, 当然还有些其他写法, 例如参考2里的Object.create, 但是本质是一样的啦

var Employee = function Employee(firstName, lastName, salary) {

     People.call(this,firstName,lastName);

     this.salary = salary;

}
Employee.prototype = new People();
 


3. Encapsulation(Public/Private)

  OO面向对象的特性之一,封装,javascript的也能搞定,不酷,甚至有点恶心


Public

     function Constructor(...) {

          this.membername = value;

     }

     Constructor.prototype.membername = value;

Private

     function Constructor(...) {

          var that = this;

          var membername = value;

          function membername(...) {...}

     }

     Note: The function statement

          function membername(...) {...}

     is shorthand for

          var membername = function membername(...) {...};

Privileged

     function Constructor(...) {

          this.membername = function (...) {...};

     }
 

  4. Namespace

  学习java的名称空间,javascript里一直没有标准的做法,从功能上当然是可行的

var myNamespace = {

    foo: function() {

    },

    bar: function() {

    }

};

myNamespace.foo();
 
 

  下面这段是从《JavaScript DOM 高级程序设计》中摘的,貌似更高级一点

(function() {

     // 通过 ID 获取 Element 对象

     function $(id) {

          return document.getElementById(id);

     }

     // 显示对应 ID 的对象的节点类型名字

     function myMethod(id) {

          alert($(id).nodeName);

     }

     // 这是对外的接口

     window['myNamespace']= {}

     window['myNameSpace']['$'] = $;

})();
 

5. Module (commonJS)

  javascript越来越流行,从前几年的AJAX,到现在的nodeJS,前端MVC等等,

  腾讯做的WebQQ也是这一范畴,或者还有360桌面,网页和App的界限越来越模糊,

  甚至有完全基于浏览器的ChromOS的硬件

  这些都说明,javascript天降大任,虽然javascript先天发育得不好。。。

  commonJS其实是个规范,而nodeJS是这个规范的实现之一,它的目标是做一个javascript标准库(就像JDK,ruby Gem一样),借助javascript引擎(eg: V8),使得javascript也能处理更多的应用场景,学习其他语言成熟的模块化当然是可行的。

  当然,自己实现javascript模块的时候,从逻辑上和物理上区分也是不错的实践方法。

 

  6. Module load (requireJS)

  javscript的库其实很多,有非常成功的jQuery,prototype,YUI等等,由于global对象的关系,不同的库存在对象的冲突,

  这时候就需要模块加载机制,管理很多js文件,避免冲突等等,requireJS是用的比较多的一个加载库,google其实也有。

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058