suchen

Heim  >  Artikel  >  Web-Frontend  >  Kapselt eine Funktion, die den Textinhalt eines Elements abrufen kann

Kapselt eine Funktion, die den Textinhalt eines Elements abrufen kann

php中世界最好的语言
php中世界最好的语言Original
2018-05-24 15:19:372077Durchsuche

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>
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 返回这个伪数组
    }

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);
    }
}

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

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) );
}

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() )

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'] )

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'])

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'] );

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung der Wertübertragung auf eine Seite alle N Sekunden basierend auf der Jquery-Ajax-TechnologieNächster Artikel：Implementierung der Wertübertragung auf eine Seite alle N Sekunden basierend auf der Jquery-Ajax-Technologie

In Verbindung stehende Artikel

Mehr sehen