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

时间: 2019-07-06阅读: 226标签: 代码

前言

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

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

接下来我会对类库的核心api进行讲解和展示,文章最后后附带类库的完整源码。


类库设计思路



API介绍和效果展示

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

Xuery('#demo').on('click', function(e){ 
    alert('hello world!') 
}) 

访问和设置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' 
})

访问和设置属性 Xuery.attr(string|object, ?[string]) 案例如下:

// 访问attr 
Xuery('#demo').attr('title') 
// 设置attr 
Xuery('#demo').attr('title', '1024px') 
// 设置attrs 
Xuery('#demo').attr({ 
    title: '1024px', 
    name: '1024px' 
})

访问和设置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.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.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);


来自:http://developer.51cto.com/art/201907/599118.htm


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/4046

如何阅读别人的代码?

比起阅读代码,我更喜欢看别人的文章或者书。我喜欢他们跟我面对面的交流,用简单的自然语言或者画图解释他们的思想。有了思想,我自然知道如何把它变成代码,而且是优雅的代码

把同事的代码重写得干净又整洁,老板却让我做回滚?

我的同事把这周写的代码提交了。我们在开发一个图形编辑器画布,已经实现了形状调整功能,即通过拖拽形状边缘的手柄来调整形状(比如矩形和椭圆形)。代码可以运行。

掌握依赖注入5大原则,无需额外编代码!

如果是第一次接触这个概念,可能会一时没有头绪,网上的各种解释可能会让你更加混乱,并觉得它没那么简单。 其实依赖注入本身是单纯、简单的。简单来说,依赖注入是一种方式、方法或者说手段

如何在 React 中优雅的写 CSS?

如果是 ui 组件库中使用建议使用 namespaces 方案,ui 组件库维护人员基本固定,遵守约定的规范较为容易,可通过约定规范来解决不同组件 CSS 相互影响问题,由于 ui 组件库会应用于整个公司的产品

让代码具有可读性的10种最佳实践

如果咱们关注代码本身结构及可读笥,而不是只关心它是否能工作,那么咱们写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写能应付当前工作的代码。

如何执行innerHtml中的script代码?

有时候我们会有把一整段 HTML 动态塞进页面的需求,例如渲染了一个模板,从服务器端获取了一段广告代码等。一般情况下我们使用 container.innerHTML 即可

编写可维护的Js代码

不省略分号(在原生及使用工具函数的情况不建议省略,在使用比较完善的框架如vue或者自己配置好 webpack 时可以省略),1行代码长度不超过80个字符(个人比较推荐,毕竟编辑器的自动换行有时真的很难受)

200行代码实现超轻量级编译器

本篇和大家一起学习写一款超级简单轻量,去掉注释只有不到200行代码的编译器。,该编译器将类 lisp 语法函数调用 编译为 类C语言函数调用

什么才是优秀的代码?

究竟什么是优秀的代码?Robert Martin的一句话可以完美诠释。代码质量的唯一衡量标准是每分钟说多少次WTF,我来解释一下这句话。当我在做code review时,通常会有三种不同的感受:

好代码的用处,怎么写出好代码?

实际上本书建立在一个相当不可靠的前提之上:好的代码是有意义的。我见过太多丑陋的代码给他们的主人赚着大把钞票,所以在我看来,软件要取得商业成功或者广泛使用

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全