Serialization JSON Cross-Browser di JavaScript

Dalam artikel ini, kami akan mengkaji manfaat Serialization Object, pelaksanaan pelayar semasa, dan membangunkan beberapa kod yang dapat membantu projek berasaskan Ajax anda. Anggapkan kita mempunyai objek JavaScript yang agak kompleks yang ditakrifkan menggunakan notasi literal:

var obj1 = {
	b1: true,
	s1: "text string",
	n1: 12345,
	n2: null,
	n3: undefined,
	a1: [ 1,1,2,3,5,8, [13, 21, 34] ],
	o1: {
		a: [3, 2, 1],
		b: {
			c: 42,
			d: [ 3.14, 1.618 ]
		}
	}
};

Kami boleh mengakses mana -mana sifat objek dalam pelbagai cara:

obj1.s1;				// returns "text string"
obj1["n1"];				// returns 12345
obj1.a1[6][1];			// returns 21
obj1["o1"]["b"]["c"];	// returns 42

Objek ini juga boleh diserahkan kepada fungsi dan kaedah JavaScript dan bukannya menentukan hujah individu. Barang berguna. Walau bagaimanapun, bagaimana jika kita perlu menyimpan objek ini dalam kuki? Bagaimana jika kita perlu lulus objek ke perkhidmatan web melalui permintaan AJAX? Bagaimana jika perkhidmatan web itu mahu mengembalikan versi objek yang diubah suai? Jawapannya adalah bersiri:

• Serialization adalah proses mengubah sebarang objek ke dalam rentetan.
• de-serialization bertukar rentetan itu kembali ke objek asli.

Mungkin notasi rentetan terbaik yang boleh kita gunakan dalam JavaScript ialah JSON - Notasi Objek JavaScript. JSON adalah format interchange data ringan yang diilhamkan oleh notasi literal objek JavaScript seperti yang ditunjukkan di atas. JSON disokong oleh PHP dan banyak bahasa pelayan lain (rujuk json.org). Terdapat dua kaedah JSON di JavaScript:

1. json.stringify ( obj ) - Menukar objek JavaScript ke rentetan JSON
2. json.parse ( str ) - Menukar tali json kembali ke objek JavaScript

Malangnya, penyemak imbas yang sangat sedikit menyediakan kaedah ini. Sehingga kini, hanya Firefox 3.5, Internet Explorer 8.0 dan Chrome 3 beta menawarkan sokongan asli. Beberapa perpustakaan JavaScript menawarkan alat JSON mereka sendiri (seperti Yui ) tetapi ramai yang tidak (termasuk jQuery). Walau bagaimanapun, semuanya tidak hilang - JavaScript adalah fleksibel dan kami boleh melaksanakan kaedah JSON Stringify dan Purse apabila pelayar memerlukannya. Di bahagian atas kod kami, kami akan membuat pemboleh ubah JSON yang menunjuk kepada objek JSON asli atau objek kosong jika tidak tersedia:

var JSON = JSON || {};

Kod JSON.Stringify sedikit lebih kompleks:

// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {

	var t = typeof (obj);
	if (t != "object" || obj === null) {

		// simple data type
		if (t == "string") obj = '"'+obj+'"';
		return String(obj);

	}
	else {

		// recurse array or object
		var n, v, json = [], arr = (obj && obj.constructor == Array);

		for (n in obj) {
			v = obj[n]; t = typeof(v);

			if (t == "string") v = '"'+v+'"';
			else if (t == "object" && v !== null) v = JSON.stringify(v);

			json.push((arr ? "" : '"' + n + '":') + String(v));
		}

		return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
	}
};

Jika json.stringify tidak tersedia, kami menentukan fungsi baru yang menerima parameter OBJ tunggal. Parameter ini boleh menjadi satu nilai, array, atau objek kompleks seperti OBJ1 di atas. Kod mengkaji jenis objek. Nilai tunggal dikembalikan dengan serta -merta dan hanya rentetan yang diubahsuai untuk meletakkan petikan di sekitar nilai. Sekiranya array atau objek diluluskan, kod itu melangkah melalui setiap harta:

1. nilai rentetan mempunyai petikan ditambah.
2. tatasusunan kanak -kanak atau objek secara rekursif diserahkan kepada fungsi json.stringify.
3. Nilai yang dihasilkan ditambahkan pada akhir array JSON [] sebagai rentetan "Nama: Nilai", atau hanya satu nilai untuk item array.
4. Akhirnya, array JSON ditukarkan ke senarai koma-Delimited dan dikembalikan dalam array [] atau objek {}kurungan yang diperlukan.

Jika sakit otak anda, anda akan gembira mengetahui bahawa kod JSON.Parse lebih mudah:

var obj1 = {
	b1: true,
	s1: "text string",
	n1: 12345,
	n2: null,
	n3: undefined,
	a1: [ 1,1,2,3,5,8, [13, 21, 34] ],
	o1: {
		a: [3, 2, 1],
		b: {
			c: 42,
			d: [ 3.14, 1.618 ]
		}
	}
};

Ini menukarkan rentetan JSON ke objek menggunakan eval (). Sebelum anda tergesa -gesa untuk melaksanakan fungsi Serialization JSON dalam semua projek anda, terdapat beberapa gotchas:

• Kod ini sengaja disimpan pendek. Ia akan berfungsi dalam kebanyakan situasi, tetapi terdapat perbezaan yang halus dengan kaedah asli Json.Stringify dan JSON.Parse.
• tidak setiap objek JavaScript disokong. Sebagai contoh, tarikh () akan mengembalikan objek kosong, sedangkan kaedah JSON asli akan menyandarkannya ke rentetan tarikh/masa.
• Kod ini akan bersiri fungsi, mis. var obj1 = {myfunc: function (x) {}}; sedangkan kaedah JSON asli tidak akan.
• objek yang sangat besar akan membuang ralat rekursi.
• Penggunaan eval () dalam json.parse secara semula jadi berisiko. Ia tidak akan menjadi masalah jika anda memanggil perkhidmatan web anda sendiri, tetapi panggilan ke aplikasi pihak ketiga secara tidak sengaja atau sengaja memecahkan halaman anda dan menyebabkan masalah keselamatan. Sekiranya perlu, parser JavaScript yang lebih selamat (tetapi lebih lama dan lebih perlahan) boleh didapati dari json.org.

Saya harap anda dapati kod itu berguna. Jangan ragu untuk menggunakannya dalam projek anda sendiri. Fail sumber:

• Halaman demonstrasi Serialization JSON
• kod javascript penuh (json-serialisasi.js)
• Muat turun kod penuh dalam fail zip

Bacaan Berkaitan:

• bagaimana untuk membangunkan plugin jQuery
• Cara Membina Plugin JQuery Textarea Auto-Expanding

akan datang: Aplikasi berguna Serialization JSON ...

soalan yang sering ditanya mengenai siri JavaScript JSON

Apakah Serialisasi JSON dalam JavaScript? Ini dilakukan dengan menggunakan kaedah JSON.Stringify (). Rentetan JSON yang dihasilkan boleh disimpan atau dihantar ke pelayan. Ini adalah proses penting dalam pembangunan web kerana ia membolehkan data dengan mudah dipindahkan antara klien dan pelayan. Berikut adalah contoh mudah:

biarkan obj = {name: "John", umur: 30, bandar: "new york"};

biarkan myjson = json.stringify (obj); 'Myjson'.

Bolehkah saya bersiri di JavaScript? Kaedah ini berfungsi bukan sahaja dengan susunan mudah, tetapi juga dengan tatasusunan objek. Berikut adalah contoh:

let arr = [1, 2, 3, 4];
biarkan myjson = json.stringify (arr);

bagaimana saya menafikan rentetan JSON dalam javascript?

Deserialization adalah proses menukar rentetan JSON kembali ke objek JavaScript. Ini dilakukan dengan menggunakan kaedah JSON.Parse (). Berikut adalah contoh:

biarkan myjson = '{"name": "John", "umur": 30, "City": "New York"}'; Json.parse ().

Apa yang berlaku jika saya cuba untuk bersiri fungsi dalam JavaScript? Ini kerana JSON adalah format data dan tidak menyokong kebolehan pelaksanaan JavaScript. Ini membolehkan anda menyaring nilai-nilai atau mengubahnya semasa proses bersiri. Ini dilakukan dengan menyediakan nombor sebagai hujah ketiga kepada json.stringify (), yang mewakili bilangan ruang yang digunakan untuk lekukan. Secara lalai, apabila anda bersiri objek tarikh dalam JavaScript, ia akan ditukar kepada rentetan dalam format ISO. Apabila anda menafikannya, ia tidak akan ditukar secara automatik ke objek tarikh. Anda perlu menukarnya secara manual dengan menggunakan pembina tarikh baru (). Apabila objek mempunyai kaedah tojson (), json.stringify () memanggilnya dan bersiri nilai yang dikembalikan, bukannya objek asal. JavaScript boleh mewakili nombor dengan tepat sehingga 2^53 - 1. Jika anda perlu bersiri nombor yang lebih besar, anda mungkin perlu menukarnya ke rentetan terlebih dahulu untuk mengelakkan kehilangan ketepatan.

Atas ialah kandungan terperinci Serialization JSON Cross-Browser di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!