Escrevo o código JavaScript há muito tempo e não consigo me lembrar de que era ele começou. Estou muito empolgado com as realizações do JavaScript nos últimos anos; Tenho muita sorte de ser o beneficiário dessas realizações. Escrevi muitos artigos, capítulos e um livro dedicado a ele, mas ainda posso encontrar um novo conhecimento sobre esse idioma agora. A seguir, descreve as habilidades de programação que me fizeram suspirar "Ah!" no passado. Você deve tentar essas habilidades agora, em vez de esperar para descobri -las acidentalmente em algum momento no futuro.
Escrita concisa
Uma das minhas coisas favoritas no JavaScript é o método da abreviação de gerar objetos e matrizes. No passado, se você quisesse criar um objeto, precisaria fazer isso:
var car = new Object (); car.colour = 'vermelho'; car.wheels = 4; car.hubcaps = 'spinning'; car.age = 4;
O método de escrita a seguir pode alcançar o mesmo efeito:
Var Car = {color: 'Red', Wheels: 4, Hubcaps: 'Spinning', idade: 4}É muito mais simples, você não precisa usar o nome desse objeto repetidamente. Dessa forma, o carro é definido. Talvez você encontre o problema da ConvalidUserInsession, que só é encontrado quando você usa o IE. Lembre -se de uma coisa e não escreva vírgulas antes do aparelho de fechamento, e você não terá nenhum problema.
Outra abreviação muito conveniente é para matrizes. A maneira tradicional de definir uma matriz é a seguinte:
variesthatneedbetterwriters = new Array ('Transformers', 'Transformers2', 'Avatar', 'Indianajones 4');A versão da abreviação é assim:
variesthatneedbetterwriters = ['Transformers', 'Transformers2', 'Avatar', 'Indianajones 4'];
Para matrizes, há um problema aqui, mas na verdade não há função de grupo de gráficos. Mas você costuma descobrir que alguém define o carro acima como este, assim
Var Car = new Array (); carro ['cor'] = 'vermelho'; carro ['rodas'] = 4; carro ['Hubcaps'] = 'Spinning'; carro ['idade'] = 4;
Matrizes não são onipotentes; Se estiverem escritos incorretamente, serão confusos. Grupos de gráficos são realmente a função dos objetos, e as pessoas confundiram esses dois conceitos.
Outro método de abreviação muito legal é usar símbolos condicionais ternários. Você não precisa escrever como abaixo ...
direção var; if (x <200) {direção = 1; } else {direção = -1; }…Você pode simplificá -lo com notação condicional ternária:
Var Direction = X <200? 1: -1;
Quando a condição é verdadeira, o valor após o ponto de interrogação é obtido, caso contrário, o valor após o cólon é levado.
Armazenar dados em json
Antes de descobrir o JSON, usei vários métodos malucos para armazenar dados nos tipos de dados inerentes do JavaScript, como matrizes, cordas, glifos fáceis de dividir e outras coisas irritantes. Depois que Douglas Crockford inventou o JSON, tudo mudou. Usando o JSON, você pode usar as próprias funções do JavaScript para armazenar dados em formatos complexos e não há necessidade de fazer outras conversões adicionais e você pode acessá -los diretamente. JSON é a abreviação de "notação de objeto JavaScript", que usa os dois métodos de abreviação mencionados acima. Então, se você quiser descrever uma banda, pode escrever assim:
var band = {"name": "The Red Hot Chili Pimenta", "Membros": [{"Nome": "Anthony Kiedis", "Role": "Vocals Lead"}, {"Nome": "Michael 'Flea' Balzary" Nome "Nome" Nome "" Nome "" Nome ":" Nome ":" Nome ":" Nome ":" Nome "" ":" Balzary ":" Nome "" Nome "" Nome "" Nome "" "" ":" Balsars "," Balzary "," Balzary "" Nome "" Nome "" Nome "" Nome "" Nome "" " {"Name": "John Frusciante", "Role": "Lead Guitar"}], "Ano": "2009"}Você pode usar o JSON diretamente no JavaScript, encapsulá -lo em funções ou até usá -lo como uma forma de valor de retorno de uma API. Chamamos isso de JSON-P, e muitas APIs usam este formulário.
Você pode chamar uma fonte de fornecimento de dados e retornar diretamente dados JSON-P no código de script:
<div id = "delicious"> </div> <sCript> função deliciosa (o) {var out = '<ul>'; for (var i = 0; i <o.length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out += '</ul>'; Document.getElementById ('Delicious'). Innerhtml = out; } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"> </sCript>Isso chama o recurso de serviço da web fornecido pelo site Delicious para obter a lista de marcadores não ordenada mais recente no formato JSON.
Basicamente, o JSON é a maneira mais leve de descrever estruturas de dados complexas e podem ser executadas no navegador. Você pode até executá -lo no PHP com a função json_decode (). Uma coisa que me surpreendeu sobre as próprias funções de JavaScript (matemática, array e string) é que, depois de estudar as funções de matemática e cordas em JavaScript, descobri que eles podem simplificar bastante meu trabalho de programação. Usando -os, você pode salvar o processamento complexo de loop e julgamentos condicionais. Por exemplo, quando preciso implementar uma função para encontrar o maior número da matriz de números, costumava escrever este loop como este:
VAR números = [3.342,23,22,124]; var max = 0; for (var i = 0; i <números.length; i ++) {if (números [i]> max) {max = números [i]; }} alert (max);Podemos fazer isso sem loop:
VAR números = [3.342,23,22,124]; números.sort (função (a, b) {return b - a}); alerta (números [0]);Deve -se notar que você não pode classificar () uma variedade de caracteres numéricos, porque neste caso ele apenas classificará em ordem alfabética. Se você quiser saber mais sobre o uso, poderá ler este bom artigo sobre Sort ().
Outra função interessante é Math.max (). Esta função retorna o maior número no parâmetro:
Math.Max (12,123,3,2,433,4); // retorna 433
Como essa função pode verificar os números e retornar o maior, você pode usá -lo para testar o suporte do navegador para um recurso:
var scrolltop = math.max (doc.documentElement.scrolltop, doc.body.scrolltop);
Isso é usado para resolver problemas do IE. Você pode obter o valor SCROLLTOP da página atual, mas, dependendo do doctype na página, apenas uma das duas propriedades acima armazenará esse valor e a outra propriedade será indefinida, para que você possa obter esse número usando Math.max (). Leia este artigo e você terá mais conhecimento sobre o uso de funções matemáticas para simplificar o JavaScript.
Há também um par de funções muito úteis que operam strings são divididas () e junção (). Eu acho que o exemplo mais representativo seria escrever uma função para anexar o estilo CSS aos elementos da página.
É assim. Quando você anexa uma classe CSS ao elemento da página, é a primeira classe CSS desse elemento ou já possui algumas classes. Você precisa adicionar um espaço após a classe existente e depois seguir a classe. E quando você deseja remover esta classe, também precisa remover os espaços em frente a essa classe (isso era muito importante no passado, porque alguns navegadores antigos não reconheceram a classe seguida pelos espaços).
Então, a escrita original ficará assim:
função addclass (elm, newclass) {var c = elm.className; elm.className = (c === '')? newclass: c+''+newclass; }Você pode usar as funções Split () e ingressar () para concluir automaticamente esta tarefa:
função addclass (elm, newclass) {var classes = elm.className.split (''); classes.push (newclass); elm.className = classes.join (''); }Isso garantirá que todas as classes sejam separadas por espaços e que a classe que você deseja anexar é colocada exatamente a última.
Delegação de eventos
Os aplicativos da Web são todos motivados pelo evento. Gosto de manuseio de eventos, especialmente gosto de definir eventos. Torna seu produto escalável sem alterar o código principal. Há um grande problema (também uma manifestação poderosa) sobre a remoção de eventos na página. Você pode instalar um ouvinte de evento em um elemento e o ouvinte do evento começa a trabalhar. Mas não há indicação na página de que exista um ouvinte. Devido a esse problema imprevisível (o que é particularmente problemático para alguns iniciantes) e os vários problemas de memória que "navegadores", como o IE6, usam muitos eventos, você deve admitir que é aconselhável tentar usar a programação de eventos o mínimo possível.
Assim, ocorreu a comissão do incidente.
Quando um evento em um elemento na página é acionado e, no relacionamento de herança do DOM, todos os filhos desse elemento também podem receber este evento. No momento, você pode usar um manipulador de eventos no elemento pai para lidar com isso, em vez de usar ouvintes de eventos em vários elementos filhos para lidar com isso. O que exatamente isso significa? Vamos colocar desta maneira, existem muitos hiperlinks na página. Você não deseja usar esses links diretamente. Você deseja chamar este link através de uma função. O código HTML é assim:
<h2> Ótimos recursos da web </h2> <ul id = "Resources"> <li> <a href = "http://opera.com/wsc"> Currículo de padrões da web da Opera </a> </li> <li> <a href = "http://site.com"> site </a> href = "http://alistapart.com"> uma lista à parte </a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> </li> <li> <a href = http://blameitontonhevoices.com "> href = "http://oddlyspecific.com"> estranhamente específico </a> </li> </ul>
É uma prática comum percorrer esses links e anexar um manipulador de eventos a cada link:
// Exemplo típico de manuseio de eventos (function () {var Resources = document.getElementById ('Resources'); var links = Resources.getElementsByTagName ('a'); var all = links.length; para (var i = i <all; i ++) {// Anexe um ouvinte a cada links [i]. manipulação (e) {var x = e.Target;Também podemos realizar esta tarefa com um processador de eventos:
(function () {var Resources = document.getElementById ('Resources'); Resources.adDeventListener ('Clique', manipulador, false); manipulador de funções (e) {var x = e.target; // obtenha o link tha se (x.nodename.tolowercase () ===; }) ();Como o evento de cliques ocorre nesses elementos de página, tudo o que você precisa fazer é comparar os nomes de noden e descobrir qual elemento deve responder ao evento.
Isenção de responsabilidade: Os dois exemplos sobre eventos mencionados acima podem ser executados em todos os navegadores. Exceto no IE6, você precisa usar um modelo de evento no IE6, em vez de uma simples implementação padrão W3C. É por isso que recomendamos o uso de alguns kits de ferramentas.
O benefício dessa abordagem não se limita à redução de vários processadores de eventos em um. Pense nisso, por exemplo, você precisa adicionar dinamicamente mais links a esta tabela de links. Depois de usar a delegação de eventos, você não precisa fazer outras alterações; Caso contrário, você precisa novamente esta tabela de links e instalar o manipulador de eventos para cada link novamente.
Funções anônimas e modularidade
A coisa mais irritante em JavaScript é que as variáveis não têm escopo a usar. Qualquer variável, função, matriz, objeto, desde que não esteja dentro da função, é considerada global, o que significa que outros scripts nesta página também podem acessá -la e substituí -la.
A solução é colocar sua variável dentro de uma função anônima e chamá -la imediatamente após a definição. Por exemplo, o método de escrita a seguir produzirá três variáveis globais e duas funções globais:
var name = 'Chris'; var Age = '34'; var status = 'single'; função createMember () {// [...]} função getMemberDetails () {// [...]}Se houver uma variável chamada status em outros scripts nesta página, ocorrerá problemas. Se encapsulá -los em uma aplicação de myaplicação, esse problema será resolvido:
var myApplication = function () {var name = 'Chris'; var Age = '34'; var status = 'single'; function createMember () {// [...]} função getMemberDetails () {// [...]}} ();No entanto, dessa maneira, não há função fora da função. Se é isso que você precisa, tudo bem. Você também pode omitir o nome da função:
(function () {var name = 'Chris'; var idade = '34'; var status = 'single'; function createMember () {// [...]} função getMemberDetails () {// [...]}}) ();Se você deseja usar o interior da função, precisa fazer algumas modificações. Para acessar CreateMember () ou GetMemberDetails (), você precisa transformá -los em propriedades de MyApplication para expô -las ao mundo externo:
var myApplication = function () {var name = 'Chris'; var Age = '34'; var status = 'single'; return {createMember: function () {// [...]}, getMemberDetails: function () {// [...]}}} (); //myApplication.createmember () e //myapplication.getMemberDetails () podem ser usados.Isso é chamado de modo de módulo ou singleton. Douglas Crockford já falou isso muitas vezes e é amplamente utilizado na biblioteca da interface do usuário do Yahoo Yui. Mas o que me torna inconveniente é que preciso alterar a estrutura de frases para que funções e variáveis possam ser acessadas pelo mundo exterior. Além disso, preciso adicionar o prefixo da MyApplication ao ligar. Então, eu não gosto de fazer isso, prefiro simplesmente exportar ponteiros para elementos que precisam ser acessados pelo mundo exterior. Depois de fazer isso, a escrita de chamadas externas é simplificada:
var myApplication = function () {var name = 'Chris'; var Age = '34'; var status = 'single'; function createMember () {// [...]} função getMemberDetails () {// [...]} return {create: createMember, get: getMemberDetails}} (); // Agora escreva como myApplication.get () e myApplication.create ().Eu chamo isso de "padrão de módulo revelador".
Configurável
Depois que publiquei o código JavaScript que escrevi para este mundo, alguém queria alterá -lo, geralmente as pessoas queriam concluir as tarefas que ele não podia se concluir - mas geralmente o programa que escrevi não era flexível o suficiente e não forneceu funções definidas pelo usuário. A solução é adicionar um objeto de item de configuração ao seu script. Certa vez, escrevi um artigo que introduz objetos de item de configuração do JavaScript em profundidade. Aqui estão os principais pontos:
---- No seu script, adicione um objeto chamado configuração.
---- Este objeto armazena todas as coisas que as pessoas geralmente precisam mudar ao usar este script:
** ID CSS e nome da classe;
** Nome do botão, palavra de etiqueta, etc.;
** valores como "Número de imagens exibidas por página" e "Tamanho das imagens exibidas";
** Localização, localização e configurações de idioma.
--- Retorne esse objeto ao usuário como uma propriedade comum para que o usuário possa modificar e substituí-lo.
Geralmente, é isso que você precisa fazer na última etapa do seu processo de programação. Concentrei isso em um exemplo: "Cinco coisas a fazer em um script antes de entregá -lo ao próximo desenvolvedor".
De fato, você também deseja que seu código seja usado de uma maneira muito boa e faça algumas alterações de acordo com suas respectivas necessidades. Se você implementar esse recurso, receberá e -mails menos confusos de pessoas que reclamam do seu script, o que lhe dirá que alguém modificou seu script e é muito útil.
Interagir com o fundo
Uma das coisas importantes que aprendi em tantos anos de experiência em programação é que o JavaScript é uma excelente linguagem para o desenvolvimento da interação da interface, mas se for usada para processar números ou acessar fontes de dados, é um pouco insatisfatório.
Inicialmente, aprendi JavaScript para substituir o Perl porque odeio ter que copiar o código para a pasta CGI-bin para fazer o Perl executar. Mais tarde, percebi que deveria usar um idioma de trabalho de back -end para processar os dados principais e não posso deixar o JavaScript fazer tudo. Mais importante, precisamos considerar as características de segurança e linguagem.
Se eu acessar um serviço da web, posso obter os dados no formato JSON-P. No navegador do cliente, faço várias conversão de dados, mas quando tenho um servidor, tenho mais maneiras de converter os dados. Eu posso gerar dados de formato JSON ou HTML no lado do servidor e retorná-los ao cliente, bem como dados de cache etc. Se você entender e prepará-los com antecedência, obterá ganhos de longo prazo e economizará muitas dores de cabeça. Escrever programas adequados para vários navegadores é uma perda de tempo, use o kit de ferramentas!
Quando iniciei o desenvolvimento da Web, lutei muito por um longo tempo para usar o documento. Eu escolhi o documento. Jogadores porque gosto da ideia de que qualquer camada é seu próprio documento (e escrevi muitos documentos.Write para gerar elementos). O padrão da camada acabou falhando, então comecei a usar o documento.All. Fiquei muito feliz quando o Netscape 6 anunciou que ele suporta apenas modelos W3C DOM, mas na verdade os usuários não se importavam com isso. Os usuários apenas veem que esses navegadores não podem exibir coisas que a maioria dos navegadores pode exibir normalmente - isso é um problema com a nossa codificação. Escrevemos o código míope que só pode ser executado no ambiente atual, mas, infelizmente, nosso ambiente operacional está mudando constantemente.
Estou perdendo muito tempo lidando com a compatibilidade com vários navegadores e várias versões. Ser bom em lidar com esse tipo de problema me proporciona uma boa oportunidade de emprego. Mas agora não precisamos suportar essa dor.
Alguns kits de ferramentas, como Yui, JQuery e Dojo, podem nos ajudar a lidar com esse tipo de problema. Eles resolvem vários problemas do navegador, abstraindo várias implementações de interface, como incompatibilidade de versão, falhas de design etc., o que nos salva de nossa dor. A menos que você queira testar um determinado navegador beta, não adicione código ao seu próprio programa para corrigir os defeitos do navegador, porque é provável que você esqueça de excluir seu código quando o navegador modificar esse problema.
Por outro lado, confiar inteiramente em kits de ferramentas também é um comportamento míope. Os kits de ferramentas podem ajudá -lo a se desenvolver rapidamente, mas se você não tiver uma compreensão profunda do JavaScript, também fará algo errado.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.