โปรแกรมเมอร์ JavaScript ทุกคนควรรู้อะไร [ปิด]

มีชุดของสิ่งที่โปรแกรมเมอร์ JavaScript ทุกคนควรรู้ว่าสามารถพูดว่า "ฉันรู้จัก JavaScript" หรือไม่?

ไม่ใช่ jQuery ไม่ใช่ YUI ไม่ (ฯลฯ )

กรอบงานอาจมีประโยชน์ แต่มักจะซ่อนรายละเอียดที่น่าเกลียดในบางครั้งว่า JavaScript และ DOM ใช้งานได้จริงจากคุณอย่างไร หากเป้าหมายของคุณคือสามารถพูดว่า "ฉันรู้จาวาสคริปต์" ดังนั้นการลงทุนเวลามากในกรอบนั้นตรงกันข้ามกับที่

ต่อไปนี้เป็นคุณสมบัติภาษา JavaScript ที่คุณควรรู้ว่าควรทำอะไรและไม่ได้รับความสนใจ

• นั่นobject.propและobject['prop']เป็นสิ่งเดียวกัน (เพื่อให้คุณสามารถหยุดใช้evalขอบคุณ); คุณสมบัติของวัตถุนั้นจะเป็นสตริงเสมอ (แม้กระทั่งสำหรับอาร์เรย์) สิ่งที่for... inมีไว้สำหรับ (และสิ่งที่ไม่ )

• ทรัพย์สินดมกลิ่น; undefinedมันคืออะไร(และทำไมมันมีกลิ่น ); เหตุใดผู้ดำเนินการที่ดูเหมือนไม่ค่อยรู้จักinจึงมีประโยชน์และแตกต่างจากtypeof/ undefinedเช็ค hasOwnProperty; deleteวัตถุประสงค์ของ

• ว่าNumberประเภทข้อมูลมันลอย; ความยากลำบากในการใช้ภาษาที่ลอยตัว - ภาษา; หลีกเลี่ยงparseIntกับดักแปด

• การกำหนดขอบเขตฟังก์ชันแบบซ้อน ความจำเป็นในการใช้งานvarในขอบเขตที่คุณต้องการหลีกเลี่ยงการกลมกลืนโดยไม่ตั้งใจ วิธีใช้ขอบเขตสำหรับการปิด ปัญหาการปิดห่วง

• ตัวแปรและwindowคุณสมบัติทั่วโลกชนกันอย่างไร; ตัวแปรทั่วโลกและองค์ประกอบเอกสารไม่ควรชน แต่ทำใน IE; ความจำเป็นในการใช้งานvarในขอบเขตทั่วโลกเช่นกันเพื่อหลีกเลี่ยงปัญหานี้

• วิธีfunctionงบทำหน้าที่ในการ ' ยก ' คำนิยามก่อนรหัสก่อนหน้านั้น ความแตกต่างระหว่างคำสั่งฟังก์ชั่นและการแสดงออกฟังก์ชั่น; ทำไมชื่อฟังก์ชั่นการแสดงออกไม่ควรใช้

• ฟังก์ชั่นคอนสตรัคเตอร์prototypeคุณสมบัติและnewโอเปอเรเตอร์ทำงานอย่างไร วิธีการใช้ประโยชน์จากสิ่งนี้เพื่อสร้างระบบคลาส / คลาสย่อย / อินสแตนซ์ปกติที่คุณต้องการ เมื่อคุณอาจต้องการใช้วัตถุที่มีการปิดแทนการสร้างต้นแบบ (เนื้อหาการสอน JS ส่วนใหญ่แย่มาก ๆ ในเรื่องนี้ฉันต้องใช้เวลาหลายปีกว่าจะเข้าใจได้ในหัวของฉัน)

• วิธีthisจะถูกกำหนดเมื่อทวงถามเวลาไม่ผูกพัน; วิธีการส่งผ่านวิธีการไม่ทำงานอย่างที่คุณคาดหวังจากภาษาอื่น ๆ ; วิธีปิดหรือFunction#bindอาจใช้เพื่อแก้ไข

• ECMAScript อื่น ๆ ฉบับที่ห้าคุณสมบัติเช่นindexOf, forEachและการทำงานเขียนโปรแกรมวิธีการในArray ; วิธีแก้ไขเบราว์เซอร์รุ่นเก่าเพื่อให้แน่ใจว่าคุณสามารถใช้งานได้ ใช้พวกเขาด้วยการแสดงออกฟังก์ชั่นที่ไม่ระบุชื่อแบบอินไลน์เพื่อรับรหัสขนาดกะทัดรัดอ่านได้

• การไหลของการควบคุมระหว่างเบราว์เซอร์และรหัสผู้ใช้; การประมวลผลแบบซิงโครนัสและแบบอะซิงโครนัส เหตุการณ์ที่เกิดขึ้นภายในการไหลของการควบคุม (เช่นโฟกัส) กับเหตุการณ์และหมดเวลาที่เกิดขึ้นเมื่อการควบคุมกลับมา; วิธีการเรียกบิวอินบิวอินแบบซิงโครนัสว่าalertสามารถทำให้เกิดการเข้าสู่ระบบอีกครั้งได้อย่างไร

• การเขียนสคริปต์ข้ามหน้าต่างมีผลต่อinstanceofอย่างไร การเขียนสคริปต์ข้ามหน้าต่างมีผลต่อโฟลว์การควบคุมข้ามเอกสารต่างกันอย่างไร วิธีการที่postMessageหวังว่าจะแก้ไขปัญหานี้

ดูคำตอบนี้เกี่ยวกับสองรายการสุดท้าย

ที่สำคัญที่สุดคุณควรดู JavaScript อย่างยิ่งโดยยอมรับว่าเป็นเหตุผลทางประวัติศาสตร์ว่าเป็นภาษาที่ไม่สมบูรณ์ (ยิ่งกว่าภาษาส่วนใหญ่) และหลีกเลี่ยงการแก้ไขปัญหาที่เลวร้ายที่สุด งานของ Crockford ในหน้านี้เป็นสิ่งที่ควรค่าแก่การอ่านแน่นอน (แม้ว่าฉันจะไม่เห็นด้วย 100% กับเขาซึ่งเป็น "ส่วนที่ดี")

ว่ามันสามารถปิดการใช้งาน

ทำความเข้าใจกับสิ่งที่เขียนในJavascriptของ Crockford : ส่วนที่ดีเป็นข้อสันนิษฐานที่ดีว่าบุคคลนั้นเป็นโปรแกรมเมอร์ JS ที่เหมาะสม

คุณสามารถรู้วิธีการใช้ห้องสมุดที่ดีเช่น JQuery และยังไม่รู้จักกับส่วนที่ซ่อนของ Javascript

หมายเหตุอีกประการคือเครื่องมือดีบั๊กในเบราว์เซอร์ต่างๆ โปรแกรมเมอร์ JS ควรรู้วิธีการแก้ปัญหารหัสของเขาในเบราว์เซอร์ที่แตกต่างกัน

Oh! และการรู้ว่า JSLint จะทำร้ายความรู้สึกของคุณโดยสิ้นเชิง !!

หากคุณต้องการที่จะเป็นนินจา JavaScript จริงคุณควรจะรู้คำตอบของคำถามในทุกPerfection ฆ่า JavaScript แบบทดสอบ

ตัวอย่างของการกระตุ้นความอยากอาหารของคุณ:

(function f(f){ 
  return typeof f(); 
})(function(){ return 1; });

นิพจน์นี้ส่งคืนอะไร

• "จำนวน"
• "ไม่ได้กำหนด"
• “ฟังก์ชั่น”
• ความผิดพลาด

คุณไม่รู้จักจาวาสคริปต์ถ้าคุณไม่รู้:

1. ปิด
2. การสืบทอดตามต้นแบบ
3. รูปแบบโมดูล
4. W3C-DOM
5. เหตุการณ์ทำงานอย่างไร

.. นั่นคือจาวาสคริปต์ไม่ใช่จาวา :)

หลาย ๆ คนที่เริ่มต้นด้วยการพัฒนาเว็บไซต์บอกกับฉันว่าจาวาสคริปต์เป็นเพียง java อย่างง่าย!

1. ทำความคุ้นเคยกับห้องสมุด Javascript (Jquery, Prototype, etc) อย่างน้อยหนึ่งไลบรารี

2. เรียนรู้วิธีใช้เครื่องมือแก้ไขข้อบกพร่องของเบราว์เซอร์หลัก (MSIE 7-8, Firefox, Chrome, Safari)

3. อ่านเกี่ยวกับอุตสาหกรรม: เว็บไซต์ของ Douglas Crockford เป็นขุมทรัพย์ในขณะที่ Ajaxian.com เป็นบล็อกที่ดีในการติดตามแนวคิดใหม่ที่น่าสนใจและแปลกใหม่สำหรับ Javascript มีทรัพยากรอื่น ๆ อีกจำนวนมาก แต่เป็นทรัพยากรที่ช่วยฉันได้มากที่สุด

จาวาสคริวัตถุและฟังก์ชั่นเป็นพลเมืองชั้นแรก , การเรียกกลับไม่ได้ที่จะลืมเกี่ยวกับเหตุการณ์ที่เกิดขึ้นแล้วJQuery

Javascript นั้นไม่ใช่สิ่งที่สามารถเรียนรู้ได้ในหนึ่งชั่วโมง!

ตัวแปรเป็นโกลบอลยกเว้นว่าได้รับการประกาศให้เป็นโลคอล !!

ไม่ดี (DoSomething () เรียกว่า 10 ครั้งเท่านั้น):

function CountToTen()
{
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();

ดี (DoSomething () เรียกว่า 50 ครั้งตามที่ต้องการ):

function CountToTen()
{
  var i;
  for(i=0; i< 10; i++)
  {
    DoSomething(i);
  }
}

function countToFive()
{
  var i;
  for(i=0; i<5; i++)
  {
    CountToTen();
  }
}

CountToFive();

ทำอย่างไร ใช้ชิ้นส่วนที่ดีและวิธีการหลีกเลี่ยงส่วนอันยิ่งใหญ่

สำหรับการรู้ว่า Javascript นั้นเดิมเรียกว่าLiveScriptและคำนำหน้า 'Java' ได้ถูกแนบเพื่อวัตถุประสงค์ทางการตลาดไม่ใช่เพราะ Java และ Javascript นั้นเกี่ยวข้องกัน (ซึ่งไม่เกี่ยวข้อง)

โอ้และเป็นเจ้าของJavascript: The Definitive Guideของ David Flanagan ทุกรุ่น(ข้อมูลนี้อยู่ในหน้า 2)

... และสำหรับการซาบซึ้งผู้ที่เคยมีมาก่อนในการพยายามทำให้งงงวย document.all ของ Internet Explorer 4 [] และ document.layers ของ Netscape Navigator 4 [] ก่อนที่จะชอบ Jquery เอาความเจ็บปวด

แก้ไข:

@Kinopiko ชี้ให้เห็นว่า JavaScript ถูกเรียกว่าโครงการ Mocha แต่เดิม ( บางแหล่งยังคิดว่ามันถูกเรียกว่า project LiveWire) แต่โดยทั่วไปก็ยอมรับว่าภาษา (เขียนโดย Brendan Eich) ถูกกำหนดให้เปิดตัวเป็น LiveScript ก่อนที่จะนำหน้า Java มาใช้ เปิดตัวในต้นปี 1996

เราควรทราบเกี่ยวกับสิ่งต่อไปนี้เพื่อพูดว่า "ฉันรู้จักจาวาสคริปต์":

1. JavaScript ดี แต่DOM เป็นจุดปวด
2. ปัญหาเบราว์เซอร์ข้ามสามารถทำให้คุณเป็นบ้า
3. ยกเว้นว่ามีการทดสอบโค้ดในเบราว์เซอร์ที่ดีอย่างน้อย 4 ชนิดที่แตกต่างกันคุณจะไม่สามารถบอกได้ว่ามันปราศจากบั๊ก
4. ปิด .............. ต้องรู้
5. ต้นแบบของมัน........... เป็นคนดีสนุกที่ได้เรียนรู้สิ่งนี้
6. คำหลักดีบักเกอร์ ..... ช่วยในภาวะวิกฤต

JavaScript นั้นแตกต่างจากภาษาอื่นมากกว่าที่คุณคิด ดู Google Tech Talk ที่ยอดเยี่ยมนี้เพื่อรับความประทับใจ: http://www.youtube.com/watch?v=hQVTIJBZook

สิ่งที่จาวาสคริปต์ทุกคนควรรู้คืออะไร?

แล้วฉันจะปิดความพยายามของคุณได้ด้วย 2 คลิก ดังนั้นให้เลือกทางเลือกถ้าเป็นไปได้

ฉันขอแนะนำอย่างยิ่งให้อ่านJavascript: The Good Parts

คุณรู้จักจาวาสคริปต์หากคุณสามารถใช้ Array, Number, String, Date และ Object ได้อย่างมีประสิทธิภาพ บวกคะแนนสำหรับคณิตศาสตร์และ RegExp คุณควรจะสามารถเขียนฟังก์ชั่นและใช้ตัวแปร (ในขอบเขตที่ถูกต้องเช่น 'วิธีการ' ของวัตถุ)

ฉันเห็นความคิดเห็นบางอย่างเกี่ยวกับการรู้การปิดไวยากรณ์ฟังก์ชั่นฟุ่มเฟือย blabla สิ่งที่ค่อนข้างไม่เกี่ยวข้องกับคำถามนี้ เหมือนกับว่าคุณเป็นนักวิ่งถ้าคุณสามารถวิ่งได้ 100m ในเวลา 11 วินาที

ฉันบอกว่าอาจใช้เวลาสองสามสัปดาห์กว่าจะมีความเชี่ยวชาญในจาวาสคริปต์ หลังจากนั้นใช้เวลาหลายปีและหนังสือหลายสิบเล่มและหลายพันบรรทัดของการเขียนโปรแกรมเพื่อเป็นผู้เชี่ยวชาญนินจา ฯลฯ

แต่นั่นไม่ใช่คำถาม

โอ้และ DOM ไม่ได้เป็นส่วนหนึ่งของจาวาสคริปต์และไม่ใช่ jQuery ดังนั้นฉันคิดว่าทั้งสองคำถามนั้นไม่เกี่ยวข้องกันด้วย

JSLint http://www.JSLint.com/

ต้องอ่านทั้งหมดข้างต้นก็ยังดีอย่างสมบูรณ์แบบในการเรียนรู้โดยใช้ Javascript กรอบเช่น jQuery ความจริงก็คือมันเป็นวิธีแรกที่คนจำนวนมากหยิบ JS ขึ้นมาตั้งแต่แรก ไม่มีความละอายในเรื่องนั้น

อาเรย์ lengthmethod ไม่นับรายการของ array แต่เป็นดัชนีสูงสุด แม้เมื่อรายการถูกตั้งค่าเป็นundefined

var a = [];
a.length;   // === 0
a[10];      // === undefined
a[10] = undefined;
a.length;   // === 11
a.pop();    // === undefined
a.length;   // === 10

พฤติกรรมนี้แทบจะไม่แตกต่างจากข้อบกพร่องในการออกแบบภาษา ..

jQuery จะเป็นคำแนะนำที่ดีที่สุดของฉัน ไม่เพียง แต่สำหรับรหัสเท่านั้นมันเป็นสำนวนสไตล์ความคิดที่อยู่เบื้องหลังมันมีค่าที่สุดสำหรับการลอกเลียนแบบ

จาวาสคริปต์นั้นเป็นภาษาที่ใช้กันอย่างแพร่หลายที่สุดในโลก (อาจ)

การเรียนรู้ภาษาดีมากและการทำความเข้าใจนิสัยใจคอที่หลากหลายนั้นมาจากประสบการณ์ (ปี) ถ้าคุณต้องการเป็นโปรแกรมเมอร์ที่ดีกว่าฉันจะบอกว่าเข้าใจรูปแบบการออกแบบอย่างไรและเมื่อใดที่จะใช้พวกเขาและ / หรือแม้กระทั่งเมื่อคุณใช้งานพวกเขาโดยไม่ทราบ สถาปัตยกรรมทางเทคนิคและประสบการณ์การใช้งาน

การรู้ภาษา (JavaScript) หมายความว่าคุณสามารถเลือกกรอบงานใด ๆ และใช้ตามใจชอบ คุณจะต้องดำลงไปในซอร์สโค้ดอย่างหลีกเลี่ยงไม่ได้และถ้าคุณรู้ว่ามันคือกรอบไวยากรณ์หรือ 2 หรือ 3 คุณก็จะไม่ไปไกล ในการบอกว่าการเข้าไปในซอร์สโค้ดของเฟรมเวิร์กต่าง ๆ เป็นวิธีที่ดีที่สุดในการดูว่า JavaScript สามารถใช้งานได้อย่างไร ทำใจให้วุ่นวายโดยการใช้รหัสใน Firebug หรือ Web Inspector จากนั้นตรวจสอบเอกสาร JavaScript โดยเฉพาะเอกสาร Mozilla และ Webkit เพื่อทำความเข้าใจเพิ่มเติมเกี่ยวกับสิ่งที่คุณกำลังดู

การทำความเข้าใจความแตกต่างระหว่างการเขียนโปรแกรมเชิงวัตถุและฟังก์ชั่นการใช้งาน JavaScript นั้นเป็นการผสมผสานที่ลงตัวระหว่างทั้งสองและเวลาและวิธีการใช้ทั้งในการสร้างฐานข้อมูลนักฆ่าและแอพพลิเคชั่นที่ยอดเยี่ยม

เพียงแค่อ่านหนังสือบางเล่มโดยเฉพาะ "ส่วนที่ดี" ของ Crockford ซึ่งนำเสนอความคิดเห็นของเขาเกี่ยวกับสิ่งที่ดีใน JavaScript ในขณะที่การข้ามส่วนที่น่ากลัวของ JavaScript ส่วนใหญ่จะทำให้คุณรู้สึกผิด

การตรวจสอบโค้ดที่เขียนโดยคนอย่าง Thomas Fuchs ในทางกลับกันจะทำให้คุณเข้าใจถึงพลังของการเขียน JavaScript ที่น่าทึ่งและมีประสิทธิภาพมากขึ้น

การพยายามจดจำ gotchas หรือ WTF สองสามตัวจะไม่ช่วยอะไรมากคุณจะเลือกมันถ้าคุณเริ่มเขียนโค้ดและก้าวผ่านโค้ดไลบรารี่ / กรอบงานโดยเฉพาะความเห็นที่เป็นประโยชน์ คุณสมบัติ / ค่าและไม่ใช่เหตุผลอื่น ๆ และเมื่อใดจึงควรใช้ตัวถูกดำเนินการและตัวดำเนินการเฉพาะนี่คือทั้งหมดที่อยู่ในรหัสของคนที่ใช้เฟรมเวิร์ก เป็นอย่างไรดีกว่าที่จะเรียนรู้จากตัวอย่าง? : ^)

ใน Javascript ประสิทธิภาพมีความสำคัญ

ไม่มีคอมไพเลอร์อัจฉริยะในการเพิ่มประสิทธิภาพโค้ดของคุณดังนั้นคุณควรระมัดระวังในขณะที่คุณเขียนโค้ดจาวาสคริปต์มากกว่าภาษาอย่าง C #, Java ...

วัตถุตัวอักษรเพราะพวกเขาเขียนดี

สิ่งต่อไปนี้ก็มีความสำคัญเช่นกัน:

1) ตัวแปรยก 2) ขอบเขตขอบเขตและวัตถุการเปิดใช้งาน

และจากนั้นสิ่งเหล่านี้: :)

3) wtfjs.com

4) ทุกอย่างเป็นวัตถุ http://www.lifeinafolder.com/images/Js.jpg

1. รู้ว่ามีชีวิตที่มีและไม่มี with()และที่จะวาดเส้น
2. คุณสามารถสร้างข้อผิดพลาดที่กำหนดเองด้วยthrowคำสั่งเพื่อจงใจหยุดการทำงานของจาวาสคริปต์

JavaScript ไม่รองรับการแยกคำหลักreturnและคำสั่ง return ด้วยอักขระขึ้นบรรทัดใหม่เช่นรหัสต่อไปนี้ (หรือลองที่หน้า jsFiddle ของฉัน )

function foo()
{
    return
    {
        bar: 'something'
    };
}

$(function()
{
    document.write(foo());
});

ฉันไม่เข้าใจว่าทำไม JavaScript ไม่สนับสนุนสไตล์นี้เนื่องจากง่ายต่อการอ่านซอร์สโค้ด JavaScript ที่ซับซ้อนมากเมื่อเปรียบเทียบกับสไตล์เริ่มต้นของ JavaScript

PS ฉันเขียน JavaScript เกือบ 6 ปี แต่ฉันเพิ่งพบข้อผิดพลาดนี้ด้วยตัวเองเมื่อฉันพยายามเรียกใช้ฟังก์ชันต่อไปนี้ มันจะส่งกลับไม่ได้กำหนดเสมอ เมื่อฉันใช้ดีบักเกอร์และเข้าสู่ฟังก์ชั่นนี้ทุกอย่างก็ใช้ได้ดี ฉันคิดว่ามันควรจะเป็นข้อบกพร่องในการเขียนโปรแกรมที่เลวร้ายที่สุดในชีวิตของฉัน

function JqGridInlineEditor_GenerateTool(cellvalue, options, rowObject, disableEdit, disableDelete)
{
    return 
        (!disableEdit ? '<a class="button edit" href="javascript: void(0);" onclick="JqGridInlineEditor_EditRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Edit.gif'), 'Click here to Edit or \nDouble-click row to edit.') : '') +
        (!disableDelete ? '<a class="button delete" href="javascript: void(0);" onclick="JqGridInlineEditor_DeleteRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Delete.png'), 'Click here to Delete or \nSelect row and then press Delete') : '') +
        (!disableEdit ? '<a class="button save" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_SaveRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Save.png'), 'Click here to Save or \nPress Enter') : '') +
        (!disableEdit ? '<a class="button cancel" style="display:none" href="javascript: void(0);" onclick="JqGridInlineEditor_RestoreRow(this, \'{0}\');return false;" title="{2}"><img src="{1}" alt="{2}" /></a>'.format(options.rowId, getUrl('~/Content/Icons/Cancel.png'), 'Click here to Cancel or \nPress Esc') : '');
}

เนื่องจาก JS เป็นภาษาที่ใช้งานได้โปรแกรมเมอร์ JS ที่ดีต้องสามารถเขียน Y-combinator และอธิบายวิธีการทำงานของส่วนหัว

... เกี่ยวกับGoogle Web Toolkitซึ่งหมายความว่าโครงการจาวาสคริปต์ของคุณอาจได้รับการพัฒนาในลักษณะที่สะดวกกว่า