<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[jacoby_fire的博客]]></title><description><![CDATA[春蚕不念秋丝，夏蝉不知冬雪。枯荣不为人命，盛衰不由王权。]]></description><link>https://blog.youkuaiyun.com/jacoby_fire</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; jacoby_fire]]></copyright><item><title><![CDATA[用canvas整个烟花效果]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/139471086</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/139471086</guid><author>jacoby_fire</author><pubDate>Wed, 05 Jun 2024 14:26:44 +0800</pubDate><description><![CDATA[闲来无事，想着随便捣鼓一点东西玩玩。]]></description><category></category></item><item><title><![CDATA[用react搞定一个大模型对话效果]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/135847700</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/135847700</guid><author>jacoby_fire</author><pubDate>Thu, 25 Jan 2024 17:08:00 +0800</pubDate><description><![CDATA[最近AI盛行，关注几个大模型网站都能发现，跟AI对话的时候，返回的文本是逐字展示的，就给人一种AI边解析边返回的感觉（不知道是为了装X还是真的需要这样）。第一个：用个定时器，把时差设置为变量delay，每次都随机生成delay，固定展示三个字符，直到展示完全。简单来讲就是，速度不固定，每次展示长度固定。由于我这边后端返回是一次性返回所有回复，而天煞的产品经理要求做出逐字展示效果，于是我只能纯前端控制展示。整体实现并不难，但要做好每个细节还是需要一点思考的，ok，，我要拿去装逼了，拜拜！]]></description><category></category></item><item><title><![CDATA[封装一个丝滑的聊天框组件]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/128301592</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/128301592</guid><author>jacoby_fire</author><pubDate>Tue, 13 Dec 2022 17:21:31 +0800</pubDate><description><![CDATA[这里没有写滚动条的处理逻辑，手写一下： 用ref绑定滚动条，发送消息or拉取历史记录，需要计算滚动条滚动的高度并作出对应处理。应公司业务要求，需要做个聊天机器人，要适应不同的业务场景，大概就跟淘宝客服类似，发送消息，机器人自动回复。]]></description><category></category></item><item><title><![CDATA[在antd tree组件基础上封装一个文件目录树]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/121498272</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/121498272</guid><author>jacoby_fire</author><pubDate>Tue, 23 Nov 2021 17:31:30 +0800</pubDate><description><![CDATA[背景
最近公司所做的项目中有个文档管理的需求，需要有个目录来展示不同的文档。可以对文档目录进行添加、重命名、删除、切换等操作。但是antd的tree组件不能完全满足需要，于是就进行了二次封装。
先看看效果图：


难点
主要的难点是这个hover按钮，之前没什么思路。后来想一想，可以放在数据中的title里面，antd中的数据都可以将一段jsx放进去。如下：
const TreeTitle = (props) =&gt; {
      const { title, id } = props;
      ]]></description><category></category></item><item><title><![CDATA[记录一个react+antd中使用数组循环出checkboxgroup的过程]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/118728323</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/118728323</guid><author>jacoby_fire</author><pubDate>Wed, 14 Jul 2021 15:35:34 +0800</pubDate><description><![CDATA[记录一个react+antd中使用数组循环出checkboxgroup的过程
前段时间项目中遇到一个需求，效果如下图：

这个红框里面的是通过一个数组渲染出来的，后端给过来的数据格式是一个一维数组：
[{
	title: '意图',
	label: '搭讪'，
	value: '1'
}, {
	title: '方向',
	label: '出'，
	value: '3’
}, {
	title: '意图',
	label: '搭讪'，
	value: '1'
}]

前端需要将数组通过title来升级为二维]]></description><category></category></item><item><title><![CDATA[记录一个eslint配置问题]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/117417625</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/117417625</guid><author>jacoby_fire</author><pubDate>Mon, 31 May 2021 15:35:29 +0800</pubDate><description><![CDATA[前端时间在项目中加上eslint，遇到了一个问题。如下：

问题的原因这篇文章解释的很详细：
https://segmentfault.com/a/1190000021803437
这里我发现文章中第三个文案是没有效果的。我在自己的项目中.eslintrc.js文件中加上如下配置就可以解决这个问题：
endOfLine: 'auto',

位置如下图：

加上之后，项目中碍眼的波浪线全都消失，非常简单就解决这个问题，希望对你有帮助！

...]]></description><category></category></item><item><title><![CDATA[nlp标注系统前端功能实现]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/115700268</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/115700268</guid><author>jacoby_fire</author><pubDate>Wed, 14 Apr 2021 17:01:18 +0800</pubDate><description><![CDATA[nlp标注系统前端功能实现
简介
由于目前是在AI部门任职前端，需要给部门的标注人员做一个标注系统。做之前感觉挺简单，真正编码的时候发现有些细节的地方还挺复杂的。
简单做一下需求分析，列举一下主要功能点：

导入原始数据（json），例如：

	[
		{
        	"text": "【最终指导】20首开PPN001，目前边际3.99, 3.9以内已有超一半的量，预期3.8，请大家于17点前反馈我最终标位。",
     	    "labels": []
   		 },
	    {
	    ]]></description><category></category></item><item><title><![CDATA[奔跑吧骚年，记住你来时的样子！]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/114131966</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/114131966</guid><author>jacoby_fire</author><pubDate>Fri, 05 Mar 2021 10:18:31 +0800</pubDate><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp;时间飞逝，如你惊鸿一瞥，如白驹过隙。
&nbsp;&nbsp;&nbsp;&nbsp;突然想写下来此时的心情，却不知道如何下笔。
&nbsp;&nbsp;&nbsp;&nbsp;这周终于鼓起勇气，在HR-X上提了离职。这一周觉得很难受，很讨厌这种感觉，这种离别让人深刻，就像高考时，就像大学毕业时，面对当下美好的时光面对身旁很好的人，却不得不因为某些原因要离开。总归让人不舍。
&nbsp;&nbsp;&nbsp;&nbsp;两年前的面试还历历在目，记得当时做了笔]]></description><category></category></item><item><title><![CDATA[apply,call,bind详解]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/112309452</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/112309452</guid><author>jacoby_fire</author><pubDate>Thu, 07 Jan 2021 15:35:12 +0800</pubDate><description><![CDATA[apply，call，bind详解
三者区别

apply，call，bind都能改变函数内部this指向
apply，call会运行函数且返回函数结果，区别只是参数传递方式不一样
bind不会运行函数，只绑定this且传参，依然返回一个函数

一、apply源码实现
实现之前，先写一下我们的测试案例
	var obj = {
		a: 1,
		b: 2
	}
	function add(c, d){
		return this.a + this.b + c + d;
	}
	console.log(ad]]></description><category></category></item><item><title><![CDATA[webpack探寻之路]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/109080405</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/109080405</guid><author>jacoby_fire</author><pubDate>Wed, 28 Oct 2020 14:30:21 +0800</pubDate><description><![CDATA[webpack探寻之路
准备工作： 全局安装webpack-cli 和webpack
1、核心概念
		entry，output，loader，plugin，mode

const {
    resolve
} = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'buil]]></description><category></category></item><item><title><![CDATA[前端面试之vue篇]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/108295013</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/108295013</guid><author>jacoby_fire</author><pubDate>Mon, 31 Aug 2020 16:42:23 +0800</pubDate><description><![CDATA[1、简述vue2.0+的基本原理

延伸：




vue2
vue3




defineProperty
proxy


需要做递归去添加对象每个属性的setter和getter
可以直接监听对象的变化


需要对数组操作做单独适配
兼容性不好


2、vue的生命周期

3、vuex的原理

...]]></description><category></category></item><item><title><![CDATA[webview踩坑之数据无法更新]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/107285848</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/107285848</guid><author>jacoby_fire</author><pubDate>Sat, 11 Jul 2020 16:11:08 +0800</pubDate><description><![CDATA[这两天项目中遇到了一个问题，觉得挺有意思，记录一下。
背景：
	项目是混合应用，原生开发嵌入H5webview。H5是用的vue多页应用结构。

问题描述：
	需求中有一个页面有个入口，需要跳转到项目另一个url。是调用原生的方法跳转到之前开发的页面。原生的逻辑是新开一个webview去跳转。这里我们称原webview为w1, 新开的为w2。
	在W2中，我们有一些操作会导致数据有变动，这时我们需要返回到W1中，返回的操作也是调取原生方法去关闭W2，对W1没有任何操作。导致W1的数据不会重新请求刷新，展示的]]></description><category></category></item><item><title><![CDATA[贴一个刚做的新手引导页]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/88953193</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/88953193</guid><author>jacoby_fire</author><pubDate>Mon, 01 Apr 2019 17:41:18 +0800</pubDate><description><![CDATA[前阵子有个新手引导的需求，本来同事说用UI框架的modal框做，想了想感觉下一步的动作太生硬了，干脆就自己动手写了写，效果还不错。
主要用css animation做跳转动画，用绝对定位定位引导框
效果如下：

vue文件
&lt;!-- 新手引导 --&gt;
&lt;template&gt;
  &lt;div&gt;
    &lt;div class="model"&gt;
      &...]]></description><category></category></item><item><title><![CDATA[如何快速的用html和css写静态页面]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/88746353</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/88746353</guid><author>jacoby_fire</author><pubDate>Fri, 22 Mar 2019 17:24:59 +0800</pubDate><description><![CDATA[这两个星期，又写了一些静态页面，感觉比之前要快多了，下面来总结总结写静态页面的时候要注意的一些问题，以及如何更高效的搞定需求。
	
	在团队作战中，规范尤其重要，一个项目需求出来之后，经历需求分析，产品出原型，UI出图，前端写页面，后台处理接口数据库等等。每一个环节都至关重要，缺一不可。这里我们讨论的是将UI图转换为页面的过程。
	
	在出图之前，我们应该跟UI有个沟通，沟通的细节有：
		1、...]]></description><category></category></item><item><title><![CDATA[tradingview使用心得]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/83376937</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/83376937</guid><author>jacoby_fire</author><pubDate>Thu, 25 Oct 2018 11:26:34 +0800</pubDate><description><![CDATA[因为公司目前是在做一个交易所的项目，页面中需要用到k线图，之前用了echart的k线，太过简陋了，参考了另外几个同级网站，决定用tradingview这个专业的股票交易所类的图表库。
从上周开始就研究tradingview，一直到昨天才算是勉强能够在本地运行，真的是不容易。下面来说说使用过程中遇到的一些坑。
1、tradingview虽然是开源免费，可也是仅限于一些基本的图表服务，但这也基本上够用...]]></description><category></category></item><item><title><![CDATA[冒泡排序与快速排序]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/81700757</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/81700757</guid><author>jacoby_fire</author><pubDate>Wed, 15 Aug 2018 11:10:19 +0800</pubDate><description><![CDATA[昨天，闲下来看了下冒泡排序与快速排序的区别。 
两者区别还是挺大，思路完全不一样。 
我们先看冒泡排序，冒泡是通过比较相邻两个元素的大小来调换顺序，循环下去。代码如下



// 冒泡排序
    function bubble(arr) {
        let n = 0
        for (var i = arr.length - 1; i &amp;gt;= 0; i--) {
     ...]]></description><category></category></item><item><title><![CDATA[使用gulp来对app进行打包构建]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/79524641</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/79524641</guid><author>jacoby_fire</author><pubDate>Mon, 12 Mar 2018 11:27:30 +0800</pubDate><description><![CDATA[最近APP项目出了一个切换产品的需求，就是要通过构建来切换App的皮肤、logo、文字、图片等，出了逻辑代码和页面结构，基本上其他的都要可切换。

一番考虑过后，果断使用了gulp来实现。

思路是这样： 
    在App项目文件夹下新建一个目录，里面放上四个目录，分别是img,scss,i18n，config。在gulpfile.js中，有如下代码：



//切换产品
gulp.task('...]]></description><category></category></item><item><title><![CDATA[使用canvas做一个抽奖转盘]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/79074531</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/79074531</guid><author>jacoby_fire</author><pubDate>Tue, 16 Jan 2018 14:31:38 +0800</pubDate><description><![CDATA[最近，公司在每周五下午会有一次个人分享沙龙。上周我自愿参加了，因为每周都是由当前主讲人来决定下次的主讲人，于是就有做一个抽奖页面的想法，话不多说，先看效果。




点击抽奖之后，转盘的速度会由慢到快，然后由快到慢再停止，整个过程持续时间是3s,下面是代码



html lang="en">
head>
    meta charset="UTF-8">
    title>抽奖title>]]></description><category></category></item><item><title><![CDATA[移动端适配方案]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/78772924</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/78772924</guid><author>jacoby_fire</author><pubDate>Mon, 11 Dec 2017 15:10:47 +0800</pubDate><description><![CDATA[https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651553246&idx=3&sn=698b920aaaf394c27a3475a0b6411ceb&chksm=8025aa1fb7522309ae2df525aa496e9207f62ac657e66654ff627d03da652ce29d7fd39da5ce&scene=0&key]]></description><category></category></item><item><title><![CDATA[ionic国际化 - translte]]></title><link>https://blog.youkuaiyun.com/jacoby_fire/article/details/78770414</link><guid>https://blog.youkuaiyun.com/jacoby_fire/article/details/78770414</guid><author>jacoby_fire</author><pubDate>Mon, 11 Dec 2017 10:49:18 +0800</pubDate><description><![CDATA[最近在整理项目中的国际化json文件，觉得这个需要总结一下。目前我们是用ionic做的项目，之前在网上找的方案，是直接用angular的translate服务，配了两个json文件，一个中文包，一个英文包，结果在ionic serve 的时候没问题，但是打包在手机上运行的时候却行不通，页面显示全是一堆国际化的key，简直是醉了。百度什么的查了一下，发现这个问题是存在的，目测是ionic的bug。于是]]></description><category></category></item></channel></rss>