一个最简单的类JQuery封装

HollisChuang 发布于2019-08-20 14:12 / 3265人阅读

摘要：利用来封装，上面的示例只是简单的封装，并没有实现兼容性的写法，比如对于的处理。简单的封装一下，就可以愉快的写东西啦。

有时候在写一些练习或者小的项目时，我们可能只想用用jquery的$选择器，好用的hide、show等等一些基础的API，那么我们又不想因为这么几个API来引入一个jquery的js文件，那么自己封装一个最好不过了。

(function (document) {
    function DomObject(dom) {
        this.dom = dom;
    }

    function $(selector) {
        return new DomObject(document.querySelector(selector));
    }

    DomObject.prototype.get = function () {
        return this.dom;
    }

    DomObject.prototype.on = function(eventName, eventHandler) {
        this.get().addEventListener(eventName, eventHandler);
        return this;
    }

    DomObject.prototype.css = function(styleKey, styleValue) {
        this.get().style[styleKey] = styleValue;
        return this;
    };
    DomObject.prototype.hide = function() {
        this.get().style.display = "none";
        return this;
    };
    DomObject.prototype.show = function() {
        this.get().style.display = "block";
        return this;
    }

    $(".main #btn-hide").on("click", function() {
        $("h2").hide();
    });
    $(".container #btn-show").on("click", function() {
        $("h2").show().css("color","red");
    });
})(document);

首先创建一个构造函数，传入一个dom对象作为参数，在构造函数的原型对象上就可以绑定各种事件，比如on，show甚至是jquery中没有的css等等，如果想实现链式调用，即返回this对象即可。利用querySelector来封装$，上面的示例只是简单的封装，并没有实现兼容性的写法，比如on对于IE的处理。事件侦听可以更加丰富：通用的事件侦听器只是对于jquery的实现原理进行的简单的模拟。

简单的封装一下，就可以愉快的写东西啦。

云服务器 GPU云服务器 jquery封装插件后台封装一个json 一个封装的Ajax类简单编写一个html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81451.html

2019年前端学习路线

摘要：也就是我们常见的浏览器以及内置浏览器，比如微信打开的大型移动端网页。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是语法。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。近两年来，前端开发工程师越来越火了，2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后...

cfanr 2019-08-30 15:55 评论0 收藏0
2019年前端学习路线

摘要：也就是我们常见的浏览器以及内置浏览器，比如微信打开的大型移动端网页。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是语法。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。近两年来，前端开发工程师越来越火了，2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后...

Miracle_lihb 2019-08-23 15:14 评论0 收藏0
2019年前端学习路线

摘要：也就是我们常见的浏览器以及内置浏览器，比如微信打开的大型移动端网页。这个以微信小程序为例，主要是微信团队基于前端基础来做的封装语法，主要的还是语法。学习路线放一下给大家。前端开发学习不是单一的，内容比较多，同样应用的场景也非常多。近两年来，前端开发工程师越来越火了，2019年已经到来了，很多准备入行前端开发工程师的小伙伴们，不知道准备得怎么样了呢？有的朋友在想方设法的学习，争取在年后...

zhoutk 2019-08-02 14:15 评论0 收藏0
JavaScript 框架分类

摘要：注本文摘自司徒正美编著的框架设计一书。如果是从内部架构与理念划分，目前框架可以划分为类。第种就是具有明确分层架构的框架。类型的判定必不可少，常见形式是系列。选择器是现代框架的标配。许多框架非常重视操作。注：本文摘自司徒正美编著的《JavaScript框架设计》一书。如果是从内部架构与理念划分，目前JavaScript框架可以划分为5类。第1种出现的是以命名空间为导...

elina 2019-08-21 10:21 评论0 收藏0