做兼职的网站贴吧,手机网站怎么做的好,临沂设计网站的公司,手机网站底部悬浮菜单某月某日#xff0c;虾神本虾接到了这样一个需求#xff0c;前端获取数据之后#xff0c;在渲染之前#xff0c;要对数据进行分类#xff0c;分类的方法可以选择常用几种#xff0c;例如等距法、自然断点法、标准差分类法等……
问#xff1a;为什么要在前端#xff1…某月某日虾神本虾接到了这样一个需求前端获取数据之后在渲染之前要对数据进行分类分类的方法可以选择常用几种例如等距法、自然断点法、标准差分类法等……
问为什么要在前端这种功能不是一般都是在后台实现的么虽然JavaScript号称能够重写一切但是这种写算法的事情本身不是它的领域啊。
答前端的数据来源可能是很多不同的系统组合之后得到的不一定来源于一个系统或者一个库表如果让后台做前后台之间的数据传递就太繁杂了所以甲方想在前端把这事情给做了再说 所以呢虾神你不是做算法的么来来来帮忙给写一个……
虽然我手动写过自然断点法的计算方法但是我不会JavaScript啊……你要不让我先花两个月学习一下JavaScript 虽然自然断点的算法还是比较简单的我也写过见以前的文章 但是对于这种造轮子的活动我一般是努力拒绝的 所以我果断的把Python推荐给了他毕竟Python里面已经有好几个身经百战的自然断点法的实现了然后就毫无意外被拍回来了…… 好吧作为码农不能说不行……我虽然不会写JavaScript但是我会写Rust啊……好巧不巧Rust写的wasm就正好能在前端用。
首先简单介绍一下wasm
wasm: WebAssembly的简写是一种新型的浏览器端代码 用JavaScript的运行原理来说它实际上是在JS的编译器中动态编译然后在JS的VM中执行的那么wasm可以让C/C/Rust一类的高性能编译语言转换成一种称之为IR的虚拟指令集在需要的时候在转换成JS VM可以运行的机器指令 这种IR的编译指令能够最大化的利用客户端的底层(如CPU\内存\显卡等)硬件所以很多时候比原生态的JavaScript性能更高。 2019年的时候wasm就已经正式成为了W3C标准成为了Web开发的“第四门语言” 有关wasm的其他介绍大家有兴趣的可以查阅其他资料反正一句话这玩意儿就是一个可以运行在前端浏览器上的编译级语言功能。
所以我们就可以利用一些Rust写的东西编译成JS可以用的脚本了。
秉承着有的轮子我们就不用自己去造的原则首先我们去看看Rust的官方仓库crates.io里面有没有我们需要的东西
很快我告诉你真的很快啊就让我找到了这个东西 然后就简单了——
我们直接去全球最大的同性交友网站gayhub……阿不github把这个包clone下来或者你直接下载zip然后解压也行因为作者已经把所有的wasm相关代码都写好所以你只需要运行编译打包就可以了注意官方文档上说-features如下
wasm-pack build --release -- -features js
在我这里最新的Rust版本里面已经不好使了直接编译为web就行命令行如下
wasm-pack build --release target web
然后看着cargo自动安装一堆东西自动下载一堆东西自动编译一堆东西直到显示 然后可以了我们可以看见在工程根目录下会得到一个pkg包里面有我们需要的wasm文件 其中index.html是调用的示例文件搞前端的同学一眼就明白 然后我们启动一个小http服务器就可以看见效果了我这里启动的是python自带的http服务器 打开浏览器F12看console: 我们可以简单解析一下这个工程如果你Rust没有基础也没有兴趣就可以跳过这一部分了首先在src/jenks.rs文件中写了一个函数做了算法的实现
//src/jenks.rspub fn get_jenks_breaksT: ToPrimitive(num_bins: usize, data: [T]) - Vecf64 {//jenks的算法见文章开头的链接这里不解释了//这里的就是用Rust把jenks的实现过程写了一遍。
}这个函数在Rust工程里面是可以直接用的了我们可以在下面写一个测试方法来看看效果 但是我们要在前端调用它所以必须还要封装成wasm所以还需要一个对外封装的接口 src/wasm.rs 前面的#[wasm_bindgen]特性就是声明该方法是一个wasm的绑定这样这个方法编译之后就可以被前端调用了。
#[wasm_bindgen]
pub fn get_jenks_breaks(no_bins: usize, data: [f64]) - Box[f64] {let breaks crate::jenks::get_jenks_breaks(no_bins, data);breaks.into_boxed_slice()
}
接下去编译完成之后会生成.wasm文件这个文件是一个二进制的文件 也就是我们前面说的IR中间过程文件。
然后前端需要调用的话还得将它给调度到JS VM里面去所以Rust的wasm工具包还会编译出方便前端调用的js/ts接口 这样你就得到了一个标准的Javascript接口那么前端同学要调用就没有任何的难度了……
至此一个用后台高性能编译型语言编写的算法就完成了前端封装和调用。
如果你有兴趣研究一下webassembly的话这个例子我觉得可以当成hello world还好懂……起码你不用写一行代码而具体里面的技术细节有兴趣的同学可以查阅
https://webassembly.org/
https://developer.mozilla.org/zh-CN/docs/WebAssembly
打完收工……
