技术

JavaScript 中创建对象的设计模式

object

1. 字面量

我们一般使用字面量的形式直接创建对象，但是这种创建方式对于创建大量相似对象的时候，会产生大量的重复代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const cat1 = {
	name: "cat1",
  type: "cat",
	run: function(){
		console.log("小猫快跑");
	}
} 

const cat2 = {
  name: "cat2",
  type: "cat",
	run: function(){
		console.log("小猫快跑");
	}
}

但 JavaScript 和一般的面向对象的语言不同，在 ES6 之前它没有类的概念。但是我们可以使用函数来进行模拟，从而产生出可复用的对象。

缺陷

  • 不能产生可服用的对象

2. 工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function createCat(name){
 const object = {
	 name: name,
   type: "cat",
	 run: function(){
		 console.log("小猫快跑");
	 }
 };
 return object;
}

const cat1 = createCat("cat1");
const cat2 = createCat("cat2");

工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。

继续阅读全文 »

教程►网络遥控车

网络遥控车互联网控制教程

4G 网络 RC 遥控车03 - 无限距离远程遥控？

简介

上篇[WiFi/4G/5G 网络遥控车制作教程]介绍了在局域网下控制遥控车，要实现远程控制，必须让遥控车在互联网上可以访问遥控车。

本教程教大家如何让遥控小车接入移动互联网实现 4G/5G 网络无限距离遥控。

继续阅读全文 »

教程►网络遥控车

WiFi/4G/5G 网络遥控车制作教程

WiFi/4G/5G 网络遥控车制作教程

简介

本教程介绍使用树莓派和遥控车制作一台可以通过网络控制的遥控车。软件使用我开发的 network-rc。

材料

  • 树莓派 3B+ (300 元)
  • 树莓派摄像头 (15 元) / ps3 摄像头 (40 远)
  • 移动电源 (60 元) / USB 输出降压模块 (?元)
  • 环奇 743A (286 元，某宝上找不到了)
  • 杜邦线(公对公 x1, 公对母 x4) (3 元)
  • 其它固定材料

继续阅读全文 »

技术

HTTP 状态码的意义

HTTP 状态码

介绍

HTTP 状态码是指 HTTP 响应报文里状态行里的 Status-Code，用于指示特定 HTTP 响应的状态和类型。

HTTP 响应报文状态行由 HTTP-Version、Status-Code、Reason-Phrase 组成：

1
HTTP/1.1 200 OK

响应状态码分为五类

信息响应(100–199)

100 Continue

如果客户端向服务器发送请求的 Header 里包含 Expect: 100-continue头，服务器应当响应 100,然后客户端再向服务器发送 body 数据。

101 Switching Protocol

在如果客户端请求切换协议，切换协议之前，服务器响应 101 表示服务器也正在切换的协议。

比如客户端请求切换到 websocket 协议：

1
2
3
GET /ws HTTP/1.1
Host: xxx.com
Upgrade: websocket

服务器响应：

1
2
HTTP/1.1 101 Switching Protocols
Upgrade: websocket

接下来将以 websocket 协议进行通信。

102 Processing (WebDAV)

此代码表示服务器已收到并正在处理该请求，但没有响应可用。如果服务器需要很长时间处理一个请求，可以先响应此状态码，处理完再发送 body。

103 Early Hints

与Link一起使用告知客户端需要预加载的一些文件，可加速网页加载。以 HTML 为列，通常浏览器需要加载 html 文件并解析到外部文件的引用才会开始加载这些文件，而利用此特性可以提前加载这些文件。

成功响应(200–299)

成功响应状态的具体意义：成功响应

响应状态是 202 Accepted 的话，可能需要客户端继续轮询接口至响应状态为 200 ok。

重定向(300–399)

重定向响应状态的具体意义：重定向响应

客户端错误(400–499)

4xx 错误是客户端发送的请求本身存在错误返回的状态，包括请求地址错误、请求参数错误、认证错误等。客户端不应该再重新发送请求，而是先解决错误。

客户端错误响应状态的具体意义：客户端错误响应

服务器错误 (500–599)

5xx 码告诉客户端其发送的请求是完美通过验证的但服务器端出现了一些问题。客户端可以无需做任务修改来继续向服务端发送请求。

服务器错误响应状态的具体意义：服务器错误响应

封装请求库处理异常状态

在开发时我们协商接口规范时，需要要求接口返回的状态码符合 section 10 of RFC 2616 的定义 ，以便在客户端封装请求模块通过判断状态码统一处理请求异常。
比如：

  • 接口响应状态为 401 Unauthorized 时，客户端提示用户没有权限
  • 接口响应状态为 5xx 时，弹出错误消息
  • 接口响应状态为 404 Not Found 时， 提示“发出的请求针对的是不存在的记录，服务器没有进行操作”

等等…

参考

技术

如何终止 fetch 请求

fetch 介绍

fetch 以返回 Promise 方式替代 XMLHttpRequest 实现的异步请求。可以使代码书写显得更简介。

1
2
3
const data = await fetch(url).then(respones =>{
   return response.json();
 })

我们通常要使用 fetch polyfill ，以确保可以在使用 fetch 时可以兼容常用浏览器。

AbortController 介绍

如果我们需要手动终止 fetch 发出的请求。则需要使用 AbortController。

继续阅读全文 »