JavaScript 使用 protobuf —— 支持 web 端交互使用

作者: Chuwen
时间: 2020-08-08
分类: JavaScript
评论

>转载自：https://bobjin.com/blog/view/54737b708031d8931158129c5c44a843.html

# ProtoBuf 简介
Protocol Buffer的简称。Google旗下的一款平台无关，语言无关，可扩展的序列化结构数据格式，适合用于数据存储，作为不同应用、语言之间相互通信的数据交换格式,序列化后的数据为二进制数据（pb格式的数据），类比XML、JSON。

protobuf最先支持C++ C# Go JAVA Python PHP语言，最近发布的代码包又支持了JavaScript，今天就来谈下，js怎么使用protobuf。

官网地址 https://developers.google.com/protocol-buffers/

# 安装protobuf编译器
从github上下载编译器源码安装包，https://github.com/protocolbuffers/protobuf/releases

编译安装， 目前仅支持unix类型的系统。

# 定义一个.proto文件
address.proto文件
```
message Address
{
    required string province  = 1;
    required string city = 2;
    required string county = 3;
}
```

# 编译生成访问类文件

运行下面的命令
```
protoc --js_out=import_style=commonjs,binary:. address.proto
```
会当前目录生成

```address_pb.js```

其中的 `--js_out` 的语法如下：

```--js_out=[OPTIONS:]output_dir```
如上面的例子中的option为 import_style=commonjs,binary， "."为生成文件的目录，这里为当前目录

# 打包为web可用的js文件
> 前置条件：需要安装npm。npm一般在安装nodejs的时候就会自动安装。

安装库文件的引用库
`npm install -g require`

安装打包成前端使用的js文件
`npm install -g browserify`

安装protobuf的库文件
`npm install google-protobuf`

打包js文件export.js
```
var address = require('./address_pb');
module.exports = {
    DataProto: address
}
```

编译生成可用js文件
`browserify exports.js -o  address_main.js`

# API
普通类型字段（required/optional）

get{FIELD}() // return field value

set{FIELD}(value) // set field value to value

clear{FIELD}(value) // clear filed value

数组类型字段操作（repeated）

add{FIELD}(value) // add one value to field

clear{FIELD}List() // clear filed

get{FIELD}List() // return array of field values

setInterestList(array)// set array

序列化/反序列化

serializeBinary() // 序列化

deserializeBinary(bin) // 反序列化（静态方法）

调试

toObject() // 打印数据

# 使用
```
<html>  
    <head>  
        <script type="text/javascript" src="./js/person_main.js"></script> 
    </head>
    <body>
        protobuf
    </body>
        <script type="text/javascript">
            var address1 = new proto.Address();
            address1.setProvince("北京");
            address1.setCity("北京");
            address1.setCounty("海淀");
            console.log(address1.toObject());
        </script>
</html>
```

Ajax 跨域请求 Cookie 无法携带/保存的解决办法

作者: Chuwen
时间: 2020-03-17
分类: JavaScript
评论

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关

作者: Chuwen
时间: 2020-02-15
分类: JavaScript
评论

Darkmode.Js

?黑暗模式/夜间模式，只需要几秒钟就可以给你的网站添加这个功能
本站已经添加，你可以看到网站左下方有个小按钮，你点击 Ta 预览以下效果吧！

该库使用 CSS mix-blend-mode 来将暗模式带入您的任何网站。只需复制粘贴该片段，您将获得一个小部件以打开和关闭暗模式。您也可以不使用窗口小部件而以编程方式使用它。该插件是轻量级的，内置于 VanillaJS 中。默认情况下，它也使用 localstorage，因此您的上一次设置将被记住！

特点

窗口小部件自动显示
保存用户选择
如果操作系统偏好的主题为深色，则自动显示Darkmode（如果浏览器支持prefers-color-scheme）
可以以编程方式使用而无需小部件

WordPress 插件

如果您使用的是 Wordpress，则可能需要看看基于 Darkmode.js 的这些插件：

简单方法（使用JSDelivr CDN）

只需将此代码添加到您的 html 页面：

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>new Darkmode().showWidget();</script>

高级调用参数：

- 阅读剩余部分 -

纯 CSS 实现的时间线，也支持使用 JavaScript 动态生成

作者: Chuwen
时间: 2020-01-11
分类: HTML5,JavaScript
4 条评论

JavaScript 遍历 document.querySelectorAll()

作者: Chuwen
时间: 2019-11-20
分类: JavaScript
评论

分类 JavaScript 下的文章

JavaScript 使用 protobuf —— 支持 web 端交互使用

Ajax 跨域请求 Cookie 无法携带/保存的解决办法

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关

Darkmode.Js

特点

WordPress 插件

https://wordpress.org/plugins/darkmode/

简单方法（使用JSDelivr CDN）

高级调用参数：

纯 CSS 实现的时间线，也支持使用 JavaScript 动态生成

JavaScript 遍历 document.querySelectorAll()

最新文章

最近回复

分类

归档

其它

分类 JavaScript 下的文章

JavaScript 使用 protobuf —— 支持 web 端交互使用

Ajax 跨域请求 Cookie 无法携带/保存的解决办法

2 行代码搞定给你的网页加 黑暗模式(夜间模式)开关

Darkmode.Js

特点

WordPress 插件

https://wordpress.org/plugins/darkmode/

简单方法（使用JSDelivr CDN）

高级调用参数：

纯 CSS 实现的 时间线，也支持使用 JavaScript 动态生成

JavaScript 遍历 document.querySelectorAll()

最新文章

最近回复

分类

归档

其它

2 行代码搞定给你的网页加黑暗模式(夜间模式)开关

纯 CSS 实现的时间线，也支持使用 JavaScript 动态生成