1. ภาพรวมของฟังก์ชันที่ไม่ระบุตัวตน
ครั้งแรกที่ฉันรู้เกี่ยวกับฟังก์ชันที่ไม่เปิดเผยตัวตนอยู่ในซอร์สโค้ด jquery สิ่งแรกที่ฉันเห็นเมื่อเปิด jQuery คือ
คัดลอกรหัสรหัสดังต่อไปนี้:
(ฟังก์ชั่น ( หน้าต่าง, ไม่ได้กำหนด ) {.................................}) (หน้าต่าง);
นี่คือฟังก์ชันที่ไม่ระบุชื่อ โดยมีพารามิเตอร์เป็นสีแดง ฟังก์ชันของฟังก์ชันที่ไม่ระบุชื่อคือการสร้างพื้นที่ปิด และภายนอกไม่สามารถเข้าถึงตัวแปรและวิธีการภายในได้
เนื่องจากไม่สามารถเข้าถึงได้ แล้วจะเรียก jquery ได้อย่างไร? เนื่องจากฟังก์ชันที่ไม่ระบุตัวตนของ jquery มี 2 ประโยคนี้ (ข้อความสีน้ำเงิน):
คัดลอกรหัสรหัสดังต่อไปนี้:
(ฟังก์ชั่น ( หน้าต่าง ไม่ได้กำหนด ) {
// กำหนดสำเนาของ jQuery ในเครื่อง
var jQuery = ฟังก์ชั่น (ตัวเลือก, บริบท) {
// จริงๆ แล้ววัตถุ jQuery เป็นเพียงตัวสร้างเริ่มต้น 'ปรับปรุง'
ส่งคืน jQuery.fn.init ใหม่ (ตัวเลือก, บริบท);
-
-
window.jQuery = หน้าต่าง.$ = jQuery;
})(หน้าต่าง);
ปรากฎว่า jQuery ถูกส่งผ่านไปยังหน้าต่างในฟังก์ชันที่ไม่ระบุชื่อ ซึ่งเป็นสาเหตุที่หน้าต่างถูกส่งผ่านเมื่อส่งพารามิเตอร์ ดังนั้นทุกครั้งที่มีการเรียก jquery ในอนาคต jQuery object ของ window จะถูกเรียกจริง ๆ
jquery เรียกวิธีการของตัวเอง ไม่สามารถเรียกจากภายนอกได้จึงมั่นใจในความปลอดภัยและไม่มีข้อขัดแย้ง
2. ดำเนินการต่อจากหัวข้อด้านบน เกี่ยวกับปลั๊กอิน jQuery
ต่อไปนี้เป็นส่วนหนึ่งของโค้ดสำหรับการควบคุมเพจที่ฉันเขียน:
คัดลอกรหัสรหัสดังต่อไปนี้:
;(ฟังก์ชั่น ($) {
$.fn.tabing = ฟังก์ชั่น (หาเรื่อง) {
instance = ปลั๊กอินใหม่ (นี่, หาเรื่อง);
-
อินสแตนซ์ var = null;
ปลั๊กอินฟังก์ชัน (องค์ประกอบ) {
this._tabs = $(องค์ประกอบ);
this._tabli = $("a[href*='#']",this._tabs);
this._tabDiv = this._tabs.siblings().filter("div[id*='tab']");
นี้.init();
-
Plugin.prototype = {
เริ่มต้น: ฟังก์ชั่น () {
this._tabli.addClass("ไม่ได้เลือก");
this._tabli.eq(0).addClass("เลือกแล้ว");
this._tabDiv.css("display", "none");
this._tabDiv.eq(0).css("display", "บล็อก");
this._tabli.each(ฟังก์ชั่น(){
$(this).bind("คลิก",function(){
สำหรับ (var i = 0;i<instance._tabDiv.length;i++){
instance._tabDiv.eq(i).css("display", "none");
-
instance._tabDiv.filter("#"+$(this).attr("href").split('#')[1]).css("display","block");
-
-
-
-
})(เจเคอรี่);
ให้ความสนใจกับคำสีแดง ในความเป็นจริง ปลั๊กอิน jQuery ยังเขียนฟังก์ชันที่ไม่ระบุชื่อ ซึ่งทำให้มั่นใจถึงความเป็นอิสระของปลั๊กอินแต่ละตัว มิฉะนั้น จะไม่เรียกว่าปลั๊กอิน มีการแท็บในปลั๊กอินนี้สำหรับ fn ของ jquery
ด้วยวิธีนี้ อ็อบเจ็กต์ jquery ภายนอกสามารถเรียก tabing ได้โดยตรง ซึ่งเป็นช่องทางติดต่อเดียวระหว่างปลั๊กอินและโลกภายนอก
3. หลังจากพูดถึงการใช้ฟังก์ชันที่ไม่ระบุตัวตนโดยปลั๊กอิน jquery แล้ว เรามาพูดถึงฟังก์ชันที่ไม่ระบุตัวตนของหน้าต่างกันดีกว่า
อันที่จริงแล้ว jquery นั้นเป็นฟังก์ชันที่ไม่เปิดเผยตัวตนของ window ซึ่งเป็นจุดแรก แล้วเราจะเขียนฟังก์ชันที่ไม่ระบุตัวตนของ window ได้อย่างไร?
นั่นคือหลังจากเขียนฟังก์ชันที่ไม่ระบุชื่อแล้ว จะมีอินเทอร์เฟซสำหรับการโต้ตอบกับหน้าต่างในฟังก์ชัน ดังตัวอย่างต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
(การทำงาน(){
ฟังก์ชั่น getObjByID (id) {
ส่งคืน document.getElementById(id);
-
ฟังก์ชั่น __addClass(id,className,classValue){
$(id).style.className=classValue;
-
window.addClass=__addClass;
-
ดูที่คำสีแดงด้วยเพื่อให้คุณสามารถเรียก addClass() นอกฟังก์ชันที่ไม่ระบุชื่อได้ แต่คุณไม่สามารถเรียก getObjByID()
4. ฟังก์ชั่นที่ไม่ระบุตัวตนจะถูกดำเนินการระหว่างการแยกวิเคราะห์ด้วย
ดังต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่นวิดีโอ () { };
ฟังก์ชั่นภาพยนตร์ () { };
var _video = วิดีโอใหม่ ();
_วิดีโอ.ขนาด = 3;
_video.toString = ฟังก์ชั่น () {
กลับ "วิดีโอ";
-
_video.getName = ฟังก์ชั่น () {
กลับ "VideoXXX";
-
var _movie = หนังใหม่ ();
(ฟังก์ชัน (พาเรนต์, ลูก) {
สำหรับ (var ele ใน parent) {
if (!child[ele]) //สำเนาของพาเรนต์จะถูกคัดลอกเฉพาะเมื่อเด็กไม่มีแอตทริบิวต์หรือเมธอด
เด็ก[เอเล] = ผู้ปกครอง[เอเล];
-
})(_video, _movie); //วิธีเรียกใช้ฟังก์ชันที่ไม่ระบุตัวตน
การแจ้งเตือน (_movie.size); //3
alert(_movie.toString()); //[วัตถุวัตถุ]
alert(_movie.getName()); //VideoXXX
การแจ้งเตือนทั้งสามรายการมีผลลัพธ์ ซึ่งบ่งชี้ว่าฟังก์ชันที่ไม่ระบุตัวตนได้รับการดำเนินการภายใน