1. A fluência da interface
Uma boa interface é suave e fácil de entender, e reflete principalmente os seguintes aspectos:
1. Simples
Para operar o atributo CSS de um certo elemento, o seguinte é o método nativo:
document.QuerySelectorAll ('#id'). style.color = 'vermelho';Após a embalagem
função a (seletor, cor) {document.QuerySelectorAll (seletor) []. style.color = color} a ('#a', 'vermelho');De uma longa fila com dezenas de letras para uma chamada de função simples, a API é simples e fácil de usar
2. Legabilidade
A ('#a', 'vermelho') é uma boa função que nos ajuda a alterar um elemento de maneira simples e praticamente, mas o problema é que, se você usar a alteração da função pela primeira vez, ficará mais confuso. Ninguém dirá a ele qual é a função A. É necessário saber uma coisa sobre o desenvolvimento da interface: as pessoas são preguiçosas. Do ponto de vista da função de atribuição de cores, embora menos código seja escrito, aumenta o custo da memória. Toda vez que você faz isso, você precisa ter um relacionamento de mapeamento. A ----> cor. Se são alguns simples, não importa, mas geralmente um conjunto de estruturas tem dezenas ou até centenas de APIs, e o aumento dos custos de mapeamento fará com que o programador entre em colapso. O que precisamos é tornar a interface significativa. Vamos reescrever a função A:
função letwhonelementChanGecolor (seletor, cor) {document.QuerySelectorAll (seletor, cor);}letwomeElementChangeColor recebe um significado linguístico em relação a A, e qualquer um conhecerá seu significado.
3. Reduza os custos de memória
A função que agora também é assim também é assim. É muito longo. Embora o LetSomeElementChanGecolor reduz o custo de mapeamento, aumenta o custo da memória. Você deve saber que ninguém, incluindo mestres acadêmicos, gosta de ser verbalmente. As APIs que obtêm de forma nativa também possuem esse documento de problema. document.getElementsByName; document.QuerySelectorAll; Essas APIs dão às pessoas a sensação de que as palavras são muito longas. Embora o significado que eles dêem seja muito claro, essa abordagem se baseia no sacrifício da simplicidade. Então, reescrevemos esta função anterior novamente
função setColor (seletor, cor) {xxxxxxxxxxxxxx}Reduza o nome da função sem alterações significativas. Facilite a leitura, lembre -se e use;
4. Estendido
A chamada extensão significa que o uso de funções é executado na ordem de escrita, como a água fluida para formar uma cadeia de execução:
document.getElementById ('id'). style.color = 'vermelho'; document.getElementById ('id'). style.fontsize = 'px'; document.getElementById ('id'). style.backgourdcolor = 'rosa';O método anterior que usamos foi encapsular as duas funções setFontSize, SetbackgroundColor novamente; e depois execute -os setColor ('id', 'vermelho'); setfontsiez ('id', '12px'); setbackgroundcolor ('id', 'rosa'); Obviamente, essa abordagem não está com preguiça de ir além do reino; O elemento de identificação precisa ser re-montado sempre, afetando o desempenho e falhando; Toda vez que precisa adicionar novos métodos, falhando, esses métodos ainda são chamados sempre ou falhando. Abaixo, nós o reescrevemos em uma função estendida. Primeiro, encapsular o método de identificação de obtenção em um objeto e depois retornar este objeto em cada método do objeto:
function getElement(selector) {this.style = document.querySelecotrAll(selector).style;}getElement.prototype.color = function(color) {this.style.color = color;return this;}getElement.prototype.background = function(bg) {this.style.backgroundColor = color;return this;} getElement.prototype.fontsize = function (size) {this.style.fontsize = size; retorna this;} // chamada var el = new getElement ('#id') el.color ('vermelho'). Background ('rosa'). fontsize ('px');Simples, suave e fácil de ler mais tarde, falaremos sobre como continuar otimizando nos parâmetros. Portanto, todo mundo prefere usar a API jQuery. Embora um símbolo $ não represente nenhum significado prático, um símbolo simples é benéfico para o nosso uso. Ele incorpora os princípios acima: simples, fácil de ler, fácil de lembrar, escrever em cadeia e processamento de vários parâmetros.
Nightware:
document.getElementById ('id'). style.color = 'vermelho'; document.getElementById ('id'). style.fontsize = 'px'; document.getElementById ('id'). style.backgourdcolor = 'rosa';sonhar:
$ ('id'). css ({color: 'vermelho', fontsize: '12px', backgroundcolor: 'rosa'})2. Consistência
1. Consistência da interface
As interfaces relevantes mantêm um estilo consistente. Um conjunto completo de APIs reduzirá bastante a adaptabilidade do desenvolvedor a novas ferramentas se transmitir um senso de familiaridade e conforto. Nomear isso: curto e auto-descrito e, o mais importante, manter a consistência. "Existem apenas duas dores de cabeça na comunidade de ciências da computação: falha de cache e problemas de nomeação" - Phil Karlton escolhe uma palavra que você gosta e usa -a continuamente. Escolha um estilo e depois mantenha -o.
Nightware:
setColor,
Letbackground
ChangeFontSize
Makedisplay
sonhar:
setColor;
revés;
setFontSize
definir.........
Tente manter o estilo de código e o estilo de nomeação para que as pessoas possam ler seu código como se estivessem lendo artigos escritos pela mesma pessoa.
3. Processamento de parâmetros
1. Tipo de parâmetro
Determine o tipo de parâmetros para fornecer garantias estáveis para o seu programa
// Estipamos que a cor aceita o tipo de string função setColor (color) {if (typeof cor! == 'string') return; doSomething}2. Use JSON para passar os parâmetros
Existem muitos benefícios de aprovar valores no JSON. Ele pode nomear parâmetros, ignorar a localização específica dos parâmetros, fornecer valores padrão, etc. Por exemplo, as seguintes situações ruins:
função fn (param1, param2 ............ paramn)
Você deve passar cada parâmetro para que seu método seja executado de uma maneira diferente da que você espera. O método correto é o seguinte.
função fn (json) {// defina o valor padrão para os parâmetros necessários var default = extend ({param: 'padrão', param: 'default' ......}, json)}Espera -se que este código de função seja executado, mesmo que você não passe nenhum parâmetros nele. Porque ao declarar, você decidirá o valor padrão dos parâmetros com base nos negócios específicos.
4. Escalabilidade
Um dos princípios mais importantes do design de software: nunca modifique a interface, isso significa estendê -lo! A escalabilidade também requer uma única responsabilidade pela interface, e várias interfaces de responsabilidade são difíceis de expandir. Pegue uma castanha:
// A fonte e o fundo de um elemento precisam ser alterados ao mesmo tempo // Nightware: Função Conjunto (Seletor, Color) {Document.QuerySelectroall (Selector) .style.color = cor; document.QuerySelectroall (seletor) .style.backgroundcolor = cor;} // A função não pode ser expandida. Se você precisar alterar o tamanho da fonte novamente, poderá modificar apenas essa função e preencher o código para alterar o tamanho da fonte após o conjunto de funções // DreamFunction (seletor, cor) {var el = document.QuerySelectroAll (seletor); el.style.color = cor; el.style.backgroundColor para a cor; px) {var el = set (seletor, cor) el.style.fontsize = px; retorna el;}O acima é apenas uma adição simples de cores. O negócio é complexo e o código não é quando você o escreve. Você deve ler o código anterior e modificá -lo. Obviamente, ele não está em conformidade com o princípio fechado. A função modificada retorna o objeto elemento, para que, na próxima vez que você precisar alterar, você obterá o valor de retorno novamente para processamento.
2. O uso disso
A escalabilidade também inclui o uso flexível disso, ligue e aplique métodos:
função dizbonjour () {alert (this.a)} obj.a =; obj.say = saybonjour; obj.say (); /// orsaybonjour.call || aplicar (obj); //5. Erros de manuseio
1. Erros de prever
Você pode usar o tipo de ou tentar ... capturar para detectar. O tipo de força o objeto de detecção a não lançar erros e é especialmente útil para variáveis indefinidas.
2. Jogue um erro
A maioria dos desenvolvedores não deseja cometer erros e precisa encontrar o código correspondente. A melhor maneira é produzi -lo diretamente no console para dizer ao usuário o que aconteceu. Podemos usar a API de saída do navegador: console.log/warn/error. Você também pode sair para o seu programa: tente ... pegar.
função error (a) {if (typeof a! == 'string') {console.error ('param a deve ser tipo de string')}} função error () {try {// Algum excuceto de código aqui talvez jogue errado} catch (ex) {console.wran (ex);}}}}6. Previsão
A interface previsível do programa de odor fornece robustez e, para garantir a execução suave do seu código, deve levar em consideração as expectativas anormais. Vejamos a diferença entre código imprevisto e código previsível usando o setColor anterior
//nighwarefunction set(selector, color) {document.getElementById(selector).style.color = color;}//dreamzepto.init = function(selector, context) {var dom// If nothing given, return an empty Zepto collectionif (!selector) return zepto.Z()// Optimize for string selectorselse if (typeof selector == 'string') {selector = Selector.Trim () // Se for um fragmento HTML, crie nós a partir dele // Nota: No Chrome e Firefox, Dom Error // é lançado se o fragmento não começar com <se (selettor [] == '<' && Fragmentre.test (seletor)), doma = zepto.fragment (selector, regexp. contexto primeiro, e selecione // nós a partir de então se (context! == indefinido) retorna $ (contexto) .Find (seletor) // Se for um seletor CSS, use -o para selecionar nós. A coleção é dada, basta retornar o itelse se (zepto.isz (seletor)) retornar selectorElse {// normalizar a matriz se uma matriz de nós for fornecida (isarray (seletor)) Dom = compact (selettor) // wrap dom ges.else if (isobject (seletor)) dom = [seletor], selector = Null NULL/ se (isobject)), se seletor, se selecionamento, se selecionador, se selecionador, se seletora, se seletora, se seletora, se selecionador, se selecionador), se seletor, se selecionador, se selecionador. (fragmentre.test (seletor)) dom = zepto.fragment (selettor.trim (), regexp. $, context), selettor = nulo // Se houver um contexto, crie uma coleção nesse contexto primeiro e selecione // nós do if (contexto! modes.else dom = zepto.qsa (documento, seletor)} // Crie uma nova coleção Zepto a partir dos nós FoundrenGurn zepto.z (dom, seletor)}O acima é o código -fonte do Zepto. Você pode ver que o autor fez muito processamento ao prever os parâmetros recebidos. De fato, a previsibilidade fornece várias entradas para o programa, nada além de alguns julgamentos lógicos. Zepto usa muitos julgamentos certos e errados aqui, o que também leva à duração do código e não é adequado para leitura. Em resumo, a previsibilidade realmente exige que você escreva mais parâmetros para os objetos físicos no local. Altere a detecção externa para a detecção interna. Sim, as pessoas que o usam são confortáveis e felizes em usá -lo. Agora! A coisa mais importante na vida é Heisen.
7. Comentários e documentos legibilidade
A melhor interface é que o usaremos sem documentação, mas geralmente, uma vez que o número de interfaces for mais e os negócios aumentem, será um pouco difícil de usar. Portanto, os documentos e comentários da interface precisam ser cuidadosamente escritos. Os comentários seguem o princípio da simples e da concisão, e são para aqueles que vêm anos depois para mostrá -los:
// Interface de anotação, para demonstrar ppt, usar o comentário da função () {// Se você definir uma variável sem significado literal, é melhor escrever um comentário para ele: a: variável inútil, você pode excluir var a; // escrever comentários em chave e ambigüidade, como o toque final: limpar todos os dados após o roteamento da interface. Retornar go.navigate ('hash', function () {data.clear ();});}afinal
Recomenda -se que os documentos da API de redação de gramática reduzidos e a sintaxe da redação de documentos Royal do GitHub. Simples e rápido, o código é destacado e você não diz muito.
O exposto acima é a descrição completa dos princípios de design da API JavaScript apresentados a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!