introdução:
Este capítulo não explica alguns princípios subjacentes de JS em profundidade, como este ponteiro, escopo e protótipo. Envolve alguns deles propícios para simplificar o código e melhorar a eficiência da execução durante o desenvolvimento, ou podem ser usados como um método empírico. O comprimento não é longo, e pequenos passos permitem ler o artigo inteiro e experimentar a alegria da programação.
Obtenha números aleatórios em dois intervalos
A cópia do código é a seguinte:
função getrandomnum (min, max) {// Obtenha números aleatórios dentro de dois intervalos
// @南南南南南南 sugere que o primeiro parâmetro é maior que o segundo parâmetro, portanto, adicionar um julgamento é mais confiável
se (min> max)
Max = [min, min = max] [0]; // trocar rapidamente dois valores variáveis
var range = max - min + 1;
var Rand = Math.Random ();
retornar min + math.floor (Rand * range);
};
Retornar um parâmetro positivo/negativo aleatoriamente
A cópia do código é a seguinte:
função getRandomxy (num) {// retorna um parâmetro aleatório positivo/negativo
num = novo número (num);
if (math.random () <= 0,5)
num = -num;
retornar num;
}
SetInterval () ou Settimeout () Função do timer Pass Parâmetro
A cópia do código é a seguinte:
var s = 'eu sou um parâmetro';
função fn (args) {
console.log (args);
}
var a = setInterval (fn (s), 100); // XXXXX ERRO XXXXXX
var b = setInterval (function () {// correto, chame a função cronometrada com função anônima
fn (s);
}, 100);
timer setInterval () ou setTimeout () chamado recursivamente
A cópia do código é a seguinte:
var s = true;
função fn2 (a, b) {// Etapa 3
se (s) {
ClearInterval (a);
ClearInterval (B);
}
};
função fn (a) {// Etapa 2
var b = setInterval (function () {
FN2 (a, b) // Passe em dois temporizadores
}, 200)
};
var a = setInterval (function () {// Etapa 1
fn (a); // b representa o próprio temporizador, que pode ser passado nos parâmetros do assento
}, 100);
Converter string em número
A cópia do código é a seguinte:
// Não há necessidade de novo número (string) nem número (string) apenas subtrair zeros da string
var str = '100'; // str: string
var num = str - 0; // num: número
Julgamento de valor nulo
A cópia do código é a seguinte:
var s = ''; // string vazia
Se (!
if (s! = null) // mas string vazia! = nulo
if (s! = indefinido) // string vazia também é! = indefinido
Ou seja, o método do navegador parseint ()
A cópia do código é a seguinte:
// A conversão a seguir é 0 no IE e outros navegadores são 1. Isso está relacionado à explicação do navegador do IE sobre os dígitos.
var inum = parseint (01);
// Então, a escrita compatível é
var num = parseint (novo número (01));
Firebug convenientemente depurar o código JS
A cópia do código é a seguinte:
// Firebug possui um objeto de console interno, fornecendo métodos internos para exibir informações
/**
* 1: console.log (), que pode ser usado em vez de alert () ou document.write (), suporta saída de espaço reservado, caracteres (%s), números inteiros (%d ou%i), números de ponto flutuante (%f) e objetos (%o). Por exemplo: Console.log (" %D ano %D mês %D Day", 2011, 3, 26)
* 2: Se houver muita informação, você poderá exibi -las em grupos. Os métodos utilizados são console.Group () e Console.Grupend ()
* 3: console.dir () pode exibir todas as propriedades e métodos de um objeto
* 4: console.dirxml () é usado para exibir o código html/xml contido em um nó de uma página da web
* 5: console.assert () afirmam, usado para determinar se uma expressão ou variável é verdadeira
* 6: console.Trace () é usado para rastrear a trilha de chamada da função
* 7: Console.Time () e Console.TimeEnd () são usados para exibir o tempo de execução do código
* 8: Análise de desempenho (Profiler) é analisar o tempo de execução de cada parte do programa para descobrir o gargalo. O método usado é console.profile () .... fn .... console.profileend ()
*/
Pegue rapidamente os milissegundos atuais
A cópia do código é a seguinte:
// t == O sistema de milissegundos do sistema atual, razão: o operador de sinal + será chamado, e o método de data valueof () será chamado.
var t = +new Date ();
Rapidamente tome bits inteiros decimais
A cópia do código é a seguinte:
// x == 2, os seguintes valores x são 2 e números negativos também podem ser convertidos
var x = 2.00023 | 0;
// x = '2.00023' | 0;
Dois valores variáveis Intercâmbio (sem quantidade intermediária)
A cópia do código é a seguinte:
var a = 1;
var b = 2;
a = [b, b = a] [0]
alerta (a+'_'+b) // Os valores do resultado 2_1, A e B foram trocados.
Lógico ou '||' operador
A cópia do código é a seguinte:
// b não é nulo: a = b, b é nulo: a = 1.
var a = b || 1;
// O uso mais comum é passar os parâmetros para um método de plug-in e obter elementos de destino do evento: evento = evento || Window.Event
// ou seja, tem um objeto de janela.Event, mas FF não.
Somente o objeto de método possui propriedades de protótipo
A cópia do código é a seguinte:
// O método possui a propriedade Prototype de protótipo de objeto, enquanto os dados originais não possuem essa propriedade, como var a = 1, a não possui uma propriedade de protótipo
function pessoa () {} // construtor humano
Pessoa.prototype.run = function () {alert ('run ...'); } // Método de execução do protótipo
Pessoa.run (); // erro
var p1 = new Person (); // O método de execução do protótipo será atribuído a P1 somente quando o novo operador for usado.
p1.run (); // correr...
Pegue rapidamente o dia da semana
A cópia do código é a seguinte:
// A hora atual do sistema de cálculo é a semana
var semana = "Hoje é: semana" + "dia um, dois, três, quatro, cinco, seis" .Charat (new Date (). getDay ());
Viés de fechamento
A cópia do código é a seguinte:
/**
* Fechamento: qualquer corpo do método JS pode ser chamado de fechamento, não apenas acontece se uma função embutida se referir a um determinado parâmetro ou propriedade de uma função externa.
* Possui um escopo independente, no qual várias subescópias podem existir (ou seja, métodos aninhados) e, finalmente, o escopo de fechamento é o escopo do método mais externo.
* Ele contém os parâmetros do método do próprio e dos parâmetros do método de todas as funções incorporadas. Portanto, quando uma função incorporada tem uma referência externamente, o escopo da referência é o escopo do método (de nível superior) em que a função de referência está localizada.
*/
função a (x) {
função b () {
alerta (x); // Referência parâmetros de função externa
}
retornar b;
}
var run = a ('run ...');
// Devido à expansão do escopo, as variáveis da função externa a podem ser referenciadas e exibidas
correr(); // alert (): corra ..
Obtenha a sequência de parâmetros de endereço e atualização cronometrada
A cópia do código é a seguinte:
// Obter um ponto de interrogação? O conteúdo a seguir inclui o ponto de interrogação
var x = window.location.search
// Obtenha o conteúdo por trás do número do alarme, incluindo o número #
var y = window.location.hash
// A atualização automática da página da web pode ser alcançada com o temporizador
window.Location.Reload ();
Nulo e indefinido
A cópia do código é a seguinte:
/**
* O tipo indefinido tem apenas um valor, ou seja, indefinido. Quando a variável declarada não foi inicializada, o valor padrão da variável é indefinido.
* O tipo nulo também possui apenas um valor, ou seja, nulo. Null é usado para representar um objeto que ainda não existiu e é frequentemente usado para representar uma função que tenta retornar um objeto que não existe.
* O ECMAScript acredita que indefinido é derivado de nulo, portanto eles são definidos como iguais.
* Mas, se, em alguns casos, devemos distinguir entre esses dois valores, o que devemos fazer? Os dois métodos a seguir podem ser usados
* Ao fazer julgamentos, é melhor usar o julgamento do tipo forte '===' ao julgar se o objeto tem um valor de acordo com as necessidades.
*/
var a;
alerta (a === null); // false, porque A não é um objeto vazio
alerta (a === indefinido); // verdadeiro, porque A não é inicializado, o valor é indefinido
// Introduce
alerta (nulo == indefinido); // true, porque o operador '==' executará a conversão do tipo,
// De forma similar
alerta (1 == '1'); // verdadeiro
alerta (0 == false); // Verdadeiro, False converte para o número de número 0
Adicione dinamicamente parâmetros ao método
A cópia do código é a seguinte:
// Método A tem mais um parâmetro 2
função a (x) {
var arg = array.prototype.push.call (argumentos, 2);
alerta (argumentos [0]+'__'+argumentos [1]);
}
Personalize o estilo de borda selecionado
A cópia do código é a seguinte:
<!-Copie para a página para tentar o efeito, você pode personalizar o estilo à vontade->
<span style = "borda: 1px vermelho sólido; posição: absoluto; transbordamento: oculto;" >
<select style = "margem: -2px;">
<pution> Selecione o estilo de borda personalizado </pption>
<pution> 222 </pption>
<pution> 333 </pption>
</leclect>
</span>
A paleta de cores mais fácil
A cópia do código é a seguinte:
<!-JS para extrair seu valor de valor e definir qualquer cor para qualquer objeto->
<Tipo de entrada = cor />
Funções, objetos são matriz?
A cópia do código é a seguinte:
var anobject = {}; // um objeto
anobject.aproperty = "Propriedade do objeto"; // Uma propriedade do objeto
anobject.amethod = function () {alert ("método do objeto")}; // Um método do objeto
// Concentre -se no seguinte:
alerta (anobject ["APROPROPERTY"]); // você pode acessar o atributo como uma matriz com o nome do atributo como um subscrito
anobject ["amethod"] (); // Você pode chamar um método como uma matriz com o nome do método como um subscrito
para (var s em anobject) // transfira todas as propriedades e métodos do objeto para processamento iterativo
alerta (s + ӎ um" + typeof (anobject [s)));
// é o mesmo para o objeto do tipo de função:
var Afunction = function () {}; // uma função
afunction.aproperty = "Propriedade da função"; // Uma propriedade da função
afunction.amethod = function () {alert ("método de função")}; // Um método de função
// Concentre -se no seguinte:
alerta (afunção ["Apperty"]); // Você pode acessar as propriedades como a matriz com o nome do atributo como o subscrito
afunção ["amethod"] (); // Você pode chamar um método usando o nome do método como um subscrito quando uma função é usada como um subscrito para uma matriz
para (var s em afunção) // iterar todas as propriedades e métodos da função de travessia para o processamento iterativo
alerta (s + ”é um" + typeof (afunção [s)));
A cópia do código é a seguinte:
/**
* Sim, objetos e funções podem ser acessados e processados como matrizes, usando nomes de atributos ou nomes de métodos como subscritos.
* Então, deve ser considerado uma matriz ou um objeto? Sabemos que as matrizes devem ser consideradas estruturas de dados lineares. As estruturas de dados lineares geralmente possuem certas regras, adequadas para operações de iteração de lote unificadas, etc., que é um pouco como ondas.
* Objetos são estruturas de dados discretas adequadas para descrever coisas dispersas e personalizadas, um pouco como partículas.
* Portanto, também podemos perguntar: os objetos em ondas ou partículas JavaScript? Se houver teoria quântica do objeto, a resposta deve ser: dualidade de partículas de onda!
* Portanto, funções e objetos em JavaScript têm as características de objetos e matrizes. A matriz aqui é chamada de "dicionário", uma coleção de pares de nomes-valor que podem ser arbitrariamente esticados e condensados. De fato, a implementação interna de objeto e função é uma estrutura de dicionário, mas essa estrutura de dicionário mostra uma aparência rica por meio de gramática rigorosa e requintada. Assim como a mecânica quântica usa partículas para explicar e lidar com problemas em alguns lugares, enquanto as ondas para explicar e lidar com problemas em outros. Você também pode optar livremente de usar objetos ou matrizes para explicar e lidar com problemas quando necessário. Desde que você seja bom em entender esses recursos maravilhosos do JavaScript, você pode escrever muito código conciso e poderoso.
*/
Clicar em uma área em branco pode desencadear um elemento para fechar/ocultar
A cópia do código é a seguinte:
/**
* Às vezes, a página possui um menu suspenso ou algo assim, que exige que o usuário a oculte ao clicar em um branco ou clicar em outros elementos.
* Um evento de clique global de documentos pode ser acionado
* @param {objeto} "Objeto de destino"
*/
$ (documento) .Click (função (e) {
$ ("Objeto de destino"). Hide ();
});
/**
* Mas uma desvantagem é que, quando você clica no elemento e deseja exibi -lo
* Se você não impedir que o evento borbulhou o objeto global do documento clicando no tempo, o método acima será executado
*/
$ ("Objeto de destino"). Clique (função (evento) {
Evento = Evento || Window.Event;
event.stopPropagation (); // Ao clicar no objeto de destino, impeça que o evento borbulhou no tempo
$ ("Objeto de destino"). Toggle ();
});
Os acima são alguns métodos JavaScript comumente usados resumidos por mim. Espero que gostem.