แนวคิด
โหมดลักษณะที่ปรากฏ (โหมดซุ้ม) เป็นโหมดที่ค่อนข้างง่ายและแพร่หลาย โหมดปรากฏตัวมีอินเทอร์เฟซระดับสูงซึ่งทำให้ง่ายต่อการโทรหาไคลเอนต์หรือระบบย่อย
โหมดปรากฏตัวไม่ใช่โหมดอะแดปเตอร์โหมดอะแดปเตอร์เป็นเครื่องห่อหุ้มเพื่อปรับอินเทอร์เฟซเพื่อใช้ในระบบที่เข้ากันไม่ได้ การสร้างองค์ประกอบลักษณะที่ปรากฏเป็นความสะดวกสบาย มันไม่ได้ใช้เพื่อจัดการกับระบบลูกค้าที่ต้องใช้อินเทอร์เฟซเฉพาะ แต่เพื่อให้อินเทอร์เฟซที่ง่ายขึ้น
ตัวอย่างรหัส JavaScript
ใช้รหัสชิ้นง่ายเพื่อแสดง
var getName = function () {return '' svenzeng "} var getsex = function () {return 'man'}หากคุณต้องการเรียกฟังก์ชั่น getName และ getSex ตามลำดับคุณสามารถใช้อินเทอร์เฟซระดับสูงกว่า getUserInfo เพื่อเรียกมัน
var getUserInfo = function () {var info = a () + b (); ข้อมูลส่งคืน;}บางทีคุณอาจจะถามว่าทำไมคุณไม่ได้เขียนรหัส getName และ getSex ด้วยกันในตอนแรกเช่น
var getNameandSex = function () {return 'svenzeng " +" man ";}คำตอบนั้นชัดเจน พ่อครัวทำอาหารของโรงอาหารจะไม่ผัดอาหารสองจานนี้ในหม้อเดียวกันเพียงเพราะคุณจองเป็ดย่างและกะหล่ำปลี เขาอยากให้คุณมีข้าวเป็ดย่าง นอกจากนี้ในการเขียนโปรแกรมเราต้องตรวจสอบให้แน่ใจว่าฟังก์ชั่นหรือวัตถุนั้นมีความละเอียดที่สมเหตุสมผลที่สุดเท่าที่จะทำได้ ท้ายที่สุดทุกคนไม่ชอบกินเป็ดย่างและชอบกินกะหล่ำปลี
ข้อดีอีกอย่างของโหมดลักษณะที่ปรากฏคือสามารถซ่อนรายละเอียดการใช้งานจริงจากผู้ใช้และผู้ใช้สนใจเฉพาะอินเทอร์เฟซระดับสูงสุด ตัวอย่างเช่นในเรื่องราวของอาหารชุดข้าวเป็ดย่างคุณไม่สนใจว่าอาจารย์จะทำเป็ดย่างก่อนหรือผัดกะหล่ำปลีก่อนและคุณไม่สนใจว่าเป็ดเติบโตขึ้นมาที่ไหน
ในที่สุดฉันก็เขียนตัวอย่างของรูปแบบลักษณะที่เราเคยใช้
var stopEvent = function (e) {// block เหตุการณ์เริ่มต้นพฤติกรรมและฟองอากาศในเวลาเดียวกัน e.stoppropagation (); E.preventDefault ();}ฉันรู้ว่าแนวคิดของรูปแบบรูปลักษณ์นั้นง่ายต่อการควบคุมและคุณอาจไม่จำเป็นต้องมีตัวอย่างของรหัส JavaScript แต่บางคนมักจะใส่ใจเกี่ยวกับรหัสมากขึ้นและจะคิดว่ามันจะเข้าใจได้ง่ายขึ้น ยิ่งไปกว่านั้นบทความ JavaScript ที่ไม่มีตัวอย่างรหัสไม่น่าเชื่อถือเลยดังนั้นพวกเขาจึงควรถูกลบออกจากอินเทอร์เน็ต เริ่มต้นด้วยตัวอย่างง่ายๆของผู้ฟังเหตุการณ์ ทุกคนรู้ว่าการเพิ่มผู้ฟังเหตุการณ์ไม่ใช่เรื่องง่ายเว้นแต่คุณจะต้องการให้รหัสทำงานบนเบราว์เซอร์สองสามตัว คุณต้องทดสอบหลายวิธีเพื่อให้แน่ใจว่ารหัสสำหรับเบราว์เซอร์ที่แตกต่างกันทำงานอย่างถูกต้อง ในตัวอย่างรหัสนี้เราเพิ่งเพิ่มการตรวจจับคุณลักษณะลงในวิธีนี้:
ฟังก์ชั่น addevent (องค์ประกอบ, ประเภท, func) {ถ้า (window.addeventListener) {element.addeventListener (type, func, false); } อื่นถ้า (window.attachevent) {element.attachevent ('on'+type, func); } else {element ['on'+type] = func; -มันง่าย! ฉันหวังว่าฉันจะไม่สามารถเขียนรหัสที่ไม่จำเป็นได้ทำให้ง่ายขึ้น แต่ถ้าเป็นเช่นนั้นมันจะไร้ความหมายและคุณไม่ต้องการอ่านใช่ไหม? ดังนั้นฉันไม่คิดอย่างนั้นฉันคิดว่าฉันต้องการแสดงให้คุณเห็นสิ่งที่ซับซ้อนกว่านี้ ฉันแค่อยากจะบอกว่ารหัสของคุณจะเป็นแบบนี้:
var foo = document.getElementById ('foo'); foo.style.color = 'สีแดง'; foo.style.width = '150px'; var bar = document.getElementById ('bar'); bar.style.color = 'สีแดง'; bar.style.width = '150px'; var baz = document.getElementById ('baz'); baz.style.color = 'สีแดง'; baz.style.width = '150px'; var baz = document.getElementById ('baz'); baz.style.color = 'สีแดง'; baz.style.width = '150px';ง่อยเกินไป! คุณทำสิ่งเดียวกันสำหรับแต่ละองค์ประกอบ! ฉันคิดว่าเราสามารถทำให้ง่ายขึ้นเล็กน้อย:
ฟังก์ชั่น setStyle (องค์ประกอบ, คุณสมบัติ, ค่า) {สำหรับ (var i = 0, length = elements.length; i <length; i ++) {document.getElementById (องค์ประกอบ [i]). สไตล์ [คุณสมบัติ] = ค่า; }} // ตอนนี้คุณสามารถเขียนด้วยวิธีนี้: setStyle (['foo', 'bar', 'baz'], 'color', 'สีแดง'); setStyle (['foo', 'bar', 'baz'], 'width', '150px');คุณคิดว่า NB ของเราเสียหรือไม่? คุณลืมมัน! เราคือโปรแกรมเมอร์ JavaScript! คุณสามารถใช้สมองเพื่อรับของจริงได้หรือไม่? บางทีเราสามารถตั้งค่าสไตล์ทั้งหมดได้เพียงครั้งเดียว ตรวจสอบสิ่งนี้:
ฟังก์ชั่น setStyles (องค์ประกอบ, สไตล์) {สำหรับ (var i = 0, length = elements.length; i <length; i ++) {var element = document.getElementById (องค์ประกอบ [i]); สำหรับ (คุณสมบัติ var ในสไตล์) {element.style [คุณสมบัติ] = สไตล์ [คุณสมบัติ]; }}} // ตอนนี้คุณเพียงแค่ต้องเขียนด้วยวิธีนี้: setStyles (['foo', 'bar', 'baz'], {color: 'สีแดง', ความกว้าง: '150px'});หากเรามีองค์ประกอบหลายอย่างที่ต้องการตั้งค่าสไตล์เดียวกันรหัสนี้จะช่วยเราประหยัดเวลาได้มาก
ข้อดีของโหมดปรากฏตัว:
จุดประสงค์ของการใช้โหมดลักษณะที่ปรากฏคือทำให้โปรแกรมเมอร์เขียนโค้ดคอมโบง่ายขึ้นหนึ่งครั้งแล้วใช้ซ้ำ ๆ ซึ่งช่วยประหยัดเวลาและความพยายาม จัดเตรียมอินเทอร์เฟซที่ง่ายขึ้นสำหรับปัญหาที่ซับซ้อน
วิธีการปรากฏตัวสะดวกสำหรับนักพัฒนา Bin ได้ให้ฟังก์ชั่นที่ค่อนข้างสูงลดการพึ่งพารหัสภายนอกและเพิ่มความยืดหยุ่นเพิ่มเติมให้กับการพัฒนาระบบแอปพลิเคชัน โดยการใช้โหมดลักษณะที่ปรากฏขึ้นอย่างแน่นหนากับระบบย่อยพื้นฐานสามารถหลีกเลี่ยงได้ ด้วยวิธีนี้ระบบสามารถแก้ไขได้โดยไม่ส่งผลกระทบต่อรหัสไคลเอนต์
ข้อเสียของโหมดปรากฏตัว:
บางครั้งองค์ประกอบที่ปรากฏยังสามารถนำภาระพิเศษที่ไม่จำเป็น ก่อนที่จะดำเนินการตามกิจวัตรบางอย่างคุณควรพิจารณาการปฏิบัติจริงอย่างรอบคอบ บางครั้งเมื่อเทียบกับฟังก์ชั่นลักษณะที่ซับซ้อนฟังก์ชั่นองค์ประกอบของมันน่าสนใจยิ่งขึ้นในแง่ของแรง นี่เป็นเพราะฟังก์ชั่นลักษณะที่ปรากฏอาจทำงานได้บ่อยครั้งที่คุณไม่ต้องการ
สำหรับเว็บไซต์ส่วนบุคคลที่เรียบง่ายหรือหน้าการตลาดจำนวนน้อยอาจไม่ควรนำเข้าไลบรารี JavaScript นี้สำหรับพฤติกรรมที่ได้รับการปรับปรุงเล็กน้อยเช่นคำแนะนำเครื่องมือและป๊อปอัป พิจารณาใช้องค์ประกอบลักษณะง่าย ๆ เพียงไม่กี่อย่างในเวลานี้แทนที่จะเป็นห้องสมุดที่เต็มไปด้วยสิ่งเหล่านี้
ฟังก์ชั่นลักษณะที่ปรากฏเป็นอินเทอร์เฟซอย่างง่ายสำหรับการทำงานที่ซับซ้อนต่าง ๆ ซึ่งทำให้รหัสง่ายต่อการบำรุงรักษาและเข้าใจ พวกเขายังสามารถลดการมีเพศสัมพันธ์ระหว่างระบบย่อยและรหัสลูกค้า รวมฟังก์ชั่นทั่วไปที่มักจะปรากฏพร้อมกัน โหมดนี้ใช้กันทั่วไปในการเขียนสคริปต์ DOM ซึ่งต้องใช้อินเตอร์เฟสเบราว์เซอร์ที่ไม่สอดคล้องกัน