การแนะนำ:
บทนี้ไม่ได้อธิบายหลักการพื้นฐานบางประการของ JS ในเชิงลึกเช่นตัวชี้ขอบเขตและต้นแบบนี้ มันเกี่ยวข้องกับบางส่วนที่เอื้อต่อการทำให้รหัสง่ายขึ้นและปรับปรุงประสิทธิภาพการดำเนินการในระหว่างการพัฒนาหรือสามารถใช้เป็นวิธีการเชิงประจักษ์ ความยาวไม่นานและขั้นตอนเล็ก ๆ ช่วยให้คุณอ่านบทความทั้งหมดและสัมผัสกับความสุขของการเขียนโปรแกรม
รับตัวเลขสุ่มภายในสองช่วงเวลา
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getRandomNum (นาที, สูงสุด) {// รับหมายเลขสุ่มภายในสองช่วงเวลา
// @南南南南南南แนะนำว่าพารามิเตอร์แรกนั้นมากกว่าพารามิเตอร์ที่สองดังนั้นการเพิ่มการตัดสินจึงมีความน่าเชื่อถือมากกว่า
ถ้า (ขั้นต่ำ> สูงสุด)
max = [min, min = max] [0]; // แลกเปลี่ยนค่าตัวแปรสองค่าได้อย่างรวดเร็ว
ช่วง var = สูงสุด - min + 1;
var rand = math.random ();
return min + math.floor (ช่วงแรนด์ *);
-
ส่งคืนพารามิเตอร์บวก/ลบแบบสุ่ม
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getRandomxy (num) {// ส่งคืนพารามิเตอร์บวก/ลบแบบสุ่ม
num = หมายเลขใหม่ (num);
if (math.random () <= 0.5)
num = -num;
กลับมา;
-
setInterval () หรือ settimeout () ฟังก์ชั่นการจับเวลาผ่านพารามิเตอร์พารามิเตอร์ผ่าน
การคัดลอกรหัสมีดังนี้:
var s = 'ฉันเป็นพารามิเตอร์';
ฟังก์ชั่น fn (args) {
console.log (args);
-
var a = setInterval (fn (s), 100); // xxxxx ข้อผิดพลาด xxxxxx
var b = setInterval (ฟังก์ชัน () {// ถูกต้องโทรฟังก์ชันที่กำหนดเวลาด้วยฟังก์ชันที่ไม่ระบุชื่อ
fn (s);
}, 100);
setInterval () หรือ settimeout () ตัวจับเวลาเรียกซ้ำ
การคัดลอกรหัสมีดังนี้:
var s = true;
ฟังก์ชั่น FN2 (a, b) {// ขั้นตอนที่ 3
ถ้า (s) {
ClearInterval (a);
ClearInterval (b);
-
-
ฟังก์ชั่น fn (a) {// ขั้นตอนที่ 2
var b = setInterval (ฟังก์ชัน () {
FN2 (a, b) // ผ่านสองตัวจับเวลา
}, 200)
-
var a = setInterval (ฟังก์ชัน () {// ขั้นตอนที่ 1
fn (a); // b หมายถึงตัวจับเวลาเองซึ่งสามารถส่งผ่านพารามิเตอร์ที่นั่ง
}, 100);
แปลงสตริงเป็นหมายเลข
การคัดลอกรหัสมีดังนี้:
// ไม่จำเป็นสำหรับหมายเลขใหม่ (สตริง) หรือหมายเลข (สตริง) เพียงแค่ลบศูนย์จากสตริง
var str = '100'; // str: สตริง
var num = str - 0; // num: number
การตัดสินค่าโมฆะ
การคัดลอกรหัสมีดังนี้:
var s = ''; // สตริงเปล่า
if (! s) // สตริงว่างจะถูกแปลงเป็นบูลีนเท็จโดยค่าเริ่มต้นและสามารถเขียนได้โดยตรงในคำสั่งการตัดสิน
if (s! = null) // แต่สตริงที่ว่างเปล่า! = null
if (s! = undefined) // สตริงที่ว่างเปล่าก็คือ! = undefined
วิธีเบราว์เซอร์ Parseint ()
การคัดลอกรหัสมีดังนี้:
// การแปลงต่อไปนี้คือ 0 ใน IE และเบราว์เซอร์อื่น ๆ คือ 1 นี่เกี่ยวข้องกับคำอธิบายของเบราว์เซอร์ IE ของตัวเลข
var inum = parseInt (01);
// ดังนั้นการเขียนที่เข้ากันได้คือ
var num = parseInt (หมายเลขใหม่ (01));
Firebug ดีบั๊กรหัส JS อย่างสะดวกสบาย
การคัดลอกรหัสมีดังนี้:
// Firebug มีวัตถุคอนโซลในตัวให้วิธีการในตัวเพื่อแสดงข้อมูล
-
* 1: console.log () ซึ่งสามารถใช้แทนการแจ้งเตือน () หรือ document.write (), รองรับเอาต์พุตตัวยึดตำแหน่ง, อักขระ (%s), จำนวนเต็ม (%d หรือ%i), หมายเลขจุดลอยตัว (%f) และวัตถุ (%o) ตัวอย่างเช่น: console.log (" %d ปี %d เดือน %d day", 2011, 3, 26)
* 2: หากมีข้อมูลมากเกินไปคุณสามารถแสดงเป็นกลุ่มได้ วิธีการที่ใช้คือ console.group () และ console.groupend ()
* 3: console.dir () สามารถแสดงคุณสมบัติและวิธีการทั้งหมดของวัตถุ
* 4: console.dirxml () ใช้เพื่อแสดงรหัส HTML/XML ที่มีอยู่ในโหนดของเว็บเพจ
* 5: console.assert () ยืนยันใช้เพื่อตรวจสอบว่านิพจน์หรือตัวแปรเป็นจริง
* 6: console.trace () ใช้เพื่อติดตามแทร็กการโทรของฟังก์ชัน
* 7: console.time () และ console.timeend () ใช้เพื่อแสดงเวลาทำงานของรหัส
* 8: การวิเคราะห์ประสิทธิภาพ (Profiler) คือการวิเคราะห์เวลาทำงานของแต่ละส่วนของโปรแกรมเพื่อค้นหาคอขวด วิธีที่ใช้คือ console.profile () .... fn .... console.profileend ()
-
ใช้มิลลิวินาทีในปัจจุบันอย่างรวดเร็ว
การคัดลอกรหัสมีดังนี้:
// t == ค่ามิลลิวินาทีของระบบปัจจุบันเหตุผล: ตัวดำเนินการ + สัญญาณจะถูกเรียกและวิธีการของวันที่ () จะถูกเรียก
var t = +วันที่ใหม่ ();
ใช้บิตจำนวนเต็มทศนิยมอย่างรวดเร็ว
การคัดลอกรหัสมีดังนี้:
// x == 2 ค่า x ต่อไปนี้คือ 2 และสามารถแปลงตัวเลขลบได้
var x = 2.00023 | 0;
// x = '2.00023' | 0;
การแลกเปลี่ยนค่าตัวแปรสองค่า (ไม่มีจำนวนเงินกลาง)
การคัดลอกรหัสมีดังนี้:
var a = 1;
var b = 2;
a = [b, b = a] [0]
การแจ้งเตือน (A+'_'+B) // ค่าของผลลัพธ์ 2_1, A และ B ถูกสลับไปแล้ว
ตรรกะหรือ '||' ผู้ดำเนินการ
การคัดลอกรหัสมีดังนี้:
// b ไม่เป็นโมฆะ: a = b, b เป็นโมฆะ: a = 1
var a = b || 1;
// การใช้งานที่พบบ่อยที่สุดคือการผ่านพารามิเตอร์สำหรับวิธีการปลั๊กอินและรับองค์ประกอบเป้าหมายเหตุการณ์: Event = Event || window.event
// เช่นมีหน้าต่างวัตถุที่มีอยู่ แต่ ff ไม่ได้
เฉพาะวัตถุวิธีการมีคุณสมบัติต้นแบบ
การคัดลอกรหัสมีดังนี้:
// วิธีการมีคุณสมบัติต้นแบบต้นแบบวัตถุในขณะที่ข้อมูลดั้งเดิมไม่มีคุณสมบัตินี้เช่น var a = 1, a ไม่มีคุณสมบัติต้นแบบ
ฟังก์ชั่นบุคคล () {} // ตัวสร้างมนุษย์
person.prototype.run = function () {Alert ('Run ... '); } // วิธีการเรียกใช้ต้นแบบ
person.run (); // ข้อผิดพลาด
var p1 = คนใหม่ (); // วิธีการเรียกใช้ต้นแบบจะถูกกำหนดให้กับ P1 เฉพาะเมื่อใช้ตัวดำเนินการใหม่
p1.run (); // วิ่ง...
รับวันของสัปดาห์อย่างรวดเร็ว
การคัดลอกรหัสมีดังนี้:
// เวลาปัจจุบันของระบบการคำนวณคือสัปดาห์
var week = "วันนี้คือ: สัปดาห์" + "วันที่หนึ่งสอง, สาม, สี่, ห้า, หก, หก" .charat (วันที่ใหม่ (). getday ());
อคติปิด
การคัดลอกรหัสมีดังนี้:
-
* การปิด: ร่างกายวิธี JS ใด ๆ สามารถเรียกได้ว่าปิดไม่เพียง แต่จะเกิดขึ้นหากฟังก์ชั่นแบบอินไลน์หมายถึงพารามิเตอร์หรือคุณสมบัติที่แน่นอนของฟังก์ชันภายนอก
* มันมีขอบเขตอิสระซึ่งสามารถมีหลายส่วนย่อยได้ (เช่นวิธีการซ้อนกันวิธีการ) และในที่สุดขอบเขตการปิดคือขอบเขตของวิธีนอกสุด
* มันมีพารามิเตอร์วิธีการของตัวเองและพารามิเตอร์วิธีการของฟังก์ชันฝังตัวทั้งหมด ดังนั้นเมื่อฟังก์ชั่นฝังตัวมีการอ้างอิงจากภายนอกขอบเขตของการอ้างอิงคือขอบเขตเมธอด (ระดับบนสุด) ที่ฟังก์ชันอ้างอิงอยู่
-
ฟังก์ชั่น a (x) {
ฟังก์ชั่น b () {
การแจ้งเตือน (x); // พารามิเตอร์ฟังก์ชันภายนอกอ้างอิง
-
กลับ B;
-
var run = a ('run ... ');
// เนื่องจากการขยายขอบเขตตัวแปรของฟังก์ชันภายนอกสามารถอ้างอิงและแสดง
วิ่ง(); // Alert (): Run ..
รับสตริงพารามิเตอร์ที่อยู่และการรีเฟรชที่กำหนดเวลา
การคัดลอกรหัสมีดังนี้:
// รับเครื่องหมายคำถาม? เนื้อหาต่อไปนี้รวมถึงเครื่องหมายคำถาม
var x = window.location.search
// รับเนื้อหาที่อยู่เบื้องหลังหมายเลขการเตือน # รวมถึงหมายเลข #
var y = window.location.hash
// การรีเฟรชหน้าเว็บอัตโนมัติสามารถทำได้ด้วยตัวจับเวลา
window.location.reload ();
เป็นโมฆะและไม่ได้กำหนด
การคัดลอกรหัสมีดังนี้:
-
* ประเภทที่ไม่ได้กำหนดมีค่าเดียวเท่านั้นนั่นคือไม่ได้กำหนด เมื่อตัวแปรที่ประกาศไม่ได้เริ่มต้นค่าเริ่มต้นของตัวแปรจะไม่ได้กำหนด
* ประเภท null ยังมีค่าเพียงหนึ่งค่าเช่น NULL NULL ใช้เพื่อเป็นตัวแทนของวัตถุที่ยังไม่ได้มีอยู่และมักจะใช้เพื่อเป็นตัวแทนของฟังก์ชั่นที่พยายามส่งคืนวัตถุที่ไม่มีอยู่
* Ecmascript เชื่อว่า Undefined นั้นมาจาก Null ดังนั้นพวกเขาจึงถูกกำหนดให้เท่ากัน
* แต่ถ้าในบางกรณีเราต้องแยกความแตกต่างระหว่างค่าทั้งสองนี้เราควรทำอย่างไร? สามารถใช้สองวิธีต่อไปนี้ได้
* เมื่อทำการตัดสินจะเป็นการดีที่สุดที่จะใช้ '===' การตัดสินประเภทที่แข็งแกร่งเมื่อตัดสินว่าวัตถุนั้นมีค่าตามความต้องการหรือไม่
-
var a;
การแจ้งเตือน (a === null); // เท็จเพราะ A ไม่ใช่วัตถุที่ว่างเปล่า
การแจ้งเตือน (a === ไม่ได้กำหนด); // จริงเนื่องจาก A ไม่ได้เริ่มต้นค่าจะไม่ถูกกำหนด
// แนะนำ
การแจ้งเตือน (null == ไม่ได้กำหนด); // จริงเพราะตัวดำเนินการ '==' จะทำการแปลงประเภท
// ในทำนองเดียวกัน
การแจ้งเตือน (1 == '1'); // จริง
การแจ้งเตือน (0 == เท็จ); // จริงเปลี่ยนเท็จเป็นหมายเลขประเภท 0
เพิ่มพารามิเตอร์แบบไดนามิกลงในวิธีการ
การคัดลอกรหัสมีดังนี้:
// วิธี A มีพารามิเตอร์อีกหนึ่งพารามิเตอร์ 2
ฟังก์ชั่น a (x) {
var arg = array.prototype.push.call (อาร์กิวเมนต์, 2);
การแจ้งเตือน (อาร์กิวเมนต์ [0]+'__'+อาร์กิวเมนต์ [1]);
-
ปรับแต่งสไตล์ชายแดนที่เลือก
การคัดลอกรหัสมีดังนี้:
<!-คัดลอกไปที่หน้าเพื่อลองเอฟเฟกต์คุณสามารถปรับแต่งสไตล์ได้ตามต้องการ->
<span style = "เส้นขอบ: 1px red red; ตำแหน่ง: สัมบูรณ์; ล้น: ซ่อน;" -
<select style = "margin: -2px;">
<pettion> กำหนดเองเลือกสไตล์เส้นขอบ </ption>
<Poption> 222 </potion>
<Poption> 333 </potion>
</เลือก>
</span>
จานสีที่ง่ายที่สุด
การคัดลอกรหัสมีดังนี้:
<!-js เพื่อแยกค่าของค่าและตั้งค่าสีใด ๆ ให้กับวัตถุใด ๆ->
<ประเภทอินพุต = สี />
ฟังก์ชั่นวัตถุอาร์เรย์?
การคัดลอกรหัสมีดังนี้:
var anobject = {}; // วัตถุ
anobject.aproperty = "คุณสมบัติของวัตถุ"; // คุณสมบัติของวัตถุ
anobject.amethod = function () {alert ("วิธีการของวัตถุ")}; // วิธีของวัตถุ
// มุ่งเน้นไปที่สิ่งต่อไปนี้:
การแจ้งเตือน (anobject ["aproperty"]); // คุณสามารถเข้าถึงแอตทริบิวต์เป็นอาร์เรย์ที่มีชื่อแอตทริบิวต์เป็นตัวห้อย
Anobject ["Amethod"] (); // คุณสามารถเรียกวิธีการเป็นอาร์เรย์ที่มีชื่อวิธีเป็นตัวห้อย
สำหรับ (var s ใน anobject) // ถ่ายโอนคุณสมบัติและวิธีการทั้งหมดของวัตถุสำหรับการประมวลผลซ้ำ
การแจ้งเตือน (s +” คือ” + typeof (anobject [s]));
// มันเหมือนกันสำหรับวัตถุประเภทฟังก์ชัน:
var afunction = function () {}; // ฟังก์ชัน
afunction.aproperty = "คุณสมบัติของฟังก์ชั่น"; // คุณสมบัติของฟังก์ชั่น
afunction.amethod = function () {การแจ้งเตือน ("วิธีการฟังก์ชั่น")}; // วิธีการทำงาน
// มุ่งเน้นไปที่สิ่งต่อไปนี้:
การแจ้งเตือน (afunction ["aproperty"]); // คุณสามารถเข้าถึงคุณสมบัติเป็นอาร์เรย์ด้วยชื่อแอตทริบิวต์เป็นตัวห้อย
Afunction ["Amethod"] (); // คุณสามารถเรียกวิธีการโดยใช้ชื่อเมธอดเป็นตัวห้อยเมื่อใช้ฟังก์ชันเป็นตัวห้อยสำหรับอาร์เรย์
สำหรับ (var s ใน afunction) // ซ้ำคุณสมบัติและวิธีการทั้งหมดของฟังก์ชันการสำรวจเพื่อการประมวลผลซ้ำ
การแจ้งเตือน (s +” คือ” + typeof (afunction [s]));
การคัดลอกรหัสมีดังนี้:
-
* ใช่วัตถุและฟังก์ชั่นสามารถเข้าถึงและประมวลผลได้เช่นอาร์เรย์โดยใช้ชื่อแอตทริบิวต์หรือชื่อวิธีเป็นตัวห้อย
* ดังนั้นควรพิจารณาอาร์เรย์หรือวัตถุหรือไม่? เรารู้ว่าอาร์เรย์ควรได้รับการพิจารณาโครงสร้างข้อมูลเชิงเส้น โดยทั่วไปแล้วโครงสร้างข้อมูลเชิงเส้นมีกฎบางอย่างซึ่งเหมาะสำหรับการดำเนินการทำซ้ำแบบรวมเป็นต้นซึ่งเป็นเหมือนคลื่น
* วัตถุเป็นโครงสร้างข้อมูลที่ไม่ต่อเนื่องที่เหมาะสำหรับการอธิบายสิ่งที่กระจัดกระจายและเป็นส่วนตัวเช่นอนุภาค
* ดังนั้นเรายังสามารถถามได้ว่า: วัตถุในคลื่นจาวาสคริปต์หรืออนุภาคหรือไม่? หากมีทฤษฎีควอนตัมวัตถุคำตอบจะต้องเป็น: คู่ของคลื่นความเป็นคู่!
* ดังนั้นฟังก์ชั่นและวัตถุใน JavaScript จึงมีทั้งลักษณะของวัตถุและอาร์เรย์ อาร์เรย์ที่นี่เรียกว่า "พจนานุกรม" ซึ่งเป็นคอลเลกชันของคู่ชื่อชื่อที่สามารถยืดและย่อได้โดยพลการ ในความเป็นจริงการใช้งานภายในของวัตถุและฟังก์ชั่นเป็นโครงสร้างพจนานุกรม แต่โครงสร้างพจนานุกรมนี้แสดงให้เห็นถึงลักษณะที่หลากหลายผ่านไวยากรณ์ที่เข้มงวดและประณีต เช่นเดียวกับกลศาสตร์ควอนตัมใช้อนุภาคเพื่ออธิบายและจัดการกับปัญหาในบางสถานที่ในขณะที่คลื่นเพื่ออธิบายและจัดการกับปัญหาอื่น ๆ นอกจากนี้คุณยังสามารถเลือกใช้วัตถุหรืออาร์เรย์เพื่ออธิบายและจัดการกับปัญหาได้อย่างอิสระเมื่อจำเป็น ตราบใดที่คุณยังเก่งในการจับคุณสมบัติที่ยอดเยี่ยมเหล่านี้ของ JavaScript คุณสามารถเขียนโค้ดที่กระชับและทรงพลังมากมาย
-
การคลิกที่พื้นที่ว่างอาจทำให้องค์ประกอบปิด/ซ่อน
การคัดลอกรหัสมีดังนี้:
-
* บางครั้งหน้ามีเมนูแบบเลื่อนลงหรืออะไรบางอย่างซึ่งต้องการให้ผู้ใช้ซ่อนเมื่อคลิกที่ว่างเปล่าหรือคลิกที่องค์ประกอบอื่น ๆ
* สามารถเรียกเหตุการณ์การคลิกเอกสารทั่วโลก
* @param {Object} "วัตถุเป้าหมาย"
-
$ (เอกสาร) .Click (ฟังก์ชั่น (e) {
$ ("วัตถุเป้าหมาย"). ซ่อน ();
-
-
* แต่ข้อเสียอย่างหนึ่งคือเมื่อคุณคลิกที่องค์ประกอบและต้องการให้มันแสดง
* หากคุณไม่ป้องกันเหตุการณ์จากฟองสบู่จนถึงวัตถุเอกสารทั่วโลกที่คลิกในเวลาวิธีการข้างต้นจะถูกดำเนินการ
-
$ ("วัตถุเป้าหมาย") คลิก (ฟังก์ชั่น (เหตุการณ์) {
เหตุการณ์ = เหตุการณ์ || window.event;
Event.StopPropagation (); // เมื่อคลิกที่วัตถุเป้าหมายป้องกันเหตุการณ์จาก Bubbled ในเวลา
$ ("วัตถุเป้าหมาย"). สลับ ();
-
ข้างต้นเป็นวิธีการจาวาสคริปต์ที่ใช้กันทั่วไปโดยสรุปโดยฉัน ฉันหวังว่าคุณจะชอบมัน