用不到200行代码编写自己的js类库

前言

JavaScript的核心是支持面向对象，同时也提供了强大灵活的OOP语言能力。在本文中，我们将使用面向对象的方法来教大学用原生js编写一个类似jQuery的类库。我们将学习以下知识点：

闭包：减少变量污染，缩短变量搜索范围对象中自执行函数的应用如何实现跨浏览器事件监控的原型链和继承接下来，我将讲解并展示类库的核心api。文末附有类库的完整源代码。在我之前的文章《3分钟教你用原生js实现具有进度监听的文件上传预览组件》中，使用了类似的方式。感兴趣的人可以一起学习交流。

要获得更完整的类库地址，请访问github 《Xuery——仿jquery API风格的轻量级可扩展的原生js框架》(本地下载)

类库的设计思想

API的介绍和效果展示

1.事件绑定Xury . on(event name，fn)的情况如下：

雪瑞(' #demo ')。on('click '，function(e){ alert('hello world！') })2.访问和设置css Xuery.css(字符串|对象，[字符串])的情况如下：

//访问cssxuery ('# demo ')。CSS(' width ')//设置CSS Xury(' demo ')。CSS ('width '，' 1024 px ')//设置CSS Xury(' demo ')。CSS({ width : '[string])的情况如下：

//访问attrxuery ('# demo ')。attr(' title ')//设置attrxuery ('# demo ')。attr ('title '，' 1024 px ')//set attrsxuery(' demo ')。attr ({title : '

//访问雪瑞(' #demo ')。html()//set Xury(' # demo ')。这里不介绍html(‘前端学习原生框架’)和其他几种常用的API。您可以在我的github上检查它们，或者基于这个基本框架扩展您自己的js框架。

核心源代码

我已经对以下源代码的相关功能做了评论，建议大家仔细阅读。涉及到原型链和构造函数的指向问题，这是实现上述调用方式的核心，但是不知道怎么在评论区交流。

/** * 链模式实现自己的射流研究…类库*/(函数(win，doc){ var Xury=函数(选择器，上下文){返回new Xury。fn。init(选择器，上下文)}；徐里。fn=Xury。原型={构造函数： Xury，init:函数（选择器，上下文){ //设置元素长度这个。长度=0；//默认获取元素的上下文文档上下文=上下文||文档；//id选择符，则按位非将-1转化为0 if(~选择器。indexof(' # '){ this[0]=文档。getelementbyid(选择器。切片(1))；这个。长度=1；}else{ //在上下文中选择元素var doms=上下文。getelementsbytagname(选择器)，i=0，len=doms . length for(；伊琳；I){这个[我]=doms[我]；} } this . context=context this . selector=selector返回此},//增强数组push: [].推送，sort: [].排序，拼接： []。拼接};//方法扩展徐里。extend=Xury。fn。extend=function(){//扩展对象从第二个参数算起var i=1，len=arguments.length，target=arguments[0]，j；if(I===len){ target=this；我-；} //将参数对象合并到的目标(;伊琳；i ){对于(参数[i]中的j){ target[j]=参数[I][j]；} }返回目标} //扩展事件方法徐里。fn。extend({ :(function(){ if(document。addeventlistener){返回函数(类型，fn){ var I=this。长度-1；for(；I=0；我- ){这个[我]。addEventListener(类型，fn，false) }返回此} //ie浏览器dom2级事件} else if(文档。attach event){ return function(type，fn){ var I=this。长度-1；for(；I=0；我- ){这个[我]。addEvent('on ')类型，fn) }返回此} //不支持dom2的浏览器}else{ return function(type，fn){ var I=this。长度-1；for(；I=0；I-){ this[I][' on ' type]=fn；}返回此} } })() }) //将'-'分割线转换为驼峰式徐里。extend({ camelocate : function(str){ return str。替换(/\-(\ w)/g，函数(all，letter){ return letter。touppercase()；}) } }) //设置CSS Xury。extend({ CSS : function(){ var arg=arguments，len=arg.lengthif(this。长度1){返回this } if(len===1){ if(arg[0]===' string '的类型){ if(this[0]).current style){ 0返回此[0]。当前样式[arg[0]]；}else{返回getComputedStyle(this[0]，false)[arg[0]]} } else if(arg[0]==' object '){ for(arg[0]中的var I){ for(var j=this)。长度-1；j=0；j-){ 0这个[j].风格[Xury。camel case(I)]=arg[0][I]；} } } } else if(len===2){ for(var j=this。长度-1；j=0；j-){ 0这个[j].风格[Xury。camel case(arg[0])]=arg[1]；} }返回此} }) //设置属性徐里。extend({ attr : function(){ var arg=引数，len=arg . lengthif(len 1){ return this } if(len===1){ if(arg[0]的类型==' string '){ return this[0]).getAttribute(arg[0])} else if(arg[0]===' object '){ for(arg[0]中的var I){ for(var j=this。长度-1；j=0；j-){ 0这个[j].setAttribute(i，arg[0][I])} } } } else if(len===2){ for(var j=this)。长度-1；j=0；j-){ 0这个[j].setAttribute(arg[0]，arg[1])；} }返回此} }) //获取或者设置元素内容徐里。fn。extend({ html : function(){ var arg=引数，len=arg . lentif(len===0)}返回这个[0]这个[0].innerHTML } else { for(var I=this。长度-1；I=0；我- ){这个[我]。innerHTML=arg[0]；} }返回此} })Xury。fn。初始化。原型=Xury。fn；窗户。雪瑞=雪瑞；})(窗口、文档);总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。