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

徐小夕 等级 383 0 0

前言

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);

最后

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

更多推荐

收藏
评论区

相关推荐

让你瞬间提高工作效率的常用js函数汇总(持续更新)
前言 本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下: 1. 常用的正则校验 2. 常用的设备检测方式 3. 常用的日期时间函数 4.
如何用不到200行代码写一款属于自己的js类库
前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的类库。我们将会学到如下知识点: 闭包:减少变量污染,缩短变量查找范围 自执行函数在对象中的运用 extend的实现原理 如何实现跨浏览器的事件监听 原型链与继承 接下来我会对类库
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
大佬说:“不想加班你就背会这 10 条 JS 技巧”
(https://imghelloworld.osscnbeijing.aliyuncs.com/83909ede68f61936ac3ae10c9ce8b223.png) 为了让自己写的代码更优雅且高效,特意向大佬请教了这 10 条 JS 技巧 1\. 数组分割 const listChunk (list
几个常用js库,别再重复造轮子了
年底了,总结下今年用到的一些有意思的《js轮子》(只是大概列出些比较有意思的库,每个标题都是超链接,可点击自行查阅) 希望能对您有用! 如有意思的 轮子 可以在评论列出一起讨论下 color(https://links.jianshu.com/go?tohttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fco
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
轻松搞定构造函数,new,实例对象,原型,原型链,ES6中的类
本文主要是之前我的 《一文搞懂JS系列》 的后续,至于为什么标题变了,因为标题字数写不下,对于JS基础感兴趣的可以看看我之前写的系列。标题变初心不变,接下来开始今天的内容。前言本文主要讲的就是函数,方法,构造函数,new操作符,实例对象,原型,原型链,ES6类。因为这几个知识点都是有互通的关系的,所以一起讲,方便大家疏通整个关于这方面
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
js高频手写大全
1. 手写instanceofinstanceof作用:判断一个实例是否是其父类或者祖先类型的实例。instanceof 在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype查找失败,返回 false2. 实现数组的map方法3. reduce实现数组的map方法4. 手写数组的reduce方法reduce() 方法接收一个函数作为累
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
Js可以写桌面应用端?
1、下载nw.jshttps://nwjs.io/最好下载sdk版本。2、解压打开安装包下载完之后,解压打开图中的「app文件夹」是我自己创建的,你也需要自己创建一个,里面放你项目文件。「app文件夹」中一般放一个index.html(页面展示),另外还需要创建一个package.json文件(参数配置):         "name":  "first 
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生