1. เนมสเปซ :
เนมสเปซใน JS ถูกขยายโดยใช้คุณสมบัติของวัตถุ ตัวอย่างเช่นผู้ใช้กำหนดวัตถุ A ที่มีแอตทริบิวต์ B และแอตทริบิวต์ C ภายใต้วัตถุ A และแอตทริบิวต์ B และแอตทริบิวต์ C เป็นวัตถุ ดังนั้น a = {b: {}, c: {}} ดังนั้นผู้ใช้สามารถกำหนดวิธีการเดียวกันและแอตทริบิวต์ในวัตถุ B และวัตถุ C ดังนั้น B และ C จึงอยู่ในเนมสเปซที่แตกต่างกัน เมื่อเราเรียกวิธีการในวัตถุ B และ C เราสามารถเรียกพวกเขาผ่าน Ablike () และ aclike () แน่นอน A เป็นคุณสมบัติในวัตถุหน้าต่าง
แต่มีสถานการณ์ตัวอย่างเช่น: หน้า 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] == "บูลีน"? args.pop (): จริง; // ไม่ได้เขียนค่าเริ่มต้นเป็นจริงค่าเริ่มต้นถูกแทนที่
if (args.length == 1) {
target =! this.window? นี้:{};
// หากมีพารามิเตอร์วัตถุเดียวให้ขยายวัตถุนี้ ตัวอย่างเช่น: ฉันเรียกผสม (b) ในบริบทของวัตถุ A ดังนั้นนี่คือในเวลานี้ดังนั้นคุณสมบัติและวิธีการของ B จะถูกเพิ่มลงในวัตถุ A. อย่างไรก็ตามหากเรียกใช้ (B) ในหน้าต่างคุณสมบัติและวิธีการในวัตถุ B จะถูกเพิ่มลงในวัตถุว่าง (วัตถุหน้าต่างเท่านั้นที่มีคุณสมบัติหน้าต่าง)
i = 0;
-
ในขณะที่ ((source = args [i ++])) {
สำหรับ (คีย์ในแหล่งที่มา) {
if (iScover ||! (คีย์ในเป้าหมาย)) // ถ้าเขียนทับให้กำหนดค่าโดยตรง หากไม่ได้เขียนทับก่อนอื่นให้พิจารณาว่าคีย์มีอยู่ในวัตถุเป้าหมายหรือไม่ หากมีอยู่จะไม่มีการกำหนดค่า
-
เป้าหมาย [คีย์] = แหล่งที่มา [คีย์];
-
-
-
เป้าหมายกลับ;
-
ผู้สัมภาษณ์จาก บริษัท ขนาดใหญ่ต้องการตรวจสอบอาร์เรย์ คุณสามารถตรวจสอบได้ แต่ละรายการในอาร์เรย์สามารถเป็นวัตถุและแม้ว่าวัตถุ A และวัตถุ B มีคุณสมบัติและวิธีการเดียวกันพวกเขาจะไม่เท่ากัน สตริงและตัวเลขเช่น 123 และ "123" สามารถพบได้อย่างสมบูรณ์โดยการค้นหาออนไลน์
3.Arrayization :
มีวัตถุอาร์เรย์คลาสมากมายในเบราว์เซอร์, อาร์กิวเมนต์, document.forms, document.links, form.elements, document.getElementsByTagname, ChildNodes ฯลฯ (HTMLCOLLECTION, Nodelist)
นอกจากนี้ยังมีวัตถุที่กำหนดเองที่มีสไตล์การเขียนพิเศษ
การคัดลอกรหัสมีดังนี้:
var arraylike = {
0: "A",
1: "B",
ความยาว: 2
-
วัตถุนี้เขียนเป็นวัตถุ jQuery
เราจำเป็นต้องแปลงวัตถุอาร์เรย์คลาสที่กล่าวถึงข้างต้นเป็นวัตถุอาร์เรย์
[] .Slice.Call Method สามารถแก้ไขได้ อย่างไรก็ตาม HTMLCOLLECTION และ NODELIST ในเวอร์ชันเก่าของ IE ไม่ใช่คลาสย่อยของวัตถุและไม่สามารถใช้วิธีการเรียกได้
ดังนั้นเราจึงสามารถแทนที่วิธีการชิ้น
การคัดลอกรหัสมีดังนี้:
A.Slice = Window.DispatcheVent? ฟังก์ชั่น (โหนด, เริ่ม, สิ้นสุด) {return [] .slice.call (โหนด, เริ่ม, สิ้นสุด); -
// หากหน้าต่างมีคุณสมบัติ DispatcheDevent มันจะพิสูจน์ได้ว่ามันรองรับ [] .Slice.Call วิธีการและการตรวจจับความสามารถ
: ฟังก์ชั่น (โหนด, เริ่ม, สิ้นสุด) {
var ret = [], n = nodes.length;
if (end == undefined || typeof end === "number" && isfinite (end)) {// && ลำดับความสำคัญสูงกว่า || ดังนั้นสิ้นสุดไม่ได้เขียนหรือสิ้นสุดเป็นจำนวน จำกัด และป้อน
start = parseInt (เริ่ม, 10) || 0; // หากไม่มีการเริ่มต้นหรือไม่ใช่ตัวเลขดังนั้นค่าจะถูกกำหนดเป็น 0
end = end == ไม่ได้กำหนด? N: Parseint (สิ้นสุด, 10); // หากไม่มีส่วนปลายค่าคือ n
ถ้า (เริ่ม <0) เริ่ม + = n;
ถ้า (สิ้นสุด <0) สิ้นสุด + = n;
ถ้า (สิ้นสุด> n) สิ้นสุด = n;
สำหรับ (var i = start; i <end; i ++) {
ret [i-start] = โหนด [i]; // รุ่นต่ำเช่นใช้แบบฟอร์มการกำหนดอาร์เรย์
-
-
ผลตอบแทนผลตอบแทน;
-
4. พิมพ์คำพิพากษา :
มีข้อมูลง่ายๆห้าประเภทของ JS: NULL, ไม่ได้กำหนด, บูลีน, หมายเลข, สตริง
นอกจากนี้ยังมีประเภทข้อมูลที่ซับซ้อน: วัตถุ, ฟังก์ชั่น, regexp, วันที่, วัตถุที่กำหนดเองเช่น: บุคคล ฯลฯ
โดยทั่วไปแล้ว Typeof จะใช้เพื่อตัดสินบูลีนจำนวน, สตริง, อินสแตนซ์โดยทั่วไปใช้เพื่อตัดสินประเภทวัตถุ แต่พวกเขาทั้งหมดมีข้อบกพร่อง ตัวอย่างเช่น: อินสแตนซ์อาร์เรย์ใน FIREME ไม่ใช่อินสแตนซ์ของอาร์เรย์ในหน้าต่างพาเรนต์การเรียกอินสแตนซ์ของการเรียกคืนจะส่งคืนเท็จ (คำถามนี้ถูกถามในระหว่างการรับสมัครวิทยาเขต 360 แห่ง) typeof บูลีนใหม่ (จริง) // "วัตถุ" ห่อวัตถุ บูลีนตัวเลขและสตริงเป็นวัตถุบรรจุภัณฑ์สามประเภทซึ่งกล่าวถึงในการเขียนโปรแกรมโปรแกรมขั้นสูง JS
หลายคนใช้เอกสาร typeof ทั้งหมดเพื่อตรวจสอบว่าเป็นเช่นนั้นหรือไม่ อันที่จริงแล้วมันอันตรายมาก เนื่องจาก Google และ Firefox ยังชอบคุณสมบัตินี้สถานการณ์นี้เกิดขึ้นภายใต้ Google Chrome: typeof document.all // undefined อย่างไรก็ตาม document.all // htmlallcollection โดยใช้ typeof เพื่อกำหนดว่าไม่ได้กำหนด แต่ค่าคุณสมบัตินี้สามารถอ่านได้
แต่ตอนนี้คุณสามารถใช้ Object.prototype.toString.Call Method เพื่อกำหนดประเภท วิธีนี้สามารถส่งออกโดยตรง [[คลาส]] ภายในวัตถุ อย่างไรก็ตามวัตถุหน้าต่าง IE8 และด้านล่างไม่สามารถใช้วิธีนี้ได้ คุณสามารถใช้ window == เอกสาร // true document == window // false ie6,7,8
nodeType (1: องค์ประกอบ 2: แอตทริบิวต์ 3: ข้อความข้อความ 9: เอกสาร)
วิธีการตัดสินประเภทใน jQuery:
การคัดลอกรหัสมีดังนี้:
class2Type = {}
jQuery.each ("สตริงหมายเลขบูลีนฟังก์ชั่นอาร์เรย์วันที่ regexp วัตถุ" .split (""), ฟังก์ชั่น (i, ชื่อ) {
class2Type ["[object" + name + "]"] = name.toLowerCase ();
// class2Type = {"[วัตถุบูลีน]": บูลีน, "[หมายเลขวัตถุ]": หมายเลข, "[สตริงวัตถุ]": สตริง, "[ฟังก์ชันวัตถุ]": ฟังก์ชั่น, "[อาร์เรย์วัตถุ]": อาร์เรย์ ...... }
-
jQuery.type = ฟังก์ชั่น (obj) {// ถ้า obj เป็นโมฆะไม่ได้กำหนด ฯลฯ สตริง "null", "undefined" ถ้าไม่เรียกใช้วิธีการ ToString ให้ตัดสินว่าสามารถเรียกได้หรือไม่และถ้าเป็นไปได้ให้ส่งคืนวัตถุ (หน้าต่าง, DOM และวัตถุ ActiveXObject อื่น ๆ ในเวอร์ชันล่างของ IE)
ส่งคืน obj == null? String (OBJ): Class2Type [TOSTRING.CALL (OBJ)] || "วัตถุ";
-
5. DOMDREAKY
เมื่อใช้งานโหนด DOM โดย JS หน้าจะต้องสร้างแผนผัง DOM ดังนั้นจึงใช้วิธี window.onload อย่างไรก็ตามวิธี ONLOAD จะไม่ถูกดำเนินการหลังจากโหลดทรัพยากรทั้งหมด เพื่อให้หน้าเว็บตอบสนองต่อการดำเนินการของผู้ใช้ได้เร็วขึ้นเราจำเป็นต้องใช้การดำเนินการ JS หลังจากสร้างแผนผัง DOM แทนที่จะรอให้มีการโหลดทรัพยากรทั้งหมด (ภาพ, แฟลช)
ดังนั้นเหตุการณ์ domcontentloaded จึงเกิดขึ้นซึ่งจะถูกกระตุ้นหลังจากสร้างทรี DOM อย่างไรก็ตามเวอร์ชันเก่าของ IE ไม่รองรับดังนั้นจึงมีแฮ็ค
การคัดลอกรหัสมีดังนี้:
if (document.readyState === "เสร็จสมบูรณ์") {// ในกรณีที่ไฟล์ JS ถูกโหลดหลังจากโหลดเอกสาร DOM เท่านั้น ในเวลานี้วิธี FN (วิธีที่คุณต้องการดำเนินการ) จะดำเนินการผ่านการตัดสินนี้ เนื่องจากหลังจากโหลดเอกสารแล้วค่าของ document.readystate เสร็จสมบูรณ์
Settimeout (FN); // ดำเนินการแบบอะซิงโครนัสให้รหัสที่อยู่เบื้องหลังมันถูกเรียกใช้ก่อน นี่คือการใช้งานใน jQuery คุณไม่จำเป็นต้องเข้าใจ
-
อื่นถ้า (document.addeventListener) {// สนับสนุนเหตุการณ์ domcontentloaded
document.addeventListener ("Domcontentloaded", fn, false); // ฟอง
window.addeventListener ("โหลด", 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) {}
if (top && top.doscroll) {// ถ้าไม่มี iframe และมันคือ IE
(ฟังก์ชั่น doscrollcheck () {
พยายาม{
top.doscroll ("ซ้าย"); // ใน IE หากสร้างต้นไม้ DOM คุณสามารถเรียกวิธี Doscroll ของ HTML
} catch (e) {
ส่งคืน SetTimeOut (DoscrollCheck, 50); // ถ้ายังไม่ได้สร้าง
-
fn ();
-
-
-
วิธี FN จะต้องมีการลบเหตุการณ์ที่มีผลผูกพันทั้งหมด
แน่นอนคือสามารถใช้การแฮ็กสคริปต์เลื่อนเวลาได้ หลักการคือ: สคริปต์ที่ระบุโดยการเลื่อนเวลาจะถูกดำเนินการเฉพาะหลังจากสร้างต้นไม้ DOM อย่างไรก็ตามสิ่งนี้ต้องการการเพิ่มไฟล์ JS เพิ่มเติมและไม่ค่อยใช้ในไลบรารีแยกต่างหาก
หลักการของการใช้งาน: เพิ่มแท็กสคริปต์ลงในเอกสารและใช้ script.src = "xxx.js" เพื่อฟังเหตุการณ์ onreadystatechange ของสคริปต์ เมื่อ this.readyState == "เสร็จสมบูรณ์" วิธีการ FN จะถูกดำเนินการ
กล่าวอีกนัยหนึ่งหลังจากที่ DOM ถูกสร้างขึ้นจะดำเนินการ xxx.js และสิ่งนี้ ReadyState จะเสร็จสมบูรณ์
ข้างต้นคือบันทึกการอ่านสำหรับบทแรกของการออกแบบกรอบ JavaScript เนื้อหาค่อนข้างง่ายซึ่งทำให้ทุกคนเข้าใจเนื้อหาพื้นฐานของบทนี้ได้ง่ายขึ้น