Yui 3: lebih ringan, lebih cepat, lebih mudah digunakan

3

Takeaways Key

yui 3, penulisan semula Yui yang lengkap, bertujuan untuk menjadi lebih ringan, lebih cepat, dan lebih mudah digunakan daripada pendahulunya, Yui 2. Menulis semula alamat ketidakkonsistenan dalam mekanik dalaman dan API yang muncul sebagai Yui 2 berkembang. Perpustakaan Yui 3 memperkenalkan seni bina plugin baru yang membolehkan pengguna menambah fungsi mereka sendiri kepada nod dan widget. Perpustakaan juga memperkenalkan nama objek global yang baru, Yui, menggantikan objek global Yahoo lama. Ini membolehkan versi lama Yui wujud bersama Yui 3.

Yui 3 mempunyai gaya pengekodan yang lebih bersih, lebih ringkas dan hierarki kelas baru yang membolehkan mekanik dalaman dan API yang konsisten merentasi semua komponen Yui. Perpustakaan juga menangani isu -isu memuatkan kepingan berat perpustakaan untuk hanya satu atau dua fungsi dengan memisahkan fungsi ke dalam submodul yang lebih kecil.

Versi baru perpustakaan memperkenalkan lapisan abstraksi baru untuk DOM dengan utiliti nod, yang memudahkan interaksi DOM. Yui 3 juga menormalkan pengurusan acara menggunakan idea fasad acara, yang menjaga semua normalisasi penyemak imbas.
Yui 3 menawarkan perpustakaan yang lebih fleksibel dan cekap untuk pembangunan web, dengan ciri -ciri baru termasuk sistem acara baru, sistem modul baru, dan sistem atribut baru. Ia juga memperkenalkan utiliti dan widget baru seperti nod dan nodel untuk manipulasi DOM, iO untuk permintaan Ajax, dan widget untuk membuat komponen UI yang boleh diguna semula.
Pada bulan Ogos 2008, pasukan antara muka pengguna Yahoo mengeluarkan pelepasan pratonton pertama Yui 3, penulisan lengkap Yui dari bawah ke atas (pelepasan beta pertama yang akan disebabkan beberapa waktu minggu depan!).
Mengapa mereka menulis semula perpustakaan yang sudah berguna dan matang, anda mungkin bertanya? Nah, seperti Yui 2 matang, cara di mana ia dibina juga berkembang.
Akibatnya, bahagian Yui yang hadir dari awal dikodkan dengan cara yang sama sekali berbeza dari bahagian -bahagian yang ditambah kemudian. Hasilnya adalah bahawa perpustakaan mengandungi ketidakkonsistenan - baik dalam mekanik dalaman dan API. Oleh itu, pasukan memutuskan bahawa mereka akan membawa perpustakaan kembali ke asas -asas dan membina semula dari bawah. Rancangan mereka adalah untuk menerapkan pengalaman yang diperolehnya sejak tiga tahun yang lalu bekerja di Yui dan membina perpustakaan yang lebih ringan, lebih cepat, dan lebih mudah digunakan. Akhirnya, dalam usaha menjadikan perpustakaan sebagai fleksibel yang mungkin, Yui 3 memperkenalkan semua seni bina plugin baru yang membolehkan anda menambah fungsi anda sendiri kepada nod dan widget. Kami akan melihat satu plugin dalam tindakan sedikit kemudian. Pertama, mari kita lihat apa yang baru di Yui 3.

• selamat tinggal yahoo, hello yui

  Bit pertama anda akan melihat apabila melihat contoh kod Yui 3 adalah nama objek global yang baru yang digunakannya. Objek global Yahoo lama telah digantikan dengan objek global Yui yang baru. Ia dinamakan semula kerana beberapa sebab: maklum balas pengguna mencadangkan bahawa sesetengah syarikat tidak menyukai nama Yahoo dalam kod mereka; Tetapi yang lebih penting, ia membolehkan versi lama Yui untuk wujud bersama Yui 3 kerana mempunyai nama pembolehubah yang berbeza.

  serta objek global yang dinamakan semula, penggunaannya didasarkan pada prinsip asas yang berbeza daripada di 2.x. Sebagai permulaan, ia tidak lagi menjadi objek statik tetapi sebaliknya fungsi yang, apabila dilaksanakan, mengembalikan contohnya sendiri. Sekarang, setiap pelaksanaan Yui mengembalikan persekitaran yang serba lengkap di mana versi perpustakaan dan versi semua komponen yang dimuatkan dapat berjalan tanpa mengganggu apa-apa contoh Yui lain pada halaman. Dengan lanjutan ini juga bermakna bahawa pelbagai versi perpustakaan boleh wujud bersama pada halaman yang sama, dengan meniru versi yang berbeza dari objek Yui. Contoh di bawah menggambarkan prinsip ini:

   <br>
  YUI().use('dd-drop', 'anim', function(Y) { <br>
      // Y.DD is available <br>
      // Y.Anim is available <br>
  }

  di sini, yui () dilaksanakan, yang mengembalikan contoh perpustakaan dari mana kaedah penggunaan dilaksanakan. Sekurang -kurangnya dua parameter diperlukan: komponen perpustakaan, maka panggilan balik untuk dijalankan sebaik sahaja segala -galanya dilakukan. Dalam contoh di atas, dua parameter pertama yang diluluskan untuk digunakan adalah nama -nama komponen perpustakaan yang akan dimuatkan. Parameter akhir adalah fungsi panggil balik kami, yang menerima objek (bernama Y dalam contoh) - ini adalah contoh perpustakaan yang mengandungi semua komponen yang dimuatkan. Jadi, seperti komen dalam contoh di atas, komponen seret dan drop boleh didapati di Y.DD, dan komponen animasi boleh didapati di Y.Anim.

  Gaya pengekodan yang lebih bersih, lebih ringkas

  Salah satu kebimbangan utama pasukan adalah untuk memastikan mekanik dalaman yang konsisten dan API yang konsisten merentasi semua komponen Yui. Jadi Yui 3 kini mempunyai hierarki kelas baru yang membolehkannya. Kelas atribut, sebagai contoh, menyediakan kaedah GET dan set, sokongan konfigurasi awal, dan peristiwa perubahan atribut kepada kelas yang mewarisi itu. Terdapat juga kelas asas yang mewarisi dari atribut dan menyediakan beberapa fungsi berorientasikan objek keluar-of-the-box, seperti kaedah inisialisasi dan pemusnah untuk semua kelas yang mewarisi daripadanya. Akhirnya, mereka telah membina kelas widget yang mewarisi dari asas dan menyediakan fungsi umum yang biasanya digunakan oleh widget, seperti kaedah render-struktur model-view-controller yang biasa untuk menguruskan rendering widget-dan sokongan untuk atribut widget biasa. Ia juga menyediakan pendaftaran plugin dan sokongan pengaktifan.

  Satu lagi masalah Yui 3 mengatasi adalah apabila skrip anda perlu memuatkan sekeping perpustakaan yang berat untuk hanya satu atau dua fungsi yang terkandung di dalamnya. Sebagai contoh, dalam Yui 2, anda perlu memasukkan keseluruhan utiliti sambungan (seberat 38kb, 12kb apabila diminimumkan) hanya untuk melakukan beberapa panggilan Xmlhttprequest. Yui 3 menyelesaikan masalah ini dengan memisahkan fungsi ke dalam submodul yang lebih kecil. Dengan cara itu, tidak perlu menarik seluruh utiliti hanya untuk membuat panggilan XMLHTTPREQUEST. Di Yui 3, anda boleh membuat panggilan XMLHTTPREQUEST dengan hanya menarik modul IO IO Utility, dengan beratnya hanya 19KB (4KB minified). Malah, utiliti keseluruhan IO beratnya 29KB (7kb minified) dan lebih kaya dengan ciri-ciri yang terdahulu. Sebagai contoh, kini mungkin untuk membuat panggilan silang domain atau xdomainRequest dengan submodule IO-XDR.

  Memilih dan Chaining

  Yui 2 memperkenalkan enjin pemilih, tetapi ia berbuat demikian sedikit lewat dalam kehidupan perpustakaan. Akibatnya, seluruh perpustakaan dibina di sekitar teknik pengambilan elemen sekolah lama. Dalam erti kata lain, anda sama ada meluluskan ID elemen atau elemen itu apabila rujukan diperlukan, dan itu sahaja. Dengan Yui 3, bagaimanapun, enjin pemilih dibina tepat ke dalam teras perpustakaan. Ia meresap setiap bahagiannya supaya anda boleh lulus rentetan pemilih CSS hampir di mana sahaja rujukan elemen diperlukan. Serta pembina, yang juga termasuk menubuhkan pengendali acara dan bekerja dengan utiliti. Inilah contoh, yang menjadikan elemen pertama dengan pengarang kelas menyeret:
  
  var dd = new y.dd.drag ({
     Node: '.Author'
  });

  Setiap kali Yui 3 tidak mempunyai nilai logik untuk kembali, ia cuba membuat kaedah berantai. Inilah contohnya dalam tindakan:

   <br>
  YUI().use('dd-drop', 'anim', function(Y) { <br>
      // Y.DD is available <br>
      // Y.Anim is available <br>
  }

  di sini, kami merujuk kepada elemen pertama dengan pengarang nama kelas dan menetapkan gaya kursor di atasnya.

  nod dan acara façades

  Yui 3 memperkenalkan lapisan abstraksi baru untuk DOM dengan utiliti nod. Daripada mengembalikan rujukan kepada elemen DOM, Yui 3 mengembalikan nod dan nodel, yang sangat memudahkan interaksi DOM. Itu kerana nod termasuk semua fungsi yang anda perlukan untuk berinteraksi dengan mereka, dan bukannya harus pergi ke fungsi berasingan. Lebih -lebih lagi, kaedah yang terdedah oleh nod menjaga normalisasi penyemak imbas apabila ia diperlukan sehingga pengalaman bekerja dengan mereka adalah tidak menyakitkan mungkin. Inilah yang perlu anda tulis di Yui 2 untuk menambah nama kelas ke elemen:

  Y.get('.author').setStyle('cursor', 'move');

  di yui 3 ini menjadi:

  YAHOO.util.Dom.addClass("navProducts", "selected");

  Malah, jika nod sudah ada, katakan dalam pembolehubah navproducts bernama, maka anda hanya dapat melakukan ini:

   <br>
  YUI().use('dd-drop', 'anim', function(Y) { <br>
      // Y.DD is available <br>
      // Y.Anim is available <br>
  }

  Yui 3 memudahkan interaksi dengan DOM, dan juga telah menormalkan pengurusan acara menggunakan idea peristiwa façade. Setiap pendengar acara menerima acara yang mengurus semua normalisasi penyemak imbas. Jadi, sebagai contoh, di mana di Yui 2 anda memerlukan kod berikut untuk "mencegah lalai":

  Y.get('.author').setStyle('cursor', 'move');

  sekarang yang perlu anda lakukan ialah:

  YAHOO.util.Dom.addClass("navProducts", "selected");

  Lebih -lebih lagi, tingkah laku ini meluas ke peristiwa -peristiwa semata -mata tersuai juga, jadi ini juga menerima peristiwa yang membolehkan mereka mengelakkan lalai dan menghentikan penyebaran.

  Seterusnya: Mari letakkan beberapa kaedah baru ini ke dalam amalan.

  tunjukkan wang saya!

  Saya telah membina halaman contoh mudah yang menunjukkan betapa mudah dan kuat Yui 3 digunakan. Untuk menjimatkan ruang di sini dalam artikel, saya akan mengelakkan menunjukkan semua markup dan kod, tetapi anda boleh melihat sumber penuh pada halaman contoh.

  Tugas pertama yang saya lakukan ialah memuatkan contoh Yui dengan utiliti animasi, widget gelangsar, plugin nod Menunav, dan utiliti seret & drop. Yui pergi dan mengambil fail yang diperlukan dan kebergantungan mereka dari pelayan Yahoo. Ia kemudian mengembalikan contoh Yui dengan komponen yang dimuatkan ke fungsi panggil balik, yang menerimanya dalam pembolehubah bernama Y:

  Y.get("#navProducts").addClass("selected");

  Seterusnya, saya membuat animasi mudah untuk melantun kandungan halaman ke dalam pandangan. Untuk melakukan ini, saya meneliti objek animasi baru. Saya menyampaikannya kepada elemen dengan id utama dan memberitahu ia untuk menghidupkan nilai teratas kepada 0 dari mana sahaja ia kini (sekarang ia berada di -1000px, seperti yang dinyatakan dalam markup halaman contoh). Saya juga menyatakan bahawa animasi perlu mengambil masa tiga saat dan ia harus menggunakan kaedah pelonggaran elastik. Sebaik sahaja objek itu diterapkan, ia hanya satu kes mudah untuk menjalankannya dengan kaedah larian:

  navProducts.addClass("selected");

  Seterusnya, saya menyediakan objek slider untuk membolehkan pengguna menyesuaikan saiz fon asas halaman. Fon Yui CSS (termasuk dalam halaman contoh) menetapkan saiz fon asas halaman hingga 13 piksel. Ia melakukan ini dengan menetapkan nilai saiz fon pada elemen badan, dari mana semua saiz fon lain dikira. Inilah yang kita akan memanipulasi untuk mengubah saiz fon keseluruhan halaman.

  Saya ambil rujukan nod untuk elemen badan, yang akan digunakan kemudian bersempena dengan slider. Kemudian saya membuat widget slider. Saya menetapkan nilai minimum kepada 13 dan maksimum hingga 28 kerana saya mahu saiz fon kekal dalam nilai -nilai ini. Saya kemudian memastikan saiz kereta api slider adalah 100 piksel lebar. Akhirnya, saya menetapkan imej ibu jari slider (yang dimuatkan secara langsung dari pelayan yang dihoskan oleh Yahoo):

   <br>
  YUI().use('dd-drop', 'anim', function(Y) { <br>
      // Y.DD is available <br>
      // Y.Anim is available <br>
  }

  Setelah slider itu instantiated, ia hanya satu perkara yang mudah untuk menjadikannya. Saya melakukan ini dengan memanggil kaedah render slider dengan nama kelas elemen yang saya mahu ia diberikan. Widget slider akan diberikan dalam elemen pertama dalam DOM yang sepadan dengan nama kelas itu:

  Y.get('.author').setStyle('cursor', 'move');

  Satu -satunya tugas yang perlu dilakukan sekarang adalah untuk menaikkan gelangsar supaya ia benar -benar menyesuaikan saiz fon halaman. Ini yang saya lakukan dengan mengaitkannya selepas acara. Yui 3 mempunyai standard pada dan selepas peristiwa yang anda boleh haung untuk membuat pengendalian acara seperti ini lebih mudah daripada versi terdahulu. Sekarang, apabila acara ValueChange dipecat, nilai fontstyle elemen badan kami diubah:

  YAHOO.util.Dom.addClass("navProducts", "selected");

  Saya juga menyediakan menu navigasi. Sebaik sahaja kandungan halaman siap saya pasangkan plugin nod Menunav ke dalam nod nav. Ia kemudian secara automatik menetapkan menu navigasi berdasarkan markup yang ia dapati - semudah itu! Inilah kod:

  Y.get("#navProducts").addClass("selected");

  Akhirnya, saya membuat gambar anda benar -benar menyeret dengan hanya meneliti objek seret dan drop baru dan menyampaikannya kepada nama kelas gambar saya. Sebaik sahaja objek dibuat, imej itu boleh disesuaikan. Sebagai sentuhan tambahan, saya menukar kursor tetikus apabila ia melayang ke atas imej supaya jelas bahawa imej itu boleh diseret:

  navProducts.addClass("selected");

  Ringkasan

  Jadi, seperti yang anda lihat, Yui 3 adalah haiwan yang sama sekali berbeza daripada pendahulunya. Bersama dengan sintaks baru, anda mendapat perpustakaan yang lebih cepat, lebih ringan, lebih mudah, dan lebih fleksibel - bersedia untuk mengambil projek web anda yang paling bercita -cita tinggi.

  Melihat ini adalah primer, kami hampir tidak menggaru permukaan apa yang mungkin dengan Yui 3. Untuk membaca lebih lanjut, lihat Yui 3.x Preview Release 2 Page, persembahan Satyen Desai di Yui 3, dan Forum Yui 3.

  soalan yang sering ditanya mengenai yui 3
  Apakah ciri -ciri baru dalam Yui 3? Ini termasuk sistem acara baru yang membolehkan pengendalian acara yang lebih fleksibel, sistem modul baru yang memudahkan proses memuatkan dan menggunakan modul, dan sistem atribut baru yang menyediakan API yang konsisten untuk bekerja dengan sifat objek. Selain itu, Yui 3 termasuk beberapa utiliti dan widget baru, seperti nod dan nodel untuk manipulasi DOM, io untuk permintaan Ajax, dan widget untuk membuat komponen UI yang boleh digunakan semula. Ketergantungan modul, dan kemudian melaksanakan fungsi modul. Ketergantungan modul ditentukan sebagai pelbagai nama modul, dan fungsi modul dilaksanakan sebagai fungsi yang menerima contoh Yui sebagai hujah. Fungsi ini adalah di mana anda menentukan kaedah dan sifat modul anda.

  Bagaimanakah sistem acara baru dalam kerja Yui 3? Sasaran acara adalah objek yang boleh memancarkan peristiwa, dan pengendali acara adalah fungsi yang bertindak balas terhadap peristiwa tersebut. Anda boleh membuat sasaran acara dengan memperluaskan kelas EventTarget, dan anda boleh melampirkan pengendali acara ke sasaran acara menggunakan kaedah On (). Sistem ini membolehkan tahap fleksibiliti yang tinggi dalam bagaimana peristiwa dikendalikan.

  Apakah tujuan sistem atribut dalam YUI 3? Ia membolehkan anda menentukan atribut dengan satu set ciri-ciri tertentu, seperti sama ada mereka hanya dibaca atau hanya menulis, sama ada mereka mempunyai nilai lalai, dan sama ada mereka harus mencetuskan peristiwa perubahan apabila nilai mereka diubahsuai. Sistem ini menjadikannya lebih mudah untuk membuat objek dengan antara muka yang jelas. Anda boleh menggunakan kaedah IO () untuk menghantar permintaan, menyatakan URL, kaedah permintaan (GET atau POST), dan sebarang data yang akan dihantar dengan permintaan. Kaedah IO () mengembalikan objek transaksi, yang boleh anda gunakan untuk mengendalikan respons. Anda boleh menggunakan kaedah y.one () untuk mendapatkan rujukan kepada satu elemen DOM, dan kaedah y.All () untuk mendapatkan nodelist yang mewakili koleksi elemen. Kaedah -kaedah ini mengembalikan nod dan contoh nodel, yang menyediakan pelbagai kaedah untuk memanipulasi unsur -unsur yang mereka wakili. Widget pada dasarnya adalah komponen visual yang merangkumi sekeping fungsi tertentu. Anda boleh membuat widget dengan memperluaskan kelas widget dan melaksanakan kaedah dan sifat yang menentukan tingkah laku dan penampilan widget anda. Kaedah ini mengambil argumen nama -nama modul untuk dimuatkan, dan fungsi panggil balik untuk dilaksanakan sebaik sahaja modul dimuatkan. Fungsi panggil balik menerima contoh Yui sebagai hujah, yang memberikan akses kepada modul yang dimuatkan. Kaedah ini melemparkan ralat dengan mesej yang ditentukan, dan secara opsyen log masuk ralat dan menghentikan pelaksanaan blok kod semasa. Anda boleh menangkap dan mengendalikan kesilapan yang dilemparkan oleh y.error () menggunakan blok percubaan/tangkapan.

  Bagaimana saya memperluaskan kelas dalam Yui 3? Kaedah ini mengambil argumen pembina kelas untuk membuat, pembina kelas untuk melanjutkan, dan objek yang mengandungi kaedah dan sifat untuk ditambah ke kelas baru. Kelas baru mewarisi semua kaedah dan sifat kelas yang dilanjutkan, dan menambah atau mengatasi mereka dengan kaedah dan sifat yang dinyatakan dalam hujah ketiga.

Atas ialah kandungan terperinci Yui 3: lebih ringan, lebih cepat, lebih mudah digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!