JavaScript กำลังเป็นที่นิยมมากขึ้นเรื่อย ๆ มันได้กลายเป็นตัวเลือกแรกสำหรับการพัฒนาส่วนหน้า ด้วย NodeJS ตามภาษา JavaScript เรายังสามารถพัฒนาบริการแบ็คเอนด์ที่มีประสิทธิภาพสูง ฉันเคยเห็น JavaScript ปรากฏในสาขาการเขียนโปรแกรมฮาร์ดแวร์ JavaScript ค่อยๆพัฒนาเป็นภาษาการพัฒนาทุกรอบ
แต่มันไม่ใช่เรื่องง่ายที่จะใช้ JavaScript ได้ดี นอกเหนือจากการเรียนรู้ไวยากรณ์และรู้วิธีการเขียนรหัสคุณภาพสูงคุณยังต้องเข้าใจวิธีการแก้ปัญหาความต้องการที่จะพบในเกือบทุกโครงการเช่น: การตัดสินวันที่เน้นข้อความ จำกัด จำนวนตัวละคร ฯลฯ จะส่งผลกระทบต่อประสิทธิภาพของระบบ วิธีการของฉันคือการรวบรวมและใช้ตัวอย่าง JavaScript ทั่วไปเหล่านั้นและใช้ก่อนเมื่อจำเป็น ด้านล่างนี้เป็นรหัสจาวาสคริปต์ที่ใช้งานได้ 10 ชิ้นที่ฉันรวบรวมไว้ จากพวกเขาคุณยังสามารถสร้างปลั๊กอิน JS ที่มีประสิทธิภาพหรือฟังก์ชั่นการใช้งานที่มีประสิทธิภาพมากขึ้น
1. ตรวจสอบว่าวันที่ถูกต้องหรือไม่
ฟังก์ชั่นวันที่ที่รวมอยู่ในจาวาสคริปต์ยังคงง่ายเกินไปและเป็นการยากที่จะตอบสนองความต้องการของการแยกวิเคราะห์และตัดสินรูปแบบวันที่ที่แตกต่างกันในโครงการจริง JQuery ยังมีห้องสมุดบุคคลที่สามเพื่อทำการประมวลผลที่เกี่ยวข้องกับวันที่ง่าย แต่บางครั้งคุณอาจต้องการฟังก์ชั่นที่ง่ายมากโดยไม่ต้องแนะนำห้องสมุดบุคคลที่สามขนาดใหญ่ ในเวลานี้คุณสามารถใช้รหัสการตรวจสอบวันที่ต่อไปนี้ซึ่งช่วยให้คุณสามารถปรับแต่งรูปแบบวันที่และตรวจสอบความถูกต้องของวันที่
ฟังก์ชั่น isValidDate (ค่า userFormat) {// ตั้งค่ารูปแบบเริ่มต้นหากรูปแบบไม่ได้ให้ userFormat = userFormat || 'mm/dd/yyyy'; // ค้นหาตัวคั่นที่กำหนดเองโดยไม่รวม // เดือนตัวอักษรวันและปีตัวคั่น var delimiter =/[มม. เหมือนกัน/. exec(userformat) [0]; // สร้างอาร์เรย์ที่มีเดือนวันและปี // ดังนั้นเราจึงทราบลำดับรูปแบบโดยดัชนี var theformat = userformat.split (คั่น); // สร้างอาร์เรย์จากวันที่ผู้ใช้ var thedate = value.split (ตัวคั่น); ฟังก์ชั่น iSdate (วันที่, รูปแบบ) {var m, d, y, i = 0, len = format.length, f; สำหรับ (i; i <len; i ++) {f = รูปแบบ [i]; if (/m/.test(f)) m = วันที่ [i]; if (/d/.test(f)) d = วันที่ [i]; ถ้า (/y/.test(f)) y = วันที่ [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // ตรวจสอบว่าเป็นวันที่ถูกต้องของเดือน d <= (วันที่ใหม่ (y, m, 0)). getDate ()); } return iSdate (thedate, theformat);}วิธีใช้:
การโทรต่อไปนี้ส่งคืนเท็จเพราะไม่มี 31 วันในเดือนพฤศจิกายน
isvaliddate ('DD-MM-YYYY', '31/11/2012 ')
2. รับความกว้างสูงสุดหรือความสูงของชุดองค์ประกอบ
ฟังก์ชั่นต่อไปนี้มีประโยชน์มากสำหรับนักพัฒนาที่ต้องการดำเนินการเลย์เอาต์แบบไดนามิก
var getMaxHeight = function ($ elms) {var maxheight = 0; $ elms.each (function () {// ในบางกรณีคุณอาจต้องการใช้ outerheight () แทนความสูง var = $ (นี่) .Height (); ถ้า (ความสูง> maxHeight) {maxHeight = ความสูง;}}); ส่งคืน maxheight;};วิธีใช้:
$ (องค์ประกอบ) .Height (getMaxHeight ($ (องค์ประกอบ)));
3. ไฮไลต์ข้อความ
มีไลบรารีของบุคคลที่สามจำนวนมากของ jQuery ที่สามารถใช้ฟังก์ชั่นของการไฮไลต์ข้อความ แต่ฉันชอบที่จะใช้รหัส JavaScript ชิ้นเล็ก ๆ ต่อไปนี้เพื่อใช้ฟังก์ชั่นนี้ มันสั้นมากและสามารถปรับเปลี่ยนได้อย่างยืดหยุ่นตามความต้องการของฉันและคุณสามารถกำหนดสไตล์การเน้นด้วยตัวเอง ฟังก์ชั่นสองฟังก์ชั่นต่อไปนี้สามารถช่วยคุณสร้างปลั๊กอินไฮไลต์ข้อความของคุณเอง
ฟังก์ชั่นไฮไลต์ (ข้อความ, คำ, แท็ก) {// แท็กเริ่มต้นหากไม่มีแท็กมีให้แท็ก = แท็ก || 'ช่วง'; var i, len = words.length, re; สำหรับ (i = 0; i <len; i ++) {// global regex เพื่อเน้นการจับคู่ทั้งหมด RE = ใหม่ regexp (คำ [i], 'g'); if (re.test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} ส่งคืนข้อความ;}คุณจะต้องใช้ฟังก์ชั่นที่ไม่มีแสงสว่าง:
ฟังก์ชั่น unhehlight (ข้อความ, แท็ก) {// แท็กเริ่มต้นหากไม่มีแท็กมีให้แท็ก = แท็ก || 'ช่วง'; var re = new regexp ('(<'+tag+'.+?> | <//'+tag+'>)', 'g'); return text.replace (re, '');}วิธีใช้:
$ ('p'). html (ไฮไลต์ ($ ('p'). html (), // ข้อความ ['foo', 'bar', 'baz', 'Hello World'], // รายการคำหรือวลีที่เน้น4. เอฟเฟกต์การเคลื่อนไหวของข้อความ
บางครั้งคุณต้องการเพิ่มการเคลื่อนไหวในย่อหน้าของข้อความของคุณเพื่อให้ทุกคำสามารถเคลื่อนไหวได้ คุณสามารถใช้รหัสปลั๊กอิน jQuery ต่อไปนี้เพื่อให้ได้เอฟเฟกต์นี้ แน่นอนว่าคุณต้องรวมรูปแบบการเปลี่ยนแปลง CSS3 เพื่อให้ได้ผลลัพธ์ที่ดีขึ้น
$ .fn.animatetext = ฟังก์ชั่น (ล่าช้า, klass) {var text = this.text (); ตัวอักษร var = text.split (''); return this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>')); $ this.find ('span.letter') แต่ละ (i, el) {settimeout -วิธีใช้:
$ ('p'). animatetext (15, 'foo');
5. ซ่อนองค์ประกอบทีละตัว
ปลั๊กอิน jQuery ต่อไปนี้สามารถซ่อนกลุ่มขององค์ประกอบทีละตัวตามความยาวขั้นตอน (เวลาช่วงเวลา) ที่คุณตั้งค่า ใช้ในการโหลดรายการรายการรายการใหม่สามารถบรรลุผลลัพธ์ที่ดี
$ .FN.FADEALL = FUNCTION (OPS) {var O = $ .EXTEND ({delay: 500, // การหน่วงเวลาระหว่างความเร็วองค์ประกอบ: 500, // ความสะดวกในการเคลื่อนไหวง่าย: 'สวิง' // อื่น ๆ ต้องผ่อนคลายปลั๊กอิน} var $ el = this; สำหรับ (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (O.Speed, O.Ease); } return $ el;}วิธีใช้:
$ (องค์ประกอบ) .fadeall ({ล่าช้า: 300, ความเร็ว: 300});
6. จำกัด จำนวนคำในข้อความ
สคริปต์ด้านล่างช่วยให้คุณสกัดกั้นข้อความตามความยาวอักขระที่กำหนด หากข้อความถูกสกัดกั้นมันจะตามมาด้วยจุดไข่ปลาโดยอัตโนมัติ
ฟังก์ชั่นข้อความที่ตัดตอนมา (str, nwords) {var words = str.split (''); Words.splice (nwords, words.length-1); return words.oin ('') + (words.length! == str.split ('') .length? '…': '');}7. กำหนดความสามารถในการปรับตัวในรูปแบบที่สอดคล้องกัน
การออกแบบจำนวนมากได้นำเลย์เอาต์ตอบสนองมาใช้เพื่อปรับให้เข้ากับการแสดงผลของเว็บไซต์หรือแอปพลิเคชันบนอุปกรณ์ต่าง ๆ คุณมักจะต้องพิจารณาว่าการปรับหน้าจอใดที่คุณอยู่ในรหัส
ฟังก์ชั่น iSbreakPoint (bp) {// จุดพักที่คุณตั้งค่าใน CSS var bps = [320, 480, 768, 1024]; var w = $ (หน้าต่าง) .width (); var min, สูงสุด; สำหรับ (var i = 0, l = bps.length; i <l; i ++) {ถ้า (bps [i] === bp) {min = bps [i-1] || 0; สูงสุด = bps [i]; หยุดพัก; }} return w> min && w <= max;}วิธีใช้:
if (iSbreakPoint (320)) {// เบรกพอยต์ที่ 320 หรือน้อยกว่า} ถ้า (isbreakpoint (480)) {// เบรกพอยต์ระหว่าง 320 ถึง 480} ...8. จำนวนทั่วโลก
ในบางเกมหรือสถานการณ์การโฆษณาคุณต้องบันทึกจำนวนครั้งที่ผู้ใช้คลิกปุ่มในหน้าปัจจุบัน ในเวลานี้คุณสามารถใช้ฟังก์ชัน. data () ของ jQuery เพื่อจัดการ:
$ (องค์ประกอบ) .data ('counter', 0) // เริ่มต้นตัวนับที่ศูนย์. click (function () {var counter = $ (นี่) .data ('counter'); // รับ $ (นี้) .data ('counter', ตัวนับ + 1); // set // ทำอย่างอื่น ... });9. Embed Youku Video
ฟังก์ชั่น embedyouku (ลิงก์, ops) {var o = $. extend ({width: 480, ความสูง: 320, params: ''}, ops); var id = //?v/=(/w+)/.exec(link) [1]; return '<ฝัง fulllScreen = "true" id = "EMBEDID" คุณภาพ = "สูง" align = "กลาง" อนุญาตให้ใช้งาน criptAccess = "เสมอ" type = "แอปพลิเคชัน/x-shockwave-flash" src = "'+id+'?'+o.ops '' '';}วิธีใช้:
embedyouku ('http://static.youku.com/v/swf/qplayer.swf', {'wintype = adshow & videoids = xmte3nzqq0ntky & isautoplay = false & iSshowRelatedVideo = false'});10. สร้างเมนูแบบไดนามิกหรือรายการดรอปดาวน์
ในหลาย ๆ สถานการณ์เราจำเป็นต้องสร้างเมนูรายการดรอปดาวน์หรือรายการแบบไดนามิก ต่อไปนี้เป็นส่วนหนึ่งของรหัสพื้นฐานที่สุดในการใช้ฟังก์ชั่นข้างต้นและคุณสามารถขยายได้ตามความต้องการที่แท้จริง
ฟังก์ชั่น makemenu (รายการ, แท็ก) {tags = tags || ['ul', 'li']; // แท็กเริ่มต้น var parent = tags [0]; var child = tags [1]; รายการ var, value = ''; สำหรับ (var i = 0, l = items.length; i <l; i ++) {item = items [i]; // รายการและค่าแยกต่างหากถ้าค่าอยู่ถ้า (/:/.test(item)) {item = items [i] .split (':') [0]; value = items [i] .split (':') [1]; } // ห่อรายการในรายการแท็ก [i] = '<'+child+''+(value && 'value = "'+value+'' ')+'> '+// เพิ่มค่าถ้าแสดงรายการ+' </'+child+'> '; } return '<' + parent + '>' + items.join ('') + '</' + parent + '>';}วิธีใช้:
// ดรอปดาวน์เลือก Monthmakemenu (['มกราคม: ม.ค. ', 'กุมภาพันธ์: ก.พ. ', 'มีนาคม: มี.ค. '], // รายการ: ค่า ['เลือก', 'ตัวเลือก']); // รายการของชำ makemenu ('carrots', 'Lettuce', 'tomatos', 'นม'ข้างต้นเป็นเพียงส่วนเล็ก ๆ ของตัวอย่างโค้ดจาวาสคริปต์ที่ใช้งานได้เหล่านั้น ฉันขอแนะนำให้คุณให้ความสนใจกับการรวบรวมหรือเขียนตัวอย่างรหัสพื้นฐานดังกล่าวด้วยตัวคุณเอง พวกเขาสามารถใช้ในหลายโครงการหรือให้ฟังก์ชั่นที่สมบูรณ์ยิ่งขึ้นผ่านการแก้ไขบางอย่าง การใช้ตัวอย่างโค้ดเหล่านี้จะช่วยให้คุณประหยัดเวลาในการพัฒนาได้มาก