Reka bentuk rangka kerja JavaScript membaca nota seed module_javascript kemahiran

1. Ruang nama :

Ruang nama dalam js dilanjutkan menggunakan sifat objek. Sebagai contoh, pengguna mentakrifkan objek A Di bawah objek A, terdapat atribut B dan atribut C Pada masa yang sama, atribut B dan atribut C adalah objek. Oleh itu, A={B:{},C:{}}, maka pengguna boleh mentakrifkan kaedah dan sifat yang sama dalam objek B dan objek C. Oleh itu B dan C tergolong dalam ruang nama yang berbeza. Apabila kita memanggil kaedah dalam objek B dan C, kita boleh memanggilnya melalui A.B.like() dan A.C.like(). Sudah tentu A tergolong dalam sifat dalam objek tetingkap.

Tetapi ada situasi, contohnya: halaman boke.jsp memperkenalkan jquery.js dan prototype.js (mereka akan menambah atribut $ pada objek tetingkap), kemudian konflik berlaku.

Oleh itu, tiadaConflict() dalam jquery.js untuk mengendalikan konflik. Proses pelaksanaan: Halaman pertama memperkenalkan prototaip Pada masa ini, prototaip akan menduduki $ atribut tetingkap Kemudian apabila jquery diperkenalkan, jquery akan menyimpan $ atribut tetingkap sebelumnya dalam _$, dan kemudian menggunakan atribut $ itu sendiri. Pada masa ini, anda boleh memanggil kaedah jquery melalui $. Apabila anda tidak perlu menggunakan jquery sekarang tetapi ingin menggunakan prototaip, anda boleh memanggil $.noConflict(), kemudian $ akan dipulihkan kepada objek prototaip. Pada masa ini anda boleh menggunakan kaedah prototaip melalui $.

Salin kod Kod adalah seperti berikut:

var _$ = window.$, _jQuery= window.jQuery; tiadaConflict:function(deep){
                tetingkap.$ = _$;
   if(deep) window.jQuery = _jQuery;
                                    kembalikan jQuery;
}

2. Sambungan objek :

Sekarang kita mempunyai objek ruang nama, kita perlu memperluaskan fungsi tersebut. Sebagai contoh: Saya perlu menyalin semua sifat dan kaedah objek A ke objek B. Saya tidak perlu menulis kod dalam objek B satu demi satu.

Salin kod Kod adalah seperti berikut:

campuran fungsi(sasaran, sumber){
var args = [].slice.call(arguments),i=1,
IScover = Jenis ARGS [ARGS.Length-] == "Boolean" Args.pop (): True;
if(args.length == 1){                                             target = !this.window? ini:{};
//Jika terdapat hanya satu parameter objek, kembangkan objek ini. Sebagai contoh: jika saya memanggil campuran(B) dalam konteks objek A, maka ini adalah A, jadi sifat dan kaedah B akan ditambahkan pada objek A. Tetapi jika mix(B) dipanggil dalam tetingkap, sifat dan kaedah dalam objek B akan ditambah pada objek kosong, dan objek kosong akan dikembalikan untuk mengelakkan menimpa sifat dan kaedah dengan nama yang sama dalam objek tetingkap. (Hanya objek tetingkap yang mempunyai atribut tetingkap)
i =0;
}
​sementara((sumber = args[i ])){
　　untuk(masukkan sumber){
Jika (iSCOVER ||! (Kunci dalam sasaran) // Jika ia dilindungi, ia akan diberikan secara langsung. Jika ia tidak meliputi, mula-mula tentukan sama ada kunci berada dalam objek sasaran, jika ia wujud, ia tidak akan menetapkan nilai
　　  {
　　　　　sasaran[kunci] = sumber[kunci];
                      }
           }
}
Sasaran balik;
}

Penemuduga di syarikat besar suka bertanya tentang penyemakan pendua tatasusunan Anda boleh menyemaknya Setiap item dalam tatasusunan boleh menjadi objek, dan walaupun objek A dan objek B mempunyai sifat dan kaedah yang sama sama rata. Rentetan dan nombor, seperti 123 dan "123", dsb., anda boleh mencari kaedah lengkap dengan mencari dalam talian.

3. Susunan

: Terdapat banyak objek seperti tatasusunan di bawah penyemak imbas, seperti argumen, document.forms, document.links, form.elements, document.getElementsByTagName, childNodes, dsb. (HTMLCollection, NodeList).

Terdapat juga objek tersuai yang ditulis dengan cara yang istimewa

Salin kod Kod adalah seperti berikut:

var arraySuka = ​​{
0:"a",
1:"b",
panjang:2
}

Cara objek ini ditulis ialah cara objek jQuery ditulis.

Kita perlu menukar objek seperti tatasusunan di atas menjadi objek tatasusunan.

[].kaedah slice.call boleh menyelesaikan masalah ini. Walau bagaimanapun, HTMLCollection dan NodeList di bawah versi lama IE bukanlah subkelas Object dan kaedah [].slice.call tidak boleh digunakan.

Jadi kita boleh mengatasi kaedah hirisan.

Salin kod Kod adalah seperti berikut:

A.slice = window.dispatchEvent ? function(nod,start,end){ return [].slice.call(nodes,start,end); //Jika tetingkap mempunyai atribut dispatchEvent, ia membuktikan bahawa ia menyokong kaedah [].slice.call dan pengesanan keupayaan.
:function(nod,mula,tamat){
                      var ret = [],n=nod.length;
- Mula = PARSEINT (Mula, 10) || 0; // Jika permulaan tidak wujud atau bukan nombor, ia ditetapkan 0.
                                                                hujung = akhir == tidak ditentukan ? 　　　　　jika(mula < 0) 　　 mula = n;
　　　　jika(akhir<0) akhir = n;
　　　　if(end>n) end = n;
　　　　　untuk(var i = mula;i RET [I-Start] = NODES [i]; // Versi rendah IE menggunakan bentuk penugasan tatasusunan
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  　　　　}
　　　　kembali ret;
}




4. Taipkan pertimbangan

:

　Lima jenis data ringkas js ialah: null, undefined, boolean, number dan rentetan. Terdapat juga jenis data yang kompleks: Objek, Fungsi, RegExp, Tarikh, objek tersuai, seperti Orang, dsb.

Typeof biasanya digunakan untuk menentukan boolean, nombor, rentetan dan instanceof biasanya digunakan untuk menentukan jenis objek. Tetapi mereka semua mempunyai kelemahan. Sebagai contoh: contoh tatasusunan dalam fireme bukanlah contoh Tatasusunan tetingkap induk, dan panggilan instanceof akan mengembalikan palsu. (Soalan ini ditanya semasa pengambilan 360 sekolah). typeof new Boolean(true) // "objek", objek pembungkusan. Terdapat tiga objek pembungkusan boolean, nombor dan rentetan, yang dibincangkan dalam pengaturcaraan lanjutan js.

Ramai orang menggunakan typeof document.all untuk menentukan sama ada ia adalah IE Sebenarnya, ini sangat berbahaya, kerana Google dan Firefox juga menyukai atribut ini, jadi keadaan ini berlaku di bawah Google Chrome: typeof document.all // undefined Namun. , document.all //HTMLAllCollection, dinilai mengikut jenis sebagai tidak ditentukan, tetapi nilai atribut ini boleh dibaca.

Tetapi kini anda boleh menggunakan kaedah Object.prototype.toString.call untuk menentukan jenis. Kaedah ini boleh terus mengeluarkan [[Kelas]] di dalam objek Walau bagaimanapun, kaedah ini tidak boleh digunakan untuk objek tetingkap dalam IE8 dan ke bawah. Anda boleh menggunakan tetingkap == dokumen // dokumen benar == tetingkap // palsu di bawah IE6,7,8.

NodeType (1: Elemen 2: Atribut 3: Teks Teks 9: dokumen)

Kaedah yang digunakan untuk menentukan jenis dalam jquery:

Salin kod

Kod adalah seperti berikut:

class2type ={}
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){
class2type [ "[nama objek "]" ] = name.toLowerCase();
//class2type = {"[objek Boolean]":boolean,"[objek Nombor ]":nombor ,"[objek Rentetan ]":rentetan ,"[objek Fungsi ]":fungsi ,"[objek 　　Array ]":array . .....}
　　});
jQuery.type = function(obj){ //Jika obj adalah null, undefined, dsb., kembalikan rentetan "null", "undefined". Jika tidak, panggil kaedah toString, nilai jika ia boleh dipanggil dan kembalikan objek (objek ActiveXobject seperti tetingkap dan Dom dalam versi IE yang lebih rendah)
return obj == null ? String(obj) : class2type [ toString.call(obj) ] || "objek";
}

5.domReady

Apabila js mengendalikan nod dom, halaman mesti membina pepohon dom. Oleh itu, kaedah window.onload biasanya digunakan. Tetapi kaedah onload tidak akan dilaksanakan sehingga semua sumber dimuatkan. Untuk menjadikan halaman bertindak balas kepada operasi pengguna dengan lebih pantas, kami hanya perlu menggunakan operasi js selepas pepohon DOM dibina. Tidak perlu menunggu semua sumber dimuatkan (gambar, kilat).

Jadi acara DOMContentLoaded muncul, yang dicetuskan selepas pepohon Dom dibina. Tetapi versi lama IE tidak menyokongnya, jadi terdapat penggodaman.

Salin kod Kod adalah seperti berikut:

if(document.readyState === "complete"){ //Sekiranya fail js dimuatkan hanya selepas dokumen Dom dimuatkan. Pada masa ini, kaedah fn (kaedah yang anda ingin laksanakan) dilaksanakan melalui penghakiman ini. Kerana selepas dokumen dimuatkan, nilai document.readyState selesai
                                                                                                                                                                                                                                                                                                                 setTimeout(fn); Berikut ialah penggunaan dalam jQuery, anda tidak perlu memahaminya.
}
else if(document.addEventListener){//Support DOMContentLoaded acara
              document.addEventListener("DOMContentLoaded",fn,false); // Bubble
window.addEventListener("load",fn,false); //Sekiranya fail js dimuatkan selepas pepohon DOM dibina. Pada masa ini, acara DOMContentLoaded tidak akan dicetuskan (ia telah dicetuskan), hanya acara muatkan
akan dicetuskan. }
lain{
document.attachEvent("onreadystatechange",function(){//Untuk keselamatan iframe di bawah IE, kadangkala pelaksanaan onload diberi keutamaan, kadangkala tidak.
　　jika(document.readyState ==="complete"){
　　　fn();
　　}
});
window.attachEvent("onload",fn); //Ia akan sentiasa berfungsi, sekiranya peristiwa pemantauan lain tidak diperolehi, supaya sekurang-kurangnya kaedah fn boleh dicetuskan melalui acara onload.
var top = false;//Semak sama ada ia berada dalam iframe
Try{//window.frameElement ialah iframe atau objek bingkai yang mengandungi halaman ini. Jika tidak, ia adalah batal.
              atas = window.frameElement == null && document.documentElement;
}tangkap(e){}
If(top && top.doScroll){ //Jika tiada iframe dan ia ialah IE
(fungsi doScrollCheck(){
                   cuba{
　　　　top.doScroll("left");//Di bawah IE, jika pokok Dom dibina, anda boleh memanggil kaedah doScroll html　　　
　　　　}tangkap(e){
Kembali settimeout (doscrollcheck, 50); // Jika ia tidak dibina, teruskan mendengar
                 }
                        fn();
             })
}
}

Kaedah fn mesti termasuk mengalih keluar semua acara terikat.

Sudah tentu, IE juga boleh menggunakan skrip defer hack Prinsipnya ialah: skrip dengan penangguhan yang ditentukan tidak akan dilaksanakan sehingga pepohon DOM dibina. Tetapi ini memerlukan penambahan fail js tambahan, yang jarang digunakan dalam perpustakaan berasingan.

Prinsip penggunaan: Tambahkan tag skrip pada dokumen dan gunakan script.src = "xxx.js" untuk mendengar acara onreadystatechange skrip Apabila this.readyState == "lengkap", jalankan kaedah fn.

Maksudnya, selepas DOM dibina, xxx.js akan dilaksanakan dan this.readyState akan menjadi lengkap.

Di atas adalah nota bacaan untuk bab pertama reka bentuk rangka kerja JavaScript Kandungannya agak ringkas, supaya semua orang dapat memahami kandungan asas bab ini dengan lebih baik.