1. Análise de abertura
Oi pessoal! A série de artigos de hoje fala principalmente sobre como desenvolver o desenvolvimento de plug-in com base em "JavaScript". Eu acho que muitas pessoas não estão familiarizadas com a palavra "plugin".
Algumas pessoas podem chamá -lo de "componente" ou "componente", o que não é importante. A chave é analisar como projetar e como fazer uma consideração abrangente. Este é o conceito em que este artigo se concentra. Eu acho que todo mundo está certo
Tenho um certo entendimento do "método de plug-in jQuery". Discutiremos isso juntos com base neste tópico e, finalmente, forneceremos planos de implementação relevantes para melhorar continuamente nossa capacidade.
2. Digite o tópico plug-in
De um modo geral, o desenvolvimento de plug-ins de jQuery é dividido em dois tipos: um é uma função global pendurada sob o espaço para nome do jQuery, que também pode ser chamado de método estático.
Outro método é o método do nível de objeto jQuery, ou seja, o método pendurado sob o protótipo jQuery, de modo que as instâncias do objeto jQuery obtidas através do seletor também podem compartilhar o método.
(1), desenvolvimento de plug-in em nível de classe
O entendimento mais direto do desenvolvimento de plug-in em nível de classe é adicionar métodos de classe à classe "jQuery", que pode ser entendida como adicionando métodos estáticos. Um exemplo típico é a função "$ .ajax ()", que define a função no espaço para nome do jQuery. Sobre o desenvolvimento de plug-in em nível de classe pode ser estendido nas seguintes formas:
1.1 Adicione uma função global, precisamos defini -la apenas da seguinte forma e ver o código:
A cópia do código é a seguinte:
$ .hello = function () {
alerta ("Olá, grande urso!");
};
1.2 Adicione várias funções globais, que podem ser definidas da seguinte forma:
A cópia do código é a seguinte:
$ .Extend ({
Olá: function (nome) {
// Coloque seu código aqui
},
mundo: function () {
// Coloque seu código aqui
}
});
Descrição: "$ .Extend (Target, [Object1], [ObjectN])" (esse método é usado principalmente para mesclar o conteúdo (atributos) de dois ou mais objetos para o primeiro objeto e retornar o primeiro objeto mesclado.
Se o método tiver apenas um alvo de parâmetros, o parâmetro estenderá o espaço para nome do jQuery, ou seja, será pendurado sob o objeto global jQuery como um método estático).
(2), desenvolvimento de plug-in em nível de objeto
O desenvolvimento de plug-in em nível de objeto requer dois formulários:
2.1 Montar dinamicamente atributos relevantes através de "$ .fn.extend ()" como o protótipo.
A cópia do código é a seguinte:
(função ($) {
$ .fn.extend ({
pluginname: function (opts) {
// Coloque seu código aqui
}
});
}) (jQuery);
2.2 Adicione diretamente atributos dinâmicos à cadeia de protótipo.
A cópia do código é a seguinte:
(função ($) {
$ .fn.pluginname = function () {
// Coloque seu código aqui
};
}) (jQuery);
Deixe -me explicar: os dois são equivalentes. Para um plug-in jQuery, uma função básica pode funcionar bem, mas para plug-ins mais complexos, é necessário fornecer vários métodos e funções privadas.
Você pode usar namespaces diferentes para fornecer vários métodos para o seu plug-in, mas a adição de namespace demais tornará o código bagunçado e menos robusto. Portanto, a melhor solução é definir funções e métodos privados adequadamente.
Por isso, implementamos a unidade de plug-in privada simulada, combinando funções auto-executadas com fechamentos, como no nosso exemplo acima.
(Iii), vamos dar um exemplo simples para ver o processo de implementação:
(1), o código de fragmento "html" é o seguinte:
A cópia do código é a seguinte:
<div id = "bb">
<span> </span>
<div
style = "Margin-top: 10px;
Margin-Bottom: 30px; "
> 8 </div>
</div>
(2), a definição de "data.json" é a seguinte:
A cópia do código é a seguinte:
{
"Texto": "Olá, Big Bear {{BB}}!" ;
}
(3), o código "bb.js" é o seguinte:
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);
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);
Efeito de corrida:
Vamos resumir :
(1) "$ .fn.bigbear.defaults" fornece as opções de parâmetros padrão para o plug-in. Um plug-in com boa extensibilidade deve permitir que os usuários personalizem as opções de parâmetros de acordo com suas necessidades e controlem o comportamento do plug-in; portanto, é necessário fornecer opções padrão restauradas. Você pode definir essas opções através do método de extensão da JQuery.
(2), "Retorne this.each () {...}" Travessia vários elementos e retorna jQuery usando o mecanismo seletor de cheiro, o Sizzle pode fornecer operações de vários elementos para suas funções (como elementos com o mesmo nome de classe). Esse é um dos vários recursos excelentes do jQuery e, mesmo que você não esteja pronto para fornecer suporte a vários elementos ao seu plug-in durante o desenvolvimento, a preparação para isso ainda é uma ótima maneira. Além disso, o JQuery possui um bom recurso que pode executar cascatas de método, que também pode ser chamado de chamadas de cadeia, portanto, não devemos destruir esse recurso e sempre retornar um elemento no método.
(Iv), resumo final
(1) JQuery introduziu dois métodos para o plug-in de desenvolvimento, a saber: jQuery.fn.extend (objeto); Adicione o método ao objeto jQuery.
jQuery.extend (objeto); Adiciona novos métodos à classe para estender a própria classe jQuery.
(2) 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. As especificações oficiais de desenvolvimento são explicadas: a) Evite dependências globais; b) Evite danos de terceiros; c) são compatíveis com os operadores jQuery '$' e 'jQuery'.
(3) Forneça as opções de parâmetros padrão para plug-in. Um plug-in com boa extensibilidade deve permitir que os usuários personalizem as opções de parâmetros de acordo com suas necessidades e controlem o comportamento do plug-in. Portanto, é necessário fornecer opções padrão restauradas. Você pode definir essas opções através do método de extensão do jQuery
(4), itera através de vários elementos e retorne o jQuery usando o mecanismo seletor de cheiro, o Sizzle pode fornecer operações de vários elementos para suas funções (como elementos com o mesmo nome de classe). Esse é um dos vários recursos excelentes do jQuery e, mesmo que você não esteja pronto para fornecer suporte a vários elementos ao seu plug-in durante o processo de desenvolvimento, a preparação para isso ainda é uma boa prática. Além disso, o JQuery possui um bom recurso que pode executar cascatas de método, que também pode ser chamado de chamadas de cadeia, portanto, não devemos destruir esse recurso e sempre retornar um elemento no método.
(5) É importante colocar código único fora do loop principal, mas é frequentemente ignorado. Simplificando, se você tiver um código que seja um monte de valores padrão que só precisam ser instanciados uma vez, em vez de instanciar toda vez que você chamar a função do plug -in, você deve colocar esse código fora do método do plug -in.
(6) Depois de aprender, vamos pensar sobre isso. 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 (assumindo que o jQuery não seja usado). Como refatorá -lo?
O artigo de amanhã falará sobre esse problema e refatorará a lógica principal do plug-in, portanto, fique atento. . .