用 JS 封装一个库的基本思路

最新推荐文章于 2026-05-05 08:55:05 发布

原创最新推荐文章于 2026-05-05 08:55:05 发布 · 244 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

文章介绍了使用JavaScript模拟jQuery的addClass方法的三种实现方式：闭包、构造函数和类。闭包示例展示了变量作用域和函数嵌套；构造函数和原型用于创建对象并添加方法；类的方式则是ES6中的面向对象编程表示。

今天我尝试用 JS 来实现 jQuery 中最简单的 API：addClass，一共有三种写法：

第一种是使用闭包，代码如下:

let iii=0
function aaa(){ 

let bbb=1

function ddd(){

let eee=bbb 

return eee;

};   return ddd() ;  } 

iii=aaa()

第二种是使用构造函数（或者说原型），代码如下:

function Person(name='匿名',age=0){
    this.name=name
    this.age=age        //省略了return
}
Person.prototype={
    construtor:Person, 
    sayHi(){      console.log(`你好，我是${this.name}`)     },    //将函数内部的属性变为隐藏属性
 run(){         console.log(`${this.name}在跑步`)        }        
           }       
 const f1=new Person(`fang`,18)  
 f1.sayHi()  
 f1.run()

第三种是使用类，代码如下:

class Person 
  {          
     constructor(name='匿名',age=0)
 {this.name=name  , this.age=age}
 sayHi(){        console.log(`你好，我是${this.name}`)      }  
 run(){         console.log(`${this.name}在跑步`)         }       
  }
 const p1=new Person('wang',18)