ฉันเขียนรหัส JavaScript มาเป็นเวลานานและจำไม่ได้ว่ายุคเริ่มต้นอะไร ฉันตื่นเต้นมากเกี่ยวกับความสำเร็จของ JavaScript ในช่วงไม่กี่ปีที่ผ่านมา ฉันโชคดีมากที่ได้รับผลประโยชน์จากความสำเร็จเหล่านี้ ฉันได้เขียนบทความมากมายบทและหนังสือที่ทุ่มเทให้กับบทความ แต่ฉันยังสามารถหาความรู้ใหม่เกี่ยวกับภาษานี้ได้ในตอนนี้ ต่อไปนี้อธิบายถึงทักษะการเขียนโปรแกรมที่ทำให้ฉันถอนหายใจ "อ่า!" ในอดีตที่ผ่านมา. คุณควรลองใช้ทักษะเหล่านี้ในตอนนี้แทนที่จะรอค้นพบพวกเขาโดยบังเอิญในอนาคต
การเขียนที่กระชับ
หนึ่งในสิ่งที่ฉันโปรดปรานใน JavaScript คือวิธีการย่อของการสร้างวัตถุและอาร์เรย์ ในอดีตถ้าคุณต้องการสร้างวัตถุคุณจะต้องทำสิ่งนี้:
var car = new Object (); car.colour = 'สีแดง'; car.wheels = 4; car.hubcaps = 'ปั่น'; car.age = 4;
วิธีการเขียนต่อไปนี้สามารถบรรลุผลเดียวกัน:
var car = {color: 'red', ล้อ: 4, hubcaps: 'spinning', อายุ: 4}มันง่ายกว่ามากคุณไม่จำเป็นต้องใช้ชื่อของวัตถุนี้ซ้ำ ๆ ด้วยวิธีนี้รถยนต์จะถูกกำหนด บางทีคุณอาจจะพบปัญหาของ InvalidUserInsession ซึ่งพบได้ก็ต่อเมื่อคุณใช้ IE เท่านั้น เพียงจำสิ่งหนึ่งและอย่าเขียนเครื่องหมายจุลภาคก่อนการจัดฟันปิดและคุณจะไม่มีปัญหาใด ๆ
อีกตัวย่อที่สะดวกมากสำหรับอาร์เรย์ วิธีดั้งเดิมในการกำหนดอาร์เรย์มีดังนี้:
var moviesthatneedbetterwriters = new Array ('Transformers', 'Transformers2', 'Avatar', 'Indianajones 4');เวอร์ชันตัวย่อเป็นแบบนี้:
var moviesthatneedbetterwriters = ['transformers', 'transformers2', 'Avatar', 'Indianajones 4'];
สำหรับอาร์เรย์มีปัญหาที่นี่ แต่จริงๆแล้วไม่มีฟังก์ชั่นกลุ่มกราฟ แต่คุณมักจะพบว่ามีคนกำหนดรถข้างต้นเช่นนี้เช่นนี้
var car = new Array (); Car ['color'] = 'Red'; Car ['Wheels'] = 4; car ['hubcaps'] = 'ปั่น'; รถยนต์ ['อายุ'] = 4;
อาร์เรย์ไม่ได้มีอำนาจทุกอย่าง หากพวกเขาเขียนอย่างไม่ถูกต้องพวกเขาจะสับสน กลุ่มกราฟเป็นฟังก์ชั่นของวัตถุและผู้คนได้สับสนทั้งสองแนวคิดนี้
อีกวิธีหนึ่งตัวย่อที่เจ๋งมากคือการใช้สัญลักษณ์เงื่อนไขแบบไตร่ตรอง คุณไม่จำเป็นต้องเขียนมันด้านล่าง ...
ทิศทาง var; if (x <200) {direction = 1; } else {direction = -1; -คุณสามารถทำให้มันง่ายขึ้นด้วยสัญกรณ์เงื่อนไขที่มีเงื่อนไข:
ทิศทาง var = x <200? 1: -1;
เมื่อเงื่อนไขเป็นจริงค่าหลังจากเครื่องหมายคำถามถูกนำมามิฉะนั้นค่าหลังจากที่ลำไส้ใหญ่ถูกนำไป
จัดเก็บข้อมูลใน JSON
ก่อนที่ฉันจะค้นพบ JSON ฉันใช้วิธีการที่บ้าคลั่งต่าง ๆ ในการจัดเก็บข้อมูลในชนิดข้อมูลโดยธรรมชาติของ JavaScript เช่นอาร์เรย์สตริงสายน้ำที่แยกออกจากกันและสิ่งที่น่ารำคาญอื่น ๆ หลังจากดักลาสคร็อคฟอร์ดคิดค้น JSON ทุกอย่างเปลี่ยนไป การใช้ JSON คุณสามารถใช้ฟังก์ชั่นของ JavaScript เพื่อจัดเก็บข้อมูลในรูปแบบที่ซับซ้อนและไม่จำเป็นต้องทำการแปลงเพิ่มเติมอื่น ๆ และคุณสามารถเข้าถึงได้โดยตรง JSON เป็นตัวย่อของ "Notation Object JavaScript" ซึ่งใช้วิธีการย่อสองวิธีที่กล่าวถึงข้างต้น ดังนั้นหากคุณต้องการอธิบายวงดนตรีคุณอาจเขียนแบบนี้:
var band = {"name": "พริกพริกแดงร้อน", "สมาชิก": [{"ชื่อ": "Anthony Kiedis", "บทบาท": "นักร้องนำ"}, {"ชื่อ": "Michael 'Flea' Balzary", "Role": }, {"ชื่อ": "John Frusciante", "Role": "Lead Guitar"}], "ปี": "2009"}คุณสามารถใช้ JSON ได้โดยตรงใน JavaScript, ห่อหุ้มในฟังก์ชั่นหรือแม้แต่ใช้เป็นรูปแบบค่าคืนของ API เราเรียกสิ่งนี้ JSON-P และ APIs จำนวนมากใช้แบบฟอร์มนี้
คุณสามารถโทรหาแหล่งข้อมูลแหล่งข้อมูลและส่งคืนข้อมูล JSON-P โดยตรงในรหัสสคริปต์:
<div id = "Delicious"> </div> <script> ฟังก์ชั่น Delicious (O) {var out = '<ul>'; สำหรับ (var i = 0; i <o.length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out += '</ul>'; document.getElementById ('อร่อย'). innerhtml = out; } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"> </script>สิ่งนี้เรียกคุณลักษณะบริการเว็บที่จัดทำโดยเว็บไซต์อร่อยเพื่อรับรายชื่อบุ๊กมาร์กที่ไม่ได้เรียงลำดับล่าสุดในรูปแบบ JSON
โดยทั่วไป JSON เป็นวิธีที่เบาที่สุดในการอธิบายโครงสร้างข้อมูลที่ซับซ้อนและสามารถทำงานในเบราว์เซอร์ คุณสามารถเรียกใช้ใน PHP ด้วยฟังก์ชัน JSON_DECODE () สิ่งหนึ่งที่ทำให้ฉันประหลาดใจเกี่ยวกับฟังก์ชั่นของ JavaScript (คณิตศาสตร์อาร์เรย์และสตริง) คือหลังจากที่ฉันศึกษาฟังก์ชั่นคณิตศาสตร์และสตริงใน JavaScript ฉันพบว่าพวกเขาสามารถทำให้การเขียนโปรแกรมของฉันง่ายขึ้นอย่างมาก การใช้พวกเขาคุณสามารถบันทึกการประมวลผลลูปที่ซับซ้อนและการตัดสินตามเงื่อนไข ตัวอย่างเช่นเมื่อฉันต้องการใช้ฟังก์ชั่นเพื่อค้นหาจำนวนมากที่สุดในอาร์เรย์หมายเลขฉันเคยเขียนลูปนี้เช่นนี้:
หมายเลข var = [3,342,23,22,124]; var max = 0; สำหรับ (var i = 0; i <number.length; i ++) {ถ้า (ตัวเลข [i]> สูงสุด) {max = numbers [i]; }} การแจ้งเตือน (สูงสุด);เราสามารถทำได้โดยไม่ต้องวนซ้ำ:
หมายเลข var = [3,342,23,22,124]; number.sort (ฟังก์ชั่น (a, b) {return b - a}); การแจ้งเตือน (ตัวเลข [0]);ควรสังเกตว่าคุณไม่สามารถเรียงลำดับ () อาร์เรย์ของอักขระตัวเลขได้เนื่องจากในกรณีนี้มันจะเรียงลำดับตามลำดับตัวอักษรเท่านั้น หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานคุณสามารถอ่านบทความดีๆเกี่ยวกับ Sort ()
ฟังก์ชั่นที่น่าสนใจอีกอย่างหนึ่งคือ Math.max () ฟังก์ชั่นนี้ส่งคืนตัวเลขที่ใหญ่ที่สุดในพารามิเตอร์:
Math.Max (12,123,3,2,433,4); // ส่งคืน 433
เนื่องจากฟังก์ชั่นนี้สามารถตรวจสอบตัวเลขและส่งคืนที่ใหญ่ที่สุดคุณสามารถใช้มันเพื่อทดสอบการสนับสนุนของเบราว์เซอร์สำหรับคุณสมบัติ:
var scrolltop = math.max (doc.documentelement.scrolltop, doc.body.scrolltop);
สิ่งนี้ใช้เพื่อแก้ปัญหาคือ คุณสามารถรับค่า scrolltop ของหน้าปัจจุบัน แต่ขึ้นอยู่กับ doctype บนหน้าเว็บมีเพียงหนึ่งในสองคุณสมบัติข้างต้นที่จะเก็บค่านี้และคุณสมบัติอื่น ๆ จะไม่ได้กำหนดดังนั้นคุณสามารถรับหมายเลขนี้ได้โดยใช้ math.max () อ่านบทความนี้และคุณจะได้รับความรู้เพิ่มเติมเกี่ยวกับการใช้ฟังก์ชั่นทางคณิตศาสตร์เพื่อลดความซับซ้อนของ JavaScript
นอกจากนี้ยังมีฟังก์ชั่นที่มีประโยชน์มากคู่หนึ่งที่ใช้งานสตริงจะแยก () และเข้าร่วม () ฉันคิดว่าตัวอย่างที่เป็นตัวแทนมากที่สุดคือการเขียนฟังก์ชั่นเพื่อแนบสไตล์ CSS เข้ากับองค์ประกอบหน้า
มันเป็นเช่นนี้ เมื่อคุณผนวกคลาส CSS เข้ากับองค์ประกอบหน้าไม่ว่าจะเป็นคลาส CSS แรกขององค์ประกอบนี้หรือมีคลาสอยู่แล้ว คุณต้องเพิ่มพื้นที่หลังจากคลาสที่มีอยู่แล้วติดตามคลาส และเมื่อคุณต้องการลบคลาสนี้คุณจะต้องลบช่องว่างด้านหน้าของชั้นเรียนนี้ (นี่เป็นสิ่งสำคัญมากในอดีตเพราะเบราว์เซอร์เก่าบางตัวไม่รู้จักคลาสตามด้วยช่องว่าง)
ดังนั้นการเขียนต้นฉบับจะมีลักษณะเช่นนี้:
ฟังก์ชั่น addClass (elm, newclass) {var c = elm.classname; elm.className = (c === '')? Newclass: C+''+Newclass; -คุณสามารถใช้ฟังก์ชั่น split () และเข้าร่วม () เพื่อให้งานนี้เสร็จสมบูรณ์โดยอัตโนมัติ:
ฟังก์ชั่น addClass (elm, newClass) {var classes = elm.classname.split (''); classes.push (Newclass); elm.className = classes.oin (''); -สิ่งนี้จะช่วยให้มั่นใจได้ว่าคลาสทั้งหมดจะถูกคั่นด้วยช่องว่างและคลาสที่คุณต้องการผนวกจะถูกวางไว้อย่างแน่นอน
การมอบหมายงาน
เว็บแอปพลิเคชันล้วนขับเคลื่อนด้วยเหตุการณ์ ฉันชอบการจัดการกิจกรรมโดยเฉพาะอย่างยิ่งฉันชอบกำหนดเหตุการณ์ด้วยตัวเอง มันทำให้ผลิตภัณฑ์ของคุณปรับขนาดได้โดยไม่ต้องเปลี่ยนรหัสหลัก มีปัญหาใหญ่ (รวมถึงการรวมตัวที่ทรงพลัง) เกี่ยวกับการลบเหตุการณ์ในหน้า คุณสามารถติดตั้งฟังเหตุการณ์ในองค์ประกอบและผู้ฟังเหตุการณ์เริ่มทำงาน แต่ไม่มีข้อบ่งชี้บนหน้าเว็บว่ามีผู้ฟัง เนื่องจากปัญหาที่คาดเดาไม่ได้นี้ (ซึ่งเป็นปัญหาโดยเฉพาะอย่างยิ่งสำหรับมือใหม่บางคน) และปัญหาหน่วยความจำต่าง ๆ ที่ "เบราว์เซอร์" เช่น IE6 ใช้การฟังเหตุการณ์มากเกินไปคุณต้องยอมรับว่าควรพยายามใช้การเขียนโปรแกรมกิจกรรมให้น้อยที่สุด
ดังนั้นคณะกรรมการของเหตุการณ์จึงเกิดขึ้น
เมื่อเหตุการณ์ในองค์ประกอบในหน้าถูกทริกเกอร์และในความสัมพันธ์การสืบทอด DOM เด็ก ๆ ทุกคนขององค์ประกอบนี้ยังสามารถรับเหตุการณ์นี้ได้ ในเวลานี้คุณสามารถใช้ตัวจัดการเหตุการณ์ในองค์ประกอบหลักเพื่อจัดการกับมันแทนที่จะใช้ผู้ฟังเหตุการณ์ในองค์ประกอบของเด็กเพื่อจัดการกับมัน หมายความว่าอย่างไร? ลองมาแบบนี้มีการเชื่อมโยงหลายมิติมากมายในหน้า คุณไม่ต้องการใช้ลิงก์เหล่านี้โดยตรง คุณต้องการเรียกลิงค์นี้ผ่านฟังก์ชั่น รหัส HTML เป็นเช่นนี้:
<h2> แหล่งข้อมูลเว็บที่ยอดเยี่ยม </h2><ul id = "ทรัพยากร"> <li> <a href = "http://opera.com/wsc"> หลักสูตรมาตรฐานเว็บโอเปร่า </a> </li> <li> href = "http://alistapart.com"> รายการแยกออก </a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> </li> <li> <a href = "http://blameitonth href = "http://oddlyspecific.com"> เฉพาะเจาะจง </a> </li></ul>
มันเป็นเรื่องธรรมดาที่จะวนลูปผ่านลิงก์เหล่านี้และแนบตัวจัดการเหตุการณ์กับแต่ละลิงก์:
// ตัวอย่างการจัดการเหตุการณ์ทั่วไป (ฟังก์ชั่น () {var resources = document.getElementById ('ทรัพยากร'); var links = resources.getElementByTagname ('a'); var ทั้งหมด = links.length; สำหรับ (var i = 0; i <ทั้งหมด; i ++) {// ตัวจัดการ (e) {var x = e.target;นอกจากนี้เรายังสามารถทำภารกิจนี้ให้สำเร็จด้วยตัวประมวลผลเหตุการณ์:
(function () {var resources = document.getElementById ('ทรัพยากร'); resources.addeVentListener ('คลิก', ตัวจัดการ, เท็จ); ฟังก์ชั่นตัวจัดการ (e) {var x = e.target; // รับลิงก์ถ้า (x.nodename.toLowerCase () -เนื่องจากเหตุการณ์การคลิกเกิดขึ้นในองค์ประกอบหน้าเหล่านี้สิ่งที่คุณต้องทำคือเปรียบเทียบชื่อ nodenames ของพวกเขาและค้นหาองค์ประกอบที่ควรตอบสนองต่อเหตุการณ์
ข้อจำกัดความรับผิดชอบ: สองตัวอย่างเกี่ยวกับเหตุการณ์ที่กล่าวถึงข้างต้นสามารถทำงานได้ในเบราว์เซอร์ทั้งหมด ยกเว้น IE6 คุณต้องใช้โมเดลกิจกรรมบน IE6 แทนที่จะใช้มาตรฐาน W3C แบบง่าย นี่คือเหตุผลที่เราแนะนำให้ใช้ชุดเครื่องมือบางอย่าง
ประโยชน์ของวิธีการนี้ไม่ได้ จำกัด อยู่ที่การลดโปรเซสเซอร์เหตุการณ์หลายรายการลงในหนึ่งเดียว ลองคิดดูตัวอย่างเช่นคุณต้องเพิ่มลิงก์เพิ่มเติมไปยังตารางลิงค์นี้แบบไดนามิก หลังจากใช้การมอบหมายงานคุณไม่จำเป็นต้องทำการเปลี่ยนแปลงอื่น ๆ มิฉะนั้นคุณจะต้องเปิดตารางลิงค์นี้อีกครั้งและติดตั้งตัวจัดการเหตุการณ์สำหรับแต่ละลิงก์อีกครั้ง
ฟังก์ชั่นที่ไม่ระบุชื่อและความเป็นโมดูล
สิ่งที่น่ารำคาญที่สุดใน JavaScript คือตัวแปรไม่มีขอบเขตที่จะใช้ ตัวแปรฟังก์ชันอาร์เรย์วัตถุใด ๆ ตราบใดที่มันไม่ได้อยู่ในฟังก์ชั่นถือว่าเป็นทั่วโลกซึ่งหมายความว่าสคริปต์อื่น ๆ ในหน้านี้สามารถเข้าถึงและแทนที่ได้
วิธีแก้ปัญหาคือการใส่ตัวแปรของคุณไว้ในฟังก์ชั่นที่ไม่ระบุชื่อและเรียกมันทันทีหลังจากที่กำหนดไว้ ตัวอย่างเช่นวิธีการเขียนต่อไปนี้จะสร้างตัวแปรทั่วโลกสามตัวและฟังก์ชั่นทั่วโลกสองฟังก์ชั่น:
ชื่อ var = 'Chris'; var Age = '34'; สถานะ var = 'single'; ฟังก์ชั่น createMember () {// [... ]} ฟังก์ชั่น getMemberDetails () {// [... ]}หากมีตัวแปรที่เรียกว่าสถานะในสคริปต์อื่น ๆ ในหน้านี้ปัญหาจะเกิดขึ้น หากเราห่อหุ้มพวกเขาใน myapplication ปัญหานี้จะได้รับการแก้ไข:
var myApplication = function () {var name = 'Chris'; var Age = '34'; สถานะ var = 'single'; ฟังก์ชั่น createMember () {// [... ]} ฟังก์ชั่น getMemberDetails () {// [... ]}} ();อย่างไรก็ตามด้วยวิธีนี้ไม่มีฟังก์ชั่นนอกฟังก์ชั่น ถ้านี่คือสิ่งที่คุณต้องการก็ไม่เป็นไร คุณยังสามารถละเว้นชื่อของฟังก์ชั่น:
(function () {var name = 'chris'; var ate = '34'; var status = 'single'; function createMember () {// [... ]} function getMemberDetails () {// [... ]}}) ();หากคุณต้องการใช้ด้านในของฟังก์ชั่นคุณต้องทำการแก้ไข ในการเข้าถึง createMember () หรือ getMemberDetails () คุณต้องเปลี่ยนเป็นคุณสมบัติ myApplication เพื่อเปิดเผยพวกเขาสู่โลกภายนอก:
var myApplication = function () {var name = 'Chris'; var Age = '34'; สถานะ var = 'single'; return {createMember: function () {// [... ]}, getMemberDetails: function () {// [... ]}}} (); //myapplication.createMember () และ //myapplication.getMemberDetails () สามารถใช้งานได้สิ่งนี้เรียกว่าโหมดโมดูลหรือซิงเกิลตัน Douglas Crockford ได้พูดคุยกันหลายครั้งแล้วและมีการใช้กันอย่างแพร่หลายในห้องสมุดผู้ใช้ Yahoo ผู้ใช้ Yui แต่สิ่งที่ทำให้ฉันไม่สะดวกคือฉันต้องเปลี่ยนโครงสร้างประโยคเพื่อให้ฟังก์ชั่นและตัวแปรสามารถเข้าถึงได้โดยโลกภายนอก ยิ่งไปกว่านั้นฉันต้องเพิ่มคำนำหน้าของ MyApplication เมื่อโทร ดังนั้นฉันไม่ชอบทำสิ่งนี้ฉันชอบที่จะส่งออกพอยน์เตอร์ไปยังองค์ประกอบที่ต้องเข้าถึงโดยโลกภายนอก หลังจากทำสิ่งนี้การเขียนการโทรภายนอกจะง่ายขึ้น:
var myApplication = function () {var name = 'Chris'; var Age = '34'; สถานะ var = 'single'; ฟังก์ชั่น createMember () {// [... ]} ฟังก์ชั่น getMemberDetails () {// [... ]} return {create: createMember, get: getMemberDetails}} (); // ตอนนี้เขียนเป็น myapplication.get () และ myapplication.create ()ฉันเรียกสิ่งนี้ว่า "รูปแบบการเปิดเผยโมดูล"
กำหนดได้
เมื่อฉันเผยแพร่รหัส JavaScript ที่ฉันเขียนถึงโลกนี้ใครบางคนต้องการเปลี่ยนมันโดยปกติแล้วผู้คนต้องการทำงานให้เสร็จสมบูรณ์ซึ่งไม่สามารถทำให้เสร็จได้ - แต่โดยปกติแล้วโปรแกรมที่ฉันเขียนนั้นไม่ยืดหยุ่นเพียงพอและไม่ได้ให้ฟังก์ชั่นที่ผู้ใช้กำหนด โซลูชันคือการเพิ่มวัตถุรายการการกำหนดค่าลงในสคริปต์ของคุณ ฉันเคยเขียนบทความที่แนะนำวัตถุรายการการกำหนดค่า JavaScript ในเชิงลึก นี่คือประเด็นสำคัญ:
---- ในสคริปต์ของคุณเพิ่มวัตถุที่เรียกว่าการกำหนดค่า
---- วัตถุนี้เก็บทุกสิ่งที่ผู้คนมักจะต้องเปลี่ยนเมื่อใช้สคริปต์นี้:
** CSS ID และชื่อคลาส;
** ชื่อปุ่ม, คำว่าฉลาก ฯลฯ ;
** ค่าเช่น "จำนวนรูปภาพที่แสดงต่อหน้า" และ "ขนาดของภาพที่แสดง";
** การตั้งค่าตำแหน่งสถานที่ตั้งและภาษา
--- ส่งคืนวัตถุนี้ไปยังผู้ใช้เป็นคุณสมบัติทั่วไปเพื่อให้ผู้ใช้สามารถแก้ไขและเขียนทับ
นี่คือสิ่งที่คุณต้องทำในขั้นตอนสุดท้ายในกระบวนการเขียนโปรแกรมของคุณ ฉันจดจ่อกับสิ่งเหล่านี้ในตัวอย่างหนึ่ง:“ ห้าสิ่งที่ต้องทำกับสคริปต์ก่อนส่งมอบให้กับนักพัฒนาคนต่อไป”
ในความเป็นจริงคุณต้องการให้รหัสของคุณใช้งานได้ดีมากและทำการเปลี่ยนแปลงบางอย่างตามความต้องการของพวกเขา หากคุณใช้คุณสมบัตินี้คุณจะได้รับอีเมลที่สับสนน้อยลงจากผู้ที่บ่นเกี่ยวกับสคริปต์ของคุณซึ่งจะบอกคุณว่ามีคนแก้ไขสคริปต์ของคุณและมีประโยชน์มาก
โต้ตอบกับพื้นหลัง
หนึ่งในสิ่งสำคัญที่ฉันได้เรียนรู้ในหลายปีของประสบการณ์การเขียนโปรแกรมคือ JavaScript เป็นภาษาที่ยอดเยี่ยมสำหรับการพัฒนาปฏิสัมพันธ์อินเทอร์เฟซ แต่ถ้าใช้ในการประมวลผลหมายเลขหรือเข้าถึงแหล่งข้อมูล
ในขั้นต้นฉันเรียนรู้ JavaScript เพื่อแทนที่ Perl เพราะฉันเกลียดที่จะต้องคัดลอกรหัสไปยังโฟลเดอร์ CGI-bin เพื่อให้ Perl ทำงาน ต่อมาฉันรู้ว่าฉันควรใช้ภาษาทำงานแบ็กเอนด์เพื่อประมวลผลข้อมูลหลักและฉันไม่สามารถปล่อยให้ JavaScript ทำทุกอย่างได้ ที่สำคัญเราต้องพิจารณาลักษณะความปลอดภัยและภาษา
หากฉันเข้าถึงบริการเว็บฉันสามารถรับข้อมูลในรูปแบบ JSON-P ในเบราว์เซอร์ไคลเอนต์ฉันทำการแปลงข้อมูลต่าง ๆ แต่เมื่อฉันมีเซิร์ฟเวอร์ฉันมีวิธีการแปลงข้อมูลมากขึ้น ฉันสามารถสร้างข้อมูลรูปแบบ JSON หรือ HTML บนฝั่งเซิร์ฟเวอร์และส่งกลับไปยังไคลเอนต์รวมถึงข้อมูลแคช ฯลฯ หากคุณเข้าใจและเตรียมสิ่งเหล่านี้ล่วงหน้าคุณจะได้รับผลกำไรระยะยาวและบันทึกอาการปวดหัวจำนวนมาก โปรแกรมการเขียนที่เหมาะสำหรับเบราว์เซอร์ต่าง ๆ นั้นเสียเวลาใช้ชุดเครื่องมือ!
เมื่อฉันเริ่มการพัฒนาเว็บครั้งแรกฉันพยายามอย่างหนักเป็นเวลานานว่าจะใช้ document.all หรือ document.layers เมื่อเข้าถึงหน้า ฉันเลือก document.layers เพราะฉันชอบความคิดที่ว่าเลเยอร์ใด ๆ เป็นเอกสารของตัวเอง (และฉันเขียนเอกสารมากเกินไปเขียนเพื่อสร้างองค์ประกอบ) ในที่สุดรูปแบบเลเยอร์ก็ล้มเหลวดังนั้นฉันจึงเริ่มใช้เอกสารทั้งหมด ฉันมีความสุขมากเมื่อ NetScape 6 ประกาศว่ามันรองรับเฉพาะรุ่น W3C DOM แต่ในความเป็นจริงผู้ใช้ไม่สนใจเรื่องนี้ ผู้ใช้เพียงแค่เห็นว่าเบราว์เซอร์ดังกล่าวไม่สามารถแสดงสิ่งที่เบราว์เซอร์ส่วนใหญ่สามารถแสดงได้ตามปกติ - นี่เป็นปัญหาของการเข้ารหัสของเรา เราเขียนรหัสสายตาสั้นที่สามารถทำงานได้ในสภาพแวดล้อมปัจจุบัน แต่น่าเสียดายที่สภาพแวดล้อมการดำเนินงานของเรามีการเปลี่ยนแปลงอยู่ตลอดเวลา
ฉันเสียเวลามากเกินไปในการจัดการกับความเข้ากันได้กับเบราว์เซอร์และรุ่นต่างๆ การจัดการกับปัญหาประเภทนี้ทำให้ฉันมีโอกาสในการทำงานที่ดี แต่ตอนนี้เราไม่ต้องทนความเจ็บปวดนี้
ชุดเครื่องมือบางอย่างเช่น Yui, JQuery และ Dojo สามารถช่วยเราจัดการกับปัญหาประเภทนี้ได้ พวกเขาแก้ปัญหาเบราว์เซอร์ต่าง ๆ โดยการใช้การใช้งานอินเทอร์เฟซต่าง ๆ เช่นความเข้ากันไม่ได้ของเวอร์ชันข้อบกพร่องในการออกแบบ ฯลฯ ซึ่งช่วยให้เราประหยัดจากความเจ็บปวดของเรา หากคุณไม่ต้องการทดสอบเบราว์เซอร์เบต้าบางตัวอย่าเพิ่มรหัสลงในโปรแกรมของคุณเองเพื่อแก้ไขข้อบกพร่องของเบราว์เซอร์เนื่องจากคุณมีแนวโน้มที่จะลืมลบรหัสของคุณเมื่อเบราว์เซอร์แก้ไขปัญหานี้
ในทางกลับกันการพึ่งพาชุดเครื่องมือทั้งหมดก็เป็นพฤติกรรมสายตาสั้น ชุดเครื่องมือสามารถช่วยคุณพัฒนาได้อย่างรวดเร็ว แต่ถ้าคุณไม่มีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ JavaScript คุณจะทำอะไรผิดพลาด
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น