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(){};//继承自PersonJack.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);

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

转载于:https://www.cnblogs.com/ymh2013/p/5199172.html

Javascript封装相关推荐

javaScript封装的各种写法
javaScript封装的各种写法在javascript的世界里,写法是个神奇的现象,真是百家齐开放啊!每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来.今天,我就 ...
php js写法,javaScript封装的各种写法
这篇文章主要介绍了javaScript封装的各种写法,通过列举优缺点和使用场景详细介绍了几种JavaScript封装的格式,对JavaScript的感兴趣朋友可以参考下本篇文章在javascript ...
javascript封装与多态的体现
封装是实现面向对象程序设计的第一步,封装就是将数据与函数等集合在一个个的单元中(我们称之为类).被封装的对象通常被称为抽象数据类型. 在传统的面向对象语言中有访问修饰符,如Private:只有类本身能 ...
JavaScript 封装设计模式介绍
对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...
CSS+JavaScript封装一个图标旋转组件
1. 前言: 由于自己想封装一个类似Bootstrap的前端框架,当然也只是简单实现.看见了一个网站上的上下箭头的旋转动态效果,于是就想着自己也来封装一个这个效果.效果如下: 2. 说明: ...
html页面封装是什么,javascript封装是什么？
封装,即隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别:将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成& ...
JavaScript封装一个注册函数解决兼容问题
我们知道JavaScript注册(绑定)事件主要有两类方式,第一类传统方式具有注册事件的唯一性,即对于同一元素的同一事件,不会出现两个处理函数,如下 var btn = document.queryS ...
JavaScript 封装插件学习笔记（一）
此篇只是笔记,在借鉴.参考.模仿的过程,可能不完整,请多指教! 定义插件名称要注意命名冲突,防止全局污染. 1.第一种Javascript对象命名:(Javascript语言是"先解析,后运 ...
javascript - 封装原生js实现ajax
1 /* 2 * ajax方法 3 */ 4 var Ajax = function() { 5 var that = this; 6 //创建异步请求对象方法 7 that.createXHR = ...
JavaScript封装异步函数 —— 【异步编程】 —— 如何获取一个函数中异步操作的结果？
我们在写项目的时候有没有遇到这样的一个情况:一个函数里,嵌套着另一个异步函数,那如何在外面获取这个异步函数的结果呢?(return值) 就比如这样一个例子: function fn() ...

Javascript封装

Javascript封装相关推荐

最新文章

热门文章