الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

ملاحظات الإصدار

تم تحديث هذا للعمل مع GO الإصدار 1.12. لن يعمل بعد الآن مع الإصدارات السابقة من GO لأن الدالة JS.NewCallback () في 1.11 تم استبدالها بـ JS.Funcof () في 1.12.

الساعة الرقمية

هذا مثال بسيط للغاية يوضح كيفية تنفيذ مؤقت في GO/Webassembly. قررت كتابتها لأنه في ذلك الوقت (نوفمبر 2018) ، كان دعم GO's 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() مرة أخرى بعد ثانية واحدة (1000 ميلي ثانية) ، وبالتالي ستستمر الساعة في التحديث.

ضمن UpdateClock() ، يتم استرداد الوقت عن طريق إنشاء كائن Date جديد ، وضبط الوقت إلى المنطقة الزمنية المحلية باستخدام toLocaleTimeString() ، ثم إدخال ذلك في DOM للمتصفح. في HTML ، هناك علامة تبدو مثل 

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

التي لا تحتوي على محتوى في هذا المثال. getElementById() يحصل على مقبض على تلك العلامة حتى يمكن تعديله. في كل مرة يتم تحديث النص ، يقوم المتصفح بتحديث الشاشة.

دعونا نفعل ذلك في GO

فكيف نفعل كل ذلك في GO؟ لنأخذ الأمر خطوة بخطوة.

يتم إنشاء كائن Date جديد مثل هذا: 

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

js.Global() يحصل على كائن JavaScript Global ، Get("Date") إرجاع كائن Date . New() يخلق مثيلًا جديدًا منه. للحصول على الوقت المحلي ، 

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

يستدعي طريقة toLocaleTimeString() now ، ثم يحولها إلى نوع سلسلة GO. هذا ما نريد استخدامه لمحتوى النص في صفحة الويب. لتعيين ذلك ، 

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

مرة أخرى ، يحصل على كائن JavaScript Global ، ويحصل على كائن المستند الخاص به ، ومكالمات document.getElementById() باستخدام " clock " كمعرف. باستخدام الكائن الذي تم إرجاعه ، يقوم 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
}

وفي Main () ، 

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

كما ترون ، فإن كتابة "JavaScript in Go" هي أكثر مطوّلة ومعقدة لأننا بحاجة إلى استخدام حزمة js Go للوصول إلى JavaScript من Go. لكن الوظائف والأساليب في js توفر طرقًا لنا للقيام بكل شيء يمكن القيام به في 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)
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل