แนะนำ
บทความนี้ส่วนใหญ่แนะนำรูปแบบของการสร้างวัตถุ การใช้เทคนิคต่าง ๆ สามารถหลีกเลี่ยงข้อผิดพลาดหรือเขียนโค้ดที่มีความคล่องตัวมาก
รูปแบบที่ 1: เนมสเปซ
เนมสเปซสามารถลดจำนวนการตั้งชื่อทั่วโลกที่จำเป็นเพื่อหลีกเลี่ยงการตั้งชื่อความขัดแย้งหรือความมากเกินไป โดยทั่วไปเมื่อเรากำหนดระดับวัตถุมันมักจะมีลักษณะเช่นนี้:
การคัดลอกรหัสมีดังนี้:
VAR APP = APP || -
app.modulea = app.modulea || -
app.modulea.submodule = app.modulea.submodule || -
app.modulea.submodule.methoda = function () {
console.log ("พิมพ์");
-
app.modulea.submodule.methodb = function () {
console.log ("พิมพ์ b");
-
หากมีหลายระดับเราต้องดำเนินการต่อไปเช่นนี้ซึ่งทำให้สับสนมาก รูปแบบเนมสเปซมีอยู่เพื่อแก้ปัญหานี้ มาดูรหัส:
การคัดลอกรหัสมีดังนี้:
// ไม่ปลอดภัยมันอาจเขียนทับวัตถุ MyApp ที่มีอยู่
var myapp = {};
// ดี
if (typeof myapp === "undefined") {
var myapp = {};
-
// วิธีที่ง่ายกว่า
var myApp = myApp || -
// กำหนดวิธีการทั่วไป
myApp.namespace = function (ns_string) {
var parts = ns_string.split ('.')
ผู้ปกครอง = myApp
ฉัน;
// โดยค่าเริ่มต้นหากโหนดแรกคือ MyApp จะถูกละเว้นเช่น MyApp.modulea
if (ส่วน [0] === "myApp") {
ชิ้นส่วน = parts.slice (1);
-
สำหรับ (i = 0; i <parts.length; i += 1) {
// หากไม่มีคุณสมบัติให้สร้าง
if (typeof parent [ส่วน [i]] === "undefined") {
ผู้ปกครอง [ส่วน [i]] = {};
-
ผู้ปกครอง = ผู้ปกครอง [ส่วน [i]];
-
ผู้ปกครองกลับ;
-
การโทรรหัสนั้นง่ายมาก:
การคัดลอกรหัสมีดังนี้:
// หลังเนมสเปซค่าส่งคืนสามารถกำหนดให้กับตัวแปรโลคัลได้
var module2 = myapp.namespace ('myapp.modules.module2');
console.log (module2 === myapp.modules.module2); // จริง
// ข้าม MyApp
myApp.namespace ('modules.module51');
// ชื่อยาวมาก
myapp.namespace ('ครั้งเดียว upon.a.time.there.was.this.long.nested.property');
รูปแบบที่ 2: กำหนดการพึ่งพา
บางครั้งโมดูลหรือฟังก์ชั่นอาจอ้างถึงโมดูลหรือเครื่องมือของบุคคลที่สาม เป็นการดีที่สุดที่จะกำหนดโมดูลที่ขึ้นอยู่กับเหล่านี้ในตอนแรกเพื่อให้สามารถแทนที่ได้อย่างง่ายดายในอนาคต
การคัดลอกรหัสมีดังนี้:
var myfunction = function () {
// ขึ้นอยู่กับโมดูล
var event = yahoo.util.event
dom = yahoo.util.dom;
// เหตุการณ์ตัวแปรท้องถิ่นและ DOM ถูกใช้ในรหัสหลังจากฟังก์ชั่นอื่น ๆ
-
รูปแบบที่ 3: คุณสมบัติส่วนตัวและวิธีการส่วนตัว
JavaScript ไม่ได้ให้ไวยากรณ์เฉพาะเพื่อสนับสนุนคุณสมบัติส่วนตัวและวิธีการส่วนตัว แต่เราสามารถนำไปใช้ผ่านการปิดรหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
Function Gadget () {
// วัตถุส่วนตัว
ชื่อ var = 'iPod';
// ฟังก์ชั่นสาธารณะ
this.getName = function () {
ชื่อคืน;
-
-
var toy = new gadget ();
// ชื่อไม่ได้กำหนดและเป็นส่วนตัว
console.log (toy.name); // ไม่ได้กำหนด
// ชื่อการเข้าถึงวิธีการสาธารณะ
console.log (toy.getName ()); // "iPod"
var myobj; // กำหนดค่าให้กับ MyOBJ ผ่านฟังก์ชั่นการดำเนินการด้วยตนเอง
(การทำงาน () {
// วัตถุฟรี
var name = "my, oh my";
// ใช้ส่วนสาธารณะดังนั้นจึงไม่มี VAR
myobj = {
// วิธีการอนุญาต
getName: function () {
ชื่อคืน;
-
-
-
โหมด 4: โหมดการเปิดเผย
นอกจากนี้ยังเกี่ยวกับการซ่อนวิธีการส่วนตัวซึ่งค่อนข้างคล้ายกับรูปแบบโมดูลใน "ความเข้าใจเชิงลึกของชุด JavaScript (3): การวิเคราะห์ที่ครอบคลุมของรูปแบบโมดูล" แต่ไม่ใช่วิธีการส่งคืน แต่ตัวแปรถูกประกาศภายนอกแล้วกำหนดวิธีการสาธารณะให้กับตัวแปรภายใน รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var myarray;
(การทำงาน () {
var astr = "[อาร์เรย์วัตถุ]"
toString = object.prototype.toString;
ฟังก์ชั่น isarray (a) {
return toString.call (a) === Astr;
-
ฟังก์ชั่นดัชนีของ (Haystack, เข็ม) {
var i = 0,
สูงสุด = Haystack.length;
สำหรับ (; i <max; i += 1) {
ถ้า (Haystack [i] === เข็ม) {
กลับฉัน;
-
-
กลับ -1;
-
// ผ่านการมอบหมายรายละเอียดทั้งหมดข้างต้นจะถูกซ่อนไว้
myArray = {
Isarray: Isarray,
ดัชนีของ: ดัชนีของ
Inarray: ดัชนีของ
-
-
// รหัสทดสอบ
console.log (myarray.isarray ([1, 2])); // จริง
console.log (myarray.isarray ({0: 1})); // เท็จ
console.log (myarray.indexof (["a", "b", "z"], "z")); // 2
console.log (myarray.inarray (["a", "b", "z"], "z")); // 2
myarray.indexof = null;
console.log (myarray.inarray (["a", "b", "z"], "z")); // 2
โหมด 5: โหมดลูกโซ่
โหมดโซ่ช่วยให้คุณเรียกวิธีการวัตถุอย่างต่อเนื่องเช่น obj.add (1). remove (2) .delete (4) .Add (2) แนวคิดการใช้งานนั้นง่ายมากซึ่งก็คือการส่งคืนสิ่งนี้ตามที่เป็นอยู่ รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var obj = {
ค่า: 1,
เพิ่มขึ้น: function () {
this.value += 1;
คืนสิ่งนี้;
-
เพิ่ม: ฟังก์ชั่น (v) {
this.value += v;
คืนสิ่งนี้;
-
ตะโกน: ฟังก์ชั่น () {
console.log (this.value);
-
-
// การโทรวิธีลูกโซ่
obj.increment (). เพิ่ม (3) .shout (); // 5
// สามารถเรียกได้ทีละคน
obj.increment ();
obj.add (3);
obj.shout ();
สรุป
บทความนี้เป็นบทความก่อนหน้าของโหมดการสร้างวัตถุดังนั้นคอยติดตามบทความถัดไปในวันพรุ่งนี้