communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Exemple de partage de code pour l'implémentation getter/setter en JavaScript

Exemple de partage de code pour l'implémentation getter/setter en JavaScript

黄舟
Libérer： 2017-03-13 17:13:41
original
1342 Les gens l'ont consulté

Bien qu'ES5 nous fournisse la méthode Object.defineProperty pour définir les getters et les setters, cette méthode native n'est pas pratique à utiliser. Pourquoi ne pas implémenter une classe nous-mêmes, tant que hérite. Cette classe et suivant certaines spécifications peut avoir des getters et des setters comparables aux natifs.

Nous définissons maintenant les spécifications suivantes :

Le valuer et le setter suivent le format : _xxxGetter/_xxxSetter, xxx représente l' attribut qui doit être contrôlé. Par exemple, si vous souhaitez contrôler l'attribut foo, le objet doit fournir la méthode _fooGetter/_fooSetter comme valeur réelle et le contrôleur, afin que nous puissions appeler obj.get dans le code ('foo') et obj.set('foo', value) pour obtenir et définir la valeur ; sinon, appeler les méthodes get et set équivaut au code : obj.foo et obj.foo = value;

Fournir la fonction watch : obj.watch(attr, function(name, oldValue, newValue){}); chaque fois que la méthode set est appelée, le paramètre fucntion sera déclenché. Le nom dans la fonction représente l'attribut modifié, oldValue est la dernière valeur de l'attribut et newValue représente la dernière valeur de l'attribut. Cette méthode renvoie un objet handle avec une méthode Remove. Appelez Remove pour supprimer le paramètre de fonction de la chaîne de fonctions.

Utilisez d'abord le mode fermeture , et utilisez la variable d'attributs comme attribut privé pour stocker les getters et setters de tous les attributs : 

var Stateful = (function(){
    'use strict';

    var attributes = {
        Name: {
            s: '_NameSetter',
            g: '_NameGetter',
            wcbs: []
        }
    };

    var ST = function(){};

    return ST;
})()
Copier après la connexion

où wcbs utilise Pour stocker tous les rappels lors de l'appel de watch(name, callback).

La première version du code d'implémentation est la suivante : 

var Stateful = (function(){
    'use strict';

    var attributes = {};

    function _getNameAttrs(name){
        return attributes[name] || {};
    }

    function _setNameAttrs(name) {
        if (!attributes[name]) {
            attributes[name] = {
                s: '_' + name + 'Setter',
                g: '_' + name + 'Getter',
                wcbs: [] 
            }
        }
    }

    function _setNameValue(name, value){
        _setNameAttrs(name);
        var attrs = _getNameAttrs(name);
        var oldValue = _getNameValue.call(this, name);
        //如果对象拥有_nameSetter方法则调用该方法，否则直接在对象上赋值。
        if (this[attrs.s]){
            this[attrs.s].call(this, value);
        } else {
            this[name] = value;
        }

        if (attrs.wcbs && attrs.wcbs.length > 0){
            var wcbs = attrs.wcbs;
            for (var i = 0, len = wcbs.length; i < len; i++) {
                wcbs[i](name, oldValue, value);
            }
        }
    };

    function _getNameValue(name) {
        _setNameAttrs(name);
        var attrs = _getNameAttrs(name);

        var oldValue = null;
        // 如果拥有_nameGetter方法则调用该方法，否则直接从对象中获取。
        if (this[attrs.g]) {
            oldValue = this[attrs.g].call(this, name);
        } else {
            oldValue = this[name];
        }

        return oldValue;
    };

    function ST(){};

    ST.prototype.set = function(name, value){
        //每次调用set方法时都将name存储到attributes中
        if (typeof name === &#39;string&#39;){
            _setNameValue.call(this, name, value);
        } else if (typeof name === object) {
            for (var p in name) {
                _setNameValue.call(this, p, name[p]);
            }
        }

        return this;
    };

    ST.prototype.get = function(name) {
        if (typeof name === &#39;string&#39;) {
            return _getNameValue.call(this, name);
        }
    };

    ST.prototype.watch = function(name, wcb) {
        var attrs = null;
        if (typeof name === &#39;string&#39;) {
            _setNameAttrs(name);
            attrs = _getNameAttrs(name);
            attrs.wcbs.push(wcb);

            return {
                remove: function(){
                    for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
                        if (attrs.wcbs[i] === wcb) {
                            break;
                        }
                    }

                    attrs.wcbs.splice(i, 1);
                }
            }
        } else if (typeof name === &#39;function&#39;){
            for (var p in attributes) {
                attrs = attributes[p];
                attrs.wcbs.splice(0,0, wcb); //将所有的callback添加到wcbs数组中
            }

            return {
                remove: function() {
                    for (var p in attributes) {
                        var attrs = attributes[p];
                        for (var i = 0, len = attrs.wcbs.length; i < len; i++) {
                            if (attrs.wcbs[i] === wcb) {
                                break;
                            }
                        }

                        attrs.wcbs.splice(i, 1);
                    }
                }
            }
        }
    };

    return ST;
})()
Copier après la connexion

Travail de test : 

console.log(Stateful);
    var stateful = new Stateful();

    function A(name){
        this.name = name;
    };
    A.prototype = stateful;
    A.prototype._NameSetter = function(n) {
        this.name = n;
    };
    A.prototype._NameGetter = function() {
        return this.name;
    }

    function B(name) {
        this.name = name;
    };
    B.prototype = stateful;
    B.prototype._NameSetter = function(n) {
        this.name = n;
    };
    B.prototype._NameGetter = function() {
        return this.name;
    };

    var a = new A();
    var handle = a.watch(&#39;Name&#39;, function(name, oldValue, newValue){
        console.log(name + &#39;be changed from &#39; + oldValue + &#39; to &#39; + newValue);
    });
    a.set(&#39;Name&#39;, &#39;AAA&#39;);
    console.log(a.name);

    var b = new B();
    b.set(&#39;Name&#39;, &#39;BBB&#39;);
    console.log(b.get(&#39;Name&#39;));

    handle.remove();
    a.set(&#39;Name&#39;, &#39;new AAA&#39;);
    console.log(a.get(&#39;Name&#39;), b.get(&#39;Name&#39;))
Copier après la connexion

Sortie : 

function ST(){}
Namebe changed from undefined to AAA
AAA
Namebe changed from undefined to BBB
BBB
new AAA BBB
Copier après la connexion

Vous peut voir que toutes les fonctions watch sont stockées dans le tableau wcbs et que tous les attributs portant le même nom dans les sous-classes accèdent au même tableau wcbs. Existe-t-il un moyen de garantir que chaque instance possède sa propre chaîne de fonctions horlogères sans provoquer de pollution ? Vous pouvez envisager cette méthode : ajoutez un attribut _watchCallbacks à chaque instance, qui est une fonction, et stockez toutes les chaînes de fonctions de surveillance dans cette fonction. Le code principal est le suivant : 

ST.prototype.watch = function(name, wcb) {
        var attrs = null;

        var callbacks = this._watchCallbacks;
        if (!callbacks) {
            callbacks = this._watchCallbacks = function(n, ov, nv) {
                var execute = function(cbs){
                    if (cbs && cbs.length > 0) {
                        for (var i = 0, len = cbs.length; i < len; i++) {
                            cbs[i](n, ov, nv);
                        }
                    }
                }
                //在函数作用域链中可以访问到callbacks变量
                execute(callbacks[&#39;_&#39; + n]);
                execute(callbacks[&#39;*&#39;]);// 通配符
            }
        }

        var _name = &#39;&#39;;
        if (typeof name === &#39;string&#39;) {
            var _name = &#39;_&#39; + name;
        } else if (typeof name === &#39;function&#39;) {//如果name是函数，则所有属性改变时都会调用该函数
            _name = &#39;*&#39;;
            wcb = name;
        }
        callbacks[_name] = callbacks[_name] ? callbacks[_name] : [];
        callbacks[_name].push(wcb);

        return {
            remove: function(){
                var idx = callbacks[_name].indexOf(wcb);
                if (idx > -1) {
                    callbacks[_name].splice(idx, 1);
                }
            }
        };
    };
Copier après la connexion

Après modifications Le code global. est la suivante : 

var Stateful = (function(){
    'use strict';

    var attributes = {};

    function _getNameAttrs(name){
        return attributes[name] || {};
    }

    function _setNameAttrs(name) {
        if (!attributes[name]) {
            attributes[name] = {
                s: '_' + name + 'Setter',
                g: '_' + name + 'Getter'/*,
                wcbs: []*/
            }
        }
    }

    function _setNameValue(name, value){
        if (name === '_watchCallbacks') {
            return;
        }
        _setNameAttrs(name);
        var attrs = _getNameAttrs(name);
        var oldValue = _getNameValue.call(this, name);

        if (this[attrs.s]){
            this[attrs.s].call(this, value);
        } else {
            this[name] = value;
        }

        if (this._watchCallbacks){
            this._watchCallbacks(name, oldValue, value);
        }
    };

    function _getNameValue(name) {
        _setNameAttrs(name);
        var attrs = _getNameAttrs(name);

        var oldValue = null;
        if (this[attrs.g]) {
            oldValue = this[attrs.g].call(this, name);
        } else {
            oldValue = this[name];
        }

        return oldValue;
    };

    function ST(obj){
        for (var p in obj) {
            _setNameValue.call(this, p, obj[p]);
        }
    };

    ST.prototype.set = function(name, value){
        if (typeof name === 'string'){
            _setNameValue.call(this, name, value);
        } else if (typeof name === 'object') {
            for (var p in name) {
                _setNameValue.call(this, p, name[p]);
            }
        }

        return this;
    };

    ST.prototype.get = function(name) {
        if (typeof name === 'string') {
            return _getNameValue.call(this, name);
        }
    };

    ST.prototype.watch = function(name, wcb) {
        var attrs = null;

        var callbacks = this._watchCallbacks;
        if (!callbacks) {
            callbacks = this._watchCallbacks = function(n, ov, nv) {
                var execute = function(cbs){
                    if (cbs && cbs.length > 0) {
                        for (var i = 0, len = cbs.length; i < len; i++) {
                            cbs[i](n, ov, nv);
                        }
                    }
                }
                //在函数作用域链中可以访问到callbacks变量
                execute(callbacks[&#39;_&#39; + n]);
                execute(callbacks[&#39;*&#39;]);// 通配符
            }
        }

        var _name = &#39;&#39;;
        if (typeof name === &#39;string&#39;) {
            var _name = &#39;_&#39; + name;
        } else if (typeof name === &#39;function&#39;) {//如果name是函数，则所有属性改变时都会调用该函数
            _name = &#39;*&#39;;
            wcb = name;
        }
        callbacks[_name] = callbacks[_name] ? callbacks[_name] : [];
        callbacks[_name].push(wcb);

        return {
            remove: function(){
                var idx = callbacks[_name].indexOf(wcb);
                if (idx > -1) {
                    callbacks[_name].splice(idx, 1);
                }
            }
        };
    };

    return ST;
})()
Copier après la connexion

Test : 

console.log(Stateful);
    var stateful = new Stateful();

    function A(name){
        this.name = name;
    };
    A.prototype = stateful;
    A.prototype._NameSetter = function(n) {
        this.name = n;
    };
    A.prototype._NameGetter = function() {
        return this.name;
    }

    function B(name) {
        this.name = name;
    };
    B.prototype = stateful;
    B.prototype._NameSetter = function(n) {
        this.name = n;
    };
    B.prototype._NameGetter = function() {
        return this.name;
    };

    var a = new A();
    var handle = a.watch(&#39;Name&#39;, function(name, oldValue, newValue){
        console.log(name + &#39;be changed from &#39; + oldValue + &#39; to &#39; + newValue);
    });
    a.set(&#39;Name&#39;, &#39;AAA&#39;);
    console.log(a.name);

    var b = new B();
    b.set(&#39;Name&#39;, &#39;BBB&#39;);
    console.log(b.get(&#39;Name&#39;));

    a.watch(function(name, ov, nv) {
        console.log(&#39;* &#39; + name + &#39; &#39; + ov + &#39; &#39; + nv);
    });

    a.set({
        foo: &#39;FOO&#39;,
        goo: &#39;GOO&#39;
    });

    console.log(a.get(&#39;goo&#39;));

    a.set(&#39;Name&#39;, &#39;AAA+&#39;);

    handle.remove();
    a.set(&#39;Name&#39;, &#39;new AAA&#39;);
    console.log(a.get(&#39;Name&#39;), b.get(&#39;Name&#39;))
Copier après la connexion

Sortie : 

function ST(obj){
        for (var p in obj) {
            _setNameValue.call(this, p, obj[p]);
        }
    }
Namebe changed from undefined to AAA
AAA
BBB
* foo undefined FOO
* goo undefined GOO
GOO
Namebe changed from AAA to AAA+
* Name AAA AAA+
* Name AAA+ new AAA
new AAA BBB
Copier après la connexion











Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
JavaScript，getter，setter
source：php.cn
Article précédent：Détails sur la fourniture de performances JavaScript rapides dans Microsoft Edge (graphique) Article suivant：Explication détaillée du code graphique du composant d'interface utilisateur JavaScript léger de Magic
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2055
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2211
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1865
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1750
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1776
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal