Xuất khẩu và nhập khẩu – cách nhập html trong javascript

Bạn đang xem : cách nhập html trong javascript

Lệnh xuất và nhập có một số biến thể cú pháp.

Trong bài viết trước, chúng ta đã thấy một cách sử dụng đơn giản, bây giờ chúng ta hãy khám phá thêm các ví dụ khác.

Chúng tôi có thể gắn nhãn bất kỳ khai báo nào là đã xuất bằng cách đặt export trước nó, có thể là một biến, hàm hoặc một lớp.

Ví dụ: ở đây tất cả các lần xuất đều hợp lệ:

  // xuất một mảng
export let months = ['Jan', 'Feb', 'Mar', 'April', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// xuất một hằng số
xuất const MODULES_BECAME_STANDARD_YEAR = 2015;

// xuất một lớp
xuất lớp Người dùng {
  hàm tạo (tên) {
    this.name = tên;
  }
}  

Không có dấu chấm phẩy sau khi xuất lớp / hàm

Xin lưu ý rằng export trước một lớp hoặc một hàm không làm cho nó trở thành biểu thức hàm . Nó vẫn là một khai báo chức năng, mặc dù đã được xuất.

Hầu hết các hướng dẫn kiểu JavaScript không đề xuất dấu chấm phẩy sau khai báo hàm và lớp.

Đó là lý do tại sao không cần dấu chấm phẩy ở cuối export class export function :

  hàm xuất sayHi (người dùng) {
  alert (`Xin chào, $ {user}!`);
}  // không ; ở cuối  

Ngoài ra, chúng tôi có thể đặt export một cách riêng biệt.

Ở đây, trước tiên chúng tôi khai báo, sau đó xuất:

  // 📁 say.js
function sayHi (user) {
  alert (`Xin chào, $ {user}!`);
}

hàm sayBye (người dùng) {
  alert (`Tạm biệt, $ {user}!`);
}

xuất {sayHi, sayBye}; // danh sách các biến đã xuất  

… Hoặc, về mặt kỹ thuật, chúng ta cũng có thể đặt các hàm export ở trên.

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

  // 📁 main.js
nhập {sayHi, sayBye} từ './say.js';

sayHi ('John'); // Chào John!
sayBye ('John'); // Tạm biệt, John!  

Nhưng nếu có nhiều thứ cần nhập, chúng tôi có thể nhập mọi thứ dưới dạng đối tượng bằng cách sử dụng import * as & lt; obj & gt; , chẳng hạn:

  // 📁 main.js
nhập * như nói từ './say.js';

say.sayHi ('John');
say.sayBye ('John');  

Ngay từ cái nhìn đầu tiên, “nhập mọi thứ” có vẻ rất thú vị, viết ngắn gọn, tại sao chúng ta phải liệt kê rõ ràng những gì chúng ta cần nhập?

Chà, có một vài lý do.

  1. Các công cụ xây dựng hiện đại ( webpack và các công cụ khác) gói các mô-đun lại với nhau và tối ưu hóa chúng để tăng tốc độ tải và xóa nội dung không sử dụng.

    Giả sử, chúng tôi đã thêm thư viện bên thứ 3 say.js vào dự án của mình với nhiều chức năng:

      // 📁 say.js
    xuất hàm sayHi () {...}
    xuất hàm sayBye () {...}
    xuất hàm trở thànhSilent () {...}  

    Bây giờ nếu chúng ta chỉ sử dụng một trong các hàm say.js trong dự án của mình:

      // 📁 main.js
    nhập {sayHi} từ './say.js';  

    … Sau đó, trình tối ưu hóa sẽ thấy điều đó và loại bỏ các chức năng khác khỏi mã gói, do đó làm cho bản dựng nhỏ hơn. Đó được gọi là “rung cây”.

  2. Liệt kê rõ ràng những gì cần nhập sẽ đặt tên ngắn hơn: sayHi () thay vì say.sayHi () .

  3. Danh sách nhập rõ ràng cung cấp tổng quan tốt hơn về cấu trúc mã: cái gì được sử dụng và ở đâu. Nó giúp hỗ trợ mã và cấu trúc lại dễ dàng hơn.

Chúng tôi cũng có thể sử dụng as để nhập dưới các tên khác nhau.

Ví dụ: hãy nhập sayHi vào biến cục bộ hi cho ngắn gọn và nhập sayBye dưới dạng bye :

  // 📁 main.js
nhập {sayHi as hi, sayBye as bye} từ './say.js';

chào John'); // Chào John!
tạm biệt ('John'); // Tạm biệt, John!  

Cú pháp tương tự tồn tại cho export .

Hãy xuất các hàm dưới dạng hi bye :

  // 📁 say.js
...
xuất {sayHi as hi, sayBye as bye};  

Bây giờ hi bye là tên chính thức của người ngoài, được sử dụng trong nhập khẩu:

  // 📁 main.js
nhập * như nói từ './say.js';

say.hi ('John'); // Chào John!
say.bye ('John'); // Tạm biệt, John!  

Trên thực tế, chủ yếu có hai loại mô-đun.

  1. Mô-đun chứa thư viện, gói chức năng, như say.js ở trên.
  2. Các mô-đun khai báo một thực thể, ví dụ: mô-đun user.js chỉ xuất class User .

Hầu hết, cách tiếp cận thứ hai được ưu tiên hơn để mọi “thứ” đều nằm trong mô-đun riêng của nó.

Đương nhiên, điều đó đòi hỏi rất nhiều tệp, vì mọi thứ đều muốn có mô-đun riêng, nhưng đó hoàn toàn không phải là vấn đề. Trên thực tế, việc điều hướng mã trở nên dễ dàng hơn nếu các tệp được đặt tên hợp lý và có cấu trúc thành các thư mục.

Xem Thêm  Cách ghi vào tệp bằng Python - ghi dữ liệu vào một tệp python

Mô-đun cung cấp cú pháp export default (“xuất mặc định”) đặc biệt để làm cho giao diện “một thứ cho mỗi mô-đun” trông đẹp hơn.

Đặt xuất mặc định trước đối tượng cần xuất:

  // 📁 user.js
xuất lớp mặc định Người dùng {// chỉ cần thêm "mặc định"
  hàm tạo (tên) {
    this.name = tên;
  }
}  

Có thể chỉ có một xuất mặc định cho mỗi tệp.

… Và sau đó nhập nó mà không có dấu ngoặc nhọn:

  // 📁 main.js
nhập Người dùng từ './user.js'; // không phải {Người dùng}, chỉ là Người dùng

Người dùng mới ('John');  

Hàng nhập khẩu không có dấu ngoặc nhọn trông đẹp hơn. Một sai lầm phổ biến khi bắt đầu sử dụng mô-đun là quên dấu ngoặc nhọn. Vì vậy, hãy nhớ rằng import cần dấu ngoặc nhọn cho các lần xuất đã đặt tên và không cần dấu ngoặc nhọn cho các lần xuất mặc định.

Xuất khẩu được đặt tên
Xuất mặc định

export class Người dùng {...}
xuất người dùng lớp mặc định {...}
nhập {Người dùng} từ ...
nhập Người dùng từ ...

Về mặt kỹ thuật, chúng tôi có thể có cả bản xuất mặc định và được đặt tên trong một mô-đun duy nhất, nhưng trên thực tế, mọi người thường không kết hợp chúng. Một mô-đun có các mục xuất khẩu được đặt tên hoặc mô-đun mặc định.

Vì có thể có nhiều nhất một lần xuất mặc định cho mỗi tệp, thực thể được xuất có thể không có tên.

Ví dụ: đây là tất cả các bản xuất mặc định hoàn toàn hợp lệ:

  xuất lớp mặc định {// không có tên lớp
  người xây dựng() { ... }
}  
  hàm mặc định xuất (người dùng) {// không có tên hàm
  alert (`Xin chào, $ {user}!`);
}  
  // xuất một giá trị duy nhất mà không tạo biến
xuất mặc định ['Jan', 'Feb', 'Mar', 'April', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];  

Không đặt tên cũng không sao, vì chỉ có một xuất mặc định cho mỗi tệp, vì vậy import không có dấu ngoặc nhọn sẽ biết cần nhập gì.

Nếu không có default , việc xuất như vậy sẽ gây ra lỗi:

  xuất lớp {// Error! (xuất không mặc định cần có tên)
  người xây dựng() {}
}  

Trong một số trường hợp, từ khóa default được sử dụng để tham chiếu đến việc xuất mặc định.

Ví dụ: để xuất một hàm riêng biệt với định nghĩa của nó:

  function sayHi (user) {
  alert (`Xin chào, $ {user}!`);
}

// giống như khi chúng ta thêm "xuất mặc định" trước hàm
xuất {sayHi làm mặc định};  

Hoặc, một tình huống khác, giả sử một mô-đun user.js xuất một thứ “mặc định” chính và một vài thứ được đặt tên (hiếm khi xảy ra trường hợp này, nhưng nó vẫn xảy ra):

  // 📁 user.js
xuất người dùng lớp mặc định {
  hàm tạo (tên) {
    this.name = tên;
  }
}

hàm xuất sayHi (người dùng) {
  alert (`Xin chào, $ {user}!`);
}  

Dưới đây là cách nhập tệp xuất mặc định cùng với tệp đã đặt tên:

  // 📁 main.js
import {default as User, sayHi} từ './user.js';

Người dùng mới ('John');  

Và cuối cùng, nếu nhập mọi thứ * dưới dạng một đối tượng, thì thuộc tính default chính xác là xuất mặc định:

  // 📁 main.js
nhập * với tư cách người dùng từ './user.js';

let User = user.default; // xuất mặc định
Người dùng mới ('John');  

Xuất khẩu được đặt tên là rõ ràng. Họ đặt tên chính xác cho những gì họ nhập khẩu, vì vậy chúng tôi có thông tin đó từ họ; đó là một điều tốt.

Các mặt hàng xuất khẩu được đặt tên buộc chúng tôi phải sử dụng chính xác tên phù hợp để nhập khẩu:

  nhập {Người dùng} từ './user.js';
// import {MyUser} sẽ không hoạt động, tên phải là {User}  

… Trong khi đối với xuất mặc định, chúng tôi luôn chọn tên khi nhập:

  nhập Người dùng từ './user.js'; // làm
nhập MyUser từ './user.js'; // cũng hoạt động
// có thể nhập Mọi thứ ... và nó sẽ vẫn hoạt động  

Vì vậy, các thành viên trong nhóm có thể sử dụng các tên khác nhau để nhập cùng một thứ và điều đó không tốt.

Thông thường, để tránh điều đó và giữ cho mã nhất quán, có một quy tắc rằng các biến được nhập phải tương ứng với tên tệp, ví dụ:

 nhập Người dùng từ './user.js';
nhập LoginForm từ './loginForm.js';
nhập func từ '/path/to/func.js';
...  

Tuy nhiên, một số nhóm vẫn coi đó là một nhược điểm nghiêm trọng của xuất mặc định. Vì vậy, họ thích luôn sử dụng hàng xuất khẩu có tên. Ngay cả khi chỉ xuất một thứ duy nhất, nó vẫn được xuất dưới một tên, không có mặc định .

Điều đó cũng giúp việc tái xuất (xem bên dưới) dễ dàng hơn một chút.

Xem Thêm  Thuộc tính màu nền CSS - màu nền đầu vào css

Cú pháp “tái xuất” export ... from ... cho phép nhập mọi thứ và xuất chúng ngay lập tức (có thể dưới tên khác), như sau:

  export {sayHi} from './say.js'; // xuất lại sayHi

xuất {mặc định dưới dạng Người dùng} từ './user.js'; // xuất lại mặc định  

Tại sao điều đó lại cần thiết? Hãy xem một trường hợp sử dụng thực tế.

Hãy tưởng tượng, chúng tôi đang viết một “gói”: một thư mục có nhiều mô-đun, với một số chức năng được xuất ra bên ngoài (các công cụ như NPM cho phép chúng tôi xuất bản và phân phối các gói như vậy, nhưng chúng tôi không phải sử dụng chúng) và nhiều mô-đun chỉ là “người trợ giúp”, để sử dụng nội bộ trong các mô-đun gói khác.

Cấu trúc tệp có thể như sau:

  auth /
    index.js
    user.js
    helpers.js
    kiểm tra /
        login.js
    nhà cung cấp /
        github.js
        facebook.js
        ...  

Chúng tôi muốn giới thiệu chức năng của gói thông qua một điểm nhập duy nhất.

Nói cách khác, một người muốn sử dụng gói của chúng tôi, chỉ nên nhập từ “tệp chính” auth / index.js .

Như thế này:

  import {login, logout} từ 'auth / index.js'  

“Tệp chính”, auth / index.js xuất tất cả chức năng mà chúng tôi muốn cung cấp trong gói của mình.

Ý tưởng là những người bên ngoài, những lập trình viên khác sử dụng gói của chúng tôi, không nên can thiệp vào cấu trúc bên trong của nó, hãy tìm kiếm các tệp bên trong thư mục gói của chúng tôi. Chúng tôi chỉ xuất những gì cần thiết trong auth / index.js và giấu phần còn lại khỏi những con mắt tò mò.

Vì chức năng được xuất thực tế nằm rải rác trong gói, chúng tôi có thể nhập nó vào auth / index.js và xuất từ ​​đó:

  // 📁 auth / index.js

// nhập đăng nhập / đăng xuất và xuất chúng ngay lập tức
nhập {đăng nhập, đăng xuất} từ './helpers.js';
xuất {đăng nhập, đăng xuất};

// nhập mặc định dưới dạng Người dùng và xuất nó
nhập Người dùng từ './user.js';
xuất {Người dùng};
...  

Giờ đây, người dùng gói của chúng tôi có thể nhập {login} từ "auth / index.js" .

Cú pháp export ... from ... chỉ là một ký hiệu ngắn hơn cho việc nhập-xuất như vậy:

  // 📁 auth / index.js
// xuất lại đăng nhập / đăng xuất
xuất {đăng nhập, đăng xuất} từ './helpers.js';

// xuất lại bản xuất mặc định với tư cách Người dùng
xuất {mặc định dưới dạng Người dùng} từ './user.js';
...  

Sự khác biệt đáng chú ý của export ... from so với import / export là các mô-đun được xuất lại không có sẵn trong tệp hiện tại. Vì vậy, bên trong ví dụ ở trên về auth / index.js , chúng tôi không thể sử dụng các hàm login / logout được xuất lại.

Bản xuất mặc định cần được xử lý riêng khi xuất lại.

Giả sử chúng ta có user.js với export lớp mặc định là User và muốn xuất lại nó:

  // 📁 user.js
xuất người dùng lớp mặc định {
  // ...
}  

Chúng ta có thể gặp hai vấn đề với nó:

  1. export Người dùng từ './user.js' sẽ không hoạt động. Điều đó sẽ dẫn đến lỗi cú pháp.

    Để xuất lại tệp xuất mặc định, chúng ta phải viết export {default là Người dùng} , như trong ví dụ trên.

  2. export * from './user.js' chỉ xuất lại các bản xuất đã đặt tên, nhưng bỏ qua phần mặc định.

    Nếu chúng tôi muốn xuất lại cả xuất được đặt tên và xuất mặc định, thì cần có hai câu lệnh:

      export * from './user.js'; // để tái xuất các bản xuất đã đặt tên
    xuất {default} từ './user.js'; // để xuất lại bản xuất mặc định  

Những điều kỳ lạ khi xuất lại một bản xuất mặc định là một trong những lý do tại sao một số nhà phát triển không thích các bản xuất mặc định và thích các bản xuất được đặt tên.

Xem Thêm  Tạo và vẽ trên HTML5 Canvas bằng JavaScript - cách vẽ trên canvas javascript

Dưới đây là tất cả các loại export mà chúng tôi đã đề cập trong bài viết này và các bài viết trước.

Bạn có thể tự kiểm tra bằng cách đọc chúng và nhớ lại ý nghĩa của chúng:

  • Trước khi khai báo một lớp / hàm /…:
    • export [default] class / function / variable ...
  • Xuất độc lập:
    • export {x [as y], ...} .
  • Tái xuất:
    • xuất {x [as y], ...} từ "mô-đun"
    • export * từ "module" (không xuất lại mặc định).
    • export {default [as y]} từ "module" (xuất lại mặc định).

Nhập:

  • Nhập các xuất khẩu có tên:
    • nhập {x [as y], ...} từ "mô-đun"
  • Nhập dữ liệu xuất mặc định:
    • nhập x từ "mô-đun"
    • nhập {default as x} từ "module"
  • Nhập tất cả:
    • import * as obj từ "module"
  • Nhập mô-đun (mã của nó chạy), nhưng không chỉ định bất kỳ xuất nào của nó cho các biến:
    • nhập "mô-đun"

Chúng tôi có thể đặt câu lệnh import / export ở đầu hoặc cuối tập lệnh, điều đó không quan trọng.

Vì vậy, về mặt kỹ thuật, mã này ổn:

  sayHi ();

// ...

nhập {sayHi} từ './say.js'; // nhập vào cuối tệp  

Trên thực tế, quá trình nhập thường ở đầu tệp, nhưng điều đó chỉ để thuận tiện hơn.

Xin lưu ý rằng câu lệnh nhập / xuất không hoạt động nếu bên trong {...} .

Nhập có điều kiện, như thế này, sẽ không hoạt động:

  if (something) {
  nhập {sayHi} từ "./say.js"; // Lỗi: nhập phải ở cấp cao nhất
}  

… Nhưng điều gì sẽ xảy ra nếu chúng ta thực sự cần nhập một thứ gì đó có điều kiện? Hay vào đúng thời điểm? Giống như, tải một mô-đun theo yêu cầu, khi nó thực sự cần thiết?

Chúng ta sẽ thấy các phép nhập động trong bài viết tiếp theo.


Xem thêm những thông tin liên quan đến chủ đề cách nhập html trong javascript

JavaScript user input 💬

  • Tác giả: Bro Code
  • Ngày đăng: 2021-03-04
  • Đánh giá: 4 ⭐ ( 8741 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: javascript user input tutorial example explained

    javascript user input

    // ********* index.js *********
    //EASY WAY
    //var myName = window.prompt(“What’s your name?”);
    //console.log(“Hello”,myName);

    //HARD WAY
    document.getElementById(“myButton”).onclick = function(){

    var myName = document.getElementById(“myText”).value;
    console.log(“Hello”,myName);
    }

Sử dụng thẻ input, button và textarea

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 3991 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ input được sử dụng để tạo các trường giúp người dùng nhập thông tin vào. Có nhiều loại input khác nhau, trong đó phổ biến là:

Sử dụng Javascript trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 6672 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng Javascript trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Javascript trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 4 ⭐ ( 8981 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng javascript trong HTML.

Cách thêm thẻ HTML bằng Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 9502 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này ta sẽ làm bài tập thêm thẻ HTML bằng Javascript, qua bài này sẽ giúp bạn hiểu được cách sử dụng một số hàm và đối tượng thao tác với HTML DOM.

Làm thế nào để thêm JavaScript trong HTML

  • Tác giả: www.hostinger.vn
  • Đánh giá: 3 ⭐ ( 5458 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các trang tĩnh như chỉ chứa toàn HTML file thường chậm do phải xác thực tại server. JavaScript tăng trải nghiệm cho người dùng và tăng tính linh hoạt của website nhờ xác thực dữ liệu từ phía người dùng thay vì phía server. Bài hướng dẫn này sẽ chỉ bạn cách chèn JavaScript trong HTML.

Tạo popup đăng nhập, đăng ký với HTML, CSS, và JS

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 3 ⭐ ( 2752 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc tạo popup đăng nhập & đăng ký giúp website của bạn trở lên đẹp và hoàn hảo hơn trong mắt người sử dụng. Hơn hết, việc tạo form đăng nhập popup lên sẽ

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình