أسئلة مقابلة الاختبار المكتوب لشركات الخفافيش والشركات الكبرى

تم جمع المزيد من الأسئلة من قبلي على طول الطريق ، وهناك أيضًا السنوات السابقة. الإجابات ليست مضمونة لتكون صحيحة. إذا كانت هناك أي أخطاء أو حلول أفضل ، فيرجى تصحيحها.

إرفاق المقال الثاني: 2014 واجهة الاختبار التحريري أسئلة مقابلة لشركات الخفافيش وشركات الإنترنت الرئيسية-HTML ، CSS

ستكون الأسئلة السابقة أساسية للغاية ، وكلما ذهبت أكثر ، كلما ستكون أكثر ، كلما ستكون متعمقًا.

جافا سكريبت المبتدئين:

1. ما نوع اللغة جافا سكريبت وما هي خصائصها؟

لا توجد إجابة قياسية.

2. ما هي أنواع بيانات جافا سكريبت؟

أنواع البيانات الأساسية: سلسلة ، منطقية ، رقم ، غير محدد ، فارغ

نوع البيانات المرجعية: كائن (صفيف ، تاريخ ، regexp ، وظيفة)

لذا فإن السؤال هو ، كيفية تحديد ما إذا كان المتغير هو نوع بيانات الصفيف؟

• الطريقة 1. تحديد ما إذا كان لديه "خصائص صفيف" ، مثل طريقة الشريحة (). يمكنك تحديد طريقة الشريحة لهذا المتغير بنفسك ، لذلك يفشل في بعض الأحيان

• Method 2.OBJ extryof Array غير صحيح في بعض إصدارات IE

• الطريقة 3. هناك نقاط ضعف في كلتا الطريقتين. يتم تعريف Array.isarray () طريقة جديدة في ECMA Script5 لضمان توافقها. أفضل طريقة هي كما يلي

 if (typeof array.isarray === "undefined") {array.isarray = function (arg) {return object.prototype.toString.call (arg) === "[كائن صفيف]"} ؛ }

3. في مربع الإدخال مع معرف معروف ، آمل أن أحصل على قيمة الإدخال في مربع الإدخال هذا. كيف تفعل ذلك؟ (لا يوجد إطار من الطرف الثالث)

نسخة الكود كما يلي: document.getElementById ("id"). القيمة

4. كيف تحصل على جميع مربعات الاختيار على الصفحة؟ (لا يوجد إطار من الطرف الثالث)

 var domlist = document.getElementSbyTagName ('input') var checkboxlist = [] ؛ var len = domlist.length ؛ // ذاكرة التخزين المؤقت للمتغير المحلي بينما (len--) {// استخدم بينما سيكون أكثر كفاءة من الحلقة إذا (domlist [len] .type == 'checkbox') {checkboxlist.push (domlist [len]) ؛ }}

5. اضبط محتوى HTML لـ DIV مع معرف معروف على XXXX ، ويتم ضبط لون الخط على الأسود (لا توجد إطارات طرف ثالث)

نسخة الكود كما يلي:

var dom = document.getElementById ("id") ؛

dom.innerhtml = "xxxx"

dom.style.color = "#000"

6. عند النقر فوق عقدة DOM ، نأمل أن نتمكن من تنفيذ وظيفة. ماذا يجب أن نفعل؟

• ربط الأحداث مباشرة في DOM: <div onclick = "test ()"> </viv>

• الربط من خلال onclick في JS: xxx.onclick = اختبار

• الربط بإضافة الحدث: AddeventListener (xxx ، "انقر" ، اختبار)

إذن السؤال هو ، ما هي نماذج دفق الأحداث في JavaScript؟

• "فقاعة الأحداث": تبدأ الأحداث في قبولها من قبل العناصر الأكثر تحديداً ثم تنتشر لأعلى خطوة بخطوة

• "التقاط الأحداث": يتم استلام الأحداث أولاً بواسطة العقدة الأقل تحديدًا ، ثم أسفل خطوة بخطوة ، وصولاً إلى أكثرها تحديداً

• "DOM Event Flow": ثلاث مراحل: التقاط الأحداث ، المرحلة المستهدفة ، فقاعة الأحداث

7. ما هي Ajax و JSON ، إيجابياتهم وسلبياتهم.

Ajax غير متزامن JavaScript و XML لتنفيذ تفاعل البيانات غير المتزامن في صفحات الويب.

ميزة:

• هل يمكن للصفحة تحميل المحتوى المحلي دون تحميل جميع المحتوى ، مما يقلل من كمية نقل البيانات

• تجنب المستخدمين في تحديث الصفحات أو القفز باستمرار لتحسين تجربة المستخدم

عيب:

• ليست ودية لمحركات البحث (

• تكلفة تنفيذ وظائف الأمام والخلفية تحت AJAX عالية

• قد تتسبب في زيادة عدد الطلبات

• قيود القضية عبر المجال

JSON هو تنسيق لتبادل البيانات خفيف الوزن ، مجموعة فرعية من ECMA

المزايا: خفيفة الوزن وسهلة القراءة والكتابة من قبل الأشخاص ، من السهل تحليلها بواسطة الآلات (JavaScript) ، ويدعم أنواع البيانات المركبة (المصفوفات ، الكائنات ، السلاسل ، الأرقام)

8. انظر ما هو إخراج الكود التالي؟ اشرح السبب.

نسخة الكود كما يلي:

var a ؛

تنبيه (typeof a) ؛ // غير محدد

تنبيه (ب) ؛ // الإبلاغ عن خطأ

Explanation: غير محدد هو نوع بيانات ذات قيمة واحدة فقط. هذه القيمة "غير محددة". عندما يتم الإعلان عن متغير باستخدام VAR ولكن لا يتم تهيئة تعيينه ، فإن قيمة هذا المتغير غير محددة. وسيقوم B بالإبلاغ عن خطأ لأنه لم يتم الإعلان عنه. لاحظ أن المتغيرات غير المعلنة تختلف عن تلك المعلنة غير المعلمين.

9. انظر إلى الكود التالي ، ما المخرجات؟ اشرح السبب.

نسخة الكود كما يلي:

var a = null ؛

تنبيه (typeof a) ؛ //هدف

Explanation: NULL هو نوع بيانات ذي قيمة واحدة فقط ، وهذه القيمة لاغية. إنه يشير إلى أن مؤشر فارغ مستهدف ، لذلك سيعود استخدام الكشف عن نوع "كائن".

10. انظر إلى الكود التالي ، ما المخرجات؟ اشرح السبب.

 var undefined ؛ 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.Value = 2 ؛

تنبيه (A.Value) ؛

الإجابة: 2 (فحص تفاصيل نوع البيانات المذكورة)

12. صفيف var stringarray = ["هذا" ، "،" ، "Baidu" ، "Campus"] معروف ، وتنبيه المخرجات "هذا هو حرم 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 ؛}

(التحقيق في واجهة برمجة التطبيقات الأساسية)

13.var numberArray = [3،6،2،4،1،5] ؛ (التحقيق في واجهة برمجة التطبيقات الأساسية)

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 (وظيفة (أ ، ب) {// 6،5،4،3،2،1 return ba ؛})

14. إخراج تاريخ اليوم ، في شكل Yyyy-MM-DD. على سبيل المثال ، اليوم هو 26 سبتمبر 2014 ، ثم الإخراج 2014-09-26

 var d = date date () ؛ // get that year ، getlyear () يعيد رقم 4 أرقام var year = d.getlyear () ؛ // الحصول على الشهر ، الشهر مميز تمامًا ، 0 يناير ، و 11 هو شهر ديسمبر var = d.getMonth () + 1 ؛ // تصبح شهرين في الشهر = 10؟ '0' + month: month ؛ ​​// get the day var day = d.getDate () ؛ day = day <10؟ '0' + day: day ؛ Alert (year + '-' + month + '-' + day) ؛

15. استبدل {$ id} في السلسلة "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>" مع 10 و {$ name} مع Tony (باستخدام التعبيرات العادية)

الإجابة: "<tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>". استبدال (/{/$ id}/g ، '10'). استبدال (/{/$ name}/g ، 'tony') ؛

16. من أجل ضمان سلامة إخراج الصفحة ، غالبًا ما نحتاج إلى الهروب من بعض الشخصيات الخاصة. يرجى كتابة وظيفة EscapeHTML والهروب <،> ، & ، "

 الوظيفة expresshtml (str) {return str.replace (/[<> "&]/g ، function (match) {switch (match) {case" <": return" <"؛ case">: return ">" ؛ case "&": return "&" ؛

17.foo = foo || شريط ، ماذا يعني خط الرمز هذا؟ لماذا أكتب بهذه الطريقة؟

الإجابة: if (! foo) foo = bar ؛ // في حالة وجود FOO ، تظل القيمة دون تغيير ، وإلا يتم تعيين قيمة الشريط إلى FOO.

تعبير الدائرة القصيرة: كتعبيرات معامل عن "&&" و "||" المشغلين ، عندما يتم تقييم هذه التعبيرات ، ستنتهي عملية التقييم طالما يمكن تحديد النتيجة النهائية على أنها صحيحة أو خاطئة. وهذا ما يسمى تقييم الدائرة القصيرة.

18. النظر في الكود التالي ، ماذا سيتم الإخراج؟ (تعزيز الإعلان المتغير)

نسخة الكود كما يلي:

var foo = 1 ؛

وظيفة(){

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) إنشاء عقدة جديدة

CreatedOcumentFragment () // إنشاء جزء DOM

CreateElement () // إنشاء عنصر معين

CreateTextNode () // إنشاء عقدة نصية

2) أضف وإزالة واستبدال وإدراج

AppendChild () // إضافة

removechild () // إزالة

ReplaceChild () // استبدال

insertbefore () // insert

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: undeled}.

إجابة:

 دالة seriversyurl (url) {var result = {} ؛ url = url.split ("؟") [1] ؛ var map = url.split ("&") ؛ لـ (var i = 0 ، len = map.length ؛ i <len ؛ i ++) {result [map [i] .split ("=" [0]] = map [i] .split ("=") [1] ؛ } نتيجة الإرجاع ؛}

23. ما هو الفرق بين مُنشئ التعبير العادي var reg = regexp جديد ("xxx") والتعبير العادي VAR REG = //؟ تعبير منتظم مطابقة صندوق البريد؟

الإجابة: عند استخدام مُنشئ regexp () ، ليس فقط تحتاج إلى الهروب من عروض الأسعار (أي "الوسائل") ، ولكنك تحتاج أيضًا إلى مزدوجة الانزلاق الخلفي (أي // تعني A /). باستخدام حرفي التعبير العادي أكثر كفاءة.

مطابقة منتظمة للبريد الإلكتروني:

نسخة التعليمات البرمجية كما يلي: var regmail = /^ (Budapa-za-Z0-9_-2010yber@( bududa-za-z0-9_-2010'0 (.

24. انظر إلى الكود التالي وأعطي نتيجة الإخراج.

نسخة الكود كما يلي:

لـ (var i = 1 ؛ i <= 3 ؛ i ++) {

setTimeout (function () {

console.log (i) ؛

} ، 0) ؛

} ؛

الإجابة: 4 4 4.

السبب: لن يتم تشغيل معالج أحداث JavaScript حتى يكون الخيط خاملاً. لذا فإن السؤال هو ، كيفية جعل الإخراج الرمز أعلاه 1 2 3؟

 لـ (var i = 1 ؛ i <= 3 ؛ i ++) {setTimeOut ((function (a) {// قم بتنفيذ الوظيفة على الفور console.log (a) ؛}) (i) ، 0) ؛ } ؛ 1 // الإخراج 23

25. اكتب وظيفة لمسح المسافات قبل وبعد السلسلة. (متوافق مع جميع المتصفحات)

استخدم الواجهة المدمجة trim () ، مع الأخذ في الاعتبار التوافق:

 if (! string.prototype.trim) {string.prototype.trim = function () {return this.replace (/^/s+/، "") .replace (// s+$/، "") ؛ }} // اختبار الوظيفة var str = " /t /n سلسلة اختبار" .trim () ؛ تنبيه (str == "سلسلة الاختبار") ؛ // التنبيهات "حقيقية"

26. ما هي أدوار كالي والمتصل في جافا سكريبت؟

إجابة:

يقوم المتصل بإرجاع إشارة إلى الوظيفة التي تستدعي الوظيفة الحالية ؛

تقوم Callee بإرجاع وظيفة الوظيفة التي يتم تنفيذها ، أي هيئة كائن الوظيفة المحدد.

إذن السؤال هو؟ إذا كان زوج من الأرانب يلدان زوجًا من الأرانب كل شهر ؛ زوج من الأرانب الجديدة سوف تلد الأرانب من الشهر الثاني ؛ على افتراض أن كل زوج من الأرانب هو أنثى واحدة ورجل واحد ، كم عدد أزواج الأرانب التي يمكن أن يتكاثر زوجها من الأرانب في الشهر N؟ (استخدم Callee لإكمال)

 var result = [] ؛ function fn (n) {// تسلسل fibonacci النموذجي if (n == 1) {return 1 ؛ } آخر إذا (n == 2) {return 1 ؛ } else {if (result [n]) {return return [n] ؛ } آخر {//argument.callee () تعني fn () نتيجة [n] = ediuments.callee (n-1)+ediuments.callee (n-2) ؛ نتيجة العودة [n] ؛ }}}

JavaScript الوسيطة:

1. قم بتنفيذ استنساخ دالة يمكنه نسخ أنواع البيانات الرئيسية الخمسة في JavaScript (بما في ذلك الرقم ، السلسلة ، الكائن ، المصفوفة ، المنطقية)

• نقطة البحث 1: هل من الواضح ما إذا كان الفرق بين نوع البيانات الأساسية ونوع البيانات المرجعية مخزنة في الذاكرة؟

• نقطة البحث 2: هل تعرف كيفية تحديد نوع المتغير؟

• نقطة التفتيش 3: تصميم الخوارزمية العودية

 // الطريقة 1: object.prototype.clone = function () {var o = this.constructor === Array؟ []: {} ؛ لـ (var e في هذا) {o [e] = typeof this [e] === "object"؟ هذا [e] .clone (): هذا [e] ؛ } return o ؛} // الطريقة 2:/** * استنساخ كائن * param obj * regurns */function clone (obj) {var buf ؛ if (obj extryof array) {buf = [] ؛ // إنشاء مجموعة فارغة var i = obj.length ؛ بينما (i--) {buf [i] = clone (obj [i]) ؛ } إرجاع buf ؛ } آخر if (OBJ intormof Object) {buf = {} ؛ // إنشاء كائن فارغ لـ (var k في OBJ) {// إضافة سمة جديدة إلى هذا الكائن buf [k] = clone (obj [k]) ؛ } إرجاع buf ؛ } آخر {// المتغيرات العادية تخصيص مباشرة OBJ ؛ }}

2. كيفية القضاء على العناصر المكررة في صفيف؟

 var arr = [1،2،3،3،4،4،5،5،6،1،9،3،25،4] ؛ دالة derePeat () {var newarr = [] ؛ var obj = {} ؛ فارس فهرس = 0 ؛ var l = arr.length ؛ لـ (var i = 0 ؛ i <l ؛ i ++) {if (obj [arr [i]] == undefined) {obj [arr [i]] = 1 ؛ Newarr [index ++] = arr [i] ؛ } آخر إذا (obj [arr [i]] == 1) تابع ؛ } إرجاع نيار ؛ } var newarr2 = derePeat (arr) ؛ ALERT (NEWARR2) ؛ // الإخراج 1،2،3،4،5،6،9،25

3. Xiaoxian هو جرو لطيف (كلب) ، وصراخه لطيفة للغاية. في كل مرة يرى مالكه ، سوف يصرخ (يصرخ). من هذا الوصف ، يمكنك الحصول على الكائنات التالية:

 دالة الكلب () {this.wow = function () {Alert ('wow') ؛ } this.yelp = function () {this.wow () ؛ }}

مثل Xiaoxian ، تحولت Xiaomang إلى جرو لطيف ، ولكن فجأة في يوم من الأيام أصبح مجنونًا (Maddog) ، وعندما رأى شخصًا ما ، كان يصرخ (واو) واستمر في الاتصال (الصراخ) كل نصف ثانية. يرجى استخدام الرمز لتنفيذه وفقًا للوصف. (الميراث ، النموذج الأولي ، setInterval)

إجابة:

 دالة maddog () {this.yelp = function () {var self = this ؛ setInterval (function () {self.wow () ؛} ، 500) ؛ }} maddog.prototype = new dog () ؛ // for 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 بسيطة: معرف ، فئة ، و tagname ، وليس هناك حاجة إلى محددات مزيج متوافقة) لإرجاع عقد DOM المطابقة ، والتي تحتاج إلى مراعاة توافق المتصفح وأداءها.

/*** Param Selector {String} محدد CSS الوارد. * regurn {array}*/

الإجابة: (طويل جدًا ، انقر لفتح)

 var query = function (selector) {var reg = /^ ((#)؟(/.)؟(/w+) $/img ؛ var regresult = reg.exec (محدد) ؛ var result = [] ؛ // إذا كان محددًا معرفًا إذا (Regresult [1]) {if (Regresult [3]) {if (typeof document.queryselector ==== "function") {result.push (document.queryselector (regresult [3])) ؛ } آخر {result.push (document.getElementById (Regresult [3])) ؛ }}} // إذا كان محددًا فئة آخر إذا كان (Regresult [2]) {if (regresult [3]) {if (typeof document.getElementSbyClassName ==== 'function') {var doms = document.getElementSbyClassName (regresult [3]) ؛ if (doms) {result = senderoarray (doms) ؛ }} // إذا كانت وظيفة getElementSbyClassName غير مدعومة أخرى {var alldoms = document.getElementSbyTagName ("*") ؛ لـ (var i = 0 ، len = alldoms.length ؛ i <len ؛ i ++) {if (AllDoms [i] .classname.search (regexp new (regresult [2]))> -1) {result.push (Alldoms [i]) ؛ }}}}}}} // إذا كان محدد علامة آخر إذا (Regresult [3]) {var doms = document.getElementsByTagName (Regresult [3] .ToLowerCase ()) ؛ if (doms) {result = convertToArray (doms) ؛ }} نتيجة الإرجاع ؛ } الوظيفة convertToArray (العقد) {var array = null ؛ حاول {array = array.prototype.slice.call (العقد ، 0) ؛ // للمتصفحات غير IE} catch (ex) {array = new array () ؛ لـ (var i = 0 ، len = nodes.length ؛ i <len ؛ i ++) {array.push (noldes [i])}} return ؛ }

6. يرجى تقييم الرمز التالي وتقديم اقتراحات للتحسين.

 if (window.adDeventListener) {var addListener = function (type ، type ، beader ، usecapture) {el.addeventListener (type ، beasher ، usecapture) ؛ } ؛} آخر if (document.all) {AddListener = function (el ، type ، beasher) {el.attachevent ("on"+type ، function () {leader.apply (el) ؛}) ؛ }}

يقيم:

• لا ينبغي الإعلان عن وظيفة AddListener في البيانات IF وغيرها ، وينبغي إعلانها أولاً ؛

• لا حاجة لاستخدام Window.AdDeventListener أو المستند.

• نظرًا لأن Attankevent لديه مشكلة الإشارة في IE ، يجب التعامل معها عند تسميتها

التحسينات على النحو التالي:

 وظيفة addEvent (elem ، type ، handler) {if (elem.addeventListener) {elem.addeventListener (type ، handler ، false) ؛ } آخر إذا (elem.attachevent) {elem ['temp' + type + handler] = handler ؛ elem [type + handler] = function () {elem ['temp' + type + handler] .apply (elem) ؛ } ؛ elem.attachevent ('on' + type ، elem [type + handler]) ؛ } آخر {elem ['on' + type] = handler ؛ }}

7. أضف طريقة إلى كائن السلسلة ، ومرر في معلمة نوع السلسلة ، ثم إرجاع مساحة السعر بين كل حرف من السلسلة ، على سبيل المثال:

AddSpace ("Hello World") // -> 'HelloWorld d'

نسخة الكود كما يلي:

string.prototype.spacify = function () {

إرجاع this.split (''). انضم ('') ؛

} ؛

ثم أجب على الأسئلة أعلاه ، ثم السؤال هو

1) هل من الآمن إضافة طرق مباشرة إلى النموذج الأولي للكائن؟ خاصة على كائنات الكائنات. (لا أستطيع الإجابة على هذا؟ آمل أن أخبرك بما أعرفه.)

2) ما هو الفرق بين إعلان الوظيفة والتعبير عن الوظيفة؟

الإجابة: في JavaScript ، عندما يقوم المحلل بتحميل البيانات في بيئة التنفيذ ، فإنه لا يعالج إعلانات الوظيفة وتعبيرات الوظائف بالتساوي. سيكون المحلل أول من يقرأ إعلانات الوظيفة وجعلها متاحة (يمكن الوصول إليها) قبل تنفيذ أي رمز. بالنسبة للتعبير عن الوظيفة ، يجب أن تنتظر حتى ينفذ المحلل إلى سطر الكود حيث يتم تحديده قبل أن يتم تحليله وتنفيذه. (تعزيز إعلان الوظيفة)

8. حدد طريقة السجل بحيث يمكنها وكيل Console.log.

طريقة ممكنة:

نسخة الكود كما يلي:

سجل الوظائف (msg) {

console.log (msg) ؛

}

سجل ("Hello World!") // Hello World!

ماذا لو كنت تريد تمرير معلمات متعددة؟ من الواضح أن الطريقة المذكورة أعلاه لا يمكن أن تلبي المتطلبات ، لذا فإن الطريقة الأفضل هي:

نسخة الكود كما يلي:

دالة log () {

console.log.apply (وحدة التحكم ، الحجج) ؛

} ؛

إذن السؤال هو ، ما هي أوجه التشابه والاختلاف بين أساليب التطبيق وطرق الاتصال؟

إجابة:

وظيفتان للتطبيق والمكالمات هما نفسه ، أي استدعاء طريقة كائن ما واستبدال الكائن الحالي بكائن آخر. يغير سياق الكائن لوظيفة من السياق الأولي إلى الكائن الجديد المحدد بواسطة thisoBJ.

ولكن هناك اختلاف في المعلمات بين الاثنين. معنى المعلمة الأولى هو نفسه ، ولكن بالنسبة للمعلمة الثانية: يتم تمرير تطبيق في مجموعة من المعلمات ، أي ، يجمع بين المعلمات المتعددة في صفيف ، ويتم تمرير المكالمة كمعلمة للمكالمة (بدءًا من المعلمة الثانية). على سبيل المثال ، فإن طريقة الكتابة المقابلة لـ FUNC.Call (FUNC1 ، VAR1 ، VAR2 ، VAR3) هي: func.apply (func1 ، [var1 ، var2 ، var3]).

9. ما هو المباراة الزائفة في جافا سكريبت؟ كيفية تحويل المباراة الزائفة إلى صفيف قياسي؟

إجابة:

Array Pseudo-Array (صفيف الفصل): لا يمكنك استدعاء طرق الصفيف مباشرة أو توقع أي سلوك خاص لسمات الطول ، ولكن لا يزال بإمكانك اجتيازها على طرق اجتياز الصفيف الحقيقية. عادةً ما تسمى معلمات الوسيطة الخاصة بالوظيفة أيضًا getElementsByTagName ، document.childnodes ، وما إلى ذلك ، وهم جميعهم يعيدون كائنات nodelist التي تنتمي إلى المباراة الزائفة. يمكن تحويل المصفوفات إلى كائنات صفيف حقيقية باستخدام Array.Prototype.slice.call (FakeArray).

لنفترض أننا نتبع ساق السؤال الثامن ، نحتاج إلى إضافة بادئة "(تطبيق)" لكل طريقة سجل ، مثل "Hello World!" -> '(التطبيق) مرحبا العالم! ". الطريقة كما يلي:

 دالة log () {var args = array.prototype.slice.call (وسيطات) ؛ // من أجل استخدام طريقة صفيف UNSNIFT ، قم بتحويل الوسيطة إلى 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 || الدالة (السياق) {var self = this ؛ Return Function () {return self.apply (السياق ، الوسائط) ؛ } ؛} var func = user.getCount.bind (user) ؛ console.log (func ()) ؛

11. ما هو الفرق بين نافذة JS الأصلية. onload و jQuery's $ (document) .Ready (function () {})؟ كيفية تنفيذ طريقة JQ جاهزة باستخدام JS الأصلي؟

يجب أن تنتظر طريقة window.onload () حتى يتم تحميل جميع العناصر بما في ذلك الصورة في الصفحة قبل التنفيذ.

يتم تنفيذ $ (وثيقة). READY () بعد رسم هيكل DOM ، وليس هناك حاجة للانتظار حتى يتم تحميله.

 / *. معالج (e) {إذا كانت (جاهزة) عودة ؛ // في حالة قيام نداء هذه الوظائف بتسجيل المزيد من الوظائف (var i = 0 ؛ i <funcs.length ؛ i ++) {funcs [i] .call (document) ؛ funcs = فارغة ؛ }. document.addeventListener ('ReadyStateChange' ، Handler ، false) ؛ // ie9+ window.adDeventListener ('load' ، Handler ، false) ؛ } آخر if (document.attachevent) {document.attachevent ('onReadyStateChange' ، Handler) ؛ window.attachevent ('Onload' ، Handler) ؛ } // return whenReady () function function function whenready (fn) {if (ready) {fn.call (document) ؛ } آخر {funcs.push (fn) ؛ }}}) () ؛

إذا كان من الصعب للغاية فهم الكود أعلاه ، فإن النسخة المبسطة التالية:

 وظيفة جاهزة (fn) {if (document.addeventListener) {// Standard Browser document.adDeventListener ('domcontentloaded' ، function () {// login event لتجنب التشغيل المتكرر من document.removeVentListener ('domContentLoaded' ، الحجج. } if if (document.attachevent) {// ie document.attachevent ('onReadyStatechange' ، function () {if (document.readyState == 'Complete') {document.detachevent ('onReadyStateChange' ، endument.callee) ؛ fn () ؛ // execution}}}) ؛ }} ؛

12. (سؤال التصميم) هل تريد تنفيذ سحب على عقدة معينة من الصفحة؟ كيف تفعل ذلك؟ (استخدم JS الأصلي)

فقط أجب على المفهوم ، إليك بعض النقاط الرئيسية

1. ربط موسى ، موسميوف ، أحداث الفأر إلى العقد التي تحتاج إلى جرها

2. بعد أن يتم تشغيل حدث Mousedown ، ابدأ في السحب والسحب

3.

4.

5. انتبه إلى حدود المتصفح

13.

 وظيفة setCoOkie (الاسم ، القيمة ، أيام) {// إضافة متغير الوقت إلى ملف تعريف الارتباط var exp = new date () ؛ exp.Settime (exp.getTime () + Days*24*60*60*1000) ؛ // قم بتعيين وقت انتهاء الصلاحية إلى Days Document.cookie = name + "=" + Escape (value) + "؛ Expires =" + Exp.TogMtString () ؛ } وظيفة 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 = mycokie.indexof ("؛" ، startofCoOkie) ؛ النتيجة = (myCokie.subString (startofcookie ، endofcookie)) ؛ } نتيجة الإرجاع ؛} (function () {var otips = document.getElementById ('Tips') ؛ // لنفترض أن معرف النصائح هو tips var page = {check: function () {// تحقق من أن tips 'cookie موجودة وسمح لعرض tips var = getCookie (' tips ') ؛ إذا كانت (extips depare_show_again ") false ؛ على افتراض العناصر على مستوى الصف ، init: {var _ this ؛ page.init () ؛}) () ؛

14. قل ما هي وظيفة الوظائف التالية؟ ما الذي يجب ملؤه في المنطقة الفارغة؟

 // define (function (window) {function fn (str) {this.str = str ؛} fn.prototype.format = function () {var arg = ______ ؛ return this.str.replace (_____ ، function (a ، b) {b) fn ('<p> <a href = "{0}"> {1} </a> <span> {2} </span> </p>') ؛

الإجابة: الغرض من الوصول إلى الوظائف هو استخدام وظيفة التنسيق لاستبدال معلمات الوظيفة مثل {0} وإرجاع نتيجة منسقة:

أول فارغة هي: الحجج

الفارغ الثاني هو: // {(/d+)/}/ig

15. استخدم JavaScript الموجهة للكائنات لتقديم نفسك. (لا إجابة ، من فضلك جربها بنفسك)

الإجابة: كائن أو JSON خيار جيد.

16. اشرح مبدأ تنفيذ AJAX من قِبل JS الأصلي.

الاسم الكامل لـ Ajax هو JavaScript غير متزامن و XML. من بينها ، يعني غير متزامن غير متزامن ، وهو ما يختلف عن طريقة التزامن المستخدمة في تطوير الويب التقليدي.

يتمثل مبدأ Ajax ببساطة في استخدام كائن XMLHTTPrequest لإرسال طلبات غير متزامنة إلى الخادم ، والحصول على بيانات من الخادم ، ثم استخدم JavaScript لتشغيل DOM لتحديث الصفحة.

XMLHTTPrequest هي الآلية الأساسية لـ AJAX. تم تقديمه لأول مرة في IE5 وهي تقنية تدعم الطلبات غير المتزامنة. ببساطة ، يمكن لـ JavaScript تقديم طلبات ومعالجة الاستجابات على الخادم على الفور دون منع المستخدم. لا تحقق أي تأثير تحديث.

خصائص كائن XMLHTTPrequest هي:

• onReadyStateChang معالج الحدث لهذا الحدث الناجم عن كل تغيير في الولاية.

• تقوم مسؤولية بإرجاع نموذج سلسلة البيانات من عملية الخادم.

• استجابة كائن بيانات المستند المتوافق مع DOM تم إرجاعها من عملية الخادم.

• تم إرجاع الرموز الرقمية للحالة من الخادم ، مثل 404 المشترك (غير موجود) و 200 (جاهز)

• معلومات سلسلة نص الحالة مصحوبة برمز الحالة

• قيمة حالة كائن ReadyState

• 0 (غير ضروري) تم إنشاء الكائن ، ولكن لم يتم تهيئته (لم يتم تسمية الطريقة المفتوحة)

• 1 (التهيئة) تم إنشاء الكائن ولم يتم استدعاء طريقة الإرسال بعد

• 2 (إرسال البيانات) تم استدعاء طريقة الإرسال ، ولكن الحالة الحالية ورأس HTTP غير معروفين

• 3 (نقل البيانات) تم استلام بعض البيانات ، لأن رؤوس الاستجابة و HTTP غير مكتملة ، سيحدث خطأ عند الحصول على استجابة ومسؤول.

• 4 (كاملة) يتم استلام البيانات ، ويمكن الحصول على بيانات الاستجابة الكاملة من خلال الاستجابة xml و applectext.

ما يلي عبارة عن تغليف بسيط للدالة: (طويل قليلاً ، انقر لفتح)

 ajax ({url: "./testxhr.aspx" ، // نوع الطلب نوع العنوان: "post" ، // طلب البيانات: {name: "super" ، العمر: 20} ، // request parameter type: "json" ، success: function (response ، xml) {// code evented efort placement} ، failure: status) دالة ajax (خيارات) {خيارات = خيارات || {} ؛ Options.type = (Options.type || "get"). ToupperCase () ؛ Options.datatype = Options.Datatype || "JSON" ؛ var params = formatparams (Options.Data) ؛ // Create - NonI6 - الخطوة 1 if (window.xmlHttPrequest) {var xhr = new xmlhttprequest () ؛ } آخر {// 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) ؛ } آخر {Options.Fail && Options.fail (الحالة) ؛ }}} // connect and send - الخطوة 2 if (Options.type == "get") {xhr.open ("get" ، Options.url + "؟" + params ، true) ؛ XHR.SEND (NULL) ؛ } if if (Options.type == "post") {xhr.open ("post" ، Options.Url ، true) ؛ // قم بتعيين نوع المحتوى عند إرسال النموذج XHR.SetRequestHeader ("نوع المحتوى" ، "Application/X-WWW-Form-urlencoded") ؛ XHR.Send (params) ؛ }} // format parameter function formatparams (data) {var arr = [] ؛ لـ (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