如何用不到200行代码写一款属于自己的js类库

徐小夕
• 阅读 1064

前言

JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的类库。我们将会学到如下知识点:

  • 闭包:减少变量污染,缩短变量查找范围
  • 自执行函数在对象中的运用
  • extend的实现原理
  • 如何实现跨浏览器的事件监听
  • 原型链与继承

接下来我会对类库的核心api进行讲解和展示,文章最后后附带类库的完整源码,在我之前的文章《3分钟教你用原生js实现具有进度监听的文件上传预览组件》中也使用了类似的方式,感兴趣的可以一起学习,交流。

更加完整的类库地址,请移步github《Xuery——仿jquery API风格的轻量级可扩展的原生js框架

类库设计思路

如何用不到200行代码写一款属于自己的js类库

API介绍和效果展示

  1. 事件绑定 Xuery.on(eventName, fn) 案例如下:

    Xuery('#demo').on('click', function(e){
     alert('hello world!')
    })
  2. 访问和设置css Xuery.css(string|object, ?[string]) 案例如下:

    // 访问css
    Xuery('#demo').css('width')
    // 设置css
    Xuery('#demo').css('width', '1024px')
    // 设置css
    Xuery('#demo').css({
     width: '1024px',
     height: '1024px'
    })
    1. 访问和设置属性 Xuery.attr(string|object, ?[string]) 案例如下:
      // 访问attr
      Xuery('#demo').attr('title')
      // 设置attr
      Xuery('#demo').attr('title', '1024px')
      // 设置attrs
      Xuery('#demo').attr({
      title: '1024px',
      name: '1024px'
      })
  3. 访问和设置html 案例如下:

    // 访问
    Xuery('#demo').html()
    // 设置
    Xuery('#demo').html('前端学习原生框架')

还有其他几个常用的API在这里就不介绍了,大家可以在我的github上查看,或者基于这套基础框架,去扩展属于自己的js框架。

核心源码

以下源码相关功能我做了注释,建议大家认真阅读,涉及到原型链和构造函数的指向的问题,是实现上述调用方式的核心,又不懂可以在评论区交流沟通。

/**
 * 链模式实现自己的js类库
 */
(function(win, doc){
    var Xuery = function(selector, context) {
        return new Xuery.fn.init(selector, context)
    };

    Xuery.fn = Xuery.prototype = {
    constructor: Xuery,
    init: function(selector, context) {
        // 设置元素长度
        this.length = 0;
        // 默认获取元素的上下文document
        context = context || document;
        // id选择符,则按位非将-1转化为0
        if(~selector.indexOf('#')) {
        this[0] = document.getElementById(selector.slice(1));
        this.length = 1;
        }else{
        // 在上下文中选择元素
        var doms = context.getElementsByTagName(selector),
        i = 0,
        len = doms.length;
        for(; i<len; i++){
            this[i] = doms[i];
        }
        }
        this.context = context;
        this.selector = selector;
        return this
    },
    // 增强数组
    push: [].push,
    sort: [].sort,
    splice: [].splice
    };

    // 方法扩展
    Xuery.extend = Xuery.fn.extend = function(){
    // 扩展对象从第二个参数算起
    var i = 1,
    len = arguments.length,
    target = arguments[0],
    j;
    if(i === len){
        target = this;
        i--;
    }
    // 将参数对象合并到target
    for(; i<len; i++){
        for(j in arguments[i]){
        target[j] = arguments[i][j];
        }
    }
    return target
    }

    // 扩展事件方法
    Xuery.fn.extend({
    on: (function(){
        if(document.addEventListener){
        return function(type, fn){
            var i = this.length -1;
            for(; i>=0;i--){
            this[i].addEventListener(type, fn, false)
            }
            return this
        }
        // ie浏览器dom2级事件
        }else if(document.attachEvent){
        return function(type, fn){
            var i = this.length -1;
            for(; i>=0;i--){
            this[i].addEvent('on'+type, fn)
            }
            return this
        }
        // 不支持dom2的浏览器
        }else{
        return function(type, fn){
            var i = this.length -1;
            for(; i>=0;i--){
            this[i]['on'+type] = fn;
            }
            return this
        }
        }
    })()
    })

    // 将‘-’分割线转换为驼峰式
    Xuery.extend({
    camelCase: function(str){
        return str.replace(/\-(\w)/g, function(all, letter){
        return letter.toUpperCase();
        })
    }
    })

    // 设置css
    Xuery.fn.extend({
    css: function(){
        var arg = arguments,
        len = arg.length;
        if(this.length < 1){
        return this
        }
        if(len === 1) {
        if(typeof arg[0] === 'string') {
            if(this[0].currentStyle){
            return this[0].currentStyle[arg[0]];
            }else{
            return getComputedStyle(this[0], false)[arg[0]]
            }
        }else if(typeof arg[0] === 'object'){
            for(var i in arg[0]){
            for(var j=this.length -1; j>=0; j--){
                this[j].style[Xuery.camelCase(i)] = arg[0][i];
            }
            }
        }
        }else if(len === 2){
        for(var j=this.length -1; j>=0; j--){
            this[j].style[Xuery.camelCase(arg[0])] = arg[1];
        }
        }
        return this
    }
    })

    // 设置属性
    Xuery.fn.extend({
    attr: function(){
        var arg = arguments,
        len = arg.length;
        if(len <1){
        return this
        }
        if(len === 1){
        if(typeof arg[0] === 'string'){
            return this[0].getAttribute(arg[0])
        }else if(typeof arg[0] === 'object'){
            for(var i in arg[0]){
            for(var j=this.length -1; j>= 0; j--){
                this[j].setAttribute(i, arg[0][i])
            }
            }
        }
        }
        else if(len === 2){
        for(var j=this.length -1; j>=0; j--){
            this[j].setAttribute(arg[0], arg[1]);
        }
        }
        return this
    }
    })

    // 获取或者设置元素内容
    Xuery.fn.extend({
    html: function(){
        var arg = arguments,
        len = arg.length;
        if(len === 0){
        return this[0] && this[0].innerHTML
        }else{
        for(var i=this.length -1; i>=0; i--){
            this[i].innerHTML = arg[0];
        }
        }
        return this
    }
    })

    Xuery.fn.init.prototype = Xuery.fn;
    window.Xuery = Xuery;
})(window, document);

最后

欢迎关注《趣谈前端》,获取更多前端知识精粹学习社群.

更多推荐

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho