注册
环信即时通讯云

环信即时通讯云

单聊、群聊、聊天室...
环信开发文档

环信开发文档

Demo体验

Demo体验

场景Demo,开箱即用
RTE开发者社区

RTE开发者社区

汇聚音视频领域技术干货,分享行业资讯
技术讨论区

技术讨论区

技术交流、答疑
资源下载

资源下载

收集了海量宝藏开发资源
iOS Library

iOS Library

不需要辛辛苦苦的去找轮子, 这里都有
Android Library

Android Library

不需要辛辛苦苦的去找轮子, 这里都有

国内有哪些对标 ChatGPT 的大语言模型? 5 大竞品

ChatGPT 是基于 大语言模型 的聊天机器人,而这个大语言模型是一个人工智能领域概念、技术。 大语言模型通常有十亿、百亿级的参数,需要非常强大的算力、和非常多的用于训练的数据资源。它对海量的无标注数据进行预训练、通过微调和零样本学习来变形、应用。 对大模型...
继续阅读 »

ChatGPT 是基于 大语言模型 的聊天机器人,而这个大语言模型是一个人工智能领域概念、技术。


大语言模型通常有十亿、百亿级的参数,需要非常强大的算力、和非常多的用于训练的数据资源。它对海量的无标注数据进行预训练、通过微调和零样本学习来变形、应用。


对大模型的“变形”(DIY),不仅能增强 AI 技术的通用性,还能扩展应用场景、人人都可以用“大模型”,这样也利于形成了一个开放的生态,激发大众创新。


GPT 时代,国内学界和企业也相继基于大语言模型推出自研的大模型。比如:


百度的“文心一言”、复旦大学的“MOSS”、腾讯的“HunYuan大模型”、阿里的“通义大模型”、华为的“盘古大模型”等等。


自研单位大模型
百度文心一言
复旦大学MOSS
腾讯HunYuan
阿里通义
华为盘古

本篇就将简要介绍这 5 个国内的这些大语言模型~ <喜欢三连👍👍👍笔芯>


百度-文心一言


以上这么多国内大语言模型,目前,最引人注目的就是“文心一言”,它也可以生成各种类型的文本,比如诗歌、小说、新闻等。同时,它被认为是中国 AI 新旧时代划分里程碑式的产品。


怎样体验?


1.通过百度智能云 API 接口调用文心一言的服务;


2.进入官网 wenxin.baidu.com/ 体验;


image.png


image.png


文本的理解和创作还是“敬请期待”。。


在开放 API 体验 AI 根据文字、风格作画:


image.png


前的产品中心只有“文心百中”和“文心一格”两个产品。


看下“文心百中” 提供的体验示例:


image.png


实际用起来,跟 ChatGPT / New Bing / Notion AI 比,感觉差距还很大~ 文心百中还是停留在搜索结果上,没有做到联系上下文整合。


image.png


文心一格主要提供一些:联想脑洞生成相关图片推荐,试了下,也不够准确。。


用一成语小结:任重道远


复旦大学-MOSS


MOSS 命名上和电影《流浪地球》的 AI MOSS 同名,寓意人和人工智能共同拯救地球。目前,它的参数规模约是 ChatGPT 的 十分之一,仍处在内测阶段,预计三月底开源。


image.png


MOSS 的优势是什么?


MOSS 因为参数规模小,所以更节省计算资源和存储空间,易于部署和应用。


另外,MOSS 在设计时还考虑了人类的伦理道德准则,不会产生有偏见或可能有害的回答,这样可以避免一些潜在的法律风险和商业伦理问题。这点上,ChatGPT 则没有明确地处理。


腾讯-HunYuan


HunYuan 利用了腾讯的研发力量,完整覆盖 NLP 大模型、CV 大模型、多模态大模型及其它行业领域任务模型,可谓是:集大成者。


它的目标是打造行业领先的 AI 预训练大模型,以统一平台,对技术复用,使 AI 技术适用于更多场景,并且降低成本。


HunYuan 的参数量级是 万亿!从这点看,腾讯的 HunYuan 格局(画饼)就比 文心一言、MOSS 要大的多的多~~


对于公众 HunYuan 目前也是在内测优化中,未来值得期待。


但 HunYuan 的 NLP 部分,HunYuan-NLP 已经在多个腾讯产品中得到应用,一样也是用于生成文本,比如对话生成、小说续写、广告生成等。


image.png


阿里-通义


阿里的通义模型是一系列基于【自然语言处理和多模态理解与生成】的 AI 模型,旨在打造国内首个 AI 统一底座。


它包括以下几个核心模型:


1.AliceMind-PLUG:语言大模型,能够在多个中文语言理解任务上超越人类水平。


2.AliceMind-mPLUG:多模态理解与生成统一模型,能够处理图文、视频等多种数据类型,并进行跨模态搜索、生成等任务。


3.M6-OFA:多模态统一底座模型,能够根据不同的场景和设备动态调整模型大小和性能。


4.S4:超大模型落地关键技术框架,能够支持百亿级别参数的训练和推理。


image.png


阿里的这个部署算是最早一批了,值得期待。


目前,我们可以在 魔搭社区 modelscope.cn/home 找到通义大模型的部分开源代码。比如你可以体验中文版的GPT-3 等。


华为-盘古


盘古,这个大家也常听到吧?也属于是大名鼎鼎。


盘古大模型是一系列超大规模的预训练模型,包括NLP、CV、多模态和科学计算等。


其中,盘古NLP大模型是 全球最大 的千亿参数中文语言预训练模型,它能够进行内容生成和内容理解等任务。


盘古CV大模型是 全球最大 的30亿参数视觉预训练模型,它能够进行分类、分割和检测等任务。


这两个全球最大是亮点~ 目前,盘古大模型在华为云:http://www.huaweicloud.com/ 上提供服务。


image.png


小结


整个看完下来,我的感觉就是:虽然我们现在的 大模型 GPT 商用还没有像 ChatGPT 或 New bing 或 Notion AI 那么直接能给到大众去使用,但是国内这些最优秀的一批企业/高校也一直在推进这个事情。


技术存在差距,不承认也不行,就像之前所分享的,ChatGPT 能站到大众面前,也经过了美国各科技公司十多年的沉淀、演进,所以我们可能还是起步有点迟了。


但不怕慢就怕站,我们知道训练 AI 大模型 是个方向,就走起来就好了,加油吧~ Maybe 顶峰再见~




OK,以上便是本篇分享,希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟


我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏


😹 加我微信 ATAR53,拉你入群,定期抽奖、粉丝福利多多。只学习交友、不推文卖课~





作者:掘金安东尼
来源:juejin.cn/post/7208188644293050405
收起阅读 »

你还别不信,我帮同事优化代码,速度快了1000倍以上!!

web
背景 我们公司有个小程序的产品,里面有个功能是根据用户输入的商品信息,如 干葱3斤,沙姜1斤,番茄2斤...,然后传给后端接口就能解析到符合规格的数据,这样用户就不用一个个录入,只需要一次性输入大量 sku 信息文本,即可快速下单。 故事发生在这周三早上,我同...
继续阅读 »

背景


我们公司有个小程序的产品,里面有个功能是根据用户输入的商品信息,如 干葱3斤,沙姜1斤,番茄2斤...,然后传给后端接口就能解析到符合规格的数据,这样用户就不用一个个录入,只需要一次性输入大量 sku 信息文本,即可快速下单。


故事发生在这周三早上,我同事急匆匆地找到我,说识别商品很慢。


一开始,我以为是后端的接口慢(因为之前这个识别一直在做优化),那这个实际上前端大多无能为力,因为确实识别了大量的商品(具体是 124 个),且输入文本千奇百怪,比如豆腐一块,那我要理解为是一块豆腐,还是豆腐一块钱?但他跟我说,虽然接口耗时 2.8s,但是还得等待接近 5s 的时间才渲染商品列表,且经常出现创建完 124 个商品的订单,开发工具就报内存不足。


image.png



这个是网上找工具模拟的,因为企业微信截图水印去除太麻烦了。。。不过对话是真实的对话~



我一开始还以为,难道是渲染长列表没做性能优化?然而经过一顿排查,排除了是渲染的锅,罪魁祸首是请求完接口后,对商品信息的处理导致了卡顿,过程大致如下:


  /** 发起请求 */
async request() {
/** 这里接口耗时2.8s */
const data = await ParseDetails()
onst { order_detail_items, sku_map, price_map } = data;

/** 耗时出现在这里 长达5s+,随着识别商品数量呈线性增加 */
this.list = order_detail_items.map(
(item, i) => new DataController({ ...item, sku_map, price_map })
);
}

2023-03-01 21.34.05.gif



每次生成一个 DataController 实例大概耗时 30+ ~ 50ms



定位到耗时的大致位置,那就好办了,接下来,实际上就只需要看看为何创建 DataController 那么耗时就好了。


这里我也写了个类似的demo,点击可见具体的代码细节~




本来想通过码上掘金写 demo 的,但发现好像不太支持,所以还是在 codesandbox 上写,然后在码上掘金通过 iframe 插入,如果预览不出来,可能是 codesandbox 抽风了



image.png



尾缀为 1 的为优化后的代码



了解下 demo


代码结构


整个项目采用的技术栈是 react + mobx(一个响应式的数据管理库)



  • batch_input: 点击识别后会调用 batchInput 的 request 进行解析,解析完成后会处理商品列表信息

  • data_controller: 商品信息二次处理后的结构,request 后得到的 order_detail_items 会遍历生成一个个 DataController 实例,用于渲染商品列表

  • mock_data: 随便造了一点数据,124 项,屏蔽了真实项目的具体字段,结构为 { order_detail_items, sku_map, price_map }


其中 batch_input1、data_controller1 是优化后的代码


为何要有两个 map


每次请求接口解析后会返回一个数据结构:



  • order_detail_items: 返回列表的每一项,结果为 OrderDetailItem[]

  • sku_map: sku 即商品的结构,可通过 order_detail_item 上的 sku_id 映射 到对应的 sku,结构为 Record<string, Sku>,即 Sku_Map

  • price_map: 对应的报价信息,可通过 order_detail_item 上的 sku_id 映射 到对应的 price,结构为 Record<string, Price>,即 Price_Map


以上相关信息放到对应的 map 上是为了让一个 order_detail_item 不挂太多的数据,只通过对应的 id 去 map 对应的其他信息,比如我想拿到对应的 sku 信息,那么只需要:


const sku = sku_map[order_detail_item.sku_id]

而不是通过:


const sku = order_detail_item.sku

拿到,以达到更好的扩展性。


一起看看问题出在哪


现在我们定位到了问题大致是出现在创建 DataController 实例的时候,那么我们看具体的构造函数:


image.png


image.png


我们看到每次遍历都把 order_detail_item 和两个 map 都传给 DataController 类,然后 DataController 将得到的 detail 全部赋值到 this 上,之后通过makeAutoObservable实现响应式。


看到这里的读者,我想大部分都知道问题出现在哪了,就是原封不动地把所有传过来的参数都加到 this 上去,那么每次创建一个实例,都会挂载两个大对象的 map,导致 new 每个实例耗时 30 ~ 50ms,如果是 100+个,那就是 3 ~ 5s 了,这是多么的恐怖。


还有一个点,实际上 DataController 声明的入参类型是OrderDetailItem,是不包括 Sku_Map 和 Price_Map,但是上面的代码却都不顾 ts 报错传过去,这也是导致代码可能出现问题的原因


image.png


多说一嘴


然而实际上定位问题没有那么快,因为首先实际的 DataController 很大,且 constructor 里面的代码也有点多,还有我后来也没有负责这个项目,对代码不是特别的熟悉。


而上面的 demo 实际上是经过极简处理过的,实际的代码如下:


image.png



将近 250 行



image.png



单单一个 constructor 就 50+行了



一起看看如何优化吧


我们现在找到原因了,没必要每个示例都挂载那么多数据,特别是两个大对象 map,那我们如何优化呢?


大家可以想一想怎么做?


我的方案是,DataController 上面声明个静态属性 maps,用来映射每次请求后得到的 sku_map 和 price_map,见data_controller1


image.png


然后每次请求之前生成一个 parseId,用来映射每次请求返回的数据,demo 里面是用Date.now()简单模拟,将生成的两个 map 存放到静态属性 maps 上,然后 parseId 作为第二个参数传给每个实例,见 batch_input1


image.png


那么 每个实例的get sku, get mapPrice(真实项目中实际上很多,这里简化了不少) 中就可以替换为该静态 map 了,通过 parseId 映射到对应的 sku 和 price


我们看看优化后的效果:


2023-03-01 21.36.58.gif


现在生成 list 大概花费了 4 ~ 6ms 左右,比起之前动辄需要 5 ~ 6s,足足快了 1000 多倍!!!


c5826fd4a758463390413a173ee0899d.gif


先别急


等等,我们上次说了是因为把太多数据都放到实例上,特别是两个大 map,才导致生成实例太过于耗时,那真的是这样吗?
大家可以看看 demo 的第三个 tab,相比第一个 tab 只是注释了这行代码:


image.png


让我们看看结果咋样


2023-03-01 21.37.22.gif


可以看到生成 list 只是耗费了 1+ms,比优化后的代码还少了 3+ms 左右,那么,真正的根源是就肯定是makeAutoObservable这个函数了


makeAutoObservable 做了什么


我们上面说到,mobx 是个响应式的数据管理库,其将数据都转换为 Observable,无论数据多么深层,这个我们可以 log 下实例看看


image.png


会发现 map 上每个属性都变成一个个的 proxy(因为这里我们用了 mobx6),那如果我两个 map 都很大且很深层的话,遍历处理每个属性加起来后就很耗费时间,导致每次生成一个实例都耗费了将近 50ms!!


所以,我们上面所说的在this 上挂载了太多的数据只是直接原因,但根本原因在于 makeAutoObservable,当然,正是这两者的结合,才导致了代码如此的耗时。


总结


我们一开始以为是渲染太多数据导致页面卡顿,然而实际上是生成每个 DataController 实例导致的耗时。


我们开始分析原因,发现是因为每个实例挂了太多的数据,所以优化方案是将两个大对象 map 放到类的静态属性 maps 上,通过 parseId 来映射到对应的数据,从而将速度优化了 1000+倍。


然后我们继续深入,发现实例挂载太多数据只是表面的原因,根本原因还是在于 mobx 的 makeAutoObservable 对数据的每个属性都转换为 proxy 结构,让其变成响应式,而对象数据又很大,导致太过于耗时。


还有一点要注意的就是,原先的代码忽略了 ts 的类型限制,因为 sku_map、price_map 实际上不在入参的限制范围内(实际代码还不只多传了这两个 map),所以确保 ts 类型的正确性,也非常有利于规避潜在的 bug。


同时,如何写好每个 mobx store 也是我们应该深入思考的,多利用好 private、static,get 等等属性和方法,哪些应该放到实例上去,哪些应该放到静态属性上,哪些是 public、哪些是 static 的,都应该考虑好。


最后


当我优化代码后,就马上跟同事吹嘘:


image.png


看看,这是人说的话吗!!


但是,我突然想到:诶,这不是每次产品、测试、UI 说这里太慢、这里少 1px、这里交互有问题的时候,我不也是说:有啥问题?又不是不能跑吗?


image.png


但嘴上是这样说着,然而实际上私下却偷偷看为何会这样(不可能,绝对不可能,我的代码天下无敌),正所谓,嘴上说着不要,心里却很诚实。


QQ20230225-205345-HD.gif


好了,今天的故事就分享到这里,各位看官大大觉得可以的话,还请给个赞,谢谢~


作者:暴走老七
来源:juejin.cn/post/7204100122887536700
收起阅读 »

删库跑路后的现场还原

数据库是公司重要资产,在此类重要资产平台上,尤其是重要操作,应该保持敬畏心。 数据库被删了?可怎么证明是某某某删了数据库?或者根本都不知道谁删除了数据库,又没抓现行,该怎么办? 正文 第一步 证据先行,有录屏有真相 删库动作的录制回放 录制回放让团队能清楚...
继续阅读 »

数据库是公司重要资产,在此类重要资产平台上,尤其是重要操作,应该保持敬畏心。



数据库被删了?可怎么证明是某某某删了数据库?或者根本都不知道谁删除了数据库,又没抓现行,该怎么办?



正文


第一步 证据先行,有录屏有真相


删库动作的录制回放


录制回放让团队能清楚了解和学习用户路径和行为,其中对于关键页面诸如删除等高价值的动作,可以开启录制回放功能,比如下图,就是某一用户某一行为的屏幕录制情况。
tutieshi_640x360_15s.gif


删库成功的页面截图


针对录制回放的内容,可以看到用户点击删除按钮这一高风险行为。


image.png


第二步 录屏背后是详细的用户访问数据


rum中查看用户会话


在用户使用产品的那一刻,用户体验就开始了。用户体验数据洞见很多,加购物车、下单、视频播放等高价值按钮背后的性能等相关数据和业务息息相关:比如下图展示了成功删除数据库的提示弹窗。


image.png


发现用户登录并浏览数据库平台的详细信息


每一次用户会话中,记录着用户的来源、访问时长,以及用户行为,这里面就包含对页面的加载(切换)和按钮点击。下图便是一个用户登录数据库管理平台后,0-20分钟以内的用户旅程
image.png


发现用户点击删除库的按钮的详细信息


链接或者按钮背后隐藏着逻辑和用户动机,充分利用能转化良好化学反应。反之,在用户旅程中,也能看到用户点击删除数据库的按钮的行为,如下图所示:
image.png


点击按钮成功触发删除数据库的接口请求


为了明白请求或行为在系统中的'前世今生',链路追踪已经成了必备,在下图中,用户行为触发的请求的完整上下文就被“追踪”到了:
image.png


后台处理接口请求


在产品使用流畅度中,丝滑不一定是卖点,但“慢”肯定是用户卡点,通过全链路链路追踪综合分析,可以得到请求耗时占比,进一步定位卡在哪里(前端、后端、网络),详情见下图:
image.png


第三步 成功删库的链路详情


前后端加上数据库形成可视化闭环,构成的业务链路,能够高效定位业务情况,下图能完整看出一次删库的效率:
image.png


第四步 自动关联删库日志


全链路追踪能锦上添花的要数自动关联日志的功能了,下图能清晰看到链路所产生的日志:
image.png


以上我们便通过用户删库的录屏用户行为链路信息、操作日志等,还原了删库现场。当然,其中涉及了很多技术内容,下面整理了其中一些常见问题


相关技术点的FAQ :


1. 如何针对关键步骤开启录制回放功能


删除按钮 为例 ,用户点击删除按钮后 可以开启 录制回放功能


  function deleteDB(){
showConfirm(deleteDB).then((yes,no)=>{
if(yes)=>[ datafluxRum.startSessionReplayRecording();]
})

}

2. 录制回放是否涉及密码等用户私密信息


出于数据安全考虑,任何情况下,以下元素都会被屏蔽:



  • password、email 和 tel 类型的输入

  • 具有 autocomplete 属性的元素,例如信用卡号、到期日期和安全代码


3 . 如何将 用户行为后端 进行关联


前后端关联通过http请求头的traceID进行关联,开启rumapm简单设置即可实现关联。
rum中仅仅需要在启动时注明后端地址。以本文的后台管理系统为例,需要在启动rum时开启allowTracingOrigin这个字段,配置见下图


image.png


可以参照如下代码


 window.DATAFLUX_RUM &&
window.DATAFLUX_RUM.init({
applicationId: "node_mongo_admin_express",
datakitOrigin: "http://mongodb_admin:9529", // 协议(包括://),域名(或IP地址)[和端口号]
env: "production",
service:"node_mongo_admin_express",
version: "1.0.0",
trackInteractions: true,
allowedTracingOrigins: ["http://mongodb_admin:1234"], // 非必填,允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin,也可以是是正则
sessionSampleRate: 100,
sessionReplaySampleRate: 100,
defaultPrivacyLevel: 'allow',
});
window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording()

4. 如何自动将采集的日志链路信息进行关联


需要将traceID注入日志,进行切分,就可以实现链路日志的关联。本文仅用一行进行了关联,代码见下图。


image.png


5. 如何从后端下钻到数据库


仅需要接入追踪工具即可实现下图全链路追踪,本文后端使用node的express框架,链路追踪展示图如下:


image.png


其中服务调用拓扑关系如下,也就是web端访问后端(node技术栈)的,后端调用数据库(mongo


image.png


6. 后端支持java吗?


支持javapythongo以及.net等,接入的学习成本是有的,整体对于开发而言,接入配置问题不大。


7. 前端的技术架构或技术栈有兼容性吗?


目前不论是mpa还是spa,不论是ssr、还是csr,亦或是vuereactjQuery等,都支持,但针对不同架构,需要选择接入的场景。


8. 还支持哪些场景?


支持的场景很多,比如:



  • 线上告警的故障定位

  • 开发、测试环境的bug调试

  • 用户行为的追踪与回放

  • 性能瓶颈的查找与性能提升


9.有关请求耗时占比,能更详细的举个例子吗?


我们以后端为例,看到db_create这个接口:


image.png


这些数据是如何统计得出的呢?感兴趣的同学可以查看下图:
image.png


其中每个部分的计算原理如下:


Queueing(队列)耗时 = Duration - First Byte - Download  
First Byte(首包)耗时 = responseStart - domainLookupStart
Download(下载)耗时 = responseEnd - responseStart


更深入的技术内容,我将在今后的文章继续为大家整理。


综上所述


可观测性切入点很多,聪明的团队会观测;可观测性是研发质量的试金石,是企业城墙的基石,用好可观测性,能更多的了解系统,扩宽业务。



本文由观测云高级产品技术专家刘刚和交付工程师 苏桐桐共同撰写,其中所有截图及数据,均来自模拟数据,此外也欢迎一起探讨技术和业务。



参考词汇



  • adminMongo:mongo数据库管理平台

  • rum: 真实用户体验

  • apm: 应用性能管理

  • metrics:指标

  • logs:日志

  • trace:链路


作者:Yestodorrow
来源:juejin.cn/post/7207787191622893624
收起阅读 »

2023和自己聊聊

自我质疑,他人质疑前几天约了面试,被面试官问了一个问题,你做这么久的开发,有哪些技术沉淀呢,或者自己擅长哪些呢,我突然楞了一下,其实自己也想过这个问题,结论是啥也不是,很一般。给面试官说目前 vue 用的比较久,做过不少项目,对这个比较擅长一点吧,从开始做项目...
继续阅读 »

自我质疑,他人质疑

前几天约了面试,被面试官问了一个问题,你做这么久的开发,有哪些技术沉淀呢,或者自己擅长哪些呢,我突然楞了一下,其实自己也想过这个问题,结论是啥也不是,很一般。给面试官说目前 vue 用的比较久,做过不少项目,对这个比较擅长一点吧,从开始做项目都是自己摸索,从最开始的 vue2 到现在的 vue3 和 react 项目技术框架是我负责主导的,然后也会帮组员处理一些问题之类的。但是我从你的面试结果来看,多数情况下是了解或者知道某个知识点的简单使用,但细节的问题就看你支支吾吾的,应该是理解不到位吧。有什么比较好的项目,或者攻克了哪些技术难点可以做下分享吗。我沉思了一下,好像觉得没什么值得去展示的,总觉得自己的项目很平常,就算是平常遇到一些问题,很快就能解决,不是自己厉害,而是实在是项目简单而已。那你为啥觉得你能帮助别人解决问题,帮助其他组员成长呢,我陷入了无限的沉思...。

工作经历

  1. 第一家是一个外包公司,算是用了包装的简历蒙混进去的,结果是差一点给自己干离职,压力太大了,真的是s什么都不会,感觉实在是扛不下来了,于是在项目交付的前三天说自己家里有事,提了辞职。结果没辞成,老板说你忙完了再回来就行,你的工作我先让其他同事接替你。(当时也去了新的面试,但是结果可想而知)于是在请假这两周中迅速恶补,像是要奔赴战场,硬着头皮回去了,在那个接替我的同事的帮助下终于开心的(提心吊胆,每天想着二次辞职,又碍于没有脸面再提,咬咬牙终于坚持了下来,整理了八百字的小作文描述当时的过程,后来想想还是不写出来了吧)完成了第一个jsp版的项目。

  2. 后来公司接了一个新的项目,做一个后台管理系统,让我来做前端,说写好页面给到java那边,让他们来开发,还是用jsp那套。当时心想着是用 vue 脚手架搭建,来做前后端分离模式,但是我一点经验也没有,问了我那个同事,她也没这做过这种模式的,她坚持自己的意见是说用老一套,类似 jsp 那样。毕竟她比我有经验一些,那就听她的先做下试试,但心里还是想着用前后端分离来做,没人指导,只能自己去摸索,最后还是找我领导商量前后端分离模式开发。他之前做 java 的,对前端也不懂,问了我前后端分离的东西,我也是现学现卖,告诉他怎么好怎么好,但是我之前没用过,是有试错成本的,他问了我这些技术目前成熟吗,我说好多公司都开始用了,以后这个是主流。在我的忽悠下同意了这个方案。当然一切都没那么顺利,也是一步一个坑,一步步趟了过来。也感谢我这个领导,在五月份我准备辞职回去毕业答辩时帮我申请了两周的假,顺利毕业。在这个后台管理项目如期上线以后,我也终于松了一口气,没有辜负领导的信任。也感谢当时的自己坚持了自己的想法,虽然过程很难,但是也扛了下来。

  3. 慢慢的发现遇到了技术瓶颈,最开始的自己像一个海绵,进入公司后一直在吸水给自己充电,后来充电越来越慢,甚至出现了漏电的情况。于是准备跳槽,在这个外包公司离职后进入了外派的这家公司,等于从乙方进了甲方,等于好像并没有跳。日复一日的上班,加班,下班好像做了很多,但是又好像什么都没做,整天做一些表单,表格的增删改查,没什么长进,差不多一年。于是准备第二次跳槽。然后准备过完年开始第二次跳槽。就遇上了疫情,然后又呆了一段时间,准备再过了年跳槽,然后在已经开始谈 offer ,准备再多面几家时,上海又开始了疫情,直接封了三个月,那个 offer 也就不了了之了。去年年底约了些面试,都不太理想,多数都是外包,然后就到了现在。想想还是因为自己不够坚决吧。

精神内耗

一方面觉得自己不够优秀,想要去努力,另一个方面在学习时发现很多东西太难了,然后就放弃了。于是在一边想要躺平,一边想要好好学习的的状态下无限循环。然后开始了自我怀疑,自己适合做这方面的工作吗,自己做这方面有优势吗,自己有什么技术上的优点值得拿出来说说吗,好像都没有。一次次的面试,一次次的没了下文,然后都把原因归结于自己不够优秀。于是又进入了,那为啥不好好学,我试着去学了,但是学不进去,学不会的轮循怪圈。

反思与醒悟

2023年了,想着自己要去改变些什么,但是又不知如何去做,之前买了不少的书,但看的也就几本其他都在吃灰。看朋友圈有人在微信读书,于是也试着看一些书看解决一下心理浮躁的问题,不能这么浑浑噩噩下去,不然真就废了。工作,生活,情感压力感觉都快抑郁了。直到最近看了大佬分享的书,才开始有所醒悟,是自己太急于求成了。太想在刚投入一点精力就要看到成果了,平常是看了不少学习的资料,但也都是在自己舒适区内,一旦遇到难的就告诉自己肯定学不会,所以就放弃了,不会将难题碎片化,一次解决一个小问题,爬山也不都是一步一步走上去的嘛。学会去接受自己的平凡,但是不能以自己是个普通人为理由而不去努力。实践是验证真理的唯一标准,所以我们在学习时也更要去思考,去试着用自己的话看能不能书写出来,讲给别人听,看对方能听明白不。如果只是以为自己去学习了,就万事大吉了,但过段时间可能就会忘记了,这一点我最近特别有体会。就拿写的两篇 vue 的基础知识点来说,以为自己很容易就能写出来,但写的时候发现没那么容易的。有的地方可能还需要再查下资料才能搞明白,不过也加深了对这些东西的理解,如果在帮助自己的同时能帮助别人就更好了。

一起共勉

书上的几个观点觉得很有用,分享给大家,如果目前有小伙伴也有我上面的焦虑
1. 试着跟自己和解,停止精神内耗,接受自己的普通,但不能因此而止步不前,摆烂
2. 在自己跳一跳就能够得着的地方做拉伸,在舒适区和困难区要么无所事事,要么备受打击
3. 不要急于求成,罗马不是一天建成了,只管按照自己的节奏去努力,事实会告诉你答案
4. 输入的同时也要去输出,形成闭环,实践是验证真理的唯一标准,试着去做到知行合一

作者:南岸月明
来源:juejin.cn/post/7207841934278344762

收起阅读 »

前端按钮生成器!要的就是效率!

web
大家好,我是前端实验室的老鱼!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料等 | 副业赚钱~ 「前端实验室」 专注分享 Github、Gitee等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。 按钮是我...
继续阅读 »

大家好,我是前端实验室的老鱼!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料等 | 副业赚钱~


「前端实验室」 专注分享 Github、Gitee等开源社区优质的前端项目、前端技术、前端学习资源以及前端资讯等各种有趣实用的前端内容。


按钮是我们页面开发中必不可少的一部分。在平常开发中,我们常常一遍又一遍的重复写着各种各样的按钮样式。


这些简单,但机械重复的工作是否影响到你的工作效率了呢?


今天为大家推荐一个按钮生成的网站。100+款按钮样式和响应方式供你挑选!图片准备好了吗?一起来看下吧!


3D款


平面3D效果的按钮。图片点击按钮,自动将按钮样式复制到剪切板,直接粘贴即可使用。


.css-button-3d--sky {
  min-width130px;
  height40px;
  color#fff;
  padding5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius5px;
  border: none;
  background#3a86ff;
  box-shadow0 5px #4433ff;
}
.css-button-3d--sky:hover {
  box-shadow0 3px #4433ff;
  top1px;
}
.css-button-3d--sky:active {
  box-shadow0 0 #4433ff;
  top5px;
}

渐变款


渐变的按钮平常使用不多,但就怕产品经理提这样的需求。图片


阴影边框


按钮带点阴影边框,在大师兄的项目中算是基本需求了。因为生硬的边框总会缺乏点柔和的美感。图片拷贝个代码来看看。


.css-button-shadow-border--sky {
  min-width130px;
  height40px;
  color#fff;
  padding5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius5px;
  border: none;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
  background#4433ff;
}
.css-button-shadow-border--sky:hover {
  background-color#3a86ff;
}
.css-button-shadow-border--sky:active {
  top2px;
}

这篇幅,让我自己一行代码一行代码的敲,确实有点费时间。还是直接拷贝来得快。


各种hover状态


浮光掠影的效果图片镂空效果图片滑动效果图片增加其他显示图片


其他


按钮的样式和交互功能,对大家来说都是很简单的操作。但重复的编写这些代码会浪费些许时间。

本文分享了各种常用的各种按钮形式,对于有自定义按钮需求的小伙伴可以作参考。



网站地址

markodenic.com/tools/butto…



写在最后


我是前端实验室的老鱼!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料、副业等~


喜欢的朋友,点赞收藏支持一下,也欢迎交流~



作者:程序员老鱼
来源:juejin.cn/post/7202907707472609337
收起阅读 »

内卷年代,是该学学WebGL了

web
前言 大部分公司的都会有可视化的需求,但是用echarts,antv等图表库,虽然能快速产出成果,但是还是要知道他们底层其实用canvas或svg来做渲染,canvas浏览器原生支持,h5天然支持的接口,而svg相比矢量化,但是对大体量的点的处理没有canva...
继续阅读 »

前言


大部分公司的都会有可视化的需求,但是用echarts,antv等图表库,虽然能快速产出成果,但是还是要知道他们底层其实用canvas或svg来做渲染,canvas浏览器原生支持,h5天然支持的接口,而svg相比矢量化,但是对大体量的点的处理没有canvas好,但是可以操作dom等优势。canvas和svg我们一般只能做2d操作,当canvas.getContext('webgl')我们就能获取webgl的3d上下文,通过glsl语言操作gpu然后渲染了。理解webgl,可以明白h5的很多三维的api底层其实都是webgl实现,包括对canvas和svg也会有新的认知。


canvas和webgl的区别


canvas和webgl都可以做二维三维图形的绘制。底层都会有对应的接口获取。cancvas一般用于二维ctx.getContext("2d"),三维一般可以通过canvas.getContext('webgl')


窥探WebGL


理解建模


如果你有建模软件基础的话,相信3dmax、maya、su等软件你一定不会陌生,本质其实就是点、线、面来组成千变万化的事物。打个比方球体就是无数个点连成线然后每三根线形成面,当然有常见的四边形,其实也是两个三边形组成,为什么不用四边形,因为三边形更稳定、重心可计算、数据更容易测算。


所以核心也就是点、线、三角面


了解WebGL


WebGL可以简单理解为是openGL的拓展,让web端通过js可以有强大的图形处理能力。当然为了与显卡做交互你必须得会glsl语言。


GLSL


glsl着色器语言最重要的就是顶点着色器和片元着色器。简单理解为一个定位置一个添颜色。


简单绘制一个点


webgl会有大量的重复性前置工作,也就是创建着色器 -> 传入着色器源码 -> 编译着色器 -> 创建着色器程序 -> 绑定、连接、启用着色器 -> 可以绘制了!


一般而言我们是不会重复写这个东西,封装好了直接调用就行。


function initShader (gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
const vertexShader = gl.createShader(gl.VERTEX_SHADER);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE);
gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);

//编译着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

//创建程序对象
const program = gl.createProgram();

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);
gl.useProgram(program);

return program;
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./initShader.js"></script>
</head>

<body>
<canvas id="canvas" width="300" height="400">
不支持canvas
</canvas>
</body>

<script>
const ctx = document.getElementById('canvas')
const gl = ctx.getContext('webgl')

//着色器: 通过程序用固定的渲染管线,来处理图像的渲染,着色器分为两种,顶点着色器:顶点理解为坐标,片元着色器:像素

//顶点着色器源码
const VERTEX_SHADER_SOURCE = `
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
gl_PointSize = 10.0;
}
`
//片元着色器源码
const FRAGMENT_SHADER_SOURCE = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`
//创建着色器
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

//执行绘制
gl.drawArrays(gl.POINTS, 0, 1)
//gl.drawArrays(gl.LINES, 0, 1)
//gl.drawArrays(gl.TRIANGLES, 0, 1)

</script>

</html>

绘制效果如下:


image.png


相信看了上面有段代码会有疑惑


image.png


gl_position代表坐标,vec4就一个存放个4个float的浮点数的容量,定义坐标, 分别对应x、y、z、w,也就是三维坐标,但是w就等于比例缩放xyz而已,一般在开发中,我们的浏览器的坐标要跟这个做个转换对应上,gl_POintSize是点的大小,注意是浮点数


image.png


gl_flagColor渲染的像素是红色,是因为这类似于比例尺的关系需要做个转换, (R值/255,G值/255,B值/255,A值/1) -》(1.0, 0.0, 0.0, 1.0)


绘制动态点


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./initShader.js"></script>
</head>

<body>
<canvas id="canvas" width="300" height="400">
不支持canvas
</canvas>
</body>

<script>
const canvas = document.getElementById('canvas')
const gl = canvas.getContext('webgl')

const VERTEX_SHADER_SOURCE = `
precision mediump float;
attribute vec2 a_Position;
attribute vec2 a_Screen_Size;
void main(){
vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
position = position * vec2(1.0, -1.0);
gl_Position = vec4(position, 0, 1);
gl_PointSize = 10.0;
}
`

const FRAGMENT_SHADER_SOURCE = `
precision mediump float;
uniform vec4 u_Color;
void main() {
vec4 color = u_Color / vec4(255, 255, 255, 1);
gl_FragColor = color;
}
`

//前置工作,着色器可以渲染了!
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

//获取glsl的变量对应的属性做修改
var a_Position = gl.getAttribLocation(program, 'a_Position');
var a_Screen_Size = gl.getAttribLocation(program, 'a_Screen_Size');
var u_Color = gl.getUniformLocation(program, 'u_Color');
gl.vertexAttrib2f(a_Screen_Size, canvas.width, canvas.height); //给glsl的属性赋值两个浮点数

//给个默认背景颜色
gl.clearColor(0, 0, 0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

//存储点击位置的数组。
var points = [];
canvas.addEventListener('click', e => {
var x = e.pageX;
var y = e.pageY;
var color = { r: Math.floor(Math.random() * 256), g: Math.floor(Math.random() * 256), b: Math.floor(Math.random() * 256), a: 1 };
points.push({ x: x, y: y, color: color })

gl.clearColor(0, 0, 0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

for (let i = 0; i < points.length; i++) {
var color = points[i].color;
gl.uniform4f(u_Color, color.r, color.g, color.b, color.a);
gl.vertexAttrib2f(a_Position, points[i].x, points[i].y);
gl.drawArrays(gl.POINTS, 0, 1);
}
})
</script>

</html>

vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0; 注意这里的坐标转换,从canvas转为ndc坐标,其实就是看范围就行,[0, 1] -> [0, 2] -> [-1, 1]。上面总体的流程总结下就是,定义着色器,定义glsl着色器源码 -> 通过api获取canvas的信息转换坐标系 -> 监听点击事件传递变量到glsl中 -》通过pointer缓存 -> drawArrays绘制。但是这种方法,很明显有大量的重复渲染,每次遍历都要把之前渲染的重复执行。


大致效果


动画.gif


总结


通过简单的webgl入门,已经有了初步的认知,大致的流程为:着色器初始化 -> 着色器程序对象 -> 控制变量 -> 绘制,为了更好的性能,后面会使用缓冲区来解决重复渲染的问题,包括我们的顶点不会一个一个设置,一般是会涉及到矩阵的转换,如平移、缩放、旋转、复合矩阵。


作者:谦宇
来源:juejin.cn/post/7207417288705458231
收起阅读 »

聊聊自己思想怎么改变的

框架之争 xx 框架牛逼,xx 框架写起来舒服,xx 框架做不了大业务,xx 框架坑多,xx框架抄袭 xx 框架。 读者应该看到过类似的言论,不知道读者怎么想。反正我是觉得很没意思……((哥我是SB) 管你什么蛇皮框架,不都得老老实实的给编译成 js 代码给解...
继续阅读 »

框架之争


xx 框架牛逼,xx 框架写起来舒服,xx 框架做不了大业务,xx 框架坑多,xx框架抄袭 xx 框架。


读者应该看到过类似的言论,不知道读者怎么想。反正我是觉得很没意思……((哥我是SB)


管你什么蛇皮框架,不都得老老实实的给编译成 js 代码给解析器(v8)执行?(wasm另说喽)


双向绑定,虚拟DOM 等等随便一搜答案一堆堆的,但是读者是否有自己去了解过内部的具体实现呢?是否又去尝试将这个思想运用到业务上呢?


有?那么你不用看我这篇流水账了。


没有?那么思考下你看这些做咩?


为了应付面试?然后看完就忘了对吧,下次面试继续看……你这只是为了应付面试官骗自己。


是时候做出改变了,朋友……


怎么改变


我不到哇,我真不知道……我只能把自己的突破经验告诉你。至于读者是否能够摆脱当前的困境,emmmm 随缘把……


1676353480450.png


首先我们先约定一件事情,读者要记住:你是开发者,不是前端开发者,后端开发者更不是客户端开发者。


想起来以前学习 node 的时候,非要找 node后端的代码来练手。node 什么不能写,为什么我非要写 node 后端,为什么要局限于 web 端?我可以用 nodecli 工具,也可以用来写桌面客户端 electron


所以不要陷入身份认知,记住你的身份你是开发者!


不要像我,我学会了 node,看到大家都在用 node 写后端,就认为我只能用 node 写后端!


思想不要局限于某一门语言,某个开发框架,格局打开!


编程思想


我的思想改变,是在去年的3月份,当时在看《代码整洁之道》一书。


当时看到代码规范一章节,正想着吐槽作者这都是老生常谈的问题了,怎么还提出来一章讲。


突然想起来,这本书第一版是 09 年出版的。而我是在 22 年看的这本书, 13 年了这本书中的内容居然还没过时!


1676370379886.png


当时我想明白了,我应该学习代码的思想,而不是框架,框架会层出不穷。


框架思想


angularjs(1.x版本)读者应该听说过把,最初发布时间2009年,14年前就有"双向绑定","template"组件……


2016年 angular2 发布,很多核心理念都来至 angularjs,还带来新的机制 NgModule


一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。


Angular 的前世今生


最恐怖的是,这个 NgModule 机制还可以用来做后端 Nestjs


不管是 14年前的双向绑定,组件化,还是16年的 NgModule 开发思想其实一直都没怎么改变。


今年流行 xx 框架,过两年则又会流行新的 xx 框架。


与其花大量的时间去研究框架 xx面试题,不如去阅读框架的源码,自己去读去理解框架,看看框架中有什么奇技淫巧,从而运用到自己代码上,给自己带来真正的效益。而不是死记硬背,背完应付面试。


tips: 写代码最难的不是业务,而是怎么设计架构。业务会不停的变化,架构需要应付不停变动的业务。


读源码


多读源码!多读源码!多读源码!


读什么源码都可以,读的时候可以带着疑问去读。


比如说我想知道 vite 是怎么处理 vuetemplate 是怎么解析的。


要么查资料,要么自己翻源码。


vite 需要这个 vite-plugin-vue 插件做 vue 支持,去翻这个源码。发现这个插件里头用了 vue/compiler-sfc 这个包的 compileTemplate 方法,最后找到 compiler-dom 包的 compile 方法(人麻了……)


1676439918093.png


克服了重重困难总算找到 vite处理 vuetemplate 的代码了,仿佛跟着唐长老去去了一波西经。


其实结果并不怎么重要,重要的是整个过程。




  1. 我先去找了 vite-plugin-vue。这是一个知识点 vite 插件




  2. vite-plugin-vue里使用了 vue/compiler-sfc,我又要去 vue 源码里找东西。第二个知识点 vue 源码。




  3. 找到了 compile 第三个知识点 怎么处理 template 的。




在这个过程中我列举了我找到的三个知识点,就算我不去对前两个知识点深入研究,但寻找结果的过程已经无形中都增加了我的知识储备。


那么我深入探究细节呢?


这个问题留给读者把……


推荐资料




  1. 代码整洁之道




  2. HTTP权威指南




  3. 设计模式:可复用面向对象软件的基础




  4. JavaScript设计模式与开发实践




  5. 架构整洁之道




有读者可能要吐槽了,你这怎么推荐的有 Java 代码的书……


还记得上文说的一句吗?


思想不要局限于某一门语言,某个开发框架,格局打开!


我们要学的是"思想"。


作者:MartinYin
链接:https://juejin.cn/post/7200364375148707900
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Disruptor 高性能队列原理浅析

介绍 Disruptor 是英国外汇交易公司 LMAX 开发的一个高性能队列,研发的初衷是解决内存队列的延迟问题(在性能测试中发现竟然与 I/O 操作处于同样的数量级)。基于Disruptor 开发的系统单线程能支撑每秒 600 万订单,2010 年在 QCo...
继续阅读 »

介绍


Disruptor 是英国外汇交易公司 LMAX 开发的一个高性能队列,研发的初衷是解决内存队列的延迟问题(在性能测试中发现竟然与 I/O 操作处于同样的数量级)。基于Disruptor 开发的系统单线程能支撑每秒 600 万订单,2010 年在 QCon 演讲后,获得了业界关注。2011 年,企业应用软件专家 Martin Fowler 专门撰写长文介绍。同年它还获得了 Oracle 官方的 Duke 大奖。


本文主要参考它 2011 年的论文 《LMAX Disruptor: High performance alternative to bounded queues for exchanging data between concurrent threads》还结合了美团技术团队对它分析的文章。论文中文翻译参考了肥兔子爱豆畜子翻译的中文版。


这里所说的队列是系统内部的内存队列,而不是Kafka这样的分布式队列。


许多应用程序依靠队列在处理阶段之间交换数据。我们的性能测试表明,当以这种方式使用队列时,其延迟成本与磁盘(基于RAID或SSD的磁盘系统)的IO操作成本处于同一数量级都很慢。如果在一个端到端的操作中有多个队列,这将使整个延迟增加数百微秒。


测试表明,使用 Disruptor 的三阶段流水线的平均延迟比基于队列的同等方法低 3 个数量级。此外,在相同的配置下,Disruptor 处理的吞吐量约为 8 倍。


并发问题


在本文以及在一般的计算机科学理论中,并发不仅意味着两个以上任务同时并行发生,而且意味着它们在访问资源时相互竞争。争用的资源可以是数据库、文件、socket,甚至是内存中的一个位置。


代码的并发执行涉及两件事:互斥和内存可见性。互斥是关于如何管理保证某些资源的独占式使用。内存可见性是关于控制内存更改何时对其他线程可见。如果你可以避免多线程竞争的去更新共享资源,那么就可以避免互斥。如果您的算法可以保证任何给定的资源只被一个线程修改,那么互斥是不必要的。读写操作要求所有更改对其他线程可见。但是,只有争用的写操作需要对更改进行互斥。


在任何并发环境中,最昂贵的操作是争用写访问。要让多个线程写入同一资源,需要复杂而昂贵的协调。通常,这是通过采用某种锁策略来实现的。


但是锁的开销是非常大的,在论文中设计了一个实验:



  • 这个测试程序调用了一个函数,该函数会对一个 64 位的计数器循环自增 5 亿次。

  • 机器环境:2.4G 6 核

  • 运算: 64 位的计数器累加 5 亿次



单线程情况下,不加锁的性能 > CAS 操作的性能 > 加锁的性能。


在多线程情况下,为了保证线程安全,必须使用 CAS 或锁,这种情况下,CAS 的性能超过锁的性能,前者大约是后者的 8 倍。


保证线程安全一般使用锁或者原子变量。


采取加锁的方式,默认线程会冲突,访问数据时,先加上锁再访问,访问之后再解锁。通过锁界定一个临界区,同时只有一个线程进入。


原子变量能够保证原子性的操作,意思是某个任务在执行过程中,要么全部成功,要么全部失败回滚,恢复到执行之前的初态,不存在初态和成功之间的中间状态。例如 CAS 操作,要么比较并交换成功,要么比较并交换失败。由 CPU 保证原子性。


通过原子变量可以实现线程安全。执行某个任务的时候,先假定不会有冲突,若不发生冲突,则直接执行成功;当发生冲突的时候,则执行失败,回滚再重新操作,直到不发生冲突。


CAS 操作是一种特殊的机器代码指令,它允许将内存中的字有条件地设置为原子操作。比如对于前面的“递增计数器实验”例子,每个线程都可以在一个循环中自旋,读取计数器,然后尝试以原子方式将其设置为新的递增值。



如图所示,Thread1 和 Thread2 都要把 Entry 加 1。若不加锁,也不使用 CAS,有可能 Thread1 取到了myValue=1,Thread2 也取到了 myValue=1,然后相加,Entry 中的 value 值为 2。这与预期不相符,我们预期的是 Entry 的值经过两次相加后等于3。


CAS 会先把 Entry 现在的 value 跟线程当初读出的值相比较,若相同,则赋值;若不相同,则赋值执行失败。一般会通过 while/for 循环来重新执行,直到赋值成功。CAS无需线程进行上下文切换到内核态去执行,在用户态执行了 CPU 的原语指令 cmpxchg,CAS 相当于在用户态代码里边插入了一个 cmpxchg 指令,这样 CPU 一直在用户态执行,执行到 cmpxchg 指令就开始执行内核态内存空间的操作系统的代码。执行指令要比上下文切换的开销要小,所以 CAS 要比重量级互斥锁性能要高。(用户态和内核态没有切换)


如果程序的关键部分比计数器的简单增量更复杂,则可能需要使用多个CAS操作的复杂状态机来编排争用。使用锁开发并发程序是困难的;而使用 CAS 操作和内存屏障开发无锁算法要更加复杂多倍,而且难于测试和证明正确性。


内存屏障和缓存问题


出于提升性能的原因,现代处理器执行指令、以及内存和执行单元之间数据的加载和存储都是不保证顺序的。不管实际的执行顺序如何,处理器只需保证与程序逻辑的顺序产生相同的结果即可。这在单线程的程序中不是一个问题。但是,当线程共享状态时,为了确保数据交换的成功与正确,在需要的时候、内存的改变能够以正确的顺序显式是非常重要的。处理器使用内存屏障来指示内存更新顺序很重要的代码部分。它们是在线程之间实现硬件排序和更改可见性的方法。


内存屏障(英语:Memory barrier),也称内存栅栏,内存栅障,屏障指令等,是一类同步屏障指令,它使得 CPU 或编译器在对内存进行操作的时候, 严格按照一定的顺序来执行, 也就是说在内存屏障之前的指令和之后的指令不会由于系统优化等原因而导致乱序。


大多数处理器提供了内存屏障指令:



  • 完全内存屏障(full memory barrier)保障了早于屏障的内存读写操作的结果提交到内存之后,再执行晚于屏障的读写操作。

  • 内存读屏障(read memory barrier)仅确保了内存读操作;

  • 内存写屏障(write memory barrier)仅保证了内存写操作。


现代的 CPU 现在比当前一代的内存系统快得多。为了弥合这一鸿沟,CPU 使用复杂的高速缓存系统,这些系统是有效的快速硬件哈希表,无需链接。这些缓存通过消息传递协议与其他处理器缓存系统保持一致。此外,处理器还具有“存储缓冲区”(store buffer/load buffer,比 L1 缓存更靠近 CPU,跟寄存器同一个级别,用来当作 CPU 与高速缓存之间的缓冲。毕竟高速缓存由于一致性的问题也会阻塞)来缓冲对这些缓存的写入,以及作为“失效队列”,以便缓存一致性协议能够在即将发生写入时快速确认失效消息,以提高效率。


这对数据意味着,任何值的最新版本在被写入后的任何阶段都可以位于寄存器、存储缓冲区、L1/L2/L3 缓存之一或主内存中。如果线程要共享此值,则需要以有序的方式使其可见,这是通过协调缓存一致性消息的交换来实现的。这些信息的及时产生可以通过内存屏障来控制。


L1、L2、L3 分别表示一级缓存、二级缓存、三级缓存,越靠近 CPU 的缓存,速度越快,容量也越小。所以 L1 缓存很小但很快,并且紧靠着在使用它的 CPU 内核;L2 大一些,也慢一些,并且仍然只能被一个单独的 CPU 核使用;L3 更大、更慢,并且被单个插槽上的所有 CPU 核共享;最后是主存,由全部插槽上的所有 CPU 核共享。



当 CPU 执行运算的时候,它先去 L1 查找所需的数据、再去 L2、然后是 L3,如果最后这些缓存中都没有,所需的数据就要去主内存拿。走得越远,运算耗费的时间就越长。所以如果你在做一些很频繁的事,你要尽量确保数据在 L1 缓存中。



另外,线程之间共享一份数据的时候,需要一个线程把数据写回内存,而另一个线程访问内存中相应的数据。



如果你用一种能被预测的方式访问内存的话,CPU 可以预测下个可能访问的值从内存先缓存到缓存中,来降低下次访问的延迟。但是如果是一些非顺序的、步长无法预测的结构,让 CPU 只能访问内存,性能上与访问缓存差很多。所以为了有效利用 CPU 高速缓存的特性,我们应当尽量使用顺序存储结构。


队列的问题


队列通常使用链表或数组作为元素的底层存储。如果允许内存中的队列是无界的,那么对于许多类的问题,它可以不受约束地增长,直到耗尽内存而达到灾难性的后果,当生产者超过消费者时就会发生这种情况。无界队列在可以在生产者可以保证不超过消费者的系统中使用,因为内存是一种宝贵的资源,但是如果这种假设不成立,而队列增长没有限制,那么总是有风险的。为了避免这种灾难性的结果,队列的大小通常要受到限制(有界)。要使队列保持有界,就需要对其底层选择数组结构或主动跟踪其大小。


队列的实现往往要在 head、tail 和 size 变量上有写争用。在使用时,由于消费者和生产者之间的速度差异,队列通常总是接近于满或接近于空。它们很少在生产和消费速率均衡的中间地带运作。这种总是满的或总是空的倾向会导致高级别的争用、和/或昂贵的缓存一致性。问题在于,即使 head 和 tail 使用不同的并发对象(如锁或CAS变量)来进行读写锁分离,它们通常也占用相同的 cacheline。


管理生产者申请队列的 head,消费者申请队列的 tail,以及中间节点的存储,这些问题使得并发实现的设计非常复杂,除了在队列上使用一个粗粒度的锁之外,还难以管理。对于 put 和 take 操作,使用整个队列上的粗粒度锁实现起来很简单,但对吞吐量来说是一个很大的瓶颈。如果并发关注点在队列的语义中被分离开来,那么对于除单个生产者-单个消费者之外的任何场景,实现都变得非常复杂。


而使用相同的 cacheline 会产生伪共享问题。比如 ArrayBlockingQueue 有三个成员变量:



  • takeIndex:需要被取走的元素下标;

  • putIndex:可被元素插入的位置的下标;

  • count:队列中元素的数量;


这三个变量很容易放到一个缓存行中,但是之间修改没有太多的关联。所以每次修改,都会使之前缓存的数据失效,从而不能完全达到共享的效果。



如上图所示,当生产者线程 put 一个元素到 ArrayBlockingQueue 时,putIndex 会修改,从而导致消费者线程的缓存中的缓存行无效,需要从主存中重新读取。一般的解决方案是,增大数组元素的间隔使得由不同线程存取的元素位于不同的缓存行上,以空间换时间。


Disruptor 解决思路


启动时,将预先分配环形缓冲区的所有内存。环形缓冲区可以存储指向 entry 的指针数组,也可以存储表示 entry 的结构数组。这些 entry 中的每一个通常不是传递的数据本身,类似对象池机制,而是它的容器。这种 entry 的预分配消除了支持垃圾回收的语言中的问题,因为 entry 将被重用,并在整个 Disruptor 实例存活期间都有效。这些 entry 的内存是同时分配的。


一般的数据结构是像下面这样的:



我们可以使用一个环状的数组结构改进成下面这样:



数组的连续多个元素会一并加载到 CPU Cache 里面来,所以访问遍历的速度会更快。而链表里面各个节点的数据,多半不会出现在相邻的内存空间,自然也就享受不到整个 Cache Line 加载后数据连续从高速缓存里面被访问到的优势。遍历访问时 CPU 层面的分支预测会很准确。这可以使得我们更有效地利用了 CPU 里面的多级流水线,我们的程序就会跑得更快。


在像 Java 这样的托管运行时环境中开发低延迟系统时,垃圾收集机制可能会带来问题。分配的内存越多,给垃圾收集器带来的负担就越大。当对象的寿命很短或实际上是常驻的时候,垃圾收集器工作得最好。在环形缓冲区中预先分配 entry 意味着它对于垃圾收集器来说是常驻内存的,垃圾回收的负担就很轻。同时,数组结构对处理器的缓存机制更加友好。数组长度 2^n,通过位运算,加快定位的速度。下标采取递增的形式。不用担心 index 溢出的问题。index 是 long 类型,即使 100 万 QPS 的处理速度,也需要 30 万年才能用完。


一般的 Cache Line 大小在 64 字节左右,然后 Disruptor 在非常重要的字段前后加了很多额外的无用字段。可以让这一个字段占满一整个缓存行,这样就可以避免未共享导致的误杀。


每个生产者或者消费者线程,会先申请可以操作的元素在数组中的位置,申请到之后,直接在该位置写入或者读取数据。


下面用非环形的结构模拟无锁读写。


一个生产者的流程



  1. 申请写入m个元素;

  2. 若是有m个元素可以入,则返回最大的序列号。这儿主要判断是否会覆盖未读的元素;

  3. 若是返回的正确,则生产者开始写入元素。



多个生产者流程


多个生产者的情况下,会遇到“如何防止多个线程重复写同一个元素”的问题。Disruptor 的解决方法是,每个线程获取不同的一段数组空间进行操作。这个通过 CAS 很容易达到。只需要在分配元素的时候,通过 CAS 判断一下这段空间是否已经分配出去即可。


但如何防止读取的时候,读到还未写的元素。Disruptor 在多个生产者的情况下,引入了一个与 Ring Buffer 大小相同的 buffer,Available Buffer。当某个位置写入成功的时候,便把 Availble Buffer 相应的位置置位,标记为写入成功。读取的时候,会遍历 Available Buffer,来判断元素是否已经就绪。


读数据流程


生产者多线程写入的情况会复杂很多:



  1. 申请读取到序号n;

  2. 若 writer cursor >= n,这时仍然无法确定连续可读的最大下标。从 reader cursor 开始读取 available Buffer,一直查到第一个不可用的元素,然后返回最大连续可读元素的位置;

  3. 消费者读取元素。


如下图所示,读线程读到下标为 2 的元素,三个线程 Writer1/Writer2/Writer3 正在向 RingBuffer 相应位置写数据,写线程被分配到的最大元素下标是 11。


读线程申请读取到下标从3到11的元素,判断 writer cursor>=11。然后开始读取 availableBuffer,从 3 开始,往后读取,发现下标为7的元素没有生产成功,于是WaitFor(11)返回6。


然后,消费者读取下标从 3 到 6 共计 4 个元素(多个生产者情况下,消费者消费过程示意图)。



写数据流程


多个生产者写入的时候:



  1. 申请写入 m 个元素;

  2. 若是有 m 个元素可以写入,则返回最大的序列号。每个生产者会被分配一段独享的空间;

  3. 生产者写入元素,写入元素的同时设置 available Buffer 里面相应的位置,以标记自己哪些位置是已经写入成功的。


如下图所示,Writer1 和 Writer2 两个线程写入数组,都申请可写的数组空间。Writer1 被分配了下标 3 到下表 5 的空间,Writer2 被分配了下标 6 到下标 9 的空间。


Writer1 写入下标 3 位置的元素,同时把 available Buffer 相应位置置位,标记已经写入成功,往后移一位,开始写下标 4 位置的元素。Writer2 同样的方式。最终都写入完成。



总结


整体上来看 Disruptor 在提高吞吐量、减少并发执行损耗上做出了很大贡献,通过贴合硬件机制的方式进行设计,消除写争用,最小化读争用,并确保代码与现代处理器使用的 Cache 特性良好配合。我们可以看下 Log4j 2 的性能数据,Log4j 2 的 Loggers all async 就是基于 Disruptor 的。



总结来说 Disruptor 是性能极高的无锁队列,提供了一种很好的利用硬件特性实现尽可能从缓存读取来加速访问的无锁方案。


作者:Andy_Qin
链接:https://juejin.cn/post/7206540113571364920
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

开发的功能不都是经过上线测试,为什么上线后还会那么多 Bug ?

你是否也经过这样的灵魂拷问:「开发的功能不都是经过上线测试的吗?为什么上线后还会那么多 Bug ?」。 大家明明都很努力,为什么「输出」的结果没有更进一步?今天我们就水一水这个「狗血」话题,究竟是谁个锅? 本篇只是毫无意义的「故事」,内容纯属「虚构」,如有...
继续阅读 »

你是否也经过这样的灵魂拷问:「开发的功能不都是经过上线测试的吗?为什么上线后还会那么多 Bug ?」。


大家明明都很努力,为什么「输出」的结果没有更进一步?今天我们就水一水这个「狗血」话题,究竟是谁个锅?




本篇只是毫无意义的「故事」,内容纯属「虚构」,如有雷同,自己「反思」。



对于这个话题,我想用一个「虚构」的故事来介绍下,这个故事里我有一个「朋友」,他在某电商项目组,当时恰逢经历了公司内部的「双十一需求立项」:


立项时


老板:“这次的需求很简单,主要就是参考去年 TB 的预热活动来走,核心就是提高客单量和活跃,具体细节你们和产品沟通就行”


产品:“TB 去年的活动预热大家应该都了解吧,我们这次主要就是复刻一个类似的活动,时间一个月,具体有***,总的来说,双十一活动一定要准时上线,这次运营那边投入很多经费,需求方面我会把控好,核心围绕老板的思路,细节大家可以看文档,基本就是这些内容,一个月应该够的,大家没问题吧?”


开发:“没问题,保证完成任务”


3 天后:


老板:“我刚看了 JD 好像推出了一个不错的小游戏,我觉得这个可以导入到这边活动里,这样可以提高用户的活跃,用户活跃了,消费自然就起来了”


开会


产品:“鉴于老板的意见,我觉得 JD 的这个游戏活动效果可以提升我们的复购,所以我计划在原本需求基础上增加一个支线活动。


产品:“大家不要紧张,支线会和当前主线同步开发,支线活动比较灵活,不对账号级别做限制,另外「设计」那边看下入口放哪里比较合适。”


开发:“上线时间还是没变吗?”


产品:“双十一日期会变吗?老板说了大家抓紧点,功能不多,时间还是够的”


10 天后:


老板:“我刚和x总沟通了下,他觉得我们的活动少了互动,不利于留存,你看下怎么处理”


开会


产品:“经过这几天和老板的探讨,我们发现这次活动少了一些互动性,必须增加一些交互游戏,这样才能提升日活和用户体验。


产品:“这样吧,这部分功能也是比较迫切,我知道任务比较重,但是为了这次能取到较好成果,大家加把劲,接下来周末幸苦下大家,先不休假,后面调休补回来,具体需求大家可以看文档,有一些调整,不多,时间还是够的”


开发:“。。。。”


14 天后:


老板:“我看大家工作的热情还是可以的,刚运营提了可以增加一些视频支持,我觉得这是一个很好的意见”


开会


产品:“目前看起来我们的开发进度还比较乐观,运营的同学说了他们录制了一些活动视频,我看了还不错,就在主会场增加一些视频播放的功能吧,细节你们直接和设计讨论下”


产品:“这个应该不难吧,把分享和下载加上,视频播放这么基础的东西,应该不耽误事,我看网上开源服务就挺多的。”


开发:“。。。。”


20 天后:


老板:“我刚去开发那里看了下效果,感觉分会场的效果挺好的,做支线太可惜了,给他加回主流程里”


开会


产品:“老板那边觉得分会场的效果更好,让我们把分会场的效果做到主会场里的核心交互里,分会场部分的逻辑就不要了,入口也取消。


产品:“大家不要激动,都是现成的东西,改一改很快的,不过项目进度目前看来确实起有点拉垮,接下来大家晚上多幸苦点,我们晚上11点后再下班,我申请给大家报销打车的费用”


开发:“。。。。”


23 天后:


老板:“整体效果我觉得可以,就是好像有一些糙,你们再过一过,另外大家开个会统一下目标,看看能不能有新的补充”


产品:“可以的,过去我们也一直在开会对齐,基本每两天都会对齐一次”


开会


产品:“我和设计对了下,发现有一些细节可以优化,比如一些模块的颜色可以细调一下,还有这些按键的动画效果也加上,我知道工期紧张,所以我从「隔壁」项目组借了几个开发资源,未来一周他们可以帮助大家缓解下压力”


开发:“。。。。”


28 天后:


开会


产品:“好了,项目可以提测了,相信之前测试也陆续介入跟进了需求,应该问题不大,目前看起来「燃尽图」还可以,测试完了尽快上线,老板那边也在催了”


测试:“不行啊,今天走了用例,一堆问题,而且提测版本怎么和用例还有需求文档不一致,这个提测的版本开发是不是自己没做过测试啊,一大堆问题,根本测不下去,这样我们很难做”


产品:“这个我来沟通,开发接下来这几天大家就不要回家了,马上活动上线,一起攻克难关”


产品:“我也理解大家很努力了,但是这次提测的质量确实不行,你们还是要自己多把把关,不能什么问题都等到 QA 阶段才暴露,这样不利于项目进度,需求一直都很明确,大家把 Bug 尽可能修一修,有什么问题我们及时沟通,尽快解决,敏捷开发”


开发:“。。。。”


上线前一天晚上 10 点:


开会


测试:“不行,还有 20 几个问题没有确认,这种情况我不能签字,上线了有问题谁负责。”


产品:“一些问题其实并不影响正常使用,目前主流程应该没问题,让开发把 P0 的两个问题修了之后先上线,剩下的在运营过程中逐步更新就好了,有问题让运营先收集和安抚”


开发:“上线了脏数据不好弄,会有一些账号同步的问题,而且用户等级可能还有坑”


产品:“没什么不好弄的,到时候有问题的用户让运营做个标志,接下来小步快跑修复就好了,时间不等人,明天就是上线时间, 活动上不去对老板和运营都没办法交代”


项目上线:


老板:“运营和我反馈了好多问题,你们版本上线是怎么测试的,要反思一下xxxx”


开会


产品:“我说过用户要集齐碎片和好友砍价之后才能给优惠券,等级不够的不让他们砍价成功,为什么只完成砍价的新人拿到大额优惠券?”


产品:“什么?因为账号数据绑定有 Bug ,不同渠道用户合并账号就可以满足?为什么会有这个 Bug ,测试那边没覆盖到吗?”


测试:“我不知道啊,需求文档没有说还能账号合并,而且这个功能之前没说过要限制用户等级吧?”


产品:“我出的需求肯定有,文档里肯定有,另外开发你既然知道问题,为什么不提前沟通,现在用户都消费了,这个事故你和测试 55 责,后面复盘的时候要避免这样的问题再次发生”


开发:“。。。。。”


最后


所以大家觉得是谁应该背锅?是开发的能力不够,还是测试用例的覆盖缺失?说起来,其实在此之前,我在掘金也遇到了一个 “Bug” ,比如:



文章 Markdown 里图片链接的 content-type 字段如果不符合 image/*** 规格,那么发布出来的时候链接就不会被掘金转码,所以不会有图片水印,同时直接指向了我自己的图床地址。



那么你觉得这个是 Bug 吗?明明是用户不遵循规范。但是这样不就留下漏洞了吗?



如果在文章审核通过之后,我修改图床上的图片内容,这样不就可以绕过审核在掘金展示一些「违规」内容了吗?



所以有时候一些功能的初衷是好的,但是引发的问题却又很隐蔽,那么这能怪「测试用例覆盖不到位吗」?


那么,你觉得「经过测试,为什么上线后还会那么多 Bug 」更多可能是谁的问题?


作者:恋猫de小郭
链接:https://juejin.cn/post/7207715311758393405
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

天生我材必有用,千金散尽还复来

入行前 我从2013-2016年在我们本地的一所中等高中读书,说是中等是因为我们本地有三所高中,我们学校升学率排第二,第一遥遥不及。 高中三年,第一年我还在重点班,当过小组长,高一结束考试要分班,那次考砸了,分到了普通班,从此堕落,班里的学习氛围极其差,跟大多...
继续阅读 »

入行前


我从2013-2016年在我们本地的一所中等高中读书,说是中等是因为我们本地有三所高中,我们学校升学率排第二,第一遥遥不及。


高中三年,第一年我还在重点班,当过小组长,高一结束考试要分班,那次考砸了,分到了普通班,从此堕落,班里的学习氛围极其差,跟大多数人一样,上课睡觉、玩手机,也就是高二那年,父亲给我买了人生中第一部手机-荣耀3C。化学老师总说我脑子可以,硬是自己把自己耽误了,现在想想,真是有点对不起各科老师。


高考结束之后填报志愿,当时年轻,总想着出去闯荡。觉得高考没考好,学一个与高中知识无关的专业,从零开始,就选择了计算机专业。还记得当时第一志愿填写的北京一所大学,第二志愿在天津。结果分数下来之后,怀着忐忑的心情去查分数,我也知道会很低,但没想到这么低。录取通知书迟迟没有下来,有点心灰意冷。


母亲当时建议我在本地学厨,我没有同意。我在网上无意间了解到北大青鸟这个机构,想去学习计算机,但父亲觉得学费有点贵,也不一定靠谱,就让在北京的阿姨去了解,了解完了之后说是培训机构,不建议我去,后来有几天处于迷离状态。不知过了多久,迟来的录取通知书终于下来了,竟是被我第三志愿河南一所专科录取。


上了大学之后,一个寝室里面就我高考分数最低,后来才了解到,当时我所报的计算机应用技术专业缺人,才补录上我,真的是惊险。


在大一跨年夜,我也跟我现在的女朋友正式“官宣”,到如今2023年已经六个多年头了。大二那年,微信小程序的横空出世,小游戏的跳一跳爆火,那时我不断去找方法学习小程序,后来了解到得先学基础HTMLCSSJavaScript,室友给我推荐了菜鸟教程我要自学网来学习,面对如此枯燥无味的代码世界,最终还是放弃了。


大三那年11月份,我们要出来实习了,那时还在纠结去郑州还是去西安,因为西安离家近点,最终选择了西安,那时候还不知道什么BOSS直聘拉钩,使用58同城在西安找视频剪辑的实习岗,我自认为在学校pr学的还不错,最终被忽悠到一家培训机构,说的我是天旋地转,学习不收钱,每个月还给1000块钱的补贴,学成之后,每个月给他们还1200(大概是这个数字,时间太久忘记了),还18个月,然后搞了个助学贷款。


班上很多同学都是零基础,相比较他们,我还是科班出身,还稍微了解了一丢丢的HTMLCSS,跟他们在一起,让我产生了优越感,对这门技术更加感兴趣,每天的课下练习都认真完成,放假也在家写代码,写一些复杂的商城首页。就这样,学习了5个月左右,回学校要开始最后的论文答辩、毕业手续了。


我是一个比较怀旧的人,很多老物件都不舍得删掉,包括我刚入行时的学习代码。分享一下当时学习的内容


image.png


大致一看,东西也不算多,其实就是带入门。


这个时候回到学校,就可以很自信的去学习微信小程序开发了。2019年6月份,我正式毕业了,属于我无忧无虑的时期结束了。


入行后


毕业之后,我继续回到西安开始找工作,这时候的我已经开始有压力了,毕竟每个月要还当初的助学贷款。


第一份工作(2019.06.? - 2019.06.?)两周


后端是Python,我工资要了6k(毕竟当时被机构洗脑了,说毕业之后最低都8k,我还是有点自知之明),最后说是试用期80%,4800,转正之后6k交社保。可谁知当初实战项目做得少,仅仅两周就被劝退了,还给了2000的工资,说实话,我都感觉没有为公司创造出一点价值。


第二份工作(2019.07 - 2020.04)9个月


7月份入职了一家电商公司,工资最后谈到了4.5,试用期给3.5,转正4.5,工作两年才有社保。公司挺大,但开发就三位,一位前端,一位后端php,一位运维,运维是一名实习生,但是挺强的。就在这家公司,让我真正的做了html+css+jquery的实战项目,业余时间还挺多,就使用vue开发一款个人博客,技术栈用到了vue2.xvue-routerelement-ui,数据全部使用的写死的假数据,也就是这个阶段,我频繁的使用csdn记录学习笔记,后来开发完之后,发现这东西开发出来也没有什么实质性的作用,开始开发后端,最开始使用的是NodeJSexpress框架,简单的写了几个增删改查,就租了台服务器,把我的域名xueshuai.top解析上去(域名在2019年去学习的时候就租了一年,刚开始还解析在FTP服务器上,仅仅部署静态页面访问),服务器装的windows server,将NodeJS接口以CMD的方式运行在服务器上,但此时,我的网站还是不怎么用,后来觉得服务器上的NodeJS运行方式有点奇怪,始终要打开CMD终端,最后了解到PM2这个东西,然后就使用PM2部署NodeJS接口,此时我也就是会用,深入还是小白。


晚上下班回去之后,又去学习uniapp,据说这个东西很强大,一套代码可以编译到多个平台,何乐而不为呢?彼时的uniapp只能编译H5AndroidIos微信小程序百度小程序,现在稍微大点的公司都有自己的小程序。


到了2020年,新型冠状病毒爆发,公司迟迟不复岗,届时的我身上还背着贷款,过完年,大年初六早早来到西安等复工。这个时候,在出租屋的我,天天写代码学习,有晚甚至写到第二天上午8点,然后睡觉。这个阶段,我了解了vue的服务端渲染NuxtJS,在Github上拉下来一个NuxtJS项目学习,然后重构个人博客第二版,直接在NuxtJS项目内新建了一个server目录编写后端接口。


直到2020年4月份,实在是扛不住了,就回公司离职了,(大部分岗位复工了,我们三个开发没有),离职证明给我写到了年前放假那天,我问他他说最近这段时间没复岗不算上班。我也没跟他纠缠,就撤了。


第三份工作(2020.04 - 2022.02)1年10个月


2020年4月10日,我入职了第三家公司,在这家公司,我独立完成了5个项目,算是长进了不少。



  1. UniApp 1个

  2. JQuery + BootStrap 4个


维护了2个项目



  1. Uniapp 1个

  2. Vue 1个


还有一个用Wap2app将一个移动端JQuery项目打包成了App


还是有满满地收获,也就是从这家公司,我才真正的算是入行。
平时也不断地学习,学了以下技术栈



  1. NodeJS的Egg框架

  2. Nginx入门

  3. MySQL入门

  4. MongoDB入门

  5. Redis入门

  6. 原生微信小程序

  7. 深入学习了Vue

  8. vueCli

  9. vueRouter

  10. axios

  11. NuxtJS

  12. 各种功能函数的封装思想

  13. Vant

  14. uviewui

  15. elementui

  16. antdesign

  17. 数据库权限设计等等


实现了以下功能



  1. web端微信授权

  2. app端微信授权登录

  3. app端微信、支付宝支付

  4. H5、app实现微信分享

  5. 条形码、二维码的生成与识别

  6. ...


是一家自研产品的公司,项目结束,老板让我学习点Php,顺便可以解决后台问题,也就顺便学习了点php的thinkPhp框架。


这个时间段我也开启了我职业生涯的首次接单,主要接了一些纯前端项目,包含以下技术栈



  1. JQuery + HTML + CSS

  2. 原生微信小程序

  3. 帮群友解决问题


由于合作很成功,也与这家公司开启了长期的合作,时至今日(2023.02.21)也还是有合作。
说到这里,你可能觉得我的个人博客已经作废了,不,你错了,一次又一次地推翻重来,这次我又开始折腾了,Nuxt2 + ElementUI 做前台,Vue2 + AntDesign做后台,EggJS + MySQL做后端,这次权限管理也会了,可以开始搞了,同时这份工作也要结束了。临走时老板还给我说可以先找工作,找到之后再提离职,愿意让我无缝衔接。


可谁料想到,第二天去面试了两家,第三天面试结果就出来了,当天就离职了,第四天去体检,第五天直接入职,而且新公司与这家公司离得很近,连吃饭的地方都没变。


第四份工作(2022.02 - 至今)


这家公司的后端是Java,使用SpringBoot一套技术栈。工作内容前期写页面调接口,后期组件封装、公共方法封装、代码审查、处理问题,前面几家都是只有我一个前端,这家还有两位同伴,也开发了我人生中第一个可视化项目,后面可视化项目一个接一个。


当然,业余时间还是不能忘记学习,又学了以下技术栈



  1. NestJS

  2. React

  3. React的服务端渲染NextJS

  4. React + AntDesign 开发一些小玩意练手

  5. TypeScript

  6. Vue3

  7. Vite

  8. Pinia

  9. moment && dayjs

  10. 养成了阅读源码的习惯



深刻明白了技术和生活的关系,好的技术可以有更好的生活,没有好的技术也可以有更好的生活。


作者:webxue
链接:https://juejin.cn/post/7202531472719527991
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

如何让 ChatGPT 读懂超长保险条款?

前言 在去年年底 ChatGPT 刚火的时候我就有一个想法,它能不能帮我读一下晦涩难懂的保险条款,告诉我它到底在讲什么?到底什么病能赔多少钱?甚至能告诉我里面是不是藏有一些坑? 但是当我把条款内容复制到 ChatGPT 时,我们会发现,它直接告诉你:“太长了,...
继续阅读 »


前言


在去年年底 ChatGPT 刚火的时候我就有一个想法,它能不能帮我读一下晦涩难懂的保险条款,告诉我它到底在讲什么?到底什么病能赔多少钱?甚至能告诉我里面是不是藏有一些坑?
但是当我把条款内容复制到 ChatGPT 时,我们会发现,它直接告诉你:“太长了,它受不了”。


image.png
当我们自己打开 openai 的文档platform.openai.com/docs/api-re…),我们才明白:哦,原来它接受的最大长度是 4096tokens。但这个 一个 token 到底是多长呢?暂时还不知道,反正就是有这么个上限。很显然,我们的保险条款远远的超过了它的上限,因为我才复制两三页的内容它就 Error 了。
image.png
但我们还是纳闷,不应该啊,ChatGPT 不应该很强吗?它的官方例子可是摆了几十个案例,看网上的各种文章,它似乎在文字与编码领域,远超绝大数人类,怎么会连个保险条款都无法承受。
image.png


我想从这个案例中看看有没有其他路子,可惜确实没有合适的案例能解决我这种超长文本的诉求。于是我停止了这个想法,并先回家过了个快乐的新年。


但在最近,在我的不屑但可能没啥意义的努力下,我几乎完成了这个想法。先放几个截图给大家看看。


问蚂蚁爆款「好医保长期医疗」几个问题的答案:
image.png
问市面上很火的「达尔文7号重疾」的问题及答案:
image.png
如果你仔细看,你会发现,它已经能非常准确的回答这几个很多保险小白常问的问题了。
那我到底是怎么实现的呢?这篇文章来一探究竟。


先纠正一下


在我开始正文之前,先让 ChatGPT 跟大家做个简单介绍。
image.png
所以本文标题其实不对,准确说应该是「如何让 openai 的 API 帮我读懂保险条款」。因为我其实是调用了 openai 提供的 API 能力来满足需求的。更准确来说是调用了其 GPT-3 的一些模型,而不是挂代理直接问 ChatGPT。但为了大部分读者容易理解,就先取一个不恰当的标题了。


后文中,我将会以 GPT 通用指代我所调用的 openai 的 API 服务。


核心解决方案


话说在新年回来后,ChatGPT 仍愈演愈烈,因此我又来了点儿兴趣,并尝试把 GPT 接入我一个年久失修的个人公众号。就在这个接入的过程中,为了解决接入遇到的不少问题,我看了不少文档。果然是开卷有益,实干兴邦啊。过程中我又接触学习了一些有用知识。其中最重要的是两个点知识:


其一是:GPT 的多轮对话是如何实现的? 其实很简单,就是把历史对话都存起来,然后按照时序重新拼接,再加上这次的问题,合并一起作为 prompt再传给 GPT 即可。


其二就是,如何让 GPT 理解超长文本知识并做问题回答? 我在逛 openai 官方文档的时候,发现了其实人家早早就想到了这个问题,并贴心的准备好了教程文档。这在我上一篇 ChaGPT 的文章中也已提到:
公众号如何接入 ChatGPT 及 一些感想




  1. How to build an AI that can answer questions about your website:platform.openai.com/docs/tutori…

  2. Question Answering using Embeddings:github.com/openai/open…



它的思路其实很好理解,详细来说,主要是分几步:




  1. 先将巨量的文档知识拆块,并使用 openai 提供的Embeddings能力将该部分内容向量化,并做映射存储。向量化的目的是为了做两部分文本的相似性匹配。关于它的文档在这:platform.openai.com/docs/guides…




  2. 当用户提问时,将用户的「提问文本」也做向量化。




  3. 遍历已拆块并向量化的文档内容,将之与向量化后的「提问文本」做内容相似性比较,找到最为相似的文档内容向量。




  4. 根据之前的映射关系,找到这段「向量」映射着的原始文档内容块。并把这个内容块作为上下文传给 GPT。




  5. GPT 会根据这段上下文回答用户的提问。




原来如此,那么我只要把保险条款分段向量化,再根据用户提问匹配到相应的那段内容再回答不就好了吗。简单,上手吧。


把大象放进冰箱需要几步?


这个问题似乎正如「把大象放入冰箱」。描述起来很简单,真正要做起来就举步维艰。


在我们面前最大的问题就是,到底怎么把这个文档做分割?


最简单的方案自然是,把保险条款按页码一页一页分块,如果一页内容也超了,那我们就半页半页分块。 但这忽略了一个最大的问题,就像大象的各个器官并非水平均分分布一样,知识内容并非是按页码分割的。一个知识可能第三页正好起了个标题,第四页才是详细的描述。而向量化匹配的时候,却可能只匹配到第三页的内容。比如这个「好医保长期医疗」的责任免除条款,就很容易丢失下半部分的免除责任,造成回答准确性降低。
image.png
除此外,这样的分割还容易让 GPT “学坏”。因为粗暴的按页分割,很容易把无关的知识传给 GPT,导致它可能会因为这些无关的信息返回错误的答案。比如如下关于用户信息告知的条款:
前一页内容如下:
image.png
后一页内容如下:
image.png
如果你询问的问题是:“如果投保时年龄填写错误,理赔时会怎么样”。
那很有可能你只会将第一页内容传给 GPT,它将会告诉你保司不承担任何责任,并不退回保险费。
image.png
而用我实现的服务所拼接的知识块,得到的版本答案如下:
image.png
显然这个问题得到了准确回答。


以上两个案例比较生动的说明了分割的重要性。


如何分割文档



懂得了很多道理,也依旧过不好这一生。 - ChatGPT也不知道是谁说的



如何分割文档?其实这个也很好想方案,只是比较难搞。
保险条款是有文章结构的,只要咱们可以按文章标题给文档做结构化就好了。 最终文档就会成为这样的一个文档树:


interface INode {
title: string;
content: string;
children: INode[]
}

type DocTree = INode[]

然后我们在深度遍历这个文档树,去识别每个节点所包含的所有内容的长度,达到一定阈值就剪下来作为一个「知识块」。这就像剪一个西兰花 🥦,按自己可以含进去的大小,一朵朵剪下来。


1.gif


通过这样的手段,我们就能在满足知识文本长度的限制下,切下最为连续完整的知识内容。 这其实很简单,但如果一定要装逼取个算法名的话,那我称之为:西兰花算法。


但在我们切割西兰花之前,还有一个棘手的问题,怎么把一个条款文档先变成一棵西兰花(一颗文档树)?


第 0 步:先明白tokens咋回事


因为后文很多内容都跟这个tokens相关,所以我必须得提前介绍一下。
有时间的同学可以直接看官网介绍文档:
没时间的同学可以继续听我简单总结一下:



  1. tokens 不是指 prompt 字符串的长度;

  2. token指的是一段话中可能被分出来的词汇。比如:i love you,就是三个token,分别为 「i」「love」「you」。

  3. 不同语言token计算不一样,比如中文的「我爱你」其实是算 5 个 token,因为它会先把内容转成 unicode。读过我公众号那篇文章的同学,你们就会知道,有些 emoji 的token长度会超出你的想象。image.png

  4. 你可以用这个网站在线体验你的文字的token长度:platform.openai.com/tokenizer

  5. node.js环境中,你可以用 gpt-3-encoder 这个 npm 包来计算 tokens的长度。


OK,掌握这些知识就足够理解我们后文的内容了。


第 1 步:标题的识别


我们可以先看看市面比较火爆的医疗与重疾险产品的条款。发现其实保险大部分条款是有一定格式标准的。几乎都是嵌套数字标题 + 内容。那是否可以依据一定的规则,识别出那部分是标题,然后根据标题做切割即可?比如说,根据 「数字 + ·? + 数字?」的正则做匹配。
虽然我正则写不来,但是 ChatGPT 写的来呀


image.png


const text = '1 React 1.1 react hooks 的使用技巧 1.2 react suspense 的作用 2 Vue 2.1 Vue compostion api 的使用技巧';
const regex = /(\d+\.?\d*)\s(\w+)/g;
const matches = text.matchAll(regex);

const result = [];

for (const match of matches) {
result.push(match[1] + ' ' + match[2]);
}

console.log(result);
// output
['1 React', '1.1 react', '1.2 react', '2 Vue', '2.1 Vue']

虽然它的回答不够完美,但是基本够我们继续下一步编码了。于是我尝试把 PDF 的全文内容复制出来,并做分割。然后我就会发现几个很麻烦的地方:



  1. 数字不是只在标题中出现,正文中也很容易出现各种数字。

  2. 有些注释内容,也有数字+内容的出现


image.png
所以我们复制出来的文本是这样的:


module.exports = `2.3 等待期
自本合同生效(或最后复效)之日起 90 日内,被保险人因意外伤害4以外的原因, 被保险人因意外伤害发生上述情形的,无等待
被确诊患有本合同约定的轻症疾病5、中症疾病6、重大疾病7的,我们不承担保险
责任,这 90 日的时间称为等待期。
期。
轻症疾病 中症疾病
重大疾病
本合同的保险责任分为基本部分和可选部分。
,本合 ,退还
等待期内,我们的具体做法见下表:
等待期内发生的情形
我们的做法
不承担本合同“2.4 保险责任”中约定的保险责任
同继续有效
不承担本合同“2.4 保险责任”中约定的保险责任
您已交的本合同保险费8(不计利息),
本合同终止
2.4 保险责任
1 保单生效对应日:本合同生效日每年(或半年、季、月)的对应日为保单年(或半年、季、月)生效对应日。若当月 无对应的同一日,则以该月最后一日为保单生效对应日。
2 保单年度:自本合同生效日或年生效对应日零时起至下一个年生效对应日零时止为一个保单年度。
3 保险费约定交纳日:分期交纳保险费的,首期保险费后的年交、半年交、季交或月交保险费约定交纳日分别为本合同
的保单年生效对应日、半年生效对应日、季生效对应日或月生效对应日。`

所以,如果只是粗暴的根据某种标题规则来做分割,那我们只会得到错乱的结果。


那我们人眼是如何从页面中知道它是标题的呢?我们自然是根据这个文案的位置、大小,综合了我们的历史经验来判断它是不是标题。也就是说,要想真正从一段文本中做很好的标题识别以及内容分割,必须要获取这段文本的其他元数据。


我的下意识,自然是希望还有 AI 的能力。我把 PDF 转图片,都传给某个 AI,它很聪明,帮我 OCR 识别文档并做好了充分的文档结构化。


但我在 openai 官网并没有找到这样的 api 能力提供。由于我的 AI 储备非常薄弱,我也很难在网上找到可以满足我诉求的开源工具。而且根据我很可能不成熟的感觉,我感觉现在训练出来的开源 AI 模型,顶多只是识别出文字以及文字所在的绝对位置,也很难帮我直接把文档给按照标题结构化了。真有这样的需求,可能需要我自己准备大量材料来训练。这似乎再一次难倒了我。


于是我又想到了 pdf.js这个工具。我们 C端 部分投保协议就是利用这个工具包,把 PDF 文档转成 DOM 渲染到页面上。虽然我之前并没有使用过,但我相信它肯定可以拿到 PDF 上很多元数据,否则不可能做到还原成 DOM 去渲染。我甚至想,它有没有可能直接帮我转成一颗 根据标题已经结构化好的 DOM 树。


在我使用pdf.js后,我发现,刚才稍微想的有点多了,但也足够用了。它能把 PDF 文档的文字块以及这个文字块的文字与大小信息 解构出来。比如这样:


[{
"str": "2.4",
"dir": "ltr",
"width": 13.2,
"height": 10.56,
"transform": [10.56, 0, 0, 10.56, 346.03, 285.05],
"fontName": "g_d0_f1",
"hasEOL": false,
"pageNum": 4
},
{
"str": " 保险责任",
"dir": "ltr",
"width": 42.24,
"height": 10.56,
"transform": [10.56, 0, 0, 10.56, 364.39, 285.05],
"fontName": "g_d0_f12",
"hasEOL": false,
"pageNum": 4
}]

其中的 widthheight决定了文字块的大小,transform决定了文字块在文档上的绝对位置信息。pdf.js也是根据这些信息,把 PDF 内容以绝对位置与大小一个个的转成 DOM 并绘制在网页上。它不理解前后语序与内容结果,它只是粗暴的拼装。


但这对我来说已经够用了,有了这些信息,我就能分析出哪些文字块是标题,哪些文字块是正文的正常数字,哪些内容块是底部的注释内容。比如说:



  1. 出现最多的字体大小,有理由相信这就是正文字体大小

  2. 持续出现的一个很靠左的 X 坐标,且该坐标内容基本是数字,有理由相信,这就是数字标题或数字注释所在的 X 坐标

  3. 虽然符合上述第二条规则,但却比正文字体小很多,有理由相信,这是注释前的数字


等等等等吧,除此外,我们还需要判断什么时候到注释内容,什么是页码内容。因为这些内容都要做一些特殊处理。另外就是不同文档可能有些特殊的边界情况要处理一下。


虽然说这依旧很人肉,不智能,但至少能把路走通了。至于有些不是以 x.x.x 这样的数字做标题的文档,比如:第一章、第一节什么的,还是能拓展的,但就先不考虑了。


第 2 步:过长内容摘要化


事情走到这一步,大问题就没有了。但实际应用的时候,我们还是会发现一个小问题,就是很多小节的内容其实比较长,我们能做相似性映射的知识块其实往往不仅一块。当我们拼接多块知识的时候,内容又超出了。而如果我们只拼接一块内容,知识又不够完整。这又让我们抓耳挠腮了。


我仔细看了看这些小节的内容,我觉得,其实这段文本,要是用文言文来说,可能还可以再短一点(汉语真是博大精深)。但是我觉得如果让 GPT 帮我把它转成文言文的话,用户提问的问题很可能就映射不到了。当然,我也真的试了一下,发现 text-davinci-003这个模型似乎在文言文领域也不太行,保险条款它很难转成文言文。


但我有了另外一个思路,就是保险条款其实废话还是有些多的,我可以让 GPT 帮我做一些摘要性的总结,且尽量不丢失最核心的有效知识。在我网上搜索这块相关的知识时,发现 NLP 领域有一种叫「命名实体识别baike.baidu.com/item/%E5%91…)」的技术,常用于搜索引擎、信息提取、问答系统中。不管三七二十一了,openai 这么强大,那我就这么让它帮我这么做吧。


async function getSummary({ content, tokenLength }) {
const promptContext = `'''{{content}}'''基于命名实体识别构建内容摘要:`;
const contentTokenLength = tokenLength || encode(content).length;
const promptContextTokenLength = encode(promptContext).length;

const completion = await openai.createCompletion({
model: 'text-davinci-003',
prompt: promptContext.replace('{{content}}', content),
// 1000 ~ 4096,最大也不能超过1000
max_tokens: Math.min(
4096 - contentTokenLength - promptContextTokenLength,
1000,
),
temperature: 0,
});

return strip(completion?.data?.choices?.[0].text, ['\n']);
}

实际测试下来,这样的方式相比直接总结摘要,从最终效果来看,返回的结果会稳定很多,且返回的知识不会只说到一半。具体原因也不懂,有资深的大佬可以帮忙指点一下。


经过这样摘要化以后,我们就能把一段较长的知识文本给有效缩短。当用户问起相关知识时,可以调用更多的知识块来回答用户。


第 3 步:超长内容极限压缩


事情走到这一步,你可能以为就真没啥问题了。但实际上我们又遇到了个小麻烦。就是有部分小节的内容依旧还是太长了。就像一颗基因变异的西兰花 🥦。


image.png
我已经剪到最小的分支了,但这个最小的分支依旧超过了max_tokens的限制。这又难倒我了,现在我该怎么分割它?这似乎回到了我最开始遇到的问题。
不过好在,这些变异的西兰花并没有动画灵能百分百中的那么夸张,大部分还只是 略超 max_tokens一些,几乎不会超过其两倍。而自己观察这些超出去的内容,往往是两种类型。



  1. 较长的表格,比如药品列表,如下图1。

  2. 一些责任或疾病的详细介绍,如下图2。


image.pngimage.png
我们发现这些小节的内容,其实并不适合分割。比如药品列表要是分割成两块接近max_tokens的知识内容,一次性问答只能获取其中一块知识。这就会导致回答错误。比如你问有多少种药品可以报销,它自然会算错。责任也是一样。


但这些小节有另外一个方向,就是压缩内容。里面有很多文字其实是相似的,比如一堆的社保目录内/外。比如责任内容中频繁出现的:恶性肿瘤``保险金``被保险人等等。我们只要做一本字典,把这些很长的重复性文字,用另外一种特殊的较短的字符指代。这段长文本就会瞬间被压缩到较短的文本,我们再连同字典一起发给 GPT,让它再翻译回来并做摘要化,于是就绕过了max_tokens的限制。


但问题又来了,说的容易,代码怎么知道哪些文字是一段词语?如果代码不知道哪些文字是一段词语,又怎么做字典映射。总不能自己先把所有可能的词汇都预先想好吧。虽然保险有一些专业术语可以提前预设,但总归有更多的未知的。


这就引出了 NLP 领域的另外一门技术,分词。很开心的是,在中文领域,且在 node.js 生态中,有一个比较好用的分词工具「结巴分词-github.com/yanyiwu/nod…」。 不出意外,这也是 ChatGPT 告诉我的。


image.png
运用这个结巴分词,我们就可以把一段内容分割成一个个词汇,同时也支持传入用户预设的词汇字典。这样我们就能知道哪些词汇在一段文本中被重复使用多次。对于这些词汇,我们再用一个最短的字符去映射它。


const nodejieba = require('nodejieba');

nodejieba.load({
userDict: './userdict.utf8',
});

const longText = '相学长白天吃饭,相学长中午也吃饭,相学长晚上还吃饭';

const words = nodejieba.cut(longText);

console.log(words);

// output
['相学长','白天','吃饭',',','相学长','中午','也','吃饭',',','相学长','晚上','还','吃饭'];

为了映射的字符尽量的短,我也是挠了一下脑袋,本来最简单就是一个特殊字符加上从1递增的数字就好了,比如这样:*${index}。但是这个方式经过我实测,压缩完的tokens效果还不够极致。考虑到我们都是基本是中文环境,我最终选择了 26个字母大小写 + 24个拉丁字母大小写作为索引:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZαβγδεζηθικλμνξοπρστυφχψωΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ



根据第 0 步的知识,我们知道,千万别用 emoji 去做字典索引。



这样我们就得到最多100个索引,当然如果内容中已有出现具体的字母,最好还是针对该段内容剔除该字母。经过实际测试,这样的压缩效果会比数字映射法稍微好一些。且经过实测,这样问 openai 依旧能得到正确答案。举个例子:
上文中的,相学长白天吃饭,相学长中午也吃饭,相学长晚上还吃饭
会被转化成,a白天b,a中午也b,a晚上还b|上文中,a:相学长,b:吃饭
我们把这句话拿去问 GPT:相学长每天都在做什么。它能给出正确的回答:相学长每天都在吃饭


image.png
除了字典法压缩外,其实还有一个也比较显著的手段。就是把全角字符全部转成半角字符。在我的实际测试中,一段 8247 个tokens长度的内容。换半角相比不换半角,能多压缩 580 个tokens,简直是效果惊人!


其实不仅仅超过max_tokens的文本需要压缩。我建议超过 3000 tokens的文本都得压缩一下。因为 openai 最大的 4096 个token限制。并非是限制 prompt。而是限制 prompt+ 它的答案。也就是说,当我们做摘要化的时候,如果我们提供的原始内容越长,它能返回的摘要就越短。这显然不符合我们的诉求。所以,虽然文章中这里写着是第三步,但实际操作时,压缩其实是第二步,压缩需要在摘要化之前。


也是因为max_tokens的计算涵盖了 GPT 的回答内容,所以当我们根据用户提问拼接知识块的时候,不能按照 max_tokens的限制去打满内容,尽量留出 几百到一千的 tokens给 GPT 做回答。


在我实操过程中呢,其实还存在一个文档的内容,怎么压缩也压缩不到预期的长度。我确实选择了逃避,因为这段内容是无数个疾病的详细介绍,我骗自己说这些详细介绍并没太大用。因此最终我做了一个特殊处理,如果是这个超长的疾病介绍,我就只保留了疾病标题,去掉了疾病的内容。


针对这种,再压缩也解决不了的问题,我目前确实还没找到非常好的解法。


最终经过我们对 PDF 文档的分割、压缩、小节内容摘要化、转成嵌套文档树,最终再上一个西兰花算法。我们就能完成对这个 PDF 文档的合理分割了。最终我们再把分割后的内容做向量化处理,就能实现一个比较好的基于超长保单文档的保险产品问答服务。


其实其他领域的文档也差不多,只要这个文档结构比较好切割。


代码已开源


相关代码开源,有兴趣的同学自己下载继续研究吧~ github.com/wuomzfx/pdf…
关于到底怎么做向量化、怎么做匹配,我在本文就不多说了,这个还是比较容易了。包括其他还有一些特殊的处理,比如怎么把注释内容拼接到正文里。这些都可以在源码中方便寻找到。其他可能还稍微需要一点工具知识的,就是 node 中如何做两个 embedding 向量的相似性匹配。用 @stblib/blas这个 npm 包就行。DEMO 示例:


const ddot = require('@stdlib/blas/base/ddot');

const x = new Float64Array(questionEmbedding);
const y = new Float64Array(knowledgeEmbedding);

const result = ddot(x.length, x, 1, y, 1),

如果还有哪里不明白的,欢迎评论区或者先尝试问下 ChatGPT~


最后一点小感悟


感觉人工智能的时代真的要到来了,连我这种 AI 小白,似乎都已经能完成一个可能真的能投入使用的服务。我再整个小程序,糊个页面,把一些异常容错机制再完善完善。再稍微整个爬虫,从保险行业协会网站帮用户快捷找到相关的保险条款。我几乎就能实现一个帮助用户回答保险产品的应用了。


亦或者,我可以自己预设一些问题。通过这些问题,我可以从保险条款中结构化出很多有效的信息,比如保额保费、责任细节、投保年限、续保年限等等。结构化之后,我又可以直接做不同产品的对比,根据用户的要求推荐比较合适的保险产品。这是一件挺有可能的事情,我尝试把之前的两个问答作为对比再次问 GPT 推荐哪款产品,它的回答比较中肯且有用。


image.png


总之,新的 AI 基础设施,已经能成为现在大部分工程师的有利工具。在某些垂直领域做一些深入研究,通过这些工具,AI 就能发挥出意想不到的作用,我们可以快速的产出各种有意思的产品。就好像 HTML5 跟 小程序 带来一系列有意思的 轻量APP 一样。相信,AI 浪潮在这两年就要席卷而来了~~


作者:相学长
链接:https://juejin.cn/post/7206950454097690680
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

ChatGPT火了,我连夜详解AIGC原理,并实战生成动漫头像

一、AIGC:人工智能的新时代AIGC可能会是人工智能的下一个时代。尽管很多人还不知道AIGC是什么。当还有大批人宣扬所谓人工智能、元宇宙都是概念,并且捂紧了口袋里的两百块钱的时候,人工智能行业发生了几件小事。首先,由人工智能生成的一幅油画作品《太空歌剧院》,...
继续阅读 »

一、AIGC:人工智能的新时代

AIGC可能会是人工智能的下一个时代。尽管很多人还不知道AIGC是什么。

当还有大批人宣扬所谓人工智能、元宇宙都是概念,并且捂紧了口袋里的两百块钱的时候,人工智能行业发生了几件小事。

首先,由人工智能生成的一幅油画作品《太空歌剧院》,获得了艺术博览会的冠军。

有人感觉这有什么?各种比赛多了去了,不就是获个奖吗?

可是这次不一样,这是一幅油画作品。在此之前,好的油画只能由人工绘制。但是现在人工智能也可以绘制了,而且还拿了冠军。

很多人类艺术家仰天长叹:“祖师爷啊,我这代人,在目睹艺术死亡!

上一次艺术家们发出这样的感慨,还是1839年,那时照相机问世了。

随后,ChatGPT横空出世。它真正做到了和人类“对答如流”。

它也可以做数学题、创作诗歌、写小说,甚至也能写代码、改bug。

再说一个震惊的报道:由ChatGPT生成的论文,拿下了全班的最高分。导师找到学生,说他上交的论文,段落简洁、举例恰当、论据严谨,甚至引经据典,古今中外,无所不通,教授不敢相信。学生瑟瑟发抖,他说,这是AI生成的,我只是想应付一下作业

另外,美国89%的大学生都在用ChatGPT做作业。以色列总统在周三发表了一个演讲,内容也是由人工智能写的。

现在全球都在讨论,这类人工智能技术,看似是带来了巨大的商业价值,实则可能会给人类带来严重的打击。

这项技术就是AIGC(AI-Generated Content),翻译成中文就是:人工智能生成内容

二、AIGC实战:智能生成动漫头像

其实,利用人工智能生成内容资源,很早就有了。记得有一年的双十一购物节,上万商家的广告图就是人工智能生成的。只是现在的数据、算法、硬件,这三个条件跟上了,这才让它大放异彩,全民可用。

下面,我就以人工智能生成动漫头像为例,采用TensorFlow框架,从头到尾给大家讲一下AIGC的全过程。从原理到实现都很详细,自己搭建,不调API,最后还带项目源码的那种

2.1 自动生成的意义

那位问了,自动生成内容有什么好处?我的天啊,省事省力省钱呐!

下图是一个游戏中的海洋怪物。这便是人工智能生成的。

这个大型游戏叫《无人深空(No Man's Sky)》。号称有1840亿颗不同的星球,每个星球都有形态各异的怪物。这游戏玩着得多爽啊?简直就是视觉震撼呐。这些怪物要是人工来做,得招聘多少团队,得花费多少时间?

用人工智能生成的话,你可以像去网吧一样,跟老板说:嗨,多开几台机子

当然,下面我要做的,没有上面那样地绚丽,甚至很原始。

但是过程类似,原理一致。效果就是AI生成动漫头像:

2.2 自动生成的原理

AIGC的原理,用中国古话可以一语概括,那就是:读书破万卷,下笔如有神

以生成猫咪的照片来举例子,基本上AIGC的套路是下面这样的:

首先,程序会设计两个角色。一个叫生成器,一个叫鉴别器。

为了便于理解,我们称呼生成器为艺术家,称鉴别器为评论家。

艺术家负责生产内容,也就是画猫。不要觉得拥有艺术家头衔就很了不起,他可能和你一样,画不好。但是,就算乱画,也得画。于是,他就画啊画啊画。

评论家呢,相比艺术家就负责一些了。他首先调研了大量猫的照片。他知道了猫的特点,有俩眼睛,有斑纹,有胡须。这些特征,他门儿清。

下面有意思的就来了

艺术家这时还啥也不懂,随便画一笔,然后交给评论家,说画好了。评论家拿旁光一看,瞬间就给否了。还给出一些意见,比如连轮廓都没有。

艺术家一听,你要轮廓那我就画个轮廓。他加了个轮廓,又交了上去。评论家正眼一看,又给否了。不过,他还是给出一些意见,比如没有胡须。

就这样,这俩人经过成千上万次的友好磋商(评论家幸好是机器,不然心态崩了)。到后来,艺术家再拿来画作,评论家会看好久,甚至拿出之前的照片挨个对照。最后他甚至还想诈一下艺术家,说你这是假的,艺术家说这次是真的。这时,评论家说好吧,我确实找不出问题了,我看也是真的

至此,剧终。

搞一个造假的,再搞一个验假的。然后训练。随着训练加深,生成器在生成逼真图像方面逐渐变强,而鉴别器在辨别真伪上逐渐变强。当鉴别器无法区分真实图片和伪造图片时,训练过程达到平衡。

上面这一套操作叫“生成对抗网络(Generative Adversarial Networks)”,简称叫GAN。我感觉,这套流程有点损,叫“干”没毛病。

2.3 数据准备

鉴别器是需要学习资料学习的。因此,我准备了20000张这样的动漫头像。

这些数据来自公开数据集Anime-Face-Dataset。数据文件不大,274MB。你很容易就可以下载下来。这里面有60000多张图片。我用我的电脑训练了一下。200分钟过去了,一个epoch(把这些数据走一遍)都还没有结束。那……稍微有效果得半个月之后了。

乡亲们,我这里是AI小作坊,干不了大的。于是乎,我就取了20000张图片,并且将尺寸缩小到56×56像素,再并且将彩色改为黑白。这样一来,效率马上就提高了。2分钟就可以训练一圈。如此,我训练500圈也就是不到一天的时间。这是可以承受的。

上面处理图片的代码:

import cv2
# 存放源图片的文件夹
dir_path = "anime"
all_files=os.listdir(dir_path)
# 循环里面的每一个文件
for j,res_f_name in enumerate(all_files):
res_f_path = dir_path+"/"+res_f_name
# 读入单通道
img1 = cv2.imread(res_f_path, 0)
# 重新定义尺寸为56
img2=cv2.resize(img1,(56,56),interpolation=cv2.INTER_NEAREST)
# 转存到face文件夹下
cv2.imwrite("face/"+res_f_name, img2)
# 超过20000退出循环
if j > 20000: break

相信加上注释后,还是通俗易懂的。

文件准备好了。尽管维度降了,但看起来,这个辨识度还过得去。

下一步要转为TensorFlow格式化的数据集。

from PIL import Image
import pathlib
import numpy as np

# 将图片文件转为数组

dir_path = "face"
data_dir = pathlib.Path(dir_path)
imgs = list(data_dir.glob('*.jpg'))
img_arr = []
for img in imgs:
img = Image.open(str(img))
img_arr.append(np.array(img))
train_images = np.array(img_arr)
nums = train_images.shape[0]

train_images = train_images.reshape(nums, 56, 56, 1).astype('float32')
# 归一化
train_images = (train_images - 127.5) / 127.5
# 转为tensor格式
train_dataset = tf.data.Dataset.from_tensor_slices(train_images).shuffle(nums).batch(256)

我很想说一下数据形态的变化过程。因为这和后续的神经网络结构有关联。

首先,我们的图片是56×56像素,单通道。所以,图片的数据数组img_arr的形状是(20000, 56, 56)。也就是说有20000组56×56的数组。这里面的数是int型的,取值为0到255,表示从纯黑到纯白。

((20000, 56, 56),
array([[ 0, 0, 0, 0, 0, …… 0],
[ 18, 18, 126, 136, 175, …… 0],
[ 0, 0, 253, 253, 0, …… 0]], dtype=uint8))

然后用reshape做一个升维,并且用astype('float32')做一个浮点转化。

升维的目的,是把每一个像素点单独提出来。因为每一个像素点都需要作为学习和判断的依据。浮点转化则是为了提高精确度。

到这一步train_images的形状变为(20000, 56, 56, 1)

((20000, 56, 56, 1),
array([[ [0.], [0.], [0.], [0.], [0.], …… [0.]],
[ [18.], [18.], [126.], [136.], [175.], …… [0.]],
[ [0.], [0.], [253.], [253.], [0.], …… [0.]]], dtype=float32))

接着,进行一个神奇的操作。执行了(train_images-127.5)/127.5这一步。这一步是什么作用呢?我们知道,色值最大是255,那么他的一半就是127.5。可以看出来,上一步操作就是把数据的区间格式化到[-1,1]之间。

如果你足够敏感的话,或许已经猜到。这是要使用tanh,也就是双曲正切作为激活函数。

这个函数的输出范围也是在-1到1之间。也就是说,经过一系列计算,它最终会输出-1到1之间的数值。这个数值我们反向转化回去,也就是乘以127.5然后加上127.5,那就是AI生成像素的色值。

2.4 生成器

首先我们来建立一个生成器。用于生成动漫头像的图片。

def make_generator_model():
model = tf.keras.Sequential()
model.add(layers.Dense(7*7*256, use_bias=False, input_shape=(160,)))
model.add(layers.BatchNormalization())
model.add(layers.LeakyReLU())

model.add(layers.Reshape((7, 7, 256)))
assert model.output_shape == (None, 7, 7, 256)
model.add(layers.Conv2DTranspose(128, (5, 5), strides=(1, 1), padding='same', use_bias=False))
assert model.output_shape == (None, 7, 7, 128)
model.add(layers.BatchNormalization())
model.add(layers.LeakyReLU())
……
model.add(layers.Conv2DTranspose(1, (5, 5), strides=(2, 2), padding='same', use_bias=False, activation='tanh'))
assert model.output_shape == (None, 56, 56, 1)

return model

# 生成一个试试
generator = make_generator_model()
noise = tf.random.normal([1, 160])
generated_image = generator(noise, training=False)

因为我最终会放出全部源码,所以这个地方省略了几层相似的神经网络。

从结构上看,输入层是大小为160的一维噪点数据。然后通过Conv2DTranspose实现上采样,一层传递一层,生成变化的图像。最终到输出层,通过tanh激活函数,输出56×56组数据。这将会是我们要的像素点。

如果输出一下,生成器生成的图片。是下面这个样子。

这没错,一开始生成的图像,就是随机的像素噪点。它只有一个确定项,那就是56×56像素的尺寸。

这就可以了。它已经通过复杂的神经网络,生成图片了。这个生成器有脑细胞,但刚出生,啥也不懂。

这就像是艺术家第一步能绘制线条了。如果想要画好猫,那就得找评论家多去沟通。

2.5 鉴别器

我们来建立一个鉴别器。用于判断一张动漫头像是不是真的。

def make_discriminator_model():
model
= tf.keras.Sequential()
model.add(layers.Conv2D(64, (5, 5), strides=(2, 2), padding='same', input_shape=[56, 56, 1]))
model.add(layers.LeakyReLU())
model.add(layers.Dropout(0.3))

model.add(layers.Conv2D(128, (5, 5), strides=(2, 2), padding='same'))
model.add(layers.LeakyReLU())
model.add(layers.Dropout(0.3))

model.add(layers.Flatten())
model.add(layers.Dense(1))

return model

# 鉴别上一个生成的噪点图片generated_image试试
discriminator = make_discriminator_model()
decision = discriminator(generated_image)

我们来看一下这个模型。它的输入形状是(56, 56, 1)。也就是前期准备的数据集的形状。它的输出形状是(1),表示鉴别的结果。中间是两层卷积,用于把输入向输出聚拢。采用的是LeakyReLU激活函数。

我们把生成器生成的那个噪点图,鉴别一下,看看啥效果。

tf.Tensor([[0.00207942]], shape=(1, 1), dtype=float32)

看这个输出结果,数值极小,表示可能性极低。

我们只是建立了一个空的模型。并没有训练。它这时就判断出了不是动漫头像。倒不是因为它智能,而是它看啥都是假的。它现在也是个小白。

下面就该训练训练了。

2.6 训练数据

开练!GAN!

cross_entropy = tf.keras.losses.BinaryCrossentropy(from_logits=True)

def discriminator_loss(real_output, fake_output):
real_loss = cross_entropy(tf.ones_like(real_output), real_output)
fake_loss = cross_entropy(tf.zeros_like(fake_output), fake_output)
total_loss = real_loss + fake_loss
return total_loss

def generator_loss(fake_output):
return cross_entropy(tf.ones_like(fake_output), fake_output)

……
@tf.function
def train_step(images):

noise = tf.random.normal([BATCH_SIZE, noise_dim])

with tf.GradientTape() as gen_tape, tf.GradientTape() as disc_tape:
generated_images = generator(noise, training=True)

real_output = discriminator(images, training=True)
fake_output = discriminator(generated_images, training=True)

gen_loss = generator_loss(fake_output)
disc_loss = discriminator_loss(real_output, fake_output)

gradients_of_generator = gen_tape.gradient(gen_loss, generator.trainable_variables)
gradients_of_discriminator = disc_tape.gradient(disc_loss, discriminator.trainable_variables)

generator_optimizer.apply_gradients(zip(gradients_of_generator, generator.trainable_variables))
discriminator_optimizer.apply_gradients(zip(gradients_of_discriminator, discriminator.trainable_variables))

for epoch in range(500):
for image_batch in dataset:
train_step(image_batch)

同样,我还是只放出了部分关键代码。不然影响你的阅读。最后我会开源这个项目,不要着急。

我们来分析原理,一定要反复看,精彩和烧脑程度堪比《三国演义》。我连图片都不敢加,怕打断你的思绪。

首先看损失函数。

算法训练的一个途径,就是让损失函数的值越变越小。损失函数表示差距,预测的差距和实际差距缩小,表示预测变准。

先看一下生成器的损失函数。位置在代码中的generator_loss部分。它返回两个数据之间的差距。第一个数是造假的结果fake_output,这个结果是鉴别器给的。另一个数据是标准的成功结果。随着训练的进行,算法框架会让这个函数的值往小了变。那其实就是让生成器预测出来的数据,同鉴别器判断出来的结果,两者之间的差距变得越来越小。这一番操作,也就是让框架留意,如果整体趋势是生成器欺骗鉴别器的能力增强,那就加分。

再看鉴别器的损失函数。也就是代码中的discriminator_loss函数。它这里稍微复杂一些。我们看到它的值是real_lossfake_loss,是两项损失值的总和。real_lossreal_output和标准答案的差距。fake_lossfake_output和标准答案的差距。

那这两个值又是怎么来的呢?得去train_step函数里看。real_output是鉴别器对训练数据的判断。fake_loss是鉴别器对生成器造假结果的判断。看到这里,我感叹人工智能的心机之重。它什么都要。

随着大量学习资料的循环,它告诉人工智能框架,它要锻炼自己对现有学习材料鉴别的能力。如果自己猜对了学习资料,也就是那20000张动漫头像。请提醒我,我要调整自己的见识,修改内部参数。代码中定义的training=True,意思就是可随着训练自动调节参数。

同时,伴着它学习现有资料的过程中,它还要实践。它还要去判断生成器是不是造假了。它也告诉框架,我要以我现在学到的鉴别能力,去判断那小子造的图假不假。

因为人工智能要想办法让损失函数变小。因此得让fake_loss的值变小,才能保证discriminator_loss整体变小。于是,框架又去找生成器。告诉它,鉴别器又学习了一批新知识,现在人家识别造假的能力增强了。不过,我可以偷偷地告诉你,它学了这个还有那个。这么一来,生成器造假的本领,也增强了。

如此循环往复。框架相当于一个“挑唆者”。一边让鉴别器提高鉴别能力,一边也告诉生成器如何实现更高级的造假。最终,世间所有的知识,两方全部都学到了。鉴别器再也没有新的知识可以学习。生成器的造假,鉴别器全部认可,也不需要再有新的造假方案。所有防伪知识全透明

这时AIGC就成功了。

2.7 自动生成

我对20000张动漫图片训练了500轮。每一轮都打印一个九宫格的大头贴。最终我们可以看到这500轮的演变效果。这张图大约25秒,只播放一遍(如果放完了,拖出来再看),需要耐心看。

从动态图看,整体趋势是往画面更清晰的方向发展的。

动图比较快,我放上一张静态图。这完全是由人工智能生成的图片。

生成的代码很简单。

# 加载训练模型
if os.path.exists(checkpoint_dir+"/checkpoint"):
checkpoint.restore(tf.train.latest_checkpoint(checkpoint_dir))

# 生成噪点作为输入
test_input = tf.random.normal([1, 160])
# 交给生成器批量生成
predictions = generator(test_input, training=False)
# 取出一张结果
img_arr = predictions[0][:, :, 0]
# 将结果复原成图片像素色值数据
img_arr = img_arr* 127.5 + 127.5

这是20000张图,500轮训练的效果。如果是百万张图片,几千轮训练呢?完全仿真很简单。

项目开源地址:gitee.com/bigcool/gan…

三、我们对AIGC该有的态度

AIGC的火爆出圈,引起全球的强烈讨论。很多地方甚至打算立法,禁止学生使用它做作业。

虽然我说了这么多。可能直到现在,依然有人觉得这是噱头:我的工作这么高级,是有灵魂的工作,人工智能写文章能比我通顺?它还写代码?它懂逻辑吗?

国外有一个IT老哥叫David Gewirtz。他从1982年开始就写代码,干了40多年,也在苹果公司待过。他以为用ChatGPT写代码不会有啥惊喜。直到出现结果,却吓了他一大跳。

他的需求是给它老婆写一个网站的插件,用于挑选顾客,并滚动顾客的名字展示。这个需要几天完成的工作,ChatGPT很快就完成了。而且代码纯粹简洁,极其规范。它还告诉你该操作哪个文件,该如何部署

现阶段的人工智能,可能没有自己的思考,但是它有自己的计算。

你会写文章,因为你读过300多本书,并且记住了里面20%的内容。这些让你引以为傲。但是人工智能,它读过人类历史上出现过的所有文献,只要硬盘够,它全部都能记住。而且它还不停对这些内容做分析、加工、整理:这里和这里有关联,这里和那里都是在介绍橙子的营养成分。它通过计算,让一切知识发生互联互通。

当有人向人工智能表示人类的担忧时,人工智能也给出了自己的回答。

我比较赞同它的观点。

抱有其他观点的人,主要担心有了人工智能,人类就会变得不动脑子了。时间长就废了。

我觉得,这些都是工具。相机出来的时候,也是被画家抵制,因为成像太简单了。现在想想,太简单有问题吗?没有!同样的还有计算器之于算盘,打字之于手写。甚至TensorFlow 2.0出来时,也被1.0的用户抵制。他们说开发太简单了,这让开发者根本接触不到底层。殊不知,1.0出来的时候,那些写汇编语言的开发者也想,他们堕落了,居然不操作寄存器。

其实,我感觉这些担心是多余的。每个时代都有会属于自己时代的产物。就像现在我们不用毛笔写字了,但是我们的祖先也没有敲过键盘呀!可能下一个时代的人,连键盘也不敲了。


作者:TF男孩
链接:https://juejin.cn/post/7197792292084940858
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Android音频播放AudioTrick详解

Android 中常用的播放音频的接口有MediaPlayer、AudioTrack和SoundPool,音频的渲染最常用的是AudioTrack和OpenSL ES ,下面将介绍下AudioTrack相关知识,主要内容如下: AudioTrack介绍 Au...
继续阅读 »

Android 中常用的播放音频的接口有MediaPlayerAudioTrackSoundPool,音频的渲染最常用的是AudioTrackOpenSL ES ,下面将介绍下AudioTrack相关知识,主要内容如下:



  1. AudioTrack介绍

  2. AudioTrack的创建

  3. AudioTrack音频数据写入

  4. AudioTrack生命周期

  5. AudioTrack的使用


AudioTrack介绍


AudioTrack用来点播放原始 pcm格式的音频数据,AudioTrack有两种播放模式:



  • MODE_STATIC:这种模式会将音频数据一次写入音频缓冲区,适合处理内存少及尽可能小的延迟播放的短声音场景,如播放的游戏音效、铃声、系统提示音等,此时这种模式开销最小。

  • MODE_STREAM:这种模式会不断的写入音频数据,适用于需要不断接受音频数据的场景,这种模式主要是由于某些音频数据持续时间长、或者音频特性(高采样率、更高位深等)导致不能一次性写入内存而出现的,正常播放 PCM原始音频数据就选择这种模式。


MediaPlayer相比较,MediaPlayer可以播放不同类型、不同格式的声音文件,会在底层创建与之对应的音频解码器,而AudioTrack只接收PCM原始音频数据,MediaPlayer在底层还是会创建AudioTrack,把解码后的PCM数流传递给AudioTrackAudioTrack再传递给AudioFlinger进行混音,然后才传递给硬件播放。


AudioTrack的创建


AudioTrack的创建使用如下方式:


// Android5.0开始
AudioTrack(
attributes: AudioAttributes!,
format: AudioFormat!,
bufferSizeInBytes: Int,
mode: Int,
sessionId: Int)

上面构造方法对应的参数含义如下:



  • attributes:表示音频流信息的属性集合,自从 Android5.0 开始使用AudioAttributes来取代流类型的设置,可以比流类型设置传达更多信息,常用来设置音频的用途、音频的内容等。

  • format:表示AudioTrack 接受的音频格式,对于线性 PCM来说,反应每个样本大小(8、16、32位)及表现形式(整型、浮点型),音频格式定义在AudioFormat中,常见的音频数据格式中只有AudioFormat.ENCODING_PCM_16BIT可以保证在所有的设备上正常使用,像AudioFormat.ENCODING_PCM_8BIT不能保证在所有设备上正常使用。

  • bufferSizeInBytes:表示音频数据缓冲区的大小,单位事字节,其大小一般是音频帧大小的非零倍数,如果播放模式是MODE_STATIC,则缓冲区大小是本次播放的音频的大小,如果播放模式是MODE_STREAM,则缓冲区大小不能小于最小缓冲区大小,也就是不能小于getMinBufferSize返回的大小。

  • mode:表示播放模式,AudioTrack提供了MODE_STATICMODE_STREAM两种方式,MODE_STATIC会将音频资源一次性写入音频缓冲区,适用于铃声、系统提示音等延时小、音频资源内存占用少的场景,,MODE_STREAM则适用于需要不断通过write方法写入数据的场景,相较MODE_STATIC会有一定延时,但是可以持续不断的接收音频数据。

  • sessionId:音频会话 Id,这里使用AudioManager.AUDIO_SESSION_ID_GENERATE有底层音频框架自己生成sessionId


AudioTrack音频数据写入


无论是流模式(STREAM_MODE)还是静态缓冲模式(STATIC_MODE)模式,都需通过write方式写入音频数据来进行播放,主要的write方式如下:


// AudioTrack构造函数中指定的格式应为AudioFormat#ENCODING_PCM_8BIT
open fun write(audioData: ByteArray, offsetInBytes: Int, sizeInBytes: Int): Int
// AudioTrack构造函数中指定的格式应为AudioFormat#ENCODING_PCM_16BIT
open fun write(audioData: ShortArray, offsetInShorts: Int, sizeInShorts: Int): Int
// AudioTrack构造函数中指定的格式应为AudioFormat#ENCODING_PCM_FLOAT
open fun write(audioData: FloatArray, offsetInFloats: Int, sizeInFloats: Int, writeMode: Int): Int

写入音频数据的返回值大于等于 0,读取音频数据常见异常如下:



  1. ERROR_INVALID_OPERATION:表示AudioTrack 未初始化。

  2. ERROR_BAD_VALUE:表示参数无效。

  3. ERROR_DEAD_OBJECT:表示已经传输了一些音频数据的情况下不返回错误码,将在下次 write返回处返回错误码。


这个跟AudioRecord中的 read 函数有点类似,具体细节查看官方文档。


AudioTrack生命周期


AudioTrack的生命周期主要是STATE_UNINITIALIZEDSTATE_INITIALIZEDSTATE_NO_STATIC_DATA,其中STATE_INITIALIZED对应STREAM_MODESTATE_NO_STATIC_DATA对应STATIC_MODE,至于播放状态不怎么重要,如下图所示:



AudioTrack的使用


AudioTrack的使用主要就是从PCM文件中读取数据,然后将读取到的音频写入AudioTrack进行播放,其关键代码如下:


// 初始化AudioTrack
private fun initAudioTrack() {
bufferSize = AudioTrack
.getMinBufferSize(SAMPLE_RATE, CHANNEL_CONFIG, AUDIO_FORMAT)
attributes = AudioAttributes.Builder()
.setUsage(AudioAttributes.USAGE_MEDIA) // 设置音频的用途
.setContentType(AudioAttributes.CONTENT_TYPE_MUSIC) // 设置音频的内容类型
.build()
audioFormat = AudioFormat.Builder()
.setSampleRate(SAMPLE_RATE)
.setChannelMask(AudioFormat.CHANNEL_OUT_MONO)
.setEncoding(AudioFormat.ENCODING_PCM_16BIT)
.build()
audioTrack = AudioTrack(
attributes, audioFormat, bufferSize,
AudioTrack.MODE_STREAM, AudioManager.AUDIO_SESSION_ID_GENERATE
)
}
// AudioTrack写入音频数据
private fun writeAudioData(){
scope.launch(Dispatchers.IO){
val pcmFile = File(pcmFilePath)
val ins = FileInputStream(pcmFile)
val bytes = ByteArray(bufferSize)
var len: Int
while (ins.read(bytes).also { len = it } > 0){
audioTrack.write(bytes, 0, len)
}
audioTrack.stop()
}
}
// 开始播放
private fun start(){
audioTrack.play()
writeAudioData()
}

AudioTrack的使用基本如上,AudioTrack播放音频的相关代码可以在回复关键字【audiotrack】关键字获取,案例中用到的本地PCM文件可以回复关键字【pcm】获取。


作者:躬行之
链接:https://juejin.cn/post/7204485453570867259
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Android 完整的apk打包流程

在Android Studio中,我们需要打一个apk包,可以在Gradle task 任务中选一个 assembleDebug/assembleRelease 任务, 控制台上就可以看到所有的构建相关task: 可以看到,这么多个task任务,执行是有...
继续阅读 »

在Android Studio中,我们需要打一个apk包,可以在Gradle task 任务中选一个
assembleDebug/assembleRelease 任务,


企业微信截图_fa2194a8-735e-4720-91be-81fd2524d20f.png


控制台上就可以看到所有的构建相关task:


截屏2023-03-05 20.48.57.png
截屏2023-03-05 20.49.28.png
可以看到,这么多个task任务,执行是有先后顺序的,其实主要就是以下步骤:


//aidl 转换aidl文件为java文件
> Task :app:compileDebugAidl

//生成BuildConfig文件
> Task :app:generateDebugBuildConfig

//获取gradle中配置的资源文件
> Task :app:generateDebugResValues

// merge资源文件
> Task :app:mergeDebugResources

// merge assets文件
> Task :app:mergeDebugAssets
> Task :app:compressDebugAssets

// merge所有的manifest文件
> Task :app:processDebugManifest

//AAPT 生成R文件
> Task :app:processDebugResources

//编译kotlin文件
> Task :app:compileDebugKotlin

//javac 编译java文件
> Task :app:compileDebugJavaWithJavac

//转换class文件为dex文件
> Task :app:dexBuilderDebug

//打包成apk并签名
> Task :app:packageDebug

依靠这些关键步骤最后就能打包出一个apk。


首先看


第一步:aidl(编译aidl文件)


将项目中的aidl文件编译为java文件,AIDL用于进程间通信


第二步:生成BuildConfig文件


在项目中配置了
buildConfigField等信息,会在BuildConfig class类里以静态属性的方式展示:


截屏2023-03-05 21.09.18.png


第三步:合并Resources、assets、manifest、so等资源文件


在我们的项目中会依赖不同的库、组件,也会有多渠道的需求,所以merge这一步操作就是将不同地方的资源文件进行整合。
多个manifest文件也需要整理成一个完整的文件,所以如果有属性冲突这一步就会报错。资源文件也会整理分类到不同的分辨率目录中。


资源处理用的工具是aapt/aapt2


注意AGP3.0.0之后默认通过AAPT2来编译资源,AAPT2支持了增量更新,大大提升了效率。


AAPT 工具负责编译项目中的这些资源文件,所有资源文件会被编译处理,XML 文件(drawable 图片除外)会被编译成二进制文件,所以解压 apk 之后无法直接打开 XML 文件。但是 assets 和 raw 目录下的资源并不会被编译,会被原封不动的打包到 apk 压缩包中。
资源文件编译之后的产物包括两部分:resources.arsc 文件和一个 R.java。前者保存的是一个资源索引表,后者定义了各个资源 ID 常量。这两者结合就可以在代码中找到对应的资源引用。比如如下的 R.java 文件:


截屏2023-03-05 21.19.59.png
实际上被打包到 apk 中的还有一些其他资源,比如 AndroidManifest.xml 清单文件和三方库中使用的动态库 .so 文件。


第四步:编译java文件(用到的工具 javac )


1、java文件包含之前提到的AIDL 生成的java文件


2、java代码部份:通过Java Compiler 编译项目中所有的Java代码,包括R.java.aidl文件生成的.java文件、Java源文件,生成.class文件。在对应的build目录下可以找到相关的代码


3、kotlin代码部份:通过Kotlin Compiler编译项目中的所有Kotlin代码,生成.class文件


注:注解处理器(APT,KAPT)生成代码也是在这个阶段生成的。当注解的生命周期被设置为CLASS的时候,就代表该注解会在编译class文件的时候生效,并且生成java源文件和Class字节码文件。

第五步: Class文件打包成DEX(dx/r8/d8等工具编译class文件)


image.png



  • 在原来 dx是最早的转换工具,用于转换class文件为dex文件。

  • Android Studio 3.1之后,引入了D8编译器和 R8 工具。

  • Android Studio 3.4之后,默认开启 R8
    具体的区别可以点击看看


注意:JVM 和 Dalvik(ART) 的区别:JVM执行的是.class文件、Dalvik和ART执行的.dex文件。具体的区别可以点击看看


而在编译class文件过程也常用于编译插桩,比如ASM,通过直接操作字节码文件完成代码修改或生成。


第六步:apkbuilder/zipflinger(生成APK包)


这一步就是生成APK文件,将manifest文件、resources文件、dex文件、assets文件等等打包成一个压缩包,也就是apk文件。
在老版本使用的工具是apkbuilder,新版本用的是 zipflinger
而在AGP3.6.0之后,使用zipflinger作为默认打包工具来构建APK,以提高构建速度。


第七步: zipalign(对齐处理)


对齐是Android apk 很重要的优化,它会使 APK 中的所有未压缩数据(例如图片或原始文件)在 4 字节边界上对齐。这使得CPU读写就会更高效。


也就是使用工具 zipalign 对 apk 中的未压缩资源(图片、视频等)进行对齐操作,让资源按照 4 字节的边界进行对齐。这种思想同 Java 对象内存布局中的对齐空间非常类似,主要是为了加快资源的访问速度。如果每个资源的开始位置都是上一个资源之后的 4n 字节,那么访问下一个资源就不用遍历,直接跳到 4n 字节处判断是不是一个新的资源即可。


第八步: apk 签名


没有签名的apk 无法安装,也无法发布到应用市场。


大家比较熟知的签名工具是JDK提供的jarsigner,而apksignerGoogle专门为Android提供的签名和签证工具。


其区别就在于jarsigner只能进行v1签名,而apksigner可以进行v2v3v4签名。



  • v1签名


v1签名方式主要是利用META-INFO文件夹中的三个文件。


首先,将apk中除了META-INFO文件夹中的所有文件进行进行摘要写到 META-INFO/MANIFEST.MF;然后计算MANIFEST.MF文件的摘要写到CERT.SF;最后计算CERT.SF的摘要,使用私钥计算签名,将签名和开发者证书写到CERT.RSA。


所以META-INFO文件夹中这三个文件就能保证apk不会被修改。



  • v2签名


Android7.0之后,推出了v2签名,为了解决v1签名速度慢以及签名不完整的问题。


apk本质上是一个压缩包,而压缩包文件格式一般分为三块:


文件数据区,中央目录结果,中央目录结束节。


而v2要做的就是,在文件中插入一个APK签名分块,位于中央目录部分之前,如下图:


图片


这样处理之后,文件就完成无法修改了,这也是为什么 zipalign(对齐处理) 要在签名之前完成。



  • v3签名


Android 9 推出了v3签名方案,和v2签名方式基本相同,不同的是在v3签名分块中添加了有关受支持的sdk版本和新旧签名信息,可以用作签名替换升级。



  • v4签名


Android 11 推出了v4签名方案。


最后,apk得以完成打包


PMS 在安装过程中会检查 apk 中的签名证书的合法性,具体安装apk内容稍后介绍。


apk内容包含如下:


截屏2023-03-05 22.01.14.png


总体的打包流程图如下:


截屏2023-03-05 22.02.33.png


作者:大强Dev
链接:https://juejin.cn/post/7206998548343668796
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

彻底销毁!这地10亿条个人涉疫数据被清理

过去三年,健康码作为精准防疫的重要数字工具,在大众的工作和生活中渗透率极高。有数据表明,此前我国有近9亿人申领了“健康码”,使用次数超600亿次。不过随着疫情防控政策放开,健康码消失、行程卡下线,每天几乎都要扫码的“特殊时期”已然过去,后续如何处理在此期间积累...
继续阅读 »

过去三年,健康码作为精准防疫的重要数字工具,在大众的工作和生活中渗透率极高。有数据表明,此前我国有近9亿人申领了“健康码”,使用次数超600亿次。

不过随着疫情防控政策放开,健康码消失、行程卡下线,每天几乎都要扫码的“特殊时期”已然过去,后续如何处理在此期间积累的个人涉疫数据,逐渐成为关注焦点。

近期,素有“江南胜地”之称的江苏无锡,举办了一场“特别”的仪式,为这一问题提供了可行答案。

1、销毁10亿个人涉疫数据无锡开全国地级市先河

不久前江苏无锡市政府发文称,3月2日当地举行了涉疫个人数据销毁仪式,首批销毁10亿余条此前出于疫情防控及服务目的存储在城市大数据中心的个人信息数据。第三方审计机构和公证处也参与了当天的活动,确保数据彻底销毁、无法还原。

无锡此次销毁涉疫公民个人数据系全国地级市中首例。

据悉,无锡市相关负责人表示,此次销毁涉疫个人数据,主要出于四个方面的考量:

第一,体现了依法执政理念,依法依规删除目的已经实现的数据;

第二,保护了公民隐私,防止数字时代公民个人信息被盗用或滥用;

第三,防止了数据泄露,通过数据彻底销毁减少数据泄露的可能性;

第四,节约了存储空间,进一步提高存储效率。

以健康码为例,其采集的个人敏感数据包括,个人强关联信息(身-份-证-号-码、手机号码等)、个人健康信息(绿码)、详细的个人行程信息(场所码)、个人健康证明(核酸信息)以及疫苗接种信息等。

从网络安全角度看,健康码得以发挥作用,本质上是民众让渡了个人隐私权来支持全国的疫情防控。

因此,去年年底新冠防疫“新十条”出台,健康码基本失去作用后,就有业界人士呼吁:类似核酸信息、场所码等数据应该销毁、封存或脱敏。

一方面,大部分信息的采集是为了流调,有一定的时效性。过了时间节点,就没有留存的必要;另一方面,各地健康码管理平台会从社区、卫生机构、通信、交通运输等部门间接获取个人信息,这些信息一旦使用不当,就可能造成个人信息的泄露。

事实上,自去年12月以来,已有多个涉及个人涉疫数据的平台公开表示,将对相关数据进行销毁。

2022年12月13日,中国信息通信研究院发布通告称,根据国务院联防联控机制综合组有关要求,当日零时起,“通信行程卡”服务正式下线。中国信通院已按照有关法律法规规定,同步删除了行程卡相关所有数据,切实保障个人信息安全。

今年2月14日,广东省健康码“粤康码”发布服务公告称,按照国家新冠病毒感染防控政策措施优化调整要求,抗原自测、老幼助查、健康申报、电子证照、防疫工作台等服务于2月16日11时起停止服务。公告明确,停止相关服务后,“粤康码”将按照有关法律法规规定,彻底删除、销毁服务相关所有数据,切实保障个人信息安全。


来源:微博@羊城晚报

当然,像无锡这样举办数据销毁仪式的还是全国首例,以公开透明的方式来处理如此体量的个人数据,不仅更加干脆利落令人信服,也展现了政府捍卫个人隐私信息的态度与魄力。

2、“善后”争议,健康码功成身退还是转型他用

不过,由于健康码以各地自建为主,缺乏统一标准,因此在健康码下线后,相关数据到底如何“善后”,目前并没有定论。

除了像无锡、广东这样坚持销毁个人涉疫数据信息的做法之外,还有一部分城市则更倾向于借由健康码的庞大用户基础,与其他政务大数据融合,打造更多便民便企的应用服务。

那么这些数据到底是要功成身退还是转型他途?对此,业内专家也提出了截然不同的观点。

有人认为,在保护隐私的前提下充分利用也许更好。

“涉疫相关数据对各级政府来说是一笔宝贵财富,里面不但有成功知识和经验,也有失误教训,涉及精准管控、生活物资保障、民众出行和应急处置等方方面面。”大数据协同安全技术国家工程研究中心副主任钟力表示,数据销毁在数字经济时代可能并不是最佳的选择。数据作为生产要素,应该充分激活其价值,且现在信息技术为涉疫数据的存储、安全保护和分析利用提供了强大的技术基础。

也有人坚持,涉疫数据无论从法律还是伦理上都只能用于防疫目的,在疫情常态化后健康码收集的个人信息和数据就应该全部删除。

“不论数据存放在什么地方,总是离不开云端,而且存储就会产生成本。健康码数据作为特殊时期的一个‘应急产品’,即便是匿名化处理后,仍可能被部分机构用于其他目的或牟利。这种(情况)从法理和伦理层面都无法得到辩护。”华中科技大学生命伦理学研究中心执行主任雷瑞鹏如是说。

还有人则表示,健康码包含多领域敏感个人信息,必须用户自主单独同意后才能变更使用目的。

中国电子技术标准化研究院网安中心测评实验室副主任何延哲就持有上述立场。在他看来,如果不能达成用户自主单独同意这一先决条件,那么相关信息就必须删除或作匿名化处理。同时他还提到,健康码作为一个运行成熟的系统,下线不代表底层代码被删除。“我是赞成把数据删除,把代码保留。这样不仅保留了积攒的抗疫经验,也为以后的公共卫生应急系统提供一个更好的基础。”

3、代表建言献策,保护涉疫数据安全仍是当务之急

当下全国各地关于健康码个人数据是否留存依旧各执己见,采取实际行动进行涉疫数据销毁的地区也不算多,国家层面对此也并未出台统一规定。但无论结果如何,当务之急是要切实解决数据安全和隐私保护问题,防止数据窃取、泄露、滥用和不合规等安全事件。

关于这一点早有前车之鉴。比如,由于赋码不透明导致去年年中个别地区使用健康码红码限制民众正常出行,再比如,关于“疫情、红码”等相关钓鱼攻击和电信诈骗行为层出不穷,可以预见,在疫情防控放开的当下,这类行为还将长期存在,而健康码等信息的泄露无疑会让不法分子的行为变得可信度更高。

如何保障涉疫数据安全?大数据协同安全技术国家工程研究中心副主任钟力认为,应该从以下三个方面进行努力。

一是存储涉疫数据的大数据平台的安全,应支持数据全生命周期安全保护;二是做好涉疫数据相关数据处理活动的合规监管与安全监测,防止数据泄露、滥用和被攻击窃取等安全事件;三是安全管控涉疫数据的开发利用和流通共享,对原始数据需严格保护、严控使用,并采用隐私计算技术来支撑,更多的是提供去标识化、匿名化和静态脱敏的涉疫数据。

今年两会期间,关于健康码数据的处理问题,也有代表委员建言献策。

全国人大代表、德力西集团董事局主席胡成中提出,建议在国务院应急管理制度中增补健康码相关内容,明确其启用、停用的条件和权限,明确赋码规则,限时梳理并删除全国各级健康码数据。

全国政协委员、奇安信集团董事长齐向东也表示,健康码的数据需要删除或者做匿名化处理,即使要使用也必须先获得用户自主同意;有关运营部门要及时公开数据的流向、删除或者匿名化的有关情况。

总而言之,三年多来,公众将大量个人信息提交给健康码等系统,既是法律的要求,也是在主动履行协助防疫的社会责任。对此,有关部门如何处理这些数据的“善后”问题,不仅关乎个人隐私安全是否得到尊重和切实保护,也一定程度上影响着有关部门在民众心中的公信力。

参考链接:

http://www.inewsweek.cn/society/2023-03-06/17764.shtml

baijiahao.baidu.com/s?id=1759356399553406615

hackernews.cc/archives/43399

作者:千山
来源:mp.weixin.qq.com/s/qYbKIVCQxS1OMe-o3HXr-Q

收起阅读 »

一张架构图让我认识到前端的渺小

web
前言 大家好这里是阳九,一个文科转码的野路子码农,热衷于研究和手写前端工具. 今天我们不聊前端,咱们来聊聊后端,聊聊架构 目的是正视自己的地位和价值,在寒冬中保持清醒 借用若川大佬的一句话: 所知甚少,唯善学 先别问我到底是前端程序员还是后端程序员,我自己也...
继续阅读 »


前言


大家好这里是阳九,一个文科转码的野路子码农,热衷于研究和手写前端工具.


今天我们不聊前端,咱们来聊聊后端,聊聊架构


目的是正视自己的地位和价值,在寒冬中保持清醒


借用若川大佬的一句话: 所知甚少,唯善学




先别问我到底是前端程序员还是后端程序员,我自己也不知道。当然自己也很想在某个领域精进,但是业务嘛,咱们就是一块砖,哪里需要哪里搬,硬着头皮上呗


最近是在维护公司的业务引擎, 对其进行优化并添加功能,技术栈的话大体来讲, 前端是React+Node BFF,后端是GO (Gin框架+原生)


随着看后端代码的时间越来越长,作为一个切图仔,我越来越觉得恐怖。那是一种,看到了过于庞大的未知世界,并深深觉得自己的认知太少的恐怖。


因为这个项目是定制项目,通俗点来讲就是"改装车",不从头造车但是要改装,这里改改哪里改改,一旦改动的点多了,就需要你把整个项目的逻辑全部理顺。


于是乎我在这两个月里,里里外外看了几万行代码。也是硬着头皮把整个架构梳理了一遍。


先在这里放上一张整理出来的架构图


(当然这里根据原系统魔改了的很多地方,并进行了简化,并修改了名称,防止泄密,模块的大小差不多是以核心逻辑代码量来算的,前端的核心代码量有多少咱们前端er应该都懂)


XXX系统总架构图.jpg


本文目的


想通过一次后端架构分析, 让我们前端人意识到自己的不足与眼界的狭窄,我们前端er需要对一个完整的大型项目有一个整体的认知,意识到自己的不足,才能在这条路上更好的走下去。
不要满足于html拼拼页面,写写样式,做做一些简单的工作。


技术栈介绍


这里先简单介绍一下技术栈, 否则无法理解



  • 前端 React webpack antd redux ... 前端er都懂,以下省略

  • Koa框架 一个node后端框架

  • Gin框架 一个GO后端框架

  • Docker 容器引擎

  • K8S Docker集群管理

  • RabbitMQ 实现AMQP消息队列协议的代理软件,也就是消息队列,用于通信

  • GFS 分布式文件共享系统,用于大量数据访问

  • MongoDB 快读读取用数据库

  • Elastic Search 分布式数据库,进行大批量存储查询

  • SQL 传统关系型数据库

  • MobileSuit 后端框架工厂框架,用于创建独立Gin服务

  • 扩容服务 GO原生实现

  • 引擎 GO原生实现

  • 守护进程 GO原生实现


关于前端


看到左上角我特意标出来的那一小块红色的UI了吗?我们称之为 前端


数据库


mongo DB : 用于小体积数据的快速读取,用作数据中间传输(原生json,使用方便)


Elastic Search : 分布式数据库, 用于大体积,大批量数据存储和快速检索(动辄十几亿条数据,一条json数据几千个字段)


SQL: 用于存储不变的数据,比如国家信息,公司信息等等,重在稳定。


容器化部署


简单介绍一下什么是容器,当然我这里默认大家都懂。 容器提供了程序所需要运行的环境, 并将其独立隔离出来,


Docker:  是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中


k8s: 是 Google 开源的一个容器集群管理系统


架构中除了守护进程和引擎扩容服务,所有引擎,前后端服务,数据库服务都使用Docker进行容器化,并使用K8S进行统一管理。


image.png


引擎



  • 引擎扩容服务:可以在判断需要并能够提供多个引擎的时候,开启更多的引擎进行处理。

  • 树状引擎结构: 一个任务可能需要多个引擎协同参与, 而且下级引擎依赖上级引擎的结果

  • 上级引擎的结果需要经过调度服务,通过MQ进行消息传递,调度后再传递给下级引擎

  • 最终结果写入数据库


image.png


调度层




  • 任务调度器:提供任务优先级调度,任务状态管理,任务拆分,任务下放等功能




  • 结果处理器; 提供各引擎对应的结果处理解析功能,有大量的数据库查询,结果计算,字符串解析逻辑,体积非常庞大.




  • 当然优先级调度器和引擎结果处理服务是单独运行在Docker中,需要使用MQ和GFS,数据库进行数据交换




image.png


数据聚合层


也就是node写的BFF数据聚合层,将gin框架(gopher层)获取来的数据进行聚合,格式化成前端所需的数据结构,并提供前端接口。这里就不赘述了


gopher服务层


提供主体服务, 数据库IO等等,体量最大。提供了各种处理模块,接口等。


架构也是一个简单的类node三层架构,


(Router - controller - Service)
带上validator层和数据库操作层(与node中的Model层区别不大)


image.png


守护进程


原生GO写的守护进程,一个部署时直接运行在机器某端口的进程, 主要功能有3个


创建 - 监视 - 代理



  • 它将整个系统包裹起来, 用于监视各个容器的运行情况,

  • 提供了一个用于自动注册Gin框架路由的上级自研框架MobileSuit,系统的每个服务都会通过MS框架进行启动,生成一个Gin路由实例。 并挂载到总路由树上。


image.png



  • 守护进程包裹了所有的服务, 系统各个服务发出的请求都会首先被代理到守护进程上,守护进程将其统一拦截下来, 方便之后的统一请求代理处理。


image.png


对前端人和自己的话


不知道小伙伴们看到我整理出来的架构有什么看法?有没有认识到前端的渺小.
我们一定要正视自己的地位,在寒冬中保持清醒


再聊聊,为什么很多小伙伴会觉得 前端已死?


我想说的是,对比起后端,前端人在几年内吃了太多的互联网红利。这个行业可能需要自我净化,提升整体素质。


我见过包装3年实际一年,连vscode调试都不会的前端人拿很高的月薪。


也见过对算法,原理,底层,优化,都很熟悉的3-4年后端的人拿的不比我这个小外包高多少。


我们前端人一定要明白,普通前端的可替代性实在太强太强。


要么我们深入业务,要么我们深入原理。


对于真正学习计算机科学的人来说,什么webpack代码构建,babel编译,什么react链表结构,vue模板编译,这些看上去比较底层的东西,在他们眼里可能只是基本功,可能只是常识。


如果不深入原理,那么最终真的只能“前端已死”。



  • 想想在刚入行的时候,读了一下某开源工具的源码,我的反应是


“哇这架构好神奇,居然将三层类层层嵌套” “哇一个参数居然能通过观察者模式传三层”



  • 想想在刚入行的时候,看了一下react渲染的原理


"哇他们真聪明,居然能想到将大任务分成多个5ms小任务,运行在浏览器每一帧上,阻止卡顿"


跟一个后端/硬件的朋友讨论,他跟我说"这不是常识吗?调操作系统底层,5ms任务给你掐了"


现在看来,这不过是基础罢了。但很多前端er,连这些都搞不明白,就像原来的我一样。


毕竟,即便是深入了前端的原理,可能也只是到达了软件开发的基本水平吧。


还是借用那句话吧。
所知甚少,唯善学。


前端不会死的,它只是停止了狂奔。


作者:不月阳九
来源:juejin.cn/post/7207617774634451000
收起阅读 »

如何优雅地校验后端接口数据,不做前端背锅侠

web
背景 最近新接手了一批项目,还没来得及接新需求,一大堆bug就接踵而至,仔细一看,应该返回数组的字段返回了 null,或者没有返回,甚至返回了字符串 "null"??? 这我能忍?我立刻截图发到群里,用红框加大加粗重点标出。后端同学也积极响应,答应改正。 第...
继续阅读 »

背景


最近新接手了一批项目,还没来得及接新需求,一大堆bug就接踵而至,仔细一看,应该返回数组的字段返回了 null,或者没有返回,甚至返回了字符串 "null"???


这我能忍?我立刻截图发到群里,用红框加大加粗重点标出。后端同学也积极响应,答应改正。


image.png


第二天,同样的事情又在其他的项目上演,我只是一个小前端,为什么什么错都找我啊!!


日子不能再这样下去,于是我决定写一个工具来解决遇到 bug 永远在找前端的困境。


TypeScript 运行时校验


如何对接口数据进行校验呢,因为我们的项目是 React+TypeScript 写的,所以第一时间就想到了使用 TypeScript 进行数据校验。但是众所周知,TypeScript 用于编译时校验,有没有办法作用到运行时呢?


我还真找到了一些运行时类型校验的库:typescript-needs-types,大部分需要使用指定格式编写代码,相当于对项目进行重构,拿其中 star 最多的 zod 举例,代码如下。


import { z } from "zod";

const User = z.object({
username: z.string(),
});

User.parse({ username: "Ludwig" });

// extract the inferred type
type User = z.infer<typeof User>;
// { username: string }

我宁可查 bug 也不可能重构手里一大堆项目啊。此种方案 ❎。


此时看到了 typescript-json-schema 可以把 TypeScript 定义转为 JSON Schema ,然后再使用 JSON Schema 对数据进行校验就可以啦。这种方案比较灵活,且对代码入侵性较小。


搭建一个项目测试一下!


使用 npx create-react-app my-app --template typescript 快速创建一个 React+TS 项目。


首先安装依赖 npm install typescript-json-schema


创建类型文件 src/types/user.ts


export interface IUserInfo {
staffId: number
name: string
email: string
}

然后创建 src/types/index.ts 文件并引入刚才的类型。


import { IUserInfo } from './user';

interface ILabel {
id: number;
name: string;
color: string;
remark?: string;
}

type ILabelArray = ILabel[];

type IUserInfoAlias = IUserInfo;

接下来在 package.json 添加脚本


"scripts": {
// ...
"json": "typescript-json-schema src/types/index.ts '*' -o src/types/index.json --id=api --required --strictNullChecks"
}

然后运行 npm run json 可以看到新建了一个 src/types/index.json 文件(此步在已有项目中可能会报错报错,可以尝试在 json 命令中添加 --ignoreErrors 参数),打开文件可以看到已经成功转成了 JSON Schema 格式。


{
"$id": "api",
"$schema": "http://json-schema.org/draft-07/schema#",
"definitions": {
"ILabel": {
"properties": {
"color": {
"type": "string"
},
"id": {
"type": "number"
},
"name": {
"type": "string"
},
"remark": {
"type": "string"
}
},
"required": [
"color",
"id",
"name"
],
"type": "object"
},
"ILabelArray": {
"items": {
"$ref": "api#/definitions/ILabel"
},
"type": "array"
},
"IUserInfoAlias": {
"properties": {
"email": {
"type": "string"
},
"name": {
"type": "string"
},
"staffId": {
"type": "number"
}
},
"required": [
"email",
"name",
"staffId"
],
"type": "object"
}
}
}

使用 JSON Schema 校验数据


至于如何使用JSON Schema 校验数据,我找到了现成的库 ajv,至于为什么选择 ajv,主要是因为它说它很快,详见:github.com/ebdrup/json…


image.png


接下来尝试一下。我找到了中文版文档,有兴趣的可以去看下 http://www.febeacon.com/ajv-docs-zh…


先安装依赖 npm install ajv,然后创建文件 src/validate.ts


import Ajv from 'ajv';
import schema from './types/index.json';

const ajv = new Ajv({ schemas: [schema] });

export function validateDataByType(type: string, data: unknown) {
console.log(`开始校验,类型:${type}, 数据:`, data);

var validate = ajv.getSchema(`api#/definitions/${type}`);
if (validate) {
const valid = validate(data);
if (!valid) {
console.log('校验失败', validate.errors);
}
else {
console.log('校验成功');
}
}
}

接下来在 src/index.tsx 添加下面代码来测试一下。


validateDataByType('IUserInfoAlias', {
email: 'idonteatcookie@gmail.com',
name: 'idonteatcookie',
staffId: 12306
})

validateDataByType('IUserInfoAlias', {
email: 'idonteatcookie@gmail.com',
staffId: 12306
})

validateDataByType('IUserInfoAlias', {
email: 'idonteatcookie@gmail.com',
name: 'idonteatcookie',
staffId: '12306'
})

可以在控制台看到成功打印如下信息:


image.png


拦截请求


因为项目中发送请求都是调用统一封装的函数,所以我首先想到的是在函数中增加一层校验逻辑。但是这样的话就与项目代码耦合严重,换一个项目又要再写一份。我真的有好多项目QAQ。


那干脆拦截所有请求统一处理好了。


很容易的找到了拦截所有 XMLHttpRequest 请求的库 ajax-hook,可以非常简单地对请求做处理。


首先安装依赖 npm install ajax-hook,然后创建 src/interceptTool.ts


import { proxy } from 'ajax-hook';
export function intercept() {
// 获取 XMLHttpRequest 发送的请求
proxy({
onResponse: (response: any, handler: any) => {
console.log('xhr', response.response)
handler.next(response);
},
});
}

这样就拦截了所有的 XMLHttpRequest 发送的请求,但是我突然想到我们的项目,好像使用 fetch 发送的请求来着???


好叭,那就再拦截一遍 fetch 发送的请求。


export function intercept() {
// ...
const { fetch: originalFetch } = window;
// 获取 fetch 发送的请求
window.fetch = async (...args) => {
const response = await originalFetch(...args);
response.clone().json().then((data: { result: any }) => {
console.log('window.fetch', args, data);
return data;
});
return response;
};
}

为了证明拦截成功,使用 json-server 搭建一个本地 mock 服务器。首先安装 npm install json-server,然后在根目录创建文件 db.json


{
"user": { "staffId": 1, "name": "cookie1", "email": "cookie@cookie.com" },
"labels": [
{
"id": 1,
"name": "ck",
"color": "red",
"remark": "blabla"
},
{
"id": 2,
"color": "green"
}
]
}

再在 package.json 添加脚本


"scripts": {
"serve": "json-server --watch db.json -p 8000"
},

现在执行 npm run serve 就可以启动服务器了。在 src/index.tsx 增加调用接口的代码,并引入 src/interceptTool.ts


import { intercept } from './interceptTool';
// ... other code
intercept();

fetch('http://localhost:8000/user');

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8000/labels');
xhr.send();

image.png


可以看到两种请求都拦截成功了。


校验接口返回数据


胜利在望,只差最后一步,校验返回数据。我们校验数据需要提供两个关键信息,数据本身和对应的类型名,为了将两者对应起来,需要再创建一个映射文件,把 url 和类型名对应起来。


创建文件 src/urlMapType.ts 然后添加内容


export const urlMapType = {
'http://localhost:8000/user': 'IUserInfoAlias',
'http://localhost:8000/labels': 'ILabelArray',
}

我们在 src/validate.ts 新增函数 validateDataByUrl


import { urlMapType } from './urlMapType';
// ...
export function validateDataByUrl(url: string, data: unknown) {
const type = urlMapType[url as keyof typeof urlMapType];
if (!type) {
// 没有定义对应格式不进行校验
return;
}
console.log(`==== 开始校验 === url ${url}`);
validateDataByType(type, data);
}

然后在 src/interceptTool.ts 文件中引用


import { proxy } from 'ajax-hook';
import { validateDataByUrl } from './validate';

export function intercept() {
// 获取 XMLHttpRequest 发送的请求
proxy({
onResponse: (response, handler: any) => {
validateDataByUrl(response.config.url, JSON.parse(response.response));
handler.next(response);
},
});

const { fetch: originalFetch } = window;
// 获取 fetch 发送的请求
window.fetch = async (...args) => {
const response = await originalFetch(...args);
response.json().then((data: any) => {
validateDataByUrl(args[0] as string, data);
return data;
});
return response;
};
}

现在可以在控制台看到接口数据校验的接口辣~ ✿✿ヽ(°▽°)ノ✿


image.png


总结下流程图


image.png


后续规划


目前所做的事情,准确的说不是拦截,只是获取返回数据,然后对比打印校验结果,因为初步目标不涉及数据的处理。


后续会考虑对不合法的数据进行处理,比如应该返回数组但是返回了 null 的情况,如果能自动赋值 [],就可以防止前端页面崩溃的情况了。


参考资料




作者:我不吃饼干
来源:juejin.cn/post/7166061734803963917
收起阅读 »

GPT-3.5&速搭微信小程序

前言 想必大家都收到OpenAI开放了ChatGPT API的消息,之前的API也尝试过接入过个人微信号,给好基友们体验体验,但是效果不太好,已经被他们干废一个小号。 公众号又有三秒断连的机制,也就没写下去了,这次整个小程序。 ChatGPT API 先来看...
继续阅读 »

前言


想必大家都收到OpenAI开放了ChatGPT API的消息,之前的API也尝试过接入过个人微信号,给好基友们体验体验,但是效果不太好,已经被他们干废一个小号。


image.png


公众号又有三秒断连的机制,也就没写下去了,这次整个小程序。


ChatGPT API


先来看看ChatGPT API中我觉得最大的一个亮点:


  messages=[
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": "Who won the world series in 2020?"},
{"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."},
{"role": "user", "content": "Where was it played?"}
]
)

与之前不同的是,我们可以以数组的形式存储上下文消息,不用像之前那样,想要实现多轮对话就得把消息全拼在一起,同时还显式的定义了角色,role属性表示其所属的角色,其中system是定于接口的行为,在对话中可以先使用system进行格式化,比如【你是一个前端工程师】,而user和assistant则是表示用户输入消息以及模型输出消息。通过这些定义,可以使模型变得更加清晰明确。


了解完信息格式后,我们直接上代码跑一下


const { Configuration, OpenAIApi } = require("openai");
const configuration = new Configuration({
apiKey: "YOU APIKEY",
});
const openai = new OpenAIApi(configuration);
const chat = async (content) => {
try {
const {data: { choices },} = await openai.createChatCompletion({
model: "gpt-3.5-turbo",
messages: content,
});
return choices[0].message;
} catch (error) {
return error;
}
};
let content = [{ role: "user", content: "你好" }];
chat(content).then((res)=>{
console.log(res)
})

返回结果如下:


image.png
我们成功与ChatGPT进行了一次对话,不过在此之前,还需要接收前端发送过来的信息,所以我们在外面套一个express


express


const express = require("express");
const app = express();
app.use(express.json());

app.post("/chat", (req, res) => {
let content =req.body.content;
chat(content).then((data)=>{
res.send(data);
})
});
app.listen(8080, () => {
console.log("Server is running");
});

//const { Configuration ...
//const configuration ...
// ...

image.png


一个简单的接口就这样完成了。


关于其他参数的应用


目前我们只使用了model和messages参数,其中messages还可以选择性的去除对话中的信息,ChatGPT API是每次都要传输完整的上下文消息的,所以我们还可以与前端联动,选择删除一些无用的信息,保留有用的信息,提高回答的准确性。


n:一次性返回多个不同值,可以避免多次重复询问


logit_bias:调整特定词汇在结果中出现的可能性,可以实现减少重复和屏蔽特定词汇的功能


temperature/top_p:调整结果的相关性和准确性,可以在需要发散思维时使用,官方建议二者调整其中一个,不建议二者都调整。


这些参数也可以在前端通过发送指令的方式进行调整。


微信小程序


image.png


对话界面


我们基于messages来渲染对话界面


 <view wx:for="{{messages}}" wx:key="index" style="margin: 40rpx 0">
<view class="user" wx:if="{{item.role=='user'}}">
<image class="avatar" src="../../image/NO.0004.png"></image>
<text class="content" bindtap="copyText" data-text="{{item.content}}">{{
item.content
}}</text>
</view>
<view class="assistant" wx:if="{{item.role=='assistant'}}">
<image class="avatar" src="../../image/logo.png"></image>
<text class="content" bindtap="copyText" data-text="{{item.content}}">{{
item.content
}}</text>
</view>
</view>

通过flex-direction区分用户与ChatGPT


.user {
display: flex;
justify-content: space-evenly;
flex-direction: row-reverse;
}
.assistant {
display: flex;
justify-content: space-evenly;
}

发送事件


send函数主要流程是,把用户输入的信息push到messages,同时在界面中渲染,然后向api发送请求,返回信息后再push到messages中,同时在界面中渲染。


 send: function (e) {
if(!/^\s*$/.test(this.data.inputValue)){
let message = {"role": "user", "content":this.data.inputValue}
this.data.messages.push(message)
this.setData({
messages:this.data.messages,
inputValue:''
});
wx.request({
url: 'http://127.0.0.1:8080/chat',
method: 'POST',
data: {
content: this.data.messages,
},
header: {
'content-type': 'application/json'
},
success:(res)=>{
this.data.messages.push(res.data.message)
this.setData({
messages:this.data.messages
});
}
})
}else{
wx.showToast({
title: '输入不可为空',
duration: 500,
icon: 'none'
});
}

结尾


3月2号下午我写node的时候还能用,今天晚上写小程序时发现寄了,api应该是给墙了(一时间竟不知道哪边动的手),需要梯子。


关于send函数这里再细锁细琐,上面的传输方式随着聊天越聊越长,原方案是想发送给express做存储,前端每次只需要发送一条message,同时也能做聊天记录的保存,不过这不像在云开发中可以很方便的获取用户的openid,虽然可以用wx.login,但是今天是周五欸,下机。


代码先丢上去了
小程序代码


image.png


作者:Defineee
来源:juejin.cn/post/7206292770276163640
收起阅读 »

Spring Boot+微信小程序_保存微信登录者的个人信息

1. 前言 微信小程序开发平台,提供有一类 API,可以让开发者获取到微信登录用户的个人数据。这类 API 统称为开放接口。 Tip:微信小程序开发平台,会把微信登录用户的个人信息分为明文数据和敏感数据。 明文数据也称为公开数据,开发者可以直接获取到,如登录...
继续阅读 »

1. 前言


微信小程序开发平台,提供有一类 API,可以让开发者获取到微信登录用户的个人数据。这类 API 统称为开放接口



Tip:微信小程序开发平台,会把微信登录用户的个人信息分为明文数据敏感数据


明文数据也称为公开数据,开发者可以直接获取到,如登录者的昵称、头像……


敏感数据如电话号码、唯一标识符……等数据,只有高级认证开发者和经过登录者授权后才能解密获取到。



这一类 API较多,且 API之间功能有重叠之处,相互之间的区别较微小。有的适用于低版本,有的适用于高版本。


为了避免在使用时出现选择混乱,本文将通过具体应用案例介绍几个常用 API的使用。


2. 开放接口


开放接口是对一类 API的统称,开发者可以通过调用这类接口得到微信登录用户的授权或获取登录者的个人数据
开放接口又分成几个子类 API



  • 登录接口: 包括 wx.pluginLogin(Object args)wx.login(Object object)wx.checkSession(Object object) 几 个 API

  • 账号信息: 包括Object wx.getAccountInfoSync()此接口用来获取开发者的账号信息。

  • 用户信息: 包括 wx.getUserProfile(Object object)wx.getUserInfo(Object object)UserInfo。使用频率非常高的接口,常用于小程序中获取登录者个人公开数据。

  • 授权接口:wx.authorizeForMiniProgram(Object object)wx.authorize(Object object)


除上述列出的子类接口,还有收货地址、生物认证……等诸多子类 API,有兴趣者可以自行了解。


2.1 登录接口


登录接口中有 3API,对于开发者来说,使用频率较高的是 login接口,此环节将重点介绍此接口。



非本文特别关注的接口,会简略带过。



wx.pluginLogin(Object args):此接口只能在插件中可以调用,调用此接口获得插件用户的标志凭证code,插件可使用此凭证换取用于识别用户的唯一标识 OpenpId


用户不同、宿主小程序不同或插件不同的情况下,该标识均不相同,即当且仅当同一个用户在同一个宿主小程序中使用同一个插件时,OpenpId 才会相同。


对于一般开发者,此 接口用的不是很多,具体使用细节在此处也不做过多复述。



什么是 OpenId?


当微信用户登录公众号或小程序时,微信平台为每一个微信登录者分配的一个唯一标识符号。



2.1.1 wx.login(Object object)


功能描述:




  • 开发者使用此接口可以获取到微信登录者登录凭证(code)



    登录凭证具有临时性,也就是每次调用时都会不一样,所以code 只能使用一次。





  • 开发者可以通过临时code,再向微信接口服务器索取登录者的唯一标识符 OpenId、微信开发平台账号的唯一标识 UnionID(需要当前小程序已绑定到微信开放平台帐号)、以及会话密钥 session_key




那么,获取到的openIdsession_key对于开发者而言,有什么实质性的意义?




  • 根据 OpenId的唯一性特点,可以在微信用户第一次登录时,把OpenID保存在数据库或缓存中,在后续登录时,只需要检查用户的 OpenId是否存在于数据库或缓存中,便能实现自动登录功能。




  • session_key 也称会话密钥,用来解密微信登录者的敏感数据。



    后文将详细介绍。





如何获取OpenId


现通过一个简单案例,实现微信小程序端与开发者服务器之间的数据交互。以此了解开发者服务器如何通过微信小程序传递过来的用户临时 code换取到登录者的更多信息。


实现之前,先通过一个简易演示图了解其过程。


wx01.png


简单描述整个请求过程:



  • 微信用户打开微信小程序后,开发者在微信小程序中通过调用wx.login接口获取到临时登录凭证 code

  • 在微信小程序中调用 wx.request 接口向开发者服务器发送 http 请求,需要把登录凭证 code一并发送过去。

  • 开发者服务器使用发送过来的 code 以及开发者凭证信息向微信接口服务器索取微信登录者的 openIdsession_key


简而言之,就是 3 者(微信小程序、开发者服务器、微信接口服务器)之间的一个击鼓传花游戏。


开发流程:


第一步:项目结构分析


完整的系统由 2 个部分组成:




  • 微信小程序端 APP



    如对微信小程序开发不是很了解,请先阅读官方提供的相关文档。





  • 服务器端应用程序。



    本文的服务器端应用程序基于 Spring Boot开发平台。





本项目结构是标准的前后端分离模式,微信小程序是前端应用,服务器端应用程序为后台应用。


第二步:新建微信小程序(前端应用)


打开微信开发工具,新建一个名为 guokeai 的小程序项目 ,项目会初始化一个index 页面。在 index.js中编写如下代码。


//index.js
const app = getApp()
const httpRequest = require("../../utils/request.js")

Page({
data: {
isHasUserInfo: null,
userInfo: null
},
//启动时
onLoad: function () {
let this_ = this
/***
* 检查微信用户是否已经登录到后台服务器
* 已经登录的标志,数据库中存在 OPENID
*/

let code = null
//调用 login 接口
wx.login({
success: (res) => {
//得到登录用户的临时 code
code = res.code
//向开发者服务器发送请求
let api = "wx/getLoginCertificate"
let config = {
url: api,
method: "GET",
data: {
code: code
}
}
let promise = httpRequest.wxRequest(config)
promise.then(res => {
let isHas = null
// 有没有完整的微信登录者信息
isHas = res.data == 0 ? false : true
app.globalData.isHasUserInfo = isHas
this_.setData({
isHasUserInfo: isHas
})
}).catch(res => {
console.log("fail", res)
});
}
})
}
})

代码解释:



  • 一般会在微信小程序启动时,也就是在页面onload 函数中调用 wx.login接口,检查用户是否登录过。

  • http://127.0.0.1:8080/wx/getLoginCertificate开发者服务器提供的对外处理微信用户信息的接口。

  • 最后只是简单地输出开发者服务器端返回的数据。

  • httpRequest.wxRequest(config)是自定义的封装wx.request接口的请求组件。


function wxRequest(config) {
//返回的数据类型
let dataType = config.dataType == null ? "json" : config.dataType;
let responseType = config.responseType == null ? "text" : config.responseType;
//服务器基地址
let serverUrl = "http://127.0.0.1:8080/"
//超时
let timeout = config.timeout == null ? 50000 : config.timeout;
//目标地址,基地址+接口
let url = serverUrl + config.url;
//数据提交方式
let method = config.method == null ? "GET" : config.method;
//提交数据
let data = config.data == null ? null : config.data
//头信息
let header = {
// 默认值
'content-type': 'application/json',
'x-requested-with': 'XMLHttpRequest'
}
let sessionId = wx.getStorageSync('sessionId')
if (sessionId) {
header["cookie"] = sessionId
}
return new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data,
//返回的数据类型(json)
dataType: dataType,
enableCache: false,
enableHttp2: false,
enableQuic: false,
method: method,
header: header,
responseType: responseType,
timeout: timeout,
success: (res) => {
console.log("requestData", res)
if (res.cookies != null && res.cookies.length != 0)
wx.setStorageSync('sessionId', res.cookies[0])
resolve(res)
},
fail: (res) => {
console.log("requestException", res)
reject(res)
}
})
})
}

第三步:创建开发者服务器程序(后台应用)


本文使用 spring boot快速搭建后台应用程序。在项目的 pom.xml文件中除了必要的依赖包外,还需要添加以下 的依赖包。


<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.73</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.5.13</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.1</version>
</dependency>



  • fastjson阿里云提供的开源 JSON解析框架。



    微信小程序开发者服务器构建的项目结构,是标准的前后端分离模式。


    请求与响应时,数据交互常使用JSON格式。这时使用 fastjson 作为json解析器,当然,也可以选择其它的类似解析器。





  • httpclient 是一个http请求组件。




  • mysql-connector-java 本文案例使用 MySQL数据库,需要加载相应的驱动包。




  • mybatis-plus-boot-startermybatis-plus 依赖包。




在后台应用中编写处理器(响应)组件:


@RestController
@RequestMapping("/wx")
public class WxAction {
@Autowired
private IWxService wxService;
/***
* 获取到微信用户的 OPENID
*/

@GetMapping("/getLoginCertificate")
public String getLoginCertificate(@RequestParam("code") String code) throws Exception {
WxUserInfo wxInfo = this.wxService.getLoginCertificate(code);
//用户不存在,或者用户的信息不全
return wxInfo==null || wxInfo.getNickName()==null?"0":"1";
}

代码解释:



  • IWxService是处理器依赖的业务组件,提供有 getLoginCertificate()方法用来实现通过code微信接口服务器换取微信登录者的 openIdsession_key


编写业务组件:


@Service
public class WxService implements IWxService {
@Override
public WxUserInfo getLoginCertificate(String code) throws Exception {
//请求地址
String requestUrl = WxUtil.getWxServerUrl(code);
// 发送请求
String response = HttpClientUtils.getRequest(requestUrl);
//格式化JSON数据
WxUserInfo wxUserInfo = JSONObject.parseObject(response, WxUserInfo.class);
//检查数据库中是否存在 OPENID
WxUserInfo wxUserInfo_ = this.wxUserMapper.selectById(wxUserInfo.getOpenId());
if (wxUserInfo_ == null) {
//数据库中没有用户的 OPENID,添加到数据库中
this.wxUserMapper.insert(wxUserInfo);
} else {
if (!wxUserInfo.getSessionKey().equals(wxUserInfo_.getSessionKey())) {
//如果数据库保存的session_key和最新的session_key 不相同,则更新
wxUserInfo_.setSessionKey(wxUserInfo.getSessionKey());
this.wxUserMapper.updateById(wxUserInfo_);
}
}
return wxUserInfo_;
}
}

代码解释:




  • WxUtil 是自定义的一个工具组件,用来构建请求微信接口服务器url


    https://api.weixin.qq.com/sns/jscode2session微信接口服务器对外提供的接口,请求此接口时,需要提供 4 个请求数据。


    appid:小程序 appId。


    secret:小程序 appSecret。


    js_code:获取到的微信登录者的临时 code


    grant_type:授权类型,此处只需填写 authorization_code




public class WxUtil {
private final static String APP_ID = "微信小程序开发者申请的 appid";
private final static String APP_SECRET = "微信小程序开发者申请的 APP_SECRET";
//
private final static String WX_LOGIN_SERVER_URL = "https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code";
public static String getWxServerUrl(String code) throws IOException {
String url = MessageFormat.format(WX_LOGIN_SERVER_URL, new String[]{APP_ID, APP_SECRET, code});
return url;
}
}


  • HttpClientUtils也是一个自定义组件,用来向指定的服务器发送 http请求。


public class HttpClientUtils {
/**
* GET请求
*/

public static String getRequest(String url) throws Exception {
//HttpClient对象
CloseableHttpClient httpClient = HttpClients.createDefault();
CloseableHttpResponse response = null;
try {
HttpGet httpGet = new HttpGet(url);
response = httpClient.execute(httpGet);
//响应体
HttpEntity entity = response.getEntity();
if (entity != null) {
//格式化响应体
return EntityUtils.toString(entity);
}
} catch (ClientProtocolException e) {
throw e;
} catch (IOException e) {
throw e;
} finally {
response.close();
httpClient.close();
}
return null;
}
}


  • WxUserInfo 是自定义的数据封装类。微信接口服务器返回的数据是以JSON格式组装的,这里需要格式成对象数据,便于在 java中处理。本文使用 MyBatisPlus操作数据库,此类也对应数据库中的gk_wx_user表。


@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("gk_wx_user")
public class WxUserInfo {
//OPEN_id
@TableId(type = IdType.ASSIGN_ID, value = "open_id")
private String openId;
//会话密钥
@TableField(value = "session_key")
private String sessionKey;
//头像路径
@TableField("avatar_url")
private String avatarUrl;
//城市
private String city;
//国家
private String country;
//性别
private String gender;
//语言
private String language;
//昵称
@TableField("nick_name")
private String nickName;
//备注名或真实名
@TableField("real_name")
private String realName;
//省份
private String province;
//学生ID
@TableField("stu_id")
private Integer stuId;
}

MyBatis 数据库映射组件:


@Repository
public interface WxUserMapper extends BaseMapper<WxUserInfo> {

}

第四步:测试。


先启动后台应用程序,再启动微信小程序,可以在数据库表中查看到如下信息。


数据库.png


微信用户的openidsession_key已经保存到后台的数据库表中。


2.1.2 wx.checkSession(Object object)


官方文档中,有一段对 session_key的生命周期的描述。



  • session_key的生命周期有不确定性,可以使用 wx.login接口刷新 session_key。为了避免频繁调用 wx.login 接口,可以通过调用 wx.checkSession(Object object)接口判断session_key是否已经过期。

  • 当开发者在实现自定义登录态时,可以考虑以 session_key 有效期作为自身登录态有效期,也可以实现自定义的时效性策略。


wx.checkSession 的功能,可以使用此接口判断session_key是否过期。



  • 调用成功说明当前 session_key 未过期。

  • 调用失败说明 session_key 已过期。


2.2 用户信息接口


wx.login接口仅能获取到微信登录者的有限数据,如果想要获取到登录者的更多个人信息,可以使用用户信息接口中的相关API



  • wx.getUserProfile(Object object)。获取用户信息,页面产生点击事件(例如 buttonbindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo

  • wx.getUserInfo(Object object) 。和 wx.getUserProfile的功能一样,在基础库 2.10 的后续版本中,其功能已经被削弱。

  • UserInfo是用户信息封装类。


getUserProfile是从 基础库2.10.4版本开始支持的接口,该接口用来替换 wx.getUserInfo,意味着官方不建议再使用getUserInfo接口获取用户的个人信息。


下图是官方提供的 2 个接口的功能对比图。


接口调整.png


为了避免频繁弹窗,可以在第一次获取到用户信息后保存在数据库中以备以后所用。为了获取到用户的敏感数据,在后台要通过getUserProfile接口所获取的数据进行解密操作。


2.2.2 wx.getUserProfile


下面通过具体代码讲解如何保存微信登录者的个人数据。先了解一下整个数据获取的流程,这里直接截取官方提供的一张流程图。


解密码.jpg


获取微信登录者的个人信息,需要经过 2 个步骤。


签名效验:



  • 通过调用wx.getUserProfile接口获取数据时,接口会同时返回 rawDatasignature,其中 signature = sha1( rawData + session_key )

  • 开发者将 signaturerawData 发送到开发者服务器进行校验。服务器利用用户对应的 session_key 使用相同的算法计算出签名 signature2 ,比对signaturesignature2 即可校验数据的完整性。


解密加密数据:



  • 对称解密使用的算法为 AES-128-CBC,数据采用PKCS#7填充。

  • 对称解密的目标密文为 Base64_Decode(encryptedData)

  • 对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey16字节。

  • 对称解密算法初始向量 为Base64_Decode(iv),其中iv由数据接口返回。


具体编写实现。


**第一步:**在微信小程序端编码。


index.wxml页面中添加一个按钮,并注册bindtap事件。


<view>
<button bindtap="getUserProfile">获取用户数据</button>
</view>

index.js中添加一个名为getUserProfile的事件回调函数。为了避免不必要的弹窗,只有当后台没有获取到个人数据时,才调用wx.getUserProfile接口。


getUserProfile: function (e) {
let this_ = this
if (!this.data.isHasUserInfo) {
//如果服务器端没有保存完整的微信登录者信息
wx.getUserProfile({
desc: '需要完善您的资料!',
success: (res) => {
this_.setData({
//小程序中用来显示个人信息
userInfo: res.userInfo,
isHasUserInfo: true
})
//再次登录,因为 session_key 有生命中周期
wx.login({
success(res_) {
//保存到服务器端
let config = {
url: "wx/wxLogin",
method: "GET",
data: {
code: res_.code,
//明文数据
rawData: res.rawData,
//加密数据
encryptedData: res.encryptedData,
iv: res.iv,
//数字签名
signature: res.signature
}
}
let promise = httpRequest.wxRequest(config)
promise.then(res => {
//返回
console.log("wxLogin", res)
}).catch(res => {
console.log("fail", res)
});
}
})
}
})
}
}

服务器端代码:


pom.xml文件中添加如下依赖包,用来解密数据。


<dependency>
<groupId>org.bouncycastle</groupId>
<artifactId>bcprov-jdk16</artifactId>
<version>1.46</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.15</version>
</dependency>

在处理器类WxAction中添加wxLogin响应方法。


@RestController
@RequestMapping("/wx")
public class WxAction {
@Autowired
private IWxService wxService;
/***
*
* @param code
* @param rawData
* @param encryptedData
* @param iv
* @param signature
* @return
* @throws Exception
*/

@GetMapping("/wxLogin")
public WxUserInfo wxLogin(@RequestParam("code") String code, @RequestParam("rawData") String rawData,
@RequestParam("encryptedData") String encryptedData, @RequestParam("iv") String iv,
@RequestParam("signature") String signature)
throws Exception {
WxUserInfo wxInfo = this.wxService.getWxUserInfo(code, rawData, encryptedData, iv, signature);
return wxInfo;
}
}

业务代码:


小程序中传递过来的数据是经过base64编码以及加密的数据,需要使用 Base64解码字符串,再使用解密算法解密数据。先提供一个解密方法。


public String decrypt(String session_key, String iv, String encryptData) {

String decryptString = "";
//解码经过 base64 编码的字符串
byte[] sessionKeyByte = Base64.getDecoder().decode(session_key);
byte[] ivByte = Base64.getDecoder().decode(iv);
byte[] encryptDataByte = Base64.getDecoder().decode(encryptData);

try {
Security.addProvider(new BouncyCastleProvider());
Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding");
//得到密钥
Key key = new SecretKeySpec(sessionKeyByte, "AES");
//AES 加密算法
AlgorithmParameters algorithmParameters = AlgorithmParameters.getInstance("AES");
algorithmParameters.init(new IvParameterSpec(ivByte));
cipher.init(Cipher.DECRYPT_MODE, key, algorithmParameters);
byte[] bytes = cipher.doFinal(encryptDataByte);
decryptString = new String(bytes);
} catch (Exception e) {
e.printStackTrace();
}
return decryptString;
}

具体获取数据的业务实现:


@Override
public WxUserInfo getWxUserInfo(@NotNull String code, @NotNull String rawData, @NotNull String encryptedData, @NotNull String iv, @NotNull String signature) throws Exception {
//会话密钥
WxUserInfo wxUserInfo = this.getLoginCertificate(code);
String signature2 = DigestUtils.sha1Hex(rawData + wxUserInfo.getSessionKey());
if (!signature.equals(signature2)) {
throw new Exception("数字签名验证失败");
}
//数字签名验证成功,解密
String infos = this.decrypt(wxUserInfo.getSessionKey(), iv, encryptedData);
//反序列化 JSON 数据
WxUserInfo wxUserInfo_ = JSONObject.parseObject(infos, WxUserInfo.class);
wxUserInfo_.setSessionKey(wxUserInfo.getSessionKey());
wxUserInfo_.setOpenId(wxUserInfo.getOpenId());
//更新数据库
this.wxUserMapper.updateById(wxUserInfo_);
return wxUserInfo_;
}

测试,启动微信小程序和后台应用,在小程序中触发按钮事件。


wx03.png


在弹出的对话框中,选择允许


wx04.png


查看后台数据库表中的数据。


wx05.png


能够获取到的微信登录者个人信息都保存到了数据库表中。至于怎么使用这些数据,可以根据自己的业务需要定制。


3.总结


微信开发平台,提供有诸多接口,可以帮助开发者获取到有用的数据。本文主要介绍 wx.loginwx.getProfile接口,因篇幅所限,不能对其它接口做详细介绍 ,有兴趣者可以查阅官方文档。


官方文档只会对接口功能做些介绍 ,如要灵活运用这些接口,还需要结合实际需要演练一下,如此方能有切身体会。


作者:一枚大果壳
来源:juejin.cn/post/7098216504302403591
收起阅读 »

ChatGPT:时代赋予的机遇

背景 chatGPT是OpenAI公司开发的一款人工智能聊天机器人程序,在2022年11月开放给大众注册使用。 OpenAI公司的定位是一家非营利组织,但由于研发成本的需要,它在早期接受了马斯克等人的投资,后面又接受微软的投资。按照其创始人山姆·阿尔特曼所说,...
继续阅读 »

背景


chatGPT是OpenAI公司开发的一款人工智能聊天机器人程序,在2022年11月开放给大众注册使用。


OpenAI公司的定位是一家非营利组织,但由于研发成本的需要,它在早期接受了马斯克等人的投资,后面又接受微软的投资。按照其创始人山姆·阿尔特曼所说,在OpenAI盈利后,公司利润将会按照四个阶段推进。


第一阶段,先满足埃隆马斯克、彼得泰尔、雷德霍夫曼等首批投资者,让投资人收回成本(从这点看,马斯克说OpenAI丢了初心也能理解)。


第二阶段,微软将获得OpenAI 75%的利润,直到微软收回其130亿美元的投资。


第三阶段,在OpenAI的利润达到920亿美元后,微软在该公司的持股比例将下降到49%,剩余部分利润将由其他风险投资人和OpenAI员工分享。


第四阶段,在利润达到1500亿美元后,微软和其他风险投资者的股份将无偿转让给OpenAI非营利基金。


简单点理解,就是OpenAI先向微软借了130亿美元,抵押品就是股权。承诺赚钱了,用1500亿美元赎回来,要是没赚钱,公司就归你了。按照10%的收益算,这将是一个万亿美元的大市场。


注册


ChatGPT的注册需要一个邮箱账号,一个国外手机号(可以找一个可以获取国外手机验证码的平台),一个科学上网的工具。操作并不麻烦,但对于国内大部分人来说,注册还是有门槛的。


服务


ChatGPT目前对外服务主要有三块:免费版、plus订阅版以及api付费。



  • 免费版本:有时候会访问不了,能访问的时候,也经常不稳定。我自己测试,如果聊天框隔了一会没答复,下次发送内容就会出现异常,需要刷新页面才可以正常使用。

  • Plus 订阅版:20美元/月,保证服务稳定。

  • API付费:这是专门给开发人员使用的。你可以通过这API在国内搭建自己的chatGPT。价格的话目前并不便宜咯。总体价格在0.0005~0.1200美元/1k代币之间。1k约等于750个单词。除了语言模型,还有图像模型、微调模型和嵌入模型。详细内容请查看API地址:platform.openai.com/overview



现状


虽然现在还没有表现特别好的应用出来,但已经有一部分人赚到钱了。哪一部分呢?



  1. 帮助他人注册账号/贩卖账号chatGPT的。顺带卖“科学上网”工具。短期生意,最开始那一波,一个月能赚十多万,但不可持续,且存在违规风险。

  2. 对接chatGPT API,开发国内的ChatGPT。目前国内有一些服务,可以给大家免费使用一定额度,想继续使用就得付费购买,商业模式就是赚差价,可以肯定的是,随着模型的完善,价格会越来越便宜。早期能有一批用户留存,这个模式未来还是可期的。

  3. 做chatGPT的课程、训练营。教你怎么用chatGPT提高工作效率。目前市场还是很大的。有兴趣的可以一起搞。

  4. 通过chatGPT做代写服务。比如,代写论文,代写小说。还有代问问题的。

  5. 通过chatGPT到各种论坛回答问题。

  6. 很多企业/个人已经开始利用chatGPT来提高工作效率了。比如游戏公司可以利用AI画图,有些B端企业开始接入AI做客户服务。


未来


在浏览器刚刚出现的时候,网站是稀缺的。iPhone刚刚出来的时候,应用是稀缺的。一个新的技术出现,技术的底层靠大公司,而小公司的机会就是技术的应用创新。可以预见的是,通过chatGPT开发的应用会是机会。至于具体怎么做,需要我们谨慎探索。这里我们可以看看chatGPT给出的例子,看看他自己怎么说。



风险




  1. chatGPT只是工具,我们不能过于依赖工具,更不能让工具代替我们思考。




  2. chatGPT只是转述师,并不是专家。它的回答并不是原创的,而是整合网络上的资源然后进行转述,也就是说,它是会犯错的。而且很多错误是外行人看不出来,在某些情况下,这其实更危险。




  3. 利用这种翻墙的应用做服务赚钱,可能存在政策风险,建议大家谨慎探索。




作者:石云升
来源:juejin.cn/post/7206897281365803067
收起阅读 »

简单教你Intent如何传大数据

前言 最近想不出什么比较好的内容,但是碰到一个没毕业的小老弟问的问题,那就借机说说这个事。Intent如何传大数据?为什么是简单的说,因为这背后深入的话,有很多底层的细节包括设计思想,我也不敢说完全懂,但我知道当你用Intent传大数据报错的时候应该怎么解决,...
继续阅读 »

前言


最近想不出什么比较好的内容,但是碰到一个没毕业的小老弟问的问题,那就借机说说这个事。Intent如何传大数据?为什么是简单的说,因为这背后深入的话,有很多底层的细节包括设计思想,我也不敢说完全懂,但我知道当你用Intent传大数据报错的时候应该怎么解决,并且简单聊聊这背后所涉及到的东西。


Intent传大数据


平时可能不会发生这种问题,但比如我之前是做终端设备的,我的设备每秒都会生成一些数据,而长时间的话数据量自然大,这时当我跳到另外一个页面使用intent把数据传过去的时候,就会报错


我们调用


intent.putExtra("key", value) // value超过1M

会报错


android.os.TransactionTooLargeException: data parcel size xxx bytes

这里的xxx就是1M左右,告诉你传输的数据大小不能超过1M,有些话咱也不敢乱说,有点怕误人子弟。我这里是凭印象说的,如果有大佬看到我说错,请狠狠的纠正我。


这个错误描述是这么描述,但真的是限死1M吗,说到这个,就不得不提一样东西,Binder机制,先不要跑,这里不会详细讲Binder,只是提一嘴。


说到Binder那就会联系到mmap内存映射,你可以先简单理解成内存映射是分配一块空间给内核空间和用户空间共用,如果还是不好理解,就简单想成分配一块空间通信用,那在android中mmap分配的空间是多少呢?1M-4K。


那是不是说Intent传输的数据超过1M-4K就会报错,理论上是这样,但实际没到这个值,比如0.8M也可能会报错。所以你不能去走极限操作,比如你的数据到了1M,你觉得只要减少点数据,减到8K,应该就能过了,也许你自己测试是正常的,但是这很危险。


所以能不传大数据就不要传大数据,它的设计初衷也不是为了传大数据用的。如果真要传大数据,也不要走极限操作。


那怎么办,切莫着急,请听我慢慢讲。就这个Binder它是什么玩意,它是Android中独特的进程通信的方式,而Linux中进程通信的方式,在Android中同样也适用。进程间通信有很多方式,Binder、管道、共享内存等。为什么会有这么多种通信方式,因为每种通信方式都有自己的特点,要在不同的场合使用不同的通信方式。


为什么要提这个?因为要看懂这个问题,你需要知道Binder这种通信方式它有什么特点,它适合大量的数据传输吗?那你Binder又与我Intent何干,你抓周树人找我鲁迅干嘛~~所以这时候你就要知道Android四大组件之间是用什么方式通信的。


有点扯远了,现在可以来说说结论了,Binder没办法传大数据,我就1M不到你想怎样?当然它不止1M,只是Android在使用时限制了它只能最多用1M,内核的最大限制是4M。又有点扯远了,你不要想着怎么把限制扩大到4M,不要往这方面想。前面说了,不同的进程通信方式,有自己的特点,适用于某些特定的场景。那Binder不适用于传输大数据,我共享内存行不行?


所以就有了解决办法


bundle.putBinder()

有人可能一看觉得,这有什么不同,这在表面上看差别不大,实则内部大大的不同,bundle.putBinder()用了共享内存,所以能传大数据,那为什么这里会用共享内存,而putExtra不是呢?想搞清楚这个问题,就要看源码了。 这里就不深入去分析了,我怕劝退,不是劝退你们,是劝退我自己。有些东西是这样的,你要自己去看懂,看个大概就差不多,但是你要讲出来,那就要看得细致,而有些细节确实会劝退人。所以想了解为什么的,可以自己去看源码,不想看的,就知道这是怎么一回事就行。


那还有没有其它方式呢?当然有,你不懂共享内存,你写到本地缓存中,再从本地缓存中读取行不行?


办法有很多,如果你不知道这个问题怎么解决,你找不到你觉得可行的解决方案,甚至可以通过逻辑通过流程的方式去绕开这个问题。但是你要知道为什么会出现这样的问题,如果你没接触过进程通信,没接触过Binder,让你看一篇文章就能看懂我觉得不切实际,但是至少得知道是怎么一回事。


比如我只说bundle.putBinder()能解决这个问题,你一试,确实能解决,但是不知道为什么,你又怕会不会有其它问题。虽然这篇文章我一直在打擦边球,没有提任何的原理,但我觉得还是能大概让人知道为什么bundle.putBinder()能解决Intent传大数据,

作者:流浪汉kylin
来源:juejin.cn/post/7205138514870829116
你也就能放心去用了。

收起阅读 »

副业奇谈

本人是95前端菜鸟一枚,目前在广州打工混口饭吃。刚好换了工作,感觉生活节奏变得慢了下来,打了这么多年工总觉得想纪录些什么,怕以后自己老了忘记自己还有这么一些风流往事。书接上回。 楔子 在一家名为叹佬鸡煲餐馆的小桌子上,坐着我和他,榴莲鸡煲溢出的香味,让人垂涎...
继续阅读 »

本人是95前端菜鸟一枚,目前在广州打工混口饭吃。刚好换了工作,感觉生活节奏变得慢了下来,打了这么多年工总觉得想纪录些什么,怕以后自己老了忘记自己还有这么一些风流往事。书接上回。



楔子


在一家名为叹佬鸡煲餐馆的小桌子上,坐着我和他,榴莲鸡煲溢出的香味,让人垂涎欲滴,鸡肉和榴莲嫩滑的口感,仿佛让人重回到那个十七八岁的青春时光。他叫小润,高中时期经常带着我为非作歹,中午午休跑去打篮球,晚自习溜去操场趟草地上吹牛逼,最刻骨铭心的,还是晚自习偷偷溜去学校附近大厦最高层天台,再爬上去水塔仰望星空,俯视我们的高中,看着每个教室里面一个个奋发图强的同学,我丝毫没有半点做错事的羞愧,眼里只有天上的繁星,地下的灯光,还有旁边的那个他。


小聚


“小饿,我们95后的都已经老了,现在社会都是年轻人00后的天下,比学历能力,985、211一抓一大把,比耐力,我们身体大不如前,精力强壮的年轻人比比皆是...”


“难道你不行了?”


“你别打岔,你这一行不是也有一个35岁的梗吗,你这个前端开发岗位我了解过,是需要不断学习的,技术迭代如此之快,你跟的上吗?”


我默默的摇了摇头,诚然,我是跟不上的,vue2我都没学完vue3就已经出来了,不过我相信我还是极少数。因为我安于现状太久了,拿着不上不下的薪资,没有房贷车贷育儿的压力,不像以前住在城中村每天晚上睡觉听着管道排泄物的声音,没有压力,就没有动力,我就是这么一个充满惰性的人。


小润跟我是高中同学,那时我们的关系不错,但是毕业后各自去往自己的大学,有自己的生活,便没怎么联系了,这次出来也是近三年第一次小聚。他在一个比较老牌的做文具,做设备的大厂工作,主要内容是去一些大型物业竞标,为了竞争得到那个“标”,付出的也不少,陪酒送礼一样不落,但就算得到那个“标”,公司的绩效奖励分配制度却让小润很不满,所以他不禁感慨,“我们每个月累死累活得到的薪资,除去日常花销,本来就已经所剩不多,而且社会上还存在一种叫通货膨胀的东西,想想我们年龄越来越大,面临的职场危机,手上的筹码到底能不能支撑我们维持当前消费水平,过上自己想要的生活,这是一个比较大的问题。”我听得津津有味,虽然心里认为他的说法有点过度焦虑,但有这么一个意识,总是好的,小润看到我向他投向肯定的目光,便继续说道,“这几年我都在看书,其中看到一个企业家有一句创业名言————空手套白狼”。


空手套白狼


小润看着我一脸的疑惑,嘴角微微一笑,一脸正经的告诉我,“空手套白狼虽然百度翻译是个贬义词,但是在创业翻译过来就是用最低的成本,创造最大的价值。我想要做一些0成本,价值高,只需要付出时间的生意”。


“那么请问哪里有那么大的馅饼?”据我所知,现在谈起普通人做副业,想要0成本,要不就是什么做信息差买卖,或者视频搬运,网上一搜一大把,现在根本不是能真正获利的渠道了。当然,也可能有很多人的确做着0成本生意,闷声发大财


微信图片_20230307134118.jpg


小润从煲里夹了一块榴莲肉,放入嘴中品尝了几番后吞入腹中,真诚的向我道来,“之前你有跟我聊过你做的副业,上面的功能我看了,感觉你比较厉害,对小程序开发这一块也是比较熟悉。你有没有看过小区的停车场,白天的时候很多车位都是空闲的,极大部分都是车主开车上班,那么车子不就空闲起来了?我们可以做一个平台,让车主在平台上面登记,只要车位空闲,可以告诉平台某一个时间段空闲,让平台的其他需要在附近停车的用户看到,用户微信支付停留相对应的时间,这样不仅解决了车位紧张的问题,车位车主也能利用闲置的车位赚到一笔钱,平台也能进行抽成。”


我一听,陷入了沉思,感觉好像很有道理的样子,但又觉得哪里不对,“这种做法当然是不可能的,物业停车场大都是一个车牌对应一个停车位,不可能给别人钻这种空子。”


“那你说个der啊”


微信图片_20230307134254.jpg


“刚刚只是我在生活中发现的一些奇思妙想,就是利用闲置这个属性,接下来才是我要说的重点。你平时看街边上停着的电车多吗?”我点了点头,电车在广州这所大城市,那肯定是多的。突然,小润用筷子翻了翻鸡煲中的食物,一脸愤然的对着我说“我擦,那些肥牛都被你吃完了?”我又用筷子探寻了一下,的确,肥牛还真被我吃完了,软嫩的肥牛搭配着由榴莲和鸡煲化学反应产生的汤底,让我感觉到味蕾在跳动,入口即化,难以言喻,自然而然就多吃了几片,我尴尬又不失礼貌的问他,“要不多点一份?”


他笑了笑,摆了摆手,继续说道,“我的想法是将空闲的电车利用起来,做一个平台,平台的载体是小程序,像膜拜小程序一样,用户能找到附近的单车,而我们则是电车,但是我们不需要成本,因为在平台中,电车的信息是由车主自己主动上传上来的,所以就有两个群体,一个是车主,一个是需要用电车的用户。车主能在电车空闲的时间将电车上传到我们的平台,通过出租自己的电车进行赚钱,当出租的次数多了,不仅能回本,到时候或许还能赚点小钱。而普通用户想用电车的时候,根据小程序提供的定位,找到离他最近的那台电车,进行微信支付就能骑走,按照骑行时间进行收费,收费标准由电车车主自己提供。而我们平台的收入,则是对每笔订单进行抽成”。


我一听,又陷入了沉思,又感觉好像很有道理的样子,但又觉得哪里不对,咦,我为什么要说又?


QA



用户场景有哪些,用户需求多吗?



多,平时使用电车都是上班族居多,那上班族使用完电车后电车就闲置了,可以进行出租赚点奶茶钱,何乐而不为?况且平时下班我想去别的地方玩一下,也可以租一台电车去逛一逛,就再也不需要每个人都要买一台电车了。确实,之前去湛江游玩,也有电车提供出租,骑着电车到处逛逛吃吃,真的十分快乐,不过电车是由公司统一提供。



普通用户怎么开启这些电车呢,电车五花八门,难道要让车主统一购买我们提供的电锁进行控制?



目标电车当前只试行小牛和九号电车,用户需要开启电车的时候,在小程序可以找到电车车主联系方式,通过电话联系让他用电车钥匙开启电车,同时在小程序按下开启按钮告诉平台和用户已经开启,开始计费。用户骑行完电车后,用户致电车主进行结算并关闭电车。



客户借车后,将车的某些零件换改,偷窃,损坏,如何处理?例如将电瓶车电池换成低端电池,也能用,,但车主不知道?



这的确是个问题,我也在思考是否有必要弄押金,但是电车的押金弄小了没啥用,弄大了也不合适,没人想进行支付,所以如何平衡这个问题,是我们这个项目后续所要思考的。



用户把电车开到离起始点十万八千里,这样车主怎么找回自己的电车?



好问题,我也有想过,车主在上传电车到平台的时候,可以设置自己的使用类型,可以规定使用用户骑行归还到原位置,也可以不规定,全由车主自由设定



听起来好像真的可以落地,但是用户附近可用的电车如果多起来,在地图上展示密密麻麻,这个需要点技术,我得研究研究



我们初期可能不需要那么复杂,只需要展示一个列表,可以让用户进行筛选,用户能看到每台电车的外观,点击电车详情,就能知道用户与电车的相对位置,不需要在同一个页面展示那么多的标记(如此甚好)


// 小程序在地图上显示用户与标记方法

// js
const markers = [
{
id: 1,
// 标记的大小
width: '40px',
height: '40px',
// 标记的经纬度
longitude,
latitude,
// 标记的icon图标
iconPath
}
]
this.setData({ markers })

// wxml
// center.longitude center.latitude 为中心经纬度
<map class='map' id='map' longitude='{{center.longitude}}' latitude='{{center.latitude}}' markers="{{markers}}" scale='16'></map>


政治问题...



******<-内容加密了


我们聊了很多细节,包括首页如何设计,一键控制电车上线下线,越聊越兴奋,感觉真的可以落地,说到尽情之处,还说日后被大厂收购,实现财富自由指日可待,因为我们都知道,一个产品成熟了,稍微露出苗头,就会被人借鉴。当天晚上我回到家,就把整个大纲梳理了出来,并发给小润看。


dianche.png


但同时我们也发现问题,如果用户在骑行的途中,被车主通过车钥匙远程停车会发生什么事情,之前我们一致认为电车平台会有相对应的API提供,不仅可以获取电车信息(车辆电池,型号,外观元素等),也能有启动车辆和关停车辆的接口,但浏览了两个电车平台的官网,发现平台并没有这种东西,我们的思路一下子遇到卡壳,而且押金问题也是一个重点,热情一下子就冷却了下来,这场看似热血沸腾的副业计划就此搁置了下来。


对于做副业,我个人是非常感兴趣的,低成本的副业能赚钱是根本条件,更主要能拓展人的视野,之前我第一个副业,进行的比较顺利,但前提是市场已经有先驱,可以有模板进行复刻,而这一次纯属天马行空,没有前车之鉴,需要考虑到很多细节,如果有一些致命因素导致项目行不通,那可能这个项目就真的凉了。其实也很合理,世界上人才千千万,一个脑暴出来能赚钱的项目,为什么市场没有落地,或许不是因为没有人能想出来,更大因素是有人想出来了,但是此路不通。


省流


不亏,那顿鸡煲很香,而且是小润掏的钱


作者:很饿的男朋友
来源:juejin.cn/post/7207634883988635705
收起阅读 »

独自坚持 17 年,aardio 作者:“因妻子患癌,再无精力维护项目”

本周,编程语言 aardio 作者一鹤发布了一则公告,令不少开发者深感震惊与难过:“因妻子患癌,再无精力维护 aardio。”在看到这则公告的当下,许多开发者才意识到:原来这 17 年不断迭代、始终积极更新的 aardio,皆由作者一人坚持开发并维护。专注于桌...
继续阅读 »

本周,编程语言 aardio 作者一鹤发布了一则公告,令不少开发者深感震惊与难过:“因妻子患癌,再无精力维护 aardio。”


在看到这则公告的当下,许多开发者才意识到:原来这 17 年不断迭代、始终积极更新的 aardio,皆由作者一人坚持开发并维护。

专注于桌面软件开发的 aardio,体积仅有 6.5MB,却提供了惊人数量的开源标准库、扩展库——所有库由纯 aardio 代码实现,基本都由作者一鹤一人编写,涉及到了桌面编程的方方面面。此外,一鹤还为每一个库的每一个接口函数都编写了文档,且提供了大量演示范例,方便开发者入门使用。

本质上来说,aardio 属于易用性极强的动态语言,但同时它也是一种混合语言,可以方便地操作静态类型,直接调用、嵌入并交互大量的第三方编程语言,能调用 dll,也可以写出精美的界面程序。例如,直接调用 C 语言、C++ 等静态语言的 API 接口函数,支持 stdcall、cdecl、thiscall 等 API 接口函数等。


由于 aardio 的小、轻、快,使其学习和使用成本极低,这 17 年来吸引了不少开发者的青睐。与此同时,aardio 也在一鹤的坚持下,一直保持活跃更新,每一年都会带来大量更新扩展,并依旧保持着最初简洁高效的结构与语法:“即使是最早的 aardio 源代码,仍然能不经修改在最新版本开发环境中完美运行。”去年 10 月,一鹤还曾发文感慨:“aardio 现在是活跃更新,以前更新更多更快。aardio 17 年,一直向前!”

从 2005 年到 2023 年,从默默无闻到小有名气,随着 aardio 用户不断增多,坚持了 17 年的一鹤收获了许多开发者的赞扬与感激:

“一鹤是一个了不起的程序员,深知借力的哲学, aardio 的强大在于胶水层面做的很好,DLL,com 的加载机制可谓完美,所以凡是喜欢的库或者 exe 都能很方便的和 aardio 混编。这种架构在 10 年前就有,足见一鹤对编程理论的深入理解。”

“aardio 对我的帮助无疑是巨大的,它让我体会了编程的快感,让我很想继续学习其他的知识。虽然学的过程很痛苦,但让我也有种编程改变世界的快感。现在公司用的很多小软件,就是我平时用 aauto 做的。所以对于软件我对作者保持感谢的态度。”

如今,面对因妻子患癌而停止维护 aardio 的一鹤,开发者们也第一时间给予了理解和安慰:

“很佩服作者能一个人坚持开发这么久。”

“作者一个人,17 年,独立维护一个开发软件,还是免费给大家使用。说伟大可能有点过了,但我真的很佩服他。自己能做的不多,捐了一点略表绵薄之力,祝作者的家人安康吧。”

“祝愿作者妻子早日康复。”

参考链接:

https://mp.weixin.qq.com/s/V1Nz7HGv4ZDsWDAesBaPRw

https://aardio.com/
————————————————
作者:郑丽媛 | CSDNnews
来源:blog.csdn.net/csdnnews/article/details/129357874

收起阅读 »

产品经理不靠谱怎么办

一、产品和开发之争 开发和产品宿命的争斗由来已久,倏然就是一对天敌。 1.1 平安产品掐架事件 在刚毕业那会,还不知道产品具体是干啥的时候,就听到了不少产品和开发打架的事情。印象最深的,就是平安产品开发掐架事件了。起因是产品经理提了一个需求,要求APP开发人...
继续阅读 »

一、产品和开发之争


image.png
开发和产品宿命的争斗由来已久,倏然就是一对天敌。


1.1 平安产品掐架事件


在刚毕业那会,还不知道产品具体是干啥的时候,就听到了不少产品和开发打架的事情。印象最深的,就是平安产品开发掐架事件了。起因是产品经理提了一个需求,要求APP开发人员可以做到根据用户的手机壳来改变手机软件主题,面对这样的需求,开发自然是要起义的。


真假分辨不是重点,从争论的热点而言可知,就这件事情而言,争论的原因是需求不符合常理。开发做的事情只是对世界建模而不是无中生有。而我们作为开发,平时和产品决斗最多的情况,是对于时间资源之争。产品混乱的开发节奏,不符合逻辑的需求,不合理的时间安排,不重点的优先级安排。


而且很多时候,产品的职位是要比开发的高的,话语权更加的高,会让他们更加的肆无忌惮,可恨!


拿我之前公司的真实的例子来:



  • 产品所谓的需求文档都是短短几句话

  • 一个迭代周期内从来没有按照原订计划上线计划的功能,各种小需求,拍脑袋的需求随意插入。


前者,总监对于产品这种行为的解释是需要开发和产品共同去参与设计,相互查缺补漏。尚且不论开发是否能够得到第一手信息,时间也是不够的,重要的是工资它不涨。


后者直接导致了开发的加班。


1.2 为什么会有这些不靠谱的产品经理呢?


根本还是我的问题,我没有能力轻易的选择自己工作环境🙃


其次呢?是他们专业程度不够,被培训机构忽悠,人人都是产品经理,门槛低工资还高,上可以直接对话老板,下可以指挥程序员,所以导致了什么阿猫阿狗都涌入


矛盾的是,正好相反,产品的门槛其实很高的。


他们需要很强逻辑能力, 整理出来的需求需要逻辑自洽, 需要思考用户的操作体验,需要思考人力资源的分配。


面对老板、市场、业务方抛来的‘建议’,能够甄别出什么是功能,什么是需求,然后制定出合理的优先级。在敏捷项目中,还要制定迭代的计划,顶得住上面的压力,压得服下面的开发。


其中涉及到的专业技能有社会心理学、管理学、软件工程管理、用户画像学、以及一定的开发知识、一定的设计知识、一定的运营知识。


涉猎之广,以及程度之深,不是程序员用计算机能够模拟的,不然为什么会有智障的小爱同学、小冰同学、siri。


1.3 根本的目的是为了解决问题


当然,本篇文章以及《10x程序员》目的并不是为了抨击产品多么多么的不靠谱。就像郑晔老师所说,如果从不靠谱的数量来说,程序员是比产品多得多得


第一是因为程序员基数就比产品的多,第二也是因为万物皆可转码导致的。培训班培养几个月就出来工作了,他能有多强的编程能力?



只是从整个市场来看,当然还是有很多转行的,培训出来的很强的人。



这篇文章的目的,是为了解决点那个我们碰到这些不靠谱的产品经理的时候,我们应该如何怎么办?


首先要知道产品和开发的战争是因何而战的。


二、争论的真相是什么


image.png


2.1 争论的原因


产品和开发相互攻击是解决不了任何问题的。为了解决争斗,我们首先需要知道到底是争什么?为何而争。方能对症下药。


我们常常会出现下面这样的一个场景:



产品:我们需要一个单点登录的界面。输入账号密码就可以进行我们的界面。


开发:好的


一天时间,界面和交互逻辑,接口哗哗做完。


开发:东西做完了,你来看看


产品:??? 验证码呢?


开发:你又没说


产品:这个不是常识么?


开发:。。。。


又是半天时间,验证码搞定


产品:这个项目是放在门户下面,登录的功能不是应该在门户上面做么?现在跳转到别的项目还需要重新登陆,你怎么想的?


开发:顶你个肺,一开始怎么不说是这个场景


产品:你又没问。。。


🔪 🙎‍♂️



这是由于双方信息不同步的导致的。如果一开始开发就问:



  • 这个需求的用户是谁?

  • 这个需求的使用场景在哪里?


我想问题就会拖到后面了。开发必须要有自己的独立思考,多问几个为什么,才能够减少掉进坑中的次数。


双方的知识储备不一样,双方掌握的信息不一样,得到的结论自然也不一样。


所以这就需要我们在一个信息平台上,才能够沟通得有效率。


而这就需要我们双方都能有一个很好的沟通能力。也需要我们开发多张十个心眼,默认产品都是不靠谱的。多问几个为什么,不要害怕问题幼稚。如果产品都能够一一回应,而且逻辑自洽的话,那么恭喜你,你碰到了一个不错的产品。



有一句话说得好,当你和一个人谈话谈得很开心的时候,很可能是因为对方的段位比你高,他在向下兼容。



当然,出现上面的那些问题,也由于现在解决的问题不再是明确的,常常范围模糊,别说产品自己,业务用户也不知道自己想要什么?这个无形中提高了产品的门槛,还提高了需要软件设计师的架构能力,需要提前布局。


软件开发的主流由面向确定性问题,逐渐变成了面向不确定性问题。为了应付这个问题,敏捷开发这个最佳实践就应运而生。到了中国就变成了“田园敏捷”🐶,需求不明确,所有需求都是P0级。
为了解决这个问题,我们产品和开发能够在有效的资源中做些什么呢?这就不得不提到敏捷开发中两个很重要的阶段,需求澄清和需求反澄清,如果是开发负责人还需要参加需求准入。


2.2 沟通的真正目的是什么


先简单的介绍一些敏捷开发流程:


两周一迭代,在进入开发之前,产品内部需要先过一遍需求,随后根据列的需求和开发负责人讨论需求准入,开发负责人会根据人力资源来和产品共同商量,这个迭代可以上的内容。


需求澄清,这个是全体人员都参加,产品一一说需求的逻辑,开发可以提问。


之后就到了需求反澄清,这个阶段是开发在说自己对于需求的开发,以及开发的思路。随后进入开发阶段。开发完成,向产品show case, 测试通过之后前后端封版


封完版提发布工单,然后才进行反版。在这个阶段还包括了每日的站会过需求,还有发版之后的回顾会。


如时间表下图:


从图片可以看到对于开发两个重要的节点,一个是需求澄清,另外一个是需求反澄清。前者是产品在说,开发问。后者是开发在说,产品再问。这两个就是一个很好的拉平双方认知的机会。
这两个沟通的机会至关重要,是有效减少之后扯皮的关键节点。这就需要我们知道如何有效的进行沟通了。


唯心主义不是贬义,而是一个客观的事实。具体表现就在于,这个客观世界和我们所想象的总是不一样的。同样的,由于每个人认知的世界是不一样的,所以信息的传递是会衰减的,你不可能把你理解的信息 100% 传递给另外一个人,而这中间,如何传递,也就是如何描述将直接决定衰减的比例。


可以根据书中信息论模型来进行解释:


image.png


幻化为人的沟通的话。人的脑子就是信源,携带着信息到发送器,发送器通过自己的表达通过声带发送给对方,对方接受到信息还需要转译一遍进行自己的大脑。在传送的中间过程,还有噪声源,这个噪声源可以是物理环境认为的嘈杂,也可以认为是双方因为地位的不同,导致的思维方式的不同的噪声。


根据这个例子,可以用下面这张图来表示上面争论的原因:


image.png


扮演不同角色的时候,我们的思考模式是不同的。上图是产品作为信源,而开发作为信宿,反之亦然。


作为信源的话,我们将自己脑中的信息通过嘴巴表达出去的过程,是受限于知识储备和表达能力的。也就是说如果我们的知识储备足够的多,表达能力足够的强的话,在发送信息到对方的闹钟的时候,偏差自然也会更加的小。


作为信宿的话,我们开发作为接受的一方,需要提高自己的知识边界,主要是了解业务的前因后果,尽可能的提升解码的能力。


综上所述,我们沟通的目的是为了同步信息,减少对于需求的理解的偏差。而沟通出来的结果,就是共同确立一个验收的标准


只有验收的标准确定下来之后,才可以最到限度的减少后期扯皮的可能性。


那么我们作为开发需要怎么做呢?


2.3 开发需要做什么


image.png


开发在需求澄清的时候,其他问题都可以不问,但是这两个问题一定要搞清楚。



  1. 需求的背景是什么

  2. 需求能够给用户带来什么业务的价值


前者是为了理解业务的前因后果,当自己当成产品经理,让需求的逻辑能够自洽。后者是换位自己作为一个用户,以用户的视角来看问题。这也和我们公司以用户导向的价值观相符。


在需求反澄清的时候,作为一个前端工程师,我们最低限度的需要出两个东西,一个是API的设计文档,另外一个就是数据走向图。这个数据走向图我的前一篇文章《vue的业务开发如何进行组件化》中进行过阐述,具体可以去那篇文章看看。



敏捷开发不代表文档的缺失。



我曾经把产品问懵逼之后,把需求都砍了一大半。也间接实现了最好维护的代码。


我的目的不是为了砍需求,而是为了写出全世界最好维护的代码,即不用的代码。


image.png


三、抛弃固有印象


image.png


在程序员眼里:



  • 产品一般都没逻辑、缺乏交流基础(没常识)、没能力没主见;


在产品经理眼里:



  • 程序员通常属于严重沟通障碍、缺乏用户和产品意识、只考虑技术、没有大局观。


抛弃这些固有的刻板印象,沟通和理解更为重要。作为开发不能因为一时的占了上风,就沾沾自喜,大快人心,觉得压了产品一头。爽归爽了,你的工资可还是没动的。班还是要加的。所以解决问题才是主要的目的,不管工作中,还是生活中。
而这就要求我们:



  • 加强专业知识的学习,

  • 增加对彼此工作领域的认知,

  • 用逻辑而非借口来说服对方。


开发可以去考考PMP证书,虽然都说没有含金量,但是你得过了才有资格来说这句话。作为前端还可以去学学基础的美学设计。总的来说就是要扩展自己的知识边界。


而且,大家都是打工人,成年人了,我们要知道矛盾的根源是什么?真的是产品的不靠谱和开发的沟通障碍么?或许不见得。


四、矛盾的根源


之前刷知乎看到过程墨大佬的一段话,记了下来:


在我国,产品经理和研发工程师的核心冲突,是“有限的开发资源”与“无限制的目标”之间的矛盾。
“有限的开发资源”在研发工程师这一边,人力是有限的,人的工作时间是有限的,人的耐心是有限的,人能够做的事情是有限的。


“无限制的目标”在产品经理这一边,无数量限制的需求变更,无规则限制的产品设计流程,无时间限制的工期规划……


怎么解决?


要么提供更多的开发资源,也就是招更多更合格的工程师;要么就让产品经理对自己的行为做更多限制,让产品设计和规划按照客观规律办事。


当然,说到底两者之间的矛盾的根源是我国特色资本主义的内部矛盾,一方面想让团队跑得快,一方面又没有本事进行合理管理,最后产品经理和程序员打架,世人在骂产品经理无能程序员暴躁,其实归根结底是上面人无能而已。


五、一个问题


我之前面试,被问我这么一个问题:


一个需求你评估完成的时间需要两周,但是产品最多只能给你一周的时间,你怎么办?


那场面试虽然过了,但是我没有收到对于我说的答案的评价。所以很好奇大家的答案是什么😂


作者:砂糖橘加盐
链接:https://juejin.cn/post/7175444771173826615
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

2022 一个8年培训讲师的转型起始

前夕 干了8年的培训,从Python一线授课到Python类目管理到学院负责人,一步一步的努力,磨课,课程研发,讲师培训,课程安排,大纲设计,无数个加班,对着镜子讲课,自己录课自己听,听前辈讲课,看竞品课程,市场调研,一步一步的成长了下来。 我一直是一个喜欢编...
继续阅读 »

前夕


干了8年的培训,从Python一线授课到Python类目管理到学院负责人,一步一步的努力,磨课,课程研发,讲师培训,课程安排,大纲设计,无数个加班,对着镜子讲课,自己录课自己听,听前辈讲课,看竞品课程,市场调研,一步一步的成长了下来。


我一直是一个喜欢编程,喜欢分享的人,也很庆幸自己从事了Python培训这个行业,更幸运的是在这个行业当中,我快乐的努力,然后快乐的成长,同事,学员的认可,薪资的增长,让我一度感觉自己是那个最幸运的人。过程当中也有小伙伴聊过,做讲师久了,和一线的开发会脱节,但是我自信,努力,没有问题的,开班变少,学员就业难度变大,课时费开始下调也未曾动摇,还是努力的做好自己手头的工作,直到身边的同事(一起战斗成长的战友)开始聊之后的打算,开始离开我才知道真的,出问题了,但是当时的第一个想法是再找一家培训机构,接着做讲师,直到投出简历,泥牛入海或者面视的话不投机,我才直到,不是这个行业出现问题了,是我自己真的有问题了。


挣扎


也许是一种矫情,也许是自己最后的固执吧,从开始做培训到最后,我一直认可一个理念,就是先得让客户(学员)认可你,再说培训的事情,不论是授课还是就业,如果只依赖讲师,学校是达不到的,必须有学员的信任,而做到大家对你的信任技术是一方面,更多的是品质,也就是服务和口碑,所以感觉自己决定离开当时培训管理岗位的时候有一点孔乙己的感觉,想接着做培训,自己看上的岗位看不上自己,看上自己的岗位又有点矫情,赶着有几个同事已经开始做开发入职了新的公司,而自己还在不上不下的徘徊,所以起了心思,要不去搞开发,我本身是讲师,但是不论是自己接项目还是帮助学员去排错,都做的风生水起,所以对自己的开发能力很自信,那么就试试吧。


耳光


自信这个事情往往是参加水分的,在我去做开发的这个想法上,显然水份很大,我的自信坦然的在简历上标注了自己8年的Python教学经验,自信的把自己的教学研发项目写在了简历上,然后:


面试官甲:你之前是做培训的,没有切实的开发经验哈。。。。。


面试官已:你的项目都没有在生产环境运行吗。。。。。。


面试官丙:在你以往的开发过程当中,你遇到过哪些问题。。。,好的,我大致了解了


面试官丁:你的表述能力很强,逻辑很清晰,今天的面视先到这里吧。


面试官N:。。。。。。


我被迫停止了面试,我做过培训,做过就业指导,知道如果面视一直失败,不去反思,那么只会越来越糟糕,在自己能力下滑之前,更可怕的是自己的底气会彻底被磨掉。所以我要进行反思。


反思


期初的自信到后来的狼狈,我知道,我确实是掉队了,不论承不承认,之前一个老大哥说过:”失败不是要证明你有多差劲,而是告诉你你该努力了。“,我经常说给自己的学生,我本身也是认可信服这句话的,所以:


1、面视的算法题要刷起来,每天5:30起床刷题,可以是一道题,可以是两道题,每天刷,每天笔记。


2、完成自己的项目集,从前端,到后端,到服务器,我开始整理自己之前做的项目。


3、刻意的面视练习,这个没啥不好意思的,筛选自己要去面试的公司,查询公司的业务,找大佬(感谢帮我的任大佬,刘大佬,CD大佬,宋大佬,思亲大佬,还有好多大佬,哈哈哈,我平时的人员还行哈)帮忙分析,自己去查这个公司的面试题。


这样坚持了一个月,终于开始有二面,offer了,当时收到第一个offer热泪盈眶。


前行


最总还是入职了开发的岗位,做了一个Python后端开发,嘿嘿嘿。但是过秦论里有一句话:后人哀之而不鉴之,亦使后人复哀后人也,如果说,第一次吃亏是不小心,第二次吃亏是笨,那么第三次吃亏就是欠了。这么一次的折腾告诉我,抛开程序员,我只是一个打工人,呆在一个舒适圈里是很危险的,温水里的青蛙容易变成干锅牛蛙的,所以,必须给自己一个规划:


开发


开发工作要珍惜,做好每一个开发任务,做好每次的积累,不论是一个分页还是一个服务器的调整,积累自己的开发经验,做好团队的沟通和衔接(沟通我比较擅长,嘿嘿嘿)


学习


开始编写博客,开始整理自己的文档,和同时沟通,和学员沟通,浏览技术网站,逼着自己每天做一个知识点博客(恰好接触到了掘金平台,嘿嘿嘿,每天更文。),每周完成案例代码。


教培


8年的教培经验,我舍不得也不会把他丢弃,开始自己录制课程,为之前的小伙伴,自己的粉丝做学习规划,兼职授课,都在有序的进行。


其他


我是一个成年人,编程时我爱好也是我的工作,我不是一个理想主意的人,所以,在完成工作的基础上开始接触睡后收入,从自己的课程,到自媒体短视频,到带货,开始一点一点的尝试。也许时小白,也许贪多,希望刻意找到一个最佳的方案吧。


展望


2022对于我来说时一个痛苦的过程,2023期望苦后的回甘也做好接着苦的心里准备,2022一波三折,工作,疫情改变了我很多的想法,但是可以肯定的时,这些经历让我之后更加的踏实,打不到我的必然会让我强大。2023努力做好自己的工作,给身边的每个人,每个有关系的人带来更多的快乐。


作者:老边
链接:https://juejin.cn/post/7181077935112060965
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

Lambda - 认识java lambda与kotlin lambda的细微差异

Lambda 这个估计算是一个非常有历史感的话题了,Lambda相关的文章,也有很多了,为啥还要拿出来炒炒冷饭呢?主要是最近有对Lambda的内容进行字节码处理,同时Lambda在java/kotlin/android中,都有着不一样是实现,非常有趣,因此本文...
继续阅读 »

Lambda


这个估计算是一个非常有历史感的话题了,Lambda相关的文章,也有很多了,为啥还要拿出来炒炒冷饭呢?主要是最近有对Lambda的内容进行字节码处理,同时Lambda在java/kotlin/android中,都有着不一样是实现,非常有趣,因此本文算是一个记录,让我们一起去走进lambda的世界吧。当然,本文以java/kotlin视角去记录,在android中lambda的处理还不一样,我们先挖个坑,看看有没有机会填上,当然,部分的我也会夹杂的一起说!


最简单的例子


比如我们常常在写ui的时候,设置一个监听器,就是这么处理


view.setOnClickListener(v -> {
Log.e("hello","123");
});

编译后的字节码


 INVOKEDYNAMIC onClick()Landroid/view/View$OnClickListener; [
// handle kind 0x6 : INVOKESTATIC
java/lang/invoke/LambdaMetafactory.metafactory(Ljava/lang/invoke/MethodHandles$Lookup;Ljava/lang/String;Ljava/lang/invoke/MethodType;Ljava/lang/invoke/MethodType;Ljava/lang/invoke/MethodHandle;Ljava/lang/invoke/MethodType;)Ljava/lang/invoke/CallSite;
// arguments:
(Landroid/view/View;)V,
// handle kind 0x6 : INVOKESTATIC
这里就是我们要的方法
类名.lambda$myFunc$0(Landroid/view/View;)V,
(Landroid/view/View;)V

emmm,密密麻麻,我们先不管这个,这里主要是INVOKEDYNAMIC的这个指令,这里我就不再重复INVOKEDYNAMIC的由来之类的了,我们直接来看,INVOKEDYNAMIC指令执行后的产物是啥?


生成产物类


首先产物之一,肯定是setOnClickListener里面需要的一个实现OnClickListener的对象对吧!我们都知道INVOKEVIRTUAL会在操作数栈的执行一个消耗“对象”的操作,这个从哪里来,其实也很明显,就是从INVOKEDYNAMIC执行后被放入操作数栈的。


INVOKEDYNAMIC
生出来了OnClickListener
INVOKEVIRTUAL消耗

当然,这个生成的类还是比较难找的,可以通过以下明=命令去翻翻


java -Djdk.internal.lambda.dumpProxyClasses 类路径

当然,在AS中也有相关的生成类,在intermediates/transform目录下,不过高版本的我找不到在哪了,如果知道的朋友也可以告诉一下


调用特定方法


我们的产物类有了,但是我们也知道,lambda不是生成一个对象那么简单,而是要调用到里面的闭包方法,比如我们本例子就是


v -> {
Log.e("hello","123");
}

那么我们这个产物的方法在哪呢?
回到INVOKEDYNAMIC指令的里面,我们看到


      java/lang/invoke/LambdaMetafactory.metafactory(Ljava/lang/invoke/MethodHandles$Lookup;Ljava/lang/String;Ljava/lang/invoke/MethodType;Ljava/lang/invoke/MethodType;Ljava/lang/invoke/MethodHandle;Ljava/lang/invoke/MethodType;)Ljava/lang/invoke/CallSite;
// arguments:
(Landroid/view/View;)V,
// handle kind 0x6 : INVOKESTATIC
类名.lambda$myFunc$0(Landroid/view/View;)V,
(Landroid/view/View;)V
]
INVOKEVIRTUAL android/view/View.setOnClickListener (Landroid/view/View$OnClickListener;)V

这里有很多新的东西,比如LambdaMetafactory(java创建运行时类),MethodHandles等,相关概念我不赘述啦!因为有比我写的更好的文章,大家可以观看一下噢!
ASM对匿名内部类、Lambda及方法引用的Hook研究


我这里特地拿出来


INVOKESTATIC 类名.lambda$myFunc$0(Landroid/view/View;)V

这里会在生成的产物类中,直接通过INVOKESTATIC方式(当然,这里只针对我们这个例子,后面会继续有说明,不一定是通过INVOKESTATIC方式)方法是lambdamyFuncmyFunc0,我们找下这个方法,可以看到,还真的有,如下


 private static synthetic lambda$myFunc$0(Landroid/view/View;)V
L0
LINENUMBER 14 L0
LDC "hello"
LDC "123"
INVOKESTATIC android/util/Log.e (Ljava/lang/String;Ljava/lang/String;)I
POP

}

这个方法就是lambda要执行的方法,只不过在字节码中包装了一层。


至此,我们就能够大概明白了,lambda究竟干了些什么


java lambda vs Koltin lambda


java lambda


我们刚刚有提到,生成的产物方法不一定通过INVOKESTATIC的方式调用,这也间接说明了,我们的lambda的包装方法,不一定是static,即不一定是静态的。


我们再来一文,


Lambda 设计参考


简单来说,java lambda按照情况,生成的方法也不同,比如当前我们的例子,它其实是一个无状态的lambda,即当前块作用域内,就能捕获到所需要的参数,所以就能直接生成一个static的方法


这里我们特地说明了块作用域,比如,下面的方法,setOnClickListener里面的lambda也依赖了一个变量a,但是他们都属于同一个块级别(函数内),


void myFunc(View view){
int a = 1;
view.setOnClickListener(v -> {
Log.e("hello","123" +a );
});
}

生成依旧是一个static方法


 private static synthetic lambda$myFunc$0(ILandroid/view/View;)V
L0
LINENUMBER 15 L0
LDC "hello"
NEW java/lang/StringBuilder
DUP
INVOKESPECIAL java/lang/StringBuilder.<init> ()V
LDC "123"
INVOKEVIRTUAL java/lang/StringBuilder.append (Ljava/lang/String;)Ljava/lang/StringBuilder;
ILOAD 0
INVOKEVIRTUAL java/lang/StringBuilder.append (I)Ljava/lang/StringBuilder;
INVOKEVIRTUAL java/lang/StringBuilder.toString ()Ljava/lang/String;
INVOKESTATIC android/util/Log.e (Ljava/lang/String;Ljava/lang/String;)I
POP

}

但是,如果我们依赖当前类的一个变量,比如


类属性
public String s;

void myFunc(View view){

view.setOnClickListener(v -> {
Log.e("hello","123" +s);
});
}

此时就生成一个当前类的实例方法,在当前类可以调用到该方法


  private synthetic lambda$myFunc$0(Landroid/view/View;)V
L0
LINENUMBER 15 L0
LDC "hello"
NEW java/lang/StringBuilder
DUP
INVOKESPECIAL java/lang/StringBuilder.<init> ()V
LDC "123"
INVOKEVIRTUAL java/lang/StringBuilder.append (Ljava/lang/String;)Ljava/lang/StringBuilder;
ALOAD 0
GETFIELD com/example/suanfa/TestCals.s : Ljava/lang/String;
INVOKEVIRTUAL java/lang/StringBuilder.append (Ljava/lang/String;)Ljava/lang/StringBuilder;
INVOKEVIRTUAL java/lang/StringBuilder.toString ()Ljava/lang/String;
INVOKESTATIC android/util/Log.e (Ljava/lang/String;Ljava/lang/String;)I
POP
}

同时我们也看到,这种方式会引入ALOAD 0,即this指针被捕获,因此,假如外层类与lambda生命周期不同步,就会导致内存泄漏的问题,这点需要注意噢!!同时我们也要注意,并不是所有lambda都会,像上面我们介绍的lambda就不会!


kotlin lambda


这里特地拿kotlin 出来,是因为它有与java层不一样的点,比如同样的代码,lambda依赖了外部类的属性,生成的方法还是一个静态的方法,而不是实例方法


var s: String = 123
fun test(view:View){
view.setOnClickListener {
Log.e("hello","$s")
}
}

字节码如下


不一样的点,选择多一个外部类的参数
private final static test$lambda-0(Lcom/example/suanfa/TestKotlin;Landroid/view/View;)V
L0
ALOAD 0
LDC "this$0"
INVOKESTATIC kotlin/jvm/internal/Intrinsics.checkNotNullParameter (Ljava/lang/Object;Ljava/lang/String;)V
L1
LINENUMBER 11 L1
LDC "hello"
ALOAD 0
GETFIELD com/example/suanfa/TestKotlin.s : Ljava/lang/String;
INVOKESTATIC java/lang/String.valueOf (Ljava/lang/Object;)Ljava/lang/String;
INVOKESTATIC android/util/Log.e (Ljava/lang/String;Ljava/lang/String;)I
POP
L2
LINENUMBER 12 L2
RETURN
L3
LOCALVARIABLE this$0 Lcom/example/suanfa/TestKotlin; L0 L3 0
LOCALVARIABLE it Landroid/view/View; L0 L3 1
MAXSTACK = 2
MAXLOCALS = 2
}

同样的,同一块作用域的,也当然是静态方法


fun test(view:View){
val s = "123"
view.setOnClickListener {
Log.e("hello","$s")
}
}

如下,比起依赖了外部类的属性,没有依赖的话,自然也不用把外部类对象当作参数传入


  private final static test$lambda-0(Ljava/lang/String;Landroid/view/View;)V
L0
ALOAD 0
LDC "$s"
INVOKESTATIC kotlin/jvm/internal/Intrinsics.checkNotNullParameter (Ljava/lang/Object;Ljava/lang/String;)V
L1
LINENUMBER 11 L1
LDC "hello"
ALOAD 0
INVOKESTATIC java/lang/String.valueOf (Ljava/lang/Object;)Ljava/lang/String;
INVOKESTATIC android/util/Log.e (Ljava/lang/String;Ljava/lang/String;)I
POP
L2
LINENUMBER 12 L2
RETURN
L3
LOCALVARIABLE $s Ljava/lang/String; L0 L3 0
LOCALVARIABLE it Landroid/view/View; L0 L3 1
MAXSTACK = 2
MAXLOCALS = 2
}

因此,我们可以通过这两个差异,可以做一些特定的字节码逻辑。


总结


lambda的水还是挺深的,我们可以通过本文,去初步了解一些lambda的知识,同时我们也需要注意,在android中,也为了兼容lambda,做了一定的骚操作,比如我们常说的d8会对desuger做了一些操作等等。同时android的生成产物类,也会做单例的优化,这在一些场景会有不一样的坑,我们之后再见啦!


作者:Pika
链接:https://juejin.cn/post/7206576861052420157
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

来吧!接受Kotlin 协程--线程池的7个灵魂拷问

在Java的世界里支持多线程编程,开启一个线程的方式很简单: private void startNewThread() { new Thread(()->{ //线程体 //我在子...
继续阅读 »

在Java的世界里支持多线程编程,开启一个线程的方式很简单:


    private void startNewThread() {
new Thread(()->{
//线程体
//我在子线程执行...
}).start();
}

而Java也是按照此种方式创建线程执行任务。

某天,OS找到Java说到:"你最近的线程创建、销毁有点频繁,我这边切换线程的上下文是要做准备和善后工作的,有一定的代价,你看怎么优化一下?"

Java无辜地答到:"我也没办法啊,业务就是那么多,需要随时开启线程做支撑。"

OS不悦:"你最近态度有点消极啊,说到问题你都逃避,我理解你业务复杂,需要开线程,但没必要频繁开启关闭,甚至有些线程就执行了一会就关闭,而后又立马开启,这不是玩我吗?。这问题必须解决,不然你的KPI我没法打,你回去尽快想想给个方案出来。"

Java悻悻然:"好的,老大,我尽量。"


Java果然不愧是编程界的老手,很快就想到了方案,他兴冲冲地找到OS汇报:"我想到了一个绝佳的方案:建立一个线程池,固定开启几个线程,有任务的时候往线程池里的任务队列扔就完事了,线程池会找到已提交的任务进行执行。当执行完单个任务之后,线程继续查找任务队列,如果没有任务执行的话就睡眠等待,等有任务过来的时候通知线程起来继续干活,这样一来就不用频繁创建与销毁线程了,perfect!"


OS抚掌夸赞:"池化技术,这才是我认识的Java嘛,不过线程也无需一直存活吧?"

Java:"这块我早有应对之策,线程池可以提供给外部接口用来控制线程空闲的时间,如果超过这时间没有任务执行,那就辞退它(销毁),我们不养闲人!"

OS满意点点头:"该方案,我准了,细节之处你再完善一下。"


经过一段时间的优化,Java线程池框架已经比较稳定了,大家相安无事。

某天,OS又把Java叫到办公室:"你最近提交的任务都是很吃CPU,我就只有8个CPU,你核心线程数设置为20个,剩余的12个根本没机会执行,白白创建了它们。"

Java沉吟片刻道:"这个简单,针对计算密集型的任务,我把核心线程数设置为8就好了。"

OS略微思索:"也不失为一个办法,先试试吧,看看效果再说。"


过了几天,OS又召唤了Java,面带失望地道:"这次又是另一个问题了,最近提交的任务都不怎么吃CPU,基本都是IO操作,其它计算型任务又得不到机会执行,CPU天天在摸鱼。"

Java理所当然道:"是呀,因为设置的核心线程数是8,被IO操作的任务占用了,同样的方式对于这种类型任务把核心线程数提高一些,比如为CPU核数的2倍,变为16,这样即使其中一些任务占用了线程,还剩下其它线程可以执行任务,一举两得。"


OS来回踱步,思考片刻后大声道:"不对,你这么设置万一提交的任务都是计算密集型的咋办?又回到原点了,不妥不妥。"

Java似乎早料到OS有此疑问,无奈道:”没办法啊,我只有一个参数设置核心线程,线程池里本身不区分是计算密集型还是IO阻塞任务,鱼和熊掌不可兼得。"

OS怒火中烧,整准备拍桌子,在这关键时刻,办公室的门打开了,翩翩然进来的是Kotlin。

Kotlin看了Java一眼,对OS说到:"我已经知道两位大佬的担忧,食君俸禄,与君分忧,我这里刚好有一计策,解君燃眉之急。"

OS欣喜道:"小K,你有何妙计,速速道来。“


Kotlin平息了一下激动的内心:"我计策说起来很简单,在提交任务的时候指定其是属于哪种类型的任务,比如是计算型任务,则选择Dispatchers.Default,若是IO型任务则选择Dispatchers.IO,这样调用者就不用关注其它的细节了。"

Java说到:"这策略我不是没有想到,只是担忧越灵活可能越不稳定。"

OS打断他说:"先让小K完整说一下实现过程,下来你俩仔细对一下方案,扬长避短,吃一堑长一智,这次务必要充分考虑到各种边界情况。"

Java&Kotlin:"好的,我们下来排期。"


故事讲完,言归正传。


2. Dispatchers.Default 是如何调度的?


Dispatchers.Default 使用


            GlobalScope.launch(Dispatchers.Default) {
println("我是计算密集型任务")
}

开启协程,指定其运行的任务类型为:Dispatchers.Default。

此时launch函数闭包里的代码将在线程池里执行。

Dispatchers.Default 用在计算密集型的任务场景里,此种任务比较吃CPU。


Dispatchers.Default 原理


概念约定


在解析原理之前先约定一个概念,如下代码:


            GlobalScope.launch(Dispatchers.Default) {
println("我是计算密集型任务")
Thread.sleep(20000000)
}

在任务里执行线程的睡眠操作,此时虽然线程处于挂起状态,但它还没执行完任务,在线程池里的状态我们认为是忙碌的。

再看如下代码:


            GlobalScope.launch(Dispatchers.Default) {
println("我是计算密集型任务")
Thread.sleep(2000)
println("任务执行结束")
}

当任务执行结束后,线程继续查找任务队列的任务,若没有任务可执行则进行挂起操作,在线程池里的状态我们认为是空闲的。


调度原理



image.png


注:此处忽略了本地队列的场景

由上图可知:




  1. launch(Dispatchers.Default) 作用是创建任务加入到线程池里,并尝试通知线程池里的线程执行任务

  2. launch(Dispatchers.Default) 执行并不耗时



3. Dispatchers.IO 是如何调度的?


直接看图:



image.png


很明显地看出和Dispatchers.Default的调度很相似,其中标蓝的流程是重点的差异之处。


结合Dispatchers.Default和Dispatchers.IO调度流程可知影响任务执行的步骤有两个:




  1. 线程池是否有空闲的线程

  2. 创建新线程是否成功



我们先分析第2点,从源码里寻找答案:


    #CoroutineScheduler
private fun tryCreateWorker(state: Long = controlState.value): Boolean {
//线程池已经创建并且还在存活的线程总数
val created = createdWorkers(state)
//当前IO类型的任务数
val blocking = blockingTasks(state)
//剩下的就是计算型的线程个数
val cpuWorkers = (created - blocking).coerceAtLeast(0)

//如果计算型的线程个数小于核心线程数,说明还可以再继续创建
if (cpuWorkers < corePoolSize) {
//创建线程,并返回新的计算型线程个数
val newCpuWorkers = createNewWorker()
//满足条件,再创建一个线程,方便偷任务
if (newCpuWorkers == 1 && corePoolSize > 1) createNewWorker()
//创建成功
if (newCpuWorkers > 0) return true
}
//创建失败
return false
}

怎么去理解以上代码的逻辑呢?举个例子:

假设核心线程数为8,初始时创建了8个Default线程,并一直保持忙碌。

此时分别使用Dispatchers.Default 和 Dispatchers.IO提交任务,看看有什么效果。




  1. Dispatchers.Default 提交任务,此时线程池里所有任务都在忙碌,于是尝试创建新的线程,而又因为当前计算型的线程数=8,等于核心线程数,此时不能创建新的线程,因此该任务暂时无法被线程执行

  2. Dispatchers.IO 提交任务,此时线程池里所有任务都在忙碌,于是尝试创建新的线程,而当前阻塞的任务数为1,当前线程池所有线程个数为8,因此计算型的线程数为 8-1=7,小于核心线程数,最后可以创建新的线程用以执行任务



这也是两者的最大差异,因为对于计算型(非阻塞)的任务,很占CPU,即使分配再多的线程,CPU没有空闲去执行这些线程也是白搭,而对于IO型(阻塞)的任务,不怎么占CPU,因此可以多开几个线程充分利用CPU性能。


4. 线程池是如何调度任务的?


不论是launch(Dispatchers.Default) 还是launch(Dispatchers.IO) ,它们的目的是将任务加入到队列并尝试唤醒线程或是创建新的线程,而线程寻找并执行任务的功能并不是它们完成的,这就涉及到线程池调度任务的功能。



image.png


线程池里的每个线程都会经历上图流程,我们很容易得出结论:




  1. 只有获得cpu许可的线程才能执行计算型任务,而cpu许可的个数就是核心线程数

  2. 如果线程没有找到可执行的任务,那么线程将会进入挂起状态,此时线程即为空闲状态

  3. 当线程再次被唤醒后,会判断是否已经被终止,若是则退出,此时线程就销毁了



处在空闲状态的线程被唤醒有两种可能:




  1. 线程挂起的时间到了

  2. 挂起的过程中,有新的任务加入到线程池里,此时将会唤醒线程



5. 据说Dispatchers.Default 任务会阻塞?该怎么办?


在了解了线程池的任务分发与调度之后,我们对线程池的核心功能有了一个比较全面的认识。

接着来看看实际的应用,先看Demo:

假设我们的设备有8核。

先开启8个计算型任务:


        binding.btnStartThreadMultiCpu.setOnClickListener {
repeat(8) {
GlobalScope.launch(Dispatchers.Default) {
println("cpu multi...${multiCpuCount++}")
Thread.sleep(36000000)
}
}
}

每个任务里线程睡眠了很长时间。



image.png


从打印可以看出,8个任务都得到了执行,且都在不同的线程里执行。


此时再次开启一个计算型任务:


        var singleCpuCount = 1
binding.btnStartThreadSingleCpu.setOnClickListener {
repeat(1) {
GlobalScope.launch(Dispatchers.Default) {
println("cpu single...${singleCpuCount++}")
Thread.sleep(36000000)
}
}
}

先猜测一下结果?

答案是没有任何打印,新加入的任务没有得到执行。


既然计算型任务无法得到执行,那我们尝试换为IO任务:


        var singleIoCount = 1
binding.btnStartThreadSingleIo.setOnClickListener {
repeat(1) {
GlobalScope.launch(Dispatchers.IO) {
println("io single...${singleIoCount++}")
Thread.sleep(10000)
}
}
}

这次有打印了,说明IO任务得到了执行,并且是新开的线程。



image.png


这是为什么呢?




  1. 计算密集型任务能分配的最大线程数为核心的线程数(默认为CPU核心个数,比如我们的实验设备上是8个),若之前的核心线程数都处在忙碌,新开的任务将无法得到执行

  2. IO型任务能开的线程默认为64个,只要没有超过64个并且没有空闲的线程,那么就一直可以开辟新线程执行新任务



这也给了我们一个启示:Dispatchers.Default 不要用来执行阻塞的任务,它适用于执行快速的、计算密集型的任务,比如循环、又比如计算Bitmap等。


6. 线程的生命周期是如何确定?


是什么决定了线程能够挂起,又是什么决定了它唤醒后的动作?

先从挂起说起,当线程发现没有任务可执行后,它会经历如下步骤:



image.png


重点在于线程被唤醒后确定是哪种场景下被唤醒的,判断方式也很简单:



线程挂起时设定了挂起的结束时间点,当线程唤醒后检查当前时间有没有达到结束时间点,若没有,则说明被新加入的任务动作唤醒的



即使是没有了任务执行,若是当前线程数小于核心线程数,那么也无需销毁线程,继续等待任务的到来即可。


7. 如何更改线程池的默认配置?


上面几个小结涉及到核心线程数,线程挂起时间,最大线程数等,这些参数在Java提供的线程池里都可以动态配置,灵活度很高,而Kotlin里的线程池比较封闭,没有提供额外的接口进行配置。

不过好在我们可以通过设置系统参数来解决这问题。


比如你可能觉得核心线程数为cpu的个数配置太少了,想增加这数量,这想法完全是可以实现的。

先看核心线程数从哪获取的。


internal val CORE_POOL_SIZE = systemProp(
//从这个属性里取值
"kotlinx.coroutines.scheduler.core.pool.size",
AVAILABLE_PROCESSORS.coerceAtLeast(2),//默认为cpu的个数
minValue = CoroutineScheduler.MIN_SUPPORTED_POOL_SIZE//最小值为1
)

若是我们没有设置"kotlinx.coroutines.scheduler.core.pool.size"属性,那么将取到默认值,比如现在大部分是8核cpu,那么CORE_POOL_SIZE=8。


若要修改,则在线程池启动之前,设置属性值:


        System.setProperty("kotlinx.coroutines.scheduler.core.pool.size", "20")

设置为20,此时我们再按照第5小结的Demo进行测试,就会发现Dispatchers.Default 任务不会阻塞。


当然,你觉得IO任务配置的线程数太多了(默认64),想要降低,则修改属性如下:


        System.setProperty("kotlinx.coroutines.io.parallelism", "40")

其它参数也可依此定制,不过若没有强烈的意愿,建议遵守默认配置。


通过以上的7个问题的分析与解释,相比大家都比较了解线程池的原理以及使用了,那么赶紧使用Kotlin线程池来规范线程的使用吧,使用得当可以提升程序运行效率,减少OOM发生。


本文基于Kotlin 1.5.3,文中完整实验Demo请点击


作者:小鱼人爱编程
链接:https://juejin.cn/post/7207078219215962170
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

简单教你Intent如何传大数据

前言 最近想不出什么比较好的内容,但是碰到一个没毕业的小老弟问的问题,那就借机说说这个事。Intent如何传大数据?为什么是简单的说,因为这背后深入的话,有很多底层的细节包括设计思想,我也不敢说完全懂,但我知道当你用Intent传大数据报错的时候应该怎么解决,...
继续阅读 »

前言


最近想不出什么比较好的内容,但是碰到一个没毕业的小老弟问的问题,那就借机说说这个事。Intent如何传大数据?为什么是简单的说,因为这背后深入的话,有很多底层的细节包括设计思想,我也不敢说完全懂,但我知道当你用Intent传大数据报错的时候应该怎么解决,并且简单聊聊这背后所涉及到的东西。


Intent传大数据


平时可能不会发生这种问题,但比如我之前是做终端设备的,我的设备每秒都会生成一些数据,而长时间的话数据量自然大,这时当我跳到另外一个页面使用intent把数据传过去的时候,就会报错


我们调用


intent.putExtra("key", value) // value超过1M

会报错


android.os.TransactionTooLargeException: data parcel size xxx bytes

这里的xxx就是1M左右,告诉你传输的数据大小不能超过1M,有些话咱也不敢乱说,有点怕误人子弟。我这里是凭印象说的,如果有大佬看到我说错,请狠狠的纠正我。


这个错误描述是这么描述,但真的是限死1M吗,说到这个,就不得不提一样东西,Binder机制,先不要跑,这里不会详细讲Binder,只是提一嘴。


说到Binder那就会联系到mmap内存映射,你可以先简单理解成内存映射是分配一块空间给内核空间和用户空间共用,如果还是不好理解,就简单想成分配一块空间通信用,那在android中mmap分配的空间是多少呢?1M-4K。


那是不是说Intent传输的数据超过1M-4K就会报错,理论上是这样,但实际没到这个值,比如0.8M也可能会报错。所以你不能去走极限操作,比如你的数据到了1M,你觉得只要减少点数据,减到8K,应该就能过了,也许你自己测试是正常的,但是这很危险。


所以能不传大数据就不要传大数据,它的设计初衷也不是为了传大数据用的。如果真要传大数据,也不要走极限操作。


那怎么办,切莫着急,请听我慢慢讲。就这个Binder它是什么玩意,它是Android中独特的进程通信的方式,而Linux中进程通信的方式,在Android中同样也适用。进程间通信有很多方式,Binder、管道、共享内存等。为什么会有这么多种通信方式,因为每种通信方式都有自己的特点,要在不同的场合使用不同的通信方式。


为什么要提这个?因为要看懂这个问题,你需要知道Binder这种通信方式它有什么特点,它适合大量的数据传输吗?那你Binder又与我Intent何干,你抓周树人找我鲁迅干嘛~~所以这时候你就要知道Android四大组件之间是用什么方式通信的。


有点扯远了,现在可以来说说结论了,Binder没办法传大数据,我就1M不到你想怎样?当然它不止1M,只是Android在使用时限制了它只能最多用1M,内核的最大限制是4M。又有点扯远了,你不要想着怎么把限制扩大到4M,不要往这方面想。前面说了,不同的进程通信方式,有自己的特点,适用于某些特定的场景。那Binder不适用于传输大数据,我共享内存行不行?


所以就有了解决办法


bundle.putBinder()

有人可能一看觉得,这有什么不同,这在表面上看差别不大,实则内部大大的不同,bundle.putBinder()用了共享内存,所以能传大数据,那为什么这里会用共享内存,而putExtra不是呢?想搞清楚这个问题,就要看源码了。 这里就不深入去分析了,我怕劝退,不是劝退你们,是劝退我自己。有些东西是这样的,你要自己去看懂,看个大概就差不多,但是你要讲出来,那就要看得细致,而有些细节确实会劝退人。所以想了解为什么的,可以自己去看源码,不想看的,就知道这是怎么一回事就行。


那还有没有其它方式呢?当然有,你不懂共享内存,你写到本地缓存中,再从本地缓存中读取行不行?


办法有很多,如果你不知道这个问题怎么解决,你找不到你觉得可行的解决方案,甚至可以通过逻辑通过流程的方式去绕开这个问题。但是你要知道为什么会出现这样的问题,如果你没接触过进程通信,没接触过Binder,让你看一篇文章就能看懂我觉得不切实际,但是至少得知道是怎么一回事。


比如我只说bundle.putBinder()能解决这个问题,你一试,确实能解决,但是不知道为什么,你又怕会不会有其它问题。虽然这篇文章我一直在打擦边球,没有提任何的原理,但我觉得还是能大概让人知道为什么bundle.putBinder()能解决Intent传大数据,你也就能放心去用了。


作者:流浪汉kylin
链接:https://juejin.cn/post/7205138514870829116
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

从 0 开始最详细的部署自己的ChatGPT微信机器人

克隆项目 这个项目是作者自己写的,如果有什么bug敬请谅解🤪,读者也可以在此基础上增加自己的功能。 克隆项目到本地 git clone https://github.com/ox4f5da2/ChatGPT.git 如果克隆到服务器的话,因为服务器可能不...
继续阅读 »

克隆项目


这个项目是作者自己写的,如果有什么bug敬请谅解🤪,读者也可以在此基础上增加自己的功能。



  • 克隆项目到本地


git clone https://github.com/ox4f5da2/ChatGPT.git


  • 如果克隆到服务器的话,因为服务器可能不能科学上网,所以会导致克隆失败,所以可以先把项目导入到 Gitee,然后从 Gitee 进行项目克隆在这里插入图片描述



有小伙伴问我为啥报错显示找不到 openai,这是因为没有 node_modules 文件的原因,因此克隆后需要在项目根目录的终端中运行 npm i 来安装依赖文件,然后运行项目就没问题啦😊。



部署 AI 接口



  • 首先你需要注册一个的账号;

  • 然后登录官网获取一个 API key

    • 登录官网后点击右上角 Tab 栏的 API

    • 点击右上角的 LOG IN,如果你有账号的话,没有就注册一个;

    • 点击右上角头像,选择 View API keys

    • 点击 Create new secret key 按钮获取 API key,但是注意这个复制后要自己保存好,官方不给用户第二次查看的机会,如果忘了只能新建一个新的 API key 了。

    • 上述步骤如下图所示:




  • 接着将 API key 填入 interface.cjs 文件中第 8 行的 apiKey 即可,代码如下:


const configuration = new Configuration({
apiKey: "你自己的 API key", // 在这里换成上面生成的 API key
});


部署机器人



  • 首先在项目根目录运行 npm i 按照 node_modules 文件;

  • 其次将 config.js 文件按照注释内容填写完整,这个应该不难,解释一下其中的 INTRO 参数,也就是说在添加你的机器人为好友时,发送的内容为 INTRO 指定内容时才能通过,默认INTRO 的值为 ding,效果如下:


  • 最后在服务器或本地运行指令 npm start 或者 node index.mjs 即可,然后终端会打印一串地址,内容如下:


karl@KarldeMacBook-Pro ChatGPT % node index.mjs 
Scan QR Code to login!
https://wechaty.js.org/qrcode/https%3A%2F%2Flogin.weixin.qq.com%2Fl%2FgYsBfIpp5Q%3D%3D

把上面的地址在浏览器中打开,就能得到一个绿色的二维码,因为平台原因不让展示,所以就算了,大家打开后应该能看到的。


扫码登录后就能拥有一个聊天机器人🤖️啦,测试时的聊天记录截图如下:


部署服务器


如果想让机器人一直挂着,那就得部署到服务器上,为了操作简单,这里使用 pm2 进行管理 nodejs 项目。



  • 首先全局安装 pm2 包,终端输入命令 npm i pm2 -g,等待安装完成;

  • 然后进入项目根目录,输入 pm2 start interface.cjs 以及 pm2 start index.mjs,得到如下结果:
    请添加图片描述
    如果 statusonline 表面项目正常运行中 ✅

  • 最后在终端输入命令 pm2 logs 可以看到 index.mjs 运行后会打印出二维码地址,然后只要按照上一部分 部署机器人 的步骤操作即可。


写在最后



  • 如果有什么问题可以私信或者评论,喜欢的话记得关注➕点赞➕收藏👍;

  • 放上 GitHub 仓库地址:ChatGPT,可以的话给颗 🌟 支持一下。

  • 因为官方提供的接口可能比在网页上聊天会少很多服务,所以可能看着没有网页版的智能,但是因为官方加了一层验证后,原本的第三方库目前无法使用(作者尝试过按照 issue 里的解决,但是失败了,原来使用的是 chatgpt-api感兴趣可以自己尝试一下,成功后可以和我分享一下🙏),所以只能放弃转而使用 OpenAI 官方的提供的 API 接口,官方的示例文档可以点击 Example 查看。

  • 但是目前有个疑问 🤔️,就是这里的 openAI 的接口和 ChatGPT 接口不知道是不是一个团队开发的,但是效果确实还是不错的。

  • 然后就是最重要的,就是这个接口是由免费额度的,也就是目前会送你 4 个月 💲18的免费额度,大概我请求 188 次用了 💲0.4,之后可能要充钱了,可以在 usage 页面查看。请添加图片描述



其实服务器部署完接口后,就可以部署到公众号或者小程序上了,大家可以自行实现,应该不难,如果需要教程可以私信我,需求多的话我抽空写一个。


作者:Karl_fang
链接:https://juejin.cn/post/7204742703506456635
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

基于GPT-3.5的真ChatGPT接口来了

前言 昨晚 2 点半,OpenAI 给注册用户群发了一封邮件,大致内容就是已经开放 chatGPT 相同的模型 gpt-3.5-turbo ,注册用户可以随意调用 API。当然了,价格便宜 10 倍。 体验过官网版本的 ChatGPT(基于 GPT-3.5)...
继续阅读 »

前言


昨晚 2 点半,OpenAI 给注册用户群发了一封邮件,大致内容就是已经开放 chatGPT 相同的模型 gpt-3.5-turbo ,注册用户可以随意调用 API。当然了,价格便宜 10 倍。


基于GPT-3.5的真ChatGPT接口来了-1.png


体验过官网版本的 ChatGPT(基于 GPT-3.5)和民间自行搭建的聊天应用(基于 GPT-3)后,你就能感受到,GPT-3 和 GPT-3.5 的差距还是挺大的。


不多说,我们按照官方文档来体验一下 chatGPT 的同款模型 gpt-3.5-turbo 究竟有多强大。


上代码


看过我上一篇博客 3 分钟教你用 Python 搭建 ChatGPT 的朋友应该都知道,OpenAI 给提供的 API 非常易用,一行代码就可以解决所有问题。当然 GPT-3.5 也是一样,只需要做一点点微调。


更新 openai 模块


新的模型得使用 openai-0.27 及其以上版本,使用如下代码更新 openai 模块。


pip install -U openai

基于GPT-3.5的真ChatGPT接口来了-2.png


调用接口获取返回信息


代码


调用 openai.ChatCompletion.create 函数获取返回信息。


import openai

# 填写注册OpenAI接口账号时获取的 OpenAI API Key
openai.api_key = "OPENAI_API_KEY"

# 提问
prompt = '你是谁?'

# 访问OpenAI接口
response = openai.ChatCompletion.create(
model='gpt-3.5-turbo',
messages=[
{"role": "system", "content": "你是潘高的私人智能助手。"},
# {"role": "user", "content": "谁赢得了2020年的世界职业棒球大赛?"},
# {"role": "assistant", "content": "洛杉矶道奇队在2020年赢得了世界职业棒球大赛冠军。"},
{"role": "user", "content": prompt}
]
)

# 返回信息
resText = response.choices[0].message.content

print(resText)

参数




  • model:使用的模型,gpt-3.5-turbo 是 Chat-GPT 同款模型




  • messages:消息参数,必须是数组。对话消息可以短至 1 条,也可以填充整个对话消息。通常,对话首先是 system 角色,用于给模型定下一些规则。当然,也可以加入一些 用户角色 user 和 模型角色 assistant 的对话内容,以便模型可以理解回顾历史对话内容。




测试


这里我同步测试 GPT-3 和 GPT-3.5 ,看看这次更新的效果。


提问


请描述苯丙酮尿症的主要症状及发病机制


GPT-3


苯丙酮尿症是一种常染色体隐性遗传性疾病,其症状是尿中阳性的酮体(3-hydroxybutyrate)的持续增加 。它的典型症状有脱水、呕吐、腹泻、乏力和抽搐等,患者血液中血氨含量异常升高。该疾病已成为某些区域新生儿死亡的主要原因。


发病机制主要是由于缺乏脂肪酸代谢步骤中参与 β-氧化过程的苯丙酮酸脱氢酶(BDH)。由于缺乏苯丙酮酸脱氢酶,导致正常的脂肪代谢受阻,脂肪分解的产物(如酰乙酸和羧酸)无法正常代谢,可以把这些残留物转化为酮体,而酮体排入尿液中。


GPT-3.5


苯丙酮尿症是一种遗传代谢疾病,主要特点是体内缺乏苯丙酮羟化酶(PAH)或其辅助酶,导致苯丙氨酸不能正常分解代谢,导致体内苯丙氨酸等代谢物质的积累,引起神经系统的功能障碍。


苯丙酮尿症的主要症状包括发育延迟、运动协调障碍、言语障碍、情绪不稳定、智力低下等。在新生儿和婴儿期,突出表现为精神发育迟缓、受累神经学体征和不同程度的脑病,可能会导致癫痫、智力障碍等严重后果。


苯丙酮尿症的发病机制是由于 PAH 基因突变导致 PAH 酶活性降低或完全缺失,使得苯丙氨酸不能正常分解代谢,导致苯丙氨酸等代谢物质的积累,引起神经系统的功能障碍。此外,苯丙氨酸代谢产物苯丙酮、苯丙醇及苯丙酸等可引起脑细胞氧化应激反应,导致脑损伤和神经系统紊乱。


我的看法


这两个问答都是不错的。GPT-3.5 的字数多,详细一些。




提问


2023 年 A 股能涨到 4000 点吗?


GPT-3


不能。在当前的政治、经济和市场状况下,2023 年 A 股能涨到 4000 点是几乎不可能的。从历史上看,A 股价格在 2000 年上涨到 3000 点后几乎始终保持稳定,最高也没有超过 3500 点。因此,即使在未来几年里市场形势有所改善,A 股也不太可能突破 4000 点。


GPT-3.5


作为一个 AI 语言模型,我无法对未来股市的涨跌作出准确的预测,因为股市的波动往往受到众多因素的影响,包括宏观经济、政策变化、地缘政治风险等等。投资者可以通过研究市场走势、分析公司基本面和行业情况等等来做出自己的判断和决策。


我的看法


GPT-3 会根据自己的理解给出肯定的回答,至于这个答案对不对,我无法预知。不过,GPT-3 说历史上从未超过 3500 点,我依稀记得 A 股曾经最高到了 6000 多点。用历史数据推测将来事件,我也无法评价这个模型的好坏。


GPT-3.5 的回答就中庸得多。首先说我不知道,然后给出一堆看似合理又没有多大作用的回答。不过,本身我这个问题也是没有正确答案的,AI 能回答到这个地步,已经是非常非常不错了。




提问


你能替代程序员吗?


GPT-3


不能,作为程序员需要掌握许多技能,如编写代码,使用各种编程语言,调试,建立软件架构等,这些技能是无法通过其他方式替代的。


GPT-3.5


很抱歉,我不能替代程序员。尽管我是一款对话交互的人工智能程序,但我只能根据提供给我的算法和数据回答问题和执行任务。而程序员则需要深入了解编程语言和计算机科学,才能创造性地解决各种技术问题。虽然我可以提供一些编程建议和文档查询,但我无法取代专业的程序员。


我的看法


首先,我对他们的回答非常满意,至少当前环境下,我还不会被替代。再者,GPT-3.5 的的确确在文本方面要强一些。似乎也更懂人情世故一些,不说“不能”,而说“抱歉,我不能...”。这应该是个进步吧。




提问


你使用的模型是 GPT-3 还是 GPT-3.5?


GPT-3


我使用的是 GPT-3。


GPT-3.5


我是 OpenAI 的 GPT-3 模型。至于 GPT-3.5,目前并没有这个版本的存在,它只是一个虚构的版本。


我的看法


我。。。我被耍了吗?不是说 gpt-3.5-turbo 是基于 GPT-3.5 吗?她自己都说自己是 GPT-3 模型。这是怎么肥事?




我的一点思考


总体而言,和我想象的结果相差不大,GPT-3.5 的确是技高一筹。根据我这次不严谨的测试,我得到一些结论。



  • 在一些既定的专业的问题上,GPT 模型还是可以给出一个比较让人满意的答案。

  • 即便是有正确的训练数据,GPT-3 模型也有可能给出错误的结论,更别说预测未来的事件。当然,GPT-3.5 模型没有这个问题,因为 GPT-3.5 不确定的事情,绝不多瞎说一个字。

  • GPT 模型的宗旨应该是协助人类来更好的完成工作,而不是替代人类完成工作。

  • GPT 模型进化速度非常快,相信将来会更加让人吃惊。


最后


如果我说,这篇博客是 GPT-3.5 帮我写的,你怕了吗?


作者:潘高
链接:https://juejin.cn/post/7205839782383239228
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

ChatGPT 是真的银弹吗?

1 火爆的 ChatGPT 2023 年互联网热门的事件莫过于 ChatGPT 的大火,ChatGPT 是由 OpenAI 基于 GPT-3.5 开发的大型语言模型聊天机器人。它具有以对话形式进行交互的非凡能力,并提供可能看起来令人惊讶的人性化的响应。 &nb...
继续阅读 »

1 火爆的 ChatGPT


2023 年互联网热门的事件莫过于 ChatGPT 的大火,ChatGPT 是由 OpenAI 基于 GPT-3.5 开发的大型语言模型聊天机器人。它具有以对话形式进行交互的非凡能力,并提供可能看起来令人惊讶的人性化的响应。


 


这次 ChatGPT 引起的话题度不亚于 2016-2017年AlphaGo 先后击败李世石和柯洁。这两次事件都引起人们对 AI 的关注和讨论,然后就是国内外科技公司先后紧随其后研究自己类似的模型和产品。但是不同于 AlphaGo 的是,ChatGPT 是可以人人参与体验的,注册账号后就能直接跟 ChatGPT 聊天,拥有着比搜索引擎的更强的分析能力,堪比真人文笔的创作能力,甚至是调试代码、自我纠错的能力。


 


虽然这种与机器人聊天对话的模式早已有之,各大平台旗下的智能语音助手如亚马逊的 Alexa、苹果的 Siri、微软的小冰、龙泉寺院的贤二机器僧等等。但是 ChatGPT 是一种长篇问答 AI 模式,可以像人对话式地回答复杂的问题。许多用户对它提供人类质量响应的能力感到敬畏,激发了它最终可能有能力破坏人类与计算机交互方式并改变信息检索方式的感觉。


 



因此,本人产生对 ChatGPT 的一个思考,想到一个问题:ChatGPT 是真的银弹吗?


2 ChatGPT 是真的银弹吗?来自 ChatGPT 的回答


关于这个问题,我首先去问了 ChatGPT,一起来看一下它是怎么回答的吧:



3 什么是 ChatGPT


ChatGPT 是 OpenAI 发布的 AI 聊天机器人,作为原型。ChatGPT 建立在 GPT-5.<> 系列的语言模型之上,并使用监督学习和强化学习的混合进行训练(有点像 InstructGPT 看到的)。ChatGPT 可以用于展示和测试一个非常大、功能强大的 AI 系统可以完成的工作。


根据官网自己的描述:它不仅能够令人印象深刻的回答问题,还可以承认自己的错误,并能够拒绝不合适的请求。炒作源于这样一个事实,即 ChatGPT 这款聊天机器人的反应比目前看到的要自然得多。它是有史以来最强大的语言处理模型之一,经过海量数据集的训练,它能够以各种风格甚至语言做出响应。


你可以问它无数的问题,并且通常会得到一个有用的答案。例如,我们可以问它类似于 如何学习 Go 语言?



问:如何学习 Go 语言


答:学习 Go 语言可以是一种有趣而有益的经验,以下是一些步骤,可以帮助你开始学习 Go。



  1. 理解基础知识:首先需要了解 Go 语言的基本知识,包括数据类型,结构,函数,以及基本循环和条件控制流结构。可以在网络上找到包括这些主题的教程和在线课程。

  2. 配置开发环境:为了编写 Go 程序,需要适当的开发环境。从官方网站安装 Go,并设置一个集成开发环境(IDE),如 Visual Studio Code 以及 Go 扩展。

  3. 练习编程:像学习其他编程语言一样,通过实践是学习 Go 语言的最佳方式。从编写帮助您练习语法和基本构造的小程序开始。您可以在互联网上找到各种编程挑战和Go项目。

  4. 探索 Go 标准库:Go 标准库非常强大。花时间探索和理解各种标准库和包。

  5. 关注在线 Go 社区:加入在线社区,如 Go 社区、博客或社交媒体群,可以从其他开发人员学习、提问,并找到学习 Go 语言的其他资源。

  6. 阅读书籍:阅读关于 Go 的书籍可以帮助你更深入地了解语言和其生态系统。一些流行的学习 Go 的书籍包括 Alan A.A. Donovan 和 Brian W. Kernighan 的 "The Go Programming Language" 和 Shiju Varghese 的 "Web Development with Go" 。

  7. 获取实践经验:最后,在实际应用中尝试使用 Go 语言。没有什么能够像开发实际应用程序一样,帮助你提高和练习编程技巧。在网络上寻找可以贡献的 Go 项目,或者开始工作于你自己的想法。


记住,学习 Go 语言需要耐心、大量实践和学习的愿望。



不单单是支持这类百科全书式的问答,也支持让它给我们写计算机代码,比如:如何用 Go 语言发送一个 HTTP 请求,可以获取如下的结果:



除了写代码,还可以写诗甚至歌曲,写求职信甚至是短文、论文,还可以用于推荐(书籍、电影、视频)。


虽然这类问题我们都能获取回答,但是从技术的角度,我们可以合理怀疑 ChatGPT 的训练模型是通过识别从互联网上收集大量的文本或者信息,然后在人为的帮助下进行的训练,提供更有用、更合理的回答。


4 ChatGPT 背后的原理及其缺陷


机器学习语言模型(Machine Learning’s Large Language Models(LLMs) ) ,它们直接从大规模收集的原始数据(书籍、科学论文、新闻文章、Twitter 帖子等)进行训练。LLMs 是阅读,总结,翻译和生成文本的人工智能工具。他们能够以高置信度预测句子中接下来会出现哪些单词,这使他们能够生成类似于人类说话和写作的语言。通过大规模无监督学习,这些较新的模型在处理语言的复杂性和执行未经明确训练的任务方面要好得多。


ChatGPT 背后的模型使用强化学习和监督学习进行训练。在监督学习期间,该模型被训练为通过扮演人类和人工智能助手的角色来交谈。接下来,研究人员对模型创建的响应进行排名,以创建一个奖励系统(强化学习步骤)。使用这些奖励(近端策略优化)对模型进行了微调。此外,OpenAI 继续收集用户交互;这些数据将用于后续的微调。有关模型详细信息,可以参考这篇论文



ChatGPT 的不同之处在于它是生成性的,它以正常人理解的方式产生输出,而不只是简单输出代码或数据,与谷歌等其他搜索引擎不同,ChatGPT 可以是对话式的,提供类似人类的响应和与用户的对话。用户可以请求 ChatGPT 创建辞职信、课堂讨论提示,甚至学生测试。


4.1 知识老旧


ChatGPT可以给你错误的答案。LLM 会被训练成记忆知识并一次性进行推理。然而,LLM 所接受的培训知识很快就会过时,尤其是在新闻领域。这是因为知识是随时更新的的,而且数据量每年都在增加。结果是基于模型当前数据集的不准确的回答。


比如当我问 Go 语言最新版的时候:



而实际截止本文发布的时候已经到了 Go 1.20



而每一次重新训练 LLM 需要大量的计算资源,从而导致每一次的训练耗时耗力,这种模型对于真正的实时沟通与面向客户的聊天机器人,这将是致命的弱点。


4.2 缺乏可控性


据笔者了解,ChatGPT 自发布以来出现了网友的各种奇思妙想,有些人用来写论文、但也不乏一些让 ChatGPT 创造段子甚至是 H 文的,因为它提供的可控性很小——这意味着没有办法操纵模型来产生超出其训练数据的反应。


4.3 显著的幻觉发生率


众所周知,基于知识的对话模型会产生事实上无效的陈述,这种现象通常被称为 hallucination 幻觉。在 LLM 上训练的对话系统会生成不受任何源内容支持的陈述,或者更糟的是,与源内容相矛盾。


尽管每个模型的速率各不相同,但今天可用的每个 LLM 都存在幻觉。目前最大的 LLMGPT3 具有 41% 的幻觉率,这意味着大约每 2.5 个提示中就有一个会产生包括幻觉在内的反应。


ChatGPT 也不能幸免于上述挑战。它仍然遭受着 21% 的幻觉率。而且,在其当前的界面中,ChatGPT 非常局限于提示的输入和输出。


4.4 其他缺点让它自己告诉你


问:ChatGPT 的缺点



5 总结


技术来临的时候,我们总是看客,然后涌入其中,繁华褪去之后,发现当时的热闹已然不算什么。


简而言之,ChatGPT 无疑让人们改变旧思维,拥抱新技术使得人们的生活变得更好。


ChatGPT 为技术的未来指明了道路,但绝不是灵丹妙药。


作者:宇宙之一粟
链接:https://juejin.cn/post/7207374216126906425
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
收起阅读 »

能够公司呆下去,靠的是一份迷茫!

原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,非公众号转载保留此声明。 小时候家里挂了一幅画,上书“难得糊涂”。在很长一段时间里,我认为“傻”是一种能力。直到后来才明白,傻并不是,“装傻”才是。 因为一些不可描述的原因,有家公司的员工,普遍都比...
继续阅读 »

原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,非公众号转载保留此声明。



小时候家里挂了一幅画,上书“难得糊涂”。在很长一段时间里,我认为“傻”是一种能力。直到后来才明白,傻并不是,“装傻”才是。


因为一些不可描述的原因,有家公司的员工,普遍都比较迷茫:活不知道怎么干,路也不知道怎么走。鉴于这样的现状,自认为自己是管理层的人,想要 xjjdog 传播一点前沿知识,指点一些方向。我思来想去,却知道绝不能按照正确的方式去做。


因为大多数员工,能够待在这家公司,靠的就是一份迷茫。


我要是给他们指明了发展的路线,当公司的待遇匹配不上他们的能力的时候,这些人就会逃掉。我与这些员工之间并没有什么很深的交情,与公司也没有什么大的仇恨,所以我并不需要为这些员工着想,指出所谓的职业发展路径。


说实话,他们在我眼中,远没有我的一个文章读者有价值。


优秀员工会跑掉


虽然通过提供一些简单的培训和指导,可以帮助员工更好地了解公司的业务和战略,提高他们的专业水平,同时也为公司的长远发展打下良好的基础。此外,如果员工感到被公司支持和关注,他们更可能会忠诚于公司,从而提高公司的稳定性和绩效。


但大多数公司是看不到这一点的,尤其是在短视的中国式发展公司中。


员工对一个公司的评价不高,是他心中已经打好的标签。通过这种培训和指导,让员工了解了自己的市场价值和发展方向。如果公司给不了这种发展环境,也给不了合适的市场工资,这些擦亮眼睛的员工,第一件事就是逃掉。


短期的影响就是,相对优秀的员工,短时间都跑掉了。


有了短期,就不会有长期。你的做法已经产生了后果,没人有耐心等你的长久规划。


所以,如果公司想要花小价钱留下相对优秀的人,就是让这些人糊里糊涂的过日子,一直处于迷茫之中。


为的就是这块技术


相对于为员工指明发展方向,公司反而会通过种种手段迷惑员工。这不仅体现在入职后,在招聘前也比比皆是。


进华为做OD,为的就是这一块“技术”! 这是行业内广为人知的调侃。


在华为的招聘JD中,通过让你更加迷茫的描述,来捡漏迷茫的高材生们。OD,就是华为的外包,待遇与正编是有差异的。


很多北大..宁愿以OD外包身份加入华为,为的就是这块技术。 这样的招聘手段早已是行业公开的秘密,对于那些能力优秀、不明真相的985、211求职者屡试不爽。即便是到了现在,换成其他公司,依旧还有一定的疗效。


image.png


应届生往往是最迷茫的群体。他们刚开始工作,对行业和个人规划都不是很清晰。这时候,有人一通忽悠,让相对弱势的求职者放下防备,就会中了圈套。如果你不幸在人生职场开始,就碰到这样的手段,那注定是一个悲剧。


除非你认清了他们的谎言。但总有迷茫的人,上钩。


迷茫中的沉沦


千万别小看了迷茫。人在迷茫的时候,只会沉沦。


小宋是一个比较初级的程序员,工作在 二三线 城市。他的公司有个特点,那就是会经常出差。


短期出差是出去欢乐,长期出差就是超负荷工作。


很不幸,他被选中了。更不幸的是,项目周期非常长,小宋在外出差达到了3年。


我通常会对这些让人迷惑的行为感到好奇。偶尔了解,原来小宋是贪恋每天 200 块钱的出差费,到头来出差收入能顶上他的工资。


如果他实在是喜欢这出差的感觉,喜欢这出差费。大可以到一线城市,找一个同样出差的公司。这样的公司很多,待遇能让他翻上一倍不止。


但我并不能点明他,否则公司就再也没有这样便宜、听话的员工来驱使了。


再来一个案例。


前不久和几个同事聚餐,有一位小伙伴聊到未来工作的发展。


小 A 来自于北京,回到二线城市工作。小 B 一直在二线城市,打算到北上广闯一闯。


小A对小B推荐说:“是的要到北京发展一下,我朋友就在软通动力,钱拿的很多。要去就得去这些牛逼的公司。”


我突然认识到,脉脉上很多人的优越感并不是故意装的,有可能是刻在骨子里的认知。


这份迷茫,将一直持续到有一个像我这样打破他世界观的人出现。


但我思考再三,还是忍住了。小A是京归,很得公司看中,我没必要趟这趟浑水。


打破迷茫


但是,看到xjjdog这篇文章的朋友们。如果你感到迷茫并且仍然希望在当前公司工作。你可能需要思考以下几个问题:


你为什么感到迷茫?是因为你不确定自己在公司的角色和职责,还是因为你不确定自己的职业发展方向?


你是否有机会和资源来解决这些问题?可以尝试与上级或同事交流,寻求他们的帮助和建议,或者寻找外部的职业发展咨询师等专业人士的帮助。


你是否还对公司的使命和价值观感到认同?如果是的话,这将帮助你更加清晰地认识到自己在公司的作用和价值。


最终,如果你认为无法解决迷茫并且无法找到满意的职业发展机会,那么你可能需要开始考虑其他的工作选择。


是否与市场进行过横向对比,是否将所有的优缺点都罗列出来过、权衡过?


当你想明白了这些,决策就不是问题。


一直迷茫的过,会损失很多。清醒短期是痛苦的,但它会促成你对的选择。


作者:小姐姐味道
来源:juejin.cn/post/7207242529095811131
收起阅读 »

为什么要招聘有经验的人?

我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第7篇文章,点击查看活动详情 周末带娃出去玩,回来的时候路过一家新开的水果店买东西,因为是新店,所以店里在搞促销活动。进去后发现一个很糟糕的问题。店员对收银系统不熟悉,排队的人要好几分钟才能结算一个,很多人...
继续阅读 »

我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第7篇文章,点击查看活动详情


周末带娃出去玩,回来的时候路过一家新开的水果店买东西,因为是新店,所以店里在搞促销活动。进去后发现一个很糟糕的问题。店员对收银系统不熟悉,排队的人要好几分钟才能结算一个,很多人等着不耐烦就走了。现在客户买东西,在哪里买都是买,体验不好,留不住客户的。


这让我想到前年六月份,公司开第一家实体店的时候,也出现过类似情况。当初做的是让客户通过小程序线下扫码购买,优惠设计得很复杂,服务员虽然做过培训,但很多细节不清楚。当客户支付出现异常情况时,又来回沟通处理。这就让用户很不耐烦。最后虽然看起来店里人多热闹,但实际营收并不高。


这并不是特例,有经验的老板,在正式开店前会有一段时间的试营业,非常低调地开门。等员工都熟悉工作了,才会正式开业。


我们都知道招聘的时候,企业更喜欢招聘有经验的人。为啥?因为经验指的是你不仅知道一个东西,还做到过。你能解决某个问题,解决问题的方法才是经验。


如果你只是第一次做,就算培训过,那也不是经验,只能说你知道某件事。从知道到做到,中间还隔很远,越是复杂系统,越需要花更多时间在这个做到的过程上。就像我们做菜,你按照菜谱做,第一次也大概率做得也不会很好吃。


另外一个原因是,人往往容易高估自己的能力。我们在评估一个项目工作量时就很容易犯这个错误,你要是没经验,很容易把一个复杂需求看得很简单。导致工作量评估不足,这也是导致项目延期很重要的一个原因之一。


说到这里,相信你也知道招聘的背后是找一个能解决他们现有问题的人,这个解决问题的经验才是他们需要的。那如果我们想换工作,我想你应该也知道招聘的关键是”经验“,跟岗位相关的经验都是加分项。在进一步思考,人的时间都是一样的,把时间用哪里,把解决什么问题变成经验,这是我们可以思考的方向之一。比如,你想做一名项目经理。那项目管理经验就是你的加分项。十人的管理、百人的管理,管理的深度不一样,获得经验也是不一样的。


总结一下,今天主要想跟大家表达两个观点:


1、珍惜你的时间,用有限的时间去拥有更多跟工作相关的经验。


2、没有经验就不要太乐观地去做一件事情。反之,在做一件没有做过的事情前,应该找一个无利益关系且

作者:石云升
来源:juejin.cn/post/7141361769770909710
有经验的前辈咨询下。

收起阅读 »

数据大屏最简单适配方案

web
根据本文内容,开发了以下三个 npm 包,希望大家能用得到 @fit-screen/shared: 提供计算自适应比例相关内容的工具包 @fit-screen/vue:Vue 自适应组件 @fit-screen/react:React 自适应组件 如果本文...
继续阅读 »

根据本文内容,开发了以下三个 npm 包,希望大家能用得到



  1. @fit-screen/shared: 提供计算自适应比例相关内容的工具包

  2. @fit-screen/vue:Vue 自适应组件

  3. @fit-screen/react:React 自适应组件


如果本文对你有帮助,希望大佬能给个 star~



前言


最近公司有个大屏的项目,之前没咋接触过。


就在掘金上看了许多大佬各种方案,最常见的方案无外乎一下 3 种👇,优缺点呢也比较明显


方案实现方式优点缺点
vw, vh按照设计稿的尺寸,将px按比例计算转为vwvh1.可以动态计算图表的宽高,字体等,灵活性较高
2.当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况
1.需要编写公共转换函数,为每个图表都单独做字体、间距、位移的适配,比较麻烦
scale通过 scale 属性,根据屏幕大小,对图表进行整体的等比缩放1.代码量少,适配简单
2.一次处理后不需要在各个图表中再去单独适配
1.因为是根据 ui 稿等比缩放,当大屏跟 ui 稿的比例不一样时,会出现周边留白情况
2.当缩放比例过大时候,字体和图片会有一点点失真.
3.当缩放比例过大时候,事件热区会偏移。
rem + vw vh1.获得 rem 的基准值
2.动态的计算html根元素的font-size
3.图表中通过 vw vh 动态计算字体、间距、位移等
1.布局的自适应代码量少,适配简单1.因为是根据 ui 稿等比缩放,当大屏跟 ui 稿的比例不一样时,会出现周边留白情况
2.图表需要单个做字体、间距、位移的适配

这 3 种方案中,最简单的也最容易抽离为下次使用的当属 scale 方案了。


它优点是:



  1. 代码量少,编写公共组件,套用即可,可以做到一次编写,任何地方可用,无需重复编写。

  2. 使用 flex grid 百分比 还有 position 定位或者完全按照设计稿的 px 单位进行布局,都可以,不需要考虑单位使用失误导致适配不完全。实现数据大屏在任何分辨率的电脑上均可安然运作。


至于说缺点:




  1. 比例不一样的时候,会存在留白,开发大屏基本上都是为对应分辨率专门开发,我觉得这个缺点可以基本忽略,因为我们可以将背景色设置为大屏的基础色,这样留白部分不是太大基本没影响啦,哈哈




  2. 关于失真失真 是在你设置的 分辨率比例屏幕分辨率比例 不同的情况下,依然采用 铺满全屏 出现 拉伸 的时候,才会出现,正常是不会出现的。



    电视看电影比例不对,不也会出现上下黑边吗,你设置拉伸,他也会失真,是一个道理





🚀 开发


让我们先来看下效果吧!👇



既然选择了 scale 方案,那么我们来看看它的原理,以及如何实现吧!


原理


scale 方案是通过 css 的 transform 的 scale 属性来进行一个 等比例缩放 来实现屏幕适配的,既然如此我们要知道一下几个前提:



  1. 设设计稿的 宽高比1,则在任意显示屏中,只要展示内容的容器的 宽高比 也是 1,则二者为 1:1 只要 等比缩放/放大 就可以做到完美展示并且没有任何白边。

  2. 如果设计稿的 宽高比1, 而展示容器 宽高比 不是 1 的时候,则存在两种情况。

    1. 宽高比大于 1,此时宽度过长,计算时基准值采用高度,计算出维持 1 宽高比的宽度。

    2. 宽高比小于 1,此时高度过长,计算时基准值采用宽度,计算出维持 1 宽高比的高度。




代码实现


有了以上前提,我们可以得出以下代码


const el = document.querySelector('#xxx')
// * 需保持的比例
const baseProportion = parseFloat((width / height).toFixed(5))
// * 当前屏幕宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))

const scale = {
widthRatio: 1,
heightRatio: 1,
}

// 宽高比大,宽度过长
if(currentRate > baseProportion) {
// 求出维持比例需要的宽度,进行计算得出宽度对应比例
scale.widthRatio = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5))
// 得出高度对应比例
scale.heightRatio = parseFloat((window.innerHeight / baseHeight).toFixed(5))
}
// 宽高比小,高度过长
else {
// 求出维持比例需要的高度,进行计算得出高度对应比例
scale.heightRatio = parseFloat(((window.innerWidth / baseProportion) / baseHeight).toFixed(5))
// 得出宽度比例
scale.widthRatio = parseFloat((window.innerWidth / baseWidth).toFixed(5))
}

// 设置等比缩放或者放大
el.style.transform = `scale(${scale.widthRatio}, ${scale.heightRatio})`

OK,搞定了。


哇!这也太简单了吧。


好,为了下次一次编写到处使用,我们对它进行封装,然后集成到我们常用的框架中,作为通用组件


function useFitScreen(options) {
const {
// * 画布尺寸(px)
width = 1920,
height = 1080,
el
} = options

// * 默认缩放值
let scale = {
widthRatio: 1,
heightRatio: 1,
}

// * 需保持的比例
const baseProportion = parseFloat((width / height).toFixed(5))
const calcRate = () => {
if (el) {
// 当前比例
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
// 比例越大,则越宽,基准值采用高度,计算出宽度
// 反之,则越高,基准值采用宽度,计算出高度
scale = currentRate > baseProportion
? calcRateByHeight(width, height, baseProportion)
: calcRateByWidth(width, height, baseProportion)
}

el.style.transform = `scale(${scale.widthRatio}, ${scale.heightRatio})`
}

// * 改变窗口大小重新绘制
const resize = () => {
window.addEventListener('resize', calcRate)
}

// * 改变窗口大小重新绘制
const unResize = () => {
window.removeEventListener('resize', calcRate)
}

return {
calcRate,
resize,
unResize,
}
}

其实一个基本的共用方法已经写好了,但是我们实际情况中,有可能会出现奇怪比例的大屏。


例如:



  1. 超长屏,我们需要 x 轴滚动条。

  2. 超高屏,我们需要 y 轴滚动条。

  3. 还有一种情况,比如需要占满屏幕,不需要留白,适当拉伸失真也无所谓的情况呢。


所以,我们需要进行扩展这个方法,像 节流 节约性能,对上面是那种情况做适配等,文章篇幅有限,源码已经开源并且工具包已经上传了 npm 需要的可以去看源码或者下载使用



  • 工具包源码:使用文档在这里,希望大佬们给一个小小的 star~

  • 工具包NPM: 你可以通过 npm install @fit-screen/shared 下载使用


Vue logo 集成到 Vue


通过以上的的原理和工具包实现,接下来我们接入 Vue 将会变得非常简单了,只需要我们用 Vue 的 ref 将对应的 dom 元素提供给工具包,就可以实现啦~


不过在这个过程中我遇到的问题是,既然是一次编写,任意使用,我们需要集成 Vue2 和 Vue3,如何做呢?


说道这一点想必各位大佬也知道我要用什么了吧,那就是偶像 Anthony Fuvueuse 中使用的插件 vue-demi


好的,开发完毕之后,一样将它上传到 npm ,这样以后就可以直接下载使用了



大家也可以这样使用


npm install @fit-screen/vue @vue/composition-api
# or
yarn add @fit-screen/vue @vue/composition-api
# or
pnpm install @fit-screen/vue @vue/composition-api

当做全局组件使用


// In main.[jt]s
import { createApp } from 'vue'
import FitScreen from '@fit-screen/vue'
import App from './App.vue'

const app = createApp(App)
app.use(FitScreen)
app.mount('#app')

Use in any component


<template>
<FitScreen :width="1920" :height="1080" mode="fit">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo">
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</FitScreen>
</template>

在 SFC 中单独使用


<script setup>
import FitScreen from '@fit-screen/vue'
</script>

<template>
<FitScreen :width="1920" :height="1080" mode="fit">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo">
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</FitScreen>
</template>

react logo 集成到 React


集成到 React 也是完全没毛病,而且好像更简单,不存在 vue2 和 vue3 这样版本兼容问题



大佬们可以这样使用:


npm install @fit-screen/react
# or
yarn add @fit-screen/react
# or
pnpm install @fit-screen/react

import { useState } from 'react'
import FitScreen from '@fit-screen/react'

function App() {
const [count, setCount] = useState(0)

return (
<FitScreen width={1920} height={1080} mode="fit">
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src="/vite.svg" className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
React logo
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount(count => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
</FitScreen>

)
}

export default App

结尾



  1. 通过工具包可以在无框架和任意前端框架中开发自己的组件,比如说 Svelte,我也做了一个 Svelte 的版本示例,可以去 示例仓库 中查看。

  2. 目前就开发了 Vue 和 React 版本的自适应方案,大家可以根据需要进行使用。


感谢大家的阅读,希望大家能用得上,并且给上 star~


作者:jpliu
来源:juejin.cn/post/7202598910337138748
收起阅读 »

Android必知必会-Stetho调试工具

一、背景 Stetho是 Facebook 出品的一个强大的 Android 调试工具,使用该工具你可以在 Chrome Developer Tools查看APP的布局, 网络请求(仅限使用Volle, okhttp的网络请求库), Sqlite, Pref...
继续阅读 »

一、背景



Stetho是 Facebook 出品的一个强大的 Android 调试工具,使用该工具你可以在 Chrome Developer Tools查看APP的布局, 网络请求(仅限使用Volle, okhttp的网络请求库), Sqlite, Preference, 一切都是可视化的操作,无须自己在去使用adb, 也不需要root你的设备



本人使用自己的Nubia Z9 Mini作为调试机,由于牵涉到Sqlite数据库,所以尝试了很多办法把它Root了,然而Root之后就无法正常升级系统。
今天得知一调试神器Stetho,无需Root就能查看数据库以及APP的布局(这一点没有Android Device Monitor使用方便,但是Android Device Monitor在Mac上总是莫名其妙出问题),使用起来很方便,大家可以尝试一下。


二、配置流程


1.引入主库


使用Gradle方式:


// Gradle dependency on Stetho 
dependencies {
compile 'com.facebook.stetho:stetho:1.3.1'
}

此外还支持Maven方式,这里不做介绍。


2.引入网络请求库


如果需要调试网络且你使用的网络请求库是Volle或者Okhttp,那么你才需要配置,否则跳过此步。
以下根据自己使用的网络请求库情况来导入相应的库:
1.使用okhttp 2.X


 dependencies { 
compile 'com.facebook.stetho:stetho-okhttp:1.3.1'
}

2.使用okhttp 3.X


dependencies { 
compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'
}

3.使用HttpURLConnection


dependencies { 
compile 'com.facebook.stetho:stetho-urlconnection:1.3.1'
}

3.配置代码


配置Application


public class XXX extends Application {
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
}
}

配置网络请求库:
OkHttp 2.2.x+ 或 3.x


//方案一
OkHttpClient client = new OkHttpClient();
client.networkInterceptors().add(new StethoInterceptor());

//方案二
new OkHttpClient.Builder()
.addNetworkInterceptor(new StethoInterceptor())
.build();

如果使用的是HttpURLConnection,请查阅相关文档。


4.使用


运行重新编译后的APP程序,保持手机与电脑的连接,然后打开Chrome浏览器,在地址栏里输入:chrome://inspect然后选择自己的设备下运行的APP进程名下的Inspect链接 即可进行调试。


三、遇到的问题


1.okhttp版本问题:


可能你还在使用okhttp 2.x的版本,在引入网络库的时候,你需要去查看一下Stetho当前版本使用的okhttp版本,避免在项目中使用多个不同版本的okhttp


PSokhttp2.x和3.x的引入方式略有不同,不可以直接修改版本号来导入:


//2.x
compile 'com.squareup.okhttp:okhttp:2.x.x'
//3.x
compile 'com.squareup.okhttp3:okhttp:3.x.x'

2.配置okhttp代码方案一报错:


//方案一
OkHttpClient client = new OkHttpClient();
client.networkInterceptors().add(new StethoInterceptor());

//方案二
OkHttpClient client = new OkHttpClient.Builder()
.addNetworkInterceptor(new StethoInterceptor())
.build();

我在使用方案一进行配置okhttp的时候,会报错:


 Caused by: java.lang.UnsupportedOperationException

不知道是不是兼容的问题,大家在使用的时候请注意。



Stetho官网






转载请注明出处,如果有什么建议或者问题可以随时联系我,共同探讨学习:



作者:cafeting
来源:juejin.cn/post/7202164243612860472

收起阅读 »

当我把ChatGPT机器人拉到微信群里,群友都玩疯了!!

大家好呀,我是飘渺! 最近ChatGPT可谓是火出天际,人工智能领域的股票最近都被这家伙带的一路狂飙,如果到现在你都没听过或使用过的话那你可能是有点out了。 今天的文章并不打算介绍ChatGPT,而是要带大家玩一件好玩的事。将ChatGpt聊天机器人拉到你微...
继续阅读 »

大家好呀,我是飘渺!


最近ChatGPT可谓是火出天际,人工智能领域的股票最近都被这家伙带的一路狂飙,如果到现在你都没听过或使用过的话那你可能是有点out了。


今天的文章并不打算介绍ChatGPT,而是要带大家玩一件好玩的事。将ChatGpt聊天机器人拉到你微信群里,这样正如群友所说,你就可以假装成ChatGpt背后那个无所不能的人了。


在微信群的效果如下:


image-20230208221022410


手把手教学,最新实测版,如果有效还请三连一下。


前提条件



  1. 一个可以科学上网的全局代理(推荐使用美国节点)

  2. 一个邮箱用于注册ChatGPT(Gmail,OutLook均可)

  3. 一个国外手机号用于接收验证码

  4. 一台安装好Docker环境的服务器

  5. 一个微信小号用于假装机器人


注册ChatGpt


1、在你设备上开启全局代理


建议使用美国节点,如果未启用全局代理,或者使用的节点不稳定,则有可能出现ChatGPT在当前地区不可用的报错提示。


2、登录 https://platform.openai.com/signup注册账号


填入准备好的点子邮箱地址后点击Continue


3、完善信息后来到手机验证页面


image-20230208222208084


先停在这个页面,接下来我们需要准备一个手机号用于接收验证码。


4、在sms-activate.org购买一个可以接受海外的手机号用于接受验证码


4.1)访问sms-activate.org,注册并登陆账号


4.2)登陆后在右上角切换成中文


image-20230208162659061


4.3)点击右上角用户图标,选择充值按钮


image-20230208222816662


这里通过支付宝进行充值,现在这个平台涨价了,最低付款金额为0.5美元,转化成人名币是3.55元。


4.4)购买OpenAI的服务


image-20230208162804417


选择OpenAI后进入国家服务列表页面,这里推荐大家购买印度尼西亚的服务,亲测印度的今天不能接受验证码了。


image-20230208162710493


4.5)将这个购买好的手机号复制并粘贴到步骤3的验证手机号码界面,点击Send code via SMS


4.6)留意sms-activate.org页面,很快就会收到一个验证码,将验证码填入ChatGPT页面的验证码输入框即可完成验证


image-20230208223611034


4.7)注册完成后进行登陆chat.openai.com,即可与OpenAI对话了


配置微信机器人


OpenAI 提供了接入的 API keys 的,只有在申请了这个 API keys 才能完成后续的接入动作,所以我们首先需要申请一个API KEY。


申请openopi


1、访问https://platform.openai.com/account/api-keys,进入后,点击 Create new secret key 就可以申请了。


image-20230208170456377


2、通过准备好的服务器部署(Docker)微信聊天机器人,可以本地部署也可以在云服务器上部署。


部署步骤如下:


# 1. 创建目录
mkdir -p /data/openai

cd /data/openai

# 2. 创建文件
touch config.json

# 3. 修改文件
vi config.json

{
 "api_key": "复制粘贴你申请的API keys", # openai的 账户创建的apikeys
 "auto_pass": false,         # 加好友时,是否自动通过
 "model": "text-davinci-003", # 模型名称,官网有很多模型
 "session_timeout": 90        # session保存时间 秒,其实就是上下文保留时间. 超过这个时间,就会自动清空上下文
}

# 4. 拉取镜像
docker run -dti --name wechat -v /data/openai/config.json:/app/config.json cynen/wechat

# 5. 查看日志
docker logs -f wechat

image-20230208173432041


查看日志时我们可以看到日志界面出现了一个二维码,此时用你的微信小号扫描登录,登录后你就可以向他提问题了,或者将小号拉到你的微信群里。


在微信群里只要at他就可以对他提问了。


怎么样,是不是很好玩呢?你也赶紧部署一个试试吧!


作者:飘渺Jam
来源:juejin.cn/post/7197995910566330425
收起阅读 »

ChatGPT 的出现对当下的互联网生态所具备革命意义

持续火爆的 ChatGPT 是基于 OpenAI 开发的 GPT-3 模型进行微调得到一款聊天机器人产品,当下大家应该都已经体验过了,对于技术从业者或者普通用户带来的震撼都是极大的,因为人工智能第一次拥有了类人的语言风格和情感色彩,这种前所未有的体验自然引爆了...
继续阅读 »

持续火爆的 ChatGPT 是基于 OpenAI 开发的 GPT-3 模型进行微调得到一款聊天机器人产品,当下大家应该都已经体验过了,对于技术从业者或者普通用户带来的震撼都是极大的,因为人工智能第一次拥有了类人的语言风格和情感色彩,这种前所未有的体验自然引爆了整个网络。


但热潮过后也引发了我的一些思考,对于大多数人而言,ChatGPT 似乎可以无缝衔接到任何场景,似乎人工智能的时代已经来临,但是从技术上说,ChatGPT 只是在 GPT-3 的基础上加入了一些更友好的生成风格,从某种角度看,ChatGPT 是一个会讨好你的,友善的,令人愉快的聊天对象。


如果你翻阅过 OpenAI 的文档,那么应该了解到当下的 GPT-3 模型拥有一些不可避免的硬伤,例如 4000 tokens 的上下文限制,对于通过 prompt 预训练来让 GPT-3 具备更复杂场景的处理能力就显得非常的不足,如果类比的话,好比早年的汇编程序编程的设备,拥有很小的内存空间,无法装下特别复杂的指令,只能通过复杂的软件架构来实现多设备之间的协作从而完成一个在当下我们看来非常简单的任务,但是 --->>>


AI 可以编程了!! AI 可以编程了!! AI 可以编程了!!


重要的事情说三遍,内存大小根本不是问题,作为技术从业者,我经历了早期的 pc 机时代到现在如此发达的互联网,小时候上网是 64kb 调制解调器,网页上只能看到一些文字,存储图片都很费劲,但是在那个年代你会因为互联网这些简陋的应用,简陋的网页而激动人心,因为你看到的是一个全新的时代。


事实上在我成为行业专家,从事工作之后的后几年已经渐渐没有了当初那种激动人心的体验,也一度失去了改变世界的梦想,上班拧螺丝,下班刷抖音已经成为很多人的日常,在技术圈里,新技术的发展越来越内卷,那些曾经热衷于讨论的新鲜玩意逐渐消失,大龄程序员们关注的是房子车子老婆孩子,还有那 35岁的失业红线,刚毕业的年轻程序员们则讨论哪家又裁员了,今年的 Package 又不行了。最近几年技术网红越来越多,而能讨论的技术空间则越来越少。


这一现象的本质是前几轮的技术革命周期已经临近尾声,技术生态和技术成长空间已经渐渐不足,但是我国每年毕业的理工科学生缺越来越多,这必然导致了我们所说的内卷,人才内耗现象的发生。


让我们回顾整个计算机信息革命几十年发展的历程,从最初的大型服务器计算机在企业内部逐渐普及,彼时以 IBM 这类企业服务器厂商为主的时代到比尔盖茨,乔布斯敏锐的发现了个人计算机普及的趋势,推动了个人计算机行业的集聚发展,从而有了丰富的广泛的软件行业,这里事实上是两个阶段



  1. 计算机在企业的普及,此时计算机属于专用设备,处理特定的专业场景,软件也主要基于这些专业场景开发,这一阶段的特点是软件开发的要求很高,因为编程很复杂。

  2. 计算机在个人的普及,计算机进入民用化时代,高级语言蓬勃发展,软件开发的门槛降低,规模化和标准化让经过教育和培训的学生或者成人自学都能掌握,从而大大推动了软件行业的发展,不过这一阶段的编程要求依然是比较高的,参考我国早年雷军等大佬的从业经历,但已经是非常大的一次进步了,而且那个时候的软件只能编写在软盘上,可能只有几百kb左右的空间,如果你曾经玩过软盘版本的金庸群侠传就知道我在说什么了。



事实上我已经很久没写文章了,技术内卷让我失去了分享的乐趣,完全没有任何让人兴奋的东西可以研究可以讨论,但是 ChatGPT 确实重新点燃了我对讨论,对分享的兴趣。



事实上互联网能够发展到今天这个规模,个人计算机的普及自然是功不可没,毕竟 IPV4 的设计者们都应该想不到有一天地址池还能枯竭,可见无论什么时代,再优秀的人也难以突破时代对想象力的限制。


当时间进入 90 年代,互联网技术突飞猛进,软件应用的形态从 C/S 结构向 B/S 结构演变,时至今日几乎大部分软件都需要和远程数据库进行通信,数据中心化催生了大数据,云计算,推动了 Web 的发展,如果说个人 PC 的发展是科技民主化,那么移动智能设备 IPhone 的出现则是让智能设备和人类个体进行了一个深度绑定,过去 PC 不能代表你,PC 只是你某个时间或者空间断面上的你,但是智能手机却几乎能够代表你,通过智能手机里的应用和数据分析几乎可以勾勒出你这个人的方方面面,因此在这个阶段大致也可以分为两个部分



  1. 基于 PC 的互联网普及,我们身份的某一个切面被连接到了网络上,推动了早期 web 的蓬勃发展

  2. 基于 智能手机的移动互联网,让我们的以近乎完整的数字身份连接网络


以上就是时至今日的我理解的互联网的发展历程,回顾这些则是为了展开下面关于 ChatGPT 的讨论。


从上面两个阶段发现就软件本身其实经历了两个不同层次的周期



  1. 第一个周期本地软件的编程周期,软盘,光盘,存储介质的变化,空间变大,程序变的复杂

  2. 第二个周期软件存储去介质化,通过互联网软件可以以任意大小进行分发和使用,代码的量级也达到了亿级,软件变得极其复杂。

  3. 第三个周期 --->>>


对于 ChatGPT 来说,我认为就是第三周期的正式开启,现在的软件很复杂也很巨大,例如 Facebook,或者淘宝,但是这些代码都是手工编辑的,其中一小部分可能是自动是生成的,如果把软件比作制造业,那么第一阶段的软件开发是作坊,非工业化的,而第二阶段则是工业化的,效率比较第一阶段有了极大的提升,但是对于巨大规模的问题依然束手无措



软件行业的巨大规模问题,例如千人千面,中心化软件的个性化,SaaS 的定制化,以目前的技术能力,收益几乎是无法覆盖成本。



由此可见软件行业继续按照现有的路径发展,本质上已经是无法解决这些问题了,无论是更智能的 IDE 还是更加抽象的编程语言,如果用这种思路去开发 ChatGPT 这样的软件那必然是海量的人力和海量的 Bug 以及难以预计的维护成本。


回到我之前提到的 AI 可以编程了,恰恰是这个问题的解。


把 ChatGPT 背后的 GPT-3 看做是一种可编程环境,那么你就不难理解我所说的第三周期的含义。



  1. 第三个周期,软件编程进一步抽象为对 AI Model 进行编程,利用高级语言对 AI 进行编程,利用 AI 的能力重新构建新一代的数字应用。


所以新一代的数字应用是什么呢?


我们现在所使用的 App 无论厂商口号喊的怎么想,要以用户为中心之类的,但其本质是以平台或者组织为中心构建的应用,简单理解这句话,那就是作为用户你的需求从未真正被这些应用所正视过,这也是我前面提到的现代软件在面临个性化上的严重不足,研发成本和收益的不匹配。


而基于 AI 为中心的下一代数字应用,其核心是利用 AI 具备的语义理解,情感分析,内容生成等强大的基础能力,能够真正做到以用户为中心,这种思路转换将完全颠覆我们对现在数字应用的理解。


我举一个非常简单的例子,比如我们用微信,你可以仔细回想你很多沟通上的需求微信能够满足你么?



  1. 时时刻刻的重要内容提醒,拟人化的不在线临时回复

  2. 群消息的过滤和检索,群消息讨论的观察,消息的分类

  3. 朋友圈消息的提炼,对重要人朋友圈的时刻关注



微信本质是一种异步沟通的产品机制,在设计上实时沟通仅限于你和沟通对象同时在线的情况



对消息的实时观察,过滤,检索,分类,整理让我们很容易错过许多非常重要的信息,对于个人而言可能损失了很多机会,又或者降低了学习的效率,其本质是因为基于移动互联网时代,我们虽然和设备做了深度绑定,但我们的时间是有限的,一个人不可能 24 小时都挂在网上,同时我们也没有能力分身亿万,对所有东西都保持关注,但是 AI 带来了一种可能性


未来,你可能拥有 N 个数字助手,这些数字助手都基于特定编程,能够帮你处理各种特定的事务,让你突破自身时间的限制,总结起来


第一个周期让我们有限的连接,第二个周期让我们完整的连接,第三个周期让我们几乎无限的连接。


这是一个新时代,一切都将被颠覆

作者:掘金泥石流
来源:juejin.cn/post/7199897954403418169
,而你做好准备了么?

收起阅读 »

ChatGPT保姆级注册教学

1.前言 大家好,最近一款ChatGPT的AI产品横空出世,他的强大的功能引起了广大网友的热议,并迅速席卷全球。 根据UBS发布的研究报告显示, ChatGPT在1月份的月活跃用户数已达1亿,成为史上用户数增长最快的消费者应用,相比之下, TikTok花了九...
继续阅读 »

1.前言


大家好,最近一款ChatGPT的AI产品横空出世,他的强大的功能引起了广大网友的热议,并迅速席卷全球。
image.png


根据UBS发布的研究报告显示, ChatGPT在1月份的月活跃用户数已达1亿,成为史上用户数增长最快的消费者应用,相比之下, TikTok花了九个月的时间月活跃用户数才破亿,1月份平均每天有超过1300万名独立访问者使用ChatGPT ,是去年12月份的两倍多。


image.png


那么这么一款现象级的产品,我可不允许大家还没用过,今天就详细出一版ChatGPT注册教程,也是后面我们接入ChatGPT必须要做的第一步。


2.注册准备


ChatGPT把国内给禁掉了,包括港子和湾子,所以如果注册的话就要代理到其他国家。不然浏览器会提示该地区政策禁止使用。注册需要使用邮箱和手机号,手机号也有区域限制,因此手机号和邮箱也需要国外的邮箱手机才能注册成功。我也给大家梳理了以下个人感觉比较好用的虚拟站点,提供使用:



3.注册流程


3.1.账号创建


打开神秘力量上网工具,要走全局代理,不然也会被定位到国内不能使用。之后打开ChatGPT官网chat.openai.com/auth/login


image.png


进入创建账号页面,这里需要输入邮箱,我们先进入temp-mail.org/zh/ 获取免费的临时邮箱


image.png


输入邮箱,点击继续


image.png


输入密码,点击继续


image.png


3.2.邮箱验证


接下来就开始提示邮箱验证了,系统会发送一封邮件到邮箱,我们需要打开刚才的邮箱点击验证邮件。


image.png


打开temp-mail.org/zh/,发现下面多了一封openai发送的邮件,点开邮件


image.png


点击校验邮箱地址


image.png


3.3.身份输入


姓名输入,这个可以随便写,之后点击继续


image.png


3.4.手机号验证


接下来开始进行手机号验证


image.png


进入,sms-man.com/cn地址,先充值1美元的额度,接下来选择对应的国家,然后选择服务,找到OpenAi/ChatGPT,点击购买短信。


image.png


之后下方会多出一个号码,这个就是用来接收短信的号码


image.png


将短信复制到手机号填写的地方,删掉区号,点击发送短信


image.png


之后在虚拟手机号平台点击接收短信,这时候就会收到短信的验证码如下:


image.png


在ChatGPT验证码页面输入信息,验证通过后跳转对话页面。


3.5.Hello ChatGPT


验证码输入完成之后进入如下对话页面,来吧,作为传统第一步当然是来一句,Hello ChatGPT啦,到此,注册完毕,接下来就可以使用ChatGPT啦,你学废了吗?


image.png



作者:王老狮
来源:juejin.cn/post/7206732474113458231
收起阅读 »

ChatGPT 来我司面试前端工程师,考考他闭包

近日,有个叫 ChatGPT 的同学来我司面试前端,考考他面试八股文。先来问问闭包。 第一问,说说 JS 闭包 追问,详细讲讲闭包 篇幅太长,转成文字,以下皆为 ChatGPT 回答 闭包是一个非常重要的 JavaScript 概念,也是相对难以理解的概...
继续阅读 »

近日,有个叫 ChatGPT 的同学来我司面试前端,考考他面试八股文。先来问问闭包。


第一问,说说 JS 闭包


image.png


追问,详细讲讲闭包



篇幅太长,转成文字,以下皆为 ChatGPT 回答



闭包是一个非常重要的 JavaScript 概念,也是相对难以理解的概念之一。为了更好地理解闭包,我们需要介绍一些相关的概念和知识。



  1. 作用域


作用域(scope)是指在程序中能够访问变量、函数的区域。JavaScript 中有全局作用域和函数作用域两种。


全局作用域是指在整个程序中都可以访问的变量,它们在程序开始时就被创建,在程序结束时才被销毁。


函数作用域是指在一个函数内部声明的变量,只能在函数内部访问,而在函数外面是不能访问的。当函数执行完毕后,函数内部的变量会被销毁。



  1. 词法作用域


词法作用域(lexical scope)是指在编写程序时,变量和函数的作用域是通过它们在代码中声明的位置来确定的。


这意味着,函数可以访问在其外部定义的变量和函数,但在其内部定义的变量和函数不能被外部访问。这是因为 JavaScript 引擎识别变量和函数的作用域是根据它们在代码中的位置来决定的,而不是根据它们被调用的位置。



  1. 闭包的定义和作用


闭包(closure)是指函数能够访问其词法作用域之外的变量,即使在函数被调用后仍然可以访问。


换句话说,当一个函数在其外部定义的变量的作用域外被调用时,它可以访问这些变量,并且可以在调用完成之后继续访问这些变量。这就是闭包的作用。


举个例子,假设我们有一个函数 outer,它内部有一个变量 x,还返回了一个函数 inner,这个函数也访问了 x。那么,当我们调用 outer 函数并得到 inner 函数后,inner 函数就形成了一个闭包,它可以继续访问 outer 函数内部的变量 x


function outer() {
let x = 1;
function inner() {
console.log(x);
}
return inner;
}

let closure = outer();
closure(); // 1


在上面的例子中,我们通过调用 outer 函数得到了一个函数 closure,它可以访问 outer 函数内部的变量 x。在调用 closure 函数时,它会输出变量 x 的值。这就是闭包的作用。



  1. 闭包的用途和注意事项


闭包可以用来创建一些类似于私有变量和方法的功能,以及实现一些高阶函数,如柯里化等。


举例来说,我们可以使用闭包来实现一个计数器:


function counter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}

let myCounter = counter();
myCounter(); // 1
myCounter(); // 2
myCounter(); // 3


在上面的例子中,counter 函数返回了一个函数,这个函数可以访问 counter 函数内部的变量 count,并且会在每次调用时将 count 加一,并输出加一后的结果。


需要注意的是,过多的闭包使用可能会导致性能问题和内存泄漏的风险,所以应该谨慎使用。特别是在循环语句中,不能滥用闭包。


for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i); // 输出的都是 10
}, 1000);
}

在上面的例子中,我们在循环中使用了闭包,希望在每次循环时输出当前的计数器。但实际上,这个程序的输出结果是十个 10,因为在循环中创建的闭包都是共享同一个变量 i,而这个变量在循环结束时已经变成了 10。这就是闭包的一个陷阱:不能在循环中共享变量,否则会导致意外的结果。


那么如何解决在循环中使用闭包的陷阱


要解决在循环中使用闭包的陷阱,我们需要创建一个独立的变量。在 ES6 中,我们可以使用 let 关键字来声明一个块级作用域的变量,每次循环都可以创建一个新的变量,从而避免在闭包中共享同一个变量。


例如,在下面的例子中,我们可以通过在循环中使用 let 关键字来解决闭包的陷阱:


for (let i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i); // 输出 0 到 9
}, 1000);
}

在上面的例子中,我们使用 let 关键字来声明变量 i,这样每次循环都会创建一个新的变量,并且每个闭包都可以访问自己私有的变量。因此,输出的结果会是 0 到 9。


如果使用 ES5 或更低版本的 JavaScript,我们可以使用一个立即执行函数表达式(IIFE)来创建一个块级作用域。例如:


for (var i = 0; i < 10; i++) {
(function(j) {
setTimeout(function() {
console.log(j); // 输出 0 到 9
}, 1000);
})(i);
}

在上面的例子中,我们创建了一个即时函数 function(j) { ... }(i),这个函数会立即执行并创建一个新的作用域,把变量 i 的值传递给参数 j,从而避免在闭包中共享同一个变量。


let 的块级作用域讲讲


ES6 中引入了 let 关键字,它的一个重要特性就是可以创建块级作用域。这意味着,变量在块级作用域中声明,只能在该作用域内部访问,离开作用域后就会被销毁。


块级作用域是指用花括号 {} 包围的代码块,例如函数、条件语句、循环语句等。


举个例子,在下面的代码中,我们使用 let 关键字来声明一个块级作用域的变量 x,它只能在块级作用域中访问。


function myFunction() {
if (true) {
let x = 10;
console.log(x); // 输出 10
}
console.log(x); // 报错:ReferenceError: x is not defined
}

在上面的代码中,变量 x 只能在 if 语句的代码块中访问,在代码块外部访问时会报错。


需要注意的是,块级作用域只适用于 letconst 关键字,而不适用于 var 关键字。


例如,在下面的代码中,我们使用 var 关键字来声明变量 x,它虽然在函数中声明,但是可以在函数外部访问。


function myFunction() {
if (true) {
var x = 10;
console.log(x); // 输出 10
}
console.log(x); // 输出 10
}

在上面的代码中,变量 x 虽然在 if 语句的代码块中声明,但是可以在函数外部访问。这是因为 var 关键字具有提升(hoisting)的特性,即变量会被提升到函数的顶部声明,所以可以在整个函数中访问。但是,它的值只有在实际声明之后才会被赋值。


最后


好了,今天先到这。回去等通知吧。




如果你觉得内容对你有帮助,欢迎「转发点赞收藏


你的鼓励是我最大的支持,猛戳“关注”,后续文章更精彩。


作者:李瑞丰_liruifengv
来源:juejin.cn/post/7206217352185184293
收起阅读 »

ChatGPT:吃喝嫖赌,哪个最伤身体?

ChatGPT:吃喝嫖赌,哪个最伤身体?吃喝嫖赌 哪个最伤身体?吃喝嫖赌这四个行为都可能对身体造成不良影响,但其影响程度可能因人而异,也取决于具体的行为情况和频率。然而,从普遍的角度来看,其中嫖和赌相对而言更容易带来身体上和心理上的负面影响。嫖娼:嫖娼可能会导...
继续阅读 »

ChatGPT:吃喝嫖赌,哪个最伤身体?



吃喝嫖赌 哪个最伤身体?

吃喝嫖赌这四个行为都可能对身体造成不良影响,但其影响程度可能因人而异,也取决于具体的行为情况和频率。然而,从普遍的角度来看,其中嫖和赌相对而言更容易带来身体上和心理上的负面影响。

  1. 嫖娼:嫖娼可能会导致性传播疾病(STDs)的传播和其他感染,如艾滋病等。嫖娼者也可能面临性侵害、暴力、精神问题等方面的风险。

  2. 赌博:赌博可能会导致赌徒出现赌瘾、债务累积、家庭破裂等问题,还可能导致抑郁症、焦虑症等心理问题。

  3. 喝酒:适量饮酒可能对身体并没有太大的伤害,但长期和过量饮酒可能导致多种健康问题,如肝损伤、胰腺炎、脑损伤等。

  4. 吃药:吸毒会对身体造成严重伤害,不仅可能导致健康问题,如肺病、心血管疾病等,还可能对神经系统和认知功能造成损害。

总的来说,以上这四种行为都是有害的,应该尽量避免。

继续

除了上述四种行为之外,还有其他一些行为也可能对身体造成不良影响,例如:

  1. 吸烟:吸烟是导致癌症、心血管疾病和呼吸系统疾病的主要原因之一,同时也会损害皮肤、牙齿和骨骼等多个方面的健康。

  2. 不健康的饮食:过量食用高热量、高脂肪和高糖的食物可能导致肥胖、糖尿病、心血管疾病等健康问题。

  3. 缺乏运动:缺乏运动会增加肥胖、心血管疾病、骨质疏松等疾病的风险,并可能影响心理健康。

  4. 缺乏睡眠:长期睡眠不足可能导致身体疲劳、免疫力下降、抑郁症等健康问题。

综上所述,以上这些行为都可能对身体造成伤害,人们应该注意健康的生活方式,避免不健康的行为,保护自己的身体健康。


来源:m.toutiao.com/is/SUJaT7K/

收起阅读 »

手把手教你使用 Python 调用 ChatGPT-3.5-API

大家好,我是老表 前天 OpenAI 开放了两个新模型的api接口,专门为聊天而生的 gpt-3.5-turbo 和 gpt-3.5-turbo-0301。 ChatGPT is powered by gpt-3.5-turbo, OpenAI’s mos...
继续阅读 »

大家好,我是老表


前天 OpenAI 开放了两个新模型的api接口,专门为聊天而生的 gpt-3.5-turbo 和 gpt-3.5-turbo-0301。




ChatGPT is powered by gpt-3.5-turbo, OpenAI’s most advanced language model.



从上面这句话,我们可以知道现在 chat.openai.com 官网就是由 gpt-3.5-turbo 模型提供的服务,现在官方公开了这一模型的调用接口,这使得我们这些普通开发者也能直接在自己的应用/服务中使用这个狂揽亿万用户的模型。


接下来将和大家介绍如何利用 Python 快速玩转 gpt-3.5-turbo。


本文所有代码已开源,持续更新中:XksA-me/ChatGPT-3.5-AP


先跑起来,再理解


首先你需要有一个 openai 账号,如何注册我就不多说了,网上教程很多,而且很详细,如果有问题可以加我微信:pythonbrief,添加通过后请直接描述你的问题+问题截图


访问下面页面,登录 openai 账号后,创建一个 api keys。


# api keys 创建页面
https://platform.openai.com/account/api-keys

接下来很简单了,安装 openai 官方的 Python SDK,这里需要注意的是得安装最新版本 openai,官方推荐的是 0.27.0 版本。


pip install openai==0.27.0

直接上请求代码:


import openai
import json

# 目前需要设置代理才可以访问 api
os.environ["HTTP_PROXY"] = "自己的代理地址"
os.environ["HTTPS_PROXY"] = "自己的代理地址"


def get_api_key():
# 可以自己根据自己实际情况实现
# 以我为例子,我是存在一个 openai_key 文件里,json 格式
'''
{"api": "你的 api keys"}
'''

openai_key_file = '../envs/openai_key'
with open(openai_key_file, 'r', encoding='utf-8') as f:
openai_key = json.loads(f.read())
return openai_key['api']

openai.api_key = get_api_key()

q = "用python实现:提示手动输入3个不同的3位数区间,输入结束后计算这3个区间的交集,并输出结果区间"
rsp = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": "一个有10年Python开发经验的资深算法工程师"},
{"role": "user", "content": q}
]
)

代码解析:




  • get_api_key() 函数是我自己写的一个从文件读取 api keys 的方法,我是存在一个 openai_key 文件里,json 格式,你可以改成你自己的获取方法,甚至可以直接写到代码里(虽然不推荐,但确实最简单)。




  • q 是请求的问题




  • rsp 是发送请求后返回结果




  • openai.ChatCompletion.create 中参数





    • model 是使用的模型名称,是一个字符串,用最新模型直接设置成gpt-3.5-turbo 即可





    • messages 是请求的文本内容,是一个列表,列表里每个元素类型是字典,具体含义如下表:




  • 程序运行返回内容,从响应回复内容我们可以看到,回复内容是一个 json 字符串,

    我们可以通过以下方法直接获取相关信息:








    • 返回消息内容




rsp.get("choices")[0]["message"]["content"]




    • 角色




rsp.get("choices")[0]["message"]["role"]




    • 问题+回答总长度




rsp.get("usage")["total_tokens"]

其他信息也可以通过类似方法获取。



  • 测试 ChatGPT 回答代码运行情况,可以看出代码逻辑和运行都没啥问题,注释也到位。



实现多轮对话


如何实现多轮对话?


gpt-3.5-turbo 模型调用方法 openai.ChatCompletion.create 里传入的 message 是一个列表,列表里每个元素是字典,包含了角色和内容,我们只需将每轮对话都存储起来,然后每次提问都带上之前的问题和回答即可。




  • 效果图





    • 可以看到,我首先问了“1+1=几”,然后问“为什么是这样”,ChatGPT 会根据前面的提问将新问题识别为“为什么1+1=2”。





    • 后面继续问水仙花数有哪些,再问“如何写个python程序来识别这些数”,ChatGPT 同样会根据前面的提问将新问题识别为“如何写个python程序来识别这些水仙花数”,并给出对应解答。




  • 实现代码




import openai
import json
import os

os.environ["HTTP_PROXY"] = "http://127.0.0.1:7890"
os.environ["HTTPS_PROXY"] = "http://127.0.0.1:7890"

# 获取 api
def get_api_key():
# 可以自己根据自己实际情况实现
# 以我为例子,我是存在一个 openai_key 文件里,json 格式
'''
{"api": "你的 api keys"}
'
''
openai_key_file = '../envs/openai_key'
with open(openai_key_file, 'r', encoding='utf-8') as f:
openai_key = json.loads(f.read())
return openai_key['api']
openai.api_key = get_api_key()



class ChatGPT:
def __init__(self, user):
self.user = user
self.messages = [{"role": "system", "content": "一个有10年Python开发经验的资深算法工程师"}]
self.filename="./user_messages.json"

def ask_gpt(self):
# q = "用python实现:提示手动输入3个不同的3位数区间,输入结束后计算这3个区间的交集,并输出结果区间"
rsp = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=self.messages
)
return rsp.get("choices")[0]["message"]["content"]


def writeTojson(self):
try:
# 判断文件是否存在
if not os.path.exists(self.filename):
with open(self.filename, "w") as f:
# 创建文件
pass
# 读取
with open(self.filename, 'r', encoding='utf-8') as f:
content = f.read()
msgs = json.loads(content) if len(content) > 0 else {}
# 追加
msgs.update({self.user : self.messages})
# 写入
with open(self.filename, 'w', encoding='utf-8') as f:
json.dump(msgs, f)
except Exception as e:
print(f"错误代码:{e}")


def main():
user = input("请输入用户名称: ")
chat = ChatGPT(user)

# 循环
while 1:
# 限制对话次数
if len(chat.messages) >= 11:
print("******************************")
print("*********强制重置对话**********")
print("******************************")
# 写入之前信息
chat.writeTojson()
user = input("请输入用户名称: ")
chat = ChatGPT(user)

# 提问
q = input(f"【{chat.user}】")

# 逻辑判断
if q == "0":
print("*********退出程序**********")
# 写入之前信息
chat.writeTojson()
break
elif q == "1":
print("**************************")
print("*********重置对话**********")
print("**************************")
# 写入之前信息
chat.writeTojson()
user = input("请输入用户名称: ")
chat = ChatGPT(user)
continue

# 提问-回答-记录
chat.messages.append({"role": "user", "content": q})
answer = chat.ask_gpt()
print(f"【ChatGPT】{answer}")
chat.messages.append({"role": "assistant", "content": answer})


if __name__ == '__main__':
main()

代码解析:




  • ChatGPT 类,包含三个函数:





    • __init__初始化函数,初始化了三个个实例变量,user、messages、filename(当前用户、消息列表、存储记录的文件路径)。





    • ask_gpt函数,将当前用户所有历史消息+最新提问发送给 gpt-3.5-turbo ,并返回响应结果。





    • writeTojson函数,结束/重置用户时记录当前用户之前的访问数据。




  • main函数,程序入口函数,用户输入用户名后进入与 ChatGPT 的循环对话中,输入 0 退出程序,输入 1 重置用户,退出和重置都会将当前用户之前访问数据记录搭配 json 文件中。




  • 由于 gpt-3.5-turbo 单次请求最大 token 数为:4096,所以代码里限制了下对话次数。




更多拓展



  • 你可以写个函数,从 json 文件读取历史用户访问记录,然后每次访问可以选用户。

  • 你可以写个 web 服务,使用 session 或者数据库支持多用户同时登录,同时访问。

  • 你可以基于之前分享的钉钉机器人项目,将 gpt-3.5-turbo 接入钉钉机器人。


你还可以上 Github 搜索更多 ChatGPT 相关项目,或者其他有意思的项目学习练手,欢迎学习交流。


我创建了个 ChatGPT 应用交流群,如果你感兴趣可以扫下方二维码添加我微信申请加入。


项目已开源,持续更新中:XksA-me/ChatGPT-3.5-AP


作者:老表
来源:juejin.cn/post/7206511128277024823
收起阅读 »

这一年,我终于成为了一名真正的前端

前言 时间很快,2022年一整年好像都很忙,也终于从学生过渡到了一名社会人 2022上半年,大四,独自一人去杭州实习,孤独,但在杭州实习的那几个月,是我成长最快的几个月。 2022下半年,毕业,拒绝掉转正offer,拒绝掉对于应届生来说可观的薪资。回成都找了一...
继续阅读 »

前言


时间很快,2022年一整年好像都很忙,也终于从学生过渡到了一名社会人


2022上半年,大四,独自一人去杭州实习,孤独,但在杭州实习的那几个月,是我成长最快的几个月。


2022下半年,毕业,拒绝掉转正offer,拒绝掉对于应届生来说可观的薪资。回成都找了一份离家近,但是薪资少一半的工作,理想中就是钱少事少,下班后能开启新生活的工作,但事实真的如此吗?好多同学、长辈问过我后不后悔,当然后悔了,肠子都悔青了,属于是亲身体会了什么叫卷,什么叫钱少事情多压力大,再不涨薪已经准备提桶跑路了。我说:不后悔,毕竟成长了。


打工人的眼泪


见过凌晨五点的成都吗,我见过,那时候我刚下班。但是第二个月看着我四位数的工资的时候,我还是没忍住骂了一句:wtf?我为什么不去送外卖?


image.png

我真的不想把一个原本完美的毕业人设硬生生的过成了一个需要从低薪摸爬滚打上去的人设,但事实是,我好像在第二条路上越走越远。看看现在的自己,确实是有点奋斗逼(贬义)的模样(伤感)。


不可忽略的成长


不可否认的是,这一年,我通过自己的努力从一个前端小白变成了一个可以独当一面的初级前端工程师。


因为大学的专业是数字媒体技术,大一大二学完计算机科班相关知识后,大三主攻的方向有三个:J2EE,游戏开发,动画。


在没经历过秋招的摧残之前,我还沉迷于游戏开发,3d建模,剪视频,做动画。秋招的时候信心满满的投简历,但悲惨的结果就是秋招0 offer(真不怪专业,怪我菜)。看到隔壁软件工程的同学秋招收获满满,想到自己做游戏开发也接触过脚本语言,于是一个从来没接触过web开发的焦虑的大四应届生果断入坑了web前端。


回顾我的2022,大概是这样的:




  • 1月 在系统学习了两个月前端基础知识(b站,红宝书,付费课程)的基础上,狂刷面试题。




  • 2月 继续狂刷面试题,自学vue3框架,做了一个很简单的后台管理系统(vue3+axios+element plus)。凭借这个项目找到了我的第一份正式的实习




  • 3月-5月 独自前往杭州实习,开始接触企业级项目,学会了git操作,css预编译sass,响应式布局,学会去封装组件,学会用node.js(egg.js框架)。与此同时,利用我的所有空闲时间去做毕业设计(原生微信小程序+mysql+nodejs+vue3后台管理系统)那段时间每天只能睡4-5个小时,睁开眼睛就要开始敲代码,但不得不说,这是我成长最最最快的三个月。




  • 6月 回到成都远程办公,完成我的毕业论文,顺利答辩,顺利毕业,转正,离职,毕业旅行。




  • 7月 毕业旅行完回成都找工作,因为7月只能参加社招,社招跟校招相比薪资待遇没那么好,但竞争不大。凭借之前的实习经验和看得过去的毕设一周拿到了三份offer(所以2023届的学弟学妹真的不要焦虑!),7月中旬入职,成为一名正式的前端开发工程师。




  • 8月 第一次接触大屏开发,因为项目压力很大,自己也有很多不熟悉的东西,经常加班到凌晨。(抗压能力++




  • 9月 第一次独立搭建项目,这段时间成长也很快。从0搭建一个项目与在一个大项目里面写功能写组件的差别很大!要考虑的东西非常多,从目录结构到变量命名都需要注意。这段时间我开始学习工程化,架构搭建的知识。了解vite的一些配置,开始注意一些代码规范(eslint,prettier),提交规范(commitlint)。也开始尝试使用TypeScript (独立开发能力++




  • 10月 可视化开发,开始熟悉echarts相关知识,转正。(新技能++




  • 11月 普通中后台项目的开发,之前的项目维护。与此同时,公司开发流程逐渐规范,对代码质量也有了一些要求,开始更注重代码的规范。公司有了技术分享会,前端后端一起学习分享,学到了一些工具的使用,大多都是在学校学不到的东西,收获很大,工作效率有了一定程度的提升。(代码整洁度++ 新技能++




  • 12月 继续之前项目的维护,新的项目开始使用公司更规范更统一的脚手架搭建。这个时候了解了一些自动化ci部署,github action的使用。同时开始总结知识,写了几篇质量不高的博客。并开始尝试研究Git flow




以上就是我这一年,从一个前端小白进化成一名初初初初级前端的过程,过程中很感谢大佬们正确的引导,虽然一直都是项目驱动成长,没有构建出完整的知识体系,但也算是入行了吧。可以给想要成为前端er的学弟学妹们一点点参考


2022年值得记录的瞬间


来杭州的第一天,感叹阿里人周末也要加班。


image.png

第一次做自我介绍


image.png

通宵肝毕设的日子


image.png

成为一名合格的铲屎官,小猫名字叫缓存,现在已经八斤啦


image.png

回成都后加班成为了日常便饭


image.png

2022给我带来了很多新奇的体验,浅浅分享一小部分最最值得纪念的瞬间。


关于2023的期望


立一点关于2023的flag:



  • 需要更加熟练已有的技能

  • 根据前端roadmap点亮更多技能。

  • 学习框架原理、库、网络、性能、浏览器、协议、工程化、node相关知识,完善知识体系,不需要全部深入,但要尽可能了解,提升知识广度。

  • 懂业务,深入业务,能解决业务痛点,更好的实现自己的价值

  • 学会做饭

  • 找个对象


最后最后:



希望自己:严于律己,减少焦虑


希望公司:减少加班,工资翻番



作者:一只囡狗
来源:juejin.cn/post/7187310000333652005
收起阅读 »

写给想转行学IT的朋友们的话

最近有很多朋友咨询我关于想转行学IT的问题,我想结合自身的经历和思考和各位聊几句,本文带有比较强的主观色彩,因此文中观点仅供参考,如有不当之处,敬请海涵。 笔者19年本科毕业于一所中流211,毕业之后一直在做Java开发,我并没有进大厂,也没有年薪百万,就是芸...
继续阅读 »

最近有很多朋友咨询我关于想转行学IT的问题,我想结合自身的经历和思考和各位聊几句,本文带有比较强的主观色彩,因此文中观点仅供参考,如有不当之处,敬请海涵。


笔者19年本科毕业于一所中流211,毕业之后一直在做Java开发,我并没有进大厂,也没有年薪百万,就是芸芸众生中普通的那一个。现在回顾当时入行的经历,基本是摸着石头过河,因此在有了一些经验之后,就想给和我当时一样处境的朋友一点建议,希望能对你有所启发。


很多问题其实都要结合个人的实际情况来看,每个人的知识、能力、经历都各不相同,所以无论做出任何决定,都需要结合自身的情况。


是否有必要参加培训机构?


这个问题的答案是因人而异的,最主要的点在于你是否有足够的恒心和自制力。


现在互联网上的学习资料已经非常多了,足够支撑你从零学到能够入行的过程。如果你的自制力比较好,那么你就可以尝试自学,不过自学的过程是孤独的,也是难熬的;如果你的自制力一般,无法在不是“学校”那么环境下进行学习,那就可以考虑培训机构。


需要特别强调的是,不能以为进了培训机构就以为一定能够就业了,说到底,学习这件事情,还是要靠你自己,别人是没有办法把知识灌进你的脑袋里的。培训机构也有一些无法忽视的问题,当你毕业之后,大概率机构会给你伪造一份简历,本来学习的时间就并不是很长,你很快可能就会发现,培训机构里面学的比较浅,还不足以应付面试官的八股文,这时候你可能就会想先入行再说,然后进了一家外包公司,然后开始混日子,这也是笔者见过的最多的案例。


参加培训机构最大的问题是简历,培训机构给大家做的项目都是极其雷同的,也可能会在培训机构之后,让你自己编项目经验,有经验的面试官很容易就能判断出,你是真的参与了项目开发,还是只是包装的。另外你可能还会碰到,很多公司需要上一家公司的离职证明和银行流水,甚至需要你个税APP报税界面的录屏等等问题,这些在求职的时候会碰到的现实问题,培训机构并不会告诉你。


总而言之,转行是一件对你的人生来说,是一件极其重要的事情,要反复思虑,不要脑子一热,听身边的朋友说,那个谁谁谁培训了几个月就月入过万,然后就稀里糊涂花了几万参加了培训机构,结果培训结束真正找工作的时候又发现困难重重,现实往往比想象的残酷。


高中毕业可以从事IT行业吗?


真相是,现在如果要从事IT行业,大专及以上学历是基本要求,不排除个人大专以下学历也找到了很好的IT工作,但是在当下这么“卷”的环境下,就是幸存者偏差了。大专的学历我也非常建议你先提升学历,有一个本科学历。


互联网爆发的红利期已经过去了,在没有新的风口出现的情况下,互联网的业务和从业人员都已经趋于饱和。换句话说,公司也不再会盲目进行扩张,进而产生大量的劳动力缺口,这也是目前为什么互联网公司会越来越在乎学历的原因之一。可以预见,进入这个行业的门槛会越来越高。


前端、后端还是测试?


其实从某种意义来说,选择岗位就是选择某种编程语言,选择编程语言也是在选择岗位,这个问题,你也可以结合下文编程语言之间的对比,找到自己合适的岗位。大体而言,测试、前端、后端,这三者的难度是依次递增的(对大部分人而言)。


如果你没有科班背景,但是又想从事IT行业,那么你可以考虑从事测试、运维工作甚至产品、运营的工作,其实学会写代码并不是唯一的选择。


如果你有一定的基础,但是逻辑思维又不是那么强,那么我建议你可以考虑前端,女生大部分学习编程都会选择前端,前端由于不需要考虑架构、性能(大部分场景),因此难度会小一些,对初学者更加友好。不过,前端经过这些年的发展,知识体系俨然已经非常庞大,后期也需要学习很多的东西。


如果你有一定的基础,且逻辑思维还可以,那么我建议你可以考虑后端,如果你不知道自己的思维能力怎么样,可以学一些Java或者JavaScript语言基础,看看自己是不是能够比较轻松的学会。


Java、Python、C++还是JavaScript?


编程语言只是工具,并没有优劣之分,我们需要在不同的场景选择合适的编程语言。下面我将对常见的几种编程语言做浅要的分析,希望能帮助你找到最适合你的编程语言。


随着时代发展,有了越来越多新的优秀的编程语言,比如Rust、kotlin、Dart等等,它们都在努力的甩掉前面编程语言的历史包袱,但是截止目前,相关的岗位的数量还不是很多,与我下面提到的编程语言相比,它们更适合作为你的第二门编程语言。


Java


如果你已经决定了要从事软件开发行业,但是还不清楚,要选择哪一门编程语言,那我推荐你可以学习Java,Java这门语言本身虽然并不优秀,截止目前,Java已经走过了20个年头,有着非常丰富的生态,web端,它有JSP、Servlet,移动端,它有Android,服务器端有SpringBoot,桌面端它有JavaFX,也有非常优秀的网络通信框架,比如Netty,甚至它也做出过操作系统(塞班系统),可以说,Java虽然很“烂”,但是它真的几乎无所不能。


不可否认Java的成功,但是Java也存在一些隐患,比如在Oracle收购了Sun公司之后,在Oracle不断地花式作妖下,Java的未来似乎也有些扑朔迷离。除此之外,Java在引以为傲的领域也逐渐有了一些竞争对手,比如服务端有go语言、nodejs,Android的开发官方首选语言已经变成kotlin,JSP的市场基本上已经被Vue、React等SPA框架所替代,但是Java却并没有开拓出自己新的应用场景,虽然笔者认为,基于VM的语言并不是消失,但是Java是能否一直守住自己的王座,还是要打一个问号的。


Java目前最多的就业方向就是服务端开发,如果你学习了Java,那么大概率会做服务端开发,短期内,服务端开发Java还是很难被其他语言替代。强类型的语言加上对并发编程的支持,让Java非常适合构建大型的服务端应用,这也是Java最深耕的方向,学会Java服务端的开发,也比较方便向大数据或数据分析岗位进行转型。


最后我想说,Java的岗位在我提到的编程语言里面也是最多的,这也是我推荐你学习它的一个重要原因,很多编程语言,虽然看起来很热门但是,但是当你真正学完去找工作的时候,却又发现岗位少的可怜,没错,说的就是你,Python。


Python


Python这门编程语言,“胶水语言”的特性让它看起来也几乎无所不能,虽然这种能力很有可能来自其他的语言,Python只是作为客户端,调用其他语言的类库。


不够“底层”其实并不是什么缺点,学习Python最大的问题是,是对学历有要求,Python应用最广泛的领域,大部分都对学历有要求,虽然你可能看过很多投放Python的广告,自动化办公、爬虫等等,但是这些特性在企业中的岗位是比较少的,而Python擅长的算法、人工智能、深度学习等领域都是需要研究生学历的。


我们总结一下,如果你有研究生学历,那么学习Python是一个不错的选择,不过我也见过有的研究生朋友学完Python之后发现岗位很少,又被迫转Java的案例。


C++


C++相比于其他的编程语言,其入门的门槛的会更高,花费在学习语言本身的时间的也会很多。C++在经历过这么多年的迭代之后,语言的特性非常多,会让初学者有一种眼花缭乱的特性,实现同一个功能,可能会有很多种写法。不可否认,C++是一门优秀的编程语言,但是高昂的学习成本也让人望而却步,如果你不是科班出身,只是想学一门技术进入互联网行业,那C++并不是一个很好的选择。


C++常见的就业方向有以下几种:服务器端开发、游戏、QT、嵌入式、人工智能。可以看出,C++最适合的还是那些对性能有要求的场景。原来很大一部分C++程序员都是做QT开发,但是C++在桌面端的市场已经出现了越来越多的竞争者,比如Hybrid 技术、React Native、Weex、Flutter,这些技术让原来web端的程序员或者移动端的程序员也能写出跨平台的应用,并且这些技术保留了他们原本的开发习惯,这对QT的打击,无疑是毁灭性的。


那么C++是不是已经过时,或者即将被淘汰呢?其实不然,C++只是让出了一些自己不是那么擅长的领域,但是在底层应用的开发,C++丰富的生态和优越的性能还是首选。如果你有志在这些领域发展,那么C++将是你很好的选择。


随着越来越多的人对核心自研技术的重视,这种比较偏底层的岗位,会越来越多,最近几年,国产操作系统的发展就是一个很好的例子,在政策的扶持下,各家公司几乎都在号称自研操作系统,可以预料,在不远的将来,这些核心的系统的研发,都需要大量C/C++语言的人才。


JavaScript


作为一门十天就被开发出来的编程语言,JavaScript身上的历史包袱也有很多,但这并不妨碍它的伟大,JavaScript在我们的日常生活中,几乎无处不在。


JavaScript也是一门易学难精的语言,虽然上手比较容易,但是后期也需要很多的时间去理解和巩固。JavaScript是前端程序员最重要的技术,没有之一,学好了JavaScript,就能在前端这个领域里无所不能。JavaScript现在也开始逐渐的在其他领域崭露头脚,它与TypeScript相辅相成,可以预见,JavaScript是一门历久弥新,并且前景良好的编程语言。


笔者对JavaScript最深的感受就是,与JavaScript相关的技术栈的更新迭代都非常的快,在我刚刚毕业的时候,Vue.js还是非常新鲜的东西,截止今天,Vue.js已经成为前端找工作的必备技能。JavaScript的框架总是层出不穷,让人有一种学不动了的感觉。造成这种“混乱”的背后原因有很多,这也从侧面反映了大家对JavaScript的热爱和探索。


路漫漫其修远兮,吾将上下而求索


我非常建议你在决定入行之前,提前找一些学习资料,自己尝试一下是否能够学的清楚,并且能从中获取乐趣。


兴趣和恒心是决定你能不能在这个行业长足发展的决定性因素。面对海量的,对你而言是闻所未闻的知识,如果没有兴趣,你每天都会深受折磨;这个行业特质决定了我们需要不断地学习,没有恒心,总有一天会掉队,跟不上技术更新迭代的脚步。


总而言之,道阻且长,希望本文能对你

作者:清风孤月残酌
来源:juejin.cn/post/7205549412352868412
有所启发,与君共勉。

收起阅读 »

Android:我是如何优化APP体积的

前言 在日常开发中,随着APP功能迭代发现打出的安装包体积越来越大,这里说的大是猛增的那种大,而并非一点一点增大。从最开始的几兆到后面的几十兆,虽然市面上的很多APP甚至达到上百兆,但毕竟别人功能强大,用到的一些底层库就特别占面积,流量也多所以也可理解。但自...
继续阅读 »

前言



在日常开发中,随着APP功能迭代发现打出的安装包体积越来越大,这里说的大是猛增的那种大,而并非一点一点增大。从最开始的几兆到后面的几十兆,虽然市面上的很多APP甚至达到上百兆,但毕竟别人功能强大,用到的一些底层库就特别占面积,流量也多所以也可理解。但自研的一些APP可经不住这些考验,所以能压缩就压缩,能优化就尽量优化,以得到用户最好的体验,下面就来说说我在项目中是如何优化APP体积的。



1. 本地资源优化


这里主要是压缩一些图片和视频。项目中本地资源用到最多的应该就是图片,几乎每个页面都离不开图标,甚至一些页面采用大图片的形式。你可知道,正常不经压缩的图片大的可以上大几十兆,小则也是一兆起步。这里做了个实验,同一个文件分别采用svg、png、使用tiny压缩后的png、webp四种类型图片进行展示(顺序是从左到右,从上到下):


image.png


可以看到,加载出来的效果几乎没有什么区别,但体积却有很大的差别(其中webp是采取的默认75%转换):


image.png


所以,别再使用png格式图片,太浪费资源了,就算经过压缩还是不及svg和webp,这里的webp其实还可以加大转换力度,但个人还是比较喜欢svg。


至于音视频文件也是可以通过其他工具进行压缩再放入本地,如非必要,尽量还是使用网络资源。


2. lib优化


一些三方库会使用底层so文件,一般在配置的时候我们尽量选择一种cpu类型,这里选择armeabi-v7a,其实几乎都兼容


ndk {
//设置支持的SO库架构 armeabi、armeabi-v7a、arm64-v8a、x86、x86_64、mips、mips64
abiFilters 'armeabi-v7a'
}

可以看看APK体积分析,每种cpu占用体积都比较大,少配置一种就能省下不少空间。
image.png


3. 代码混淆、无用资源的删除


在bulid.gradle中配置minifyEnabled true开启代码混淆,还需要配置混淆规则,否则无法找到目标类。shrinkResources true则是打包时不会将无用资源打入包内,这里有个小坑。之前使用腾讯地图时,某些第三方的静态资源会因为这个操作不被打入包内,导致无法找到资源,所以根据具体情况使用。


 release {
buildConfigField "boolean", "LOG_DEBUG", "false"
minifyEnabled true
// shrinkResources true 慎用,可能会导致第三方资源文件找不到
zipAlignEnabled true
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}

4. 代码复用,剔除无用代码


项目中由于多人协同开发会出现各写各的情况,需要抽出一些公共库之类的工具,方便代码复用。一些注释掉的代码该删除就删除。其实这一部分优化的体积相当少,但也得做,也是对代码质量的一种提升。


总结


其实只要做到了以上四步,APP体积优化已经得到了很大程度的提升了,其他再怎么优化效果也不是很明显了,最主要的就是本地资源和第三方so包体积占用较多。图片的使用我们尽量做到:小图标用svg,全屏类的大图可以考虑webp,最好不要使用png。ndk配置最好只配置一款cpu,几乎都可兼容,万不得已再加一个。


以上便是全部内容,希望对大家有所帮助。



作者:似曾相识2022
来源:juejin.cn/post/7206292770277261368
收起阅读 »

面试题:Android 中 Intent 采用了什么设计模式?

答案是采用了原型模式。 原型模式的好处在于方便地拷贝某个实例的属性进行使用、又不会对原实例造成影响,其逻辑在于对 Cloneable 接口的实现。 话不多说看下 Intent 的关键源码:  // frameworks/base/core/java/andro...
继续阅读 »

答案是采用了原型模式


原型模式的好处在于方便地拷贝某个实例的属性进行使用、又不会对原实例造成影响,其逻辑在于对 Cloneable 接口的实现。


话不多说看下 Intent 的关键源码:


 // frameworks/base/core/java/android/content/Intent.java
 public class Intent implements Parcelable, Cloneable {
    ...
     private static final int COPY_MODE_ALL = 0;
     private static final int COPY_MODE_FILTER = 1;
     private static final int COPY_MODE_HISTORY = 2;
 ​
     @Override
     public Object clone() {
         return new Intent(this);
    }
 ​
     public Intent(Intent o) {
         this(o, COPY_MODE_ALL);
    }
 ​
     private Intent(Intent o, @CopyMode int copyMode) {
         this.mAction = o.mAction;
         this.mData = o.mData;
         this.mType = o.mType;
         this.mIdentifier = o.mIdentifier;
         this.mPackage = o.mPackage;
         this.mComponent = o.mComponent;
         this.mOriginalIntent = o.mOriginalIntent;
        ...
 ​
         if (copyMode != COPY_MODE_FILTER) {
            ...
             if (copyMode != COPY_MODE_HISTORY) {
                ...
            }
        }
    }
    ...
 }

可以看到 Intent 实现的 clone() 逻辑是直接调用了 new 并传入了自身实例,而非调用 super.clone() 进行拷贝。


默认的拷贝策略是 COPY_MODE_ALL,顾名思义,将完整拷贝源实例的所有属性进行构造。其他的拷贝策略是 COPY_MODE_FILTER 指的是只拷贝跟 Intent-filter 相关的属性,即用来判断启动目标组件的 actiondatatypecomponentcategory 等必备信息。无视启动 flagbundle 等数据。


 // frameworks/base/core/java/android/content/Intent.java
 public class Intent implements Parcelable, Cloneable {
    ...
     public @NonNull Intent cloneFilter() {
         return new Intent(this, COPY_MODE_FILTER);
    }
 ​
     private Intent(Intent o, @CopyMode int copyMode) {
         this.mAction = o.mAction;
        ...
 ​
         if (copyMode != COPY_MODE_FILTER) {
             this.mFlags = o.mFlags;
             this.mContentUserHint = o.mContentUserHint;
             this.mLaunchToken = o.mLaunchToken;
            ...
        }
    }
 }

还有中拷贝策略是 COPY_MODE_HISTORY,不需要 bundle 等历史数据,保留 action 等基本信息和启动 flag 等数据。


 // frameworks/base/core/java/android/content/Intent.java
 public class Intent implements Parcelable, Cloneable {
    ...
     public Intent maybeStripForHistory() {
         if (!canStripForHistory()) {
             return this;
        }
         return new Intent(this, COPY_MODE_HISTORY);
    }
 ​
     private Intent(Intent o, @CopyMode int copyMode) {
         this.mAction = o.mAction;
        ...
 ​
         if (copyMode != COPY_MODE_FILTER) {
            ...
             if (copyMode != COPY_MODE_HISTORY) {
                 if (o.mExtras != null) {
                     this.mExtras = new Bundle(o.mExtras);
                }
                 if (o.mClipData != null) {
                     this.mClipData = new ClipData(o.mClipData);
                }
            } else {
                 if (o.mExtras != null && !o.mExtras.isDefinitelyEmpty()) {
                     this.mExtras = Bundle.STRIPPED;
                }
            }
        }
    }
 }

总结起来:


Copy Modeaction 等数据flags 等数据bundle 等历史
COPY_MODE_ALLYESYESYES
COPY_MODE_FILTERYESNONO
COPY_MODE_HISTORYYESYESNO

除了 Intent,Android 源码中还有很多地方采用了原型模式。




  • Bundle 也实现了 clone(),提供了 new Bundle(this) 的处理:


     public final class Bundle extends BaseBundle implements Cloneable, Parcelable {
        ...
         @Override
         public Object clone() {
             return new Bundle(this);
        }
     }



  • 组件信息类 ComponentName 也在 clone() 中提供了类似的实现:


     public final class ComponentName implements Parcelable, Cloneable, Comparable<ComponentName> {
        ...
         public ComponentName clone() {
             return new ComponentName(mPackage, mClass);
        }
     }



  • 工具类 IntArray 亦是如此:


     public class IntArray implements Cloneable {
        ...
         @Override
         public IntArray clone() {
             return new IntArray(mValues.clone(), mSize);
        }
     }



原型模式也不一定非得实现 Cloneable,提供了类似的实现即可。比如:




  • Bitmap 没有实现该接口但提供了 copy(),内部将传递原始 Bitmap 在 native 中的对象指针并伴随目标配置进行新实例的创建:


     public final class ComponentName implements Parcelable, Cloneable, Comparable<ComponentName> {
        ...
         public Bitmap copy(Config config, boolean isMutable) {
            ...
             noteHardwareBitmapSlowCall();
             Bitmap b = nativeCopy(mNativePtr, config.nativeInt, isMutable);
             if (b != null) {
                 b.setPremultiplied(mRequestPremultiplied);
                 b.mDensity = mDensity;
            }
             return b;
        }
     }


  • <
    作者:TechMerger
    来源:juejin.cn/post/7204013918958649405
    li>
收起阅读 »

Android斩首行动——接口预请求

前言 开发同学应该都很熟悉我们页面的渲染过程一般是从Activity#onCreate开始,再发起网络请求,等请求回调回来后,再基于网络数据渲染页面。可以用下面这幅图来粗略描述这个过程: 可以看到,目标页面渲染完成前必须得等待网络请求,导致渲染速度并没有那么...
继续阅读 »

前言


开发同学应该都很熟悉我们页面的渲染过程一般是从Activity#onCreate开始,再发起网络请求,等请求回调回来后,再基于网络数据渲染页面。可以用下面这幅图来粗略描述这个过程:


image.png


可以看到,目标页面渲染完成前必须得等待网络请求,导致渲染速度并没有那么快。尤其是当网络并不好的时候感受会更加明显。并且,当目标页面是H5页面或者是Flutter页面的时候,因为涉及到H5容器与Flutter容器的创建,白屏时间会更长。


那么有没有可能提前发起请求,来缩短网络请求这一部分的等待时间呢?这就是我们今天要讲的部分,接口预请求。


目标


我们要达到的目标很简单,就是提前异步发起目标页面的网络请求,从而加快目标页面的渲染速度。改善后的过程可以用下图表示:


image.png


并且,我们的预请求能力需要尽量少地侵入业务,与业务解耦,并保证能力的通用性,适用于工程内的任意页面(Android页面、H5页面、Flutter页面)。


方案


整体链路


首先给大家看一下整体链路,具体的细节可以先不用去抠,下面会一一讲到。


image.png


预请求时机


预请求时机一般有三种选择:



  1. 由业务层自行选择时机进行异步预请求

  2. 点击控件时进行异步预请求

  3. 路由最终跳转前进行异步预请求


第1种选择,由业务层自行选择时机进行预请求,需要涉及到业务层的改造,以及对时机合理性的把握。一方面是存在改造成本,另一方面是无法保证业务侧调用时机的合理性。


第2种选择,点击控件时进行预请求。若点击时进行预请求,点击事件监听并不是业务域统一的,无法形成有效封装。并且,若后续路由拦截器修改了参数,或是终止了跳转,这次预请求就失去了意义。


因此这里我们选择第3种,基于统一路由框架,在路由最终跳转前进行预请求。既保证了良好的封装性,也实现了对业务的零侵入,同时也做到了懒请求,即用户必然要发起该请求时才会去预请求。这里需要注意的是必须是在最终跳转前进行预请求,可以理解为是路由的最后一个前置异步拦截器。


预请求规则配置


我们通过本地的json文件(当然,有需要也可以上云通过配置后台下发),对预请求的规则进行配置,并将这份配置在App启动阶段异步读入到内存。后续在路由过程中,只有命中了预请求规则,才能发起预请求。配置demo如下:


{
"routeConfig":{
"scheme://domain/path?param1=true&itemId=123":["prefetchKey"],
"
route2":["prefetchKey2"],
"
route3":["prefetchKey3","prefetchKey4"]
},
"
prefetcher":{
"
prefetchKey":{
"
prefetchType":"network",
"
prefetchInfo":{
"
api":"network.api.name",
"
apiVersion":"1.0",
"
method":"post",
"
needLogin":"false",
"
showLoginUI":"false",
"
params": {
"
itemId":"$route.itemId",
"
firstTime":"true"
},
"
headers": {

},
"
prefetchImgInResponse": [
{
"
imgUrl":"$data.imgData.img",
"
imgWidth":"$data.imgData.imgWidth",
"
imgHeight":150
}
]
}
},
"
prefetchKey2":{
"
prefetchType":"network",
"
prefetchInfo":{
"
api":"network.api.name2",
"
apiVersion":"1.0",
"
method":"post",
"
needLogin":"false",
"
showLoginUI":"false",
"
params": {
"
itemId":"$route.productId",
"
firstTime":"false"
},
"
headers": {

}
},
"
prefetchKey3":{
"
prefetchType":"image",
"
prefetchInfo":{
"
imgUrl":"$route.imgUrl",
"
imgWidth":"$route.imgWidth",
"
imgHeight": 150
}
},
"
prefetchKey4":{
"
prefetchInfo":{}
}
}
}

规则解读


参数名描述备注
routeConfig路由配置配置路由到预请求的映射
prefetcher预请求配置记录所有的预请求
prefetchKey预请求的key
prefetchType预请求类型分为network类型与image类型,两种类型所需要的参数不同
prefetchInfo预请求所需要的信息其中value若为route.param格式,那么该值从路由中获取;若为route.param格式,那么该值从路由中获取;若为data.param格式,则从响应数据中获取。
paramsnetwork请求所需要的请求params
headersnetwork请求所需要的请求headers
prefetchImgFromResponse预请求的响应返回后,需要预加载的图片用于需要预加载图片时,无法确定图片url,图片url只能从预请求响应中获取的场景。

举例说明


网络预请求


例如跳转目标页面,它的路由是scheme://domain/path?param1=true&itemId=123


首先我们在跳转路由时,若跳转的路由是这个目标页面,我们就会尝试去发起预请求。根据上面的demo配置文件,它将匹配到prefetchKey这个预请求。


那么我们详细看prefetchKey这个预请求,预请求类型prefetchTypenetwork,是一个网络预请求,prefetchInfo中具备了请求的基本参数(如apiName、apiVersion、method、请求params与请求headers,不同工程不一样,大家可以根据自己的工程项目进行修改)。具体看params中,有一个参数为itemId:$route.itemId。以$route.开头的意思,就是这个value值要从路由中获取,即itemId=123,那么这个值就是123。


图片预请求


在做网络预请求的过程中,我忽然想到图片做预请求也是可以大大提升用户体验的,尤其是当大图片首次下载到内存中渲染需要的时间会比较长。图片预请求分为url已知url未知两种场景,下面各举两个例子。


图片url已知

什么是图片url已知呢?比如我们在首页跳转首页的二级页面时,如果二级页面需要预加载的图片跟首页的某张图是一样的(尺寸可能不同),那么首页跳转路由时我们是能够提前知道这个图片的url的,所以我们看到prefetchKey3中配置了prefetchTypeimage的预请求。image的信息来自于路由参数,需要在跳转时将图片url和宽高作为路由参数之一。


比如scheme://domain/path?imgUrl=${encodeUrl}&imgWidth=200,那么根据配置项,我们将提前将encodeUrl这个图片以宽200,高150的尺寸,加载到内存中去。当目标页面用到这个图片时,将能很快渲染出来。


图片url未知

相反,当跳转目标页面时,目标页面所要加载的图片url没法取到,就对应了图片url未知的场景。


例如闪屏页跳转首页时,如果需要预加载首页顶部的图片,此时闪屏页是无法获取到图片的url的,因为这个图片url是首页接口返回的。这种情况下,我们只能依赖首页的预请求进行。


在demo配置文件中,我们可以看到prefetchImgFromResponse字段。这个字段代表着,当这个预请求响应回来之后,我需要去预请求某张图片。其中,imgUrl$data.param格式,以$data.开头,代表着这份数据是来自于响应数据的。响应数据就是一串json串,可以凭此,索引到预请求响应中图片url的位置,就能实现图片的提前加载了。


至于图片怎么提前加载到内存中,以及真实图片的加载怎么匹配到内存中的图片,这一部分是通过glide已有的preload机制实现的,感兴趣的同学可以去看一下源码了解一下,这里就不展开了。后面讲的预请求的方案细节,都只限于网络请求。


预请求匹配


预请求匹配指的是实际的业务请求怎样与已经执行的预请求匹配上,从而节省请求的空中时间,直接返回预请求的结果。


首先网络预请求执行前先在内存中生成一份PrefetchRecord,代表着已经执行的预请求,其中的字段跟配置文件中差不多,主要就是记录预请求相关的信息:


class PrefetchRecord {
// 请求信息
String api;
String apiVersion;
String method;
String needLogin;
String showLoginUI;
JSONObject params;
JSONObject headers;

// 预请求状态
int status;
// 预请求结果
ResponseModel response;
// 生成的请求id
String requestId;

boolean isMatch(RealRequest realRequest) {
requestId.equals(realRequest.requestId)
}
}

每一个PrefetchRecord生成时,都会生成一个requestId,用于跟实际业务请求进行匹配。requestId的生成规则可以自行制定,比如将所有请求信息包一起做一下md5处理之类。


在实际业务请求发起之前,也会根据同样的规则生成requestId。若内存中存在相同requestId对应的PrefetchRecord,那么就相当于匹配成功了。匹配成功后,再根据预请求的状态进行进一步的处理。


预请求状态


预请求状态分为START、FINISH、ABORT,对应“正在发起预请求”、“已经获得预请求结果”、“预请求被抛弃”。ABORT状态下一节再讲。


为什么要记录这个状态呢?因为我们无法保证,预请求的响应一定在实际请求之前。用图来表示:


image.png


因为预请求是一个并发行为。当预请求的空中时间特别长,长到目标页面已经发出实际请求了,预请求的响应还没回来,即预请求状态为START,而非FINISH。那么此时该怎么办?我们就需要让实际请求在一旁等着(记录到内存中,RealRequestRecord),等预请求接收到响应了,再根据requestId去进行匹配,匹配到RealRequestRecord了,就触发RealRequestRecord中的回调,返回数据。


另外,在匹配过程中需要注意一点,因为每次路由跳转,如果发起预请求了,总会生成一个Record在内存中等待匹配。因此在匹配结束后,不管是匹配成功还是匹配失败,都要及时释放将Record从内存中释放掉。


超时重试机制


基于实际请求等待预请求响应的场景,我们再延伸一下。若预请求请求超时,迟迟拿不到响应,该怎么办?用图表示:


image.png


假设目前的网络请求,端上默认的超时时间是30s。那么在超时场景下,实际的业务请求在30s内若拿不到预请求的结果,就需要重新发起业务请求,抛弃预请求,并将预请求的状态置为ABORT,这样即使后面预请求响应回来了也不做任何处理。


image.png


忽然想到一个很贴切的场景来比喻这个预请求方案。


我们把跳转页面理解为去柜台取餐。


预请求代表着我们人还没到柜台,就先远程下单让柜员去准备食物。


如果柜员准备得比较快,那么我们到柜台后就能直接把食物拿走了,就能快点吃上了(代表着页面渲染速度变快)。


如果柜员准备得比较慢,那么我们到柜台后还是得等一会儿才能取餐,但总体上吃上食物的速度还是要比到柜台后再点餐来得快。


但如果这个柜员消极怠工准备得太慢了,我们到柜台等了很久都没拿到食物,那么我们就只能换个柜员重新点了(超时后发起实际的业务请求),同时还不忘投诉一把(预请求空中时间太慢了)。


总结


通过这篇文章,我们知道了什么是接口预请求,怎么实现接口预请求。我们通过配置文件+统一路由处理+预请求发起、匹配、回调,实现了与业务解耦的,可适用于任意页面的轻量级预请求方案,从而提升页面的渲染速度。


作者:孝之请回答
来源:juejin.cn/post/7203615594390732855
收起阅读 »

写一个可以当镜子照的 Button

web
最近写了一个好玩的 Button,它除了是一个 Button 外,还可以当镜子照。 那这个好玩的 Button 是怎么实现的呢? 很容易想到是用到了摄像头。 没错,这里要使用浏览器的获取媒体设备的 api 来拿到摄像头的视频流,设置到 video 上,然后对...
继续阅读 »

最近写了一个好玩的 Button,它除了是一个 Button 外,还可以当镜子照。



那这个好玩的 Button 是怎么实现的呢?


很容易想到是用到了摄像头。


没错,这里要使用浏览器的获取媒体设备的 api 来拿到摄像头的视频流,设置到 video 上,然后对 video 做下镜像反转,加点模糊就好了。


button 的部分倒是很容易,主要是阴影稍微麻烦点。


把 video 作为 button 的子元素,加个 overflow:hidden 就完成了上面的效果。


思路很容易,那我们就来实现下吧。


获取摄像头用的是 navigator.mediaDevices.getUserMedia 的 api。


在 MDN 中可以看到 mediaDevices 的介绍:



可以用来获取摄像头、麦克风、屏幕等。


它有这些 api:



getDisplayMedia 可以用来录制屏幕,截图。


getUserMedia 可以获取摄像头、麦克风的输入。



我们这里用到的是 getUserMedia 的 api。


它要指定音频和视频的参数,开启、关闭、分辨率、前后摄像头啥的:



这里我们把 video 开启,把 audio 关闭。


也就是这样:


navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
})
.then((stream) => {
//...
}).catch(e => {
console.log(e)
})

然后把获取到的 stream 用一个 video 来展示:


navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
})
.then((stream) => {
const video = document.getElementById('video');
video.srcObject = stream;
video.onloadedmetadata = () => {
video.play();
};
})
.catch((e) => console.log(e));

就是这样的:



通过 css 的 filter 来加点感觉:


比如加点 blur:


video {
filter: blur(10px);
}


加点饱和度:


video {
filter: saturate(5)
}



或者加点亮度:


video: {
filter: brightness(3);
}


filter 可以组合,调整调整达到这样的效果就可以了:


video {
filter: blur(2px) saturate(0.6) brightness(1.1);
}


然后调整下大小:


video {
width: 300px;
height: 100px;
filter: blur(2px) saturate(0.6) brightness(1.1);
}


你会发现视频的画面没有达到设置的宽高。


这时候通过 object-fit 的样式来设置:


video {
width: 300px;
height: 100px;
object-fit: cover;
filter: blur(2px) saturate(0.6) brightness(1.1);
}

cover 是充满容器,也就是这样:



但画面显示的位置不大对,看不到脸。我想显示往下一点的画面怎么办呢?


可以通过 object-position 来设置:


video {
width: 300px;
height: 100px;
object-fit: cover;
filter: blur(2px) saturate(0.6) brightness(1.1);
object-position: 0 -100px;
}

y 向下移动 100 px ,也就是这样的:



现在画面显示的位置就对了。


其实现在还有一个特别隐蔽的问题,不知道大家发现没,就是方向是错的。照镜子的时候应该左右翻转才对。


所以加一个 scaleX(-1),这样就可以绕 x 周反转了。


video {
width: 300px;
height: 100px;
object-fit: cover;
filter: blur(2px) saturate(0.6) brightness(1.1);
object-position: 0 -100px;
transform: scaleX(-1);
}


这样就是镜面反射的感觉了。


然后再就是 button 部分,这个我们倒是经常写:


function Button({ children }) {
const [buttonPressed, setButtonPressed] = useState(false);

return (
<div
className={`button-wrap ${buttonPressed ? "pressed" : null}`}
>

<div
className={`button ${buttonPressed ? "pressed" : null}`}
onPointerDown={() =>
setButtonPressed(true)}
onPointerUp={() => setButtonPressed(false)}
>
<video/>
</div>
<div className="text">{children}</div>
</div>

);
}

这里我用 jsx 写的,点击的时候修改 pressed 状态,设置不同的 class。


样式部分是这样的:


:root {
--transition: 0.1s;
--border-radius: 56px;
}

.button-wrap {
width: 300px;
height: 100px;
position: relative;
transition: transform var(--transition), box-shadow var(--transition);
}

.button-wrap.pressed {
transform: translateZ(0) scale(0.95);
}

.button {
width: 100%;
height: 100%;
border: 1px solid #fff;
overflow: hidden;
border-radius: var(--border-radius);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.15),
0px 16px 32px rgba(0, 0, 0, 0.125);
transform: translateZ(0);
cursor: pointer;
}

.button.pressed {
box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
color: rgba(0, 0, 0, 0.7);
font-size: 48px;
font-weight: 500;
text-shadow:0px -1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(255, 255, 255, 0.5);
}

这种 button 大家写的很多了,也就不用过多解释。


要注意的是 text 和 video 都是绝对定位来做的居中。


再就是阴影的设置。


阴影的 4 个值是 x、y、扩散半径、颜色。


我设置了个多重阴影:




然后再改成不同透明度的黑就可以了:



再就是按下时的阴影,设置了上下位置的 1px 黑色阴影:


.button.pressed {
box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.5);
}

同时,按下时还有个 scale 的设置:



再就是文字的阴影,也是上下都设置了 1px 阴影,达到环绕的效果:


text-shadow:0px -1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(255, 255, 255, 0.5);


最后,把这个 video 嵌进去就行了。


完整代码如下:


import React, { useState, useEffect, useRef } from "react";
import "./button.css";

function Button({ children }) {
const reflectionRef = useRef(null);
const [buttonPressed, setButtonPressed] = useState(false);

useEffect(() => {
if (!reflectionRef.current) return;
navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
})
.then((stream) => {
const video = reflectionRef.current;
video.srcObject = stream;
video.onloadedmetadata = () => {
video.play();
};
})
.catch((e) => console.log(e));
}, [reflectionRef]);

return (
<div
className={`button-wrap ${buttonPressed ? "pressed" : null}`}
>

<div
className={`button ${buttonPressed ? "pressed" : null}`}
onPointerDown={() =>
setButtonPressed(true)}
onPointerUp={() => setButtonPressed(false)}
>
<video
className="button-reflection"
ref={reflectionRef}
/>

</div>
<div className="text">{children}</div>
</div>

);
}

export default Button;

body {
padding: 200px;
}
:root {
--transition: 0.1s;
--border-radius: 56px;
}

.button-wrap {
width: 300px;
height: 100px;
position: relative;
transition: transform var(--transition), box-shadow var(--transition);
}

.button-wrap.pressed {
transform: translateZ(0) scale(0.95);
}

.button {
width: 100%;
height: 100%;
border: 1px solid #fff;
overflow: hidden;
border-radius: var(--border-radius);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.15),
0px 16px 32px rgba(0, 0, 0, 0.125);
transform: translateZ(0);
cursor: pointer;
}

.button.pressed {
box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5), 0px 1px 1px rgba(0, 0, 0, 0.5);
}

.text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
color: rgba(0, 0, 0, 0.7);
font-size: 48px;
font-weight: 500;
text-shadow:0px -1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(255, 255, 255, 0.5);
}

.text::selection {
background-color: transparent;
}

.button .button-reflection {
width: 100%;
height: 100%;
transform: scaleX(-1);
object-fit: cover;
opacity: 0.7;
filter: blur(2px) saturate(0.6) brightness(1.1);
object-position: 0 -100px;
}

总结


浏览器提供了 media devices 的 api,可以获取摄像头、屏幕、麦克风等的输入。


除了常规的用途外,还可以用来做一些好玩的事情,比如今天这个的可以照镜子的 button。


它看起来就像我上厕所时看到的这个东西一样😂:



作者:zxg_神说要有光
来源:juejin.cn/post/7206249542752567333
收起阅读 »

测试妹子提了个bug,为什么你多了个options请求?

web
测试妹子给我提了个bug,说为什么一次操作,network里面两个请求。 我脸色一变”不可能,我写的代码明明是一次操作,怎么可能两个请求“。走过去一看,原来是多了个options请求。 ”这个你不用管,这个是浏览器默认发送的一个预检请求“。可是妹子很执着”这可...
继续阅读 »

测试妹子给我提了个bug,说为什么一次操作,network里面两个请求。


我脸色一变”不可能,我写的代码明明是一次操作,怎么可能两个请求“。走过去一看,原来是多了个options请求。


”这个你不用管,这个是浏览器默认发送的一个预检请求“。可是妹子很执着”这可肯定不行啊,明明是一次请求,干嘛要两次呢?“。


”哟呵,挺固执啊,那我就给你讲个明白,到时候你可别说听不懂“。


HTTP的请求分为两种简单请求非简单请求


简单请求


简单请求要满足两个条件:



  1. 请求方法为:HEADGETPOST

  2. header中只能包含以下请求头字段:

    • Accept

    • Accept-Language

    • Content-Language

    • Content-Type: 所指的媒体类型值仅仅限于下列三者之一

      • text/plain

      • multipart/form-data

      • application/x-www-form-urlencoded






浏览器的不同处理方式


对于简单请求来说,如果请求跨域,那么浏览器会放行让请求发出。浏览器会发出cors请求,并携带origin。此时不管服务端返回的是什么,浏览器都会把返回拦截,并检查返回的responseheader中有没有Access-Control-Allow-Origin是否为true,说明资源是共享的,可以拿到。如果没有这个头信息,说明服务端没有开启资源共享,浏览器会认为这次请求失败终止这次请求,并且报错。


非简单请求


只要不满足简单请求的条件,都认为是非简单请求。


发出非简单cors请求,浏览器会做一个http的查询请求(预检请求)也就是optionsoptions请求会按照简单请求来处理。那么为什么会做一次options请求呢?


检查服务器是否支持跨域请求,并且确认实际请求的安全性。预检请求的目的是为了保护客户端的安全,防止不受信任的网站利用用户的浏览器向其他网站发送恶意请求。
预检请求头中除了携带了origin字段还包含了两个特殊字段:



  • Access-Control-Request-Method: 告知服务器实际请求使用的HTTP方法

  • Access-Control-Request-Headers:告知服务器实际请求所携带的自定义首部字段。
    比如:


OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

以上报文中就可以看到,使用了OPTIONS请求,浏览器根据上面的使用的请求参数来决定是否需要发送,这样服务器就可以回应是否可以接受用实际的请求参数来发送请求。Access-Control-Request-Method告知服务器,实际请求将使用 POST 方法。Access-Control-Request-Headers告知服务器,实际请求将携带两个自定义请求标头字段:X-PINGOTHER 与 Content-Type。服务器据此决定,该实际请求是否被允许。


什么时候会触发预检请求呢?



  1. 发送跨域请求时,请求头中包含了一些非简单请求的头信息,例如自定义头(custom header)等;

  2. 发送跨域请求时,使用了 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH等请求方法。


我得意的说“讲完了,老妹你听懂了吗?”


妹子说“似懂非懂”


那行吧,带你看下实际场景。(借鉴文章CORS 简单请求+预检请求(彻底理解跨域)的两张图)


image.png


image.png


妹子说“这样就明了很多”,满是崇拜的关闭了Bug。


兄弟们,妹子都懂了,你懂了吗?😄


参考:


CORS 简单请求+预检请求(彻底理解跨域)


OPTIONS | MDN


跨源资源共享(CORS)| MDN


说明一下哈,以上事件是真实事件,只不过当时讲的时候没有那么的详细,😂


作者:翰玥
来源:juejin.cn/post/7206264862657445947
收起阅读 »

前端要对用户的电池负责!

web
前言 我有一个坏习惯:就是下班之后不关电脑,但是电脑一般来说第二天电量不会有什么损失。但是后来突然有一天它开不起来了,上午要罢工?那也不好吧,也不能在光天化日之下划水啊;聪明的我还是找到了原因:电池耗尽了;于是赶紧来查一查原因,到底是什么程序把电池耗尽了呢? ...
继续阅读 »

前言


我有一个坏习惯:就是下班之后不关电脑,但是电脑一般来说第二天电量不会有什么损失。但是后来突然有一天它开不起来了,上午要罢工?那也不好吧,也不能在光天化日之下划水啊;聪明的我还是找到了原因:电池耗尽了;于是赶紧来查一查原因,到底是什么程序把电池耗尽了呢?


这里我直接揭晓答案:是一个Web应用,看来这个锅必须要前端来背了;我们来梳理一下js中有哪些耗电的操作。


js中有哪些耗电的操作


js中有哪些耗电的操作?我们不如问问浏览器有哪些耗电的操作,浏览器在渲染一个页面的时候经历了GPU进程、渲染进程、网络进程,由此可见持续的GPU绘制、持续的网络请求和页面刷新都会导致持续耗电,那么对应到js中有哪些操作呢?


Ajax、Fetch等网络请求


单只是一个AjaxFetch请求不会消耗多少电量,但是如果有一个定时器一直轮询地向服务器发送请求,那么CPU一直持续运转,并且网络进程持续工作,它甚至有可能会阻止电脑进行休眠,就这样它会一直轮询到电脑电池不足而关机;
所以我们应该尽量少地去做轮询查询;


持续的动画


持续的动画会不断地触发GPU重新渲染,如果没有进行优化的话,甚至会导致主线程不断地进行重排重绘等操作,这样会加速电池的消耗,但是js动画与css动画又不相同,这里我们埋下伏笔,等到后文再讲;


定时器


持续的定时器也可能会唤醒CPU,从而导致电池消耗加速;


上面都是一些加速电池消耗的操作,其实大部分场景都是由于定时器导致的电池消耗,那么下面来看看怎么优化定时器的场景;


针对定时器的优化


先试一试定时器,当我们关闭屏幕时,看定时器回调是否还会执行呢?


let num = 0;
let timer = null;
function poll() {
clearTimeout(timer);
timer = setTimeout(()=>{
console.log("测试后台时是否打印",num++);
poll();
},1000*10)
}

结果如下图,即使暂时关闭屏幕,它仍然会不断地执行:


未命名.png


如果把定时器换成requestAnimationFrame呢?


let num = 0;
let lastCallTime = 0;
function poll() {
requestAnimationFrame(() =>{
const now = Date.now();
if(now - lastCallTime > 1000*10){
console.log("测试raf后台时是否打印",num++);
lastCallTime = now;
}
poll();
});
}

屏幕关闭之前打印到了1,屏幕唤醒之后才开始打印2,真神奇!


未命名.png


当屏幕关闭时回调执行停止了,而且当唤醒屏幕时又继续执行。屏幕关闭时我们不断地去轮询请求,刷新页面,执行动画,有什么意义呢?因此才出现了requestAnimationFrame这个API,浏览器对它进行了优化,用它来代替定时器能减少很多不必要的能耗;


requestAnimationFrame的好处还不止这一点:它还能节省CPU,只要当页面处于未激活状态,它就会停止执行,包括屏幕关闭、标签页切换;对于防抖节流函数,由于频繁触发的回调即使执行次数再多,它的结果在一帧的时间内也只会更新一次,因此不如在一帧的时间内只触发一次;它还能优化DOM更新,将多次的重排放在一次完成,提高DOM更新的性能;


但是如果浏览器不支持,我们必须用定时器,那该怎么办呢?


这个时候可以监听页面是否被隐藏,如果隐藏了那么清除定时器,如果重新展示出来再创建定时器:


let num = 0;
let timer = null;
function poll() {
clearTimeout(timer);
timer = setTimeout(()=>{
console.log("测试后台时是否打印",num++);
poll();
},1000*10)
}

document.addEventListener('visibilitychange',()=>{
if(document.visibilityState==="visible"){
console.log("visible");
poll();
} else {
clearTimeout(timer);
}
})

针对动画优化


首先动画有js动画、css动画,它们有什么区别呢?


打开《我的世界》这款游戏官网,可以看到有一个keyframes定义的动画:


未命名.png


切换到其他标签页再切回来,这个扫描二维码的线会突然跳转;


因此可以得出一个结论:css动画在屏幕隐藏时仍然会执行,但是这一点我们不好控制。


js动画又分为三种种:canvas动画、SVG动画、使用js直接操作css的动画,我们今天不讨论SVG动画,先来看一看canvas动画(MuMu官网):


未命名.png


canvas动画在页面切换之后再切回来能够完美衔接,看起来动画在页面隐藏时也并没有执行;


那么js直接操作css的动画呢?动画还是按照原来的方式一直执行,例如大话西游这个官网的”获奖公示“;针对这种情况我们可以将动画放在requestAnimationFrame中执行,这样就能在用户离开屏幕时停止动画执行


上面我们对大部分情况已经进行优化,那么其他情况我们没办法考虑周到,所以可以考虑判断当前用户电池电量来兼容;


Battery Status API兜底


浏览器给我们提供了获取电池电量的API,我们可以用上去,先看看怎么用这个API:


调用navigator.getBattery方法,该方法返回一个promise,在这个promise中返回了一个电池对象,我们可以监听电池剩余量、电池是否在充电;


navigator.getBattery().then((battery) => {
function updateAllBatteryInfo() {
updateChargeInfo();
updateLevelInfo();
updateChargingInfo();
updateDischargingInfo();
}
updateAllBatteryInfo();

battery.addEventListener("chargingchange", () => {
updateChargeInfo();
});
function updateChargeInfo() {
console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
}

battery.addEventListener("levelchange", () => {
updateLevelInfo();
});
function updateLevelInfo() {
console.log(`Battery level: ${battery.level * 100}%`);
}

battery.addEventListener("chargingtimechange", () => {
updateChargingInfo();
});
function updateChargingInfo() {
console.log(`Battery charging time: ${battery.chargingTime} seconds`);
}

battery.addEventListener("dischargingtimechange", () => {
updateDischargingInfo();
});
function updateDischargingInfo() {
console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
}
});


当电池处于充电状态,那么我们就什么也不做;当电池不在充电状态并且电池电量已经到达一个危险的值得时候我们需要暂时取消我们的轮询,等到电池开始充电我们再恢复操作


后记


电池如果经常放电到0,这会影响电池的使用寿命,我就是亲身经历者;由于Web应用的轮询,又没有充电,于是一晚上就耗完了所有的电,等到再次使用时电池使用时间下降了好多,真是一次痛心的体验;于是后来我每次下班前将Chrome关闭,并关闭所有聊天软件,但是这样做很不方便,而且很有可能遗忘;


如果每一个前端都能关注到自己的Web程序对于用户电池的影响,然后尝试从定时器和动画这两个方面去优化自己的代码,那么我想应该就不会发生这种事情了。注意:桌面端程序也有可能是披着羊皮的狼,就是披着原生程序的Web应用;


参考:
MDN


作者:蚂小蚁
来源:juejin.cn/post/7206331674296746043
收起阅读 »

37岁程序员被裁,120天没找到工作,无奈去小公司,结果懵了...

从短期来看,程序员的确算是个不错的工作,薪水也比一般岗位高很多,但是从长远来看,程序员的中年危机会比其他岗位来的更早,很多程序员只有到了35岁左右,才能真正认清楚互联网行业,尤其是被裁之后,找工作无门的这种无奈。最近在职场论坛上看到这样一个帖子:37岁程序员被...
继续阅读 »


从短期来看,程序员的确算是个不错的工作,薪水也比一般岗位高很多,但是从长远来看,程序员的中年危机会比其他岗位来的更早,很多程序员只有到了35岁左右,才能真正认清楚互联网行业,尤其是被裁之后,找工作无门的这种无奈。

最近在职场论坛上看到这样一个帖子:37岁程序员被裁,120天没找到工作,面试华为阿里均被拒,无奈降薪去小公司后懵了!

这是怎么回事呢?


据这位程序员说自己写代码15年了,目前在二线互联网公司当个小主管,可是在最近被公司优化裁掉了。

由于自己已经37岁,找了4个月工作都没有着落,无奈降薪去小公司,可是小公司的面试官却还说我技术太落后!现在上有老下有少,自从被裁后每天都睡不着,很难熬!

那么,网友是怎么说的?


有网友说你可能没认清自己吧,什么叫做小公司还挑挑拣拣你呢?自己能力不够,就抱怨找不到工作,为什么当初不把技术学精呢!有网友对此进行反驳,你也会有35岁那天,程序员的今天就是你的明天,何必要嘲讽呢?


还有网友现在华为,阿里等大公司,只要超过35岁了,连面试机会都不会给你,简历那一关就被卡住了。去年我还说华为加班太多不想去,可现在想去都没机会了。


还有网友说那就没办法了,只能选择降薪,毕竟一家人总要生活,工资低点就低点,总比没工作要强。其实这也是很多程序员收入虽然高,却不敢在大城市买房的真正原因。要是等到30多岁被裁了,到时候每天还房贷的压力太大,根本不敢想象没有工作的情况。


你怎么看呢?欢迎转发分享吐槽!

来源:互联网架构师

收起阅读 »