Меня были собраны больше вопросов, и их также и в предыдущие годы. Ответы не гарантируются правильными. Если есть какие -либо ошибки или лучшие решения, поправьте их.
Прилагается вторая статья: 1-й вечернее тестовый интервью 2014 года для биту и крупных интернет-компаний-HTML, CSS
Предыдущие вопросы будут очень простыми, и чем больше вы идете, тем больше вы будете, тем больше вы будете углубленными.
Младший JavaScript:
1. Какой язык является JavaScript и каковы его характеристики?
Нет стандартного ответа.
2. Каковы типы данных JavaScript?
Основные типы данных: строка, логическое, число, неопределенное, ноль
Справочный тип данных: объект (массив, дата, regexp, функция)
Итак, вопрос в том, как определить, является ли переменная типом данных массива?
• Метод 1. Определите, имеет ли он «свойства массива», например, метод slice (). Вы можете определить метод среза для этой переменной
• Метод 2.OBJ экземпляр массива неверен в некоторых версиях IE
• Метод 3. Существуют уязвимости в обоих методах. Новый метод Array.isarray () определяется в ECMA Script5, чтобы обеспечить его совместимость. Лучший метод заключается в следующем
if (typeof array.isarray === "undefined") {array.isarray = function (arg) {return object.prototype.tostring.call (arg) === "[array array]"}; }3. В поле ввода ввода с известным идентификатором я надеюсь получить входное значение этого ввода. Как это сделать? (Без сторонней рамки)
Копия кода выглядит следующим образом: Document.getElementById ("id").
4. Как получить все флажки на странице? (Без сторонней рамки)
var domist = document.getElementsbytagname ('input') var fackboxlist = []; var len = domist.length; // кэш для локальной переменной, в то время как (len--) {// Использование, в то время как будет более эффективным, чем для цикла if (domist [len] .type == 'fackbox') {fackboxlist.push (domist [len]); }}5. Установите содержание HTML Div с известным идентификатором в XXXX, а цвет шрифта установлен на черный (без сторонних рамков)
Кода -копия выглядит следующим образом:
var dom = document.getElementbyId ("id");
dom.innerhtml = "xxxx"
dom.style.color = "#000"
6. Когда нажат узел DOM, мы надеемся, что сможем выполнить функцию. Что мы должны делать?
• Свяжите события непосредственно в DOM: <div Onclick = ”test ()”> </div>
• Привязка через onClick в JS: xxx.onclick = тест
• Привязка с добавлением события: addEventListener (xxx, 'Щелкнистка', тест)
Итак, вопрос в том, каковы модели потока событий JavaScript?
• «Пузырь событий»: события начинают приниматься наиболее конкретными элементами, а затем распространяются вверх по шаг за шагом
• «Захват событий»: события получают сначала наименьшим специфическим узлом, а затем по шагам вниз, вплоть до самого конкретного
• «Поток событий DOM»: три этапа: захват событий, целевой этап, пузырь событий
7. Что такое Аякс и Джсон, их плюсы и минусы.
Ajax является асинхронным JavaScript и XML для реализации асинхронного взаимодействия данных на веб -страницах.
преимущество:
• Может ли страница загружать локальный контент без перегрузки всего контента, уменьшая объем передачи данных
• Избегайте пользователей постоянно освежающих или прыгающих страниц, чтобы улучшить пользовательский опыт
недостаток:
• Не дружелюбный поисковые системы (
• Стоимость реализации функций передней и задней части под Ajax высока
• Может вызвать увеличение количества запросов
• Ограничения на междомену.
JSON - это легкий формат обмена данными, подмножество ECMA
Преимущества: легкий, легко читать и писать от людей, легко проанализировать машинами (JavaScript) и поддерживает композитные типы данных (массивы, объекты, строки, числа)
8. Посмотрите, какова вывода следующего кода? Объясните причину.
Кода -копия выглядит следующим образом:
var a;
оповещение (тип a); // неопределенный
предупреждение (б); // сообщить об ошибке
Объяснение: Неопределенный - тип данных только с одним значением. Это значение «неопределенное». Когда переменная объявляется с использованием VAR, но ее назначение не инициализировано, значение этой переменной не определена. И B сообщит об ошибке, потому что она не объявлена. Обратите внимание, что не обнаруженные переменные отличаются от того, что объявляются незнашиваемыми.
9. Посмотрите на следующий код, какие выходы? Объясните причину.
Кода -копия выглядит следующим образом:
var a = null;
оповещение (тип a); //объект
Объяснение: NULL - это тип данных только с одним значением, и это значение является нулевым. Это указывает на то, что нулевой указатель целевой, поэтому использование обнаружения типа вернет «объект».
10. Посмотрите на следующий код, какие выходы? Объясните причину.
var undefined; неопределенно == null; // true1 == true; // true2 == true; // false0 == false; // true0 == ''; // truenan == nan; // false [] == false; // true [] ==! []; // истинный
• Неопределенные равны нулевым, но не идентичному (===)
• Когда один номер, а другой - строка, он попытается преобразовать строку в номер
• Попробуйте преобразовать логическое в число, 0 или 1
• Попробуйте преобразовать объект в число или строку, в зависимости от типа другого количества сравнения
• Следовательно, для суждения 0 и пустых струн рекомендуется использовать «===». «===» сначала определит типы значений с обеих сторон, и это будет ложным, если типы не совпадают.
Итак, вопрос в том, что посмотрите на следующий код, что такое вывод и почему тип Foo?
Кода -копия выглядит следующим образом:
var foo = "11"+2- "1";
console.log (foo);
console.log (typeof foo);
После выполнения значение Foo составляет 111, а тип Foo - число.
Кода -копия выглядит следующим образом:
var foo = "11" +2+ "1"; // испытать разницу между добавлением строки «1» и вычитанием строки '1'
console.log (foo);
console.log (typeof foo); После выполнения значение Foo - 1121 (вот сплайсинг строки), а тип Foo - это строка.
11. Посмотрите на код, чтобы дать ответ.
Кода -копия выглядит следующим образом:
var a = new Object ();
A.value = 1;
b = a;
B. Value = 2;
предупреждение (A.value);
Ответ: 2 (изучите детали цитируемого типа данных)
12. Массив var stringArray = [«this», «is», «baidu», «кампус»] известен, а выходы на предупреждение «Это кампус Baidu».
Ответ: Alert (stringArray.join ("" "))
Тогда проблема в том, что есть известно, что строка foo = "Get-Element-By-ID" напишите функцию, чтобы преобразовать ее в верблюжьей нотации "getElementbyId".
функция комбо (msg) {var arr = msg.split ("-"); var len = arr.length; // хранение arr.length в локальной переменной может повысить эффективность цикла для (var i = 1; i <len; i ++) {arr [i] = arr [i] .charat (0) .touppercase ()+arr [i] .substr (1, arr [i] .length-1); } msg = arr.join (""); вернуть MSG;}(Исследовать основной API)
13. var numberarray = [3,6,2,4,1,5]; (Исследовать основной API)
1) Реализуйте обратный порядок этого массива и выхода [5,1,4,2,6,3]
2) Реализовать расположение нисходящего порядка массива и вывода [6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5]; numberArray.reverse (); // 5,1,4,2,6,3numberArray.sort (function (a, b) {// 6,5,4,3,2,1 return ba;})14. Вывод сегодняшняя дата, в форме Yyyy-MM-DD. Например, сегодня 26 сентября 2014 года, затем вывод 2014-09-26
var d = new Date (); // Получить год, electielyear () возвращает 4-значный номер var year = d.getaillyear (); // Получить месяц, месяц очень особенный, 0-это январь, а 11 декабрь-месяц = d.getmonth () + 1; // Стать двухзначный месяц = месяц <10? '0' + месяц: месяц; // Получить день var day = d.getdate (); day = day <10? '0' + Day: Day; Alert (Год + '-' + месяц + '-' + day);
15. Замените {$ id} в строке "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>" с 10 и {$ name} с Tony (с помощью регулярных выражений)
Ответ: "<Tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>". Replication (/{/$ id}/g, '10'). Replace (/{/$ name}/g, 'tony');
16. Чтобы обеспечить безопасность вывода страницы, нам часто нужно избежать некоторых специальных символов. Пожалуйста, напишите функцию Escapehtml и Escape <,> и, "
Функция recomehtml (str) {return str.replace (/[<> "&]/g, function (match) {switch (match) {case" <": return" <"; case"> ": return"> "; case" & ": return" & "; case"/": return";});}17.foo = foo || bar, что означает эта строка кода? Почему я так пишу?
Ответ: if (! Foo) foo = bar; // Если Foo существует, значение остается неизменным, в противном случае значение бара назначается Foo.
Выражение короткого замыкания: как операндные выражения "&&" и "||" Операторы, когда эти выражения оцениваются, процесс оценки завершится до тех пор, пока конечный результат может быть определен как истинный или ложный. Это называется оценкой короткого замыкания.
18. Глядя на следующий код, что будет выводить? (Усиление объявления переменной)
Кода -копия выглядит следующим образом:
var foo = 1;
function () {
console.log (foo);
var foo = 2;
console.log (foo);
}
Ответ: вывод неопределенного и 2. Приведенный выше код эквивалентен:
var foo = 1; function () {var foo; console.log (foo); // неопределенная foo = 2; console.log (foo); // 2; }Объявления функций и объявления переменных неявно продвигаются в верхней части текущего объема с помощью двигателя JavaScript, но только продвижение имени не продвигает часть назначения.
19. Используйте JS, чтобы случайным образом выбирать 10 чисел от 10 до 100, хранить их в массиве и сортировать их.
var Iarray = []; функция getRandom (start, iend) {var iChoice = iSstart - iend +1; return math.floor (math.random () * ichoice+iSstart;} для (var i = 0; i <10; i ++) {iarray.push (getrandom (10,100));} iarray.sort ();20. Объедините два числа и удалите второй элемент.
Кода -копия выглядит следующим образом:
var array1 = ['a', 'b', 'c'];
var barray = ['d', 'e', 'f'];
var carray = array1.concat (barray);
carray.splice (1,1);
21. Как добавить, удалить, перемещать, копировать, создавать и найти узлы (нативные JS, реальные основы, без подробного написания каждого шага)
1) Создать новый узел
CeneleCumentFragment () // Создать фрагмент DOM
CreateElement () // Создать конкретный элемент
createTexTnode () // Создать текстовый узел
2) Добавить, удалить, заменить, вставить
appendChild () // Добавить
RemoveChild () // Удалить
Replacechild () // Заменить
INSERTBEFOR () // Вставить
3) Поиск
getElementsbytagname () // по имени тега
getElementsbyname () // Значение свойства имени элемента передается
getElementById () // через идентификатор элемента, уникальность
22. Существует такой URL: http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e. Пожалуйста, напишите программу JS, чтобы извлечь каждый параметр GET в URL (имя параметра и количество параметров неопределенны), и вернуть его в структуру JSON в форме клавишного значения, такой как {a: '1', b: '2', c: '', d: 'xxx', e: undefined}.
Отвечать:
Функция seriLiLILURL (url) {var result = {}; url = url.split ("?") [1]; var map = url.split ("&"); for (var i = 0, len = map.length; i <len; i ++) {result [map [i] .split ("=") [0]] = map [i] .split ("=") [1]; } return Result;}23. В чем разница между конструктором регулярного выражения var reg = new Regexp ("xxx") и буквальным выражением var reg = //? Регулярное выражение соответствует почтовому ящику?
Ответ: при использовании конструктора regexp () вам не только необходимо избежать кавычек (то есть /«означает»), но также необходимо также двойной обратной строки (т.е. // означает a /). Использование литералов регулярного выражения более эффективно.
Регулярное сопоставление электронной почты:
Кода кода следующая: var regmail = /^(^A-za-z0-9_-1_-)+@(nsa-za-z0-9_ --®)+(.(.
24. Посмотрите на следующий код и дайте результат вывода.
Кода -копия выглядит следующим образом:
для (var i = 1; i <= 3; i ++) {
settimeout (function () {
console.log (i);
}, 0);
};
Ответ: 4 4 4.
Причина: процессор событий JavaScript не будет работать до тех пор, пока поток не станет бездействием. Итак, вопрос в том, как сделать вышеуказанный вывод кода 1 2 3?
for (var i = 1; i <= 3; i ++) {settimeout ((function (a) {// мгновенно выполнить функцию console.log (a);}) (i), 0); }; 1 // Выход 2325. Напишите функцию, чтобы очистить пространства до и после строки. (Совместим со всеми браузерами)
Используйте встроенный интерфейс TRIM () с учетом совместимости:
if (! String.prototype.trim) {string.prototype.trim = function () {return this.replace (/^/s+/, "") .replace (// s+$/, ""); }} // Проверка функции var str = " /t /n тестовая строка" .trim (); оповещение (str == "тестовая строка"); // предупреждает "истинно"26. Каковы роли Callee и Caller в JavaScript?
Отвечать:
Caller возвращает ссылку на функцию, которая вызывает текущую функцию;
Callee возвращает выполняемой функции, то есть корпус указанного объекта функции.
Итак, вопрос? Если пара кроликов рожает пару кроликов каждый месяц; Пара новых кроликов будет родить кроликов со второго месяца; Предполагая, что каждая пара кроликов - одна самка и один мужчина, сколько пар кроликов может разветвляться пара кроликов в месяц N? (Используйте Callee для завершения)
var result = []; function fn (n) {// Типичная последовательность Fibonacci if (n == 1) {return 1; } else if (n == 2) {return 1; } else {if (result [n]) {return result [n]; } else {//argument.callee () означает fn () result [n] = arguments.callee (n-1)+argiments.callee (n-2); вернуть результат [n]; }}}Промежуточный JavaScript:
1. Реализуйте функциональный клон, который может скопировать 5 основных типов данных в JavaScript (включая номер, строку, объект, массив, логический)
• Точка поиска 1: Является ли ясно, сохраняется ли разница между основным типом данных и типом эталонного типа данных в памяти?
• Поиск 2: Знаете ли вы, как определить, какой тип переменной?
• Точка проверки 3: проектирование рекурсивного алгоритма
// Метод 1: object.prototype.clone = function () {var o = this.constructor === Массив? []: {}; для (var e в этом) {o [e] = typeof this [e] === "объект"? это [e] .clone (): это [e]; } return o;} // method 2:/** * клонировать объект * @param obj * @returns */function clone (obj) {var buf; if (obj ancessionof array) {buf = []; // Создать пустой массив var i = obj.length; while (i--) {buf [i] = клон (obj [i]); } return buf; } else if (obj ancessionof object) {buf = {}; // Создать пустой объект для (var k in obj) {// Добавить новый атрибут в этот объект buf [k] = клон (obj [k]); } return buf; } else {// Обычные переменные непосредственно назначить возврат obj; }}2. Как устранить дублирующие элементы в массиве?
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,25,4]; function derePeat () {var newarr = []; var obj = {}; var index = 0; var l = arr.length; for (var i = 0; i <l; i ++) {if (obj [arr [i]] == не определен) {obj [arr [i]] = 1; newarr [index ++] = arr [i]; } else if (obj [arr [i]] == 1) продолжить; } вернуть Newarr; } var newarr2 = deRepeat (arr); предупреждение (newarr2); // Вывод 1,2,3,4,5,6,9,253. Xiaoxian - милый щенок (собака), и его крики очень хорошие. Каждый раз, когда он видит своего владельца, он будет кричать (Yelp). Из этого описания вы можете получить следующие объекты:
function dog () {this.wow = function () {alert ('wow'); } this.yelp = function () {this.wow (); }}Как и Сяосиан, Xiaomang оказался милым щенком, но однажды он однажды сошел с ума (Мэддог), и когда он увидел кого -то, он кричал (вау) и продолжал звонить (Yelp) каждые полсекунды. Пожалуйста, используйте код для реализации его в соответствии с описанием. (Наследование, прототип, SetInterval)
Отвечать:
function maddog () {this.yelp = function () {var self = this; setInterval (function () {self.wow ();}, 500); }} Maddog.prototype = new Dog (); // для testvar dog = new Dog (); dog.yelp (); var maddog = new maddog (); maddog.yelp ();4. Следующий UL, как предупредить его индекс при щелчке по каждому столбцу? (закрытие)
Кода -копия выглядит следующим образом:
<ul id = ”test»>
<li> Это первый </li>
<li> Это второй </li>
<li> Это третий пункт </li>
</ul>
Отвечать:
// Метод 1: var lis = document.getElementById ('2223'). GetElementsBytagName ('li'); for (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .onclick = function () {alert (this.index); };} // Метод 2: var lis = document.getElementById ('2223'). GetElementsbytagname ('li'); for (var i = 0; i <3; i ++) {lis [i] .index = i; lis [i] .onclick = (function (a) {return function () {alert (a);}}) (i);}5. Напишите функцию JavaScript и введите селектор указанного типа (только три простых селекторов CSS: ID, класс и TagName, и не требуется совместимые комбинационные селекторы), чтобы вернуть соответствующие узлы DOM, которые должны рассмотреть совместимость с браузером и производительность.
/*** @param selector {string} входящий селектор CSS. * @return {array}*/
Ответ: (слишком долго нажмите, чтобы открыть)
var Query = function (selector) {var reg = /^(#)?(/.)?(/w+)$/img; var Regresult = reg.exec (селектор); var result = []; // Если это селектор идентификатора if (Regresult [1]) {if (Regresult [3]) {if (typeof document.queryselector === "function") {result.push (document.queryselector (Regresult [3])); } else {result.push (document.getElementById (Regresult [3])); }}} // Если это селектор классов else if (Regresult [2]) {if (Regresult [3]) {if (typeof document.getElementsbyclassname === 'function') {var doms = document.getelementsbyclassname (Regresult [3]); if (doms) {result = convertoarray (doms); }} // Если функция getElementsbyclassname не поддерживается иначе {var alldoms = document.getElementsbytagname ("*" "); for (var i = 0, len = alldoms.length; i <len; i ++) {if (alldoms [i] .classname.search (new regexp (Regresult [2]))> -1) {result.push (alldoms [i]); }}}}}}} // Если это селектор тегов, иначе if (Regresult [3]) {var doms = document.getElementsbytagname (Regresult [3] .toloarceCase ()); if (doms) {result = converttoarray (doms); }} return result; } функция ConvertToArray (узлы) {var array = null; try {array = array.prototype.slice.call (nodes, 0); // для браузеров, не относящихся к I,} catch (ex) {array = new Array (); for (var i = 0, len = nodes.length; i <len; i ++) {array.push (nodes [i])}} return array; }6. Пожалуйста, оцените следующий код и дайте предложения для улучшения.
if (window.addeventlistener) {var addlistener = function (el, type, useerer, usecapture) {el.addeventListener (type, usinger, usecapture); };} else if (document.all) {addlistener = function (el, type, uliderer) {el.attachevent ("on"+type, function () {alinger.apply (el);}); }}оценивать:
• Функция AddListener не должна быть объявлена в операторах IF и иначе, она должна быть объявлена первой;
• Нет необходимости использовать Window.AddeventListener или Document.Ll для обнаружения браузера, следует использовать возможности для обнаружения возможностей;
• Поскольку AttactEvent имеет эту проблему с указанием в т.е., с ним нужно обрабатывать при этом при этом
Улучшения следующие:
Функция addEvent (elem, type, Handler) {if (elem.addeventListener) {elem.addeventListener (type, handler, false); } else if (elem.attachevent) {elem ['temp' + type + Handler] = Handler; elem [type + Handler] = function () {elem ['temp' + type + handler] .apply (elem); }; elem.attachevent ('on' + type, elem [type + handler]); } else {elem ['on' + type] = Handler; }}7. Добавьте метод в объект строки, пропустите параметр типа строки, а затем верните пространство ценового пространства между каждым символом строки, например:
addspace ("Привет, мир") // -> 'helloWorld D'
Кода -копия выглядит следующим образом:
String.prototype.spacify = function () {
вернуть this.split (''). join ('');
};
Затем ответьте на вышеупомянутые вопросы, тогда вопрос
1) Безопасно ли добавлять методы непосредственно к прототипу объекта? Особенно на объектах объектов. (Я не могу на это ответить? Надеюсь, я скажу вам, что я знаю.)
2) В чем разница между объявлением функции и экспрессией функции?
Ответ: В JavaScript, когда анализатор загружает данные в среду выполнения, он не относится к декларациям функций и выражениям функций в равной степени. Сигнал будет первым, кто прочитал объявления функции и сделает их доступными (доступными) перед выполнением какого -либо кода. Что касается выражения функции, вы должны подождать, пока анализатор не выполнится в строку кода, где она будет расположена до того, как он будет проанализирован и выполнен. (Продвижение декларации функции)
8. Определите метод журнала, чтобы он мог прокси -консоли.
Возможный метод:
Кода -копия выглядит следующим образом:
function log (msg) {
console.log (msg);
}
log («Привет, мир!») // Привет, мир!
Что если вы хотите передать несколько параметров? Очевидно, что приведенный выше метод не может соответствовать требованиям, поэтому лучшим методом является:
Кода -копия выглядит следующим образом:
функция log () {
console.log.apply (консоль, аргументы);
};
Итак, вопрос в том, каковы сходства и различия между применением и методами вызова?
Отвечать:
Две функции применения и вызова одинаковы, то есть вызов один метод объекта и замена текущего объекта другим объектом. Изменяет контекст объекта функции из исходного контекста в новый объект, указанный ThisOBJ.
Но есть разница в параметрах между двумя. Значение первого параметра одинаково, но для второго параметра: применение передается в массиве параметров, то есть объединение нескольких параметров в массив, а вызов передается в виде параметра вызова (начиная от второго параметра). Например, соответствующий метод применения записи для func.call (func1, var1, var2, var3): func.apply (func1, [var1, var2, var3]).
9. Что такое псевдо-арайр в JavaScript? Как преобразовать псевдо-арайр в стандартный массив?
Отвечать:
Pseudo-Array (класс массив): вы не можете вызовать методы массива напрямую или ожидать какого-либо особого поведения атрибутов длины, но вы все равно можете пройти их с реальными методами обхода массива. Как правило, параметры аргумента функции также называются getelementsbytagname, document.childnodes и т. Д., И все они возвращают объекты Nodelist, которые принадлежат псевдо-аражам. Массивы могут быть преобразованы в реальные объекты массива с использованием array.prototype.slice.call (fakearray).
Предположим, мы следим за восьмым стволом вопроса, нам нужно добавить префикс «(приложение)» к каждому методу журнала, такому как «Hello World!» -> '(приложение) Привет, мир!'. Метод заключается в следующем:
function log () {var args = array.prototype.slice.call (аргументы); // Чтобы использовать метод неосвященного массива, преобразовать аргумент в реальные массивы args.unshift ('(app)'); console.log.apply (консоль, args); };10. Для понимания контекста объема и этого см. Следующий код:
var user = {count: 1, getCount: function () {return this.count; }}; console.log (user.getCount ()); // что? var func = user.getCount; console.log (func ()); // что?Каковы результаты двух консолей? Почему?
Ответ 1 и неопределен.
Func выполняется в контексте Winodw, поэтому свойство Count не может быть доступно.
Тогда вопрос заключается в том, как убедиться, что UESR всегда может получить доступ к контексту Func, то есть вернуть 1 правильно.
Ответ: Правильный способ - использовать function.prototype.bind. Совместим с полным кодом каждого браузера следующим образом:
Function.prototype.bind = function.prototype.bind || function (context) {var self = this; return function () {return self.apply (контекст, аргументы); };} var func = user.getCount.bind (user); console.log (func ());11. В чем разница между windows windows js и $ (документ). Как реализовать метод JQ Ready с использованием Native JS?
Метод Window.onload () должен ждать, пока все элементы, включая изображение на странице, не будут загружены до выполнения.
$ (document) .ready () выполняется после того, как структура DOM нарисована, и нет необходимости ждать, пока она не будет загружена.
/ * * Передайте функцию к wondready () * Когда документ проанализирован и готов к операции, функция называется как метод документа */var whonready = (function () {// Эта функция возвращает wholedheare () функция var funcs = []; // Когда событие получено, функция для выполнения var готово = ложно; Handler (e) {if (готовый) return; Вызов этих функций может привести к зарегистрированию большего количества функций (var i = 0; i <funcs.length; i ++) {funcs [i] .call (document); funcs = null; } // Зарегистрировать обработчик для любого события, полученного if (document.addeventlistener) {document.addeventListener ('domcontentload', handler, false); document.addeventlistener ('readystatechange', handler, false); // ie9+ window.addeventListener ('Load', Handler, false); } else if (document.attachevent) {document.attachevent ('onreadystateChange', Handler); window.attachevent ('Onload', Handler); } // return whendude () функция возврата функции whenready (fn) {if (ready) {fn.call (document); } else {funcs.push (fn); }}}) ();Если приведенный выше код очень трудно понять, следующая упрощенная версия:
Функция ready (fn) {if (document.addeventListener) {// стандартный браузер Document.AddeventListener ('domcontentloaded', function () {// Событие входа в систему, чтобы избежать повторного запуска document.RemoveEventListener ('domcontentloaded', argements.callee, falseeventlistener; // execute function ', false); } else if (document.attachevent) {// ie document.attachevent ('onreadystateChange', function () {if (document.readstate == 'food') {document.detachevent ('onreadystatechange', argents.callee); fn (); // Function ecure}}); }};12. (Design Question) Хотите реализовать перетаскивание на определенном узле страницы? Как это сделать? (Используйте Native JS)
Просто ответьте на концепцию, вот несколько ключевых моментов
1. Привязайте Mousedown, MouseMove, события MouseUp с узлами, которые необходимо перетащить
2. После того, как событие Mousedown запускается, начните перетаскивать и перетаскивать
3. При MouseMove вам необходимо получить позицию перетаскивания через event.clientx и клиент и обновить позицию в режиме реального времени.
4. При мышечке, перетаскивать концы
5. Обратите внимание на границы браузера
13
Функция setCookie (имя, значение, дни) {// Добавить переменную времени в cookie var exp = new Date (); exp.settime (exp.gettime () + дни*24*60*60*1000); // Установить время истечения с помощью Days Document.cookie = name + "=" + rececod (value) + "; expires =" + exp.togmtString (); } function getCookie (name) {var result = ""; var mycookie = ""+document.cookie+";"; var searchName = "+name+" = "; var startOfcookie (name) {var result ="; var mycookie = ""+document.cookie+";"; var searchname = "+name+" = "; var startofcookie = mycookie.indexof (searchname); var endofcookie; if (satrtofcookie! = -1) {startofcookie += searchname.length; endofcookie = mycookie.indexof (";", startofcookie); result = (mycookie.substring (startofcookie, endofcookie)); } return result;} (function () {var otips = document.getElementById ('tips'); // Предположим, что идентификатор советов - это советы var page = {check: function () {// Проверьте, существует ли советы 'cookie и позволяет отображать var simple = getCookie (' tips '); если (! Советы "Never_show_again") вернуть false; Элементы}, init: function () {var _this = this;14. Скажите, какова функция следующих функций? Что должно быть заполнено в пустой области?
// define (function (window) {function fn (str) {this.str = str;} fn.prototype.format = function () {var arg = ______; return this.str.replace (_____, функция (a, b) {return arg [b] fn ('<p> <a href = "{0}"> {1} </a> <pan> {2} </span> </p>');Ответ: Цель доступа к функциям состоит в том, чтобы использовать функцию формата, чтобы заменить параметры функции, такие как {0}, и вернуть форматированный результат:
Первым пустым является: аргументы
Второй пустой: // {(/d+)/}/ig
15. Используйте объектно-ориентированный JavaScript, чтобы представиться. (Нет ответа, попробуйте сами)
Ответ: объект или JSON - хороший выбор.
16. Объясните принцип реализации AJAX Native JS.
Полное имя Ajax - асинхронный JavaScript и XML. Среди них асинхронные средства асинхронны, что отличается от метода синхронизации, используемого в традиционной веб -разработке.
Принцип Ajax - просто использовать объект Xmlhttprequest для отправки асинхронных запросов на сервер, получить данные с сервера, а затем использовать JavaScript для работы DOM для обновления страницы.
Xmlhttprequest является основным механизмом Ajax. Впервые он был представлен в IE5 и представляет собой технологию, которая поддерживает асинхронные запросы. Проще говоря, JavaScript может быстро сделать запросы и обрабатывать ответы на сервер, не блокируя пользователя. Не достичь эффекта обновления.
Свойства объекта xmlhttprequest:
• OnreadyStateChang Обработчик событий для события, вызванного каждым изменением состояния.
• responseText возвращает форму строки данных из процесса сервера.
• Реакция DOM-совместимое с DOM Data Data Object возвращается из процесса сервера.
• Числовые коды статуса возвращаются с сервера, такие как обычные 404 (не найдено) и 200 (готово)
• Информация о текстовой строке статуса, сопровождаемая кодом состояния
• Значение состояния объекта готового участка
• 0 (неонициализированный) объект был установлен, но не был инициализирован (открытый метод не был вызван)
• 1 (инициализация) объект был установлен, и метод отправки еще не был вызван
• 2 (Отправить данные) Метод отправки был вызван, но текущий статус и заголовок HTTP неизвестны.
• 3 (передача данных). Некоторые данные были получены, поскольку заголовки отклика и HTTP являются неполными, ошибка возникнет при получении тела ответа и ответа.
• 4 (заполнить) получены данные, и полные данные ответа могут быть получены с помощью ответа XML и ответа.
Ниже приводится простая инкапсуляция функции: (немного длинная, нажмите, чтобы открыть)
Ajax ({url: "./testxhr.aspx", // Тип адреса запроса: "post", // Данные метода запроса: {name: "super", возраст: 20}, // запрос параметров параметров данных: "json", успех: функция (ответ, xml) {// code, выполненное после успешного размещения}, выполнено: функция (состояние) {// code refected); Функция ajax (options) {options = options || {}; options.type = (options.type || "get"). touppercase (); Options.datatype = Options.datatype || "Json"; var params = formatparams (options.data); // CREATE - unne EI6 - Шаг 1 if (window.xmlhttprequest) {var xhr = new xmlhttprequest (); } else {// IE6 и ниже браузеры var xhr = new activexObject ('microsoft.xmlhttp'); } // Прием - Шаг 3 xhr.onreadyStateChange = function () {if (xhr.readystate == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && options.success (xhr.responsetext, xhr.responsexml); } else {options.fail && options.fail (status); }}} // подключить и отправить - Шаг 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); xhr.send (null); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Установить тип контента при отправке формы xhr.setrequestheader ("content-type", "Application/xwww-form-urlencoded"); xhr.send (params); }} // Формат Функции Функции Форматапарамс (DATA) {var arr = []; for (var name in data) {arr.push (encodeuricomponent (name) + "=" + encodeuricomponent (data [name])); } arr.push (("v =" + math.random ()). заменить (".")); return arr.join ("&"); }Приведенный выше код примерно описывает процесс AJAX, и объяснение сами поглощается. Вопрос не закончен. Вы знаете, что такое JSONP и PJAX?
Отвечать:
JSONP: (JSON с заполнением)-это метод перекрестного запроса. Основной принцип - воспользоваться преимуществами функции, которую можно запросить теги сценария в доменах. Атрибут SRC отправляет запрос на сервер, сервер возвращает код JS, веб -страница принимает ответ, а затем выполняет его напрямую. Это то же самое, что и принцип ссылки на внешние файлы через теги скрипта. JSONP состоит из двух частей: функция обратного вызова и данные. Функция обратного вызова обычно контролируется веб -страницей и отправляется на сторону сервера в качестве параметров. На стороне сервера пишет функцию и данные в строку и возвращается.
PJAX: PJAX - это новая технология, основанная на 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