1678437300
Cách Nhập động các Mô-đun ECMAScript trong Javascript
Trong hướng dẫn Javascript này, chúng ta sẽ tìm hiểu cách nhập động các mô-đun ECMAScript trong Javascript. Các mô-đun ECMAScript (còn được gọi là ES2015 hoặc ES) là một cách để tổ chức các khối mã JavaScript gắn kết.
Hệ thống mô-đun ES có 2 tác nhân:
- Mô -đun nhập — mô-đun sử dụng nhập { func } từ './myModule.js'
- Mô -đun đã nhập — mô-đun xuất export const func = () => {} và đang được nhập.
Mô -đun nhập sử dụng cú pháp nhập để nhập phụ thuộc:
// The importing module
import { concat } from './concatModule.js';
concat('a', 'b'); // => 'ab'Trong khi mô-đun đã nhập xuất các thành phần của nó bằng cú pháp xuất :
// The imported module exports components
export const concat = (paramA, paramB) => paramA + paramB;nhập { concat } từ './concatModule.js' Cách sử dụng các mô-đun ES là tĩnh : có nghĩa là các phụ thuộc giữa các mô-đun được biết tại thời điểm biên dịch. Một phụ thuộc tĩnh luôn được bao gồm trong gói của ứng dụng.
Nhập tĩnh hoạt động trong hầu hết các tình huống. Nhưng đôi khi bạn muốn tiết kiệm một số băng thông máy khách và tải các mô-đun một cách linh hoạt.
Bạn có thể nhập các mô-đun một cách linh hoạt nếu bạn sử dụng tính năng nhập dưới dạng hàm — nhập(pathToModule) — một tính năng khả dụng bắt đầu từ ES2020.
Hãy xem cách nhập động hoạt động và khi nào nó hữu ích.
Trước khi tiếp tục, hãy để tôi giới thiệu một cái gì đó cho bạn.
Nếu bạn muốn cải thiện đáng kể kiến thức JavaScript của mình, hãy tham gia khóa học vô cùng hữu ích "Modern JavaScript From The Beginning 2.0" của Brad Traversy. Sử dụng mã phiếu giảm giá "DMITRI" và được giảm giá tới 20%!
1. Nhập động các mô-đun
Khi từ khóa nhập khẩu được sử dụng như một chức năng:
const module = await import(path);Nó trả về một lời hứa và bắt đầu một tác vụ không đồng bộ để tải mô-đun. Nếu mô-đun được tải thành công, lời hứa sẽ giải quyết nội dung của mô-đun, nếu không, lời hứa sẽ bị từ chối.
đường dẫn có thể là bất kỳ biểu thức nào đánh giá thành một chuỗi biểu thị đường dẫn. Biểu thức đường dẫn hợp lệ là:
// Classic string literals
const module1 = await import('./myModule.js');
// A variable
const path = './myOtherModule.js';
const module2 = await import(path);
// Function call
const getPath = (version) => `./myModule/versions/${version}.js`;
const moduleVersion1 = await import(getPath('v1.0'));
const moduleVersion2 = await import(getPath('v2.0'));Vì nhập(đường dẫn) trả về một lời hứa, nên nó phù hợp gọn gàng với cú pháp async/await . Ví dụ: hãy tải một mô-đun bên trong hàm async:
async function loadMyModule() {
const myModule = await import('./myModule.js');
// ... use myModule
}
loadMyModule();Bây giờ, khi đã biết cách tải mô-đun, hãy trích xuất các thành phần (mặc định hoặc được đặt tên) từ mô-đun đã nhập.
2. Nhập khẩu linh kiện
2.1 Nhập Named Exports
Hãy xem xét mô-đun sau, có tên lànameConcat.js :
// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;tênConcat thực hiện xuất có tên của hàm concat .
Nếu bạn muốn nhập động tênConcat.js và truy cập xuất concat có tên , chỉ cần hủy cấu trúc đối tượng mô-đun được giải quyết bằng xuất có tên:
async function loadMyModule() {
const { concat } = await import('./namedConcat.js');
concat('b', 'c'); // => 'bc'
}
loadMyModule();2.2 Tiêu chuẩn xuất nhập khẩu
Để nhập động một giá trị mặc định , chỉ cần đọc thuộc tính mặc định của đối tượng mô-đun.
Giả sử defaultConcat.js xuất hàm dưới dạng xuất mặc định :
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;Khi nhập động defaultConcat.js và cụ thể là truy cập xuất mặc định , điều bạn cần chỉ đơn giản là đọc thuộc tính mặc định .
Nhưng có một sắc thái. mặc định là một từ khóa trong JavaScript, vì vậy nó không thể được sử dụng làm tên biến. Những gì bạn làm là sử dụng phá hủy với răng cưa :
async function loadMyModule() {
const { default: defaultFunc } = await import('./defaultConcat.js');
defaultFunc('b', 'c'); // => 'bc'
}
loadMyModule();2.3 Nhập nội dung hỗn hợp
Nếu mô-đun đã nhập xuất mặc định và xuất nhiều tên, bạn có thể truy cập tất cả các thành phần này bằng cách sử dụng một lần hủy:
async function loadMyModule() {
const {
default: defaultImport,
namedExport1,
namedExport2
} = await import('./mixedExportModule.js');
// ...
}
loadMyModule();3. Khi nào sử dụng nhập động
Tôi khuyên bạn nên sử dụng tính năng nhập động khi nhập các mô-đun lớn có điều kiện.
Ví dụ: thỉnh thoảng bạn có thể sử dụng mô-đun, tùy thuộc vào điều kiện thời gian chạy. Hoặc bạn có thể muốn tải các phiên bản khác nhau của một mô-đun lớn, cũng tùy thuộc vào điều kiện thời gian chạy.
async function execBigModule(condition) {
if (condition) {
const { funcA } = await import('./bigModuleA.js');
funcA();
} else {
const { funcB } = await import('./bigModuleB.js');
funcB();
}
}
execBigModule(true);Đối với các mô-đun nhỏ (như tênConcat.js hoặc defaultConcat.js từ ví dụ trước), có vài chục dòng mã, nhập động không đáng.
4. Kết luận
Để tải động một mô-đun, lệnh gọi nhập (đường dẫn) dưới dạng một hàm có đối số cho biết trình xác định (còn được gọi là đường dẫn) đến một mô-đun.
const module = await import(path) trả về một lời hứa phân giải thành một đối tượng chứa các thành phần của mô-đun đã nhập.
Trong đối tượng này, thuộc tính mặc định chứa xuất khẩu mặc định và xuất khẩu được đặt tên được chứa trong các thuộc tính tương ứng:
const {
default: defaultComponent,
namedExport1,
namedExport2
} = await import(path);Nhập động được hỗ trợ bởi Node.js (phiên bản 13.2 trở lên) và hầu hết các trình duyệt hiện đại .
Bạn biết những trường hợp sử dụng nhập động thú vị nào khác? Chia sẻ ý tưởng của bạn trong một bình luận dưới đây!
Nguồn bài viết gốc tại: https://dmitripavlutin.com
What is GEEK
Buddha Community
1678437300
Cách Nhập động các Mô-đun ECMAScript trong Javascript
Trong hướng dẫn Javascript này, chúng ta sẽ tìm hiểu cách nhập động các mô-đun ECMAScript trong Javascript. Các mô-đun ECMAScript (còn được gọi là ES2015 hoặc ES) là một cách để tổ chức các khối mã JavaScript gắn kết.
Hệ thống mô-đun ES có 2 tác nhân:
- Mô -đun nhập — mô-đun sử dụng nhập { func } từ './myModule.js'
- Mô -đun đã nhập — mô-đun xuất export const func = () => {} và đang được nhập.
Mô -đun nhập sử dụng cú pháp nhập để nhập phụ thuộc:
// The importing module
import { concat } from './concatModule.js';
concat('a', 'b'); // => 'ab'Trong khi mô-đun đã nhập xuất các thành phần của nó bằng cú pháp xuất :
// The imported module exports components
export const concat = (paramA, paramB) => paramA + paramB;nhập { concat } từ './concatModule.js' Cách sử dụng các mô-đun ES là tĩnh : có nghĩa là các phụ thuộc giữa các mô-đun được biết tại thời điểm biên dịch. Một phụ thuộc tĩnh luôn được bao gồm trong gói của ứng dụng.
Nhập tĩnh hoạt động trong hầu hết các tình huống. Nhưng đôi khi bạn muốn tiết kiệm một số băng thông máy khách và tải các mô-đun một cách linh hoạt.
Bạn có thể nhập các mô-đun một cách linh hoạt nếu bạn sử dụng tính năng nhập dưới dạng hàm — nhập(pathToModule) — một tính năng khả dụng bắt đầu từ ES2020.
Hãy xem cách nhập động hoạt động và khi nào nó hữu ích.
Trước khi tiếp tục, hãy để tôi giới thiệu một cái gì đó cho bạn.
Nếu bạn muốn cải thiện đáng kể kiến thức JavaScript của mình, hãy tham gia khóa học vô cùng hữu ích "Modern JavaScript From The Beginning 2.0" của Brad Traversy. Sử dụng mã phiếu giảm giá "DMITRI" và được giảm giá tới 20%!
1. Nhập động các mô-đun
Khi từ khóa nhập khẩu được sử dụng như một chức năng:
const module = await import(path);Nó trả về một lời hứa và bắt đầu một tác vụ không đồng bộ để tải mô-đun. Nếu mô-đun được tải thành công, lời hứa sẽ giải quyết nội dung của mô-đun, nếu không, lời hứa sẽ bị từ chối.
đường dẫn có thể là bất kỳ biểu thức nào đánh giá thành một chuỗi biểu thị đường dẫn. Biểu thức đường dẫn hợp lệ là:
// Classic string literals
const module1 = await import('./myModule.js');
// A variable
const path = './myOtherModule.js';
const module2 = await import(path);
// Function call
const getPath = (version) => `./myModule/versions/${version}.js`;
const moduleVersion1 = await import(getPath('v1.0'));
const moduleVersion2 = await import(getPath('v2.0'));Vì nhập(đường dẫn) trả về một lời hứa, nên nó phù hợp gọn gàng với cú pháp async/await . Ví dụ: hãy tải một mô-đun bên trong hàm async:
async function loadMyModule() {
const myModule = await import('./myModule.js');
// ... use myModule
}
loadMyModule();Bây giờ, khi đã biết cách tải mô-đun, hãy trích xuất các thành phần (mặc định hoặc được đặt tên) từ mô-đun đã nhập.
2. Nhập khẩu linh kiện
2.1 Nhập Named Exports
Hãy xem xét mô-đun sau, có tên lànameConcat.js :
// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;tênConcat thực hiện xuất có tên của hàm concat .
Nếu bạn muốn nhập động tênConcat.js và truy cập xuất concat có tên , chỉ cần hủy cấu trúc đối tượng mô-đun được giải quyết bằng xuất có tên:
async function loadMyModule() {
const { concat } = await import('./namedConcat.js');
concat('b', 'c'); // => 'bc'
}
loadMyModule();2.2 Tiêu chuẩn xuất nhập khẩu
Để nhập động một giá trị mặc định , chỉ cần đọc thuộc tính mặc định của đối tượng mô-đun.
Giả sử defaultConcat.js xuất hàm dưới dạng xuất mặc định :
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;Khi nhập động defaultConcat.js và cụ thể là truy cập xuất mặc định , điều bạn cần chỉ đơn giản là đọc thuộc tính mặc định .
Nhưng có một sắc thái. mặc định là một từ khóa trong JavaScript, vì vậy nó không thể được sử dụng làm tên biến. Những gì bạn làm là sử dụng phá hủy với răng cưa :
async function loadMyModule() {
const { default: defaultFunc } = await import('./defaultConcat.js');
defaultFunc('b', 'c'); // => 'bc'
}
loadMyModule();2.3 Nhập nội dung hỗn hợp
Nếu mô-đun đã nhập xuất mặc định và xuất nhiều tên, bạn có thể truy cập tất cả các thành phần này bằng cách sử dụng một lần hủy:
async function loadMyModule() {
const {
default: defaultImport,
namedExport1,
namedExport2
} = await import('./mixedExportModule.js');
// ...
}
loadMyModule();3. Khi nào sử dụng nhập động
Tôi khuyên bạn nên sử dụng tính năng nhập động khi nhập các mô-đun lớn có điều kiện.
Ví dụ: thỉnh thoảng bạn có thể sử dụng mô-đun, tùy thuộc vào điều kiện thời gian chạy. Hoặc bạn có thể muốn tải các phiên bản khác nhau của một mô-đun lớn, cũng tùy thuộc vào điều kiện thời gian chạy.
async function execBigModule(condition) {
if (condition) {
const { funcA } = await import('./bigModuleA.js');
funcA();
} else {
const { funcB } = await import('./bigModuleB.js');
funcB();
}
}
execBigModule(true);Đối với các mô-đun nhỏ (như tênConcat.js hoặc defaultConcat.js từ ví dụ trước), có vài chục dòng mã, nhập động không đáng.
4. Kết luận
Để tải động một mô-đun, lệnh gọi nhập (đường dẫn) dưới dạng một hàm có đối số cho biết trình xác định (còn được gọi là đường dẫn) đến một mô-đun.
const module = await import(path) trả về một lời hứa phân giải thành một đối tượng chứa các thành phần của mô-đun đã nhập.
Trong đối tượng này, thuộc tính mặc định chứa xuất khẩu mặc định và xuất khẩu được đặt tên được chứa trong các thuộc tính tương ứng:
const {
default: defaultComponent,
namedExport1,
namedExport2
} = await import(path);Nhập động được hỗ trợ bởi Node.js (phiên bản 13.2 trở lên) và hầu hết các trình duyệt hiện đại .
Bạn biết những trường hợp sử dụng nhập động thú vị nào khác? Chia sẻ ý tưởng của bạn trong một bình luận dưới đây!
Nguồn bài viết gốc tại: https://dmitripavlutin.com
1622207074
What is JavaScript - Stackfindover - Blog
Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.
Who invented JavaScript?
JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.
What is JavaScript?
JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.
Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.
JavaScript Hello World Program
In JavaScript, ‘document.write‘ is used to represent a string on a browser.
<script type="text/javascript">
document.write("Hello World!");
</script>
How to comment JavaScript code?
- For single line comment in JavaScript we have to use // (double slashes)
- For multiple line comments we have to use / * – – * /
<script type="text/javascript">
//single line comment
/* document.write("Hello"); */
</script>
Advantages and Disadvantages of JavaScript
#javascript #javascript code #javascript hello world #what is javascript #who invented javascript
1616670795
Hire Dedicated JavaScript Developers -Hire JavaScript Developers
It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.
Does your business need an interactive website or app?
Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.
The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.
Get your business app with JavaScript
For more inquiry click here https://bit.ly/31eZyDZ
Book Free Interview: https://bit.ly/3dDShFg
#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers
1589255577
The essential JavaScript concepts that you should understand
As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.
#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips
1659569400
Cách Nhập Động Mô-đun ECMAScript
Các mô-đun ECMAScript (hay còn gọi là ES2015, hoặc ES) là một cách để tổ chức các đoạn mã gắn kết trong JavaScript.
Hệ thống mô-đun ES có 2 tác nhân:
- Mô -đun nhập - mô-đun sử dụng
import { func } from './myModule.js' - Mô -đun đã nhập - mô-đun xuất
export const func = () => {}và đang được nhập.
Mô -đun nhập sử dụng importcú pháp để nhập một phần phụ thuộc:
// The importing module
import { concat } from './concatModule.js';
concat('a', 'b'); // => 'ab'Trong khi mô-đun đã nhập xuất các thành phần của nó bằng exportcú pháp:
// The imported module exports components
export const concat = (paramA, paramB) => paramA + paramB;import { concat } from './concatModule.js'cách sử dụng mô-đun ES là tĩnh : có nghĩa là sự phụ thuộc giữa các mô-đun đã được biết trước tại thời điểm biên dịch. Một phần phụ thuộc tĩnh luôn được bao gồm trong gói của ứng dụng.
Tính năng nhập tĩnh hoạt động trong hầu hết các tình huống. Nhưng đôi khi bạn muốn tiết kiệm một chút băng thông của khách hàng và tải động các mô-đun.
Bạn có thể nhập động các mô-đun nếu bạn sử dụng importnhư một chức năng - import(pathToModule)- một tính năng có sẵn bắt đầu từ ES2020.
Hãy xem cách nhập động hoạt động và khi nào nó hữu ích.
1. Nhập động các mô-đun
Khi importtừ khóa được sử dụng như một hàm:
const module = await import(path);Nó trả về một lời hứa và bắt đầu một tác vụ không đồng bộ để tải mô-đun. Nếu mô-đun được tải thành công, thì lời hứa sẽ chuyển thành nội dung mô-đun, ngược lại, lời hứa sẽ từ chối.
pathcó thể là bất kỳ biểu thức nào đánh giá thành một chuỗi biểu thị một đường dẫn. Biểu thức đường dẫn hợp lệ là:
// Classic string literals
const module1 = await import('./myModule.js');
// A variable
const path = './myOtherModule.js';
const module2 = await import(path);
// Function call
const getPath = (version) => `./myModule/versions/${version}.js`;
const moduleVersion1 = await import(getPath('v1.0'));
const moduleVersion2 = await import(getPath('v2.0'));Bởi vì import(path)trả về một lời hứa, nó rất phù hợp với async/awaitcú pháp. Ví dụ: hãy tải một mô-đun bên trong một hàm không đồng bộ:
async function loadMyModule() {
const myModule = await import('./myModule.js');
// ... use myModule
}
loadMyModule();Bây giờ, biết cách tải mô-đun, chúng ta hãy trích xuất các thành phần (mặc định hoặc được đặt tên) từ mô-đun đã nhập.
2. Nhập linh kiện
2.1 Nhập khẩu các mặt hàng xuất khẩu đã nêu tên
Hãy xem xét mô-đun sau, có tên namedConcat.js:
// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;namedConcatthực hiện xuất concathàm đã đặt tên.
Nếu bạn muốn nhập động namedConcat.jsvà truy cập vào phần xuất được đặt tên concat, thì bạn chỉ cần hủy cấu trúc đối tượng mô-đun đã phân giải bằng cách xuất được đặt tên:
async function loadMyModule() {
const { concat } = await import('./namedConcat.js');
concat('b', 'c'); // => 'bc'
}
loadMyModule();2.2 Nhập xuất mặc định
Để nhập động một mặc định , chỉ cần đọc thuộc defaulttính từ đối tượng mô-đun.
Giả sử rằng defaultConcat.jsexport hàm dưới dạng defaultexport:
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;Khi nhập defaultConcat.jsđộng và truy cập cụ thể vào defaultxuất, những gì bạn cần chỉ đơn giản là đọc thuộc defaulttính.
Nhưng có một sắc thái. defaultlà một từ khóa trong JavaScript, vì vậy nó không thể được sử dụng như một tên biến. Những gì bạn làm là sử dụng hủy cấu trúc với răng cưa :
async function loadMyModule() {
const { default: defaultFunc } = await import('./defaultConcat.js');
defaultFunc('b', 'c'); // => 'bc'
}
loadMyModule();2.3 Nhập nội dung hỗn hợp
Nếu mô-đun đã nhập xuất khẩu defaultvà nhiều xuất khẩu được đặt tên, thì bạn có thể truy cập tất cả các thành phần này bằng cách sử dụng một cấu trúc hủy duy nhất:
async function loadMyModule() {
const {
default: defaultImport,
namedExport1,
namedExport2
} = await import('./mixedExportModule.js');
// ...
}
loadMyModule();3. Khi nào sử dụng nhập động
Tôi khuyên bạn nên sử dụng nhập động khi nhập các mô-đun lớn có điều kiện.
Ví dụ: thỉnh thoảng bạn có thể sử dụng mô-đun, tùy thuộc vào điều kiện thời gian chạy. Hoặc bạn có thể muốn tải các phiên bản khác nhau của một mô-đun lớn, cũng tùy thuộc vào điều kiện thời gian chạy.
async function execBigModule(condition) {
if (condition) {
const { funcA } = await import('./bigModuleA.js');
funcA();
} else {
const { funcB } = await import('./bigModuleB.js');
funcB();
}
}
execBigModule(true);Đối với các mô-đun nhỏ (như namedConcat.jshoặc defaultConcat.jstừ ví dụ trước), có vài chục dòng mã, việc nhập động không đáng gặp rắc rối.
4. Kết luận
Để tải động một lệnh gọi mô-đun import(path)dưới dạng một hàm với một đối số chỉ ra mã xác định (hay còn gọi là đường dẫn) đến một mô-đun.
const module = await import(path)trả về một lời hứa phân giải thành một đối tượng có chứa các thành phần của mô-đun đã nhập.
Trong đối tượng đó, thuộc defaulttính chứa xuất mặc định và các xuất được đặt tên được chứa trong các thuộc tính tương ứng:
const {
default: defaultComponent,
namedExport1,
namedExport2
} = await import(path);Nhập động được hỗ trợ bởi cả Node.js (phiên bản 13.2 trở lên) và hầu hết các trình duyệt hiện đại .
Nguồn: https://www.itsolutionstuff.com/post/laravel-9-user-roles-and-permissions-tutorialexample.html