分类 JavaScript 下的文章

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

转载自: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 无法携带/保存的解决办法

服务器端设置

Nginx 端设置:

http://192.168.3.4 是允许跨域的域名,80和443 可以不用加端口号,除此之外的端口号要加
add_header 'Access-Control-Allow-Origin' 'http://192.168.3.4';
add_header 'Access-Control-Allow-Credentials' 'true';

PHP 端设置:

解释同上
header("Access-Control-Allow-Origin: http://192.168.3.4");
header("Access-Control-Allow-Credentials: true");

前端设置

jQuery Ajax 请求:

$.ajax({
    url: 'http://nas/api/v2/sync/maindata',
    xhrFields: {
        // 允许携带证书
        withCredentials: true
    },
    dataType: 'json',
    success: function (res) {
        console.log("请求结果:"+res);
    }
});

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

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 动态生成

Time-line

纯 CSS 实现的 时间线,也支持使用 JavaScript 生成。
DEMO | 演示
Time-line 预览图

HTML 渲染

你只需要根据 timeLine.html 代码结构进行简单的修改即可实现

JacaScript 渲染

你需要将 timeLine.html 103 行 取消注释,然后根据 timeLine.js 注释修改

timeLine.js 里 data变量 数据格式如下:

[
  {
    "title":"现在网",
    "link":"https://nowtime.cc",
    "time":"1578718860"
  },
  {
    "title":"ffmpeg 使用方法合集",
    "link":"https://nowtime.cc/software/834.html",
    "time":"1578725484"
  }
]

字段解释:

title 时间线显示的内容

link 点击后跳转的链接

time 该内容发布的时间,注意是 秒级时间戳

鸣谢

部分 CSS 样式参考的是 https://www.ihewro.com/archives.html

LICENSE

MIT LICENSE

JavaScript 遍历 document.querySelectorAll()

如果使用 forEach 遍历,则会报错,因为它返回的不是一个数组,而是 NodeList

document.querySelectorAll('input[type='selece']]').forEach(function() {
  
});

我们可以通过一下方法来遍历

const selects = document.querySelectorAll("input[name='select']");
[].forEach.call(selects, function(select) {
    console.log(select);
});