JoYous-SUN
JoYous-SUN
## 引入 最近团队的一个同学在搞 npm library 源码的调试插件，因为内部的一个组件库含有大量的逻辑，在某个项目中不经意就出现一个磨人的 bug，但是组件库发布都是打包编译后的代码，而且没有 publish src 代码，不方便调试，每次还要 down 一下包的源码，再改下 webpack 的配置（比如 rule 中 exclude 去掉组件库， 改下 resolve ，在 dll 中去掉组件库）。被他们耳语目染了好几天，我就想，记得 npm 包是可以直接引源码的，大概改下 webpack 配置就可以了。然后便找到了 package.json 中 module...
# 前言 2020 年对于所有人来说都很不容易，不知道大家有没有同样的感受，就是觉得今年过的尤其快，不知不觉就过完了。但是回过头来看，今年在工作上和生活上又都完成了几件大事，自己也有了新的成长，对生活有了新的感触。接下来我会分别从工作和生活上，做回顾总结、得失、以及 2021 的展望。 # 工作上 ## 工作总结 首先跟大家介绍一下自己当前的情况，我目前在滴滴的智能中台—体验平台—体验前端团队，部门主要支持集团所有事业部客服系统的建设，前端团队大概是 24 个人左右。我在团队内主要负责一个方向和一个技术项目： - 一个方向是 B 端系统，带 6 个固定的成员（4 社招 + 1 外包 + 1 实习生），最核心的事情是支持千帆客服工作台相关的业务重点项目落地，和系统自身的技术升级 - 一个技术项目是 LogicFlow，由前端团队其他方向的同学一起成立 FT，不单独设组、不全人力、不耽误业务系统迭代，目前是带...
# LogicFlow 简介 LogicFlow 是由滴滴智能中台-体验平台技术研发的一款流程可视化前端框架，灵感来自于体验服务发展平台（ESE）的业务形态。提供了一系列流程图交互、编辑所必需的功能和简易的自定义节点等拓展能力，方便我们快速在业务系统内满足类流程图的需求。目前，LogicFlow 已经支持了客服业务下 IVR、工单流转、智能机器人等多个运营系统，在各系统不同的流程配置需求中得到了验证。 目前 LogicFlow 已经开源，欢迎大家试用，点 star 帮忙支持一下。仓库地址：https://github.com/didi/LogicFlow # 为何自研 LogicFlow 首先，在几乎支持了集团所有事业部客服系统的诉求下，面对多样性、逻辑变更快的业务场景，传统的面向场景编程成本高且周期长。因此我们建设了线上配置化的运营系统，让运营、产品同学能够通过画流程图的方式变更线上的业务逻辑，比如用户电话进线时的互动式语音应答、人工客服在处理用户进线时的标准作业流程等千人千面的应用场景。 其次，各业务系统虽然都需要应用流程可视化技术，但需求各不相同。有的对流程图的要求比较简单，图的数据格式也简单，而有的需要按照 BPMN 的规范来绘制流程图，对于定制化的要求较高。我们调研了市面上相关的框架 （BPMN.js、X6、Jsplumb、G6-editor），均存在不满足的场景，技术栈统一的成本很高。具体表现在： 1. BMPN.js、Jsplumb 的拓展能力不足，自定义节点支持成本很高；只能全量引入，各系统无法按需引入 2. 与后端配套的流程引擎适配，成本较高。均不支持数据转换、不支持流程的校验等业务定制需求。 3. 文档、示例不健全。X6 的文档不健全，示例少（2020.07 调研结论），而其他的库都没有可用的中文文档 因此，我们在...
18 年太忙碌，发现已经过去一年多没有面试了，趁着转过年来事情不是很多，抓紧出去面面试看看。目的： - 看一下大家现在的要求是什么，找自己的不足，发现自己欠缺的地方 - 前端市场如何，说白了就是看一下自己能拿多少钱的 offer 答案均为自己总结，可能会有疏漏 ## alicloud ### 一面 阿里第一面一般都是电话摸底 - 最近在做的事情 让你介绍一下最近在做什么，看看有什么可以深入聊的。 - 学委是干嘛的 因为我简历上写了“学委”，其实就是做一些技术建设相关的事，比如固定组织分享，发现一些有意思的 topic。 - 移动端开发，布局方案 说实话我对移动端的布局反正是能用就行。 1. rem。用 js 动态计算 html 的 font-size，然后布局的时候使用...
## 引入 我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误，那其中的原因是什么。以及异步代码在 js 中是特别常见的，我们该怎么做才比较？ ## 无法捕获的情况 ```js function main() { try { setTimeout(() => { throw new Error('async error') }, 1000) } catch(e) {...
### js面试题 > 来自于某个git上的题，我忘了题从哪来的了。公司整理面试题答案的时候，下面是我负责的部分... 不yao背过来面试哦... * 1.请解释事件代理 (event delegation)。 答： 描述：当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。也可以称为事件委托。 这主要得益于DOM2中的事件冒泡机制（最好要答出） 益处：需要创建的以及驻留在内存中的事件处理器少了，节省内存，提升性能。 追问：用过吗？是怎么使用的？获取当前目标元素？ * 2.请解释 JavaScript 中 `this` 是如何工作的。 答： 具体分为几种情形 - 函数被调用，被谁调用那函数中的this就是谁，没有调用者就是window。所以自执行函数的this也是window ```javascript function fn() { console.log(this) }...
## 开始 从浏览器输入一个 url 开始，到页面完成渲染，整个过程的分析，重要知识点的介绍，以及哪些地方前端需要着重注意可以做优化。 以打开 google.com 为例。 # 第一部分：过程 也就是链路，url 输入开始到页面渲染，发生了什么，以及重要知识点。 ## 浏览器 过程分为几个大的模块，首先是开始在浏览器端。 ### 输入提示 从浏览器地址框输入一个 g ，浏览器会根据你的历史访问，书签等，给出输入建议，假如说我以前打开过 google.com，浏览器就会根据它的算法匹配并给出 4,5 条建议地址。 有时候提示还会根据浏览器默认搜索引擎的搜索记录，去匹配最近的搜索记录。 ### url 解析 也就是输入完地址，敲回车之后。这里省去键盘电流脉冲对 CPU 等等的流程，不研究硬件。...
## 引入 又到了年终总结的时候，前几周已经做过工作上的总结了，不过更多的是面向工作，还是要结合生活做一个『个人总结』。 - 检查去年总结定的目标 - 今年的工作总结、主要重心 - 自己有什么变化，有哪些感悟 - 遗憾和不足 - 2020 年的展望、计划 ## 去年的目标 - 晋升。给自己定一个目标~ 竟然达成了。用到"竟然"这两个字 指的是年初工作有一些调整，有两个月的时间工作目标不明确，感到迷茫，当时已经觉得今年很难晋升了。直到 5.21 活水到现在的部门，经过努力在 9 月份参加了秋季晋升，并顺利的通过。看结果还可以，但是心路历程还是挺多的，从很看重这个事情，到因为工作调整被动安慰，再到放平心态顺其自然。 - 实行 okr 的做事风格，工作 and 生活...
## 引入 这个问题是对自己的发问，但我相信会有很多跟我一样的同学。 对于 babel 的使用，近半年来一直停留在与 webpack 结合使用，以及在浏览器开发环境下。导致很多 babel 的包，我都不清楚他们是干嘛的。比如 babel-register，还有 babel-runtime，各种 presets 的区别，transform-runtime 和 babel-polyfill 的区别，helpers 是干嘛的。尽管网上的 babel 的教程很多了，但是解答自己的一些疑问，还是要花费一些功夫。所以抽出时间来总结一下。如果你对于以上概念已经比较清楚了，就不需要往下看了。 本次的 example 代码都在 [github](https://github.com/sunyongjian/babel-usage) 上，而且每个文件夹都有详细的 README，说明我的使用方式。可以去参照一下用例的使用，并 clone 下来自己研究一下。 ## 版本变化...
# 引入 转眼间 2018 年就过去了，又到了写年终总结的时候。大概的内容就是： - 看一下去年的总结，对比收获和考核目标是否完成 - 工作上今年的几个关键时间节点，具体做了什么样的事情，收获了什么，成长如何 - 没完成的事情，不足的事情 - 对生活又有什么新的感悟呢 - 对 19 年的展望、制定目标 # 去年制定的目标 - [x] 1. 工作上要进步，业务上更出色，在团队中能负责某个业务，并把控方向。要有贡献，态度要积极，要面试社招。用 node 开发中间层，有这样的需求，希望自己可以推动。 第一个目标，在工作上的进步，目标是全部完成了。在团队中负责一个大的方向并已经持续了两三个月了，包含了三个项目，5 个前端同学。相较去年自我的定位，在项目中做一些复杂性、通用性方面的开发，现在的视野的确有开阔，责任也更大了。 之前自己一直想实践的 node 中间层，在...