ใช้ห้องสมุดเครื่องมือ jQuery UI ทำไม

เขียน jQuery ปลั๊กอินและ jQuery.prototype (มักจะแสดงเป็น $.fn ) เพิ่มวิธีที่ง่ายและต้องปฏิบัติตามกฎง่ายๆบางอย่างเช่นการกลับไปที่ this ดังนั้นทำไมจะปรากฏตัวของห้องสมุดส่วนประกอบ (โรงงาน Widget) หรือไม่?

ในส่วนนี้เราจะอธิบายถึงประโยชน์ของห้องสมุดส่วนประกอบ (โรงงาน Widget) และเรียนรู้เมื่อจะใช้มันและทำไมต้องใช้มัน

ไร้สัญชาติกับ Widget Stateful

ส่วนใหญ่ปลั๊กอิน jQuery จะไร้สัญชาติที่พวกเขาดำเนินการกระทำบางอย่างเพื่อให้งานของพวกเขา ตัวอย่างเช่นถ้าคุณใช้ .text( "hello" ) มีกำหนดองค์ประกอบเป็นข้อความที่มีขั้นตอนการติดตั้งไม่ได้ผลลัพธ์ที่เหมือนกัน สำหรับประเภทของปลั๊กอินนี้ก็แค่ขยายต้นแบบ jQuery

แต่บางปลั๊กอิน stateful พวกเขามีวัฏจักรชีวิตทั้งหมดเพื่อรักษาสถานะและการตอบสนองต่อการเปลี่ยนแปลง ปลั๊กอินเหล่านี้จำเป็นต้องมีมากรหัสเฉพาะในการเริ่มต้นและการจัดการของรัฐ (และบางครั้งก็ทำลาย) นี้นำไปสู่การเกิดขึ้นของปลั๊กอินสำหรับการสร้างแม่แบบ stateful ที่เลวร้ายยิ่งแต่ละผู้เขียนวิดเจ็ตในรูปแบบที่แตกต่างกันในการจัดการปลั๊กอินในวงจรชีวิตและรัฐซึ่งนำไปสู่การที่แตกต่างกันปลั๊กอินมีรูปแบบที่แตกต่างกัน API ห้องสมุดองค์ประกอบ (โรงงาน Widget) มีวัตถุประสงค์เพื่อแก้ไขปัญหาเหล่านี้มันจะเอาแม่แบบและสร้าง API ที่สอดคล้องกันสำหรับปลั๊กอิน

API ที่สอดคล้องกัน

ห้องสมุดองค์ประกอบ (โรงงาน Widget) กำหนดวิธีการสร้างและทำลายเครื่องมือและการตั้งค่าตัวเลือกวิธีการเรียกเช่นเดียวกับทริกเกอร์เหตุการณ์จอภาพวิดเจ็ต เพื่อสร้างปลั๊กอิน stateful โดยใช้เครื่องมือที่ห้องสมุด (โรงงาน Widget) โดยอัตโนมัติมีคุณสมบัติตรงตามความหมายของมาตรฐานที่ช่วยให้ผู้ใช้ใหม่ได้ง่ายขึ้นใช้ Plug-in ของคุณ นอกจากนี้ห้องสมุดวิดเจ็ต (Widget โรงงาน) ฟังก์ชั่นนี้ยังช่วยให้คำนิยามของอินเตอร์เฟซ หากคุณเป็นส่วนหนึ่งของ API ห้องสมุด (โรงงาน Widget) ที่ไม่คุ้นเคยกับการตรวจสอบ วิธีการใช้สมาชิกห้องสมุด (โรงงาน Widget)

ตั้งค่าตัวเลือกในการเริ่มต้น

เมื่อคุณสร้าง plug-in ตัวเลือกที่จะยอมรับคุณควรจะเป็นตัวเลือกมากมายกำหนดค่าเริ่มต้น จากนั้นในการเริ่มต้นเพื่อให้ผู้ใช้มีตัวเลือกในการควบรวมกับค่าเริ่มต้น นอกจากนี้คุณยังสามารถสัมผัสค่าเริ่มต้นเพื่อให้ผู้ใช้สามารถเปลี่ยนค่าเริ่มต้น ใน jQuery plug-in โหมดที่พบบ่อยมีดังนี้

$.fn.plugin = function( options ) {
    options = $.extend( {}, $.fn.plugin.defaults, options );
    // Plugin logic goes here.
};
 
$.fn.plugin.defaults = {
    param1: "foo",
    param2: "bar",
    param3: "baz"
};

ห้องสมุดองค์ประกอบ (โรงงาน Widget) นอกจากนี้ยังมีคุณสมบัตินี้และการปรับปรุงได้รับการทำในนั้น หลังจากที่ใช้เครื่องมือที่ห้องสมุด (โรงงาน Widget) ก็จะแสดงด้านล่าง

$.widget( "ns.plugin", {
 
    // Default options.
    options: {
        param1: "foo",
        param2: "bar",
        param3: "baz"
    },
 
    _create: function() {
        // Options are already merged and stored in this.options
        // Plugin logic goes here.
    }
 
});