注册
环信即时通讯云

环信即时通讯云

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

环信开发文档

Demo体验

Demo体验

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

RTE开发者社区

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

技术讨论区

技术交流、答疑
资源下载

资源下载

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

iOS Library

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

Android Library

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

你代码的异味是故意的还是不小心?是故意的!

一、代码竟会有“气味” 食物在腐烂之际,会散发出异味,提醒人食物已经坏掉了,需要处理。同样,如果代码中某处出现了问题,也会有一些症状。这些症状,被称之为“代码异味”(Code smell,也译作“代码味道”)。与食物腐败发出的味道不同的是,代码异味并非真正的气...
继续阅读 »


一、代码竟会有“气味”


食物在腐烂之际,会散发出异味,提醒人食物已经坏掉了,需要处理。同样,如果代码中某处出现了问题,也会有一些症状。这些症状,被称之为“代码异味”(Code smell,也译作“代码味道”)。与食物腐败发出的味道不同的是,代码异味并非真正的气味,而是一种“暗示”,暗示我们代码可能有问题,提示程序员需要对项目设计进行更进一步的查看。


代码异味一词最初是由Kent Beck在帮助Martin Fowler在编写《重构:改善既有代码的设计》一书时创造的。Martin Fowler对代码异味的定义是:代码异味是一种表象,它通常对应于系统中更深层次的问题。


代码异味的产生原因跟厨师的“清洗过程中故意保留”不一样,它更多地并非刻意为之,创造者也未必“品尝”过自己所写的代码,它更多地是由于设计缺陷或不良编码习惯而导致的不良代码症状。


这种异味也并非来自一种有据可查的标准,更多的是来自程序员的直觉。尤其是经验丰富和知识渊博的程序员,他们无需思考,只要通过查看代码或一段设计就可以立马对这个代码质量产生这种“感觉”,能对代码设计的优劣有一个大致的判断。这有点类似我们英语学到一定程度后,即便不能完全看懂文章,但凭借语感也能选出正确答案。


二、 代码异味的影响


对于代码异味的出现我们其实无需过度紧张,因为在整个程序中代码异味是无处不在的。


一般情况下,有“异味”的代码也依旧能运行得很好。只是倘若重视不够,没有适当地维护或改进代码,代码质量就会下降,系统也会开始变得难以维护和扩展,同时也会增加技术债务。这就像做出有异味的九转大肠的的小胖厨师,在前期准备中对评委的建议置若罔闻,一意孤行,做出来的菜连自己都难以下咽。


所以团队应尽可能地做有质量的代码,减少甚至避免这些问题,产生高效益的成果。


三、 如何辨别代码异味



代码是否存在代码异味,通常是靠程序员的主观判断,但由于语言、开发者、开发理论的不同,对代码异味的判断也会存在差异。


所以要想更精准地识别代码异味,获得更高的代码质量,程序员需要大量的实践和经验。不过,前辈们总结的经验也可以让我们少走一些弯路。Martin Fowler在《重构:改善既有代码的设计》一书中,列举了最常见的24种代码异味,可以帮助我们轻松识别,便于处理和改善它们:


1) 过大的类(Large Class)


一个类包含许多字段、方法或者代码行,并逐渐变得臃肿。


2) 数据泥团(Data Clumps)


代码的不同部分包含了相同的变量组,且这些数据总是绑在一起出现。


3) 过长参数列表(Long Parameter List)


指一个方法的参数超过了三个或四个。出现这种情况一般是将几种类型的算法合并到一个方法之后。


4) 基本类型偏执(Primitive Obsession)


创建一个原始字段比创建一个全新的类要容易得多,所以对于具有意义的业务概念如钱、坐标、范围等,很多程序员不愿意进行建模,而是使用基本数据类型进行表示,进而导致代码内聚性差、可读性差。


5) 神秘命名(Mysterious Name)


在编程中,命名是一件非常恼人的事情。一些可能只有自己看懂的命名,无疑加大了代码可读性的难度,有时甚至自己也会忘记这些命名的含义。


6) 重复代码(Duplicated Code)


这几乎是最常见的异味。当多个程序员同时处理同一程序的不同部分时,通常会发生这种情况。


7) 过长的函数(Long Function)


根据Martin Fowler的经验,通常活得最长、最好的程序,其中的函数都比较短。函数越长,就越难理解。


8) 全局数据(Global Data)


这是一个非常可怕且刺鼻的异味代码。因为从代码库的任何一个角落都可以修改它,而且没有任何机制可以探测出到底是哪段代码做出了修改。全局数据造成一次又一次的诡异Bug,让我们很难找出出错的代码。


9) 可变数据(Mutable Data)


如果可变数据的变量的作用域越大, 越容易出现问题。变量是可以更改的,但我们可能不知道是哪里改变了它。


10) 发散式变化(Divergent Change)


是指一个类受到多种变化的影响。


11) 霰弹式修改(Shotgun Surgery)


是指一种变化引发多个类相应修改。


12) 依恋情结(Feature Envy)


一个类使用另一个类的内部字段和方法的数据多于它自己的数据。


13) 重复的switch(Repeated Switch)


在不同的地方反复使用switch逻辑。这带来的问题就是当我们想要增加一个选择分支时,就必须找到所有的switch,并逐一更新。


14) 循环语句(Loops)


在编程语言中,循环一直是程序设计的核心要素。在《重构》中,Martin Fowler认为它是一种代码异味,因为他们觉得如今的循环已经有点过时了。他们提出“以管道取代循环”,这样可以帮助我们更快看清被处理的元素以及处理它们的动作。


15) 冗赘的元素(Lazy Element)


这是几乎无用的组件。我们在设计代码时有时为了未来的功能设计出“预备”代码,但实际上从未实现;又或者这个类本来有用但随着重构,越来越小,最后只剩下一个函数。无论哪种,它们都是冗赘无用的。


16) 推测的通用性(Speculative Generality)


是指为了“以防万一”,支持预期的未来功能,但这些功能并未被实现,这些类、方法、字段或参数也从未被使用,结果导致代码变得难以理解和支持。


17) 临时字段(Temporary Field)


创建临时字段以用于需要大量输入的算法。但这些字段仅在算法中使用,其余时间不使用。


18) 过长的消息链(Message Chains)


当客户端请求另一个对象,该对象又请求另一个对象,依此类推时,就会出现过长的消息链。这些链意味着客户端依赖于类结构的导航。一旦发生更改,客户端也要跟着修改。


19) 中间人(Middle Man)


指一个类只执行一个动作,但将工作委托给另一个类,这种委托属于过度委托。该类也可能只是一个空壳,只负责委托且只有一件事。


20) 内幕交易(Insider Trading)


指模块之间大量地交换数据,增加模块之间的耦合。


21) 异曲同工的类(Alternative Classes with Different Interface)


是指两个类执行了相同的功能但具有不同的方法名称。


22) 纯数据类(Data Class)


指包含字段和访问它们的粗略方法(getter 和 setter)的类。这些只是其他类使用的数据容器。这些类不包含任何附加功能,并且不能独立操作它们拥有的数据。


23) 被拒绝的遗赠(Refused Bequest)


指如果子类复用了超类的行为,但又不愿意支持超类的接口的情况。


24) 注释(Comments)


程序员将其作为一种“除臭剂”使用情况下的行为。比如:一段代码有着长长的注释,但这段长注释的存在是因为代码很糟糕。


四、 如何对代码“除臭”



1)重构


上述代码异味没有优先级一说,所以对于程序员而言,只能依靠直觉和经验去决定是否需要重构。


重构,一言以蔽之,就是在不改变外部行为的前提下,有条不紊地改善代码。是实现敏捷性的最重要的技术因素之一。是程序员根据已识别出的气味然后将代码分成更小的部分的过程,再决定要么删除它们,要么用更好的代码替换它们,如此循环重复这个过程,直到异味消失,这样可能会提高代码质量并让代码变得更具简单性、灵活性和可理解性。


2)使用代码检测工具



识别和消除代码异味是一个令人厌烦且不确定的过程,而且也不可能手动查找到和删除掉所有异味,尤其是面对一个有着上千行异味的代码的时候。所以使用一些代码检测工具可以辅助我们进行快速大量地审查,帮助我们节约时间来做更为重要的工作,比如能专注于代码高层面的设计原则问题。


好了,关于代码异味的知识,算是讲了个清楚,那么让我们相约下一次代码评审吧!



作者:禅道程序猿
来源:juejin.cn/post/7207617774633123896
收起阅读 »

ChatGPT3微调-评论文本情感分析

前言 如果阅读过openai的文档,便能看到对于模型提供了fine-turning功能,即微调。GPT-3已经在互联网中进行了大量文本的预训练,当我们给出少量示例的提示时,它通常可以直观地了解正在尝试执行的任务并生成一个合理的完成。这通常被称为“小样本学习”。...
继续阅读 »

前言


如果阅读过openai的文档,便能看到对于模型提供了fine-turning功能,即微调。GPT-3已经在互联网中进行了大量文本的预训练,当我们给出少量示例的提示时,它通常可以直观地了解正在尝试执行的任务并生成一个合理的完成。这通常被称为“小样本学习”。但我们需要的是一些特定的需求,比如GPT之前未预训练过的数据或是一些私有数据,便可以用微调通过训练来改进小样本学习。


那么微调都可以解决什么问题呢?结合官网的指南,常见的场景有:



  • 文本生成:可以通过提供相关数据集和指导性的文本,生成更加准确和有针对性的文本

  • 文本分类:将一段文本分成多个类别,例如电子邮件分类

  • 情感分析:分析一段文本的情感倾向,是否积极或消极


本文将对情感分析进行一次尝试。


准备数据


先从网上获取了一份关于酒店评论的数据,总共就两列。


第一列是评论内容,第二列1代表积极, 0 代表消极。


image.png


有需要的可以从这里下载,总共是1w条
评论文本情感分析


不过目前的数据是不能直接使用的,我们需要转换成GPT能接受的格式


{"prompt": "", "completion": ""}
{"prompt": "", "completion": ""}
...

数据预处理


openai很贴心的准备一个工具来验证、格式化数据。


安装CLI


pip install --upgrade openai


验证、格式化


openai tools fine_tunes.prepare_data -f


image.png


执行命令后我们看到他返回的提示中告诉了数据一共有300条,并猜测我们是要进行分类模型,同时建议我们用ada模型,拆分出训练集和测试集,加入分隔符(加入分隔符可以帮助模型更好地理解输入的数据),分别会在接下来让我们选择


为所有提示添加后缀分隔符 `->`
- [Recommended] Add a suffix separator ` ->` to all prompts [Y/n]: Y
在完成的开头添加空格字符
- [Recommended] Add a whitespace character to the beginning of the completion [Y/n]: Y
是否要将其拆分为训练和验证集
- [Recommended] Would you like to split into training and validation set? [Y/n]: Y

无特殊情况全部选Y即可。


image.png


之后会生成两个jsonl文件,同时返回一段参考命令、训练预计的时间。


训练模型


选择模型


首先,我们需要对模型进行一个选择,目前只支持davincicuriebabbageada


模型名称描述训练/1K tokens使用/1K tokens
Davinci最强大的GPT-3模型,可以完成其他模型可以完成的任何任务,通常具有更高的质量$0.0300 $0.1200
Curie非常有能力,但速度更快,成本更低,比Davinci更适合$0.0030$0.0120
Babbage适用于简单任务,非常快速,成本更低$0.0006$0.0024
Ada适用于非常简单的任务,通常是GPT-3系列中速度最快,成本最低的模型$0.0004$0.0016

模型的训练和使用都是需要费用的。出于各种原因我们直接选择Ada。


开始训练


在此之前,我们先将key添加到环境变量中


export OPENAI_API_KEY=""


然后再来看一下之前openai给我们参考的代码


openai api fine_tunes.create 
-t ".\train_data_prepared_train.jsonl"
-v ".\train_data_prepared_valid.jsonl"
--compute_classification_metrics
--classification_positive_class " 1"

-t、-v分别是训练集和测试集


--compute_classification_metrics可以计算模型在分类任务中的性能指标,在验证集上计算模型的准确率(accuracy)、精确率(precision)、召回率(recall)和F1分数。这有助于评估模型的性能,并调整微调过程中的超参数和训练策略。


--classification_positive_class是指分类的积极类别或正例


这里还需要一个 -m,来设置选择的模型。我也是手快直接回车了,本来以为会报错,可它正常运行了,但是默认的模型可能不是我们期望的ada,所以我们需要取消这次训练。


3VGP%(3UDXQ@4`7`}0`IG%V.gif


openai api fine_tunes.cancel -i


不过我也是用list查了一下,发现默认的模型是curie


openai api fine_tunes.list


image.png


接下来我们加上模型等待训练完成即可。
如果过程中不小心关掉窗口或者中断了可以用以下命令恢复。


openai api fine_tunes.follow -i


结束训练


耗时25分钟,花费了0.06刀(比预计的少很多)。


image.png


最后我们看一下分析结果

openai api fine_tunes.results -i


image.png


详细的解析大家可以阅读官方文档,这里我们主要看一下准确度

image.png


使用模型


模型的性能指标给出了0.85的准确率,这里用Playground调用测试一下。


除此之外还可以使用CLI命令


openai api completions.create -m -p


或者使用API


const openai = new OpenAIApi(configuration);
const response = await openai.createCompletion({
model: "训练完后模型的id",
prompt: "Say this is a test",
});

输入的prompt末尾需要加上之前CLI自动给我们补齐的分隔符。


从大数据集中随机拿了几个例子,结果是对的,但是输出有问题
image.png


image.png


image.png


D9}6@O_VYQ@W5R)BI)J%Q_W.gif


应该是completion结尾没有分隔符的原因,明天再试试,顺便扩大一下样本。

梅开二度


第二次训练在completion的末尾全都加上了" ###"作为分隔符。


在playgroud、API、CLI中记得设置Stop


image.png


image.png


image.png


R`F1(}96)`OO(YWJD9`{U]D.jpg


作者:Defineee
来源:juejin.cn/post/7208108117837217848
收起阅读 »

Android将so库封装到jar包中并加载其中的so库

说明 因为一些原因,我们提供给客户的sdk,只能是jar包形式的,一些情况下,sdk里面有native库的时候,就不太方便操作了,此篇文章主要解决如何把so库放入jar包里面,如何打包成jar,以及如何加载。 1.如何把so库放入jar包 so库放入jar参考...
继续阅读 »

说明


因为一些原因,我们提供给客户的sdk,只能是jar包形式的,一些情况下,sdk里面有native库的时候,就不太方便操作了,此篇文章主要解决如何把so库放入jar包里面,如何打包成jar,以及如何加载。


1.如何把so库放入jar包


so库放入jar参考此文章ANDROID将SO库封装到JAR包中并加载其中的SO库
放置路径
将so库改成.jet后缀,放置和加载so库的SoLoader类同一个目录下面。


2.如何使用groovy打包jar


打包jar
先把需要打包的class放置到同一个文件夹下面,然后打包即可,利用groovy的copy task完成这项工作非常简单。


3.如何加载jar包里面的so


3.1.首先判断当前jar里面是否存在so

InputStream inputStream = SoLoader.class.getResourceAsStream("/com/dianping/logan/arm64-v8a/liblogan.jet");

如果inputStream不为空就表示存在。


3.2.拷贝

判断是否已经把so库拷贝到手机里面了,如果没有拷贝过就进行拷贝,这个代码逻辑很简单。


public class SoLoader {
private static final String TAG = "SoLoader";

/**
* so库释放位置
*/

public static String getPath() {
String path = GlobalCtx.getApp().getFilesDir().getAbsolutePath();
//String path = GlobalCtx.getApp().getExternalFilesDir(null).getAbsolutePath();
return path;
}

public static String get64SoFilePath() {
String path = SoLoader.getPath();
String v8a = path + File.separator + "jniLibs" + File.separator +
"arm64-v8a" + File.separator + "liblogan.so";
return v8a;
}

public static String get32SoFilePath() {
String path = SoLoader.getPath();
String v7a = path + File.separator + "jniLibs" + File.separator +
"armeabi-v7a" + File.separator + "liblogan.so";
return v7a;
}

/**
* 支持两种模式,如果InputStream inputStream = SoLoader.class.getResourceAsStream("/com/dianping/logan/arm64-v8a/liblogan.jet");
* 返回了空,表示可能此库是aar接入的,普通加载so库就行,不为空,需要拷贝so库,动态加载
*/

public static boolean jarMode() {
boolean jarMode = false;
InputStream inputStream = SoLoader.class.getResourceAsStream("/com/dianping/logan/arm64-v8a/liblogan.jet");
if (inputStream != null) {
jarMode = true;
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return jarMode;
}

/**
* 是否已经拷贝过so了
*/

public static boolean alreadyCopySo() {
String v8a = SoLoader.get64SoFilePath();
File file = new File(v8a);
if (file.exists()) {
String v7a = SoLoader.get32SoFilePath();
file = new File(v7a);
return file.exists();
}
return false;
}

/**
* 拷贝logan的so库
*/

public static boolean copyLoganJni() {
boolean load;
File dir = new File(getPath(), "jniLibs");
if (!dir.exists()) {
load = dir.mkdirs();
if (!load) {
return false;
}
}
File subdir = new File(dir, "arm64-v8a");
if (!subdir.exists()) {
load = subdir.mkdirs();
if (!load) {
return false;
}
}
File dest = new File(subdir, "liblogan.so");
//load = copySo("/lib/arm64-v8a/liblogan.so", dest);
load = copySo("/com/dianping/logan/arm64-v8a/liblogan.jet", dest);
if (load) {
subdir = new File(dir, "armeabi-v7a");
if (!subdir.exists()) {
load = subdir.mkdirs();
if (!load) {
return false;
}
}
dest = new File(subdir, "liblogan.so");
//load = copySo("/lib/armeabi-v7a/liblogan.so", dest);
load = copySo("/com/dianping/logan/armeabi-v7a/liblogan.jet", dest);
}
return load;
}

public static boolean copySo(String name, File dest) {
InputStream inputStream = SoLoader.class.getResourceAsStream(name);
if (inputStream == null) {
Log.e(TAG, "inputStream == null");
return false;
}
boolean result = false;
FileOutputStream outputStream = null;
try {
outputStream = new FileOutputStream(dest);
int i;
byte[] buf = new byte[1024 * 4];
while ((i = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, i);
}
result = true;
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
if (outputStream != null) {
try {
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return result;
}

}

3.3.加载

首先判断当前应用是32位还是64位Process.is64Bit();。然后加载对应的32或者64位的so。


static {
try {
if (SoLoader.jarMode()) {
if (SoLoader.alreadyCopySo()) {
sIsCloganOk = loadLocalSo();
} else {
boolean copyLoganJni = SoLoader.copyLoganJni();
if (copyLoganJni) {
sIsCloganOk = loadLocalSo();
}
}
} else {
System.loadLibrary(LIBRARY_NAME);
sIsCloganOk = true;
}
} catch (Throwable e) {
e.printStackTrace();
sIsCloganOk = false;
}
}

static boolean loadLocalSo() {
boolean bit = Process.is64Bit();
if (bit) {
String v8a = SoLoader.get64SoFilePath();
try {
System.load(v8a);
return true;
} catch (Throwable e) {
e.printStackTrace();
return false;
}
} else {
String v7a = SoLoader.get32SoFilePath();
try {
System.load(v7a);
return true;
} catch (Throwable e) {
e.printStackTrace();
return false;
}
}
}

作者:CCtomorrow
来源:juejin.cn/post/7206627150621851707
收起阅读 »

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
来源:juejin.cn/post/7206998548343668796
收起阅读 »

字节跳动音视频面试一面挂,转拿腾讯音视频 offer

一、面试官: 视频为什么需要压缩 心理分析:视频压缩在音视频领域是一个恒久不变的话题,有压缩也就意味有解压操作,我们把压 缩称为编码 解压成为解码。它们是成对出现的,做音视频最难的就在音视频编解码。如何提高音 视频播放效率,在不牺牲视频质量下 做高度压缩就显...
继续阅读 »

一、面试官: 视频为什么需要压缩



心理分析:视频压缩在音视频领域是一个恒久不变的话题,有压缩也就意味有解压操作,我们把压
缩称为编码 解压成为解码。它们是成对出现的,做音视频最难的就在音视频编解码。如何提高音
视频播放效率,在不牺牲视频质量下 做高度压缩就显得格外重要了。面试官想问的问题并不是压
缩了什么,而是编码中对视频帧做了什么



求职者:需要求职者对视频编码有所了解,接下来我们从帧内压缩,与帧间压缩讲起



  • 未经压缩的数字视频的数据量巨大 下图一分钟的视频量 差不多需要68G

  • 存储困难:一张32G的U盘只能存储几秒钟的未压缩数字视频。

  • 传输困难 : 1兆的带宽传输一秒的视频需要大约10分钟。



二、面试官: 封装格式是什么



心理分析:很多人对音视频的概念停留在 苍老师的小电影上,只能理解他是一个视频文件。面试官考
的对视频文件下的封装格式,封装格式里面的内容有没有了解



求职者:首先需要从封装格式概念讲起,慢慢深入到封装格式基础下,然后散发解封装与封装过程


(1)封装格式(也叫容器)就是将已经编码压缩好的视频轨和音频轨按照一定的格式放到一个文件中,也就
是说仅仅是一个外壳,可以把它当成一个放视频轨和音频轨的文件夹也可以。
(2)通俗点说视频轨相当于饭,而音频轨相当于菜,封装格式就是一个碗,或者一个锅,用来盛放饭菜的容
器。
(3)封装格式和专利是有关系的,关系到推出封装格式的公司的盈利。
(4)有了封装格式,才能把字幕,配音,音频和视频组合起来。
(5)常见的AVI、RMVB、MKV、ASF、WMV、MP4、3GP、FLV等文件都指的是一种封装格式。


举例MKV格式的封装



三、面试官: 一个视频文件是否可以完成倒放(或者你们的倒放如何实现)



心理分析:面试官考的是 是否有经历过音视频剪辑相关的经验,需要从求职者中得到的答案,不是
“能”或者“不能” 而是分析为什么不能倒放,



不能倒放的本质原因,对I B P有有没有了解



求职者:倒放在视频剪辑中 是必备功能,按常理来看,倒放肯定是能够实现的,但是问题就出现在
这里,求职者如果对视频编码原理不理解的话,对视频倒放肯定打不上来的,求职者需要首先答对
“一个视频不能实现倒放,两个文件可以" 这个入手, 再从编解码入手 讲解为什么不能实现倒放



答案


第一种方式:



  1. 从第一个gop然后顺序解码

  2. 将一个解码的gop的yuv写入文件中

  3. 将第二个gop顺序解码yuv写入文件

  4. 第三个gop序列,以此类推....


然后倒序读入内存中,进行编码即可.



缺点:如果文件过大,不能使用此方法,因为yuv文件较大,一分钟yuv就有1-2G左右,有可能撑爆sdcard.



第二种方式



  1. 全部遍历视频一遍,获取一共有多少gop序列

  2. 跳到(seek)到最后一个gop的I帧,然后把这个gop解码的yuv存放在sdcard

  3. 再逆序读出这个解码的gop的yuv,进行编码,这样最后一个gop就变成了第一帧的gop;

  4. 接下来seek到倒数第一个gop的I帧,依次类推,把每个gop解码、然后编码


其实在音视频岗位面试中,问到得远远不止上面的相关问题,上述知识举例,还有更多内容可以面试题可以参考:



1.什么是I帧 P帧 B帧?
2.简述H264视频编码流程?
3.视频能倒放吗,倒放如何实现?
4.硬编码与软编码有什么区别?
5.你对sps 和pps的理解?
6.如何从一段残缺H264数据 解析出画面?
7.讲讲MediaCodec硬编码底层解码机制?
8.音频播放过快,视频慢,如何选择丢帧
9.码率和分辨率都会影响视频的清晰度
10.生产者和消费者的关系
11.sps和pps的区别
12.……



对一些没有学习过、了解过音视频这块知识点的朋友,仿佛是在看天书一般,在这里请大家不要着急,在这为大家准备了《Android 音视频开发入门到精通》的学习笔记:https://qr18.cn/Ei3VPD,帮助大家快速提升。


作者:冬日毛毛雨
来源:juejin.cn/post/7208092574162157626
收起阅读 »

如何避免使用过多的 if else?

web
一、引言 相信大家听说过回调地狱——回调函数层层嵌套,极大降低代码可读性。其实,if-else层层嵌套,如下图所示,也会形成类似回调地狱的情况。 当业务比较复杂,判断条件比较多,项目进度比较赶时,特别容易使用过多if-else。其弊端挺多的,如代码可读性差、...
继续阅读 »

一、引言


相信大家听说过回调地狱——回调函数层层嵌套,极大降低代码可读性。其实,if-else层层嵌套,如下图所示,也会形成类似回调地狱的情况。


image.png


当业务比较复杂,判断条件比较多,项目进度比较赶时,特别容易使用过多if-else。其弊端挺多的,如代码可读性差、代码混乱、复杂度高、影响开发效率、维护成本高等。


因此,我们在日常编码时,有必要采取一些措施避免这些问题。本文的初衷不是建议大家完全不用if-else,而是希望我们能够在学会更多解决方案后更优雅地编码。


R-C.gif




二、8种if-else的优化/替代方案


1. 使用排非策略:!、!!


逻辑非(logic NOT),是逻辑运算中的一种,就是指本来值的反值。


当你想这么写时……


1、判断是否为空
if(value === null || value === NaN || value === 0 || value === ''|| value === undefined )
{
……
}

2、判断是否数组是否含有符合某条件的元素
const name = arr.find(item => item.status === 'error')?.name;
if(name !== undefined && name !== ''){
……
}

不妨尝试这么写:


1、判断是否为空
if(!value){……}

2、判断是否数组是否含有符合某条件的元素
if(!!arr.find(item => item.status === 'error')?.name){……}



2. 使用条件(三元)运算符: c ? t : f


三元运算符:
condition ? exprIfTrue : exprIfFalse;
如果条件为真值,则执行冒号(:)前的表达式;若条件为假值,则执行最后的表达式。


当你想这么写时……


let beverage = '';
if(age > 20){
beverage = 'beer';
} else {
beverage = 'juice';
}

不妨尝试这么写:


const beverage = age > 20 ? 'beer' : 'juice';

tips: 建议只用一层三元运算符,多层嵌套可读性差。




3. 使用短路运算符:&&||



  • && 为取假运算,从左到右依次判断,如果遇到一个假值,就返回假值,以后不再执行,否则返回最后一个真值;

  • || 为取真运算,从左到右依次判断,如果遇到一个真值,就返回真值,以后不再执行,否则返回最后一个假值。


当你想这么写时……


    if (isOnline){
makeReservation(user);
}

不妨尝试这么写:


 isOnline && makeReservation(user);



4. 使用 switch 语句


当你想这么写时……


    let result;
if (type === 'add'){
result = a + b;
} else if(type === 'subtract'){
result = a - b;
} else if(type === 'multiply'){
result = a * b;
} else if(type === 'divide'){
result = a / b;
} else {
console.log('Calculation is not recognized');
}

不妨尝试这么写:


let result;
switch (type) {
case 'add':
result = a + b;
break;
case 'subtract':
result = a - b;
break;
case 'multiply':
result = a * b;
break;
case 'divide':
result = a / b;
break;
default:
console.log('Calculation is not recognized');
}

个人认为,对于这类比较简单的判断,用switch语句虽然不会减少代码量,但是会更清晰喔。




5. 定义相关函数拆分逻辑,简化代码


当你想这么写时……


function itemDropped(item, location) {
if (!item) {
return false;
} else if (outOfBounds(location) {
var error = outOfBounds;
server.notify(item, error);
items.resetAll();
return false;
} else {
animateCanvas();
server.notify(item, location);
return true;
}
}

不妨尝试这么写:


// 定义dropOut和dropIn, 拆分逻辑并提高代码可读性
function itemDropped(item, location) {
const dropOut = function () {
server.notify(item, outOfBounds);
items.resetAll();
return false;
};

const dropIn = function () {
animateCanvas();
server.notify(item, location);
return true;
};

return !!item && (outOfBounds(location) ? dropOut() : dropIn());
}

细心的朋友会发现,在这个例子中,同时使用了前文提及的优化方案。这说明我们在编码时可以根据实际情况混合使用多种解决方案。




6. 将函数定义为对象,通过穷举查找对应的处理方法




  • 定义普通对象


    对于方案3的例子,不妨尝试这么写:




function calculate(action, num1, num2) {
 const actions = {
   add: (a, b) => a + b,
   subtract: (a, b) => a - b,
   multiply: (a, b) => a * b,
   divide: (a, b) => a / b,
};

 return actions[action]?.(num1, num2) ?? "Calculation is not recognized";
}



  • 定义 Map 对象


    普通对象的键需要是字符串,而 Map 对象的键可以是一个对象、数组或者更多类型,更加灵活。




let statusMap = new Map([
[
{ role: "打工人", status: "1" },
() => { /*一些操作*/},
],
[
{ role: "打工人", status: "2" },
() => { /*一些操作*/},
],
[
{ role: "老板娘", status: "1" },
() => { /*一些操作*/},
],
]);

let getStatus = function (role, status) {
statusMap.forEach((value, key) => {
if (JSON.stringify(key) === JSON.stringify({ role, status })) {
value();
}
});
};

getStatus("打工人", "1"); // 一些操作

tips: JSON.stringify()可用于深比较/深拷贝。




7. 使用责任链模式


责任链模式:将整个处理的逻辑改写成一条责任传递链,请求在这条链上传递,直到有一个对象处理这个请求。


例如 JS 中的事件冒泡


简单来说,事件冒泡就是在一个对象上绑定事件,如果定义了事件的处理程序,就会调用处理程序。相反没有定义的话,这个事件会向对象的父级传播,直到事件被执行,最后到达最外层,document对象上。


image.png


这意味着,在这种模式下,总会有程序处理该事件。

再举个🌰,当你想这么写时……


function demo (a, b, c) {
if (f(a, b, c)) {
if (g(a, b, c)) {
// ...
}
// ...
else if (h(a, b, c)) {
// ...
}
// ...
} else if (j(a, b, c)) {
// ...
} else if (k(a, b, c)) {
// ...
}
}

不妨参考这种写法:


const rules = [
{
match: function (a, b, c) { /* ... */ },
action: function (a, b, c) { /* ... */ }
},
{
match: function (a, b, c) { /* ... */ },
action: function (a, b, c) { /* ... */ }
},
{
match: function (a, b, c) { /* ... */ },
action: function (a, b, c) { /* ... */ }
}
// ...
]

// 每个职责一旦匹配,原函数就会直接返回。
function demo (a, b, c) {
for (let i = 0; i < rules.length; i++) {
if (rules[i].match(a, b, c)) {
return rules[i].action(a, b, c)
}
}
}


引申话题——如何降低if else代码的复杂度?


相关文章阅读: 如何无痛降低 if else 面条代码复杂度 建议多读几次!!!





8. 策略模式+工厂方法


因为此法比较复杂,此文暂时不做详细介绍。


详细可参考文章优化方案 8 if-else 代码优化的八种方案


三、小结


本文粗略介绍了8种优化/替代if-else的方法,希望能给你日常编码带来一些启示😄。


正如开头所说,我们的目的不是消灭代码中的if-else,而是让我们在学会更多解决方案的基础上,根据实际情况选择更优的编码方式。因此,当你发现自己的代码里面存在特别多的if-else或当你想用if-else时,不妨停下来思考一下——如何能写得更优雅、更方便日后维护呢


image.png


四、参考与感谢



  1. 优化 JS 中过多的使用 IF 语句

  2. 短路运算符(逻辑与&& 和 逻辑或||)

  3. 如何对多个 if-else 判断进行优化

  4. if-else 代码优化的八种方案

  5. 如何替换项目中的if-else和switch

  6. 如何无痛降低 if else 面条代码复杂度


作者:蓝瑟
来源:juejin.cn/post/7206529406613094460
收起阅读 »

听说你还不会使用Koa?

web
简介 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没...
继续阅读 »

简介


Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。


简单来说,Koa也是一个web框架,但是比Express更轻量,并且有更好的异步机制。


本文适合有Koa基础,急需需要搭建项目的同学食用,如果对Koa完全不了解的建议先去看看Koa官方文档。


在讲Koa的使用之前,我们先来介绍一下非常出名的洋葱模型,这对后面代码的理解有很好的帮助


洋葱模型


前面我们在介绍Express的时候就说过了洋葱模型,如下图所示,Koa中的中间件执行机制也类似一个洋葱模型,只不过和Express还是有些许区别。


image.png


我们来看看Koa中的中间件是怎么样执行的。与Express不同的是在Koa中,next是支持异步的。


// 全局中间件
app.use(async (ctx, next) => {
console.log(
"start In comes a " + ctx.request.method + " to " + ctx.request.url
);
next();
console.log(
"end In comes a " + ctx.request.method + " to " + ctx.request.url
);
});

// 单独中间件
router.get(
"/select",
async (ctx, next) => {
console.log("我是单独中间件 start");
const result = await Promise.resolve(123);
console.log(result);
next();
console.log("我是单独中间件 end");
},
async (ctx) => {
console.log("send result start");
ctx.body = "get method!";
console.log("send result end");
}
);

看看上面的输出结果,可以看到它的执行顺序和Express是一样的。


image.png


前面说了,在Koanext是支持异步的。也就是可以await,我们添加await来测试下


// 全局中间件
app.use(async (ctx, next) => {
console.log(
"start In comes a " + ctx.request.method + " to " + ctx.request.url
);
await next();
console.log(
"end In comes a " + ctx.request.method + " to " + ctx.request.url
);
});

// 单独中间件
router.get(
"/select",
async (ctx, next) => {
console.log("我是单独中间件 start");
const result = await Promise.resolve(123);
console.log(result);
await next();
console.log("我是单独中间件 end");
},
async (ctx) => {
console.log("send result start");
ctx.body = "get method!";
console.log("send result end");
}
);

看看运行结果


image.png


可以看到,在Koa中,await会阻塞所有后续代码的执行,完全保证了按洋葱模型执行代码。以next为分水岭,先从前往后执行next前半部分代码,然后从后往前执行next下半部分代码。


Express中,next方法是不支持异步await的,这个是KoaExpress洋葱模型里面最大的一个区别。


创建应用


首先我们需要安装koa


npm i koa

然后引入使用


const Koa = require("koa");
const app = new Koa();

app.listen(3000, () => {
console.log("serve running on 3000");
});

这个和Express还是很相似的。


路由


Koa的路由和Express还是有差别的。Koaapp是不支持直接路由的,需要借助第三方插件koa-router


我们先来安装


npm i @koa/router

然后就可以引入使用了


// routes/user.js
const Router = require("@koa/router");
const router = new Router({ prefix: "/user" }); // 路由前缀

router.get("/select", (ctx) => {
ctx.body = "get";
});

router.post("/add", (ctx) => {
ctx.body = "post";
});

router.delete("/delete", (ctx) => {
ctx.body = "delete";
});

router.put("/update", (ctx) => {
ctx.body = "put";
});

// 所有请求都支持
router.all("/userall", (ctx) => {
ctx.body = "所有请求都可以?" + ctx.method;
});

// 重定向
router.get("/testredirect", (ctx) => {
ctx.redirect("/user/select");
});

module.exports = router;

然后在入口文件,引入路由并注册就可以使用了


const Koa = require("koa");
const app = new Koa();
const userRouter = require("./routes/user");

app.use(userRouter.routes()).use(userRouter.allowedMethods());

这样我们就可以通过localhost:3000/user/xxx来调用接口了。


自动注册路由


同样的,如果模块很多的话,我们还可以优化,通过fs模块读取文件,自动完成路由的注册。


// routes/index.js
const fs = require("fs");

// 批量注册路由
module.exports = (app) => {
fs.readdirSync(__dirname).forEach((file) => {
if (file === "index.js") {
return;
}
const route = require(`./${file}`);
app.use(route.routes()).use(route.allowedMethods());
});
};

在入口文件,我们可以通过该方法批量注册路由了


const registerRoute = require("./routes/index");
registerRoute(app);

这样我们就可以通过localhost:3000/模块路由前缀/xxx来调用接口了。


路由说完了,我们再来看看怎么获取参数


参数获取


参数的获取分为query、param、body三种形式


query参数


对于query参数,通过req.query获取


router.get("/", (ctx) => {
const query = ctx.query;
// const query = ctx.request.query; // 上面是简写形式
ctx.body = query;
});

参数能正常获取


image.png


我们再来看看路径参数


路径参数


对于路径参数,通过:变量定义,然后通过request.params获取。


router.get("/user2/:name/:age", (ctx) => {
// 路径参数获取
const params = ctx.params;
// const params = ctx.request.params; // 上面是简写形式
ctx.body = params
});

参数能正常获取


image.png


body参数


对于body参数,也就是请求体里面的参数,就需要借助koa-body插件。但是在新版的Express中已经自身支持了。


首先安装koa-body插件


npm i koa-body

然后在入口文件使用


const { koaBody } = require("koa-body");

app.use(koaBody());

然后通过ctx.request.body就可以获取到参数啦。


router.post("/", (ctx) => {
const body = ctx.request.body;
ctx.body = body;
});

设置完后,我们来测试下,参数正常获取。


image.png


文件上传


说完参数的获取,我们再来看看怎么处理文件上传。


koa中,对于文件上传也是借助koa-body插件,只需要在里面配置上传文件的参数即可。相较Express要简单很多。


app.use(
koaBody({
// 处理文件上传
multipart: true,
formidable: {
// 使用oss上传就注释 上传到本地就打开。路径必须事先存在
uploadDir: path.join(__dirname, "./uploads"),
keepExtensions: true,
},
})
);

配置好后,我们来测试一下


Express不同的是,不管是单文件还是多文件,都是通过ctx.request.files获取文件。


单文件上传


router.post("/file", (ctx) => {
const files = ctx.request.files;
ctx.body = files;
});

我们可以看到,它返回的是一个对象,并且在没填写表单字段的时候,它的key是空的。


image.png


我们再来看看有表单字段的


router.post("/file2", (ctx) => {
const files = ctx.request.files;
ctx.body = files;
});

可以看到,它返回的对象key就是我们的表单字段名。


image.png


我们再来看看多文件上传的情况


多文件上传


我们先来看看多文件不带表单字段的情况


router.post("/files", (ctx) => {
const files = ctx.request.files;
ctx.body = files;
});

可以看到,它返回的还是一个对象,只不过属性值是数组。


image.png


我们来看看带表单字段的情况,对于带表单字段的多文件上传,它返回的对象里面的key值就不是空值,并且如果是多个文件,它是以数组形式返回。


image.png


image.png


静态目录


文件上传我们介绍完毕了,如果我们想访问我们上传的图片该怎么办呢?能直接访问吗


对于文件,我们需要开启静态目录才能通过链接访问到我们目录里面的内容。与Express不同,koa需要借助koa-static插件才能开启静态目录。


下面的配置就是将我们系统的uploads目录设置为静态目录,这样我们通过域名就能直接访问该目录下的内容了。


const koaStatic = require("koa-static");

app.use(koaStatic(path.join(__dirname, "uploads")));

可以看到,图片能正确访问。


image.png


细心的同学可能发现了它是直接在域名后面访问,并没有像Express一样有个static前缀。那怎么实现这种自定义前缀的效果呢?


自定义静态资源目录前缀


Koa中,需要借助koa-mount插件


我们先来安装一下


npm i koa-mount

然后和koa-static搭配使用


app.use(mount("/static", koaStatic(path.join(__dirname, "uploads"))));

然后我们就可以带上/static前缀访问静态资源了。


image.png


错误处理


koa也可以通过中间件来捕获错误,但是需要注意,这个中间件需要写在前面


app.use(async (ctx, next) => {
try {
await next();
} catch (error) {
// 响应用户
ctx.status = error.status || 500;
ctx.body = error.message || "服务端错误";
// ctx.app.emit("error", error); // 触发应用层级error事件
}
});

我们来测试一下


// 模拟错误
router.get("/error", function (ctx, next) {
// 同步错误可以直接捕获
throw new Error("同步错误");
});

可以看到,错误被中间件捕获并正常返回了。


image.png


我们再来看看异步错误


router.get("/error2", async function (ctx, next) {
// 新建异步错误
await Promise.reject(new Error("异步错误"));
});

也能被正常捕获。


image.png


可以看到,相较于Express的错误处理,Koa变得更简单了,不管是同步错误还是异步错误都能正常捕获。


日志


对于线上项目用来说,日志是非常重要的一环。log4js是使用得比较多的一个日志组件,经常跟Express一起配合使用。本文简单讲解下在Express怎么使用log4js


我们首先来安装该插件,笔者这里安装的版本是6.8.0


npm install log4js

然后我们创建一个utils文件夹下创建log.js,用来创建一个logger


// utils/log.js

const log4js = require("log4js");
const logger = log4js.getLogger();

logger.level = "debug"; // 需要打印的日志等级

module.exports = logger;

在需要的地方引入logger就可以了,我们来测试下


app.get("/logtest", (req, res) => {
logger.debug("Some debug messages");
logger.info("Some info messages");
logger.warn("Some warn messages");
logger.error("Some error messages");
res.send("test log");
});

可以看到,日志都打印出来了


image.png


日志等级


我们再来改变下输出日志的等级


logger.level = "warn"; // 需要打印的日志等级

再来测试下,发现只输出了warnerror等级的日志,debuginfo等级的过滤掉了。


image.png


日志输出到文件


日志如果想输出到文件,我们还可以配置log4js


const log4js = require("log4js");

log4js.configure({
appenders: { test: { type: "file", filename: "applog.log" } },
categories: { default: { appenders: ["test"], level: "warn" } },
});

const logger = log4js.getLogger();

module.exports = logger;

我们再来测试下,发现它自动创建了applog.log文件,并将日志写入到了里面。


image.png


连接数据库


数据库目前主要有关系型数据库、非关系型数据库、缓存数据库,这三种数据库我们各举一个例子。


连接mongodb


为了方便操作mongodb,我们使用mongoose插件


首先我们来安装


npm  i mongoose

安装完后我们先创建db文件夹,然后创建mongodb.js,在这里来连接我们的mongodb数据库


// db/mongodb.js

const mongoose = require("mongoose");

module.exports = () => {
// 数据库连接
return new Promise((resolve, reject) => {
mongoose
.connect("mongodb://localhost/ExpressApi", {
// useNewUrlParser: true,
// useUnifiedTopology: true,
// useFindAndModify: false,
})
.then(() => {
console.log("mongodb数据库连接成功");
resolve();
})
.catch((e) => {
console.log(e);
console.log("mongodb数据库连接失败");
reject();
});
});
};

然后在我们的入口文件引用使用


// index.js

// 连接mongodb
const runmongodb = require("./db/mongodb.js");
runmongodb();

保存,我们运行一下,可以看到mongodb连接成功。


image.png


我们查看mongodb面板,可以看到KoaApi数据库也创建成功了


image.png


数据库连接成功了,下面我们正式来创建接口。


我们以mvc模式,创建model、controller、route三个文件夹分别来管理模型、控制器、路由。


项目总体目录如下


model // 模型
controller // 控制器
route // 路由
db // 数据库连接
index.js // 入口文件

创建接口总共分为四步



  1. 创建模型

  2. 创建控制器

  3. 创建路由

  4. 使用路由


我们先来创建一个user model


// model/user.js
const mongoose = require("mongoose");
// 建立用户表
const UserSchema = new mongoose.Schema(
{
username: {
type: String,
unique: true,
},
password: {
type: String,
select: false,
},
},
{ timestamps: true }
);

// 建立用户数据库模型
module.exports = mongoose.model("User", UserSchema);

然后创建user控制器,定义一个保存和一个查询方法。


// controller/userController.js
const User = require("../model/user");

class UserController {
async create(ctx) {
const { username, password } = ctx.request.body;
const repeatedUser = await User.findOne({ username, password });
if (repeatedUser) {
ctx.status = 409;
ctx.body = {
message: "用户已存在",
};
} else {
const user = await new User({ username, password }).save();
ctx.body = user;
}
}

async query(ctx) {
const users = await User.find();
ctx.body = users;
}
}

module.exports = new UserController();

然后我们在路由里面定义好查询和创建接口


// route/user.js

const Router = require("@koa/router");
const router = new Router({ prefix: "/user" });
const { create, query } = require("../controller/userController");

router.post("/create", create);
router.get("/query", query);

module.exports = router;

最后我们在入口文件使用该路由,前面我们说啦,路由少可以一个一个引入使用,对于路由多的话还是推荐使用自动注入的方式。


为了方便理解,这里我们还是使用引入的方式


// index.js

const userRouter = require("./routes/user");
app.use(userRouter.routes()).use(userRouter.allowedMethods())

好啦,通过这四步,我们的接口就定义好啦,我们来测试一下


先来看看新增,接口正常返回


image.png


我们来看看数据库,发现user表添加了一条新记录。


image.png


我们再来看看查询接口,数据也能正常返回。


image.png


至此,我们的mongodb接口就创建并测试成功啦。


连接mysql


为了简化我们的操作,这里我们借助了ORM框架sequelize


我们先来安装这两个库


npm i mysql2 sequelize

然后在db目录下创建mysql.js用来连接mysql


const Sequelize = require("sequelize");

const sequelize = new Sequelize("KoaApi", "root", "123456", {
host: "localhost",
dialect: "mysql",
});

// 测试数据库链接
sequelize
.authenticate()
.then(() => {
console.log("数据库连接成功");
})
.catch((err) => {
// 数据库连接失败时打印输出
console.error(err);
throw err;
});

module.exports = sequelize;

这里要注意,需要先把数据库koaapi提前创建好。它不会自动创建。


跟前面一样,创建接口总共分为四步



  1. 创建模型

  2. 创建控制器

  3. 创建路由

  4. 使用路由


首先我们创建model,这里我们创建user2.js


// model/user2.js

const Sequelize = require("sequelize");
const sequelize = require("../db/mysql");

const User2 = sequelize.define("user", {
username: {
type: Sequelize.STRING,
},
password: {
type: Sequelize.STRING,
},
});

//同步数据库:没有表就新建,有就不变
User2.sync();

module.exports = User2;

然后创建控制器,定义一个保存和一个查询方法。


// controller/user2Controller.js

const User2 = require("../model/user2.js");

class user2Controller {
async create(ctx) {
const { username, password } = ctx.request.body;

try {
const user = await User2.create({ username, password });
ctx.body = user;
} catch (error) {
ctx.status = 500;
ctx.body = { code: 0, message: "保存失败" };
}
}

async query(ctx) {
const users = await User2.findAll();
ctx.body = users;
}
}

module.exports = new user2Controller();

然后定义两个路由


const router = new Router({ prefix: "/user2" });
const { query, create } = require("../controller/user2Controller");

// 获取用户
router.get("/query", query);
// 添加用户
router.post("/create", create);

module.exports = router;

最后在入口文件使用该路由


// index.js

const user2Router = require("./routes/user2");
app.use(user2Router.routes()).use(user2Router.allowedMethods())

好啦,通过这四步,我们的接口就定义好啦,我们来测试一下


先来看看新增,接口正常返回


image.png


我们来看看数据库,发现users表添加了一条新记录。


image.png


我们再来看看查询接口,数据也能正常返回。


image.png


至此,我们的mysql接口就创建并测试成功啦。


我们再来看看缓存数据库redis


连接redis


这里我们也需要借助node-redis插件


我们先来安装


npm i redis

然后在db目录下创建redis.js用来连接redis


// db/redis.js

const { createClient } = require("redis");

const client = createClient();

// 开启连接
client.connect();

// 连接成功事件
client.on("connect", () => console.log("Redis Client Connect Success"));
// 错误事件
client.on("error", (err) => console.log("Redis Client Error", err));

module.exports = client;

然后我们创建一个简单的路由来测试一下


// route/dbtest

const Router = require("@koa/router");
const router = new Router({ prefix: "/dbtest" });
const client = require("../db/redis");

router.get("/redis", async (ctx) => {
await client.set("name", "randy");
const name = await client.get("name");
ctx.body = { name };
});

module.exports = router;

然后把该路由在入口文件注册使用


// index.js

const dbtestRouter = require("./routes/dbtest");
app.use(dbtestRouter.routes()).use(dbtestRouter.allowedMethods())

最后我们来测试下接口,可以看到接口正常返回


image.png


我们再来查看一下我们的redis数据库,发现数据保存成功。


image.png


当然,这里只是一个简单的入门,redis的操作还有很多,大家可以看官方文档,这里笔者就不再详细说啦。


token验证


对于token的认证,我们这里使用目前比较流行的方案 jsonwebtoken


生成token


我们首先安装jsonwebtoken


npm i jsonwebtoken

安装完后,我们来实现一个登录接口,在接口里生成token并返回给前端。


注意这里因为是演示,所以将密钥写死,真实项目最好从环境变量里面动态获取。


// route/user.js
const jwt = require("jsonwebtoken");

// ...
async login(ctx) {
const { username, password } = ctx.request.body;
const user = await User.findOne({ username, password });
if (user) {
const token = jwt.sign(
{ id: user.id, username: user.username },
"miyao",
{ expiresIn: 60 }
);

ctx.body = {
token,
};
} else {
ctx.status = 401;
ctx.body = {
message: "账号或密码错误",
};
}
}

// ...

这里生成token的接口我们就定义好了,我们来测试一下。


首先输入错误的账号,看到它提示账号密码错误了


image.png


然后我们输入正确的账号密码试一下,可以看到,token被正常返回出来了。


image.png


到这里我们通过jsonwebtoken生成token就没问题了。接下来就是怎么验证token了。


token解密


在说token验证前,我们先来说个token解密,一般来说token是不需要解密的。但是如果非要看看里面是什么东西也是有办法解密的,那就得用到jwt-decode插件了。


该插件不验证密钥,任何格式良好的JWT都可以被解码。


我们来测试一下,


首先安装该插件


npm i jwt-decode

然后在登录接口里面使用jwt-decode解析token


const decoded = require("jwt-decode");

async login(req, res) {
// ...
console.log("decoded token", decoded(token));
// ...
}

可以看到,就算没有秘钥也能将我们的token正确解析出来。


image.png


这个插件一般在我们前端用的比较多,比如想解析token,看看里面的数据是什么。它并不能验证token是否过期。如果想验证token的话还得使用下面的方法。


token验证


Koa中,验证token是否有效我们一般会选择koa-jwt插件。


下面笔者来演示下怎么使用


首先还是安装


npm install koa-jwt

然后在入口文件以全局中间件的形式使用。


这个中间件我们要尽量放到前面,因为我们要验证所有接口token是否有效。


然后记得和错误中间件结合使用。


如果有些接口不想验证,可以使用unless排除,比如登录接口、静态资源。


// index.js
const koaJwt = require("koa-jwt");

app.use(
koaJwt({ secret: "miyao" }).unless({ path: [/^\/user\/login/, "/static"] })
);

// 错误中间件
app.use(async (ctx, next) => {
try {
await next();
} catch (error) {
// 响应用户
ctx.status = error.status || 500;
ctx.body = error.message || "服务端错误";
// ctx.app.emit("error", error); // 触发应用层级error事件
}
});

下面我们测试下,


我们先来看看不要token的接口,来访问一个静态资源。可以看到,没有token能正常获取资源。


image.png


我们再来访问一个需要token的接口,可以看到它提示错误了,说是没有token


image.png


我们用登录接口生成一个token,然后给该接口加上来测试下,可以看到接口正常获取到数据了。


image.png


因为我们的token设置了一分钟有效,所以我们过一分钟再来请求该接口。可以看到,它提示token错误了。


image.png


好啦,关于token验证我们就讲到这里。


启动


node中,一般我们会使用node xx.js来运行某js文件。这种方式不仅不能后台运行而且如果报错了可能直接停止导致整个服务崩溃。


PM2Node 进程管理工具,可以利用它来简化很多 Node 应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。


首先我们需要全局安装


npm i pm2 -g

下面简单说说它的一些基本命令



  1. 启动应用:pm2 start xxx.js

  2. 查看所有进程:pm2 list

  3. 停止某个进程:pm2 stop name/id

  4. 停止所有进程:pm2 stop all

  5. 重启某个进程:pm2 restart name/id

  6. 删除某个进程:pm2 delete name/id


比如我们这里,启动当前应用,可以看到它以后台的模式将应用启动起来了。


image.png


当然关于pm2的使用远不止如此,大家可以查看PM2 文档自行学习。


总结


总体来说,koa更轻量,很多功能都不内置了而是需要单独安装。并且对异步有更好的支持,就是await会阻塞后面代码的执行(包括中间件)。


系列文章


Node.js入门之什么是Node.js


Node.js入门之path模块


Node.js入门之fs模块


Node.js入门之url模块和querystring模块


Node.js入门之http模块和dns模块


Node.js入门之process模块、child_process模块、cluster模块


听说你还不会使用Express


听说你还不会使用Koa?


后记


感谢小伙伴们的耐心观看,本文为笔者个人学习笔记,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!


作者:苏苏同学
来源:juejin.cn/post/7208005547004919867
收起阅读 »

💤💤💤你的javascript被睡了

web
段子 老板说:给客户做的项目,你的运行程序太快了,我建议你慢一点,客户付款速度就会快一点 我:我不会。。。 老板:没工资 我:马上 需求背景 请求后端a接口后拿到返回结果,需要等待2秒钟后才能请求b接口,b接口拿到返回结果后,需要等待3秒钟后才能请求c接口 项...
继续阅读 »

段子


老板说:给客户做的项目,你的运行程序太快了,我建议你慢一点,客户付款速度就会快一点

我:我不会。。。

老板:没工资

我:马上


需求背景


请求后端a接口后拿到返回结果,需要等待2秒钟后才能请求b接口,b接口拿到返回结果后,需要等待3秒钟后才能请求c接口


项目原代码


main () {
this.$http('a').then((resA) => {
setTimeout(() => {
this.$http('b').then((resB) => {
setTimeout(() => {
this.$http('c')
}, 3000)
})
}, 2000)
})
}

这种写法,虽然是实现了效果,但是看着实在是脑瓜子疼


需求只是要求拿到接口后,有一定的休眠后再继续请求下一个接口,实际上只需要实现一个休眠的函数即可


理想写法


async main() {
const resA = await this.$http('a')
await sleep(2000)
const resB = await this.$http('b')
await sleep(3000)
this.$http('c')
}

要是能够这样调用是不是舒服很多,省去了嵌套地狱,可读性得到了提高


从代码来看,实际的关键实现就是sleep函数,我们要怎么用js封装一个好用的sleep函数?


sleep函数实现


function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}

async function demo() {
console.log('Taking a break...');
await sleep(2000)
console.log('Two seconds later, showing sleep in a loop...')

// Sleep in loop
for (let i = 0; i < 5; i++) {
await sleep(2000)
console.log(i)
}
}

demo()

在上面的代码中,sleep()函数返回一个Promise对象。当Promise对象解决时,函数会继续执行。在demo()函数中,我们使用await关键字来等待sleep()函数的解决。这使得console.log()函数在等待指定的时间后才被调用,从而实现了s

作者:超神熊猫
来源:juejin.cn/post/7205812357875548215
leep函数的效果。

收起阅读 »

评论二则:年龄大了能否写代码、上大学不喜欢IT专业咋整

最近有读者留言,问了一些问题。我感觉到,可能不止一个读者有类似的问题。因此,我决定将我与读者在文章下的评论互动,转为专题文章。这样可以增加曝光率,广而告之,相互交流。 问题一:国内能一直写代码吗? 问题来源: 用户user9740670030509在《我裁完...
继续阅读 »

最近有读者留言,问了一些问题。我感觉到,可能不止一个读者有类似的问题。因此,我决定将我与读者在文章下的评论互动,转为专题文章。这样可以增加曝光率,广而告之,相互交流。


问题一:国内能一直写代码吗?



问题来源:


用户user9740670030509在《我裁完兄弟们后,辞职了,转行做了一名小职员》下的评论:



大哥,我在微信上无意中看到你的这篇文章,深受启发,顺着线索找到这里并注册了账号,就为了答谢你。 顺便一说,你的文字很有感染力,可以帮助到很多人。所以如果你有精力的话,不妨考虑选择多个几个平台发文,比如公众号啥的。


我还想请教个问题,在国内能一直写代码吗?年龄大了感觉写不动了,因为看你又回归到基层写代码。



作者回复:


你加上“国内”这两个字,说明你已经了解一些现状了。这个问题,我去高校做交流的时候,很多计算机专业的学生挺喜欢问的。他们深受焦虑教育的影响,虽然不怎么努力,但是往往却可以做到刚刚过了15岁,就已经开始担心35岁的事情了。


其实,写代码,原则上不会受到年龄的限制。反而一些偏底层的代码,还会受益于经验的积累,甚至年龄越大越吃香


国外有个写C语言的老头,写代码写到60多岁,现在按照时薪开工资,找他写C需要预约。他也不贪,一周写十个小时就够吃的了。


但是,到了“国内”,一般就不是这样了


首先说,我们的IT企业环境,往大了说我们的主流价值观。基本都是更看重苦劳,也就是看氛围,推崇996。下班了,你背着包第一个走,这就是不好。工作群里深夜发信息,他回复收到,能24小时待命,这就是好。


这不是现在才有的,也不是IT行业独有的,这是几千年来文化熏陶出来的。


抛去能力不谈,单从“敬业”这一个方面来说,单身的小年轻,显然更具有优势


中年人的精力,会被家庭所瓜分。我们既要照顾老,又要照顾小。还可能要去给自己看病。因为以前年轻的时候,工作太过于放肆,经常连续熬夜、通宵改bug,还在项目庆功会上无限制地喝酒。医生告诉我们,一定要多休息,少看电脑。我们中年人,感觉还有一口气,很想坐起来给老板打电话说:我还能加班。但是,转念想到,导致自己现状的那个老板,骂骂咧咧地赶走老狗的时候,我们又变得狡诈和仇恨起来。


打工的中年人,再也做不到把公司当家,也很难收到消息后,就立马拉个杆箱就去出差。


你说,我有行业经验啊,我一个人的产出可以顶10个小年轻。那能不能别人上10天班,我只上1天班就行。


这一点,先不说很难评判(一说你本该这样的产出,另一说那10个人皆废物)。就算你可以顶100个小年轻,在我们的环境里,依然是行不通的。


我们一直推崇集体主义,不接受任何个人英雄主义行为。为了你一个英雄,管理者要打消众人心里的不平衡,控制各种诽谤和小报告。这个成本,要远大于它的收益。因此,像岳飞那样的英雄,不管在哪个朝代,都是很难生存的。


可能,这也是限制我们科技创新的一个瓶颈。集体的力量仅仅是一种普通的合力,或者叫多方妥协的红利。当它无法实现高精尖时,可能真的就需要一个人来搞定一个局面。


很有意思的是,我在这里说年龄对工作有影响。但是,你看看你头发花白的老板,不管是住在公司,还是个人英雄,他却一点也不受上面问题的困扰。因为打工和创业不一样,即便干一样的活,也是有本质区别的。这是另一个专项论点,暂且不谈。


说完了环境,再说我们的工程师。


我始终感觉我们没有任何核心技术


不管是JavaPython,还是目前我所从事的AI。其实,我们一直都在调用API。这就像是,我们不知道汉堡是怎么做的,但是吃相却是千姿百态。


编译器不是我们的,代码不是中文的。某某语言又发布新版本了,也没有和我们商量过。甚至,哪一天vscode或者IDEA不让你用了,你想找个趁手的地方写代码都很困难(说用记事本的,按抬杠论。嗯?记事本我们有自主软件吗?)。


我们所说的、你身边的编程高手,其实更多是API熟练工。就像我们很会开汽车,也很会制作汽车内饰,但是并不会制造汽车一样。而我们的高手,他们只是比普通人更会封装js、更会编写连接数据库的工具类而已。


因此,我们很难有现实意义上的IT专家。这一点,我和邻居大妈观点有些冲突。大妈向我宣传,我们有很多自主的系统,我们马上就世界第一了,吓得邻居纷纷来搞破坏。


我的视野却满是,刚研究透了Android 7,却发现Android 10已经发布了。我以前买了一本书,叫《IOS 5编程指南》。现在一看,上面的知识完全失效了。不是部分失效,是完全失效。所以,你看,我们一直追着国外的版本跑。服务商发布新版本越快,我们的技能就失效得越快。


因此,35岁、45岁,你很难再依赖新技术了。根本原因可能并不是你不学习,而是你根本就没有啥核心技术。那时,你肯定更喜欢顺手的、在你脑子里根深蒂固的、你扎实掌握了的老技术


当然,你也可以说,能做到熟悉某一版本的API那就已经很厉害了,我都做不到。这,确实没有错。所以,外国老头可以60岁还写代码,我们同样也做不到。


我想上面的两点,一个IT就业环境(倡导从众一致地奉献),二个技术深度(跟随新版本周边调用),可能会导致我们,确实很难将这份深爱的工作,拥有很久。


最后,你说看我又回到基层写代码了。


其实,我都能说出上面那番话,我又怎么会甘心在基层写代码呢?至于,我心中的小九九,等我有成绩了,再告诉大家吧。说出来,就不灵了。


其实,在国内,可以一直写代码。需要稍微忍受一下,别人不解的眼神、涨到顶不动的工资、和小年轻一样的作息。能做到的,可能真的是一份热爱。


当然,我很希望环境能改变。如果条件允许,我也想写代码到60岁。条件不允许,那就提早做打算吧。但是,也不用提太早。这个行业,对于买房、买车、结婚、生子这些个支持,还是强有力的。等经历过这些阶段之后,可能早就不是现在的情况了。


问题二:不喜欢IT这行,现在很迷茫,怎么办?



问题来源:


用户拔剑在《年底了,裁兄弟当职员那哥们儿,如今咋样了?》下的评论:



看得出来你是热爱IT这一行的。我不喜欢这行业,只是混口饭吃,现在过得很迷茫。



作者回复:


上……上……上周吧,我去母校同人工智能专业,小我13年的学弟(侄)们做了个交流。现场就有00后学生问我:学哥,我非常不喜欢我这个专业,但是又考进来,请问怎么办?


旁边,他们专业主任的脸都绿了。


这个问题,让我很难回答。


我通过和专业主任的眼神交流,他告诉我,调专业基本上很难。


我咳嗽了一声。我说,首先,你这个……这个,不喜欢只是,暂时、感觉,不喜欢。刚入学,大学生活都还没适应呢,更何况是专业课!这个专业,没有让你找到幸福的点,甚至还带来些小挫折。所以啊,这个不喜欢,可能是暂时的


你想想,如果,后面,大家都赞扬你这个专业。你们村长给你家,用小推车送来三袋大米,请求你做一个跑地鸡的追踪识别程序。甚至还有人慕名而来,愿意主动做你的女朋友。这时,你就会喜欢这个专业。所以,现在说不喜欢,真的是有点为时尚早。


第二,就算是真的不喜欢,也不代表学习这个专业就一点用都没有。我真的有个大学同学,他跟我一个专业,隔壁宿舍,我们一起上编程课,坐对面。他也不喜欢写代码,他是那种好动不好静的人。后来,他毕业,去做销售卖货去了。他卖的是软件,一套系统。当然,为了让客户的钱花的触手可及,也附带一个硬件设备。他谈业务有意思,帮客户看电脑。有一个李总的电脑很卡。我同学一看,哎呦,你这是软件都装到C盘了,这叫系统盘。他给挪到D盘了。这一调,李总的电脑不但不卡了,而且连开机都变快了。


于是,李总就和他签单了。因为这个销售人员是真的懂软件,他家产品应该也差不了。那一单我同学就赚了6000元。我那时的工资是1500。现在,我这个同学是上市公司的销售总经理,占股份的那种。


后来,他感觉自己和其他的销售很不同。他虽然在编程班是个渣渣,但是在销售中,他的IT知识却是王者级别。因为他都知道stringint是不一样的类型。


所以啊,当不喜欢,又没法改变时,那就先这样吧。坏计划好过没计划


另一方面,你也想一下,自己到底喜欢什么,总不能啥都不喜欢吧。


私下也把喜欢的那个行业,学习一下。既然喜欢,那肯定学得快。等学得差不多了,带着IT知识,去你心仪的那个行业。你可能就会如虎添翼,反而更容易出类拔萃。


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

金三银四来了-找工作有哪些平台/工具?

金三银四,年过完了,奖金(<=0)到手了,是时候出去看看了!但2023年的互联网“寒冬”好像并未褪去,就业环境依然不明朗,让大部分人都很迷茫。最近在看工作机会,就看了看家附近的公司和岗位,简单总结了一下用到的平台和相关工具,个人经验,仅供参考。 01、主...
继续阅读 »

金三银四,年过完了,奖金(<=0)到手了,是时候出去看看了!但2023年的互联网“寒冬”好像并未褪去,就业环境依然不明朗,让大部分人都很迷茫。最近在看工作机会,就看了看家附近的公司和岗位,简单总结了一下用到的平台和相关工具,个人经验,仅供参考。


01、主流的招聘平台


我们一般找工作去哪里投简历呢?国内的主流招聘平台有哪些呢?—— 来自网络的中国在线招聘品牌排行榜:


image.png


image.png


前几名的Boss直聘前程无忧51JOB、智联招聘猎聘拉钩都是比较常用的,排名参考资料:



1.1、看看附近的岗位


注册了前5个平台的账号,搜索了下“web前端”+【成都】的职位数量。



  • 需要登录,大多是需要登录才能看到更多搜索信息,同时登录后(新用户)基本都是强制要求完善求职信息。

  • APP端,APP端同样的关键词搜索,加上距离(附近2KM),看看附近的工作机会。筛选附近需要定位或设置位置,距离计算基本上都是直线距离。

















































平台Web前端Java后端App端/前端/2KM备注
Boss直聘>300>30027✔️最多只显示10页,附近岗位数量还行,支持按距离排序
前程无忧51JOB3008003附近岗位数量较少
智联招聘340+800+9✔️可以看公司评价(类似大众点评),需要自己先点评一个
猎聘>800>80020✔️最多只显示20页,附近数量还行,不支持距离筛选
拉钩330500+2附近岗位较少,App端有bug,从职位详情返回列表筛选条件就没了

结果似乎并不乐观,有效职位数量并不多,而且其中有些岗位还有水分,比如发布很久了的(去年),或HR活跃度显示“一周前”、“1个月前”等。


image.png


后端Java的岗位大概、似乎、好像、确实是比前端多亿点点。可能真的的是我错了,为什么选择了转前端?Java那么好的语言,他们都说是世上最好的语言,她就在那里,我却视若无睹。


image.png


1.2、前端的岗位要求


家附近2KM的前端Web岗位都看了一遍,大概的总结了下普遍的技能要求。







































































技能要求出现频率(10分)
- HTTP、JavaScript、CSS,ES6,基础必备10
- Vue/React框架至少一个,并了解其原理。9
- 熟悉前端的各种调试工具、方法7
- 熟悉小程序、移动端、混合应用,uniapp等工具6
- 熟悉前端的工程化、打包发布工具,如webpack/gulp/Grunt等6
- 熟悉图形化技术,如echarts、d3、canvas、three.js等5
- 熟悉各浏览器、设备的兼容性处理4.5
- 有对模块化、重构、性能优化的经验4
- 熟悉HTTP、TCP、SOCKET等常见网络协议,及AJAX、WebSocket、estful API标准4
- 熟悉常用数据结构和算法、设计模式2
- 熟悉或了解后端开发语言,如NodeJS,Java,php,.net等2
- 能承担一定的工作压力2
- 有博客、开源项目1
- 熟悉TypeScript1
- 能接受出差0.5

1.3、❓选择那个平台呢?


建议是 —— 多选几个平台投放简历!



  • 通过上面的岗位分析,发现Boss、智联、猎聘的岗位相对多一点。

  • 上面三个平台的的公司交集估计只有20%,也就是说大部分公司只在一个(或两个)平台上发布职位,大公司可能会全平台发布,因此求职建议多几个平台投放。




02、怎么判断一个公司靠不靠谱?一些工具


判断一个公司是否靠谱,大概有下面几个角度:



  • **公司做什么的?**公司所处行业或主要业务,是toB、toC,还是toG(政府机关),或者是人力外包。

  • 公司规模:如注册资本、员工数量、是否上市等。

  • 公司状况:公司的工商信息、经营状况、知识产权、公司风险等。

  • 公司评价:他人对公司的评价(包括薪资、福利等)。


2.1、工具介绍


除了通过搜索工具、微信、知乎、小红书去了解,还有几个比较靠谱的工具。



  • 企查查:查企业的工商信息,内容比较丰富、全面。不注册也可查,但注册登录后可看的信息更多一点,基本也就够了,冲了VIP才能看所有信息。

  • 爱企查:同上,差不多。

  • 支付宝-芝麻企业信用,支付宝小程序。同上,不用VIP可以看很多信息。

  • 看准网职友集:类似大众点评,不仅能看公司的工商信息(没上面两个网站丰富),还能看网友们的评价、工资信息,都是来自网友的点评分享。


image.png


2.2、查看公司规模


通过查询企业工商信息,了解公司规模。如下图,可以看出:



  • 成立日期 2019-04-04。比较新的公司

  • 注册资本 1000万元人民币 实缴资本 202万元人民币 。还行

  • 人员规模 少于50人 参保人数 3(2021年报)

    • 参保人数可以说明公司规模,有点少。

    • 不过这里的参保人数一般是比较滞后的,现在看的可能是去年的,或者前年的。




image.png


2.3、公司是干啥的?公司业务


搞清楚公司到底是做什么业务的很重要,是toB(企业用户)、toC(C端用户),还是toG(政府机关),或者是人力外包。如果是toB可能会存在出差、驻场开发等问题,如果是toG(政府机关)可能存在技术老旧、出差等问题。


主要是以下几个途径



  • 招聘网站上的企业介绍。

  • 公司官网。

  • 看企业工商信息的“经营范围”,不过一般比较笼统,不具体。

  • 看企业工商信息的“知识产权”,可以看出公司的一些专利、网站备案、软件著作权。

    • 如果专利较多,说明公司的技术实力不错。。

    • 软件著作权里可以看到公司做的一些软件项目。软件、专利内容也能看出公司的大概的业务范围



  • 看企业的评价,通过看准网看看网友对公司的评价。不过注意既然是来自网友评论,是否准确、客观就很难说了。


image.png


image.png


2.4、公司风险


企业工商信息中包括的比较多,如经营信息、公司风险等,这些都属于公开信息。如下图,可以看出:



  • 公司和员工存在劳务纠纷,需谨慎。


image.png


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

Kotlin 中的高阶函数及其应用

前言 前段时间一直在面试,某次面试,面试官看着我的简历说:“看你写的你很了解 kotlin 哦?那你说一说,为什么 kotlin 可以将函数作为参数和返回值,而 java 不行?” 我:“……”。 这次面试我连水都没喝一口就灰溜溜的走了。 回小黑屋的路上,突然...
继续阅读 »

前言


前段时间一直在面试,某次面试,面试官看着我的简历说:“看你写的你很了解 kotlin 哦?那你说一说,为什么 kotlin 可以将函数作为参数和返回值,而 java 不行?”


我:“……”。


这次面试我连水都没喝一口就灰溜溜的走了。


回小黑屋的路上,突然想到,这玩意儿好像是叫 “高阶函数” 吧?好像我自己也经常用来着,咋就会啥也说不出来了呢?痛定思痛,赶紧恶补了一下相关的内容。


所以为什么 Kotlin 支持函数作为参数呢?


其实翻看 Kotlin 官方文档 《High-order functions and lambdas》 一节,就会发现它的第一段话就解释了为什么:



Kotlin functions are first-class, which means they can be stored in variables and data structures, and can be passed as arguments to and returned from other higher-order functions. You can perform any operations on functions that are possible for other non-function values.


To facilitate this, Kotlin, as a statically typed programming language, uses a family of function types to represent functions, and provides a set of specialized language constructs, such as lambda expressions.



因为在 Kotlin 中函数是头等公民,所以它们可以被储存在变量中、作为参数传递给其他函数或作为返回值从其他函数返回,就像操作其他普通变量一样操作高阶函数。


而 Kotlin 为了支持这个特性,定义了一系列的函数类型并且提供一些特定的语言结构支持(例如 lambdas 表达式)。


那么要怎么用呢?


高阶函数


首先,先看一段简单的代码:


fun getDataFromNet(onSuccess: (data: String) -> Unit) {
val requestResult = "我是从网络请求拿到的数据"

onSuccess(requestResult)
}

fun main() {
getDataFromNet(
onSuccess = {data: String ->
println("获取到数据:$data")
}
)
}

运行代码,输出:


获取到数据:我是从网络请求拿到的数据

下面我们来解释一下这段代码是什么意思。


首先看 getDataFromNet 函数的参数 onSuccess ,嗯?这是个什么东西?


哈哈,看起来可能会觉得有点奇怪,其实这里的 onSuccess 也是一个函数,且带有参数 data: String


大致可以理解成:


fun onSuccess(data: String) {
// TODO
}

这么一个函数,不过实际上这个函数是并不叫 onSuccess ,我们是只把这个函数赋值给了变量 onSuccess


从上面简单例子,我们可以看出,如果要声明一个个高阶函数,那么我们需要使用形如:


(arg1: String, arg2: Int) -> Unit

的函数类型来声明高阶函数。


基本形式就是一个括号 () + -> + Unit


其中,() 内可以像普通函数一样声明接收的参数,如果不接收任何参数则可以只写括号:


() -> Unit

箭头则是固定表达式,不可省略。


最后的 Unit 表示这个函数返回的类型,不同于普通函数,返回类型不可省略,即使不返回任何数据也必须明确声明 Unit


当一个普通函数接收到一个作为参数的高阶函数时,可以通过 变量名()变量名.invoke() 调用:


fun getDataFromNet(onSuccess: (data: String) -> Unit, onFail: () -> Unit) {
val requestResult = "我是从网络请求拿到的数据"

// 调用名为 onSuccess 的高阶函数
onSuccess.invoke(requestResult)
// 也可以直接通过括号调用
onSuccess(requestResult)

// 调用名为 onFail 的高阶函数
onFail.invoke()
// 也可以直接通过括号调用
onFail()
}

下面再看一个有返回值的高阶函数的例子:


fun getDataFromNet(getUrl: (type: Int) -> String) {
val url = getUrl(1)
println(url)
}

fun main() {
getDataFromNet(
getUrl = {type: Int ->
when (type) {
0 -> "Url0"
1 -> "Url1"
else -> "Err"
}
}
)
}

上面的代码会输出:


Url1

将高阶函数作为函数返回值或者赋值给变量其实和上面大差不差,只要把一般用法中的返回值和赋值内容换成 函数类型 表示的高阶函数即可:


fun funWithFunReturn(): () -> Unit {
val returnValue: () -> Unit = { }

return returnValue
}

在实例化高阶函数时,高阶函数的参数需要使用形如
arg1: String , arg2: Int ->
的形式表示,例如:


fun getDataFromNet(onSuccess: (arg1: String, arg2: Int) -> Unit) {
// do something
}

fun main() {
getDataFromNet(
onSuccess = { arg1: String, arg2: Int ->
println(arg1)
println(arg2)
}
)
}

注意,这里的参数名不一定要和函数中定义的一样,可以自己写。


如果参数类型可以推导出来,则可以不用声明类型:


fun getDataFromNet(onSuccess: (arg1: String, arg2: Int) -> Unit) {
// do something
}

fun main() {
getDataFromNet(
onSuccess = { a1, a2 ->
println(a1)
println(a2)
}
)
}

同时,如果某些参数没有使用到的话,可以使用 _ 下划线代替:


fun getDataFromNet(onSuccess: (arg1: String, arg2: Int) -> Unit) {
// do something
}

fun main() {
getDataFromNet(
onSuccess = { a1, _ ->
println(a1)
}
)
}

用 lambda 表达式简化一下


在上面我们举例的代码中,为了更好理解,我们没有使用 lambda 表达式简化代码。


在实际使用过程中,我们可以大量的使用 lambda 表达式来大大减少代码量,例如:


fun getDataFromNet(onSuccess: (data: String) -> Unit, onFail: () -> Unit) {
val requestResult = "我是从网络请求拿到的数据"

if (requestResult.isNotBlank()) {
onSuccess(requestResult)
}
else {
onFail()
}

}

fun main() {
getDataFromNet(
onSuccess = {data: String ->
println("获取到数据:$data")
},
onFail = {
println("获取失败")
}
)
}

可以简化成:


fun main() {
getDataFromNet(
{
println("获取到数据:$it")
},
{
println("获取失败")
}
)
}

可以看到,如果高阶函数的参数只有一个的话,可以不用显式声明,默认使用 it 表示。


同时,如果普通函数的参数只有一个高阶函数,且位于最右边,则可以直接提出来,不用写在括号内,并将括号省略:


fun getDataFromNet(onSuccess: (data: String) -> Unit) {
// do something
}

fun main() {
// 这里调用时省略了 ()
getDataFromNet {
println(it)
}
}

即使同时有多个参数也不影响把最右边的提出来,只是此时 () 不能省略:


fun getDataFromNet(arg: String, onSuccess: (data: String) -> Unit) {
// do something
}

fun main() {
getDataFromNet("123") {
println(it)
}
}

关于使用 lambda 后能把代码简化到什么程度,可以看看这篇文章举的安卓中的点击事件监听的例子


从最初的


image.setOnClickListener(object: View.OnClickListener {
override fun onClick(v: View?) {
gotoPreview(v)
}
})

简化到只有一行:


image.setOnClickListener { gotoPreview(it) }

所以它有什么用?


更简洁的回调


在上文中,我们举了使用 lambda 表达式后可以把点击事件监听省略到只有一行的程度,但是这里仅仅只是使用。


众所周知,安卓中写事件监听的代码需要一大串:


public interface OnClickListener {
void onClick(View v);
}

public void setOnClickListener(@Nullable OnClickListener l) {
if (!isClickable()) {
setClickable(true);
}
getListenerInfo().mOnClickListener = l;
}

如果我们使用高阶函数配合 lambda 则只需要:


var mOnClickListener: ((View) -> Unit)? = null

fun setOnClickListener(l: (View) -> Unit) {
mOnClickListener = l;
}

调用时也只需要:


setOnClickListener {
// do something
}

其实,我们最开始举的封装网络请求的例子就是一个很好的事例,如果不使用高阶函数,那么我们为了实现网络请求成功后的回调,还得额外多写一些接口类,得益于高阶函数,我们只需要这样即可:


fun getDataFromNet(onSuccess: (data: String) -> Unit) {
val requestResult = "我是从网络请求拿到的数据"

onSuccess(requestResult)
}

fun main() {
getDataFromNet {
println("获取到数据:$it")
}
}

让函数更加多样


有时候,我们可能会有一些比较特殊的需要多重校验的嵌套场景,如果不使用高阶函数的话,可能需要这样写:


fun checkName(data: String): Boolean {
return true
}

fun checkAge(data: String): Boolean {
return true
}

fun checkGender(data: String): Boolean {
return true
}

fun checkId(data: String): Boolean {
return true
}

fun postData(data: String) {

}

fun main() {
val mockData = ""

if (checkName(mockData)) {
if (checkAge(mockData)) {
if (checkGender(mockData)) {
if (checkId(mockData)) {
postData(mockData)
}
}
}
}
}

如果使用高阶函数,则可以这么写:


fun checkName(data: String, block: (data: String) -> Unit) {
// if true
block(data)
}

fun checkAge(data: String, block: (data: String) -> Unit) {
// if true
block(data)
}

fun checkGender(data: String, block: (data: String) -> Unit) {
// if true
block(data)
}

fun checkId(data: String, block: (data: String) -> Unit) {
// if true
block(data)
}

fun postData(data: String) {

}

fun main() {
val mockData = ""

checkName(mockData) {
checkAge(it) {
checkGender(it) {
checkId(it) {
postData(it)
}
}
}
}
}

额……好像举的这个例子不太恰当,但是大概就是这么个意思。


更好的控制函数执行


在我写的项目中还有一个比上面一个更加奇怪的需求。


这个程序有个后台进程一直在分别请求多个状态,且每个状态返回的数据类型都不同,我们需要分别将这些状态全部请求完成后打包成一个单独的数据,而且这些状态可能并不需要全部都请求,需要根据情况实时调整请求哪些状态,更烦的是,会有一个停止状态,如果收到停止的指令,我们必须立即停止请求,所以不能等待所有请求完成后再停止,必须要立即停止当前所在的请求。如果直接写你会怎么写?


听见都头大了是吧,但是这个就是我之前写工控程序时经常会遇到的问题,需要有一个后台进程实时轮询不同从站的不同数据,并且由于串口通信的特性,如果此时有新的指令需要下发,必须立即停止轮训,优先下发新指令。


所以我是这样写的:


fun getAllStatus(needRequestList: List<Any>, isFromPoll: Boolean = false): StatusData {

val fun0: () -> ResponseData.Status1 = { syncGetStatus1() }
val fun1: () -> ResponseData.Status2 = { syncGetStatus2() }
val fun2: () -> ResponseData.Status3 = { syncGetStatus3() }
val fun3: () -> ResponseData.Status4 = { syncGetStatus4() }
val fun4: () -> ResponseData.Status5 = { syncGetStatus5() }
val fun5: () -> ResponseData.Status6 = { syncGetStatus6() }
val fun6: () -> ResponseData.Status7 = { syncGetStatus7() }
val fun7: () -> Int = { syncGetStatus8() }
val fun8: () -> Int = { syncGetStatus9() }

val funArray = arrayOf(
fun0, fun1, fun2, fun3, fun4, fun5, fun6, fun7, fun8
)

val resultArray = arrayListOf<Any>()

for (funItem in funArray) {
if (isFromPoll && (isPauseNwPoll() || !KeepPolling)) throw IllegalStateException("轮询被中断")
if (funItem in needRequestList) resultArray.add(funItem.invoke())
}

// 后面的省略
}

可以看到,我们把需要请求的函数全部作为高阶函数存进 funArray 数组中,然后遍历这个数组开始挨个执行,并且每次执行时都要判断这个请求是否需要执行,以及当前是否被中断请求。


得益于高阶函数的特性,我们可以方便的控制每个函数的执行时机。


总结


因为我讲的比较浅显,读者可能看起来会一头雾水,所以这里推荐结合下面列出的参考资料的文章一起看,同时自己上手敲一敲,就能很好的理解了。


参考资料



  1. High-order functions and lambdas

  2. 头等函数

  3. Kotlin Jetpack 实战 | 04. Kotlin 高阶函数

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

Android AIDL通信DeadObjectException解决

使用过AIDL进行跨进程通信的同学,肯定遇到过DeadObjectException这个崩溃,那么这个崩溃是怎么来的,我们又该如何解决它呢?今天这篇文章就来聊一聊。 崩溃来源 首先,这个崩溃的意思是,多进程在进行跨进程Binder通信的时候,发现通信的Bind...
继续阅读 »

使用过AIDL进行跨进程通信的同学,肯定遇到过DeadObjectException这个崩溃,那么这个崩溃是怎么来的,我们又该如何解决它呢?今天这篇文章就来聊一聊。


崩溃来源


首先,这个崩溃的意思是,多进程在进行跨进程Binder通信的时候,发现通信的Binder对端已经死亡了。


抛出异常的Java堆栈最后一行是BinderProxy.transactNative,所以我们从这个方法入手,看看崩溃是在哪里产生的。


很显现,transactNative对应的是一个native方法,我们找到对应的native方法,在android_util_Binder.cpp中。


static jboolean android_os_BinderProxy_transact(JNIEnv* env, jobject obj,
jint code, jobject dataObj, jobject replyObj, jint flags) // throws RemoteException
{
// 如果data数据为空,直接抛出空指针异常
if (dataObj == NULL) {
jniThrowNullPointerException(env, NULL);
return JNI_FALSE;
}
// 将Java层传入的对象转换为C++层的指针,如果转换出错,中断执行,返回JNI_FALSE
Parcel* data = parcelForJavaObject(env, dataObj);
if (data == NULL) {
return JNI_FALSE;
}
Parcel* reply = parcelForJavaObject(env, replyObj);
if (reply == NULL && replyObj != NULL) {
return JNI_FALSE;
}
// 获取C++层的Binder代理对象指针
// 如果获取失败,会抛出IllegalStateException
IBinder* target = getBPNativeData(env, obj)->mObject.get();
if (target == NULL) {
jniThrowException(env, "java/lang/IllegalStateException", "Binder has been finalized!");
return JNI_FALSE;
}
// 调用BpBinder对象的transact方法
status_t err = target->transact(code, *data, reply, flags);
// 如果成功,返回JNI_TRUE,如果失败,返回JNI_FALSE
if (err == NO_ERROR) {
return JNI_TRUE;
} else if (err == UNKNOWN_TRANSACTION) {
return JNI_FALSE;
}
// 处理异常情况的抛出
signalExceptionForError(env, obj, err, true /*canThrowRemoteException*/, data->dataSize());
return JNI_FALSE;
}

可以看到,这个方法主要做的事情是:



  • Java层传入的data,转换成C++层的指针

  • 获取C++层的Binder代理对象

  • 调用BpBinder对象的transact方法

  • 处理transact的结果,抛出异常


接下来我们看看,BpBindertransact方法。


status_t BpBinder::transact(uint32_t code, const Parcel& data, Parcel* reply, uint32_t flags)
{
// 首先判断Binder对象是否还存活,如果不存活,直接返回DEAD_OBJECT
if (mAlive) {
...
status = IPCThreadState::self()->transact(binderHandle(), code, data, reply, flags);
return status;
}
return DEAD_OBJECT;
}

transact的具体方法,我们这里先不讨论。我们可以看到,在这里会判断当前的Binder对象是否alive,如果不alive,会直接返回DEAD_OBJECT的状态。


返回的结果,在android_util_BindersignalExceptionForError中处理。


void signalExceptionForError(JNIEnv* env, jobject obj, status_t err,
bool canThrowRemoteException, int parcelSize)
{
// 省略其他异常处理的代码
....
case DEAD_OBJECT:
// DeadObjectException is a checked exception, only throw from certain methods.
jniThrowException(env, canThrowRemoteException
? "android/os/DeadObjectException"
: "java/lang/RuntimeException", NULL);
break;
}

这个方法,其实包含非常多异常情况的处理。为了看起来更清晰,这里我们省略了其他异常的处理逻辑,只保留了DEAD_OBJECT的处理。可以很明显的看到,在这里我们抛出了DeadObjectException异常。


解决方法


通过前面的源码分析,我们知道DeadObjectException是发生在,当我们调用transact接口发现Binder对象不再存活的情况。


解决方案也很简单,就是当这个Binder对象死亡之后,不再调用transact接口。


方法1 调用跨进程接口之前,先判断Binder是否存活


这个方案比较简单粗暴,就是在多有调用跨进程接口的地方,都加一个Binder是否存活的判断。


        if (mService != null && mService.asBinder().isBinderAlive()) {
mService.test();
}

我们来看下isBinderAlive的源码,就是判断mAlive标志位是否为0。


bool BpBinder::isBinderAlive() const
{
return mAlive != 0;
}

方法2 监听Binder死亡通知


先初始化一个DeathRecipient,用来监听死亡通知。


    private IBinder.DeathRecipient mDeathRecipient = new IBinder.DeathRecipient() {

@Override
public void binderDied() {
// 解绑当前监听,重新启动服务
mService.asBinder().unlinkToDeath(mDeathRecipient, 0);
if (mService != null)
bindService(new Intent("com.service.bind"), mService, BIND_AUTO_CREATE);
}
};

在这个死亡监听里,我们可以选择几种处理方式:



  1. 什么都不做,直接将mService设置为空

  2. 再次尝试启动和绑定服务


onServiceConnected方法中,注册死亡监听:


public void onServiceConnected(ComponentName name, IBinder service) {          
mService = IServiceInterface.Stub.asInterface(service);
//获取服务端提供的接口
try {
// 注册死亡代理
if(mService != null){
service.linkToDeath(mDeathRecipient, 0);
}
} catch (RemoteException e) {
e.printStackTrace();
}
}

总结


跨进程通信时,无法避免出现Binder对端挂掉的情况,所以在调用相关通信接口时,一定要判断连接是否可用,否则就会出现DeadObjectException的崩溃。


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

Flutter中的异步执行策略

在Flutter中,如何执行一段延迟执行的异步代码?我们可以找到下面这些方法。 scheduleMicrotask Future.microtask Future Future.delayed Timer.run WidgetsBinding.addPost...
继续阅读 »

在Flutter中,如何执行一段延迟执行的异步代码?我们可以找到下面这些方法。



  • scheduleMicrotask

  • Future.microtask

  • Future

  • Future.delayed

  • Timer.run

  • WidgetsBinding.addPostFrameCallback

  • SchedulerBinding.addPostFrameCallback


你可能会说,这是相当多的选择,但是它们彼此之间有些什么异同呢?


Event Loop and Multithreading


Dart是一个单线程模型。但是你的Flutter应用同样可以同时做多件事情,这就是「Event Loop」发挥作用的地方。Event Loop是一个无尽的循环,它执行预定的events。这些events(或者只是代码块)必须是轻量级的,否则,你的应用程序会感觉卡顿。


每个event,如按下按钮或网络请求,都被安排在一个事件队列中,等待被事件循环捡起并执行。这种设计模式在UI和其他处理任何类型事件的系统中相当常见。


在Dart的单线程模型中,还有一个Microtask。它组成了Event Loop中的另一一个队列,即Microtask Queue。关于这个队列你唯一需要记住的是,在事件本身被执行之前,所有安排在Microtask Queue的任务都将在Event Loop循环的一次迭代中被执行。
image.png
可以通过这个链接查看更多内容:dart.cn/articles/ar…


Events


任何进入event queue的东西都被称之为Event。这是Flutter中调度异步任务的默认方法。为了调度一个Event,我们把它添加到event queue中,由Event Loop来接收。这种方法被许多Flutter机制所使用,如I/O、手势事件、Timer等。


Timer


Timer是Flutter中异步任务的基础。它被用来安排event queue中的代码执行,无论是否有延迟执行的需要。由此产生的有趣的事实是,如果当前队列很忙,你的定时器将永远不会被执行,即使时间到了。


Timer.run(() {
print("Timer");
});


Future and Future.delayed


Future是Dart中使用的非常广泛的一个异步方法,它的内部实现,实际上也就是基于Timer的。


Future<void>(() {
print("Future Event");
});

Future<void>.delayed(Duration.zero, () {
print("Future.delayed Event");
});

它的内部实现如下。
image.png


Microtasks


如前所述,所有调度的microtasks都会在下一个调度的Event之前执行。建议避免使用这个队列,除非绝对需要异步执行代码,而且要在event queue的下一个事件之前处理。你也可以把这个队列看成是属于前一个事件的任务队列,因为它们将在下一个事件之前完成。如果这个队列不断膨胀,就会完全冻结你的应用程序,因为它必须先执行这个队列中的所有内容,然后才能进行其事件队列的下一次迭代,例如处理用户输入,甚至渲染应用程序本身。


scheduleMicrotask


顾名思义,在microtask queue中调度一个块代码。与Timer类似,如果出错,会使应用程序崩溃。


scheduleMicrotask(() {
print("Microtask");
});


Future.microtask


与我们之前看到的类似,但它将我们的microtask包裹在一个try-catch块中,以一种漂亮而干净的方式返回执行结果或异常。


Future<void>.microtask(() {
print("Microtask");
});
复制代码

它的内部实现如下。
image.png


Post Frame Callback


前面两种方法只涉及到lower-level Event Loop,而现在我们要转到Flutter领域。这个Callback会在渲染管道完成时被调用,所以它与widget的生命周期相管理。当它被调度时,它只会被调用一次,而不是在每一帧都回调。使用addPostFrameCallback方法,你可以安排一个或多个回调,在界面渲染完成后被调用。


所有预定的Callback将在frame结束时按照它们被添加的顺序执行。到这个回调被调用的时候,可以保证Widget的构建过程已经完成。通过一些方法,你甚至可以访问Widget(RenderBox)的布局信息,比如它的大小,并做其他的一些事情。Callback本身将在正常的event queue中运行,Flutter默认使用该队列来处理几乎所有事情。


SchedulerBinding


这是一个负责绘图回调的mixin类,实现了我们感兴趣的方法。


SchedulerBinding.instance.addPostFrameCallback((_) {
print("SchedulerBinding");
});


WidgetsBinding


我特意包括这个,因为它经常和SchedulerBinding一起被提及。它从SchedulerBinding中继承了这个方法,并有与我们的主题无关的一些额外方法。一般来说,你使用SchedulerBinding或WidgetsBinding并不重要,两者将执行位于SchedulerBinding中的完全相同的代码。


WidgetsBinding.instance.addPostFrameCallback((_) {
print("WidgetsBinding");
});


总结


由于我们今天学到了很多理论知识,我强烈建议大家多玩一会儿,以确保我们能正确地掌握它。我们可以在之前的initState中使用下面的代码,并尝试预测它将以何种顺序被执行,这并不是一件看起来很容易的事情。


SchedulerBinding.instance.addPostFrameCallback((_) {
print("SchedulerBinding");
});

WidgetsBinding.instance.addPostFrameCallback((_) {
print("WidgetsBinding");
});

Timer.run(() {
print("Timer");
});

scheduleMicrotask(() {
print("scheduleMicrotask");
});

Future<void>.microtask(() {
print("Future Microtask");
});

Future<void>(() {
print("Future");

Future<void>.microtask(() {
print("Microtask from Event");
});
});

Future<void>.delayed(Duration.zero, () {
print("Future.delayed");

Future<void>.microtask(() {
print("Microtask from Future.delayed");
});
});

输出结果如下所示。


I/flutter (31989): scheduleMicrotask
I/flutter (31989): Future Microtask
I/flutter (31989): SchedulerBinding
I/flutter (31989): WidgetsBinding
I/flutter (31989): Timer
I/flutter (31989): Future
I/flutter (31989): Microtask from Event
I/flutter (31989): Future.delayed
I/flutter (31989): Microtask from Future.delayed

现在我们了解了这么多细节,你可以对如何安排你的代码做出深思熟虑的决定。作为一个经验法则,如果你需要你的上下文或与Layout或UI相关的东西,请使用addPostFrameCallback。在任何其他情况下,用Future或Future.delayed在标准的event queue中进行调度应该是足够的。microtask queue是非常小众的东西,你可能永远不会遇到,但它仍然值得了解。当然,如果你有一个繁重的任务,你就会考虑创建一个Isolate。


翻译自——oleksandrkirichenko.com/blog/delaye…


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

ChatGPT ! 二次元老婆!活的!活的!真的已经实现出来啦

若有侵权,请联系删帖 各位我现在的心情,太激动了,真的简直太激动了,甚至差点抽过去。真的我实在不能用语言描述我现在兴奋的心情 二次元老婆,纸片人老婆真的可以来了,真的可以活过来啦,活的,活的二次元老婆,国外大神做出来啦 (^o^)/ 事情是这样的 我刚刚看的...
继续阅读 »

7b2014c87e3b47e7a1b5ac9f29712b6c_noop.png



若有侵权,请联系删帖



各位我现在的心情,太激动了,真的简直太激动了,甚至差点抽过去。真的我实在不能用语言描述我现在兴奋的心情


二次元老婆,纸片人老婆真的可以来了,真的可以活过来啦,活的,活的二次元老婆,国外大神做出来啦 (^o^)/


事情是这样的


我刚刚看的新闻,地址在这里:程序猿用ChatGPT创造的虚拟老婆,被真女友强制「安乐死」


国外这个小哥真的让纸片人老婆活过来啦,真的,她有自己你设定的性格,有自己的口头禅,而且还有摄像头可以事实识别你得东西,主动跟你会说话,还有随着说话事实切换自己的画面,这些都是事实演算出来的


是的,大家猜的不错,这是现在大火的 ChatGPT。整个技术层面我不是太懂,我简单说一下:



  • 用摄像头实时检测你的动作,识别物体

  • 用 ChatGPT 根据你的动物和出现的物体,生成对话

  • 可以用那种那爽上天的语调跟你说话

  • 用 Stable Diffusion2 实时生成老婆图像


真的,各位看官,这是一个大生意,是所有二刺猿们的终极梦想,现在有人做出来了,各位看官要是有大佬、投资家、高管,请马上、立刻、动身去美国找到这个小哥,买断这个技术或者马上跟进开发


我要活过来的二次元老婆,一刻钟都等不了了,真的,求求你们啦,求你们快点吧,呜呜呜呜呜呜呜,一年 1 个 W 都行,我想要呀 ε(┬┬﹏┬┬)3


请让我隆重的跟各位介绍二次元老婆


1. 不仅外观打扮随时切换、互动也非常迅速


9e49ec3672b24f71b1eb9328cd9b55b5_noop.gif


看看,看看,老婆是会动的,会跟你说话的,好想要,好想 (/≧▽≦)/


2. 甚至还能“看”见你做的事情,并对它进行评价



英雄联盟?好恶心!不过好吧,我可以陪你玩



b42b8c0ea337481d9c2b2b3c5d78741c_noop.gif


3. 老婆可以打情骂俏


震惊不震惊,打情骂俏 哎,想不想要,我想要啊 o(*≧▽≦)ツo(*≧▽≦)ツo(*≧▽≦)ツo(*≧▽≦)ツo(*≧▽≦)ツ


和你得交流并不局限于文字,老婆不仅有自己的二次元头像,还有甜美的嗓音
你】



“要不要去吃汉堡王?”
老婆的回答是:哒咩!
它有股闻着像放久了的薯条的味道,而且他们的可乐从来不给续杯。我要去Wendy’s。



在这个过程中,老婆还会根据两人的对话内容切换头像风格,问候时还是可爱的萝莉风,拒绝时就秒变御姐


4. 还有更多


真的还有更多,二次元老婆会主动回应你的各种行为,真的,我就不搬啦,大家可以去上面的地址看原文,我真的不能搬运啦


我的真的从来不发这种东西,但是这次真的 戳中 了我的弱点,被暴击啦 (づ。◕‿‿◕。)づ


项目可行性


真的,我认为这个项目非常有可行性,根据文章的描述,这该技术最大的支出是支持实时演算的服务器费用,2 周 1000 刀


要是换到国内来说,比如头条这样的大厂,来搭建服务器集群专门来提供服务,成本是可以分担下来的,最多就是费流量,提供包月服务,一个月 99 不过分吧


二次元老婆,活的,真不想要,别说 99,199 我都掏钱啊


要是再把神经网络,各种机器学习算大加进去,让你的老婆可以不停的学习各种妹子的性格,香不香,想想就香甜无比啊


另外这个技术具有巨大的商品加持优势,比如说手机,红魔 8pro 大家知不知道,要是让 mora 可以这样活过来,按照你设定的性格跟你过日子,这样的手机,谁不想买啊


这就是妥妥的 二次元社区 最大强的 流量密码啊,各种大大,要是能看到我的分享,请赶快跟进啊,求求你们啦 ヘ|・∀・|ノ*~●


作者:前行的乌龟
来源:juejin.cn/post/7188167873011908665
收起阅读 »

一次关于ChatGPT数据分析的失败探索

前言 最近ChatGPT的热潮席卷全球,衍生出其与职业危机的一系列讨论,引发了不少人的焦虑。 以上是网上获取的一份可能被威胁到的岗位清单(程序员总是在挨打的前沿),大家也或多或少体验过了让它写代码、改bug或者进行创作,我看到数据分析也是这份清单的前列,所以...
继续阅读 »

前言


最近ChatGPT的热潮席卷全球,衍生出其与职业危机的一系列讨论,引发了不少人的焦虑。


e34ba832760743d546255cae58e6ef0.png


以上是网上获取的一份可能被威胁到的岗位清单(程序员总是在挨打的前沿),大家也或多或少体验过了让它写代码、改bug或者进行创作,我看到数据分析也是这份清单的前列,所以想着对ChatGPT进行一次有关数据分析的探索。

分析未半而中道崩殂


做这次分析其实还有一个原因,我昨晚在油管上刷到了一个使用ChatGPT做证券分析分析的视频,其中这位博主的对话中提供了比亚迪的财报url,gpt似乎是进行了能对url内容进行识别。


image.png


gpt的学习数据截止于2021年9月并且非联网的,如果问一些实时性的问题它就可能跟你瞎掰了,但是能识对url内容进行识别那不就是联网了吗(可能gpt偷偷进化了)。
于是我准备了一份【2020年死亡公司名单】

image.png


excuse me?什么情况??于是我在网上找了半天,看到了tw上有人用Google sheets的形式提供数据,但是得出了错误的结果

c6dcc12df655324e69e2958c705120e.png


啪的一下,很快啊,我马上导入到google sheets,gpt立马给我返回了一系列分析。

image.png


不过先别急着高兴,来对比一下表格里的数据看看

image.png


错的还是蛮离谱的,我再问了一遍,它甚至都不愿意敷衍我

image.png


于是我又拿油管那位博主的财报url进行测试,并对返回数据与财报进行验证。

image.pngimage.png


最后得出结论,gpt返回的分析与我所提供的url没有一分钱关系,所以数据也是错误的。

柳暗花明又一村


既然url无法访问,那我们只能通过简单粗暴直接给数据的方式了。


image.png


让我们来看一下处理结果,gpt对这份数据的处理是没问题的,我们的输入数据是无序且带有时分的,理解无误并帮我们做了排序处理。

image.png


不过这样限制非常大,可以看到这里的数据进行了更变,这里使用的是b站狂飙每个相关视频每日的播放数据,原因也很明显,受于token的限制,原先的数据很容易就过长了。所以直接输入数据并不是一个理智的选择。

君子善假于物也


通过两种尝试,gpt现在还不能把饭直接喂我们嘴里,把数据交给它可行性低,所以我们只能配合excel进行操作,这比较适用于一些经常使用excel的人群,比如我经常需要处理重复或者繁琐的任务,但是又不会写代码,这个时候就可以把任务交给gpt。


image.png


image.png


总结


这次对数据分析的探索其实和预期相差很大,不过也感受的了gpt的潜力,如果联网能力将指数提升,就目前而言它可能是一个高效率的辅助工具。比如一个丝毫不懂vba或者excel的人,可以在gpt的协助下使用excel做一些数据分析、数据可视化的工作,这对以前来说可能需要花大量的时间百度或者向人请教。gpt的出现无疑是让效率提升了数倍,可以让非专业人士跨入一些专业的初级门槛,那相关的专业人员是否就会被取代呢?其实取代人类并不是AI而是会使用AI的人类,所以不论是哪个行业,都需要不断学习和拥抱AI技术。


作者:Defineee
来源:juejin.cn/post/7207737674216472636
收起阅读 »

国内有哪些对标 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

收起阅读 »