自己封装一个简单的jQuery

#自己封装一个简单的jQuery| 来源: 网络整理| 查看: 265

jQuery优点

虽然jQuery已经渐渐的退出了历史舞台，但是现在市场上还有大量的网站使用该框架，因为它具有以下优点。

轻量级：文件大小非常小，压缩包只有18k左右。 2.强大的选择器：不仅支持css里所有选择器还有jQuery独有的选择器。 3.DOM封装 jQuery封装了大量常用DOM操作。 4.兼容性：兼容性较好，可以在大部分常见的浏览器兼容。 5.链式编程：对发生在同一个jQuery对象上进行一组动作。 6.丰富的插件支持核心理念就是‘“write less,do more”

今天就自己试着还原一下jQuery。

封装一个简单的jQuery

封装函数前先需要明确功能需求，需要封装两个函数，第一个函数获取节点所有的兄弟节点。第二个函数用来给上述获取到的节点增加class和css属性。

1.第一个函数 function getSiblings(node){ let allChildren = node.parentNode.allChildren let array = { length:0; } for (let i =0;i node.classList.add(value)) } // 遍历classes中的value，给节点增加所有classes中的value 3.命名空间

为了方便使用，需要给上面的函数增加命名空间

var swDOM = {}; swDOM.getSiblings(nodes); swDOM.addClass(node,['a','b','c']) //这样下次直接调用swDOM.xxx()就可以调用函数。 //但是swDOM.xxx调用起来还是太复杂，就可以变成如下 window.$ = swDOM 4.把node放到前面

为了让这两个函数看起来更像jQuery。我们需要把node放到addClass和getSibling前面。有两种方法：（1）拓展node接口，在Node.prototype加上函数。

Node.prototype.addClass = function(classes){ classes.forEach((value)=> node.classList.add(value)) }

这样就可以直接操作xxx.addClass(['a','b','c'])

(2)创造一个新的接口

function Node2(node){ return { element: node, getSiblings: function(){ }, addClass: function(){ } } } let node =document.getElementById('x') let node2 = Node2(node) node2.getSiblings() node2.addClass()

最后，再在之前的基础上对代码进行修改，使之能获取文本。

window.jQuery = function(nodeOrSelector) { let nodes = {} if (typeof nodeOrSelector === 'string'){ let temp =document.querySelectorAll(nodeOrSelector) for(let i = 0 ; ili中所有文本改为hi。

这样一个简单的jQuery就完成啦

【本文地址】

公司简介

联系我们