常用的JavaScript设计模式
-
单体模式
-
工厂模式
-
例模式
函数
-
函数的定义
-
局部变量和全局变量
-
返回值
-
匿名函数
-
自运行函数
-
闭包
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
线程之间进行数据交互
</table>
//4.从子线程获取处理结果
worker.onmessage = function(event){
var row,
col,
tr,
td,
table = document.querySelector(“#table”);
var numArr = event.data.split(“;”);
for(var i = 0; i<numArr.length; i++){
row = parseInt(i/10);
col = i%10;
if (col == 0 ) {
tr = document.createElement(“tr”);
tr.id = “tr” + row;
table.appendChild(tr);
}else{
tr = document.querySelector(“#tr” + row);
}
td = document.createElement(‘td’);
tr.appendChild(td);
td.innerHTML = numArr[i];
td.width = “30”;
}
}
onmessage = function(event){
var strNum = event.data;
var numArr = strNum.split(";");
var returnNum = "";
for(var i =0; i<numArr.length; i++){
if (numArr[i]%3 ==0) {
returnNum += numArr[i] + ";";
}
}
postMessage(returnNum);
}
线程间的嵌套
线程中可以嵌套子线程,这样可以把一个较大的后台线程切分成几个子线程,每个子线程格子完成相对独立的工作。
还是使用上述的实例,构造一个单层子线程嵌套的例子。把之前主页面生成随机数的工作放到后台线程,然后在后台线程中构造一个子线程,来挑选出可以被3整除的数据。传递的数据采用JSON的数据格式。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var worker = new Worker("script.js");
worker.postMessage("");
// 从线程中取得计算结果
worker.onmessage = function(event) {
if(event.data!="")
{
var j; //行号
var k; //列号
var tr;
var td;
var intArray=event.data.split(";");
var table=document.getElementById("table");
for(var i=0;i<intArray.length;i++)
{
j=parseInt(i/10,0);
k=i%10;
if(k==0) //该行不存在
{
//添加行
tr=document.createElement("tr");
tr.id="tr"+j;
table.appendChild(tr);
}
else //该行已存在
{
//获取该行
tr=document.getElementById("tr"+j);
}
//添加列
td=document.createElement("td");
tr.appendChild(td);
//设置该列内容
td.innerHTML=intArray[j\*10+k];
//设置该列背景色
td.style.backgroundColor="blue";
//设置该列字体颜色
td.style.color="white";
//设置列宽
td.width="30";
}
}
};
</script>
</head>
<body>
<h1>从随机生成的数字中抽取3的倍数并显示示例</h1>
<table id="table">
</table>
</body>
script.js子线程代码
onmessage=function(event){
var intArray=new Array(100); //随机数组
//生成100个随机数
for(var i=0;i<100;i++)
intArray[i]=parseInt(Math.random()*100);
var worker;
//创建子线程
worker=new Worker("worker2.js");
//把随机数组提交给子线程进行挑选工作
worker.postMessage(JSON.stringify(intArray));
worker.onmessage = function(event) {
//把挑选结果返回主页面
postMessage(event.data);
}
}
worker2.js代码
onmessage = function(event) {
//还原整数数组
var intArray= JSON.parse(event.data);
var returnStr;
returnStr="";
for(var i=0;i<intArray.length;i++)
{
//能否被3整除
if(parseInt(intArray[i])%3==0)
{
if(returnStr!="")
returnStr+=";";
//将能被3整除的数字拼接成字符串
returnStr+=intArray[i];
}
}
//返回拼接字符串
postMessage(returnStr);
//关闭子线程
close();
}
向子线程传递消息时,用worker.postMessage,向主页面提交数据时直接用postMessage.
多个子线程之间的数据交互
<!DOCTYPE html>
<html>
<head>
<title>线程之间进行数据交互</title>
</head>
<body>
<h2>线程之间进行数据交互</h2>
<table id="table" style="color: #FFF;background-color: #ccc;">
</table>
</body>
<script type="text/javascript">
var worker1 = new Worker("worker1.js");
worker1.postMessage("");
//从子线程获取处理结果
worker1.onmessage = function(event){
var row,
col,
tr,
td,
table = document.querySelector("#table");
var numArr = event.data.split(";");
for(var i = 0; i<numArr.length; i++){
row = parseInt(i/10);
col = i%10;
if (col == 0 ) {
tr = document.createElement("tr");
tr.id = "tr" + row;
table.appendChild(tr);
}else{
tr = document.querySelector("#tr" + row);
}
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = numArr[i];
td.width = "30";
}
}
</script>
</html>
worker1.js代码
onmessage = function(event){
var data = event.data;
var dataArr = new Array(100);
for(var i=0; i<100; i++){
dataArr[i] = parseInt(Math.random()*100);
}
//创建新的子进程
var worker2 = new Worker("worker3.js");
//worker.postMessage传递JSON对象
worker2.postMessage(JSON.stringify(dataArr));
worker2.onmessage = function(event){
//postMessage将数据返回给主页面
postMessage(event.data);
}
}
worker3.js代码
onmessage = function(event){
var numArr = JSON.parse(event.data);
var returnNum = "";
for(var i =0; i<numArr.length; i++){
if (numArr[i]%3 ==0) {
returnNum += numArr[i] + ";";
}
}
postMessage(returnNum);
}
SharedWorker共享线程
共享线程
共享线程可以由两种方式来定义:一是通过指向 JavaScript 脚本资源的 URL 来创建,而是通过显式的名称。当由显式的名称来定义的时候,由创建这个共享线程的第一个页面中使用 URL 会被用来作为这个共享线程的 JavaScript 脚本资源 URL。通过这样一种方式,它允许同域中的多个应用程序使用同一个提供公共服务的共享线程,从而不需要所有的应用程序都去与这个提供公共服务的 URL 保持联系。
无论在什么情况下,共享线程的作用域或者是生效范围都是由创建它的域来定义的。因此,两个不同的站点(即域)使用相同的共享线程名称也不会冲突。
共享线程的创建
创建共享线程可以通过使用 SharedWorker() 构造函数来实现,这个构造函数使用 URL 作为第一个参数,即是指向 JavaScript 资源文件的 URL,同时,如果开发人员提供了第二个构造参数,那么这个参数将被用于作为这个共享线程的名称。创建共享线程的代码示例如下:
var worker = new SharedWorker('sharedworker.js', ’ mysharedworker ’ );
与共享线程通信
共享线程的通信也是跟专用线程一样,是通过使用隐式的 MessagePort 对象实例来完成的。当使用 SharedWorker() 构造函数的时候,这个对象将通过一种引用的方式被返回回来。我们可以通过这个引用的 port 端口属性来与它进行通信。发送消息与接收消息的代码示例如下:
// 从端口接收数据 , 包括文本数据以及结构化数据
worker.port.onmessage = function (event) { define your logic here... };
// 向端口发送普通文本数据
worker.port.postMessage('put your message here … ');
// 向端口发送结构化数据
worker.port.postMessage(
{ username: 'usertext';
live_city:
['data-one', 'data-two', 'data-three','data- four']});
上面示例代码中,第一个我们使用 onmessage 事件处理器来接收消息,第二个使用 postMessage 来发送普通文本数据,第三个使用 postMessage 来发送结构化的数据,这里我们使用了 JSON 数据格式。
实例1:在单个页面中使用sharedWorker
<!DOCTYPE html>
<html>
<head>
<title>单个页面的SharedWorker</title>
</head>
<body>
<h2>单个页面的SharedWorker</h2>
<div id="show"></div>
<script type="text/javascript">
var worker = new SharedWorker('test.js');
var div = document.querySelector('#show');
worker.port.onmessage = function(e){
div.innerHTML = e.data;
}
</script>
### 结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)