Écrit en utilisant le code de service orienté objet jQuery

Parce que la société a aussi quelques anciens projets en utilisant les extrémités avant et arrière pas une forme isolée, nous avons dû utiliser jQuery comme une pile de technologie de développement front-end. Compte tenu de la fonction de tri très occasionnel peut conduire à des problèmes post-entretien, j'ai fait une révision de la manière connue de presque la petite torche recommandée en direct, se sentir bien, surtout à partager.

structure de la page générale est la suivante

    ;(function (global, $, doc) {
        ‘use strict’;
        var Application = function () {
            this.a = 1,
            this.b = 2,
            this.eventsMap = {
                “click #btnOne”: “funcOne”,
                “click #btnTwo”: “funcTwo”
            }
            this.initEvent();
        };
        Application.prototype = {
            constructor: ‘Application’,
            funcOne: function () {
                console.log(‘You are clicked btn one!’);
            },
            funcTwo: function () {
                console.log(‘You are clicked btn two!’);
            }
        };
        global.Application = Application;
        $(function () {
            new Application()
        });
    })(this, jQuery, jQuery(document));

Dans chaque page, nous créons une fonction anonyme, en passant dans le contexte actuel, les objets jQuery et éléments du document. Au début, après la onload terminée, créer un objet de processus d'affaires de la page en cours, se sentent un peu comme interface. Suivi par ensemble des variables privées, la cartographie des événements et la fonction d'initialisation de la page en cours, et se lient au prototype de toutes les fonctions, facile à utiliser.

Utilisation sur l'objet eventsMap, la nécessité pour tous ces événements étaient tous à la fois obligatoire. Il devrait y avoir l'initialisation est exécutée fonction d'initialisation de mappage de fonction. La fonction est la suivante:

initEventsMap: function (maps) {
    var matchExp = /^(\w+)\s*(.*)$/;
    for (var keys in constMap) {
        if (maps.hasOwnProperty(keys)) {
            var matchResult = keys.match(matchExp);
            doc.on(matchResult[1], matchResult[2], this[maps[keys]].bind(this))
            // 原型为 document.on(event, element, function)
        }
    }
}

À ce stade, nous pouvons déjà écrire heureusement code de fonction. Lorsque la nécessité d'augmenter les événements de liaison, eventsMap peut être enregistré que dans le cas. Selon cette ligne de pensée est liée initialisation unifiée, vous pouvez simplifiera sélecteur.

    this.selectMap = {
        “idELement”: ‘#element’,
        “classElement”: “.head .page-title”
    }

    initSelector (maps) {
        for(var keys in maps) {
            if (maps.hasOwnProperty(keys)) {
                this[keys] = $(maps[keys])
            }
        }
    }

Résumé:

Le cadre, un événement unifié lié par la cartographie des relations entre l'événement et la carte, vue plus intuitive les éléments, l'emplacement de l'événement emplacement idéal. En même temps, une structure claire du code, le logiciel de conception d'entrée unifié plus conforme aux principes de haute cohésion et couplage faible, et où il n'y a pas suffisamment Bienvenue à explorer.