Làm cách nào tôi có thể sử dụng tính năng nhập trong JavaScript?

nhập Javascript

Câu lệnh nhập Javascript được sử dụng để nhập các liên kết được xuất bởi một mô-đun khác. Sử dụng tính năng nhập, mã sẽ dễ quản lý hơn khi mã có kích thước nhỏ và nhỏ

Đây là suy nghĩ đằng sau việc giữ các chức năng chỉ cho một tác vụ hoặc có các tệp chỉ chứa một vài hoặc một thành phần tại một thời điểm

Nếu bạn có một ứng dụng web phức tạp và phải cuộn qua hàng trăm hoặc hàng nghìn dòng mã, thì công việc gỡ lỗi hoặc hiểu một ứng dụng sẽ trở nên khó khăn hơn nhiều.

Đây là cách bạn có thể viết mã trong một tệp và chia sẻ mã đó để một tệp khác

Nếu bạn đang sử dụng cú pháp ES6 trong giao diện người dùng hoặc phụ trợ, thì ý tưởng nhập và xuất giống nhau, nhưng cú pháp hơi khác một chút

Thay vì 'yêu cầu' ở đầu tệp, giờ đây bạn sử dụng câu lệnh 'nhập' và bạn cũng có thể có câu lệnh 'xuất mặc định hoặc xuất' thay vì mô-đun. xuất khẩu. Nếu bạn chỉ có một thứ để xuất ra khỏi tệp hoặc nhiều mô-đun

Không thể sử dụng câu lệnh nhập trong tập lệnh được nhúng trừ khi tập lệnh có mô-đun type='. ’

Ngoài ra còn có chức năng nhập động giống như hàm (), không yêu cầu tập lệnh của mô-đun type=’. ’

Nhập động rất hữu ích trong trường hợp bạn muốn tải mô-đun theo điều kiện hoặc mô-đun theo yêu cầu. Tuy nhiên, dạng tĩnh thích hợp hơn cho phụ thuộc tải ban đầu

Cú pháp của mô-đun nhập như sau. Nó có rất nhiều cú pháp vì nó phụ thuộc vào việc chúng ta nhập một nội dung hay nhiều nội dung từ một tệp

import defaultExport from 'module_name';
import * as name from 'module_name';
import { content } from 'module_name';
import { content as alias } from 'module_name';
import { content , content2 } from 'module_name';
import { content , content2 } from "module-name/path/to/specific/un-exported/file";
import { content , content2 as alias2 , [...] } from 'module_name';
import defaultExport, { content [ , [...] ] } from 'module_name';
import defaultExport, * as name from 'module_name';
import 'module_name';
var content = import('module_name');

Tham số tên là "đối tượng mô-đun", sẽ được sử dụng làm không gian tên để tham chiếu đến quá trình xuất

Các tham số xuất chỉ định các lần xuất được đặt tên riêng lẻ, trong khi cú pháp nhập * dưới dạng tên sẽ nhập tất cả chúng. Dưới đây là các ví dụ để làm rõ cú pháp

Tạo một thư mục dự án và bên trong thư mục dự án, tạo ba tệp

1. ứng dụng. js
2. dữ liệu. js
3. bắt đầu. js

Bây giờ, nút. js không hỗ trợ Chức năng xuất nhập khẩu theo mặc định. Vì vậy, chúng tôi cần một trình biên dịch babel để làm việc.  

Chúng ta cần cài đặt hai gói cho điều đó. Vì vậy, trước tiên hãy chuyển đến thiết bị đầu cuối và nhập lệnh sau để tạo gói. tệp json

npm init -y

Sau đó, chúng ta cần cài đặt hai mô-đun nút. Vì vậy, gõ lệnh sau

npm install babel-register babel-preset-env --save-dev

Nó sẽ cài đặt các mô-đun bên trong thư mục node_modules

Bây giờ, hãy viết đoạn mã sau vào phần bắt đầu. tập tin js

// start.js

require('babel-register')({
    presets: ['env']
});

module.exports = require('./app.js')

Ta sẽ chạy file này để chạy câu lệnh xuất nhập trong app. tệp js

Bước tiếp theo là viết đoạn mã sau bên trong dữ liệu. tệp js

// data.js

export const add = (x, y) => {
    return x + y
}

Hàm add chấp nhận các tham số và thêm chúng và trả về kết quả. Đây là cú pháp là ES6 và chúng tôi đã sử dụng chức năng mũi tên

Cuối cùng, thêm mã sau vào trong ứng dụng. tệp js

// app.js

import { add } from './data';

console.log(add(2, 3));

Tại đây, chúng tôi đã nhập mô-đun dữ liệu và chức năng thêm cụ thể từ mô-đun đó

Bây giờ, hãy bắt đầu. js và xem đầu ra

node start.js

Trong ví dụ trên, chúng tôi đã sử dụng  Nhập một lần xuất từ ​​một mô-đun.

Nếu chúng tôi có nhiều mô-đun xuất, thì chúng tôi có thể nhập các mô-đun khác nhau

Nhập nhiều mô-đun trong Javascript

Bây giờ, chúng ta sẽ tạo một mô-đun khác bên trong dữ liệu. tệp js

// data.js

export const add = (x, y) => {
    return x + y
}

export const subtract = (x, y) => {
    return x - y;
}

Bây giờ, hãy nhập cả hai mô-đun bên trong ứng dụng. tệp js

Cuối cùng, chạy bắt đầu. js và xem đầu ra

Nhập Javascript với bí danh thuận tiện hơn

Bạn có thể đổi tên một bản xuất khi nhập nó. Ví dụ: điều này sẽ chèn phụ vào phạm vi hiện tại

Xem ứng dụng. tệp js. Chúng tôi đã đổi tên mô-đun trừ thành phụ

import { add, subtract as sub } from './data';

console.log(`The addition is: ${add(2, 3)}`);
console.log(`The suntraction is: ${sub(21, 19)}`);

Nhập giá trị mặc định trong Javascript

Hãy nói; . tệp js

npm init -y

Trong đoạn mã trên, chúng tôi đã sử dụng từ khóa xuất mặc định, có nghĩa là chúng tôi chỉ xuất mô-đun thêm từ tệp này

Bây giờ, nếu chúng ta có một mô-đun mặc định bên trong dữ liệu. js, chúng ta có thể nhập nó vào bên trong ứng dụng. js như bên dưới

npm init -y

Xem đầu ra bên dưới

Nhập * trong Javascript

Thông thường, chúng tôi đặt danh sách những gì cần nhập trong dấu ngoặc nhọn import {…}

Tạo một tệp có tên khách hàng. js và thêm đoạn mã sau

npm init -y

Khách hàng. tệp js xuất hai chức năng. Vì vậy, chúng tôi có thể nhập cả hai chức năng bên trong ứng dụng. tệp js

Bây giờ, hãy thêm mã sau vào trong ứng dụng. tệp js

npm init -y

Vì vậy, chúng tôi đã nhập tất cả các mô-đun dưới dạng siêu anh hùng

Xem đầu ra

npm init -y

Nhập động trong Javascript

Từ khóa nhập khẩu có thể được gọi là chức năng nhập động mô-đun. Khi được sử dụng theo cách này, nó sẽ trả lại lời hứa. Hãy xem ví dụ

npm init -y

Nó sẽ cho cùng một đầu ra. Trong đoạn mã trên, chúng tôi đã sử dụng tính năng async-await của ES7

Nếu bạn chưa quen với điều đó, thì hãy xem bài viết này

Nhập động rất hữu ích khi bạn muốn tải mô-đun theo điều kiện hoặc theo yêu cầu

Dạng tĩnh thích hợp hơn cho các phụ thuộc tải ban đầu và có thể hưởng lợi dễ dàng hơn từ các công cụ phân tích tĩnh và rung chuyển cây

Sửa chữa. không thể sử dụng câu lệnh nhập bên ngoài mô-đun

Đây là gì? .  use import statement outside a module error and how to fix it.

Đó là một lỗi cú pháp Uncaught. Sự cố xảy ra do câu lệnh nhập là cú pháp ES6 và nút. js hiểu cú pháp mô-đun yêu cầu. Vì vậy, trước tiên, bạn cần biên dịch mã của mình thành es5 và sau đó chạy tệp máy chủ nút theo cách đó và nó sẽ hoạt động tốt

Tất cả các trình duyệt chính hiện hỗ trợ Mô-đun ES6 nguyên bản. Tôi đã bắt đầu một số thử nghiệm đơn giản để bắt đầu và đoán xem, ngay lập tức gặp sự cố

Có vẻ như nhiều cuộc nói chuyện ngẫu nhiên xung quanh Mô-đun Javascript thực ra là về cách các sản phẩm như Webpack hoặc Babel sử dụng kiến ​​trúc Mô-đun và có những khác biệt tinh tế và quan trọng so với cách nó được triển khai trong JavaScript gốc

Câu lệnh nhập tĩnh được sử dụng để nhập các liên kết được xuất bởi một mô-đun khác.  

Các mô-đun đã nhập ở chế độ nghiêm ngặt cho dù bạn có khai báo chúng như vậy hay không

Không thể sử dụng câu lệnh nhập trong tập lệnh nhúng trừ khi tập lệnh có type=”mô-đun”

Dưới đây là một ví dụ về câu lệnh nhập với mô-đun loại

loại = "mô-đun"

Điều tuyệt vời về Mô-đun Javascript là bạn có thể nhập và xuất Chức năng giữa các tệp

Tại bất kỳ thời điểm nào, tệp HTML chính của bạn sẽ phải có ít nhất một thẻ script tải tệp javascript chính của bạn. Trong trường hợp này, thẻ tập lệnh của bạn phải có thuộc tính loại mới bằng với mô-đun, như thế này

npm init -y

Nếu bạn không bao gồm 

npm init -y

firefox

Lỗi cú pháp. khai báo nhập chỉ có thể xuất hiện ở cấp cao nhất của mô-đun

Trình duyệt Chrome

Lỗi cú pháp chưa bắt được. số nhận dạng không mong đợi

Bờ rìa

SCRIPT1086. SCRIPT1086. Câu lệnh nhập hoặc xuất mô-đun không mong muốn ở đây

Vì vậy, hãy thêm type= “module” vào thẻ tập lệnh của bạn

Có rất nhiều nguyên nhân dẫn đến sự cố nêu trên xảy ra

Ví dụ: bạn có thể có tệp nguồn trong thư mục src thay vì tệp được tạo trong thư mục dist

Điều này có nghĩa là bạn đang sử dụng mã nguồn gốc ở trạng thái chưa thay đổi/không phân nhóm, dẫn đến lỗi sau. Lỗi cú pháp chưa bắt được. Không thể sử dụng câu lệnh nhập bên ngoài mô-đun

Bạn có thể khắc phục sự cố bằng cách xây dựng tệp tập lệnh và nhập chúng

Một vấn đề khác có thể là bạn đang tải tệp sử dụng es6 với các tệp js bình thường;

Bạn có thể thêm type=”module” với thẻ script và sự cố đã được giải quyết

Nút. js phiên bản mới nhất giải pháp

Xác minh rằng bạn đã cài đặt phiên bản Node mới nhất. Nếu gần đây bạn đã cập nhật phiên bản Node, thì cờ –experimental-modules không còn cần thiết nữa.

Thực hiện theo bất kỳ tùy chọn nào sau đây để khắc phục sự cố

Thêm “loại”. “mô-đun” đến gói cha gần nhất. json

Với điều này, tất cả . js và . Các tệp mjs được hiểu là các mô-đun ES. Bạn có thể hiểu các tệp riêng lẻ là CommonJS bằng cách sử dụng . tiện ích mở rộng cjs .

HOẶC LÀ

Đặt tên rõ ràng cho các tập tin với. phần mở rộng mjs

Tất cả các tệp khác, chẳng hạn như. js, sẽ được hiểu là CommonJS, mặc định nếu loại không được xác định trong gói. json

Phần kết luận

Dưới đây là tất cả các loại nhập xuất trong Javascript

Xuất khẩu

Trước khi khai báo một lớp/hàm/…

xuất [mặc định] lớp/hàm/biến…

Xuất khẩu độc lập

xuất {x [như y], …}

tái xuất

xuất {x [như y], …} từ “mô-đun”
xuất * từ “mô-đun” (mặc định không xuất lại)
xuất {mặc định [như y]} từ “mô-đun” (xuất lại mặc định)

Nhập khẩu

Xuất khẩu được đặt tên từ mô-đun

nhập {x [như y], …} từ “mô-đun”

xuất mặc định

nhập x từ “mô-đun”nhập {mặc định là x} từ “mô-đun”

Mọi điều

nhập * dưới dạng obj từ “mô-đun”

Nhập mô-đun (mã của nó chạy), nhưng không gán nó cho một biến

nhập khẩu mô-đun. ”

Bạn có thể tham khảo thêm cách nhập Javascript trên MDN

Vì vậy, trong ví dụ này, chúng ta đã thấy cách sử dụng câu lệnh nhập javascript, câu lệnh xuất, nhập động

Làm cách nào để nhập thư viện trong JavaScript?

Locate the correct Javascript download of the library you want to install. Download the library and make a copy in your sketch folder. (If you're using the web editor, you can upload the relevant files using Upload file in the dropdown in the “Sketch Files” sidebar.) Add a

programming javascript

Reply 1 0 Chia sẻ