JavaScript重构(十):强化对象封装和模块封装

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 13:30 点击:

1、类本身就是一种封装形式,先来看看最简单的封装,JavaScript中没有private关键字,对于私有成员,不如我们统一一个以下划线开头的命名来标识:
Js代码 
var User = function(name){ 
    this._name = name; 
    this.getName = function(){ 
        return _name; 
    }; 
}; 
 
 
2、不过,上面的办法还不够好,我依然可以用user._name访问到这个变量。现在换个思路,通过使用var来定义User中的name属性,并且通过getName方法来给它暴露访问入口,实现了private一样的效果:
Js代码 
var User = function(name){ 
    var name = arguments[0]; 
    this.getName = function(){ 
        return name; 
    }; 
}; 
User.SORT = 1; 
 
var user = new User("Test"); 
alert(user.getName());  //正确打印 
alert(user.name);       //封装起来的私有成员,不能随意访问 
alert(User.SORT);       //类变量 
 
 
3、通过匿名方法,把代码块的影响范围限制在一定区域内:
Js代码 
(function($){ 
    $.fn.extend({ 
        sayHi : function(){ 
            alert("Hi: " + this.get(0).tagName); 
        } 
    }); 
})(jQuery); 
 
jQuery("body").sayHi(); 
 上例中,外部由于命名冲突的关系,无法使用“$”来获取jQuery的引用,但是通过这样匿名函数的调用,在函数实现内部依然可以使用到“$”,并且给JQuery的原型增加了一个sayHi的方法。
 
 
4、命名空间带来的封装,参见这篇博客。
 
 
5、通过合理规约JS文件的依赖关系和加载执行顺序,保证区域代码执行时对外部的访问范围:
Js代码 
//首先加载URLUtil的类定义,再加载User的类定义,保证了依赖关系是User依赖于URLUtil,而不会倒置,避免了在URLUtil的代码区域附近去访问User对象 
var URLUtil = { 
    getURL : function(){ 
        return "http://xxx"; 
    } 
}; 
 
…… 
 
var User = function(){ 
    var url; 
    this.setURL = function(newUrl){ 
        url = newUrl; 
    }; 
}; 
 
…… 
 
var user = new User(); 
user.setURL(URLUtil.getURL()); 

作者“四火的BLOG”
 

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1