Sekilas JavaScript Frameworks Terpouler

Web 2.0 yang kita kenal sekarang muncul dari abu krisis dotcom. "Saat Ajax," karena beberapa menyebutnya, diantar dalam era baru interaktivitas dan pengalaman Web browsing lebih kaya. Untuk membantu menciptakan web lebih dinamis, Javascript Kerangka perpustakaan tidak hanya berkembang biak, tetapi telah menjadi bagian integral dari pengembangan Web. The downside? Memilih dari semua pilihan yang sangat baik dapat menjadi tugas menakutkan. Tidak ada yang ingin mengetahui setelah fakta bahwa perpustakaan lain skrip akan lebih baik cocok untuk kebutuhan mereka. Seri ini akan menyajikan gambaran tentang Kerangka lusin paling populer JavaScript untuk membantu Anda membuat keputusan yang lebih tepat. Artikel minggu ini akan berfokus pada Prototype, script.aculo.us dan Mootools.



Prototype Framework

Prototipe adalah Kerangka kelas berorientasi yang mudah (bagi orang-orang akrab dengan konsep OOP) untuk digunakan. Ini menjadi titik pusat sebagai yang paling populer dari semua Kerangka JavaScript. Prototipe terasa seperti ekstensi, alam berorientasi objek untuk JavaScript itu sendiri. Mengambil pendekatan kelas berorientasi memungkinkan untuk kedua subclassing dan warisan, dan membuat Kerangka Prototipe sangat extensible.

Setiap area fungsi yang nyaman modularized menjadi entitas kelas terpisah. Berikut adalah yang utama:

Ekstensi DOM

Mungkin yang paling berguna DOM metode utilitas adalah $ () dan fungsi $ $ (). Yang pertama memberikan alias berguna untuk document.getElementById () dan memungkinkan Anda lulus acuh tak acuh referensi simpul ID (string) atau DOM untuk fungsi. Fungsi $ $ () mengembalikan array dokumen-urutan elemen pencocokan pemilih CSS. Hal ini juga dapat digunakan pada tingkat elemen menggunakan Element.getElementsBySelector (cssRule) sintaks.

Class Creation and Inheritance

Kuat prototipe Class.create () metode memungkinkan Anda untuk menentukan kelas, menginisialisasi, dan mewarisi dari superclass a. Untuk menentukan kelas dasar, Anda akan melewati sebuah literal obyek yang berisi metode kelas. Properti diciptakan dalam fungsi khusus yang disebut inisialisasi (). Para Class.create () metode juga menerima kelas opsional sebagai argumen pertama sehingga Anda dapat menetapkan itu sebagai superclass. Berikut ini adalah contoh yang diambil dari situs Web Prototype.org:

1	// properties are directly passed to `create` method
2	var Person = Class.create(
3	{
4	initialize: function(name) {    this.name = name; }
5	,
6	say:        function(message) { return this.name + ': ' + message; }
7	});
8	// when subclassing, specify the class you want to inherit from
9	var Pirate = Class.create(  Person
10	,
11	{
12	// redefine the speak method
13	say: function($super, message) { return $super(message) + ', yarr!'; }
14	}
15	);
16	var john = new Pirate('Long John');
17	john.say('ahoy matey'); // -> "Long John: ahoy matey, yarr!"

Ajax Panggilan

Siapa pun yang pernah bekerja dengan Ajax tahu bahwa banyak kode yang berlebihan dan berpotensi dapat digunakan kembali. Prototipe kelas Ajax memungkinkan Anda untuk turun ke bisnis melakukan panggilan tanpa harus membuat dan mengelola objek lintas-browser Ajax. Ajax XMLHttpRequest objek diwakili oleh variabel transportasi. Permintaan dibuat dengan membuat contoh dari objek Ajax.Request:

1	new Ajax.Request(   '/some_url'
2	,
3	{
4	method:'get'
5	,
6	onSuccess:  function(transport)
7	{
8	var response = transport.responseText || "no response text";
9	alert("Success! \n\n" + response);
10	}
11	,
12	onFailure:  function()
13	{
14	alert('Something went wrong...');
15	}
16	}
17	);

Obyek Ajax.Request menerima dua parameter: URL dari permintaan dan benda hash yang dapat berisi sejumlah pilihan. Pilihan metode di atas mengacu pada metode HTTP akan digunakan; metode default adalah POST. Pilihan OnSuccess dan onFailure menentukan kode fungsi untuk menjalankan didasarkan pada hasil panggilan.

Anda juga dapat melewatkan parameter ke server-side script Anda menggunakan pilihan parameter. Prototipe memiliki fungsi berguna untuk mengirimkan isi dari formulir yang disebut [formulir isian]. Serialize (). Dengan menggunakan fungsi ini hanya membutuhkan satu baris kode untuk mengirim semua data formulir Anda:

1	new Ajax.Request(   '/some_url'
2	,
3	{ parameters: $('id_of_form_element')Serialize(true) }
4	);

Anda dapat mendaftarkan callback yang akan api pada keadaan tertentu dari setiap Ajax.Request dikeluarkan menggunakan Ajax.Responders. Permintaan global pelacakan dapat berguna dalam banyak cara, termasuk logging mereka untuk keperluan debugging menggunakan logger JavaScript atau membuat handler pengecualian global yang menginformasikan pengguna dari masalah koneksi mungkin:

1	Ajax.Responders.register({
2	onCreate:   function() { alert('a request has been initialized!');  }
3	,
4	onComplete: function() { alert('a request completed');              }
5	});

Menggunakan Ajax.Updater untuk memperbarui bagian dokumen dengan fragmen HTML dinamis dimuat adalah snap! Panggil saja Updater dengan elemen wadah yang ingin Anda isi dengan HTML kembali dari respon Ajax dan Prototipe akan memperbarui kontainer dengan respon menggunakan Element.update () metode:

1	HTML markup:
2	<h2>Our fantastic products</h2> <div id="products">fetching product list ...</div>
3	Javascript code:
4	new Ajax.Updater('products', '/some_url', { method: 'get' });

JSON Utilities

JSON Encoding

Prototipe menawarkan dua cara untuk menyandikan data Anda dalam format JSON. Jika Anda tidak yakin apa jenis data yang Anda butuhkan untuk mengkodekan adalah, Object.toJSON (data) dapat menangani tipe data, jika Anda tahu jenis data dan jika data Anda tidak sebuah instance dari objek, Anda dapat memanggil nya spesifik toJSON () metode contoh sebagai gantinya:

1	//Unknown data type:
2	var data = {name: 'Violet', occupation: 'character', age: 25 };
3	Object.toJSON(data); //-> '{"name": "Violet", "occupation": "character", "age": 25}'
4	//Known data type:
5	$H({name: 'Violet', occupation: 'character', age: 25 }).toJSON();
6	//-> '{"name": "Violet", "occupation": "character", "age": 25}'

Anda dapat mengganti metode Object.toJSON () di kelas Anda sendiri dengan memasukkan kode dalam prototipe kelas Anda

1	var Person = Class.create();
2	Person.prototype =
3	{
4	initialize: function(name, age)
5	{
6	this.name = name;
7	this.age  = age;
8	}
9	,
10	toJSON:     function()
11	{
12	return ('My name is ' + this.name + ' and I am ' + this.age + ' years old.').toJSON();
13	}
14	};
15	var john = new Person('John', 49);
16	Object.toJSON(john);   //-> '"My name is John and I am 49 years old."'

Parsing JSON

String.evalJSON () fungsi prototipe digunakan untuk mengevaluasi isi dari string JSON. Dibutuhkan parameter membersihkan opsional, yang, jika diatur ke benar, memeriksa string untuk upaya berbahaya mungkin, mencegah evaluasi, dan melemparkan SyntaxError jika ada yang terdeteksi. Contoh berikut menggunakan fungsi String.evalJSON () dengan parameter membersihkan mengurai responseText permintaan Ajax. Untuk keamanan tambahan, permintaan tersebut diperintahkan untuk hanya menerima data JSON dari server:

1	new Ajax.Request(   '/some_url'
2	,
3	{
4	method:'get'
5	,
6	requestHeaders: {Accept: 'application/json'}
7	,
8	onSuccess:  function(transport)
9	{
10	var json = transport.responseText.evalJSON(true);
11	}
12	}
13	);

Prototipe adalah Framework pilihan bagi sebagian besar pengembang karena suatu alasan. Ini ditulis dengan baik dan serbaguna. Saya pribadi merasa sangat mudah untuk bekerja dengan karena dari seberapa baik ia mengikuti konvensi OOP. Untuk tampilan yang lebih mendalam pada Framework Prototype, lihat artikel WebReference terbaru saya.