设计模式之封装，学习笔记

标签：

　　封装即把代码隐藏起来，why？好好的为什么要隐藏起来,这里指的隐藏并非真的隐藏，而是把一些复杂的代码给包裹起来，留下的是一个接口，到时候要用的时候直接调用这个接口即可，这样那些不是干技术的也可以轻松上手了。有时我们还会把一些私有属性属性给封装起来，如下：

function fn(){
　　var _name = ‘javascript‘;
　　return {getName:function(){
　　　　return _name;
　　}};
}
fn().getName(); //javascript

或

var f = (function(){
　　var _name = ‘javascript‘;
　　return function(){
　　　　return _name;
};
}());

或

var f = null;
(function(){
　　var _name = ‘javascript‘;
　　f = _name;
}())
alert(f); //javascript

　　这样外部就无法修改里面的_name值了，如果想让外部修改可以这样。

var f = (function(){
　　var _name = ‘javascript‘;
　　return {
　　　　getName:function(){
　　　　　　return _name;
　　　　},
　　　　setName:function(name){
　　　　　　_name = name;
　　　　}
　　};
}());

f.getName(); //javascript
f.setName(‘CSS3‘);
f.getName(); //CSS3

　　封装还有一点就是把将来可能会发生变化的给封装起来，另外就是它不在乎里面的代码是怎么实现的，它只关心你留给他的接口是否有发生变化。如下就是一个封装变化点。

function getByClass(className){
　　var tags = document.getElementsByTagName(‘*‘);
　　var arr = [];
　　var t = null;
　　for(var i=0,len=tags.length;i<len;i++){
　　　　t = tags[i].className.split(‘ ‘);
　　　　for(var k=0;k<t.length;k++){
　　　　　　if(t[k]===className){
　　　　　　　　arr.push(tags[i]);
　　　　　　　　break;
　　　　　　}
　　　　}
　　}
　　return arr;
}
getByClass(‘className‘);

　　这段代码的意思是通过class来获取元素，大家知道IE低版本浏览器不兼容document.getElementsByClassName。所以我们进行了封装，使用的话就只需要通过getByClass来获取，假如有一天浏览器都兼容document.getElementsByClassName这个方法的话可以这样。

function getByClass(className){
　　return document.getElementsByClassName(className);
}
getByClass(‘li‘);

使用方法和上面还是一样的，这就是封装变化点，不改变接口，只改变内部细节。

设计模式之封装，学习笔记

标签：

原文地址：http://www.cnblogs.com/pssp/p/5785241.html