MomentJS - Thiết lập môi trường
Trong chương này, bạn sẽ tìm hiểu chi tiết về cách thiết lập môi trường làm việc của MomentJS trên máy tính cục bộ của bạn. Trước khi bắt đầu làm việc trên MomentJS, bạn cần có quyền truy cập vào thư viện. Bạn có thể truy cập tệp của nó bằng bất kỳ phương pháp nào sau đây:
Phương pháp 1: Sử dụng tệp MomentJS trong trình duyệt
Trong phương pháp này, chúng tôi sẽ cần tệp MomentJS từ trang web chính thức của nó và sẽ sử dụng trực tiếp trong trình duyệt.
Bước 1
Bước đầu tiên, hãy truy cập trang web chính thức của MomentJS https://momentjs.comBạn sẽ tìm thấy trang chủ như được hiển thị ở đây -
Quan sát rằng có một tùy chọn tải xuống cung cấp cho bạn tệp MomentJS mới nhất hiện có. Lưu ý rằng tệp có sẵn có và không có thu nhỏ.
Bước 2
Bây giờ, bao gồm moment.js bên trong scriptvà bắt đầu làm việc với MomentJS. Đối với điều này, bạn có thể sử dụng mã được cung cấp bên dưới -
<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
Dưới đây là một ví dụ hoạt động và đầu ra của nó để hiểu rõ hơn -
Thí dụ
<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>
Đầu ra
Các moment-localetệp để hoạt động với các ngôn ngữ khác nhau cũng có sẵn như được hiển thị trong ảnh chụp màn hình ở trên. Bây giờ, hãy thêm tệp vào thẻ script như được hiển thị bên dưới và làm việc với các ngôn ngữ khác nhau mà bạn chọn. Đối với điều này, bạn có thể sử dụng mã được cung cấp bên dưới -
<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>
Dưới đây là một ví dụ hoạt động cho ngôn ngữ thời điểm và đầu ra của nó để hiểu rõ hơn -
<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>
Đầu ra
Phương pháp 2: Sử dụng Node.js
Nếu bạn đang chọn phương pháp này, hãy đảm bảo rằng bạn có Node.js và npmđược cài đặt trên hệ thống của bạn. Bạn có thể sử dụng lệnh sau để cài đặt MomentJS:
npm install moment
Bạn có thể quan sát kết quả sau khi MomentJS được cài đặt thành công:
Bây giờ, để kiểm tra xem MomentJS có hoạt động tốt với Node.js hay không, hãy tạo tệp test.js và thêm mã sau vào đó:
var moment = require('moment');
var a = moment().toString();
console.log(a);
Bây giờ, trong dấu nhắc lệnh, hãy chạy nút lệnh test.js như được hiển thị trong ảnh chụp màn hình bên dưới:
Lưu ý rằng lệnh này hiển thị đầu ra cho moment().toString().
Phương pháp 3: Sử dụng Bower
Bower là một phương pháp khác để lấy các tệp cần thiết cho MomentJS. Bạn có thể sử dụng lệnh sau để cài đặt MomentJS bằng Bower:
bower install --save moment
Ảnh chụp màn hình dưới đây cho thấy quá trình cài đặt MomentJS bằng Bower -
Đây là các tệp được tải từ Bower để MomentJS cài đặt. Các tệp thời điểm và ngôn ngữ đã cài đặt được hiển thị trong hình ảnh dưới đây -