js封装的方法

Posted 2023-05-09

js 封装是什么意思啊？可以举个例子吗

1、JS封装就是尽量把使用的方式简单化，内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值，其他条件尽量不要使用人员进行设置。

2、JS封装的方法有函数方式、对象的方式、闭包的方式。

举例

1）函数方式
function kk(a,b)
   内部对a，b怎么处理就不需要关心了


2）对象方式
function kk(a,b)
   this.x = a;
   this.y = b;

var k = new kk(1,2);//通过面向对象的方式
alert(k.x);
3）闭包方式
function kk(a,b)
   var k = 1;
   return function tt()
      k++;
   

var u = kk(1,2);
u();//闭包实现累加
u();//闭包实现累加

参考技术A //简单理解如下：
//封装：将字段，属性，方法等封装成类
//例如：将人封装成一个类，有name,age等字段，有eat方法
 function Person(name, age) 
         this._name = name; 
         this._age = age; 
         this.getAge = function() 
              return this.age; 
         ; 
         this.setAge = function(value) 
             this.age = value; 
         ; 
         this.getName = function() 
             return this.name;
         ; 
         this.eat=function()
         
             alert(this._name+" Eat!");        
         ;
 

 //使用这个类：
var p1 = new Person("张三", 12);
p1.eat();

追问

可以简单、详细点吗

追答

这已经说的很简单。

追问

完全不懂

参考技术B //简单理解如下：
//封装：将字段，属性，方法等封装成类
//例如：将人封装成一个类，有name,age等字段，有eat方法
function Person(name, age)
this._name = name;
this._age = age;
this.getAge = function()
return this.age;
;
this.setAge = function(value)
this.age = value;
;
this.getName = function()
return this.name;
;
this.eat=function()

alert(this._name+" Eat!");
;


//使用这个类：
var p1 = new Person("张三", 12);
p1.eat();

封装Js事件代理方法

// 封装事件代理

function delegateEvent(element, tag, event, listener) {
    // 判断是否支持addEventlistener
    if(element.addEventListener){
        // 给父元素添加事件
        element.addEventListener(event,function(e){
            // 获取当前触发的元素
            var target = e.target;
            // 判断当前元素是否是我需要的
            if(target.nodeName.toLowerCase()===tag){
                listener(target);
            }
            })
    }else{
        // 兼容IE
        element.attachEvent("on"+event,function(){
            var target = window.event.srcElement;
            if(target.nodeName.toLowerCase()===tag){
                listener(target);
            }
            })
    }
    
    
}
var ul = document.getElementById("ul");

delegateEvent(ul,"li","mouseover",function(target){
    target.style.backgroundColor = "red";
})