设计模式之封装,学习笔记
2016-08-18 20:21
281 查看
封装即把代码隐藏起来,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');
使用方法和上面还是一样的,这就是封装变化点,不改变接口,只改变内部细节。
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');
使用方法和上面还是一样的,这就是封装变化点,不改变接口,只改变内部细节。
相关文章推荐
- Java-马士兵设计模式学习笔记-观察者模式-OOD 封装Listener
- 黑马程序员_学习笔记:3) 面向对象1:概述、封装、this、static、单例设计模式
- Javascript 设计模式学习笔记(1) - 封装
- js设计模式之迭代器模式学习笔记--封装简单的数组迭代器
- Java-马士兵设计模式学习笔记-观察者模式-OOD 封装event
- 设计模式学习笔记1:对设计模式学习的一点想法兼谈Facade模式
- 设计模式的学习笔记!(一)
- 设计模式学习笔记(三)
- 设计模式学习笔记(三)——Abstract Factory抽象工厂模式
- 设计模式学习笔记(4)
- J2EE设计模式学习笔记之--实际的数据存取
- 设计模式学习笔记(1)
- 面向对象的设计模式的学习笔记,不断学习归纳总结ing
- 设计模式学习笔记(一)
- 设计模式学习笔记(一)
- 设计模式学习笔记(二)——Singleton单件模式
- [设计模式学习笔记之一]面向对象是什么?
- 设计模式学习笔记2:说说Mediator模式
- 设计模式学习笔记4:对接口进行包装的Adapter
- C#设计模式学习笔记---简单工厂模式