jQuery设计模式

南派三叔
111 阅读2分钟

正如大家所知，jQuery库是如今使用最长寿的库，它里面运用到了很多的设计模式，譬如：不用new的构造函数；jQuery()支持多种参数；用闭包隐藏细节；jQuery().text()既可读取文本也可改写文本；jQuery.prototype改写为$.fn的别名；针对不同的浏览器使用不同的代码的适配器。

给一个HTML文档，如下：

<body>
    <div id="test">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>

一、jQuery 如何获取元素

jQuery的基本设计思想和主要用法，就是获取元素并对其进行操作，获取元素时就使用了不用new的构造函数以及支持多种参数的重构

window.$=window.jQuery=function(selector){
    let elements
    if(typeof elements==='string'){
        if(elements[0]==='<'){
            elements=[createElement(selector)]
        }else{
            elements=document.querySelector(selector)
        }
    }else if(elements instanceof Array){
        elements=selector
    }
    
    function createElement(string){
        document.createElement(string)
    }
    
    const api=Object.create(jQuery.prototype)
    Object.assign(api,{elements:elements,oldApi:elements.oldApi})
    return api
}

$('#test') 即可获取id为test的元素;

$('#test').find('.child')//在ID为test的元素里面查找类名为child的元素。

二、jQuery 的链式操作是怎样的

链式操作就是可以对获取的元素进行一系列操作，最终可以以链条的形式写到一起。下面是一段我写的一段jQuery的构造函数

jQuery.prototype={
    constructor:jQuery,
    each(fn) {
        for (let i = 0; i < this.elements.length; i++) {
            fn.call(null, this.elements[i], i)
        }
    },
    parent() {
        let array = []
        this.each(n => {
            if (array.indexOf(n.parentNode) === -1) {
                array.push(n.parentNode)
            }
        })
        return jQuery(array)
    },
    children() {
        let array = []
        this.each(n => {
            array.push(...n.children)
        })
        return jQuery(array)
    },
}

我只是想说$('#test').parent().children()这就是一个链式操作， 再如$('#test').siblings().addClass('.red')//为ID为test的元素的兄弟元素添加一个red类名。

三、jQuery 如何创建元素

创建元素很简单，在上面获取元素时，我其实就实现了创建元素的操作，

$('<div>新的div</div>')即可创建一个新的div；

$('<ul><li>第一条</li><li>第二条</li></ul>')甚至可以创建一个ul无序列表。

四、jQuery 如何移动元素

移动网页元素和建立DOM库的移动元素操作差不多，

  • 添加兄弟元素

$().insertBefore()将获取的元素插入到指定元素前面；

$().insertAfter()将获取的元素插入到指定元素后面；

$().before()在获取的元素前面添加元素；

$().after()在获取的元素后面添加元素。

  • 添加层级元素

$().append()为获取的元素添加子级元素，默认添加在末尾；

$().appendTo()将获取的元素放到指定元素的子级里，默认添加在末尾；

$().prepend()在获取的元素内部前面添加元素；

$().prependTo()将获取的元素放到指定元素内部前面。

五、jQuery 如何修改元素的属性

修改元素属性，包括元素里面的内容，元素的自带属性

$().html()取出或设置html内容

$().text()取出或设置text内容

$().attr() 取出或设置某个属性的值

$().width()取出或设置某个元素的宽度

$().height() 取出或设置某个元素的高度

$().val() 取出某个表单元素的值

总结

jQuery的设计模式里还包括一些事件操作方法，工具方法，我这里就不一一列举，总之，jQuery设计模式就是用简单的循环语句、条件语句等来操作函数，使复杂、繁琐的步骤变成一个简单的jQuery操作对象（也就是api）。

我写的一个jQuery库链接

avatar
文章
阅读
粉丝