Nội dung
- Sử dụng nhà điều hành đường ống ngay hôm nay - Kết luận

Thứ năm, 16/04/2020 | 00:00 GMT+7

Xem xét Đề xuất Nhà điều hành Đường ống JavaScript

Đề xuất toán tử đường ống JavaScript, hiện là đề xuất Giai đoạn 1 , sẽ thêm toán tử mới vào JavaScript. Toán tử mới này sẽ hoạt động như một đường cú pháp để mở rộng và làm cho hàm chuỗi dễ đọc hơn.

Để chứng minh, hãy bắt đầu với một ví dụ đơn giản mà không cần sử dụng toán tử đường ống:

// assume that `withHello`, `withWave` and `capitalize` are available
let greeting = withHello(withWave(capitalize('alligator')))

console.log(greeting) // Hello, Alligator 👋

Bây giờ cùng một ví dụ, nhưng sử dụng toán tử đường ống được đề xuất:

let greeting = 'alligator' |> capitalize |> withWave |> withHello

console.log(greeting) // Hello, Alligator 👋

Hoặc được định dạng theo cách dễ đọc hơn như vậy:

let greeting = 'alligator' 
  |> capitalize 
  |> withWave 
  |> withHello

console.log(greeting) // Hello, Alligator 👋

Như bạn thấy , nhà điều hành đường ống có thể giúp làm cho mã rõ ràng và dễ đọc hơn, và cuối cùng là dễ bảo trì hơn.

Với nhiều lệnh gọi hàm đệ quy, hàm trong cùng được gọi trước, nghĩa là thứ tự các lệnh được viết cần phải từ lệnh gọi hàm cuối cùng đến lệnh gọi đầu tiên, có thể hơi ngược để suy nghĩ và viết. mã. Với toán tử đường ống, thứ tự đã viết được đảo ngược và lệnh gọi hàm đầu tiên được thêm vào trước.

Sử dụng nhà điều hành đường ống ngay hôm nay

Vì đề xuất này vẫn còn rất sớm, bạn sẽ không tìm thấy bất kỳ hỗ trợ nào trong các trình duyệt hiện tại. Ta có thể sử dụng Babel để cho phép ta sử dụng nó ngay hôm nay và có mã chuyển đổi hoạt động trên tất cả các trình duyệt.

Để bắt đầu, hãy đảm bảo bạn đã cài đặt Node.js trên máy của bạn .

Hãy tạo một folder mới và khởi tạo một dự án mới:

$ mkdir pipeline-operator
$ cd !$ 
$ yarn init -y
$ touch index.js

Trong bash !$ nghĩa là đối số cuối cùng của lệnh cuối cùng.

Khởi tạo Babel

Bây giờ hãy cài đặt phụ thuộc nhà phát triển Babel cho dự án của ta :

$ yarn add -D @babel/cli @babel/core @babel/plugin-syntax-pipeline-operator

Tạo một file mới có tên .babelrc trong folder dự án:

$ touch .babelrc

Copy paste các cài đặt sau vào .babelrc :

{
  "plugins":[
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal":"minimal"
      }
    ]
  ]
}

Thêm một tập lệnh start vào file package.json của dự án, file này sẽ chạy babel :

"scripts": {
  "start": "babel index.js --out-file pipeline.js --watch"
}

Bắt đầu sử dụng Babel với việc sử dụng tập lệnh start mới của ta :

$ yarn start

Đừng dừng tập lệnh này khi bạn đang làm việc, tập lệnh này đang ở chế độ xem nên sẽ tiếp tục thực hiện công việc khi bạn thay đổi file . Thay vào đó, chỉ cần mở một tab console khác để chạy file JavaScript đã xuất ra ( pipeline.js ).

Và thế là xong, bây giờ ta đã sẵn sàng sử dụng toán tử đường ống trong mã của bạn ! 🎉

Sử dụng

Trước tiên, hãy tạo một số hàm trợ giúp để làm việc với:

index.js

function withPrefix(string, prefix = "Hello, ") {
  return prefix + string;
};

function withSuffix(string, suffix = "It's me!") {
  return string + suffix;
}

function capitalize(string) {
  return string[0].toUpperCase() + string.substr(1);
}

function lowerCase(string) {
  return string.toLowerCase();
}

Hãy xem ta sẽ sử dụng chúng như thế nào mà không có nhà điều hành đường ống:

index.js

let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD'))))

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = withPrefix(withSuffix(lowerCase(capitalize('WORLD')), '. We love you <3'), 'Hi there, ')

console.log(greeting) // Hi there, world. we love you <3

Mã trông hơi khó hiểu, phải không? Bây giờ ta hãy xem nó sẽ trông như thế nào với nhà điều hành đường ống:

index.js

let greeting = 'WORLD' 
  |> capitalize
  |> lowerCase 
  |> withSuffix 
  |> withPrefix 

console.log(greeting) // Hello, world it's me!

// With arguments

let greeting = 'WORLD'
  |> capitalize
  |> lowerCase
  |> (str => withSuffix(str, '. We love you <3'))
  |> (str => withPrefix(str, 'Hi there, '))

console.log(greeting) // Hi there, world. we love you <3

Chạy mã với:

$ node pipeline.js

Như bạn thấy , nó cũng dễ sử dụng với các đối số của hàm.

Tranh luận

// ...
|> (str => withPrefix(str, 'Hi there, '))

Nó chỉ là một chức năng mũi tên. Đối số đầu tiên là những gì ta đang cố gắng xử lý, chuỗi 'WORLD' trong trường hợp của ta .

Bạn thậm chí có thể sử dụng các phương pháp tích hợp sẵn:

index.js

let greetingArray = 'WORLD' 
  |> withPrefix
  |> (str => str.toLowerCase()) 
  |> capitalize
  |> (str => str.split(''))

console.log(greetingArray) // => ["H", "e", "l", "l", "o", ",", " ", "w", "o", "r", "l", "d"]

Kết luận

Tôi hy vọng rằng bài viết này hữu ích cho bạn. Lưu ý nó chỉ là đường cú pháp. Bạn có sử dụng nó hay không. Nếu bạn thích bài viết này, hãy đăng ký để nhận được nhiều bài viết hay hơn nữa.

Tags:

Các tin liên quan

Thanh tiến trình trang với các biến JavaScript và CSS
2020-04-16
Xem xét API JavaScript của trình quan sát thay đổi kích thước
2020-04-16
Xem xét API control panel JavaScript
2020-04-16
Cách triển khai các phương thức mảng JavaScript từ Scratch
2020-04-09
Các đống nhị phân và hàng đợi ưu tiên qua JavaScript
2020-04-05
JavaScript bất biến có thể thay đổi
2020-04-02
Hiểu các tham số mặc định trong JavaScript
2020-03-31
Cookie là gì và cách làm việc với chúng bằng JavaScript
2020-03-19
Tham quan nhanh về date-fns, Thư viện ngày JavaScript đơn giản
2020-03-18
Phương thức getOwnPropertyDescriptors trong JavaScript
2020-03-12