帮酷LOGO
  • 显示原文与译文双语对照的内容
A Vue.js plugin to use webworkers in a simply way.

  • 源代码名称:vue-worker
  • 源代码网址:http://www.github.com/israelss/vue-worker
  • vue-worker源代码文档
  • vue-worker源代码下载
  • Git URL:
    git://www.github.com/israelss/vue-worker.git
  • Git Clone代码到本地:
    git clone http://www.github.com/israelss/vue-worker
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/israelss/vue-worker
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • VueWorker

    一个 Vue.js 插件,以简单的方式使用 webworkers 。

    变更日志

    1.2.1

    • 修复自述文件

    请参见这里的完整变更日志

    为什么

    创建和使用网络工作人员有时会很麻烦。 这个插件旨在帮助在Vue组件中使用网络工作者。 它是 simple-web-worker的包装器。

    如何安装和使用

    yarn add vue-worker// ornpm install vue-worker --save

    然后添加 main.js:

    importVuefrom'vue'importVueWorkerfrom'vue-worker'Vue.use(VueWorker)

    它将在 Vue ( 并将它传递给每个子组件) 中注入一个属性,默认名称为 $worker,它可以在任何Vue组件中使用 this.$worker 访问。

    你可以在注册插件时更改该名称:

    importVueWorkerfrom'vue-worker'Vue.use(VueWorker, '$desired-name')

    API

    英镑通知:

    :无法从Vue组件作为 this 传递。 你可以传递 this.$data 或者 data 或者 computed 中的任何变量,尽管。

    。$worker 。运行( 功能,[args]? )

    其中:

    • 功能是工作时运行的函数
    • 是一个可选的参数,它将被用户定义的函数使用。

    这个方法创建一个一次性的web worker,运行并返回给定函数的结果,并关闭 worker 。



    这里方法类似于 Promise.resolve(),,但在另一个线程中。

    比如:

    this.$worker.run(() =>'this.$worker run 1: Function in other thread')
    . then(console.log) // logs 'this.$worker run 1: Function in other thread'. catch(console.error) // logs any possible errorthis.$worker.run((arg1, arg2) =>`this.$worker run 2: ${arg1}${arg2}`, ['Another', 'function in other thread'])
    . then(console.log) // logs 'this.$worker run 2: Another function in other thread'. catch(console.error) // logs any possible error

    这里。$worker 。创建( [actions]? )

    其中:

    • [actions] 是一个可选的对象 array,有两个字段,messagefunc 。 本质上,它是一个消息。

    如果省略 [actions] 或者 undefined,创建的 <工作worker将没有注册操作,因此你必须使用方法 register,才能使用 <worker> 。



    如果你打算重用 ****,,则应该使用这里方法。 它使用 `postMessage ( ) 或者 `postAll ( ) ` 方法创建一个可以重用的**** ( 。不是真正的网络工作者,在前面更多),以确定要运行。

    比如:

    constactions= [
     { message:'func1', func: () =>`Worker 1: Working on func1` },
     { message:'func2', func:arg=>`Worker 2: ${arg}` },
     { message:'func3', func:arg=>`Worker 3: ${arg}` },
     { message:'func4', func: (arg='Working on func4') =>`Worker 4: ${arg}` }
    ]let worker =this.$worker.create(actions)

    <worker> 。postmessage ( 消息,[args]? )

    其中:

    • <worker> 是用 this.$worker.create([actions]) 创建的工作
    • 消息是 [actions]的消息之一。
    • 是一个可选的参数,它将被在消息注册的函数所使用。

    当函数不期望任何参数或者期望的参数具有默认值时,可以安全地忽略 [args]



    当期望的参数没有默认值时,应提供_ [args] _ should 。

    这里方法类似于 Promise.resolve(),,但在另一个线程中。

    比如:

    constactions= [
     { message:'func1', func: () =>`Worker 1: Working on func1` },
     { message:'func2', func:arg=>`Worker 2: ${arg}` },
     { message:'func3', func:arg=>`Worker 3: ${arg}` },
     { message:'func4', func: (arg='Working on func4') =>`Worker 4: ${arg}` }
    ]let worker =this.$worker.create(actions)worker.postMessage('func1')
    . then(console.log) // logs 'Worker 1: Working on func1'. catch(console.error) // logs any possible errorworker.postMessage('func1', ['Ignored', 'arguments'])
    . then(console.log) // logs 'Worker 1: Working on func1'. catch(console.error) // logs any possible errorworker.postMessage('func2')
    . then(console.log) // logs 'Worker 2: undefined'. catch(console.error) // logs any possible errorworker.postMessage('func3', ['Working on func3'])
    . then(console.log) // logs 'Worker 3: Working on func3'. catch(console.error) // logs any possible errorworker.postMessage('func4')
    . then(console.log) // logs 'Worker 4: Working on func4'. catch(console.error) // logs any possible errorworker.postMessage('func4', ['Overwrited argument'])
    . then(console.log) // logs 'Worker 4: Overwrited argument'. catch(console.error) // logs any possible error

    <worker> 。postall ( [ message1,。 || {message: message1,args: [args1] } 。 || [args1],。]?

    其中:

    • <worker> 是用 this.$worker.create([actions]) 创建的工作
    • 参数是可选的array,它接受下列之一:
      • 包含一个或者多个消息的字符串。[actions] 中包含一个或者多个信息。
      • {message: message1,args: [args1] } 。 对象包含两个字段:message ( 来自行动的消息。) 和 args ( 该参数将使用的参数)
      • [args1], registered被注册操作使用的参数数组。

    如果 [message1,...]undefined 或者没有给出参数,工作线程将运行所有已经注册的操作,而不使用任何参数。



    If {message,参数,或者函数的参数,你应该使用` [] ` default函数,你应该使用` _ ` _ ( 空的array ) 。_ or 。 如果使用"[null]"这个值将是函数参数所假定的值。

    当使用 [[args1] _ 。"。"。] _,必须输入相同数量的参数,即使某些操作不接受任何参数。 在这种情况下,使用,[],如上所述。 请参阅下面的示例。

    如果 _[ {message: message1,: [args1] },。"。"。] _,每个对象都必须包含字段`message`和 `args` 。

    这里方法类似于 Promise.all(),,但在另一个线程中。

    比如:

    constactions= [
     { message:'func1', func: () =>`Worker 1: Working on func1` },
     { message:'func2', func:arg=>`Worker 2: ${arg}` },
     { message:'func3', func:arg=>`Worker 3: ${arg}` },
     { message:'func4', func: (arg='Working on func4') =>`Worker 4: ${arg}` }
    ]let worker =this.$worker.create(actions)worker.postAll()
    . then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: undefined', 'Worker 3: undefined', 'Worker 4: Working on func4']. catch(console.error) // logs any possible errorworker.postAll(['func1', 'func3'])
    . then(console.log) // logs ['Worker 1: Working on func1', 'Worker 3: undefined']. catch(console.error) // logs any possible errorworker.postAll([{ message:'func1', args: [] }, { message:'func3', args: ['Working on func3'] })
    . then(console.log) // logs ['Worker 1: Working on func1', 'Worker 3: Working on func3']. catch(console.error) // logs any possible errorworker.postAll([[], ['Working on func2'], ['Working on func3'], []])
    . then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: Working on func2', 'Worker 3: Working on func3', 'Worker 4: Working on func4']. catch(console.error) // logs any possible errorworker.postAll([[], ['func2'], ['func3'], ['Overwriting default value of arg on func4']])
    . then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: func2', 'Worker 3: func3', 'Worker 4: Overwriting default value of arg on func4']. catch(console.error) // logs any possible error

    <工作>. register( action || [actions] )

    其中:

    • <worker> 是用 this.$worker.create([actions]) 创建的工作
    • 操作是一个具有两个字段的对象,messagefunc
    • 是一个对象的array,每个对象都是一个基于对象的动作,如上所定义

    你可以使用操作或者 [actions],但不能同时使用。

    比如:

    constinitialActions= [
     { message:'func1', func: () =>'Working on func1' }
    ]let worker =this.$worker.create(initialActions)worker.postAll()
    . then(console.log) // logs ['Working on func1']. catch(console.error) // logs any possible error// registering just one actionworker.register({ message:'func2', func: () =>'Working on func2' })worker.postAll()
    . then(console.log) // logs ['Working on func1', 'Working on func2']. catch(console.error) // logs any possible error// registering multiple actionsworker.register([
     { message:'func3', func: () =>'Working on func3' },
     { message:'func4', func: () =>'Working on func4' }
    ])worker.postAll()
    . then(console.log) // logs ['Working on func1', 'Working on func2', 'Working on func3', 'Working on func4']. catch(console.error) // logs any possible error

    <工作>. unregister( message || [messages] )

    其中:

    • <worker> 是用 this.$worker.create([actions]) 创建的工作
    • 消息是 [actions]的消息之一。
    • 是一个包含一个或者多个消息的array,每个消息都是一个基于消息的消息,如上所述

    你可以使用消息或者 [messages],但不能同时使用。

    比如:

    constinitialActions= [
     { message:'func1', func: () =>'Working on func1'},
     { message:'func2', func: () =>'Working on func2'},
     { message:'func3', func: () =>'Working on func3'},
     { message:'func4', func: () =>'Working on func4'}
    ]let worker =this.$worker.create(initialActions)worker.postAll()
    . then(console.log) // logs ['Working on func1', 'Working on func2', 'Working on func3', 'Working on func4']. catch(console.error) // logs any possible error// unregistering just one actionworker.unregister('func2')worker.postAll()
    . then(console.log) // logs ['Working on func1', 'Working on func3', 'Working on func4']. catch(console.error) // logs any possible error// unregistering multiple actionsworker.unregister(['func3', 'func1'])worker.postAll()
    . then(console.log) // logs ['Working on func4']. catch(console.error) // logs any possible error

    关闭员工?

    如果没有 close() 或者 terminate() 方法,你可以能会想:"如何终止那些可以重用的工作人员""?

    当你创建一个可以重用的工作者时,你不会收到真正的网络工作者。

    相反,你得到一个对象,它的中包含给定的消息操作映射,当你调用 postMessage() 或者 postAll() 时,调用 run()

    因此,如果不再需要"终止",那么你就可以完成它:

    let worker =this.$worker.create(actions)// use the workerworker =null



    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语