1. مساحة الاسم :
يتم توسيع مساحة الاسم في JS باستخدام خصائص الكائن. على سبيل المثال ، يحدد المستخدم كائن A ، مع سمات B وسمات C ضمن كائن A ، وسمات B وسمات C هي كائنات. لذلك ، a = {b: {} ، c: {}} ، يمكن للمستخدم تحديد نفس الطريقة والسمة في كائن B والكائن C. لذلك ، ينتمي B و C إلى مساحات أسماء مختلفة. عندما نسمي الأساليب في كائنات B و C ، يمكننا أن ندعوها من خلال Ablike () و aclike (). بالطبع أ هو خاصية في كائن النافذة.
ولكن هناك موقف ، على سبيل المثال: تقدم صفحة boke.js jquery.js و prototype.js (ستضيف سمات $ إلى كائن النافذة) ، ويحدث تعارض.
لذلك ، هناك noconflict () في jquery.js للتعامل مع النزاعات. عملية التنفيذ: تقدم الصفحة أولاً النموذج الأولي. في هذا الوقت ، سوف يشغل النموذج الأولي سمة $ للنافذة. ثم عند تقديم jQuery ، ستقوم JQuery بتخزين سمة $ للنافذة السابقة في _ $ ، ثم استخدم سمة $ بنفسها. في هذا الوقت ، يمكنك الاتصال بالطريقة jQuery من خلال $. عندما لا تحتاج إلى استخدام jQuery ولكنك تريد استخدام النموذج الأولي ، يمكنك الاتصال بـ $ .noconflict () ، ثم سيتم استعادة $ إلى كائن نموذج أولي. في هذا الوقت ، يمكنك استخدام طريقة النموذج الأولي من خلال $.
نسخة الكود كما يلي:
var _ $ = window. $ ، _jquery = window.jquery ؛
noconflict: وظيفة (عميقة) {
نافذة. $ = _ $ ؛
إذا (عميق) window.jquery = _jquery ؛
إرجاع jQuery. // قيمة الإرجاع ، يمكنك تعيين قيمة لأسماء متغيرة أخرى ، مثل Chaojidan ، بحيث يمكنك الاتصال بالأساليب في jQuery من خلال Chaojidan.
}
2. تمديد الكائن :
إذا كان كائن مساحة الاسم ، نحتاج إلى تمديد الوظيفة. على سبيل المثال: أحتاج إلى نسخ جميع خصائص وطرق الكائن A إلى كائن B. ليس لديّ كتابة الرمز واحدًا تلو الآخر في كائنات B.
نسخة الكود كما يلي:
مزيج الوظيفة (الهدف ، المصدر) {
var args = [] .slice.call (الوسائط) ، i = 1 ،
isCover = typeof args [args.length-1] == "Boolean"؟ args.pop (): صحيح ؛ // غير مكتوب ، الافتراضي صحيح ، يتم تجاوز الافتراضي.
if (args.length == 1) {
Target =! this.window؟ هذا:{}؛
// إذا كانت هناك معلمة كائن واحدة فقط ، فسيتم توسيع هذا الكائن. على سبيل المثال: أدعو المزيج (ب) في سياق الكائن A ، ثم هذا هو في هذا الوقت ، وبالتالي ستتم إضافة خصائص وطرق B إلى الكائن A. ومع ذلك ، إذا تم استدعاء المزيج (ب) في النافذة ، فسيتم إضافة الخصائص والأساليب في كائن النافذة. (فقط كائنات النوافذ لها خصائص نافذة)
أنا = 0 ؛
}
بينما ((المصدر = args [i ++])) {
لـ (المفتاح في المصدر) {
if (isCover ||! (مفتاح في الهدف)) // إذا كان الكتابة فوق ، قم بتعيين القيمة مباشرة. إذا لم يكن الكتابة فوق ، حدد أولاً ما إذا كان المفتاح موجودًا في الكائن الهدف. إذا كانت موجودة ، فلن يتم تعيين أي قيمة.
{
الهدف [المفتاح] = المصدر [المفتاح] ؛
}
}
}
الهدف الإرجاع ؛
}
يحب المقابلات من الشركات الكبيرة التحقق من المصفوفات. يمكنك التحقق من ذلك. يمكن أن يكون كل عنصر في الصفيف كائنًا ، وحتى إذا كان للكائن A والكائن B نفس الخصائص والأساليب ، فهي ليست متساوية. يمكن العثور على الأوتار والأرقام ، مثل 123 و "123" ، بطريقة كاملة من خلال البحث عبر الإنترنت.
3.
هناك العديد من كائنات صفيف الفئة في المتصفح ، والوسائط ، و document.forms ، و document.links ، و form.elements ، document.getElementsByTagname ، childnodes ، إلخ (htmlcollection ، nodelist).
يوجد أيضًا كائن مخصص بأسلوب كتابة خاص
نسخة الكود كما يلي:
var arraylike = {
0: "أ" ،
1: "ب" ،
الطول: 2
}
هذا الكائن مكتوب ككائن jQuery.
نحتاج إلى تحويل كائن صفيف الفئة المذكور أعلاه إلى كائن صفيف.
[] .Slice.Call يمكن حل طريقة. ومع ذلك ، فإن HTMLCollection و Nodelist في الإصدار القديم من IE ليست فئات فرعية للكائن ، ولا يمكن استخدام طريقة [] .slice.call.
لذلك يمكننا تجاوز طريقة شريحة.
نسخة الكود كما يلي:
A.Slice = window.dispatchevent؟ الدالة (العقد ، البدء ، النهاية) {return [] .slice.call (العقد ، البدء ، النهاية) ؛ }
// إذا كانت النافذة تحتوي على خاصية الإرسال ، فإنها تثبت أنها تدعم طريقة [] .slice.call والكشف عن القدرة.
: وظيفة (العقد ، ابدأ ، نهاية) {
var ret = [] ، n = nodes.length ؛
if (end == undefined || typeof end === "number" && isfinite (end)) {// && priority أعلى من ||
ابدأ = parseint (ابدأ ، 10) || 0 ؛ // إذا لم تكن البداية موجودة أو لم تكن رقمًا ، فسيتم تعيين القيمة إلى 0.
نهاية = نهاية == غير محددة؟ N: Parseint (End ، 10) ؛ // إذا لم يكن هناك نهاية ، فإن القيمة هي n.
إذا (ابدأ <0) ابدأ + = n ؛
إذا (النهاية <0) end + = n ؛
if (end> n) end = n ؛
لـ (var i = start ؛ i <end ؛ i ++) {
ret [i-start] = العقد [i] ؛ // إصدار منخفض IE يستخدم نموذج تعيين المصفوفة
}
}
العودة
}
4. اكتب الحكم :
هناك خمسة أنواع بيانات بسيطة من JS: NULL ، غير محددة ، منطقية ، رقم ، سلسلة.
هناك أيضًا أنواع بيانات معقدة: الكائن ، الوظيفة ، regexp ، التاريخ ، الكائنات المخصصة ، مثل: الشخص ، إلخ.
يتم استخدام Typeof بشكل عام للحكم على منطقية ، والرقم ، والسلسلة ، والمثلين ، يتم استخدامه بشكل عام للحكم على أنواع الكائنات. لكن لديهم جميع العيوب. على سبيل المثال: لم يكن مثيل المصفوفة في Fireme مثيلًا للمصفوفة في النافذة الأصل ، وسيعود استدعاء مثيل OF False. (تم طرح هذا السؤال خلال توظيف 360 في الحرم الجامعي). Typeof New Boolean (True) // "Object" ، لف الكائن. منطقية ، والرقم ، والسلسلة هي ثلاثة أنواع من كائنات التغليف ، والتي تمت مناقشتها في برمجة برنامج JS المتقدمة.
يستخدم الكثير من الناس مستند typeof. كل ذلك لتحديد ما إذا كان IE. في الواقع ، هذا أمر خطير للغاية. نظرًا لأن Google و Firefox مثل هذه الخاصية ، يحدث هذا الموقف في ظل Google Chrome: Typeof document.all // غير محدد ، ومع ذلك ، المستند.
ولكن يمكنك الآن استخدام MONORD.Prototype.ToString.Call لتحديد النوع. يمكن لهذه الطريقة إخراج مباشرة [[class]] داخل الكائن. ومع ذلك ، لا يمكن أن تستخدم كائنات النوافذ IE8 وأسفل هذه الطريقة. يمكنك استخدام Window == document // true document == window // false ie6،7،8.
nodetype (1: العنصر 2: السمة 3: النص النص 9: المستند)
طرق للحكم على أنواع jQuery:
نسخة الكود كما يلي:
class2type = {}
jquery.each ("رقم سلسلة وظيفة سلسلة الأرقام المنطقية REGEXP كائن.
class2type ["[object" + name + "]] = name.toLowerCase () ؛
// class2type = {"[object boolean]": boolean ، "[number compion]": number ، "[Object string]": string ، "[Object function]": function ، "
}) ؛
jquery.type = function (obj) {// إذا كان OBJ فارغًا ، غير محدد ، وما إلى ذلك ، السلسلة "null" ، "undefined". إذا لم يكن الأمر كذلك ، فاتصل بطريقة toString ، احكم إذا كان يمكن استدعاؤها ، وإذا كان ذلك ممكنًا ، فأرجع الكائن (Window و DOM وغيرها من الكائنات ActiveXobject في الإصدار السفلي من IE)
إرجاع OBJ == NULL؟ سلسلة (OBJ): class2type [tostring.call (obj)] || "هدف"؛
}
5.domReady
عند تشغيل عقدة DOM بواسطة JS ، يجب على الصفحة إنشاء شجرة DOM. لذلك ، عادة ما تستخدم طريقة النافذة. ومع ذلك ، لن يتم تنفيذ طريقة ONLOAD بعد تحميل جميع الموارد. من أجل جعل الصفحة تستجيب لعمليات المستخدم بشكل أسرع ، نحتاج فقط إلى استخدام عمليات JS بعد إنشاء شجرة DOM. بدلاً من انتظار تحميل جميع الموارد (صورة ، فلاش).
لذلك ، يحدث حدث DomContentloaded ، والذي يتم تشغيله بعد بناء شجرة DOM. ومع ذلك ، فإن النسخة القديمة من IE لا تدعمه ، لذلك هناك اختراق.
نسخة الكود كما يلي:
if (document.readyState === "اكتمال") {// في حالة تحميل ملف JS فقط بعد تحميل مستند DOM. في هذا الوقت ، يتم تنفيذ طريقة FN (الطريقة التي تريد تنفيذها) من خلال هذا الحكم. لأنه بعد تحميل المستند ، اكتملت قيمة المستند. READERSTATE
setTimeout (fn) ؛ // تنفيذ بشكل غير متزامن ، دع الرمز وراءه يتم تنفيذه أولاً. هذا هو الاستخدام في jQuery ، لست بحاجة إلى فهمه.
}
آخر if (document.addeventListener) {// دعم الحدث DomContentLoaded
document.adDeventListener ("domcontentloaded" ، fn ، false) ؛ // فقاعات
window.adDeventListener ("load" ، fn ، false) ؛ // في حالة تحميل ملف JS بعد تصميم شجرة DOM. هذه المرة ، لن يتم تشغيل حدث DomContentLoaded (تم الانتهاء من المشغل) ، وسيؤدي فقط إلى تشغيل حدث الحمل
}
آخر{
document.attachevent ("onReadyStateChange" ، Function () {// لأمن iframes بموجب IE ، سيتم إعطاء أولوية تنفيذ Onload ، وأحيانًا لا.
if (document.readyState === "كاملة") {
fn () ؛
}
}) ؛
window.attachevent ("onload" ، fn) ؛ // ستلعب دائمًا دورًا في حالة عدم استرداد أحداث الاستماع الأخرى ، لذلك على الأقل يمكن تشغيل طريقة FN بواسطة حدث Onload.
var top = false ؛ // معرفة ما إذا كان في iframe
جرب {// window.frameElement هو كائن iframe أو الإطار يحتوي على هذه الصفحة. إذا لم يكن كذلك ، فهو لاغ.
TOP = Window.frameElement == null && document.documentElement ؛
} catch (e) {}
إذا (TOP && TOP.DOSCROLL) {// إذا لم يكن هناك iframe ، وهو IE
(وظيفة doscrollcheck () {
يحاول{
Top.Doscroll ("Left") ؛ // في IE ، إذا تم تصميم شجرة DOM ، يمكنك الاتصال بالطريقة doscroll لـ HTML
} catch (e) {
Return SetTimeOut (Doscrollcheck ، 50) ؛ // إذا لم يتم بناؤه بعد ، فاستمر في الاستماع
}
fn () ؛
})
}
}
يجب أن تحتوي طريقة FN على إزالة جميع أحداث الربط.
بالطبع ، يمكن أن تستخدم IE أيضًا مؤلف البرامج النصية. المبدأ هو: سيتم تنفيذ البرنامج النصي المحدد بواسطة تأجيل فقط بعد بناء شجرة DOM. ومع ذلك ، يتطلب هذا إضافة ملفات JS إضافية ونادراً ما يتم استخدامها في مكتبات منفصلة.
مبدأ الاستخدام: أضف علامات البرنامج النصي إلى المستند واستخدم script.src = "xxx.js" للاستماع إلى حدث onReadyStateChange من البرنامج النصي. عندما يكون هذا. readyState == "كامل" ، يتم تنفيذ طريقة FN.
بمعنى آخر ، فقط بعد أن يتم بناء DOM ، سيتم تنفيذ xxx.js ، وسيصبح هذا.
ما ورد أعلاه هي ملاحظات القراءة للفصل الأول من تصميم إطار JavaScript. المحتوى بسيط نسبيًا ، مما يسهل على الجميع فهم المحتوى الأساسي لهذا الفصل بشكل أفضل.