1. Análise de abertura
O que dizemos neste artigo hoje? Hehehehe. Em seguida, reconstruímos as deficiências no artigo anterior e as analisamos passo a passo de uma maneira fácil de entender, para que todos possam melhorar passo a passo. Menos bobagem, chegue ao ponto. Vamos primeiro revisar o anterior
O código de peça JS é o seguinte:
A cópia do código é a seguinte:
Função ItemSelector (Elem, Opts) {
this.Elem = elem;
this.opts = opts;
};
var isproto = itemSelector.prototype;
Isproto.getElem = function () {
devolver isso.Elem;
};
Isproto.getOpts = function () {
devolver este.Opts;
};
/* Manip de dados*/
Isproto._setCurrent = function (atual) {
this.getOpts () ["Current"] = Current;
};
Isproto.getCurrentValue = function (atual) {
return this.getOpts () ["Current"];
};
/* Manip de dados*/
Isproto.init = function () {
var que = this;
this.getOpts () ["Current"] = null; // Cursor de dados
this._setItemValue (this.getOpts () ["currentText"]);
var itemselem = that.getElem (). find (". Content .items");
this.getElem (). encontre (". Title div"). on ("clique", function () {
itemselem.toggle ();
});
this.getElem (). encontre (".
itemselem.toggle ();
});
$ .ECH (this.getOpts () ["itens"], função (i, item) {
item ["id"] = (new Date (). getTime ()). ToString ();
that._render (item);
});
};
Isproto._setItemValue = function (value) {
this.getElem (). encontre (". title div"). Texto (valor)
};
Isproto._render = function (item) {
var que = this;
var itemElem = $ ("<div> </div>")
.text (item ["text"])
.attr ("id", item ["id"]);
if ("0" == item ["desativado"]) {
itemElem.on ("clique", function () {
var onchange = that.getOpts () ["alteração"];
that.getElem (). encontre (". Content .items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
OnChange && onchange (item);
})
.mouseOver (function () {
$ (this) .Addclass ("Itemping");
})
.mouseout (function () {
$ (this) .RemoveClass ("Aviso de item");
});
}
outro{
itemElem.css ("color", "#ccc"). on ("clique", function () {
that.getElem (). encontre (". Content .items"). hide ();
that._setItemValue (item ["text"]);
});
}
itemElem.AppendTo (this.getElem (). Find (". Content .items")));
};
O efeito é mostrado na figura abaixo:
a) -------- Estado não operável
b) ------ Estado operável
(Ii) Abra suas idéias e reconstrua
Não é difícil para você ver pelo código que ele foi efetivamente organizado de maneira orientada a objetos através das características de sintaxe em "JS", que é muito melhor que o método de organização baseado em processos, mas você ainda encontrará muitas deficiências.
(1) Existem muitas repetições nele
(2) A divisão de responsabilidades não está clara
(3) O processo não está completo
Refatoramos efetivamente com base nos pontos acima. Primeiro, precisamos resolver os requisitos deste componente, e os pontos funcionais são os seguintes:
(1) Inicialize o componente de configuração
A cópia do código é a seguinte:
$ (function () {
var itemSelector = new ItemSelector ($ ("#item-seletor"), {
CurrentText: "Por favor, escolha o item",
Unid: [
{
Texto: "JavaScript",
valor: "js",
desativado: "1"
},
{
texto: "css",
Valor: "CSS",
desativado: "0"
},
{
texto: "html",
valor: "html",
desativado: "0"
}
],
});
itemSelector.init ();
});
Esse código é muito claro e não requer modificações, mas você pode estender as funções com base na configuração acima, como adicionar o item de configuração "modo" para suportar várias opções. Por exemplo: "Modo de seleção de seleção".
Em seguida, é concluir a lógica de inicialização, como segue:
A cópia do código é a seguinte:
Isproto.init = function () {
var que = this;
this.getOpts () ["Current"] = null; // Cursor de dados
this._setItemValue (this.getOpts () ["currentText"]);
var itemselem = that.getElem (). find (". Content .items");
this.getElem (). encontre (". Title div"). on ("clique", function () {
itemselem.toggle ();
});
this.getElem (). encontre (".
itemselem.toggle ();
});
$ .ECH (this.getOpts () ["itens"], função (i, item) {
item ["id"] = (new Date (). getTime ()). ToString ();
that._render (item);
});
};
Esse código tem muitos problemas, responsabilidades pouco claras e a lógica de inicialização contém implementações detalhadas de pontos funcionais.
Continue a ver o código de renderização:
A cópia do código é a seguinte:
Isproto._render = function (item) {
var que = this;
var itemElem = $ ("<div> </div>")
.text (item ["text"])
.attr ("id", item ["id"]);
if ("0" == item ["desativado"]) {
itemElem.on ("clique", function () {
var onchange = that.getOpts () ["alteração"];
that.getElem (). encontre (". Content .items"). hide ();
that._setItemValue (item ["text"]);
that._setCurrent (item);
OnChange && onchange (item);
})
.mouseOver (function () {
$ (this) .Addclass ("Itemping");
})
.mouseout (function () {
$ (this) .RemoveClass ("Aviso de item");
});
}
outro{
itemElem.css ("color", "#ccc"). on ("clique", function () {
that.getElem (). encontre (". Content .items"). hide ();
that._setItemValue (item ["text"]);
});
}
itemElem.AppendTo (this.getElem (). Find (". Content .items")));
};
O problema é óbvio. Operações repetíveis foram encontradas e a abstração razoável deve ser realizada, e o objetivo da reutilização foi alcançado.
Todo o processo de construção inclui inicialização, renderização (ligação a eventos) e métodos de operação de dados relacionados e métodos auxiliares das operações DOM.
Para resumir, após uma simples classificação, devemos estabelecer o objetivo operacional da função e a atribuição de tarefas da linha principal do processo, cada um dos quais será responsável por suas próprias responsabilidades.
Portanto, o objetivo de nossa reconstrução é muito claro, certo! É abstrair pontos funcionais e dividir responsabilidades com divisão amigável, então como conseguimos isso?
O primeiro passo é estabelecer funções de processo: (interface do método)
A cópia do código é a seguinte:
Isproto.init = function () {
// Coloque seu código aqui!
};
Isproto._render = function () {
// Coloque seu código aqui!
};
Parte 2: Estabeleça uma interface de método abstrato:
A cópia do código é a seguinte:
Isproto._fnitemSelectordElegateHandler = function () {
// Coloque seu código aqui!
};
Isproto._fntriggerHandler = function () {
// Coloque seu código aqui!
};
Isproto._adDorreMoveClass = function () {
// Coloque seu código aqui!
};
A terceira etapa é estabelecer uma interface de operação de dados:
A cópia do código é a seguinte:
Isproto._setCurrent = function () {
// Coloque seu código aqui!
};
Isproto._getCurrent = function () {
// Coloque seu código aqui!
};
Existem também algumas referências ao código -fonte completo abaixo, que é apenas a idéia mencionada aqui.
(Iii), o código completo é para aprender, este código foi testado
A cópia do código é a seguinte:
Função ItemSelector (Elem, Opts) {
this.Elem = elem;
this.opts = opts;
this.Current = -1; // Cursor de dados
};
var isproto = itemSelector.prototype;
/* getter api*/
Isproto.getElem = function () {
devolver isso.Elem;
};
Isproto.getOpts = function () {
devolver este.Opts;
};
Isproto._getCurrent = function () {
retornar este.Current;
};
/* getter api*/
/* Manip de dados*/
Isproto._setCurrent = function (atual) {
this.Current = Current;
};
Isproto._setItemText = function (text) {
this.getElem (). encontre (". title div"). text (texto);
};
/* Manip de dados*/
/ * Atualização em 2015 1/31 23:38 */
Isproto._fntriggerHandler = function (índice, texto, valor) {
if (this._isDisabled (value)) {
índice = -1;
texto = this.getOpts () ["currentText"];
}
this._setItemText (texto);
this._setCurrent (índice);
this.getElem (). encontre (". Content .items"). hide ();
};
Isproto._adDorreMoveClass = function (Elem, ClassName, Addis) {
if (addis) {
elem.addclass (ClassName);
}
outro{
elem.removeclass (classe);
}
};
Isproto._fnitemSelectordElegateHandler = function () {
var que = this;
this.getElem (). on ("clique", "[Data-Toggle]", function () {
that.getElem (). encontre (". Content .items"). Toggle ();
});
};
Isproto._isDisabled = function (value) {
return ("1" == valor)? Verdadeiro: falso;
};
/ * Atualização em 2015 1/31 23:38 */
Isproto.init = function () {
var que = this;
this._fnitemSelectordElegateHandler ();
$ .ECH (this.getOpts () ["itens"], função (i, item) {
item ["index"] = i;
that._render (item);
});
this._fntriggerHandler (this._getCurrent (), this.getOpts () ["currentText"], "1");
};
Isproto._render = function (item) {
var que = this;
var itemElem = $ ("<div> </div>"). text (item ["text"]). att ("id", item ["index"]);
var ActiveClass = ("0" == item ["desativado"])? "Item Aunchando": "Item-Disabled Hover";
itemElem.on ("clique", function () {
that._fntriggerHandler (item ["index"], item ["text"], item ["desativado"]);
})
.mouseOver (function () {
that._addorreMemoveClass ($ (this), ActiveClass, true);
})
.mouseout (function () {
that._addorremoveClass ($ (this), ActiveClass, false);
});
itemElem.AppendTo (this.getElem (). Find (". Content .items")));
};
(Iv), resumo final
(1) Uma análise razoável dos requisitos funcionais de uma maneira orientada a objetos.
(2), organize nossa lógica plug-in de uma maneira de classe.
(3) reconstruir continuamente os exemplos acima, como reconstruir isso razoavelmente? Não designe demais, fique à vontade. O método recomendado é combinar o design do processo com o design de pensamento orientado a objetos.
(4) O artigo a seguir expandirá funções relacionadas, como a propriedade "Modo". Quando é "1", suporta o modo de seleção de múltiplas seleções, mas agora é apenas o modo suspenso padrão.
Olhando para o meu artigo, é muito melhor que o código anterior? Os amigos devem pensar e fazer mais projetos sozinhos e tentar tornar seu próprio código mais razoável.