MomentJS - การตั้งค่าสภาพแวดล้อม
ในบทนี้คุณจะได้เรียนรู้รายละเอียดเกี่ยวกับการตั้งค่าสภาพแวดล้อมการทำงานของ MomentJS บนเครื่องคอมพิวเตอร์ของคุณ ก่อนที่คุณจะเริ่มทำงานกับ MomentJS คุณต้องมีสิทธิ์เข้าถึงไลบรารี คุณสามารถเข้าถึงไฟล์ได้ด้วยวิธีการใด ๆ ต่อไปนี้ -
วิธีที่ 1: การใช้ไฟล์ MomentJS ในเบราว์เซอร์
ในวิธีนี้เราจะต้องใช้ไฟล์ MomentJS จากเว็บไซต์ทางการและจะใช้โดยตรงในเบราว์เซอร์
ขั้นตอนที่ 1
ขั้นแรกไปที่เว็บไซต์ทางการของ MomentJS https://momentjs.comคุณจะพบโฮมเพจดังที่แสดงไว้ที่นี่ -
สังเกตว่ามีตัวเลือกการดาวน์โหลดซึ่งให้ไฟล์ MomentJS ล่าสุดแก่คุณ โปรดทราบว่าไฟล์สามารถใช้ได้ทั้งแบบและไม่มีการย่อขนาด
ขั้นตอนที่ 2
ตอนนี้รวม moment.js ข้างใน scriptแท็กและเริ่มทำงานกับ MomentJS สำหรับสิ่งนี้คุณสามารถใช้รหัสที่ระบุด้านล่าง -
<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>ให้นี่คือตัวอย่างการทำงานและผลลัพธ์เพื่อความเข้าใจที่ดีขึ้น -
ตัวอย่าง
<html>
<head>
<title>MomentJS - Working Example</title>
<script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
<style>
div {
border: solid 1px #ccc;
padding:10px;
font-family: "Segoe UI",Arial,sans-serif;
width: 50%;
}
</style>
</head>
<body>
<div style = "font-size:25px" id = "todaysdate"></div>
<script type = "text/JavaScript">
var a = moment().toString();
document.getElementById("todaysdate").innerHTML = a;
</script>
</body>
</html>เอาต์พุต
moment-localeไฟล์ที่จะทำงานกับภาษาต่างๆก็มีให้เช่นกันดังที่แสดงในภาพหน้าจอด้านบน ตอนนี้เพิ่มไฟล์ลงในแท็กสคริปต์ดังที่แสดงด้านล่างและทำงานกับภาษาต่างๆที่คุณเลือก สำหรับสิ่งนี้คุณสามารถใช้รหัสที่ระบุด้านล่าง -
<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>ให้นี่เป็นตัวอย่างการทำงานสำหรับโมเมนต์โลแคลและผลลัพธ์เพื่อความเข้าใจที่ดีขึ้น -
<html>
<head>
<script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
</head>
<body>
<h1>Moment Locale</h1>
<div id = "datedisplay" style = "font-size:30px;"></div>
<script type = "text/JavaScript">
var a = moment.locale("fr");
var c = moment().format("LLLL");
document.getElementById("datedisplay").innerHTML = c;
</script>
</body>
</html>เอาต์พุต
วิธีที่ 2: การใช้ Node.js
หากคุณเลือกใช้วิธีนี้ตรวจสอบให้แน่ใจว่าคุณมี Node.js และ npmติดตั้งในระบบของคุณ คุณสามารถใช้คำสั่งต่อไปนี้เพื่อติดตั้ง MomentJS -
npm install momentคุณสามารถสังเกตผลลัพธ์ต่อไปนี้เมื่อติดตั้ง MomentJS สำเร็จ -
ตอนนี้เพื่อทดสอบว่า MomentJS ทำงานได้ดีกับ Node.js หรือไม่ให้สร้างไฟล์ test.js และเพิ่มรหัสต่อไปนี้ -
var moment = require('moment');
var a = moment().toString();
console.log(a);ตอนนี้ในพรอมต์คำสั่งเรียกใช้โหนดคำสั่ง test.js ดังที่แสดงในภาพหน้าจอด้านล่าง -
โปรดสังเกตว่าคำสั่งนี้แสดงผลลัพธ์สำหรับ moment().toString().
วิธีที่ 3: การใช้ Bower
Bower เป็นอีกวิธีหนึ่งในการรับไฟล์ที่ต้องการสำหรับ MomentJS คุณสามารถใช้คำสั่งต่อไปนี้เพื่อติดตั้ง MomentJS โดยใช้ Bower -
bower install --save momentภาพหน้าจอด้านล่างแสดงการติดตั้ง MomentJS โดยใช้ Bower -
นี่คือไฟล์ที่โหลดจาก Bower เพื่อให้ MomentJS ติดตั้ง ไฟล์ช่วงเวลาและสถานที่ที่ติดตั้งจะแสดงในภาพด้านล่าง -
