บทความนี้แบ่งปันวิธีการ JS ที่ใช้งานได้จริงบางอย่างที่ฉันได้สะสมในชีวิตประจำวันสำหรับคำแนะนำและการประเมินผลของคุณ ฉันต้องการแนะนำมันในบทความที่แตกต่างกัน แต่ฉันพบว่ามันเพิ่มขึ้นเล็กน้อย ฉันได้แยกแยะวิธีการ แต่ฉันไม่มีวิธีมากมายในการแสดง แน่นอนว่าบางคนเป็นวิธีที่ฉันเห็นออนไลน์ว่าฉันคิดว่าเป็นประโยชน์มาก ฉันจะโพสต์พวกเขาที่นี่เพื่อให้ทุกคนพูดคุย
1. คลิกเพื่อส่งคืนหากไม่มีหน้าก่อนหน้าจากนั้นข้ามไปที่หน้าระบุ
ก่อนอื่นข้อกำหนดของความต้องการของลูกค้า - หน้าเดียวที่แชร์ไปยัง WeChat คลิกเพื่อกลับไปที่หน้าแรกของเว็บไซต์
ในช่วงเวลานี้ฟังก์ชั่นนี้ได้มีการหารือกับลูกค้า คุณสามารถเพิ่มปุ่มลงในหน้าแรกเพื่อข้ามไปที่หน้าได้หรือไม่?
อย่างไรก็ตามวิธีนี้ไม่สามารถทำงานได้ในแต่ละหน้าและระบุว่าหน้าการแชร์ที่ต้องการฟังก์ชั่นนี้ไม่มีไอคอนถัดไปและไม่ส่งผลกระทบต่อความงาม ดังนั้นฉันต้องมองหาผ้าขี้ริ้ว สุนัขยังเต็มไปด้วยฟังก์ชั่นที่เล่นลูกบอลขอบ
ดังนั้นด้วยความพยายามของฉันเองฉันมีรหัสต่อไปนี้:
// กลับไปที่โฮมเพจโดยไม่ต้องมีหน้าก่อนกลับไปที่ฟังก์ชัน pushhistory () {// รับจำนวนระเบียนในสแต็กประวัติเบราว์เซอร์ // เนื่องจากหน้าปัจจุบันถูกผลักเข้าไปในสแต็กเมื่อโหลดหน้าเว็บมันจะกำหนดว่าน้อยกว่า 2 ถ้า (history.length <2) {var state = {title: window.history.pushstate (สถานะ, "ดัชนี", gethttpprefix + "index.html"); state = {title: "index", url: ""}; window.history.pushstate (สถานะ, "ดัชนี", ""); -จากนั้นเพิ่มรหัสต่อไปนี้ในเหตุการณ์พร้อมบนหน้า:
settimeout (function () {pushhistory () window.addeventListener ("popstate", ฟังก์ชั่น (e) {5 ถ้า (window.history.state! = null && window.story.state.url! = "") {location.href = window.history.state.urlฟังก์ชั่นเฉพาะคือการพิจารณาว่ามีหน้าก่อนหรือไม่ หากไม่ได้ใส่ที่อยู่ลิงค์ของเว็บไซต์ลงในสถานะ (ใช้โฮมเพจที่นี่) จากนั้นฟังเหตุการณ์ป๊อปสเตตเพื่อดำเนินการฟังก์ชั่นที่สอดคล้องกัน
อาจมีปัญหาเล็กน้อยเกี่ยวกับรหัสนี้ดังนั้นฉันวางแผนที่จะโพสต์และบางคนสามารถพูดคุยและปรับปรุงด้วยกัน
2. วิธีการบันทึกที่สะดวก
ฉันเชื่อว่าทุกคนเหนื่อยกับความยาว verbose ของ console.log () เล็กน้อยเมื่อทำการดีบักหน้า บางคนอาจใช้อินพุตทางลัดเพื่อสร้างอินพุตอย่างรวดเร็ว (เช่นอินพุต CL Compile Environment กระโดดออกจากคอนโซลอย่างชาญฉลาด) อย่างไรก็ตามเมื่อโครงการได้รับการปล่อยตัวมันจะยังคงชัดเจน ดังนั้นฉันแค่เขียนวิธีการจัดการกับสถานการณ์นี้โดยเฉพาะ
ฟังก์ชั่น lll () {// ตัวแปรส่วนกลาง _debug ใช้เพื่อควบคุมสวิตช์ข้อมูลการดีบักถ้า (_debug) {var arr = []; // อาร์กิวเมนต์เป็นชุดพารามิเตอร์ของวิธีการ สิ่งนี้ทำเพื่อไม่ จำกัด จำนวนพารามิเตอร์และอำนวยความสะดวกในการดีบักสำหรับ (_item ในอาร์กิวเมนต์) {// เพราะนิสัยส่วนบุคคลที่ข้อมูลสตริงแสดงในบรรทัดสตริงจะถูกกรองและ spliced ถ้า (typeof _item == "string") {arr.push (_item) if (arr.length> 0) console.log (arr.join (','))}}ที่จริงแล้วฉันไม่พอใจเล็กน้อยที่ฉันไม่สามารถรับชื่อของพารามิเตอร์ได้โดยอัตโนมัติมิฉะนั้นฉันสามารถใช้มันได้เช่นนี้:
var a = 123, b = 333, obj = {ชื่อ: "ชื่อ", เนื้อหา: "... "} lll (a, b, obj) // ข้อมูลการดีบักคือ: a: 123, b: 123 // obj: // {ชื่อ: "ชื่อ", เนื้อหา: "... "}}ดูเหมือนคุณจะเข้าใจมากขึ้นหรือไม่?
3. รับข้อมูลการวางตำแหน่งเบราว์เซอร์ (รองรับเทอร์มินัลมือถือ)
หลายโครงการที่ฉันได้รับคือการพัฒนาที่กำหนดเองบนมือถือดังนั้นข้อมูลที่ต้องการตำแหน่งปัจจุบันที่จะอยู่มักจะใช้
อย่างไรก็ตามอินเทอร์เฟซจำนวนมากบนอินเทอร์เน็ตจำเป็นต้องอ้างอิงส่วน JS ภายนอกเช่น API ของ Baidu, API ของ WeChat ฯลฯ
ต่อไปฉันจะแนะนำวิธีการที่ไม่จำเป็นต้องมีการอ้างอิงถึง JS ภายนอก แต่จำเป็นต้องส่งพารามิเตอร์ไปยังลิงก์ API ภายนอกเพื่อรับตำแหน่ง:
if (getCookie ('ตำแหน่ง') == "") {ถ้า (navigator.useragent.indexof ("micromessenger")> -1) {// ตัดสินว่าเป็นเทอร์มินัล wechat หรือไม่ขึ้นอยู่กับสถานการณ์ Navigator.geolocation.getCurrentPosition HTML5 (เทอร์มินัลมือถือมีความแม่นยำมากที่สุดพีซีจะมีค่าเบี่ยงเบนขนาดใหญ่) var lat = position.coords.latitude; // รับละติจูดในปัจจุบัน var lng = position.coords.longitude; // รับ longitude var arr = [] arr.push (lng) arr.push (lat) // "http://api.map.baidu.com/geocoder/v2/ak=om55dvwvwluu7shkz7uy8m6e&callback=renderreverse&location=" + lat + "," lng + "& json & pois = 1 พารามิเตอร์ beforesend: function () {// เนื่องจากกระบวนการนี้ต้องใช้เวลาพอสมควรที่จะมีพรอมต์โหลดในหน้า iOSload () // หน้าภาพเคลื่อนไหวที่ฉันเขียน}, ข้อมูล: {}, ข้อมูลประเภท: "jsonp", // การส่งผ่านโดเมนต้องการตัวรับสัญญาณและเครื่องส่งสัญญาณเพื่อทำหน้าที่เป็นหนึ่งเดียว: ฟังก์ชั่น (ข้อมูล) {ios.hide (); }, ฟังก์ชั่น (ข้อผิดพลาด) {//alert(error.message);}, {})}}รหัสนี้เป็นส่วนหนึ่งของรหัสในโครงการจริงของฉัน เนื่องจากฉันต้องการตรวจสอบว่าได้รับข้อมูลการกำหนดเป้าหมายหรือไม่ฉันไม่สามารถรับได้ทุกครั้งที่มีการโหลดหน้าเว็บดังนั้นฉันจึงบันทึกข้อมูลการกำหนดเป้าหมายโดยใช้คุกกี้
ในตอนแรกเราพิจารณาว่ามีคุกกี้ข้อมูลตำแหน่งปัจจุบันหรือไม่ แต่ไม่มี จากนั้นตรวจสอบว่าอยู่ในเทอร์มินัลมือถือ (เนื่องจากโครงการมาจากเทอร์มินัล WeChat ฉันเพิ่งตรวจสอบเทอร์มินัล WeChat ที่นี่)
จากนั้นเรียกใช้พารามิเตอร์อินเตอร์เฟสที่จัดทำโดย HTML5 สำหรับการส่งข้อมูลและ JSONP ที่ส่งคืนจาก Baidu จะถูกประมวลผล เนื่องจากโครงการของฉันต้องได้รับข้อมูลเมืองที่ตั้งเท่านั้นฉันแค่ยกตัวอย่างการได้รับเมือง
4. รับส่วนตัวเลขของสตริง
เนื่องจากฉันรับผิดชอบเฉพาะการใช้งานฟังก์ชั่นในโครงการฉันไม่ได้สร้างหน้าหลายหน้าด้วยตัวเอง แต่ฉันจะสร้างสถานการณ์ที่ยากลำบากซึ่งค่าในแท็กนั้นยากที่จะได้รับ
ตัวอย่างเช่น:
<div> ราคาเดิมของ 998 อยู่ตอนนี้เท่านั้น <a> 99.8! </a> </div>
สำหรับหน้าเช่นนี้บางครั้งคุณต้องได้รับ 998 หรือ 98 ในนั้น มันจะกลายเป็นปัญหาเล็กน้อย
ด้วยวิธีที่ฉันให้ไว้ด้านล่างสถานการณ์นี้สามารถแก้ไขได้ง่าย
ฟังก์ชั่น getNum (ข้อความ) {var value = text.replace (/[^(0-9).]/ig, ""); ส่งคืน parsefloat (ค่า); -วิธีนี้สั้นมากและเป็นหลักที่จับคู่ผ่านความสม่ำเสมอ แทนที่อักขระที่ไม่ใช่หมายเลขหรือทศนิยมด้วยสตริงว่างเปล่า (ถูกลบจริง)
ข้อมูลที่ส่งคืนด้วยวิธีนี้คือหมายเลขที่เราต้องการ ในที่สุดฉันก็แปลงเป็นจุดลอยตัวซึ่งก็เพื่ออำนวยความสะดวกหลังการประมวลผลข้อมูล ตัวอย่างเช่นเก็บทศนิยมสองตำแหน่งรอบพวกเขา ฯลฯ
5. รับข้อมูลอุปกรณ์
//#region รับข้อมูลอุปกรณ์ var browser = {เวอร์ชัน: function () {var u = navigator.useragent, app = navigator.Appversion; return {Trident: U.Indexof ('Trident')> -1, // คือเคอร์เนล Presto: U.indexof ('presto')> -1, // opera kernel webkit: u.indexof ('applewebkit')> -1, // Apple และ Google Kernel Gecko: U.Indexof ('') -1, // Firefox Kernel Mobile: !! U.Match (/applewebkit.*Mobile.*/), // เป็นเทอร์มินัลมือถือ iOS: !! U.Match (// (i [^;]+; (u;)? cpu.+mac os x/) // Android Terminal หรือ UC เบราว์เซอร์ iPhone: U.Indexof ('iPhone')> -1, // มันเป็น iPhone หรือ qqhd เบราว์เซอร์ iPad: U.indexof ('iPad')> -1, // เป็น iPad WebApp: U.Indexof ('Safari') == -1 U.Indexof ('micromessenger')> -1, // ไม่ว่าจะเป็น wechat (เพิ่มใหม่ใน 2015-01-22) qq: u.match (// sqq/i) == "qq" // ไม่ว่าจะเป็น qq}; (browser.versions.webkit) {// รหัสที่ดำเนินการสำหรับ Apple และ Google Kernel ... } //#endregionนี่คือวิธีการตัดสินข้อมูลอุปกรณ์ที่ฉันเขียนและเห็นบนอินเทอร์เน็ต
โดยส่วนตัวแล้วฉันคิดว่ามันมีประโยชน์มากดังนั้นฉันจะแบ่งปันกับคุณ
วิธีการขยายสตริง-ต่อไปนี้เป็น วิธีการต่อท้ายข้อมูลประเภทสตริง
1. ซ่อนส่วนของสตริงเกินความยาวที่ระบุ
/*แสดงสตริงที่ความยาวที่ระบุและส่วนเกินจะแสดงในจุดไข่ปลา (len-ความยาวของความยาว-สตริง Stand Stand ถ้าสตริงว่างเปล่า)*/string.prototype.splitstring = ฟังก์ชั่น (len, defaultStr) {var result = ""; var str = this.toString () ถ้า (str) {str = str.trim () ถ้า (str.length> len) {result = str.substring (0, len) + "... "; } else {result = str; }} else {result = defaultStr; } ผลตอบแทนผลลัพธ์;}ความคิดเห็นนั้นง่ายพอ หากคุณไม่เข้าใจคุณสามารถฝากข้อความไว้และบล็อกเกอร์จะตอบกลับหากคุณเห็น
2. ลบความยาวสตริงด้วยหนึ่ง
// ลบสตริงความยาวหนึ่งอัน prototype.dellast = function () {return this.substring (0, this.length - 1)}บางคนอาจคิดว่าวิธีนี้ค่อนข้างน่าสงสัยในการถอดกางเกงและผายลม แต่อันที่จริงการดำเนินการนี้มักจะจำเป็นในโครงการจริง
แทนที่จะเขียนสายย่อยยาวเราควรเขียนวิธีการเพื่อทำให้รหัสง่ายขึ้นและมันก็สะดวกมากที่จะคลิกสตริงที่เกี่ยวข้องโดยตรงและเลือก Dellast เมื่อเข้ารหัสรหัส
ในประโยคเดียวมันก็โอเคที่จะใช้มัน!
3. กรอกความยาวที่ระบุของสตริงตัวเลข
// ความยาวคงที่สำหรับสตริงสตริงตัวเลข prototype.addzero = function (n) {var num = นี้ var len = num.toString (). ความยาว; ในขณะที่ (len <n) {num = '0' + num; Len ++; } return num;}คุณอาจไม่เข้าใจเมื่ออ่านความคิดเห็น อันที่จริงมันเป็นเพียงการเพิ่มสตริงนี้เป็น "2" วิธีการขยายนี้สามารถใช้ด้วยวิธีนี้ addzero (2)
จากนั้นสตริงที่ส่งคืนคือสตริงเช่น "02"
ทุกคนบอกว่ามันโอเคหลังจากใช้มัน!
4. แปลงประเภทฐานข้อมูลประเภท DateTime จนถึงปัจจุบัน
string.prototype.dtd = function () {ส่งคืนวันที่ใหม่ (date.parse (this.toString (). แทนที่ (/-/g, "/")))}5. ชื่อเล่นของผู้ใช้ละเว้น
// ชื่อเล่นของผู้ใช้ละเว้น string.prototype.telhide = function () {var name = name return name.substr (0, 1) + "****" + name.substring (name.length - 1, name.length)}}ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน