编程可以做什么大部分人进入大一对于计算机还是一无所知的，比如我。大一的时候开始学 C++ ，整天对着黑框框，不禁在想，自己学了假计算机吗，这是在干什么？但我想告诉你的是，计算机不仅如此，对于日常使用的应用可以分为两类，一类就是最开始学习，需要在命令行运行的程序，一般普通用户很少用。另一类就是有 GUI(图形界面)的应用，手机上的各种应用，微信、小红书、支付宝、抖音，还有各种各样的微信小程序，电脑上的各种应用，浏览器、百度网盘，以及在浏览器打开的各种各样的网页。等等等等……所有的我们都可以做，结合现在的 chatGPT，各个技术栈的壁垒更进一步的被打破，只要我们知道编程基本的概念，现在可以在计算机上实现自己想要的任何东西。先分享下我自己的经历：大学 4 年的生活。大学会学什么对于大学，尤其是计算机专业，更多的需要自学，学校的课程更多的是计算机底层以及数学上的东西。以清华大学的为例：https://www.tsinghua.edu.cn/jxjywj/bkzy2023/zxzy/29-1.pdf。如果单纯只学完这些课会发现还是啥也干不了，从计算机分层角度来看：硬件层 (Hardware Layer)：物理设备：CPU、RAM、硬盘、SSD、键盘、鼠标、显示器等。硬件电路和逻辑门：实现基本计算和数据处理功能。微架构层 (Microarchitecture Layer)：CPU内部结构：寄 ...继续阅读 (40)

Vue/React 将前端开发从 jQuery 命令式的编程风格带到了声明式的编程风格，开发者只需要描述界面应该是什么样子，Vue/React 就会根据数据的变化自动更新界面。因此对于业务页面只需要关心数据有什么以及引起数据的变化有什么。数据数据主要有两大类，ui 相关和非 ui 相关。ui 相关前端本质上就是将数据可视化，因此定义的变量中一部分就是供页面展示使用的，在 Vue 中会把这些数据定义在 data 中变为响应式，在 React 中会调用SetState来更新这些变量以便更新视图。前端自闭环一些变量仅在前端记录进行 ui 的更新，后端不会感知到。比如页面的 loading 态：点击态，是否打开展示更多：来自后端页面数据是存在数据库中，后端会把这些数据给前端，供前端展示，这类数据又分为两种：将数据直接赋值给某个前端变量进行展示，比如昵称、标题等。将数据转换后再进行展示，比如钱相关字段因为精度问题，后端存储的是分，给到前端以后需要转换成元进行展示。来自底层设备信息：通过屏幕宽高来设置弹窗的宽高。localStorage：一些模块可能一天只需要展示一次，前端将标志存到 localStorage 中自行进行判断。非 ui 相关这些变量和 ui 无关也不会和页面后端交互，举几个例子：前端自闭环请求锁：一些提交请求，为了防止用户多次提交，可以在接口请求前设置一个标志位，类似于下边这样 ...继续阅读 (34)

自己第一个和 ai 沾边儿的小程序，分享下现在从零开发到小程序备案上架的全流程。周四周四女朋友看到一个很火的网站，友好语气转换器：就是可以转换各种语气：看了下在小红书、公众号很多文章在分享，因为我是前端开发，想着就自己写一个小程序版的吧。周五周五早上起来注册了小程序。周六开始搞代码。先实现基本的交互，然后通过小程序的云开发直接调用 chatGPT 接口去转换语气，基本上一天把主流程跑通了。用的第三方中转接口，先充了钱看看效果。周日再调一些代码细节。开始搞小程序的各种手续。备案。目前小程序不备案上架限制每天 50 访客，并且一直不备案会被强制下架。个人认证。不认证的话无法使用分享和被搜索能力，个人认证一年 30 元。不认证小程序就是一个自 high 的产品了，完全传播不了。手续和小程序发布同步进行：小程序审批的很快，几小时就审批完成了，搁以前审批完就直接上线了，现在要等手续。周一备案和个人认证都通过了。发布上线，在各个群和朋友圈宣传。周三达到 500 uv，开通流量主，小程序添加广告位，每天有了几毛钱的收入。这里补充一个很坑的点，如果一个页面接入多个激励广告，记得传参数multiton，默认是单例模式，创建多个返回的实例都是第一个。1234wx.createRewardedVideoAd({adUnitId:"adunit-aaaaaaaaaaaaaa",multiton: ...继续阅读 (103)

主要是摘抄了一些有感触的点，非原创观点存在主义哲学存在主义指的是一种生命能意识到自己的存在，并且以“我”为中心去探索、追求、解决和优化其生命一切的哲学思想。发展历史克尔凯郭尔：非此即彼索伦·奥贝·克尔凯郭尔（又译齐克果、祈克果、吉尔凯高尔等；1813年5月5日—1855年11月11日）是丹麦神学家、哲学家、诗人、社会批评家及宗教作家，一般被视为存在主义的创立者。“传统哲学”用最通俗的语言来概括，就是三个字：“盖高楼”。从柏拉图开始，亚里士多德、阿奎那、笛卡尔、洛克、康德、黑格尔，都是体系的建造者，他们都是从一些最基本的概念出发，比如实体、理念、经验、上帝，建造一个自己的哲学大厦，而且几乎每个哲学家都要先把之前哲学家的大厦推倒，从地基开始重建。这是一种上帝视角的哲学，好像世界上发生的一切都尽在哲学家的掌握之中。在克尔凯郭尔之前都是这种从抽象观念出发的哲学，他反对传统哲学从概念到概念的逻辑推演，开始主张要把个人的生存处境当作哲学的核心问题。升学填报志愿的时候，上了这个学校就不能上那个，此后的人生就会大不相同；恋爱的时候选择伴侣，和这个人结婚就必须放弃那个人，此后的人生也会大不相同。甚至你今天晚上选择赴哪个饭局，遇到了哪个新朋友，得知了哪个新消息，此后的人生也可能会大不相同。每往前走一步，世界都会逼着我们做出大大小小的选择，而所有的选择都会给我们带来或多或少的焦虑和恐惧。克尔凯郭尔把这种 ...继续阅读 (52)

平常小程序写的多一些，简单总结一下原理。但因为小程序也没开源，只能参考相关文档以及开发者工具慢慢理解了。理解小程序原理的突破口就是开发者工具了，开发者工具是基于NW.js，一个基于Chromium和node.js的应用运行时。同时暴漏了debug的入口。点开后就是一个新的devTools的窗口，这里我们可以找到预览界面的dom。小程序界面是一个独立的webview，也就是常说的视图层，可以在命令行执行document.getElementsByTagName('webview')，可以看到很多webview。我这边第0个就是pages/index/index的视图层，再通过document.getElementsByTagName('webview')[0].showDevTools(true)命令单独打开这个webview。熟悉的感觉回来了，其实就是普通的html/css，小程序的原理的突破口也就在这里了。这篇文章简单看一下页面的dom是怎么来的，也就是wxml做了什么事情。源代码：渲染出来的代码：view变成了wx-view，text变成了wx-text，并且里边加了。两个关键信息，wx-xxx标签以及exparser。自定义标签html是支持我们直接写自定义名字的标签的，并且在上边设置class也会直接生效。区别在于自己写的标签没有一些预制的属性，比如div的display: ...继续阅读 (59)

平常小程序写的多一些，简单总结一下原理。但因为小程序也没开源，只能参考相关文档以及开发者工具慢慢理解了。理解小程序原理的突破口就是开发者工具了，开发者工具是基于NW.js，一个基于Chromium和node.js的应用运行时。同时暴漏了debug的入口。点开后就是一个新的devTools的窗口，这里我们可以找到预览界面的dom。小程序界面是一个独立的webview，也就是常说的视图层，可以在命令行执行document.getElementsByTagName('webview')，可以看到很多webview。我这边第0个就是pages/index/index的视图层，再通过document.getElementsByTagName('webview')[0].showDevTools(true)命令单独打开这个webview。熟悉的感觉回来了，其实就是普通的html/css，小程序的原理的突破口也就在这里了。这篇文章简单看一下页面的样式是怎么来的，也就是wxss做了什么事情。源码中data1的样式：开发中工具中对应的样式：rpx的单位转成了px，同时保留网页不认识的属性名，大概就是为了方便的看到当前类本身的属性和一些文件信息。这个样式是定义在中，让我们展开找一下：data1确实在中，继续搜索，可以看到这里中的内容是通过在执行eval插入进来的。把这一段代码丢给chatGPT整理一下 ...继续阅读 (58)

周六去杭州参加了第六届 FEDay，买的晚宴票，晚上还和大佬们吃了饭，看着网上活跃的 id 变成了吃饭的同桌，还真有一些不真切的感觉。趁着对周六分享还有些记忆，就简单写一写周六的分享和感触吧，中间会混着我的一些观点，主要是听到分享后想到的，大家也不要误解。阮贝琪（Jecelyn Yeen）：网页调试的最新进展（Modern Web Debugging）一位谷歌的大佬，分享的非常幽默，主要介绍了 Chrome 的 devTools，调试相关的东西。更新了一个认识： Source Maps 规格竟然停留在了2011，但过去十年前端发生了太多的变化，导致 SourceMap 目前很 flexible， 目前 Chrome 也在与 TC39 合作，强化规范并改善调试体验。介绍了很多调试 Tips，印象比较深的两个：前段时间知道了 Chrome 可以覆盖相应内容，意味着 Mock 再也不需要第三方插件了。会上还展示了 Override headers，通过编辑 headers 也可以直接解决跨域问题，这是之前没有想到的。另外还有个之前遇到的头疼的问题，如果想调试搜索框选中下拉元素的样式。当切到 Element，搜索框下边的内容就会消失掉此时找到 MoreTools，Rendering开启 Emulate a focused page，此时下拉就出来了。Jecelyn Yeen 也自嘲这么好的 ...继续阅读 (63)

免费学详细规则：https://mp.weixin.qq.com/s/0X8l9VeEp0VizlUTSgVmqg前端存在知识点杂多、技术迭代快的特点，对于初学者或者非前端开发者往往会一脸懵逼。这个系列会逐个介绍前端各个知识点，最后再详细介绍「课程减减」这个网站如何从零开始开发，包含前后端的开发，以及最后部署上线，预览地址https://coursesub.top/课程介绍前端整体结构可以理解为上边的图，底层的硬件、操作系统部分我们不关心，谷歌开源了 V8 引擎，它可以运行 js 语言，基于此又有了Chrome浏览器和Node.js。浏览器可以运行 html/css/js 的代码，渲染网页并且提供交互能力。在原生的 js 的基础上，又诞生了Vue/React，可以提升网页开发效率。Node.js 目前有两方面作用，一方面是写脚手架或者一些命令行工具，比如 Webpack。另一方面可以搭建 HTTP 服务器，提供后端接口，比如使用 koa 框架。课程会详细介绍各个知识点的来龙去脉，目录如下：适合人群前端初学者：简单学习了 html、css、js，对其他概念还不太了解，也没有独立开发项目的经验。其他开发人员：不管是后端、算法、测开等，只要有过编程经验，都可以轻松地跟上课程。收获什么会了解前端的整体架构，各个部分的作用，跟着教程可以搭建出「课程减减」这个网站。包含前后端整个开发过程的详细 ...继续阅读 (45)

前段时间在知乎看到这个问题「想请教现在的在职程序员第一次编程入门的是怎样的？」，现在又到了大学新生入学的日子，这里把答案贴过来，希望对大家有所帮助。按时间线来回忆下：14 年 9 月 - 15 年 3 月大一上14 年进入大学接触编程，第一门编程语言 C++。开始就是学基础语法，学循环、学递归，求绝对值、求阶乘、一元二次方程求解，到最后的学生管理系统。txt 文件是类似下边的数据：写出的程序就是命令行之间的交互，程序把 txt 读入，然后进行增删改查的操作。最开始底层是用一个大数组保存的，当时正好在学链表，自己就想着干脆再用链表重写一下吧，然后花了几天时间将整个代码进行了重写，未来遇到链表的问题都变得轻轻松松了。大一寒假回家闲来无事就在网上找了些课程，学了郝斌的数据构课程，但当时应该是懵懵懂懂，只了解了大概。15 年 3 月 - 15 年 9 月大一下大一下学期接触了 GUI，也就是有界面的应用，学校的课程是 MFC。课程末，把大一上写的黑框的学生管理系统改成了有界面的。接着暑假开始的时候没有直接回家，学校当时有 ACM 集训第一个月留校了，但当时基础太差，如听天书，最终也没走 ACM 的道路。但期间因为有了 MFC 的知识，自己又尝试做了一个双人版的贪吃蛇。完全从零自己开始写， 画蛇身，动起来，操控，一步一步最后完成的。并且实现了局域网对战，对网络有了初步的了解。用c语言可以实现 ...继续阅读 (50)

平常写 ts 比较少，用了几天时间刷完了阮一峰老师新写的 ts 教程，依旧通俗易懂，对于入门或者查漏补缺还是挺有帮助的。wangdoc.com/typescript/加深了两点收获：ts 是一门独立的语言，利用它的类型推导可以做很多事情。ts 又是一门特殊的语言，杂糅到了 js 中去使用。混合使用过程中，一不小心就会被绕进去。上次详细看 ts 还是写斐波那契的时候，用 TypeScript 实现斐波那契数列混了 Anthony Fu ts 类型体操项目的一道题：https://github.com/type-challenges/type-challenges正因为 ts 是一门独立的语言，所以可以用 ts 实现菲波那切数列、实现中国象棋，甚至实现编译器，也就有了上边的类型体操项目。我 ts 平常用的比较少，猜测有下边的原因：大家对 ts 的了解深浅不一，ts 说简单也简单，说复杂也复杂，平常快速的业务迭代中很少有时间说专门去刷一遍 ts。第一次开发的时候会多花时间。 定一个接口需要写类型，函数参数需要写类型，如果参数是对象套对象再套对象，那简直要疯掉。未来迭代也花时间。后端接口有变动，除了改逻辑代码，还要再把相应的类型也都改了。写逻辑的时候会被限制，经常遇到动态修改变量的情况，如果有 ts 还需要多考虑下。收益不明显，如果说为了类型提示，编辑器通过插件一定程度上也可以。如果为了减 ...继续阅读 (51)

好久没有在知乎上看到好问题了，前几天看到一个，把回答同步过来。确实是一个很有争议的问题，团队里也经常讨论这个问题，下边分享下我的想法，也不一定是最佳实践。首先，不要修改 prop 的值肯定是一条比较好的实践，保证数据的流向明确。官方文档中也有明确指出：One-Way Data FlowAll props form aone-way-down bindingbetween the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means y ...继续阅读 (53)

一眨眼工作已经三年了，前两年的总结工作第一年、工作第二年基本上把在公司做的事情都介绍了，今年站在「前端已死」、互联网大裁员的环境下，想想未来的路可能更为应景。经常说这是最好的时代，也是最坏的时代，互联网便是如此。通过互联网将人与人之间的各种链接都成为了可能，在互联网诞生之前，人与人之间的交流就是现实生活中的圈子，而现在本来这一辈子都不会在现实中产生交集的人在互联网却会相遇。各种写书的大佬、开源的大佬，以往可能只是从文字、代码中了解他们，但现在通过社交媒体、微信竟然就产生了互动。当然不好一面就是也会遇到和自己不相投的人，也许会影响自己的心情。通过互联网极大的扩宽了我们的视野，看到了别人在怎么生活，也放大了自己的焦虑和欲望。我们需要认清自己的边界，知道自己想要什么，自己能做什么，不需要对本来不可能发生在自己身上的事情而焦虑。当迷茫焦虑时，看看宇宙的纪录片，从宇宙的视角去看自己，无论从空间大小还是时间维度，其实自己什么都不是，想那么多干啥。再想想其他动物，吃饭睡觉喵喵叫，也挺好的。前端已死互联网已经结束了快速扩张的时期，这是个客观事实，因此招聘的人数相对于之前减少了很多，但远没到一个已死的状态，相对于其他行业，选择互联网依旧是一个不错的选择。前端会不会死不知道，互联网肯定会一直存在下去，现在整个社会都是基于互联网，已经变成了像电、水一样的基础设施，没有人可以离开它。因此互联网的相关的岗位 ...继续阅读 (43)

过去一段时间经常遇到线上的页面元素互相遮盖的问题，索性就总结一下吧。正常情况下，页面元素是从左到右和从上到下渲染（x、y 维度），但因为 margin 可以写负值，还有一些定位相关的 css 属性(absolute、relative、fixed、stick)，这就会导致元素之间可能重叠，重叠后就需要判断元素堆叠顺序，这就涉及到层叠上下文（Stacking context）了，相当于增加了 z 轴的维度。无新增层叠上下文的情况我们先抛开层叠上下文的概念，看一下没有 z-index 或者其他特殊 css 属性正常情况下元素的堆叠规则。按照元素出现的顺序依次堆叠下边的元素：非定位的 block 元素，一般就是背景float 元素非定位的 inline 元素，一般就是文字内容定位元素，即 position 设置了 relative 或者 absolute一句话总结就是同类型的后出现的覆盖先出现的，定位元素覆盖非定位元素。1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556DOCTYPE htmlDocument.relative {height: 50px;position: relative;top: 10px;backgro ...继续阅读 (48)

最近看了死月的趣学 Node.js小册，关于宏任务、微任务部分突然意识到所谓的执行顺序其实就是底层C++写的各种代码的结果，当了解了Node.js代码或者V8代码再看这些问题真的就是降维打击（当然我只是有了这个感觉，还没细看过[旺柴]）。但如果平常用不到，我们也没必要真的去看底层的代码，即使不了解底层代码，我们也可以根据具体的表现来自己定一些规则进行理解，只要根据这个规则来判断执行顺序是正确的，能指导平常开发也就足够了。这篇文章只讲基本的概念，不进行深入，能够判断setTimemout、Promise的执行顺序即可。众所周知，JavaScript单线程执行的，所以对于一些耗时的任务，我们可以将其丢入任务队列当中，这样一来，也就不会阻碍其他同步代码的执行。等到异步任务完成之后，再去进行相关逻辑的操作。js在主线程中执行的顺序：宏任务 -> 宏任务 -> 宏任务 …在每一个宏任务中又可以产生微任务，当微任务全部执行结束后执行下一个宏任务。【宏任务 [微任务]】 -> 【宏任务 [微任务]】-> 【宏任务 [微任务]】…宏任务生成方法：用户交互：用户在页面上进行交互操作（例如点击、滚动、输入等），会触发浏览器产生宏任务来响应用户操作。网络请求：当浏览器发起网络请求（例如通过Ajax、Fetch、WebSocket等方式）时，会产生宏任务来处理请求和响应。定时器：通过JavaScript宿 ...继续阅读 (50)

网站的证书快要过期了，索性就总结下HTTPS相关的东西吧。前提HTTPS说白了就是加密传输信息，防止信息泄露，需要提前了解几个概念：加密先说说最简单的加密，替换法，每个字符都对应到一个新的字符：比如明文是windliang，通过上边的映射关系密文就是pbgwebtgz。古代就使用过这种加密算法，但通过词频的分析，暴力枚举很容易被破解，因此现代已经不会用这种算法了。不管什么加密算法，都可以分为明文，密文，和密钥、算法三部分。这里的密钥就可以理解为上边的映射表，算法就是直接映射。现代的加密算法，密钥一般就是一个字符串，算法就比较复杂了，会进行各种计算，或操作、与操作，分组等，然后再应用各种数学知识，质数、模相等… ，大学的时候有学过，这里也忘光了，下边只介绍简单概念了。对称加密和古代的加密算法流程是一样的只是其中的算法相对于简单的替换会更加复杂。常用的有 DES 算法、AES 算法、3DES 算法、TDEA 算法、Blowfish 算法、RC5 算法、IDEA 算法等。其特点是，加密和解密使用同一密钥。非对称加密与之前最大的不同之处是包含了两个密钥，一个称之为公钥，一个称之为私钥。并且算法相对于对称加密会更加复杂。公钥和私钥都能进行加密，用公钥加密后只能用私钥解密，用私钥加密后只能用公钥解密。常见非对称加密算法包括 DSA 算法、RSA 算法、Elgamal 算法、背包算法、Rabin ...继续阅读 (51)

一直过的农历生日腊月初十，农历的腊月是个比较尴尬的月份：– 你属什么？– 属猪– 那你是95年生的咯– 我是96年生的–96年不是鼠年吗–96年1月还没过年，所以是96年的🐷因为属相是按农历算的，但腊月一般都是第二年的1月了，导致每次都得解释下，哈哈。今年凑巧和元旦过在了同一天，印象中小时候也有一次赶在了元旦，索性写个小程序来看一下吧。上一次生日在元旦已经是快20年前的04年了，还看到了一个神奇的年份，下一次农历和公历重合的生日是2033年。因为农历不像公历一样有确切的数学规律，只能由天文台测定后提供，所以一般都是采用「查表法」获取农历数据，我这里就偷懒直接使用别人的库了https://www.npmjs.com/package/solarlunar哈哈，这也导致目前只能查1900 - 2100年的数据。感兴趣的同学也可以试试这个小程序 「农历生日转换」。说到生日，我的博客其实也是17年生日那天搭建的，现在回过头再看感觉还是很奇妙的，就像和当前的自己产生了连接一样。 ...继续阅读 (47)

具体需求开发前，后端往往只提供接口文档，对于前端，最简单的方式就是把想要的数据写死在代码里进行开发，但这样的坏处就是和后端联调前还需要再把写死的数据从代码里删除，最好的方式是无侵入的mock。下边介绍几种常用的方式，大家可以结合自己的项目来选取。大致分为三类，重写xhr/fetch、node.js服务中转、系统层面拦截。接口demo为了后边方便的安装node包，可以用webpack进行打包，具体配置可以参考2021年从零开发前端项目指南，看到React配置的前一步就够了，只需要配置一个html和一个接口请求。 需要注意下webpack的版本，不同版本后续的配置会不同，这里我用的是5.75.0。最终目标是通过mock让下边还没有开发好的接口正常返回数据：123456fetch("/api/data", {body:JSON.stringify({id:10}),method:"POST",}).then((response) =>response.json()).then((json) =>console.log(json));现在肯定是404。Better-mockbetter-mockfork自Mock.js，使用方法和Mock.js一致，用于javascriptmock数据生成，它可以拦截XHR和fetch请求，并返回自定义的数据类型。只 ...继续阅读 (50)

前段时间一直在更vue2的源码系列，最近换了换口味，学了一下cocos，照猫画虎的写了一个「挑战1024」小游戏。学习一门新语言或者新框架其实就是一个堆时间的过程了，整个过程就是结合已有经验进行不同的猜测，然后验证，搞不定就去官网或者搜索引擎找答案，99.9%的问题应该都能找到。cocos网上很多是视频教程，虽然对新手友好，但是信息密度太低了，这里我总结一下cocos专有的或者不太符合直觉的一些点，前端的同学看完以后能更快的进入cocos的开发中。建议先跟着官方的快速上手先一步一步实现一个小游戏，再读下边的文章效果会更佳。介绍cocos提供了游戏引擎，一些常用的操作，碰撞检测、重力模拟、变换位置、旋转、缩放、粒子系统等都可以通过配置一键实现，游戏引擎最终会帮我们把界面渲染到canvas节点上。因为是渲染至canvas，当然很自然的可以支持跨端，一套代码可以编译至h5、微信小游戏等平台。同一个功能不同平台之间有不同的api，比如localstorage的使用会有所不同，cocos会帮我们在上层抹平，只需要按照cocos的语法编写，编译的时候选择相应的平台就会转成对应平台的api。编辑器cocos开发和平常的前端开发不太一样，它是代码结合UI拖拽来实现的，通过拖拽我们可以快速的布局、添加组件、设置属性等。基于此，项目和编辑器就有了强绑定的关系，如果下载别人的项目，还需要下载相应的编辑器 ...继续阅读 (51)

背景中后台项目中会存在一些配置页面需求的开发，这些需求高度相似，迭代频率低，基本结构为「搜索区域」、「表格区域」、「包含表单的弹窗」三部分组成。其中「搜索区域」和「表格区域」的操作区交互固化，比如查询、添加、查看、删除、上线、下线。当前开发时大都采用复制类似需求页面继而修改的方式，如下图所示。每个人都形成了自己的代码组织结构，导致虽属同一团队，但代码风格、交互实现逻辑变为了多条平行线。这种迭代方式存在两点坏处：a. 重复劳动较多，同时存在漏改的风险。易变的地方分布在页面中各个部分，修改起来不够方便，改动后存在影响到正常逻辑的风险。b. 团队内各自抽离的不同交互方式，接手他人页面的时候需要耗费一定的理解成本，同时code review时无法快速的理清逻辑。解决方案中后台项目提效一个直接的想法就是低代码的思路：a. 初态：抽离各个组件，定义json的格式，通过json渲染出页面。b. 终态：开发搭建平台，通过拖拽生成json并且实时预览页面，开发者也可以通过预定的协议接入自己的组件。上述两种方案除去搭建成本大之外，最大的问题就是业务开发灵活性将大大降低。开发者将在新的规范下进行开发，不管是通过json配置还是配置平台生成页面，上手难度大大增加，不亚于去学习一个新的前端框架。如果新需求的交互框架没有考虑到，将花费大量的时间进行适配， 甚至超过了从零开发需求的时间。极端情况下，如果无法满足 ...继续阅读 (56)

背景在日常需求迭代中，代码的规范与质量是编码的重要一环。Eslint作为规则扫描器，能够对前端代码进行有效管控，避免出现低级错误，对于前端项目或多或少肯定都会看到eslint的相关配置。但目前存在一些老项目，eslint的配置仅仅停留在了多年前加的一些eslint规则上，没有任何其他动作，导致平常开发中有如下痛点：本地不方便开启保存自动格式化，因为对于老页面，如果开启的话会造成大量的无关diff。提交代码的时候会受到莫名其妙的卡控。过pr的时候分号、空格、换行各个地方不对齐，逼死强迫症系列。基于此，前段时间对老项目的eslint进行了一次完善，分享一下整个配置和思考的过程。选取规则eslinteslint规则可以单独一条条配置，也有一些规则的集合比如官方推荐的eslint:recommended，框架相关的plugin:vue/recommended，还有公司开源出来的整套规则比如Airbnb的eslint-config-airbnb，腾讯的eslint-config-alloy。选取什么规则不是非常重要，大部分规则集也是类似的，此外本地也可以定义相同的规则名对规则集进行覆盖。以alloy的规则为例，按照eslint-config-alloy中的文档安装完相应的node包以后，在本地根目录中新建.eslintrc.js文件引入相应的规则。1234567891011121314151 ...继续阅读 (52)

分享一下平常开发经常出现问题，增加代码质量的十个小点：记得错误处理特别是网络请求或者其他异步操作中，await记得包裹try catch，可以给用户一个友好提示，同时可以考虑catch中需要做什么兜底处理，必要时进行上传日志。1234567891011121314151617try{this.loading =this.$loading({lock:true,text:'加载中...',spinner:'el-icon-loading',background:'rgba(0, 0, 0, 0.7)',});constinfo =awaitresDistributeService({taskTicketId:this.id });...}catch(e) {this.$message({type:'error',message: e.msg || e.message ||'失败',});}finally{this.loading.close();}可以结合finally，处理loading等。数字 0 的校验前端经常使用!v，来判断v是不是有值。1234if(!v){return}doSomething()但如果0是v的有效值 ，此时本该处理，但 ...继续阅读 (49)

写过几个油猴脚本，经常对页面请求返回的数据进行拦截或者覆盖，这篇文章就做个总结，涉及到fetch和xhr两种类型的请求。环境搭建先简单写个html页面，搭一个koa服务进行测试。html页面提供一个id=json的dom用来加数据，后边我们补充test.js文件来请求接口。1234567891011121314DOCTYPE htmlDocument我运行了将html通过VSCode的live-server插件运行在http://127.0.0.1:5500/上。安装koa和koa-route的node包，提供一个接口。12345678910111213141516171819202122232425262728293031constkoa =require("koa");constapp =newkoa();constrouter =require("koa-router")();router.get("/api/query",async(ctx, next) => {ctx.body = {data: [1,2,3],code:0,msg:"成功",};});// 跨域app.use(async(ctx, next) => {ctx.set("Access-Control-Allow-Origin","http://127.0. ...继续阅读 (54)

现象element-ui版本是2.15.9，vue版本是2.7.8。在el-dialog中使用el-tabs，并且el-dialog添加destroy-on-close属性，当关闭弹窗的时候页面就直接无响应了。1234567891011121314151617181920212223242526272829303132333435用户管理配置管理角色管理定时任务补偿取 消确 定打开弹窗exportdefault{name:"App",data() {return{dialogVisible:false,};},};效果如下：再等一会儿Chrome就直接抛错了：操作过程中控制台也没有任何报错，去github的issues看一眼发现已经有3个人遇到过这个问题了：[bug report] El dialog [destroy on close] El tabs page crashes #21114[Bug Report] When set a attribute “destory-on-close=’true’” on a el-dialog which has a child el-tabs component will cause the browser crash #20974[Bug Report] el-tabs i ...继续阅读 (47)