แนะนำ
บางโหมดที่เราแนะนำในบทความนี้เรียกว่าโหมดการเริ่มต้นและโหมดประสิทธิภาพซึ่งส่วนใหญ่ใช้สำหรับการเริ่มต้นและการปรับปรุงประสิทธิภาพ บางโหมดได้รับการกล่าวถึงก่อนหน้านี้ดังนั้นนี่เป็นเพียงบทสรุป
ฟังก์ชั่นที่ดำเนินการทันที
ในบทที่ 4 ของซีรี่ส์นี้ "ฟังก์ชั่นนิพจน์ที่เรียกว่าตอนนี้" เราได้อธิบายฟังก์ชั่นที่คล้ายกันในรายละเอียด ที่นี่เราจะให้ตัวอย่างง่ายๆสองตัวอย่างเพื่อสรุป
การคัดลอกรหัสมีดังนี้:
// หลังจากประกาศฟังก์ชั่นให้ดำเนินการฟังก์ชั่นทันที
(การทำงาน () {
console.log ('ระวัง!');
-
// ฟังก์ชั่นที่ประกาศด้วยวิธีนี้สามารถดำเนินการได้ทันที
!การทำงาน () {
console.log ('ระวัง!');
-
// วิธีการต่อไปนี้ก็โอเค
~ function () { / * code * /} ();
-function () { / * รหัส * /} ();
+function () { / * code * /} ();
ดำเนินการเริ่มต้นวัตถุทันที
รูปแบบนี้หมายความว่าเมื่อมีการประกาศวัตถุ (ไม่ใช่ฟังก์ชั่น) หนึ่งในวิธีการหนึ่งในวัตถุจะถูกดำเนินการทันทีเพื่อดำเนินการเริ่มต้น โดยปกติรูปแบบนี้สามารถใช้ในรหัสที่ดำเนินการในครั้งเดียว
การคัดลอกรหัสมีดังนี้:
-
// ที่นี่คุณสามารถกำหนดค่าคงที่และตั้งค่าอื่น ๆ
MaxWidth: 600,
MaxHeight: 400,
// แน่นอนคุณสามารถกำหนดวิธีการยูทิลิตี้
Gimmemax: function () {
ส่งคืนสิ่งนี้ maxWidth + "x" + this.maxHeight;
-
// การเริ่มต้น
init: function () {
console.log (this.gimmemax ());
// รหัสเพิ่มเติม ...
-
}). init (); // สิ่งนี้เริ่มต้นการเริ่มต้น
การเริ่มต้นสาขา
การเริ่มต้นสาขาหมายถึงการเริ่มต้นของรหัสที่แตกต่างกันตามเงื่อนไขที่แตกต่างกัน (สถานการณ์) ซึ่งเป็นการกำหนดคำสั่งตามเงื่อนไขที่เรียกว่า ก่อนหน้านี้เมื่อเราทำการประมวลผลเหตุการณ์เรามักจะใช้รหัสดังต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var utils = {
AddListener: ฟังก์ชั่น (el, type, fn) {
if (typeof window.addeVentListener === 'function') {
El.addeventListener (ประเภท, fn, false);
} อื่นถ้า (typeof document.attachevent! == 'undefined') {
El.attachevent ('on' + type, fn);
} อื่น {
el ['on' + type] = fn;
-
-
RemoveListener: ฟังก์ชั่น (el, type, fn) {
-
-
มาปรับปรุงกันเถอะ ก่อนอื่นเราจำเป็นต้องกำหนดอินเทอร์เฟซสองตัวหนึ่งอันสำหรับเพิ่มการจัดการเหตุการณ์และอื่น ๆ สำหรับการลบที่จับเหตุการณ์ รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var utils = {
addListener: null,
Removelistener: null
-
รหัสการใช้งานมีดังนี้:
การคัดลอกรหัสมีดังนี้:
if (typeof window.addeVentListener === 'function') {
utils.addListener = function (el, type, fn) {
El.addeventListener (ประเภท, fn, false);
-
} อื่นถ้า (typeof document.attachevent! == 'undefined') {// ie
utils.addListener = function (el, type, fn) {
El.attachevent ('on' + type, fn);
-
utils.remoVelistener = function (el, type, fn) {
El.DetacheVent ('on' + type, fn);
-
} else {// เบราว์เซอร์เก่าอื่น ๆ
utils.addListener = function (el, type, fn) {
el ['on' + type] = fn;
-
utils.remoVelistener = function (el, type, fn) {
el ['on' + type] = null;
-
-
ใช้งานไม่ได้มากเหรอ? รหัสมีความสง่างามมากขึ้น
ฟังก์ชั่นการประกาศตนเอง
โดยทั่วไปรหัสฟังก์ชั่นที่มีชื่อเดียวกันคือการเขียนใหม่ภายในฟังก์ชั่นเช่น:
การคัดลอกรหัสมีดังนี้:
var scareme = function () {
การแจ้งเตือน ("Boo!");
scarme = function () {
การแจ้งเตือน ("Double Boo!");
-
-
รหัสประเภทนี้สับสนมาก ก่อนอื่นให้ดูที่ผลลัพธ์การดำเนินการของตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
// 1. เพิ่มแอตทริบิวต์ใหม่
scarme.property = "ถูกต้อง";
// 2. Scareme กำหนดค่าใหม่
var prank = scarme;
// 3. โทรเป็นวิธีการ
var spooky = {
Boo: Scarme
-
// โทรด้วยชื่อตัวแปรใหม่
เล่นตลก (); // "boo!"
เล่นตลก (); // "boo!"
console.log (Prank.property); // "อย่างถูกต้อง"
// โทรโดยใช้วิธีการ
spooky.boo (); // "boo!"
spooky.boo (); // "boo!"
console.log (spooky.boo.property); // "อย่างถูกต้อง"
ผ่านผลการดำเนินการจะพบได้ว่าการกำหนดฟังก์ชั่นให้กับตัวแปรใหม่ (หรือวิธีการภายใน) รหัสไม่ได้เรียกใช้รหัส SCARME ที่โอเวอร์โหลดและตัวอย่างต่อไปนี้เป็นสิ่งที่ตรงกันข้าม:
การคัดลอกรหัสมีดังนี้:
// ใช้ฟังก์ชั่นการประกาศตนเอง
Scarme (); // double boo!
Scarme (); // double boo!
console.log (scareme.property); // ไม่ได้กำหนด
เมื่อใช้โมเดลนี้คุณต้องระมัดระวังมากมิฉะนั้นผลลัพธ์ที่แท้จริงอาจแตกต่างจากผลลัพธ์ที่คุณคาดหวัง แน่นอนคุณสามารถใช้พิเศษนี้เพื่อดำเนินการพิเศษ
การเพิ่มประสิทธิภาพหน่วยความจำ
รูปแบบนี้ส่วนใหญ่ใช้คุณสมบัติแอตทริบิวต์ของฟังก์ชั่นเพื่อหลีกเลี่ยงการคำนวณซ้ำจำนวนมาก แบบฟอร์มรหัสปกติมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var myfunc = function (param) {
if (! myfunc.cache [param]) {
var result = {};
// ... การดำเนินการที่ซับซ้อน ...
myfunc.cache [param] = ผลลัพธ์;
-
ส่งคืน myfunc.cache [param];
-
// ที่เก็บแคช
myfunc.cache = {};
อย่างไรก็ตามมีปัญหากับรหัสข้างต้น หากพารามิเตอร์ที่ผ่านเป็น toString หรือวิธีการทั่วไปบางอย่างที่คล้ายกับวัตถุปัญหาจะเกิดขึ้น ในเวลานี้คุณต้องใช้วิธีการในตำนาน HasownProperty, รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var myfunc = function (param) {
if (! myfunc.cache.hasownproperty (param)) {
var result = {};
// ... การดำเนินการที่ซับซ้อน ...
myfunc.cache [param] = ผลลัพธ์;
-
ส่งคืน myfunc.cache [param];
-
// ที่เก็บแคช
myfunc.cache = {};
หรือถ้าคุณผ่านพารามิเตอร์หลายพารามิเตอร์คุณสามารถใช้เมธอด stringify ของ JSON เพื่อสร้างค่าแคชกี้สำหรับการจัดเก็บ รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var myfunc = function () {
var cachekey = json.stringify (array.prototype.slice.call (อาร์กิวเมนต์)),
ผลลัพธ์;
ถ้า (! myfunc.cache [cachekey]) {
ผลลัพธ์ = {};
// ... การดำเนินการที่ซับซ้อน ...
myfunc.cache [cachekey] = ผลลัพธ์;
-
ส่งคืน myfunc.cache [cachekey];
-
// ที่เก็บแคช
myfunc.cache = {};
หรือพารามิเตอร์หลายตัวคุณยังสามารถใช้คุณลักษณะอาร์กิวเมนต์ Callee:
การคัดลอกรหัสมีดังนี้:
var myfunc = function (param) {
var f = arguments.callee
ผลลัพธ์;
if (! f.cache [param]) {
ผลลัพธ์ = {};
// ... การดำเนินการที่ซับซ้อน ...
f.cache [param] = ผลลัพธ์;
-
ส่งคืน f.cache [param];
-
// ที่เก็บแคช
myfunc.cache = {};
สรุป
ไม่จำเป็นต้องสรุปเพียงแค่ดูรหัสอย่างระมัดระวัง