Mais perguntas foram coletadas por mim por todo o caminho, e também há anos anteriores. As respostas não têm garantia de estar correto. Se houver algum erro ou soluções melhores, corrija -as.
Anexou o segundo artigo: 2014 Perguntas para entrevistas de teste escrito de 2014 para BAT e grandes empresas de Internet-HTML, CSS
As perguntas anteriores serão muito básicas e, quanto mais você for, mais você será, mais você ficará aprofundado.
JavaScript júnior:
1. Que tipo de linguagem é JavaScript e quais são suas características?
Não há resposta padrão.
2. Quais são os tipos de dados de JavaScript?
Tipos de dados básicos: string, boolean, número, indefinido, nulo
Tipo de dados de referência: objeto (matriz, data, regexp, função)
Portanto, a questão é: como determinar se uma variável é um tipo de dados de matriz?
• Método 1. Determine se possui "propriedades da matriz", como o método slice (). Você pode definir o método de fatia para esta variável, então às vezes falha
• Método 2.ObJ Instância do Array está incorreto em algumas versões do IE
• Método 3. Existem vulnerabilidades nos dois métodos. O novo método Array.isArray () é definido no script5 da ECMA para garantir sua compatibilidade. O melhor método é o seguinte
if (typeof Array.esArray === "Undefined") {Array.isArray = function (arg) {return object.prototype.toString.call (arg) === "[Array de objeto]"}; }3. Na caixa de entrada de entrada com um ID conhecido, espero obter o valor de entrada desta caixa de entrada. Como fazer isso? (Nenhuma estrutura de terceiros)
A cópia do código é a seguinte: document.getElementById ("id"). Valor
4. Como obter todas as caixas de seleção na página? (Nenhuma estrutura de terceiros)
var domlist = document.getElementsByTagName ('input') var weilboxlist = []; var len = domlist.length; // cache para a variável local while (len--) {// use, enquanto será mais eficiente do que para loop if (domlist [len] .Type == 'Caixa de seleção') {Checkboxlist.push (domlist [len]); }}5. Defina o conteúdo HTML de uma div com um ID conhecido como xxxx, e a cor da fonte é definida como preto (sem quadros de terceiros)
A cópia do código é a seguinte:
var dom = document.getElementById ("id");
dom.innerhtml = "xxxx"
dom.style.color = "#000"
6. Quando um nó DOM é clicado, esperamos poder executar uma função. O que devemos fazer?
• Ligue os eventos diretamente no DOM: <div onclick = ”test ()”> </div>
• Ligação através do OnClick em JS: XXX.OnClick = Teste
• Ligação por adição de eventos: addEventListener (xxx, 'clique', teste)
Portanto, a questão é: quais são os modelos de fluxo de eventos de JavaScript?
• "Bubble de evento": os eventos começam a ser aceitos pelos elementos mais específicos e depois se espalham por passo a passo
• "Captura de eventos": os eventos são recebidos primeiro pelo nó menos específico e depois para baixo passo a passo, até o mais específico
• "DOM Event Flow": três estágios: captura de eventos, estágio do alvo, bolha de eventos
7. O que são Ajax e Json, seus prós e contras.
O AJAX é JavaScript assíncrono e XML para implementar a interação de dados assíncronos nas páginas da Web.
vantagem:
• A página pode carregar o conteúdo local sem sobrecarregar todo o conteúdo, reduzindo a quantidade de transmissão de dados
• Evite os usuários constantemente atualizados ou saltadores para melhorar a experiência do usuário
deficiência:
• Não é amigável para os mecanismos de pesquisa (
• O custo da implementação das funções frontal e traseiro sob o Ajax é alto
• pode causar um aumento no número de solicitações
• Restrições de emissão de domínio cruzado
JSON é um formato leve de troca de dados, um subconjunto de ECMA
Vantagens: leve, fácil de ler e escrever por pessoas, fácil de analisar por máquinas (JavaScript) e suporta tipos de dados compostos (matrizes, objetos, strings, números)
8. Veja qual é a saída do código a seguir? Explique o motivo.
A cópia do código é a seguinte:
var a;
alerta (tipo de A); // indefinido
alerta (b); // Relate um erro
Explicação: indefinido é um tipo de dados com apenas um valor. Este valor é "indefinido". Quando uma variável é declarada usando VAR, mas sua atribuição não é inicializada, o valor dessa variável é indefinido. E B relatará um erro porque não é declarado. Observe que as variáveis não declaradas são diferentes das declaradas não atribuídas.
9. Veja o código a seguir, quais saídas? Explique o motivo.
A cópia do código é a seguinte:
var a = nulo;
alerta (tipo de A); //objeto
Explicação: NULL é um tipo de dados com apenas um valor, e esse valor é nulo. Indica que um ponteiro nulo é direcionado; portanto, o uso da detecção do tipo de retornará "objeto".
10. Veja o código a seguir, quais saídas? Explique o motivo.
var indefinido; indefinido == null; // true1 == true; // true2 == true; // false0 == false; // true0 == ''; // truenan == nan; // false [] == false; // true [] ==! []; // verdadeiro
• indefinido é igual a nulo, mas não idêntico (===)
• Quando um é o número e o outro é uma corda, ele tentará converter a string para numerar
• Tente converter booleano em número, 0 ou 1
• Tente converter o objeto em número ou string, dependendo do tipo de outra quantidade de comparação
• Portanto, para o julgamento de 0 e as cordas vazias, é recomendável usar "===". "===" primeiro determinará os tipos de valor de ambos os lados e será falso se os tipos não corresponderem.
Portanto, a questão é: veja o código a seguir, o que é saída e por que é o tipo de foo?
A cópia do código é a seguinte:
var foo = "11"+2- "1";
console.log (foo);
console.log (typeof foo);
Após a execução, o valor do Foo é 111 e o tipo de foo é o número.
A cópia do código é a seguinte:
var foo = "11" +2+ "1"; // Experimente a diferença entre adicionar uma string '1' e subtrair uma string '1'
console.log (foo);
console.log (typeof foo); Após a execução, o valor do Foo é 1121 (aqui está o splicing de string) e o tipo de foo é string.
11. Veja o código para dar a resposta.
A cópia do código é a seguinte:
var a = new Object ();
a.Value = 1;
b = a;
b.Value = 2;
alerta (A.Value);
Resposta: 2 (examine os detalhes do tipo de dados citado)
12. A matriz var stringArray = ["this", "Is", "Baidu", "Campus"] é conhecida e as saídas de alerta "Este é o campus do Baidu".
Resposta: alert (stringArray.join (""))
Então, o problema é que sabe que o string foo = "get-element-by-id", escreva uma função para convertê-la em notação de camelo "getElementById".
function combo (msg) {var arr = msg.split ("-"); var len = arr.length; // armazenar ar.Leng.Lengeting em uma variável local pode melhorar a eficiência do loop para (var i = 1; i <len; i ++) {arr [i] = arr [i] .Charat (0) .toupPercase ()+arr [i] .Substr (1, arr [i] .Length-1); } msg = arr.join (""); retornar msg;}(Investigue a API básica)
13.Var númeroRray = [3,6,2,4,1,5]; (Investigue a API básica)
1) Implementar a ordem inversa desta matriz e saída [5,1,4,2,6,3]
2) Implementar o acordo de ordem descendente da matriz e produção [6,5,4,3,2,1]
var numerArray = [3,6,2,4,1,5]; numberArray.Reverse (); // 5,1,4,2,6,3NumberArray.sort (função (a, b) {// 6,5,4,3,2,1 retorno ba;})14. Data de saída de hoje, na forma de AAAA-MM-DD. Por exemplo, hoje é 26 de setembro de 2014 e depois o resultado 2014-09-26
var d = new Date (); // Obtenha o ano, Getlyear () retorna um número de 4 dígitos var ano = d.getlyear (); // obtém o mês, o mês é bastante especial, 0 é de janeiro e 11 é dezembro var mês = d.getMOMOM () + 1; // se tornar um mês de dois dígitos = mês <10? '0' + mês: mês; // Obtenha o dia var dia = d.getdate (); dia = dia <10? '0' + dia: dia; alerta (ano + '-' + mês + '-' + dia);
15. Substitua {$ id} na string "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>" com 10 e {$ name} com tony (usando expressões regulares)
Resposta: "<tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>". Reply (/{/$ id}/g, '10'). Substituir (/{/$ name}/g, 'tony');
16. Para garantir a segurança da saída da página, geralmente precisamos escapar de alguns caracteres especiais. Por favor, escreva uma função escapehtml e escape <,>, &, "
function escapehtml (str) {return str.replace (/[<> "&]/g, function (match) {switch (match) {case" <": return" <"; case"> ": return"> "; case" & ": return"; case "/": return ";17.FOO = Foo || Bar, o que essa linha de código significa? Por que eu escrevo dessa maneira?
Resposta: se (! Foo) foo = bar; // Se existir Foo, o valor permanecerá inalterado; caso contrário, o valor da barra será atribuído ao Foo.
Expressão de curto-circuito: como expressões de operando do "&&" e "||" Os operadores, quando essas expressões forem avaliadas, o processo de avaliação será encerrado enquanto o resultado final pode ser determinado como verdadeiro ou falso. Isso é chamado de avaliação de curto-circuito.
18. Olhando para o código a seguir, o que será emitido? (Aprimoramento da declaração variável)
A cópia do código é a seguinte:
var foo = 1;
função(){
console.log (foo);
var foo = 2;
console.log (foo);
}
Resposta: Saída indefinida e 2. O código acima é equivalente a:
var foo = 1; function () {var foo; console.log (foo); // foo indefinido = 2; console.log (foo); // 2; }As declarações da função e as declarações variáveis são implicitamente promovidas ao topo do escopo atual pelo mecanismo JavaScript, mas apenas promover o nome não promove a parte da atribuição.
19. Use JS para selecionar aleatoriamente 10 números entre 10 e 100, armazená -los em uma matriz e classificá -los.
var iarray = []; function getRandom (start, iend) {var iChoice = iSStart - iEND +1; retornar math.floor (math.random () * ichoice+isStart;} para (var i = 0; i <10; i ++) {iarray.push (getrandom (10.100));} iarray.sort ();20. Combine os dois números e exclua o segundo elemento.
A cópia do código é a seguinte:
var array1 = ['a', 'b', 'c'];
var de barray = ['d', 'e', 'f'];
var de Carray = Array1.Concat (barray);
Carray.splice (1,1);
21. Como adicionar, remover, mover, copiar, criar e encontrar nós (JS nativo, básicos reais, sem escrita detalhada de cada etapa)
1) Crie um novo nó
CreateDocumentFragment () // Crie um fragmento DOM
createElement () // Crie um elemento específico
CreateTextNode () // Crie um nó de texto
2) Adicione, remova, substitua, insira
appendchild () // add
removeChild () // remova
replacechild () // substitua
insertBefore () // insert
3) Pesquise
getElementsByTagName () // por nome de tag
getElementsByName () // O valor da propriedade do nome do elemento é passado
getElementById () // Através do ID do elemento, singularidade
22. Existe esse URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e. Escreva um programa JS para extrair cada parâmetro GET no URL (o nome do parâmetro e o número de parâmetros são incertos) e retorne-o a uma estrutura JSON na forma de um valor-chave, como {a: '1', b: '2', c: ', d:' xxx ', e:}.
Responder:
função serilleurl (url) {var resultado = {}; url = url.split ("?") [1]; var map = url.split ("&"); for (var i = 0, len = map.length; i <len; i ++) {resultado [map [i] .split ("=") [0]] = map [i] .split ("=") [1]; } resultado de retorno;}23. Qual é a diferença entre o construtor de expressão regular var reg = novo regexp ("xxx") e a expressão regular literal var reg = //? Caixa de correio correspondente de expressão regular?
Resposta: Ao usar o construtor regexp (), não apenas você precisa escapar das citações (ou seja, "significa"), mas também precisa também dobrar a barragem (ou seja, // significa A /). O uso de literais regulares de expressão é mais eficiente.
Combinação regular de email:
A cópia do código é a seguinte: var regmail = /^(par-za-z0-9_----- ])+@(par-za-z0-9_----) +(.du-za-z0-9_----] {2,3}) {1,2})$/;
24. Veja o código a seguir e forneça o resultado da saída.
A cópia do código é a seguinte:
for (var i = 1; i <= 3; i ++) {
setTimeout (function () {
console.log (i);
}, 0);
};
Resposta: 4 4 4.
Causa: o processador de eventos JavaScript não será executado até que o thread esteja ocioso. Portanto, a questão é: como fazer com que o código acima saia 1 2 3?
for (var i = 1; i <= 3; i ++) {setTimeout ((function (a) {// execute instantaneamente o console de função.log (a);}) (i), 0); }; 1 // Saída 2325. Escreva uma função para limpar os espaços antes e depois da string. (Compatível com todos os navegadores)
Use a interface interface interna (), considerando a compatibilidade:
if (! string.prototype.trim) {string.prototype.trim = function () {return this.replace (/^/s+/, "") .replace (// s+$/, ""); }} // Teste a função var str = " /t /n string de teste" .Trim (); alerta (str == "string de teste"); // alerta "verdadeiro"26. Quais são os papéis de Callee e Caller em JavaScript?
Responder:
O chamador retorna uma referência à função que chama a função atual;
Callee retorna a função que está sendo executada, ou seja, o corpo do objeto de função especificado.
Então a pergunta é? Se um par de coelhos dão à luz um par de coelhos todos os meses; Um par de novos coelhos dará à luz coelhos a partir do segundo mês; Supondo que cada par de coelhos seja uma fêmea e um homem, quantos pares de coelhos podem um par de coelhos se reproduzem no mês N? (Use Callee para concluir)
var resultado = []; função fn (n) {// a sequência típica de fibonacci if (n == 1) {return 1; } else if (n == 2) {return 1; } else {if (resultado [n]) {return resultado [n]; } else {//argument.callee () significa fn () resultado [n] = argumentos.callee (n-1)+argumentos.callee (n-2); resultado de retorno [n]; }}}JavaScript intermediário:
1. Implemente um clone de função que pode copiar os 5 principais tipos de dados em javascript (incluindo número, string, objeto, matriz, booleano)
• Ponto de pesquisa 1: está claro se a diferença entre o tipo de dados básico e o tipo de dados de referência está armazenado na memória?
• Ponto de pesquisa 2: você sabe como determinar que tipo de variável é?
• Ponto de inspeção 3: Projeto de algoritmo recursivo
// Método 1: object.prototype.clone = function () {var o = this.Constructor === Array? []: {}; para (var e nisso) {o [e] = tipo de este [e] === "objeto"? este [e] .clone (): este [e]; } retornar o;} // Método 2:/** * clone um objeto * @param obj * @returns */function clone (obj) {var buf; if (obj instanceof matrAy) {buf = []; // Crie uma matriz vazia var i = obj.length; while (i--) {buf [i] = clone (obj [i]); } retornar buf; } else if (obj instanceof object) {buf = {}; // Crie um objeto vazio para (var k em obj) {// Adicione um novo atributo a este objeto buf [k] = clone (obj [k]); } retornar buf; } else {// variáveis ordinárias atribuem diretamente o retorno obj; }}2. Como eliminar elementos duplicados em uma matriz?
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,25,4]; function derepeat () {var newarr = []; var obj = {}; var índice = 0; var L = arr.length; for (var i = 0; i <l; i ++) {if (obj [arr [i]] == indefinido) {obj [arr [i]] = 1; newarr [index ++] = arr [i]; } else if (obj [arr [i]] == 1) continue; } retornar newarr; } var newarr2 = derepeat (arr); alerta (newarr2); // Produto 1,2,3,4,5,6,9,253. Xiaoxian é um filhote fofo (cachorro), e seus gritos são muito legais. Toda vez que ele vê seu dono, ele grita (Yelp). A partir desta descrição, você pode obter os seguintes objetos:
function cão () {this.wow = function () {alert ('wow'); } this.yelp = function () {this.wow (); }}Como Xiaoxian, Xiaomang acabou sendo um filhote fofo, mas de repente um dia ele enlouqueceu (Maddog) e, quando viu alguém, ele gritava (uau) e continuava ligando (Yelp) a cada meio segundo. Use o código para implementá -lo de acordo com a descrição. (Herança, protótipo, setInterval)
Responder:
função maddog () {this.yelp = function () {var self = this; setInterval (function () {self.wow ();}, 500); }} Maddog.prototype = new Dog (); // para testvar cachorro = novo cachorro (); cachorro.yelp (); var maddog = new maddog (); maddog.yelp ();4. O UL a seguir, como alertar seu índice ao clicar em cada coluna? (encerramento)
A cópia do código é a seguinte:
<ul id = ”teste”>
<li> Este é o primeiro </li>
<li> Este é o segundo </li>
<li> Este é o terceiro item </li>
</ul>
Responder:
// Método 1: var lis = document.getElementById ('2223'). GetElementsByTagName ('li'); para (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .OnClick = function () {alert (this.index); };} // Método 2: var lis = document.getElementById ('2223'). GetElementsByTagName ('li'); para (var i = 0; i <3; i ++) {lis [i] .Index = i; lis [i] .OnClick = (function (a) {return function () {alert (a);}}) (i);}5. Escreva uma função JavaScript e insira um seletor do tipo especificado (apenas três seletores simples de CSS: ID, Classe e Tagname, e nenhum seletores de combinação compatíveis são necessários) para retornar nós DOM correspondentes, que precisam considerar a compatibilidade e o desempenho do navegador.
/*** @param seletor {String} O seletor CSS recebido. * @return {Array}*/
Resposta: (muito tempo, clique para abrir)
var query = function (seletor) {var reg = /^(# )??(/.)?(/w+)$/img; var regremult = reg.exec (seletor); var resultado = []; // se for um seletor de identificação se (regremult [1]) {if (regremult [3]) {if (typeof document.QuerySelector === "function") {result.push (document.QuerySelector (regressult [3])); } else {result.push (document.getElementById (regremult [3])); }}} // Se for um seletor de classe se (relembrult [2]) {if (regremult [3]) {if (typeof document.getElementsByclassName === 'function') {var doms = document.getElementsByclassName (regressult [3]); if (doms) {resultado = ConverToArray (doms); }} // Se a função GetElementsByClassName não for suportada, mais {var allDoms = document.getElementsByTagName ("*"); para (var i = 0, len = alldoms.length; i <len; i ++) {if (alldoms [i] .className.search (new regexp (regressult [2])> -1) {result.push (alldoms [i]); }}}}}}} // Se for um seletor de tags se (regremult [3]) {var doms = document.getElementsByTagName (regremult [3] .tolowerCase ()); if (doms) {resultado = converttoArray (doms); }} Retornar resultado; } função convertToArray (nós) {var Array = null; tente {Array = Array.prototype.slice.call (nós, 0); // para navegadores que não são da IE} catch (ex) {array = new Array (); for (var i = 0, len = modes.length; i <len; i ++) {array.push (nós [i])}} retornar array; }6. Avalie o código a seguir e forneça sugestões de melhoria.
if (window.adDeventListener) {var addListener = function (el, tipo, ouvinte, usecapture) {el.addeventListener (tipo, ouvinte, usecapture); };} else if (document.all) {addListener = function (el, tipo, ouvinte) {el.attachevent ("on"+type, function () {lister.apply (el);}); }}avaliar:
• A função AddListener não deve ser declarada nas declarações IF e mais ou mais, ela deve ser declarada primeiro;
• Não há necessidade de usar o Window.AddeventListener ou Document.Tal para detectar o navegador, a detecção de capacidade deve ser usada;
• Como o Anexevent tem esse problema apontador no IE, ele precisa ser tratado ao chamá -lo
As melhorias são as seguintes:
função addEvent (elem, tipo, manipulador) {if (elem.addeventListener) {elem.addeventListener (tipo, manipulador, false); } else if (elem.attachevent) {elem ['temp' + tipo + manipulador] = manipulador; elem [tipo + manipulador] = function () {elem ['temp' + tipo + manipulador] .Apply (elem); }; elem.attachevent ('on' + tipo, elem [tipo + manipulador]); } else {elem ['on' + type] = manipulador; }}7. Adicione um método ao objeto String, passe em um parâmetro de tipo de string e, em seguida, retorne o espaço de preços entre cada caractere da string, por exemplo:
Addspace ("Hello World") // -> 'Helloworld d'
A cópia do código é a seguinte:
String.prototype.spacify = function () {
Retorne this.split (''). Join ('');
};
Em seguida, responda às perguntas acima, então a pergunta é
1) É seguro adicionar métodos diretamente ao protótipo do objeto? Especialmente em objetos de objeto. (Não posso responder isso? Espero dizer o que sei.)
2) Qual é a diferença entre a declaração da função e a expressão da função?
Resposta: Em JavaScript, quando o analisador carrega dados no ambiente de execução, ele não trata as declarações da função e expressões de função igualmente. O analisador será o primeiro a ler as declarações de função e disponibilizá -las (acessíveis) antes de executar qualquer código. Quanto à expressão da função, você deve esperar até que o analisador seja executado na linha de código onde está localizado antes de ser analisado e executado. (Promoção da declaração da função)
8. Defina um método de log para que ele possa proxy console.log métodos.
Um método viável:
A cópia do código é a seguinte:
Log da função (msg) {
console.log (msg);
}
Log ("Hello World!") // Hello World!
E se você quiser passar vários parâmetros? Obviamente, o método acima não pode atender aos requisitos, portanto, um método melhor é:
A cópia do código é a seguinte:
Função log () {
console.log.apply (console, argumentos);
};
Portanto, a questão é: quais são as semelhanças e diferenças entre os métodos de aplicação e chamada?
Responder:
As duas funções de aplicação e chamada são as mesmas, ou seja, chamando um método de um objeto e substituindo o objeto atual por outro objeto. Altera o contexto do objeto de uma função do contexto inicial para o novo objeto especificado por ThisObJ.
Mas há uma diferença nos parâmetros entre os dois. O significado do primeiro parâmetro é o mesmo, mas para o segundo parâmetro: Aplicar é passado em uma matriz de parâmetros, ou seja, combinando vários parâmetros em uma matriz e a chamada é passada como um parâmetro da chamada (a partir do segundo parâmetro). Por exemplo, o método de redação de aplicação correspondente para func.call (func1, var1, var2, var3) é: func.apply (func1, [var1, var2, var3]).
9. O que é um pseudo-gray em JavaScript? Como converter um pseudo-gray em uma matriz padrão?
Responder:
Pseudo-Array (matriz de classe): Você não pode chamar métodos de matriz diretamente ou esperar qualquer comportamento especial dos atributos de comprimento, mas ainda pode atravessá-los em métodos de travessia de matriz real. Normalmente, os parâmetros de argumento da função também são chamados getElementsByTagName, document.childnodes etc., e todos retornam objetos nodelistas que pertencem a pseudo-maiores. As matrizes podem ser convertidas em objetos de matriz real usando Array.prototype.slice.call (fakearray).
Suponha que sigamos a oitava pergunta, precisamos adicionar um prefixo "(aplicativo)" a cada método de log, como 'Hello World!' -> '(App) Hello World!'. O método é o seguinte:
function log () {var args = array.prototype.slice.call (argumentos); // Para usar o método da matriz não aprofundada, converta o argumento em Array Real Args.Unshift ('(App)'); console.log.apply (console, args); };10. Para entender o contexto do escopo e isso, consulte o seguinte código:
var user = {count: 1, getCount: function () {return this.count; }}; console.log (user.getCount ()); // o quê? var func = user.getCount; console.log (func ()); // o que?Quais são as saídas de dois consoles? Por que?
A resposta é 1 e indefinida.
O FUNC é executado no contexto do WINODW, para que a propriedade Count não possa ser acessada.
Então a pergunta é: como garantir que o UESR sempre possa acessar o contexto do Func, ou seja, retornar 1 corretamente.
Resposta: A maneira correta é usar function.prototype.bind. Compatível com o código completo de cada navegador é o seguinte:
Function.prototype.bind = function.prototype.bind || function (context) {var self = this; return function () {return self.apply (contexto, argumentos); };} var func = user.getCount.bind (usuário); console.log (func ());11. Qual é a diferença entre a janela de JS nativa.onload e o $ (documento) .ready (function () {})? Como implementar o método pronto do JQ usando o JS nativo?
O método window.onload () deve esperar até que todos os elementos, incluindo a imagem na página, sejam carregados antes da execução.
$ (document) .ready () é executado após a estrutura do DOM e não há necessidade de esperar até que seja carregado.
/ * * Passe a função para quando () * * Quando o documento é analisado e pronto para a operação, a função é chamada de método do documento */var quandoready = (function () {// Esta função retorna quando a função () Var Funcs = []; manipulador (e) {if (pronto) retornar; Caso, a chamada dessas funções pode fazer com que mais funções sejam registradas (var i = 0; i <funcs.length; i ++) {funcs [i] .call (document); funcs = nulo; } // Registre o manipulador para qualquer evento recebido if (document.addeventListener) {document.addeventlistener ('domcontentloaded', manipulador, false); document.addeventListener ('ReadyStatechange', manipulador, false); // ie9+ window.addeventListener ('load', manipulador, false); } else if (document.attachevent) {document.attachevent ('oNreadyStatechange', manipulador); Window.attachevent ('Onload', Handler); } // retorna quando a função Retorno da função (fn) {if (pronta) {fn.call (document); } else {funcs.push (fn); }}}) ();Se o código acima for muito difícil de entender, a seguinte versão simplificada:
função pronta (fn) {if (document.addeventListener) {// Standard Browser Document.addeventListener ('DomContentLoaded', function () {// Evento de login para evitar o acionamento repetido do documento. } else if (document.attachevent) {// ie document.attachevent ('oNreadyStatechange', function () {if (document.readyState == 'complete') {document.detachevent ('onreadyStatechange', argumentos.callee); fn (); // função de exceção}}}); }};12. (Pergunta de design) Deseja implementar um arrasto em um determinado nó da página? Como fazer isso? (Use JS nativo)
Basta responder ao conceito, aqui estão alguns pontos -chave
1. Bind mousedown, mousemove, eventos de mouseup para nós que precisam ser arrastados
2. Depois que o evento de Mousedown é acionado, comece a arrastar e arrastar
3. Quando mousemove, você precisa obter a posição de arrasto através do evento.clientX e cliente e atualizar a posição em tempo real.
4. Quando mouseup, arraste e soltar as pontas
5. Preste atenção aos limites do navegador
13.
função setcookie (nome, valor, dias) {// Adicione uma variável de tempo ao cookie var exp = new Date (); Exp.setTime (exp.getTime () + dias*24*60*60*1000); // Defina o tempo de expiração para os dias document.cookie = nome + "=" + escape (value) + "; expires =" + exp.togmtString (); } função getCookie (nome) {var resultado = ""; var mycookie = ""+document.cookie+";"; var searchName = "+nome+" = "; var startOfcookie (nome) {var resultado =" "; var mycookie =" ""+document.cookie+";"; var searchName = "+name+" = "; var startOfcookie = mycookie.indexOF (searchName); var endofcookie; if (satrtofcookie! = -1) {startOfcookie += searchName.length; endofcookie = mycookie.indexof (";", startOfcookie); resultado = (mycookie.substring (startofcookie, endofcookie)); } return resultado;} (function () {var otips = document.getElementById ('tips'); // Suponha que o ID das pontas seja dicas var página = {check: function () {// verifique se o cookie não existe e permite a exibição de var tips = getcookie ('tips'); se (! if (tips == "nunca_show_again") retorna false; "Inline"; // Mostrar dicas assumindo elementos de nível de linha}, init: function () {var _This = this; página.init ();}) ();14. Diga qual é a função das seguintes funções? O que deve ser preenchido na área em branco?
// define (function (janela) {function fn (str) {this.str = str;} fn.prototype.format = function () {var arg = ______; return this.str.place (_____, function (a, b) {return arg [b] || ";}; fn ('<p> <a href = "{0}"> {1} </a> <pan> {2} </span> </p>');Resposta: O objetivo de acessar funções é usar a função de formato para substituir os parâmetros da função como {0} e retornar um resultado formatado:
O primeiro vazio é: argumentos
O segundo vazio é: // {(/d+)/}/ig
15. Use JavaScript orientado a objetos para se apresentar. (Sem resposta, por favor tente você mesmo)
Resposta: Objeto ou JSON é uma boa escolha.
16. Explique o princípio da implementação do AJAX pelo nativo JS.
O nome completo do Ajax é o JavaScript assíncrono e o XML. Entre eles, significa assíncrono assíncrono, que é diferente do método de sincronização usado no desenvolvimento da Web tradicional.
O princípio do AJAX é simplesmente usar o objeto xmlHttPrequest para enviar solicitações assíncronas ao servidor, obter dados do servidor e, em seguida, usar o JavaScript para operar o DOM para atualizar a página.
XmlHttPrequest é o mecanismo central do Ajax. Foi introduzido pela primeira vez no IE5 e é uma tecnologia que suporta solicitações assíncronas. Simplificando, o JavaScript pode prontamente fazer solicitações e processar respostas ao servidor sem bloquear o usuário. Não obtenha efeito de atualização.
As propriedades do objeto XmlHttPrequest são:
• ONREYSTATECHANG O manipulador de eventos para o evento desencadeado por cada mudança de estado.
• RespoteText Retorna o formulário da String de dados do processo do servidor.
• Responsexml Document Document Data Compatível Objeto retornado do processo do servidor.
• Códigos numéricos de status retornados do servidor, como Common 404 (não encontrado) e 200 (pronto)
• Status Text String Informações acompanhadas pelo código de status
• Valor do estado de objeto ReadyState
• 0 (não iniciado) O objeto foi estabelecido, mas não foi inicializado (o método aberto não foi chamado)
• 1 (inicialização) o objeto foi estabelecido e o método de envio ainda não foi chamado
• 2 (Enviar dados) O método de envio foi chamado, mas o status atual e o cabeçalho HTTP são desconhecidos
• 3 (transmissão de dados) Alguns dados foram recebidos, porque os cabeçalhos de resposta e HTTP estão incompletos, ocorrerá um erro quando um corpo de resposta e responseText forem obtidos.
• 4 (completo) Os dados são recebidos e os dados de resposta completos podem ser obtidos através do ResponseXML e RespoteText.
A seguir, é um simples encapsulamento de uma função: (um pouco longo, clique para abrir)
ajax ({url: "./testxhr.aspx", // Tipo de endereço de solicitação: "post", // Dados do método de solicitação: {name: "super", idade: 20}, // solicitar parâmetro datatype: "json", sucessor: function (resposta, xml) {// código executado após a colocação}, falha: função: função (status) (saturi (saturi) (resposta, xml) {// código executado após a falha}, falha: função (status) (staath) (saturi) {/////// // // código executado após a falha}, falha: função: função (status) (stangation (resposta, xml) {// código executado após a colocação}, falha: função: função (status) (staath)…/; função ajax (opções) {options = opções || {}; options.type = (options.type || "get"). touppercase (); options.datatype = options.datatype || "JSON"; var params = formatparams (options.data); // create - não -IE6 - Etapa 1 if (window.xmlhttprequest) {var xhr = new xmlhttPrequest (); } else {// ie6 e abaixo dos navegadores var xhr = new ActiveXObject ('Microsoft.xmlHttp'); } // receba - Etapa 3 xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && options.success (xhr.ProSeText, xhr.Responsexml); } else {options.fail && options.fail (status); }}} // conectar e enviar - Etapa 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (nulo); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Defina o tipo de conteúdo ao enviar o formulário XHR.SetRequestHeader ("Content-Type", "Application/X-Www-Form-Form-Urlencoded"); xhr.send (params); }} // Format Parâmetro função formatParams (dados) {var arr = []; for (var nome em dados) {arr.push (codeuricomponent (nome) + "=" + codeuricomponent (dados [nome])); } arr.push (("v =" + math.random ()). substituir (".")); retornar arr.join ("&"); }O código acima descreve aproximadamente o processo do Ajax, e a explicação é pesquisada no Google. A pergunta não está concluída. Você sabe o que são JSONP e PJAX?
Responder:
JSONP: (JSON com preenchimento) é um método de solicitação de domínio cruzado. O principal princípio é aproveitar o recurso que as tags de script podem ser solicitadas entre domínios. O atributo SRC envia a solicitação ao servidor, o servidor retorna o código JS, a página da Web aceita a resposta e o executa diretamente. É o mesmo que o princípio de referência a arquivos externos por meio de tags de script. O JSONP consiste em duas partes: função de retorno de chamada e dados. A função de retorno de chamada é geralmente controlada pela página da web e enviada ao lado do servidor como parâmetros. O lado do servidor soletra a função e os dados em uma string e retorna.
PJAX: PJAX é uma nova tecnologia baseada no ajax+history.pushstate. This technology can change the content of a page without refresh and can change the URL of the page. (Keypoint: It can implement back functions that cannot be achieved by ajax) pjax is an encapsulation of ajax+pushState, and supports local storage, animation and other functions. Currently, it supports various versions such as jquery, qwrap, kissy, etc.
觉得题目还ok的亲点个推荐哦，题量会不断增加。
你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
原文：http://www.cnblogs.com/coco1s/p/4029708.html