东逝水

原生EventSource和@microsoft/fetch-event-source还有一些不同，比如对自定义事件的处理和对注释的处理。@microsoft/fetch-event-source所有事件都是通过onmessage处理的，通过type可以区分，默认的message事件type是空，自定义事件的消息type是有值的可以通过type来自行分发。

vue实现输入框联动

rescripts原理介绍

babel转码class使用defineProperty导致装饰器失效问题

最近接到这样一个需求，一个列表需要有下下滚动出现的效果。刚开始还觉得很简单，不就是swiper，这个我会用。进一步了解，发现这个列表是实时变化的，就是说里面的条目会增加也会减少。我的天呀，我对swiper了解也不是很深，每次都是去巴拉文档的，这次我发现不啥也巴拉不出来，可能是自己巴拉文档的能力又下降了。关键是我也不知道这种插件名字应该叫什么呀，我在网上搜来搜去，还是没找到。说实话，这种场景，生活中还是挺常见的，我就在社区医院接种疫苗的大屏幕上见过，它会滚动播放每个接种后留观人员的信息，如果超过了半小时就不

交代一下背景，自从几个月再次在阿里云上部署code-server后，我深深地喜欢上了用code-server开发前端项目，我觉得这种方法完全可以跨设备，不用再把开发限制在某一台计算机上，只要能联网，有浏览器，走到哪里都能开发，说到底我就是把阿里云服务器当成了开发机。当然了如果你喜欢用ssh连接服务器，也能达到这种效果，不过前端一般都喜欢使用vsc开发，而不是用vim。还有就是如果是开发微信小程序项目，那没办法还是用本机吧。说的有点多了，这里其实要说的是在npm run serve时，我遇到过一个很诡异的问

这里介绍一下我调试生产环境的方法。直接连接生产环境接口我最常用的方法就是这个了。在vue.config.js中把proxy中的target改成生产环境的地址，然后用生产环境帐号登录，这样就能完全模拟生产环境了。我想这个应该是大部分人常用的方式。直接查看生产环境网页上的vue实例的状态这种方法算不上是调试，只能查看一下vue实例的内部状态，以此来作出一些判断。具体做法是利用了vue把实例对象帮到了dom上的__vue__字段上。实施起来也是很简单的，找到vue实例对应的dom元素，在上面添加一个id，

产品的需求千奇百怪，在成长中的产品的需求更是。最怕的是到处抄，然后四不像，苦了开发人员了。话说我们需要一棵树，这个树上有中间节点（文件夹）和叶子节点。然后这些数据会来自两个系统，代表的含义也不相同，就这样优秀没有办法，这都不是事。事情是支持某些文件夹下的节点（包括子中间节点和叶子节点）能拖放到另外一些节点里面，这也不是事，el-tree能支持。可怕的就是，一些拖放是删除源节点的操作，就像移动操作；另一些拖放是保留源节点的操作，就像在目标节点下创建了副本，哈哈，就是这么有意思:(删除源的移动是el-tre

这里记录一下部署code-server的过程。先说一下背景，想试试code-server，开玩笑。更多的是真的需要了。公司的开发环境真是太差了，配的笔记本分分钟卡死给你看。git pull git commit git push三个操作有时都要用几分钟，真的是没脾气呀。如果开启了watch，那就更慢了。反正就是一句话，开发环境坑死人。还有的小伙伴，用自己的电脑根本就没有办法打包，执行npm run build，然后就一直卡住，根本等不到结果，最多的时候等了两小时，没有任何变化！！为了把自己从这种非人的开

很久没有认真思考算法了，这两天看了小伙伴的《学习JavaScript数据结构与算法》一书。看到了二叉搜索树一节，感觉又回到了大学时代。下面把书中的代码手敲一下（凭记忆，有改动），分为两个文件BinarySearchTree.js和test.js。用node test.js运行就行了。我要坚持在算法的路上越走越远！！！// BinarySearchTree.js// 二叉搜索树const COMPARE = { LESS_THAN: -1, EQUAL: 0, BIGGER_T

虽然学不动，但是生命不息，学习还是要继续的。最终还是决定vue3还是要学习起来了。先从官方文档开始，然后就是深入源码了，这都是后话了。在刷文档时，前面的内容大部分都没变，在读到条件渲染（conditional render）时，我发现有一处跟vue2的不一样，如下图：第一张图是vue3的，第二张图是vue2的，比较一下发现是调整了v-if和v-for的优先级，vue2是v-for优先级高，现在是v-if的优先级高。我读起来很差异的，我还担心是文档写错了呢。自己就用vue3写了一个简单的测试程序，如下

最近接到需求，要换肤，给系统增加主题的概念，让用户可以一键换肤。就想着参考element-ui中样式的管理方法，把所有样式都放到一起统一管理，而不是分散在vue文件中。然后就写了一个小工具来实现这个功能，基本可用const path = require('path');const fs = require('fs');const compiler = require('vue-template-compiler');const colors = [];const reg = /(#[a-f0-9]

有点汗颜，老项目了，也不敢升级echarts，谁知道升级了会怎么样。介绍一下基本信息，这是一个数据可视化系统，说白了就是一个报表系统，支持常见的图表类型。界面上可以进行复杂的配置，然后把这些配置保存成一个巨大无比的json，保存到数据库。当页面打开时就是根据这个json还原报表。用户想定制气泡图中label的显示，系统刚好没有提供支持。所有问题就都围绕这个展开了。大家知道，要想定制气泡图的label，就是气泡图中的文字，可以使用series.label.formatter来实现，这个支持字符串和函数，函

一直以来我都没有搞懂el-form的rules究竟是怎么工作的，我只是按照文档画瓢而已。这次有个需求把界面上的el-select替换成树形的下拉框，只能自己封装了，同时这里用到了rules，没办法我只能让自定义的树形组件(我取名叫DropdownTree)支持rules了。可是我对这个一无所知！！！把拉代码吧，还能怎么办呢？经过艰苦卓绝的一个小时，总算搞懂了。我下面尝试总结一下当表单元素（比如el-input），在value变化或blur时，会触发el.form.change和el.form.blur

众所周知，Vue项目中大部分组件要么放在项目源码中，要么以npm依赖的形式存在。除此之外很少有别的形式了。这会自然产生一个问题，组件的修改需要对整个项目进行重新打包发布。有时我在想，可以创建一个组件治理平台，用来提供组件，而别的业务系统在运行时从组件治理平台获取组件。这种想法跟webpack中的federation module很像，只是把每个系统都能暴露组件变成了只有一个中心的组件平台来暴露组件。我对webpack也只是会用的程度，说来也是惭愧的。我就尝试在vue-cli 3创建出来的vue项目上进行

这篇文章记录从头开始安装wordpress的过程我想使用docker安装先说一下我的服务器的配置4.15.0-88-generic #88-Ubuntu SMP Tue Feb 11 20:11:34 UTC 2020 x86_64 x86_64 x86_64 GNU/LinuxDocker version 19.03.13, build 4484c46d9d启动wordpressdocker run --name some-wordpress -p 8080:80 -d wordpress这

具体产生的原因不知道，网上有人说因为部分安卓机的性能不强，需要多次尝试才会成功。这个方案我还没试。我观察下来的现象是，如果我把canvas设置成hidden的，那么必定失败，如果我让canvas显示在界面上，就会成功。我也不知道哦这两者有没有直接的原因。解决方案还在努力寻找中。。。。...

众所周知我们可以用onShareAppMessage回调来定制小程序分享的内容，不过大致也就标题、内容和图片这三个。如果想有丰富的内容，当然是在图片里面下功夫了。这样就会要求我们生成分享的图片，很多时候我们的方案都是在小程序端来生成跟当前用户相关的图片。主要思路就是：使用canvas绘制出要分享的图片的内容从canvas中获取其内容的图片文件下面来一个大致的代码var context = wx.createCanvasContext('canvasId');// 获取canvas的上下文，要确保

其实这个问题我之前遇到过一次，因为时隔那么久，导致这次又遇到了。先贴代码：....const arr = [](res.data || []).forEach(() => { ...})....从直观上说这段代码没有问题，不过有时候感觉是会骗人的。上面的代码经过编译后会变成类似如下的代码const arr = [](res.data || []).forEach....我的天呀，这就把空数组[]当成函数调用了呀，难怪会报错说[] is not function如果对你有帮助，请

这几天刷webpack的文档，在concept中有一节federation module，没看懂。就找了一些相关的文章看了看，然后大致了解了，下面是一下资料。https://module-federation.github.io/blog/get-startedhttps://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/https://dev.to/marais/webp

cascader中选中的值有两种展示方式，全部展开、收起。如下图可惜这两种都不是我要的。我需要的是，第一个栏目中的元素不能选中，其中每个项目表示一个类目。选中值显示的规则是第一栏目中的项目只显示一次，如果同一个项目下的子节点选中了一个就直接展示该子节点的文字，否则显示该项目的名称+等x项。具体代码如下import { Cascader } from 'element-ui'function getRootNode (node) { return node.pathNodes[0]}con

标题已经很能说明问题了，我再详细介绍一下背景。有一个数据展示的组件Card，里面会有指标的名称、数值以及近期的趋势图（echarts画的）。Card组件本身接收指标的基本信息，不包括趋势图的数据，趋势图的数据是Card自己再调接口获取的。用vue-swesome-swiper来显示多个Card，还需要开启loop模式。就这样我的噩梦开始了。部分Card上的交互失效了部分Card上的趋势图没出现经过调查发现，开启loop后，swiper会在前后复制一些slide，但是它只复制了dom，并没有复制事

Popover这个组件还是很好用的。一般这个里面是用来做数据展示的，很少有人把操作放在里面，即使放在里面也很少会弹框。可是我就遇到了，当操作另一个弹框时，Popover就会消失。这是因为Popover会监控body上的click事件，用来消失Popover(showPopper= false)。这个问题怎么解决呢？我看过文档之后发现Popover接收v-model，我就在想，我控制v-model的值，只有在我想让它消失时才把值置为false。经过尝试发现并不能达到我想要的效果。这是因为Popover内部有

日历控件是我见过做复杂的组件了，当然除了富文本之外。很多日历组件在实现可选日期的时候都是大同小异的，要么提供一个enablexxx要么提供一个disabledxxx的函数，让使用者明确告诉它哪些日期是可用的。element中的日历控件也提供了这样一个属性disabledDate，它接收一个日期参数，返回true表示不可选择，否则是可以选择。我们一般的处理方法是调用一个接口，后端告诉我们哪些是可选的哪些是不可选的，这样我们在disabledDate中通过查询日期是否在可选/不可选的列表中来返回。粗略看起来这

需要把相同内容的相邻单元格合并。起初，我知道el-table有span-method这样一个属性，让我们告诉它怎么合并，但是由于我并没有花太多的时间在这上面，所以就认为这个东西不能实现我的需求，毕竟文档给的例子太过简单，我的举一反三能力有差，就这样完美的错过了。我就发挥了自己的想象力。打算在表格渲染完成后，用原生js来直接操作el-table生成的table。并且我也实现了这个思路，代码如下：function mergeCells(tbody) { const trs = tbody.querySel

先说需求，在改变开关el-switch状态时需要先弹框让用户确认，然后再根据用户的操作（是点击了确定还是取消）来改变开关的状态。做法如下<el-switch :value="value" @input="handleInput"/>....data() { return { value: '' };},methods: { handleInput(event) { this.$confirm('是否修改？').then((event) => { th

大致问题就如标题所述，在el-table中开启了排序和拖拽（border）的时候，在拖拽表头，往前拖拽调小该列的宽度时，会触发排序事件。解决思路很简单：在触发排序事件时判断是否来源于拖拽的副作用，如果是的话就不触发。在table-header.js中有一个函数handleMouseUp，直接看代码中的注释吧const handleMouseUp = () => { ...

不想成为配置工程师的前端不是好架构，哈哈我已经记不清这是第几次刷webpack的文档了，看了忘，忘了看，再看再忘…这都不是重点，webpack官网文档中给我们推荐了https://github.com/ronami/minipack，可以一看。挺有意思的。我用我蹩脚的英文对部分注释进行了翻译/** * Module bundlers compile small pieces of c...

克隆代码git clone https://github.com/ElemeFE/element.git慢慢等吧，看运气了从最新的发布分支上切一个分支出来git tag看到所有的发布之后的分支打的tag，v2.13.0是最新的git checkout v2.13.0git checkout -b reading目录结构overview- build项目构建命令的目录- e...

先介绍一个背景。需要双击表格的表头切换到编辑表头文本的模式。众所周知eltable没有暴露表头的插槽，我们想定制表头几乎不可能。我想过两种方案：扩展eltable，使其支持表头插槽拦截表头单击事件，触发双击事件第一种显然是最灵活，最理想的方案。不过经过半个多小时的调研，我发现eltable的代码好复杂，骨肉相连呀，table.vue tabheheader.js tablecolumn....

jest从简单的node项目开始说起npm init -y // 初始化一个node项目npm i -D jest // 安装jest接下来写一个简单的功能sayHello// sayHello.jsmodule.exports = function(name) { return 'Hello, ' + name;}好了让我们测试一下这个函数// sayHello.tes...

今天突发奇问，对这个问题很好奇。我们自己写一个有循环引用的数据的话，如果调用JSON.stringify的话就会报错。而加入到Vue响应式系统的数据都会循环引用，类似value.ob.value === value。它是怎么解决这个问题的呢？起初我觉得它应该是提供toJSON来实现，我巴拉了源码，发现就根本没有toJSON。然后就超出了我的知识范围了，到达了知识盲点。继续巴拉代码，发现在给对象挂...

一句话概括需求，multiple的select，需要在鼠标悬浮到选中的选项时弹出悬浮框el-select不支持内容的插槽，选中的内容就只显示该选项的currentLabel字段。我就想到给el-select添加一个插槽，能够定制显示的内容。这样让我重新思考了扩展el-select的方式。这次我选择使用mixins的方式来扩展.开始贴代码了:)<template> <di...

Select本身已经很好了，然而实际需求总是这样的难以捉摸！我想在选中下拉框之时弹框让用户确认，如果用户确认了，才修改下拉框中的选中值，否则是保持原值。翻遍了element-ui文档也没能找到符合的功能，老办法，看源码吧，当然了直接改源码会有风险的，大不了以后升级element-ui时小心点咯。具体代码如下：import { Select } from 'element-ui'// 修改...

使用el-tree来展示机构信息，然后传给后台用来作为查询条件。最初版本是把所有选中的节点都传给后端，后端使用in的方式来查询数据。这就出现一个问题，如果选中的是根节点，就会把整棵树的数据都传给后端，sql执行性能差。后端提出要求，如果子节点都选中了，就不要传子节点了，只要把父节点的信息传出去。翻烂了element-ui文档，也没找到现成的方法。只能自己写了，具体代码如下（参考了element-...

我相信即使到现在我对跨域也没有完全掌握。跨域是浏览器行为跨域的请求其实是会被发送到服务器端的服务器端可以通过cors来解决客户端的跨域问题nginx配置反向代理解决跨域问题协议、域名、端口都考虑进来，比如http://11.11.11.11:8888/index.html访问http://11.11.11.11:8899/interface就会有跨域问题这些都是常识，我今天要说的是...

千奇百怪的问题在消耗着我不多的生命:( 问题描述： 1. iphone手机，6p和7p。太穷了，没有别的手机可以测试 2. IOS11 3. 今日头条app 4.h5页中有拨打电话功能 ，通过电话咨询然后奇怪的事情就出现了，在拨打电话时，总会自动添加+86，这是中国的区号。对于手机号来说，加上86不影响拨打，但是如果是400的电话，就打不通。比如：&lt;a href="tel...

又一次开始了Jenkins征程，其实以前我就遇到了这个问题，如图 你说你报这个错误鬼知道是为什么，当然了，我们也不能太苛求，Jenkins怎么可能知道具体是什么问题呢？算啦，我们自己去看Jenkins的日志吧，我发现WARNING: http://jenkins.tangxuyang.cn/manage vs. http:然后又结合chrome的F12，如下 就是这个请求没有正...

最近对前端工程化问题很感兴趣，想研究下CI。就下载了个Jenkins（windows环境下）。安装真的好简单，双击exe文件，就安装成功了。 完成后会打开localhost:8080，此时需要配置Jenkins了。然后就出现问题了，在输入初始化管理员密码后，下个页面告诉我我是offline的。开始什么国际玩笑，我可是连着网听着歌的！好吧这里我说谎了，我并不是在本地搞的，而是放到了阿里云上。 起初