Penjelasan terperinci tentang kaedah penulisan alternatif kemahiran JavaScript

Penjelasan terperinci tentang kaedah penulisan alternatif kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 15:06:05

asal

1384 orang telah melayarinya

JavaScript ialah bahasa skrip untuk Internet!

JavaScript digunakan oleh berjuta-juta halaman web untuk menambah baik reka bentuk, mengesahkan borang, mengesan penyemak imbas, mencipta kuki dan banyak lagi.

JavaScript ialah bahasa skrip yang paling popular di Internet.

JavaScript mudah digunakan! Anda akan menyukainya!

JavaScript ialah bahasa skrip yang ditafsirkan dengan sintaks yang fleksibel, membenarkan orang yang berbeza menulis fungsi yang sama dalam pelbagai cara yang berbeza. Bagaimana untuk mengatur kod JavaScript supaya orang lain dapat melihat sekilas bahawa anda tidak mudah? Adakah anda benar-benar menantikan orang lain berseru "Jadi anda masih boleh menulisnya seperti ini" selepas membaca kod anda?

N cara untuk menulis fungsi tanpa nama

Fungsi tanpa nama JS ialah fungsi laksana sendiri tanpa mengisytiharkan nama fungsi Formatnya adalah seperti berikut:

(function(){})();

Salin selepas log masuk

Malah, dalam projek kami sering menambah ";" di hadapan:

;function(){}();

Salin selepas log masuk

Oleh kerana sintaks JS, koma bertitik boleh ditinggalkan, tetapi mekanisme ini juga boleh menyebabkan ralat yang tidak dijangka. Untuk mengelakkan ralat sintaks yang disebabkan oleh penggabungan dan pemampatan kod ke dalam satu fail selepas ia masuk dalam talian, menambah ";" boleh mengelakkan ralat yang tidak diketahui.

Tetapi kadangkala kita melihat fungsi tanpa nama ditulis seperti ini dalam perpustakaan atau pemalam orang lain:

+function(){}();

Salin selepas log masuk

"+" ialah pengendali di sini, dan pengendali mempunyai keutamaan yang sangat tinggi, jadi pengisytiharan fungsi di sebelah kanan ditambah kurungan (sebenarnya cara fungsi ditulis) dilaksanakan secara langsung. Malah, ia bukan sahaja boleh didahului oleh tanda "+", tetapi juga operator seperti "-", "!", "~", dan "++" boleh digunakan. Ini hanyalah pengenalan lanjutan Kaedah penulisan khusus bergantung pada piawaian bersatu pasukan.

Tinggalkan Math.ceil() dan Math.floor rounding

Mungkin anda pernah melihat dua simbol ini ~~ dan |0 dalam kod lain, lihat sahaja hasil yang sedang dijalankan:

>> var a1 = 1.23
>> ~~a1
1
>> var a2 = 2.345
>> a2|0
2
>> var a3 = -3.45
>> ~~a3
-3
>> var a4 = -4.5
>> a4|0
-4

Salin selepas log masuk

Sila ambil perhatian bahawa cara penulisan ini bukanlah asli, ia hanya dipetik untuk menganalisis dan menerangkan cara penulisan alternatif ini. Diterangkan secara ringkas, ~ ialah operator penolakan bitwise, yang boleh menukar nombor titik terapung kepada integer dengan membuang semua digit selepas titik perpuluhan. Integer positif boleh ditukar kepada nilai heksadesimal tidak bertanda. Kemudian menafikannya sekali lagi (~~) untuk mendapatkan integer asal. Jika anda begitu bersungguh-sungguh dan tidak suka melaraskan kaedah, adakah anda fikir ia adalah pengoptimuman?

Nota: Jika anda perlu melakukan operasi pembundaran yang ketat, anda harus menggunakan kaedah ini dengan berhati-hati, kemudian anda masih perlu menggunakan fungsi Matematik.

jika dan selainnya bukan satu-satunya

Pertimbangan bersyarat menggunakan if-else adalah logik yang sangat jelas, tetapi ia tidak kelihatan sangat ringkas apabila jumlah data yang diproses tidak besar:

if (a===1) { //此处强烈建议用严格等于符号“===”，不会进行类型转换
a=2
} else if (a===3) {
a=4
} else {
a=5
}

Salin selepas log masuk

Lihat menggunakan || dan && untuk mengurangkan kod:

((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)

Salin selepas log masuk

Selesaikannya hanya dalam satu langkah dan turunkan berat badan dengan jayanya. ||. dan &&, tidak perlu dikatakan bahawa prinsipnya sangat mudah. Pengendali koma yang digunakan di dalamnya tidak mudah difahami

(a===1 )&#63; a=2:( (a===3) &#63; (a=4) : (a=5) )

Salin selepas log masuk

Cara penulisan ini nampaknya mempunyai struktur yang dipermudahkan, tetapi agak sukar untuk orang lain membaca kod anda.

Gunakan toString untuk menggantikan struktur DOM penyambungan rentetan yang menjengkelkan

Jika anda ingin menjana struktur DOM secara dinamik, kami biasanya melaksanakannya seperti ini:

var template = "<div>" 
+ "<h2>{title}</h2>"
+ "<div class='content' yAttr=''>{content}</div>"
+ "</div>"

Salin selepas log masuk

Jika anda menambah pelbagai atribut dan parameter, tanda petikan besar dan kecil akan keliru dan mudah untuk melaporkan ralat. Walau bagaimanapun, ES6 menyediakan String Templat untuk membantu kami menyelesaikan masalah ini Anda boleh menulisnya seperti ini:

var template = <div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div>

Salin selepas log masuk

Tetapi masalahnya ialah ES6 belum tiba secara rasmi... Jangan takut, function.toString boleh menyelesaikan rasa malu apabila kita berada dalam kegelapan:

var rComment = /\/\*([\s\S]*&#63;)\*\//;
// multiply string 
function ms(fn){ 
return fn.toString().match(rComment)[1]
}; 
ms(function(){/* 
<div> 
<h2>{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div> */
})

Salin selepas log masuk

Output di sini adalah sama seperti output rentetan sebelumnya hanya perlu memberi perhatian kepada struktur DOM mereka sendiri.

Tambah sokongan modul AMD, kotak kod gesaan B

Isytiharkan spesifikasi modul AMD (Asynchronous Module Definition) untuk kod yang anda tulis, supaya orang lain boleh memuatkan modul anda terus melalui spesifikasi AMD Jika orang lain tidak memuatkan modul anda melalui spesifikasi, Anda juga boleh mengembalikan global biasa objek dengan anggun. Mari kita lihat cara jQueryUI ditulis:

(function( factory ) { 
if ( typeof define === "function" && define.amd ) { 
// AMD模式。且依赖"jQuery"这个插件 
define( [ "jquery" ], factory ); } 
else { 
// 浏览器全局模式 
factory( jQuery ); 
} 
}(function( $ ) { 
// 这里放模块代码 
return $.widget; 
}));

Salin selepas log masuk

Tukar kepada struktur modul AMD untuk menjadikan kod anda lebih sesuai untuk pemuatan sebelah penyemak imbas bagi kebergantungan skrip Tulis kod dalam format ini untuk memastikan orang lain mengetahui anda adalah pembangun profesional apabila mereka melihat kod tersebut.

Warisi kaedah optimum

Fleksibiliti JavaScript mempunyai lebih daripada sepuluh kaedah pewarisan, besar dan kecil. Setiap kaedah penulisan mempunyai kelebihan dan kekurangan yang berbeza Setiap kaedah tidak akan disenaraikan satu persatu. Mari kita ambil kaedah pewarisan yang biasa digunakan sebagai contoh

这种这种方法实际上是将Child.prototype和Parent.prototype中保存的指针指向了同一个对象，所以子对象原型中扩展一些属性以便之后继续继承的话，父对象的原型也会被改写。所以为了解决这个问题，尝试借用一个临时构造器的写法：

function Empty(){}
Empty.prototype = Parent.prototype;
Child.prototype = new Empty();
Child.prototype.constructor = Child;

Salin selepas log masuk

这样父对象的自身属性和原型方法得到保护。“最优”有点夸大，但是是相比较而言的。相信每个人都有自己的写法，还有借用call和apply实现属性继承的优缺点，篇幅有限不一一介绍。

总结

上述所有的JavaScript的另类写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法。一些是为了提升我们代码的兼容性和性能，比如AMD和继承的方式。……本人菜鸟一枚，上述内容肯定还有不全和没解释透彻的地方以后再补充。

以上内容是针对JavaScript的另类写法的相关介绍，希望对大家有所帮助！