Sử dụng Web worker một cách dễ dàng trong Vue.js với vue-worker

---

Giống như nhiều nhà phát triển khác, khi Nhân viên web lần đầu tiên xuất hiện trong bối cảnh phát triển web, tôi vô cùng nhiệt tình và say mê với những điều tuyệt vời khác nhau mà tôi có thể hoàn thành với họ. Tuy nhiên, sự nhiệt tình của tôi nhanh chóng bị giảm sút khi tôi nhận ra rằng các công nhân phải được tải từ các file riêng biệt được lưu trữ trên web server . Đó dường như là một nỗi đau lớn không đáng để cố gắng. Kết hợp với chi phí API, tôi đã không thực sự sử dụng lại công nhân kể từ lần thử đầu tiên cho đến nay. Nhìn vào vue-worker , tôi lại đột nhiên ngạc nhiên về những gì có thể đạt được trong ứng dụng Vue.js của tôi với một API đơn giản đẹp mắt và không có file bên ngoài.

Tiền đề cốt lõi của vue-worker (hay nói đúng hơn là simple-web-worker của cùng một tác giả ) là Web worker có thể được khởi tạo từ Data URI, có thể chỉ là một hàm được xâu chuỗi.

vue-worker gói gọn sự phức tạp trong đó bằng một API đơn giản, dễ hiểu, cho phép bạn dễ dàng thực thi các hàm nhiều tiêu đề giống như các lời hứa.

Cài đặt

Cài đặt vue-worker qua Yarn hoặc NPM:

# Yarn
$ yarn add vue-worker

# NPM
$ npm install vue-worker --save

Bây giờ, hãy kích hoạt plugin VueWorker :

import Vue from 'vue';
import VueWorker from 'vue-worker';
import App from 'App.vue';

Vue.use(VueWorker);

new Vue({
  el: '#app',
  render: h => h(App)
});

Điều này cung cấp cho các thành phần của bạn khả năng truy cập this.$worker .

Chạy các chức năng trong Worker

Bây giờ, bên trong thành phần của bạn, bạn có thể sử dụng this.$worker.run(function, args[]) .

Thao tác này chạy một hàm xuất ra Hello, World! trong một chuỗi công nhân khi thành phần được mount :

<script>
export default {
  mounted() {
    this.$worker.run((arg) => {
      return `Hello, ${arg}!`
    }, ['World'])
    .then(result => {
      console.log(result)
    })
    .catch(e => {
      console.error(e)
    })
  }
}
</script>

Công nhân có thể tái sử dụng

Bạn có thể tạo proxy * “worker” * có thể sử dụng lại bằng cách này. $ Worker.create ([{message, func}]) .

<script>
export default {
  data() {
    return {
      myWorker: null
    }
  },

  created() {
    this.myWorker = this.$worker.create([
      {message: 'message1', func: (arg) => `Output 1 ${arg}`},
      {message: 'message2', func: () => 'Output 2'}
    ])

    this.myWorker.postMessage('message1', ['Boop!'])
    .then(result => {
      console.log(result)
    })
  }
}
</script>

Bạn cũng có thể làm nhiều việc hơn nữa, hãy xem tài liệu vue-worker và simple-worker .

---

---

Các tin liên quan

Cách cài đặt Icinga và Icinga Web trên Ubuntu 16.04
2017-05-05
Cách lưu trữ nhiều trang web với Nginx và HAProxy bằng LXD trên Ubuntu 16.04
2017-04-19
Cách bảo mật ứng dụng web nông dân của bạn bằng Let's Encrypt trên Ubuntu 16.04
2017-03-29
Xây dựng các thành phần web gốc với Vue.js
2017-03-16
Cách sử dụng OpenResty Web Framework cho Nginx trên Ubuntu 16.04
2017-02-28
Roundup: Thư viện thành phần ứng dụng web trên máy tính để bàn Vue.js - Cập nhật Q4 2017
2017-02-23
Cách cài đặt Django Web Framework trên Debian 8
2016-12-21
Cách triển khai ứng dụng web Falcon với Gunicorn và Nginx trên Ubuntu 16.04
2016-11-16
Giới thiệu về Ứng dụng web tiến bộ (PWA): Service Worker & Manifest
2016-11-10
Cách cài đặt Django Web Framework trên Ubuntu 16.04
2016-05-16