Javascript封装

一封装

var person = function(){
    //变量作用域为函数内部,外部无法访问
    var name = "default";       

    return {
       getName : function(){
           return name;
       },
       setName : function(newName){
           name = newName;
       }
    }
}();    

print(person.name);//直接访问,结果为undefined

print(person.getName());

person.setName("abruzzi");

print(person.getName());

得到结果如下:

undefined

default

abruzzi

二实现类和继承

function Person(){
    var name = "default";       

    return {
       getName : function(){
           return name;
       },
       setName : function(newName){
           name = newName;
       }
    }
    };   

    var p = new Person();
    p.setName("Tom");
    alert(p.getName());

    var Jack = function(){};
    //继承自Person
    Jack.prototype = new Person();
    //添加私有方法
    Jack.prototype.Say = function(){
        alert("Hello,my name is Jack");
    };
    var j = new Jack();
    j.setName("Jack");
    j.Say();
    alert(j.getName());

三结果缓存

我们开发中会碰到很多情况,设想我们有一个处理过程很耗时的函数对象,每次调用都会花费很长时间,

那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。

var CachedSearchBox = (function(){
    var cache = {},
       count = [];
    return {
       attachSearchBox : function(dsid){
           if(dsid in cache){//如果结果在缓存中
              return cache[dsid];//直接返回缓存中的对象
           }
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建
           cache[dsid] = fsb;//更新缓存
           if(count.length > 100){//保正缓存的大小<=100
              delete cache[count.shift()];
           }
           return fsb;
       },    

       clearSearchBox : function(dsid){
           if(dsid in cache){
              cache[dsid].clearSelection();
           }
       }
    };
})();    

CachedSearchBox.attachSearchBox("input");

四匿名自执行函数

我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,

比如:别的函数可能误用这些变量;造成全局对象过于庞大,影响访问速度(因为变量的取值是需要从原型链上遍历的)。

除了每次使用变量都是用var关键字外,我们在实际情况下经常遇到这样一种情况,即有的函数只需要执行一次,其内部变量无需维护,

比如UI的初始化,那么我们可以使用闭包:

var data= {
    table : [],
    tree : {}
};    

(function(dm){
    for(var i = 0; i < dm.table.rows; i++){
       var row = dm.table.rows[i];
       for(var j = 0; j < row.cells; i++){
           drawCell(i, j);
       }
    }    

})(data); 

我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在函数执行完后会立刻释放资源,关键是不污染全局对象。

时间: 2024-10-14 04:56:10

Javascript封装的相关文章

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

基于JavaScript封装的Ajax工具类

前段是件由于工作需要无奈编写了一个给予JavaScript封装的工具类,技术有限,误喷,感谢大家的支持. 1.以下是JavaScript 的 Ajax 工具类. function createXMLHttpRequest(){ var req; if(window.XMLHttpRequest){ //兼容非IE 并且兼容 IE7以上的浏览器 req = new XMLHttpRequest(); }else if(window.ActiveXObject){ //在 Internet Expl

【JavaScript 封装库】BETA 5.0 测试版发布!

JavaScript 前端框架(封装库) BETA 5.0 已于10月10日正式发布,今天开始提供 BETA 5.0 的 API 参考文献.相较于之前 5 个版本的发布都是草草的提供源代码,并没有很多人参与进来,而且各大博客对源代码的处理也不是很感冒,导致发表的文章很大程度上并没有人知道.所以从此次开始,今后每次发布新版本都会提供相应的 API 手册,目的就是要让大家都能够参与其中,了解与使用框架.简化大家在平时开发中的步骤,提高产出效率,这也是我的目标. 参考文档分为 5 大部分,分别为:1.

【JavaScript 封装库】BETA 2.0 测试版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 2.0 版 6 迭代版本: BETA 1.0 7 功能总数: 50 个 8 新增总数: 6 个 9 删除总数: 0 个 1

【JavaScript 封装库】Prototype 原型版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 Prototype 版 6 迭代版本: 无 7 功能总数: 14 个 8 功能介绍: 9 1. 实现代码连缀 10 2. id /

【JavaScript 封装库】BETA 1.0 测试版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 1.0 版 6 迭代版本: Prototype 7 功能总数: 44 个 8 新增总数: 30 个 9 删除总数: 0 个

【JavaScript 封装库】BETA 4.0 测试版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 4.0 版 6 迭代版本: BETA 3.0 7 插件总数: 12 个 8 库方法数: 26 个 9 功能总数: 67 个

【JavaScript 封装库】BETA 3.0 测试版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 BETA 3.0 版 6 迭代版本: BETA 2.0 7 插件总数: 8 个 8 库方法数: 20 个 9 功能总数: 48 个

面向对象的JavaScript --- 封装

面向对象的JavaScript --- 封装 封装 封装的目的是将信息隐藏.一般而言,我们讨论的封装是封装数据和封装实现.真正的封装为更广义的封装,不仅包括封装数据和封装实现,还包括封装类型和封装变化. 封装数据 封装实现 封装类型 封装变化 封装数据 在许多语言的对象系统中,封装数据是由语法解析来实现的,这些语言也许提供了 private.public.protected 等关键字来提供不同的访问权限.但JavaScript并没有提供对这些关键字的支持,我们只能依赖变量的作用域来实现封装特性,

分享几个Javascript 封装方法

基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写"; this.hobbys = []; } Person.prototype = { sayName:function(){ console.log(this.name); }, sayAge:function(){ console.log(this.age); }, addHobby:function(ho