• 中文前端UI框架Kit(十)Javascript多线程工作模型的实现


    号外:kitjs官方讨论QQ群建立了,QQ群号88093625,欢迎大家加入,讨论前端相关话题

    今天给大家介绍一下kitJs的多线程类,以及原生的javascript,不借助浏览器插件以及HTML5的webWorker是如何实现多线程模式的。

    Demo地址:http://xueduany.github.com/KitJs/KitJs/index.html#multithread

    (一)多线程简单工作原理

    所谓多线程,一般意义上理解,就是两段程序块,在操作系统的分时调配下,交错运行。

    1. 每个程序块需要有自己独立的线程运行环境以及独立上下文

    2. 每个程序块包含多个语句块,每个语句块是原子的,不可分割的,例如while之类的循环

    3. 语句块和语句块之间是可以分割执行的,以及支持sleep,比如a=1;b=2;这样是两个语句块

    4. 程序块可以调用公共资源区,比如调用window空间下其他资源

    5. 支持死循环解锁,即杀死进程

    (二)Kit是如何实现的

    首先我们通过$kit.multithread.newThread方法创建一个新的线程

    image

    newThread方法接受一个匿名函数,我们可以看到在这个匿名函数体内部,包含了独立线程块自己的资源,变量a/b,以及自己的逻辑

    $kit.multithread.iterate方法提供一个循环方法,类似while,接受2个参数,参数1为一个是否执行循环的标记,参数2为一个循环体。

    image

    我们可以看到线程1的循环体的意思就是一个死循环,不断的输出“数字a为xxx”这样的文字

    在循环体内部,有一个sleep方法,是让程序块休眠指定的时间,这里是100毫秒

    image

    线程2的意思就是b的递减,输出字段,然后有两个判断,当b<995,kill线程1,当b<980时kill自己

    最后就是线程定义完毕之后,执行方法

    image

    运行页面,我们就会看到线程1和线程2交织执行

    image

    (三)原理解析

    查看kit源代码,我们可以看到

    image

    新建一个线程,kit会保留线程的id号以及线程对应的匿名方法

    image

    运行比较简单,直接执行

    image

    延时的实现,使用setTimeout做延时,这里有个技巧,在setTimeout里面用匿名方法纠正this指针,同时在线程的附属信息里面记录延时执行的stack顺序

    image

    循环的实现,最为复杂,可以看到首先保留远程执行方法的上下文,定义一个inner Fn执行第一次方法体,然后用setInterval执行后续,在setInterval内部还要加载对于sleep的延时判断,如果当前excuteStack处于sleep状态,那么继续hold,等待sleep结束再继续循环

    image

    杀死线程,清空所有的excuteStack里面的timeout,delete线程注册信息

    (四) 高级技巧

    其实对于一个js程序块来说,按照$kit提供的api改成这样已经看上不去很不像一段简单的js代码了

    如果要做的更友好一些,我们可以使用正则表达式做一个词法分析器,通过fn.toString获取function的代码块文本,分析,并转换for语句,while语句成为$kit的iterate语句,直接转换sleep(xxx);为$kit的sleep方法,这样的代码会写的更友好一些,这里只为抛砖引玉,欢迎有兴趣的同学继续改成$kit的多线程类,这里也提供了一个parse方法,没有实现

  • 相关阅读:
    HDU 1025 Constructing Roads In JGShining's Kingdom (DP+二分)
    HDU 1158 Employment Planning
    HDU 2059 龟兔赛跑
    Csharp 简单操作Word模板文件
    Csharp windowform datagridview Clipboard TO EXCEL OR FROM EXCEL DATA 保存datagridview所有數據
    Csharp 讀寫文件內容搜索自動彈出 AutoCompleteMode
    Csharp windowform controls clear
    CSS DIV大图片右上角叠加小图片
    Csharp DataGridView自定义添加DateTimePicker控件日期列
    Csharp 打印Word文件默認打印機或選擇打印機設置代碼
  • 原文地址:https://www.cnblogs.com/xueduanyang/p/2526422.html
Copyright © 2020-2023  润新知