หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

บันทึกย่อ

สิ่งนี้ได้รับการปรับปรุงให้ทำงานกับ GO เวอร์ชัน 1.12 มันจะไม่ทำงานกับ GO รุ่นก่อนหน้าอีกต่อไปเพราะฟังก์ชั่น Js.NewCallback () ใน 1.11 ถูกแทนที่ด้วย js.funcof () ใน 1.12

นาฬิกาดิจิตอล

นี่เป็นตัวอย่างง่ายๆที่แสดงวิธีการใช้งานตัวจับเวลาใน GO/WebAssembly ฉันตัดสินใจที่จะเขียนมันเพราะในเวลานั้น (พฤศจิกายน 2561) การสนับสนุนทางเว็บของ WebAssembly ยังคงใหม่มากและมีตัวอย่างการสอนที่ดีเพียงไม่กี่ตัวอย่างออนไลน์

ตัวอย่างใน JavaScript

ใน JavaScript สามารถนำนาฬิกาดิจิตอลแบบง่าย ๆ มาใช้เช่นนี้: 

 function UpdateClock()
{
        var now = new Date();
        var elt = document.getElementById("clock");
        elt.innerHTML = now.toLocaleTimeString();
        setTimeout(UpdateClock,1000)
}

window.onload = UpdateClock;

บรรทัดสุดท้ายเรียกใช้ฟังก์ชัน UpdateClock() เมื่อโหลดหน้าเว็บ บรรทัดสุดท้ายใน UpdateClock() เรียก setTimeout() เพื่อเรียก UpdateClock() อีกครั้งหลังจากหนึ่งวินาที (1,000 มิลลิวินาที) ดังนั้นนาฬิกาจะยังคงอัปเดตต่อไป

ภายใน UpdateClock() เวลาจะถูกเรียกคืนโดยการสร้างวัตถุ Date ใหม่ปรับเวลาไปยังเขตเวลาท้องถิ่นด้วย toLocaleTimeString() จากนั้นแทรกเข้าไปใน DOM ของเบราว์เซอร์ ใน HTML มีแท็กที่ดูเหมือนบางอย่าง 

 <div id="clock"></div>

ซึ่งไม่มีเนื้อหาในตัวอย่างนี้ getElementById() ได้รับการจัดการบนแท็กนั้นเพื่อให้สามารถแก้ไขได้ ทุกครั้งที่มีการอัปเดตข้อความเบราว์เซอร์จะอัปเดตการแสดงผล

มาทำอย่างนั้นกันเถอะ

แล้วเราจะทำทุกอย่างได้อย่างไร? มาทีละขั้นตอน

การสร้างวัตถุ Date ที่ใหม่จะทำเช่นนี้: 

 now := js.Global().Get("Date").New()

js.Global() ได้รับ JavaScript Global Object และ Get("Date") ส่งคืนวัตถุ Date New() สร้างอินสแตนซ์ใหม่ของมัน เพื่อให้ได้เวลาในท้องถิ่น 

 s := now.Call("toLocaleTimeString").String()

เรียกวิธี toLocaleTimeString() ของ now จากนั้นแปลงเป็นประเภทสตริง GO นี่คือสิ่งที่เราต้องการใช้สำหรับเนื้อหาข้อความในหน้าเว็บ เพื่อตั้งค่านั้น 

 js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)

รับวัตถุโกลบอล JavaScript อีกครั้งรับวัตถุเอกสารและเรียกใช้ document.getElementById() โดยใช้ " clock " เป็น ID การใช้วัตถุที่ส่งคืน js.Set() ตั้งค่า textContent (เช่นเดียวกับ innerHTML ) คุณสมบัติเป็นเวลาปัจจุบัน

ส่วนสุดท้ายคือการตั้งค่าเหตุการณ์ตัวจับเวลา แทนที่จะใช้ Settimer () ทุกครั้งที่เราอัปเดตเวลาเรามาตั้งค่าตัวจับเวลาช่วงเวลาเพื่อส่งเหตุการณ์ตัวจับเวลาทุก ๆ 200 มิลลิวินาทีและเรียกรหัสอัปเดตจากนั้น 

 timer_cb := js.FuncOf(update_time)

สร้างการเรียกกลับไปยัง function update_time() ที่มีรหัส GO ด้านบน แล้ว 

 js.Global().Call("setInterval",timer_cb,"200")

เรียกใช้ฟังก์ชัน JavaScript setInterval() เพื่อเรียกใช้การโทรกลับทุก ๆ 200 มิลลิวินาที

รวมเข้าด้วยกัน

นี่คือรหัส GO เต็ม: 

 func update_time(this js.Value, args []js.Value) interface{} {
        s := js.Global().Get("Date").New().Call("toLocaleTimeString").String()
        js.Global().Get("document").Call("getElementById", "clock").Set("textContent", s)
	return nil
}

และในหลัก () 

 timer_cb := js.FuncOf(update_time)
js.Global().Call("setInterval",timer_cb,"200")

อย่างที่คุณเห็นการเขียน "JavaScript in Go" นั้นมีความผิดปกติมากขึ้นและซับซ้อนเพราะเราจำเป็นต้องใช้แพ็คเกจ js ของ Go เพื่อเข้าถึง JavaScript จาก GO แต่ฟังก์ชั่นและวิธีการใน js ให้วิธีการให้เราทำทุกอย่างใน GO ที่สามารถทำได้ใน JavaScript และมีการติดต่อเกือบ 1: 1 ระหว่างรหัส JavaScript และสิ่งที่เราต้องเขียน ดังนั้นแม้ว่ามันจะซับซ้อนกว่าเล็กน้อย แต่ก็ไม่ยากเลย

ใช้ที่เก็บ

คุณสามารถดูรหัสจริง (มีความแตกต่างเล็กน้อยเมื่อเทียบกับไฟล์ readme นี้) ใน main.go

ไฟล์ต่อไปนี้จำเป็นสำหรับการปรับใช้:

สำหรับฟังก์ชั่นพื้นฐาน 
 index.html	- the web page
main.wasm	- the compiled Go code
wasm_exec.js	- standard JavaScript glue code
สำหรับลักษณะที่ปรากฏ (CSS และรูปภาพ) 
 backgnd_tile.gif
favicon.ico
styles.css

การปรับใช้

เพียงคัดลอกไฟล์ทั้งหมดในสองกลุ่มข้างต้นไปยังไดเรกทอรีบนเว็บเซิร์ฟเวอร์ของคุณ หากต้องการดูการทำงานของนาฬิกาให้โหลด index.html ลงในเว็บเบราว์เซอร์ของคุณ

เว็บเซิร์ฟเวอร์ง่าย ๆ ที่เขียนใน GO รวมอยู่ด้วย หากต้องการดูหน้าบนคอมพิวเตอร์ของคุณเริ่มต้นเว็บเซิร์ฟเวอร์เช่นนี้ 

 $ go run webserver.go
2019/02/26 09:34:55 listening on ":8080"...

จากนั้นนำเบราว์เซอร์ของคุณไปที่ http: // localhost: 8080

ผู้เขียน 

 Jay Ts
(http://jayts.com)

ลิขสิทธิ์ 

 Copyright 2018-2019 Jay Ts

Released under the GNU Public License, version 3.0 (GPLv3)
(http://www.gnu.org/licenses/gpl.html)
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด