protobuf 前端怎么使用

来源：互联网发布：数据下载编辑：程序博客网时间：2024/06/02 21:26

为什么要学protobuf

1、体体小是json的1/8

2、编码解码速度快

3、"跨语言"：我们只需要写一份xxx.proto，即可以用工具生成java、python、c++等语言对应的代码

首先我们定义一份huibao.proto文件

syntax = "proto3";option java_package = "com.bubukj.proto";  //设置java对应的packageoption java_multiple_files = true;                           //建议设置为true，这样会每个对象放在一个文件中，否则所有对象都在一个java文件中message huibaoData  {     message userData {      int64 id = 1; string userName = 2; string userAge = 3; }  message indexData {      int64 id = 1; string sj = 2;     repeated dbUtil db = 3; }  message dbUtil {   int64 id = 1;   string haha = 2; }}

用工具把proto源文件变成我们需要的代码

下载并安装工具
谷歌提供的工具protoc.exe，可以把proto源文件生成java、c++、python等语言所对应的代码，这个工具在https://github.com/google/protobufo中可以找到，我也分享到百度云了protoc.exe
执行命令生成代码

这里有我用到的一个脚本文件分享给大家脚本文件

rd .\src\ /s/qmd .\src\cmd .\src\javamd .\src\pythonmd .\src\jsmd .\src\commonjsprotoc.exe --cpp_out=.\src\c huibao.protoprotoc.exe --java_out=.\src\java huibao.protoprotoc.exe --python_out=.\src\python huibao.protorem protoc.exe --js_out=.\src\js huibao.protoprotoc.exe --js_out=library=huibao_proto,binary:.\src\js huibao.protoprotoc.exe --js_out=import_style=commonjs,binary:.\src\commonjs huibao.protopause

运行这个脚本文件就可以生成huibao_proto.js

接下来该怎么用这个Js 只需要引入google的js库就可以直接用了

例子如下：

以npm 讲解：

安装好npm以后，安装需要的库：（假设已安装好npm）

执行如下命令：

npm install -g require(对库文件的引用库)

npm install -g browserify(这个是用来打包成前端使用的js文件)

最后我们执行 (执行这句命令的时候必须在browserify目录下不然会报找不到package.json文件 )

npm install google-protobuf 会在当前目录下生成一个文件夹，里面装的就是protobuf的库文件。

都装还以后，只需要再写一个导出文件用browserify执行打包即可

var myProto = require('./huibao_proto');        module.exports = {          DataProto: myProto      }

保存为exports.js。

对文件进行编译打包

执行命令

browserify exports.js > huibao.js

然后会生成一个huibao.js文件。

这时候就可以使用huibao.js了

新建一个项目：

html 代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="google-protobuf/google-protobuf.js"></script><script type="text/javascript" src="huibao.js"></script><script type="text/javascript">var huibao = new proto.huibaoData();var user = new proto.huibaoData.userData();console.log(user);user.setId(2);console.log(user.getId());</script></head><body></body></html>

打开html 报如下错误：

在google-protobuf.js 中找到exports

exports.Map=jspb.Map;exports.Message=jspb.Message;exports.BinaryReader=jspb.BinaryReader;exports.BinaryWriter=jspb.BinaryWriter;exports.ExtensionFieldInfo=jspb.ExtensionFieldInfo;exports.ExtensionFieldBinaryInfo=jspb.ExtensionFieldBinaryInfo;exports.exportSymbol=goog.exportSymbol;exports.inherits=goog.inherits;exports.object={extend:goog.object.extend};exports.typeOf=goog.typeOf;

看得出这句代码其实就是就是google-protobuf.js想对外提供的个变量只不过没有定义好办直接在前面加一个var exports = {};

然后再刷新html

至此我们可以再好好去研究研究怎么玩protobuf

重构我们的前端代码做到真正的数据分离以数据驱动页面

protobuf 前端怎么使用

用工具把proto源文件变成我们需要的代码

下载并安装工具