1. Análise de abertura
Oi pessoal! Você ainda se lembra do artigo anterior ----- o início desta série (tutorial de desenvolvimento de plug-in JavaScript 1). Ele conta principalmente a história de "Como desenvolver plug-ins em jQuery",
Hoje, continuaremos nossa jornada de desenvolvimento de plug-in com as perguntas de ontem. As perguntas anteriores são as seguintes:
(1) Se a seleção da tecnologia do projeto e a substituição desses plug-ins, ele depende do mecanismo "jQuery", os plug-ins que escrevemos antes não serão usados (supondo que o jQuery não seja usado), como refatorá-lo?
(2) Refatoração da lógica principal dos plug-ins, como vamos organizar isso?
Ok, vamos aprender o artigo de hoje com perguntas.
Primeiro de tudo, não nego o "método de plug-in jQuery" e, em segundo lugar, precisamos analisar o problema de diferentes perspectivas, como "jQuery plug-in tem as seguintes vantagens":
(1) Coloque todo o código no fechamento (uma função de execução instantânea). Neste momento, o fechamento é equivalente a um escopo privado. O externo não pode acessar informações internas e não haverá poluição de variáveis globais.
(2), a) Evite dependências globais; b) Evite danos de terceiros; c) Compatível com os operadores jQuery '$' e 'jQuery'.
Então, de que maneira organizaremos o código, qual é a idéia orientada a objetos (OOP)? Ou devemos prosseguir para a ideia baseada em processos? Ou é uma combinação dos dois? Hahaha, continue assistindo. . . . . .
2. Reconstrua o exemplo de ontem
A seguir, é apresentada a parte do código -fonte da parte JS de ontem:
A cópia do código é a seguinte:
(função ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
Retorne this.Each (function () {
var elem = $ (this);
elem.find ("span"). Texto (opta ["title"]);
$ .get (opta ["url"], função (dados) {
elem.find ("div"). Texto (dados ["texto"]);
});
});
};
$ .fn.bigbear.defaults = {
Título: "Este é um teste simples",
URL: "Data.json"
};
}) (jQuery);
Vamos analisá -lo passo a passo:
Primeiro, determine as funções deste plugin
(1), exiba as informações de texto do título que definimos.
(2) Obtenha dinamicamente informações de conteúdo por meios assíncronos.
tudo bem! É fácil discutir isso se os requisitos forem claros. Não é difícil ver no código acima que a lógica está solta e o pensamento baseado em processos é óbvio, então o primeiro passo é colocar nossos requisitos funcionais em
Organizar efetivamente de uma maneira de classe. Veja o código refatorado da seguinte maneira:
A cópia do código é a seguinte:
$ (function () {
$ ("#bb"). bigbear ();
});
(função ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
Retorne this.Each (function () {
var elem = $ (this);
var bb = novo bigbear (elem, opts);
bb.getElem (). Trigger ("dados");
});
};
$ .fn.bigbear.defaults = {
Título: "Este é um teste simples",
URL: "Data.json"
};
}) (jQuery);
função bigbear (elem, opts) {
this.Elem = elem;
this.opts = opts;
this.init ();
};
var bbProto = bigbear.prototype;
bbproto.getElem = function () {
devolver isso.Elem;
};
bbproto.getOpts = function () {
devolver este.Opts;
};
bbproto.init = function () {
var que = this;
this.getElem (). on ("dados", function () {
that._setTitle (that.getOpts () ["title"]);
$ .get (that.getOpts () ["url"], function (resultado) {
that.getElem (). encontre ("div"). texto (resultado ["text"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). encontre ("span"). texto (texto);
};
Hahaha, há muito mais código? De fato, esse método é analisar o problema de uma perspectiva orientada a objetos, primeiro analisar os requisitos funcionais e depois projetar nossa classe. Embora seja impossível projetá -lo muito bem ao mesmo tempo.
No entanto, a perspectiva do problema mudou, nosso código se tornou mais legível e podemos mantê -lo melhor, para que nosso objetivo possa ser alcançado.
A seguir, é apresentado a implementação relevante do código -fonte extraído da seção JS "Bootstrap", como mostrado abaixo:
Não é difícil ver que também existem métodos de implementação semelhantes, que mantêm a lógica principal do nosso plug-in através das classes.
(Iii), adicione novas funções e apresente aulas adicionais
Agora, a demanda aumentou e precisa haver algumas mudanças na experiência, e há um efeito de "carregamento" ao carregar dados.
A ideia de implementação pode ser assim: defina o texto como a palavra "Carregar dados ..." na área de conteúdo original e depois introduza uma nova classe, como segue:
A cópia do código é a seguinte:
sobreposição de função () {
};
var olproto = sobreposição.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// não vou escrever a implementação específica
Ok, a camada de máscara já está lá, como podemos integrá -la agora? Nós o acessamos em uma combinação, como segue:
A cópia do código é a seguinte:
função bigbear (elem, opts) {
this.Elem = elem;
this.opts = opts;
this.Overlay = new Overlay ();
this.init ();
};
var bbProto = bigbear.prototype;
bbproto.getElem = function () {
devolver isso.Elem;
};
bbproto.getOpts = function () {
devolver este.Opts;
};
bbproto.init = function () {
var que = this;
var loadingText = "Carregamento de dados ....";
this.getElem (). on ("dados", function () {
that._setTitle (that.getOpts () ["title"]);
that.overlay.show ();
that.getElem (). encontre ("div"). text (carregingText);
$ .get (that.getOpts () ["url"], function (resultado) {
that.overlay.hide ();
that.getElem (). encontre ("div"). texto (resultado ["text"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). encontre ("span"). texto (texto);
};
Isso é apenas para o fim de nossas funções. Eu acredito que o plug-in escrito dessa maneira é muito melhor que a primeira versão. Obviamente, essa não é a implementação ideal e precisa ser constantemente refatorada dos detalhes, mas esse método é uma maneira opcional de desenvolver plug-ins.
Aqui está o código completo:
A cópia do código é a seguinte:
$ (function () {
$ ("#bb"). bigbear ();
});
(função ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
Retorne this.Each (function () {
var elem = $ (this);
var bb = novo bigbear (elem, opts);
bb.getElem (). Trigger ("dados");
});
};
$ .fn.bigbear.defaults = {
Título: "Este é um teste simples",
URL: "Data.json"
};
}) (jQuery);
função bigbear (elem, opts) {
this.Elem = elem;
this.opts = opts;
this.Overlay = new Overlay ();
this.init ();
};
var bbProto = bigbear.prototype;
bbproto.getElem = function () {
devolver isso.Elem;
};
bbproto.getOpts = function () {
devolver este.Opts;
};
bbproto.init = function () {
var que = this;
var loadingText = "Carregamento de dados ....";
this.getElem (). on ("dados", function () {
that._setTitle (that.getOpts () ["title"]);
that.overlay.show ();
that.getElem (). encontre ("div"). text (carregingText);
$ .get (that.getOpts () ["url"], function (resultado) {
that.overlay.hide ();
that.getElem (). encontre ("div"). texto (resultado ["text"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). encontre ("span"). texto (texto);
};
sobreposição de função () {
};
var olproto = sobreposição.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// não vou escrever a implementação específica
Este artigo acabou por enquanto. Você tem um novo entendimento do desenvolvimento de javascripts plug-in?