码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-18 21:09:27      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:

  封装即把代码隐藏起来,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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!