Kapselt eine Funktion, die den Textinhalt eines Elements abrufen kann-js-Tutorial-php.cn

Kapselt eine Funktion, die den Textinhalt eines Elements abrufen kann

php中世界最好的语言

Freigeben： 2018-05-24 15:19:37

Original

2071 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Kapselung einer Funktion vorstellen, die den Textinhalt eines Elements abrufen kann. Was sind die Vorsichtsmaßnahmen für die Kapselung einer Funktion, die den Textinhalt eines Elements abrufen kann? Ein praktischer Fall, werfen wir einen Blick darauf.

A.1 Logische Schritte

Ziel: Alle Geschwister + Elementknoten eines Elements abrufen

S1 Den übergeordneten Elementknoten eines Elements + alle seine untergeordneten Knoten abrufen
S2 deklariert das zurückzugebende Pseudo-Array-Objekt
S3 entfernt den von ihm übergebenen Elementknoten
S4 verwendet array.length, um den Array-Inhalt per Index zu übergeben (wenn i verwendet wird, ist es möglich, i zu überspringen , nicht nach Index geordnet)
S5 Dieses Pseudo-Array zurückgeben

A.1 Spezifischer Code

<body>
    <ul>
        <li id="item1">选项1</li>
        <li id="item2">选项2</li>
        <li id="item3">选项3</li>
        <li id="item4">选项4</li>
        <li id="item5">选项5</li>
    </ul>
</body>

Nach dem Login kopieren

rrree

A.2 Logikschritte

Ziel: Klassen hinzufügen/entfernen zu Elemente in Stapeln Name

S1 Durchlaufen des Schlüsselwerts des Objekts
S2 Wenn der Wert des Klassennamens wahr ist, fügen Sie den Klassennamen hinzu; andernfalls entfernen Sie

A.2 Spezifischer Code

//S5 封装为函数(API)
function getSiblings(node){
    var allChildren = node.parentNode.children;     //S1 获取li的父元素节点 + 其所有子节点
    var array = {length:0};                         //S2 声明将要返回的伪数组对象
    for (let i = 0; i < allChildren.length; i++){
        if (allChildren[i] !== node){              // S3 去除本身传入的元素节点
            array[array.length] = allChildren[i];   // S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
            array.length += 1;
            }
        }
        // console.log(array);       // {0:li#item1, 1:li#item2......}
        return array;                // S6 返回这个伪数组
    }

Nach dem Login kopieren

B Fügen Sie den Namespace hinzu, der

function addClass(node, classes){
    // var classes = {&#39;a&#39;:true, &#39;b&#39;:false, &#39;c&#39;:true}   //S1 构造要传入的类名对象
    for (let key in classes){                          //S2 遍历对象的key值
        value = classes[key];
        // if (value){                                    //S3 当类名的值为ture时，添加类名
        //     node.classList.add(key);
        // }else{
        //     node.classList.remove(key);
        // }
        // 以上 if/else可以优化为
        var methodName = value ? &#39;add&#39;:&#39;remove&#39;;
        node.classList[methodName](key);
    }
}

Nach dem Login kopieren

` ist.
Die aufrufende Methode ist mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])
und die gewünschte Die aufrufende Methode ist item3.getSibling() / item3.addClass('['a', 'b'])

C.1 diese+Prototypkette

window.mydom = {};
mydom.getSiblings = function getSiblings(node){
    var allChildren = node.parentNode.children;
    var array = {length:0};
    for (let i = 0; i < allChildren.length; i++){
        if (allChildren[i] !== node){              // 去除本身传入的元素节点
            array[array.length] = allChildren[i];
            array.length += 1;
        }
    }
    return array;
}
mydom.addClass = function addClass(node, classes){
    classes.forEach( (value)=> node.classList.add(value) );
}

Nach dem Login kopieren

C.2 node2 function_object mode

Node.prototype.getSiblings = function getSiblings(){
    var allChildren = this.parentNode.children;
    var array = {length:0};
    for (let i = 0; i < allChildren.length; i++){
        if (allChildren[i] !== this){              // 去除本身传入的元素节点
            array[array.length] = allChildren[i];
            array.length += 1;
        }
    }
    return array;
}
Node.prototype.addClass = function addClass(classes){
    classes.forEach( (value)=> this.classList.add(value) );
}
// 参考效果
console.log( item3.getSiblings() )

Nach dem Login kopieren

C.3 Simulieren Sie eine vereinfachte jQuery

window.Node2 = function(node){         //要挂载到全局window上，才能直接访问
    return {
        getSiblings: function(){
            var allChildren = node.parentNode.children;
            var array = {length:0};
            for (let i = 0 ; i < allChildren.length; i++){
                if (allChildren[i] !== node){
                    array[array.length] = allChildren[i];
                    arrat.length += 1;
                }
            }
            return array;
        },
        addClass: function(classes){
            classes.forEach( (value) => node.classList.add(value) )
        }
    }
}
//参考效果
node2 = Node2(item3);
console.log( node2.getSibling() );
node2.addClass( ['a', 'b', 'c'] )

Nach dem Login kopieren

C. 4 Unterstützt die Übergabe eines/mehrerer Knoten

window.jQuery = function(nodeOrSelector){
    let node;
    if (typeof nodeOrSelector === 'string'){        //类型检测
        node = document.querySelector(nodeOrSelector);  //只支持返回一个节点
    } else {
        node = nodeOrSelector;
    }
    return{
        getSibligs: function(){
           var allChildren = node.parentNode.children;
            var array = {length:0};
            for (let i = 0 ; i < allChildren.length; i++){
                if (allChildren[i] !== node){
                    array[array.length] = allChildren[i];
                    arrat.length += 1;
                }
            }
            return array;
        },
        addClass: function(classes){
             classes.forEach( (value) => node.classList.add(value) )
        }
    }
}
//调用效果
var node2 = jQuery('#item3');
node2.getSibling();
node2.addClass(['red', 'c'])

Nach dem Login kopieren

D Weitere Funktionen hinzufügen

window.jQuery = function(nodeOrSelector){
    let nodes = {};  //S1 以后要用到的元素节点伪数组，空对象
    if (typeof nodeOrSelector === 'string'){
        let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
        for (let i = 0 ; i < temp.length; i++){
            nodes[i]= temp[i];                     //S3 去除多余原型链部分
        }
        nodes.length = temp.length;
    } else if (nodeOrSelector instanceof Node){
        nodes ={ 0: nodeOrSelector , length:1};    //S4 单个元素也要返回伪数组
    }
    nodes.addClass = function(classes){
        // for (let i = 0; i < nodes.length; i++){
        //     classes.forEach( (value) => nodes[i].classList.add(value) );
        // }
        // 更好的写法是
        classes.forEach( (value) => {
            for (let i=0; i<nodes.length; i++){
                nodes[i].classList.add(value);
            }
        })
    }
    return nodes
}
//调用效果
var node2 = jQuery(&#39;ul>li');
node2.addClass( ['blue'] );

Nach dem Login kopieren

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Array-Prototyp-Methode in js

Die EasyCanvas-Zeichnungsbibliothek wird verwendet in Praxis in der Pixeler-Projektentwicklung Zusammenfassung

Das obige ist der detaillierte Inhalt vonKapselt eine Funktion, die den Textinhalt eines Elements abrufen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!