搞前端还有出路吗？如果有，在哪里？
写代码对我来说是一件很开心的事，通过写代码来糊口，也算得上是一件很幸运的事了。但工作的时间久了，一些危机感和职业的通病，多多少少也会暴露出来。 从毕业到现在5年多了，算上加班，凑个7年工作经验，应该不算过分。 写前端写得越久，人往往也容易麻木。有时候在想，这玩意也算是个体力活吧，找个稍微动打字的人，学习两个多礼拜，也能上手啊。 这么想的人，必定不止我一人。 在互联网公司也是打螺丝就现在的Web开发而言，一个项目脚手架，渲染框架，状态管理，路由等等，几乎所有的东西都已经实现了模块化以及灵活集成。而开发者需要做的，就像是小孩子给格子涂颜色一样，给指定的格子涂上颜色，工作内容本身，并没有多大的难度。 “面试造火箭，上班打螺丝”，这还真不是句玩笑话。面试时的各种性能优化方式，代码规范，还有算法等等，基本上都是白扯。说到组件封装，很多时候都是个人自嗨。相似的功能，在不同的项目或者页面中却是高度定制化的，甚至在设计风格上都无法保持一致，再谈封装，多少有点自讨没趣。 前端开发被叫成 “切图仔” 不是没有道理的，长期的、重复性的写高度相似的东西，个人能力无法得到提升，而且还容易陷入舒适圈，当然...
从崩溃到稳定：前端开发者必学的 Node.js 守护进程实战指南
说到守护进程，绝大多数开发者其实都不陌生，甚至有些记性比较好的同学还能大段背诵关于进程的面试八股文呢。虽然在日常的Web开发工作中很少使用到它，而且可能从写Web第一天到离职都没有真正写过一个守护进程，即使有或许还是学校里教学用的–使用C语言实现的Demo。 不要怪作者嘴巴毒，事实就是这样的，即使一个工作5,6年的老Web开发，你让他现场写个守护进程，还真不一定就能立马写出来。今天就尝试着使用Node来实现一个守护进程，试着唤醒你那将要死去的记忆。 把一个大象关进冰箱分几步？ 写一个守护进程又分几步？ 1. 创建子进程并脱离控制终端当我们使用Node执行某一个js脚本时，Node会创建一个进程，当脚本执行结束了，进程也就结束了。 为了创建守护进程，需要在脚本执行的过程中(父进程)创建一个子进程，并且在子进程创建之后，要让其自立门户，脱离父进程，这样即使父进程退出，也不会影响子进程 123456789101112131415// start.jsconst { fork } = require('child_process');const p...
从第一个静态网页到 Vue：Web 技术的 “逆袭史”
1991年，有个叫蒂姆・博纳斯・李的英国科学家，写了世界上第一个静态网页。这个牛人不仅创造了超文本标记语言（HTML），而且还开发出世界上第一个网页浏览器，同时也由此发明了万维网(World Wide Web), 因此他也被称为万维网之父。 早期的网页是静态的，当时的HTML标签并不丰富，当时的内容除了直接链接条状之外，没有任何的交互。到了1994年的时候，当时有一家有名的浏览器公司，大家应该也都听说过，叫网景(Netscape)， 它觉得页面缺少交互太单调了。脑袋一拍，Mocha出来了–也就是后来的JavaScript, JavaScript 的交互能力为网页广告弹窗(真讨厌)提供了技术基础。 页面是可以动了，但是样式还是单调了些，而且还完全取决于浏览器开发商。页面缺少布局和美化手段，太粗糙了点。在1994年的时候，一个叫Hkon Wiumlie的开发者提出了CSS (层叠样式表)的想法，通过编写样式实现对页面内容的布局和美化。因为后来各大浏览器厂商对CSS的支持与差异，直到两年后的1996 年，W3才推出CSS规范的第一版本。 虽然CSS因此遗留了很多历史的BUG, 但终...
一文读懂 Cookie、Session 和 Token：原理、区别与应用场景
一文读懂Cookie、Session和Token：原理、区别与应用场景咱上网冲浪的时候，天天和各种网站、APP打交道。但HTTP协议有个“毛病”——它记性不好，每次请求都像第一次见面，根本不记得之前和你聊过啥。为了解决这个问题，程序员们整出了Cookie、Session和Token这三个“神器”，它们就像我们在网络世界的身份证、通行证，帮服务器记住你是谁，都干了啥。今天咱就唠唠这仨到底是干啥的，有啥不一样！ 一、Cookie、Session和Token都干啥用？1.1 Cookie：浏览器帮你记事儿的小本本Cookie就是服务器给浏览器塞的小纸条，存的都是些用户信息，像登录状态、浏览偏好啥的。举个例子，你第一次进某个网站，选了中文界面、深色模式，下次再访问，网站秒变你喜欢的样子，这背后就是Cookie在偷偷“记笔记”。不过这小纸条存你电脑里，容易被人偷看，所以得小心点用！ 1.2 Session：服务器的专属“私人档案库”Session相当于是服务器自己的“小账本”，专门用来存用户的会话数据。当你登录网站，服务器就给你开个“档案袋”，把你购物车有啥、订单到哪一步了这些信息全塞进去...
从 Vuex 到 Pinia：Vue 3 状态管理的全面升级
在Vue 3的“江湖”里，状态管理这块可是发生了大变化！当咱们从Vue 2“升级打怪”到Vue 3，以前常用的Vuex逐渐被更“香”的Pinia替代了。今天就来唠唠Vuex和Pinia到底有啥不一样，帮大家轻松拿捏新的状态管理姿势！ 1. API风格与设计：告别繁琐，拥抱简洁Vuex就像个“老学究”，用的是类似Redux的那一套，非得让开发者把逻辑按mutations、actions、getters这些规矩分好类。虽然确实规范，但写起代码来可太啰嗦了，一堆模板代码看着就头大！ Pinia就不一样，它紧跟Vue 3的“潮流”，用组合式API设计，直接把mutations“踢出局”（只保留state、getters、actions）。代码一下子变得超扁平、超直观，再也不用为那些复杂的条条框框费脑筋，开发起来轻松多啦！ 2. TypeScript支持：天生适配，用着超爽要是你用Vuex搭配TypeScript，那可得费点劲！得额外捣鼓不少配置和类型定义，不然根本用不顺手，就像给自行车硬装上火箭发动机，麻烦得很。 Pinia可就贴心多了，它对TypeScript是“真爱”，天生适...
为什么团队总在写烂代码？因为 “背锅侠” 根本不存在
CV: Copy & Paste, 复制的意思 草台班子的代码现状：烂却能跑的魔幻现实做开发越久，你就越能感受到“这个世界，就是个巨大的草台班子”这句话的含金量。很多看似不错的项目，其代码质量和整理设计往往都经不起推敲。 项目中的冗余代码堆砌，不做修改的暴力复制，混乱的逻辑判断，以及令人作呕的文件命名，有时候自己都会不禁发出灵魂拷问： “这东西能跑起来吗？ 这东西为什么能跑起来？” 可是，没有人一开始就是奔着要把整个项目写烂为目的的吧？ 没有吧！ 但事实就是这样啊，它虽然很烂，但它能用。虽然它能用，但也是真的烂。 Why? Tell me why? 熵增的起点：一次复制、一个else if的蝴蝶效应它肯定不是一开始就是这么烂的，但随着时间的推移，版本的迭代，似乎有种 力量在不断地将他慢慢往变烂的的方向推。而且随着时间的变长，作为项目的开发者，能够明显的感觉到这种力量越来越强，整个项目的维护成本也越来越高。 而这一些，最初可能只是一次简单的代码复制，文件拷贝，也可能只是在原来的判断逻辑上加了一条 else if 判断语句… 而做这些的原因，可能是一次的需求变更，也可能...
Node安装保姆级教程
方法1：安装包安装 step1: 前往Node官网下载安装包，或者关注公众号“我做开发那些年”，后台回复“Node安装包”获取。 step2 双击安装包，开始安装, 傻瓜式的点击 Next. 点击 next 如果你不想Node默认安装在C盘目录下，可以在这一步修改安装盘 点击 next 点击 Install 方法2：可移动二进制文件安装 step1: 前往Node官网下载安装包，或者关注公众号“我做开发那些年”，后台回复“Node独立文件包”获取。 step2: 将包解压任意目录，如我的是 在D:\software_install\develop下 step3: 将Node目录下的 bin下的配置到window环境变量中a) win+s，搜索 环境变量, 点击编辑系统环境变量 b) 点击环境变量 c) 找到 path, 点击 编辑 d) 点击 浏览 e) 选择 step2 中解压的目录路径 最后点击 确定关闭所有窗口，将环境变量保存应用。 安装验证打开DOS窗口，输入 node -v, 查看是否输出对应的 Node 版本号，如果有，则说明安装成功。如果报...
Javascript中两种不同的继承方式对比
Dog.prototype = new Animal() 和 Dog.prototype.proto = Animal.prototype的两种继承方式的区别1. Dog.prototype = new Animal()语法和机制 目的：通过创建 Animal 的实例来继承其原型链。 底层逻辑：将 Dog.prototype 替换为一个新的 Animal 实例。 原型链结构： 1Dog.prototype → Animal 实例 → Animal.prototype → Object.prototype → null 因此，Dog 的实例通过原型链可以访问 Animal 实例的属性和 Animal.prototype 的方法。 特点 调用父类构造函数： 会执行 Animal() 构造函数，初始化父类属性（如 this.name) 继承实例属性：Dog.prototype 会包含 Animal 实例的属性（如 name），即使这些属性是实例级别的。 覆盖原有原型：替换 Dog.prototype 后，原先定义在 Dog.prototy...
糟糕，Vite proxy error ECONNREFUSED
最近正在开发一款应用，前端框架是vite+vue, 后台服务也是使用的node+express组合，当一切工作都在顺利进行的时候，不出意外，意外出现了。 当我尝试使用axios直连本地服务地址的时候，丝滑得如同德芙一样。然而每次请求地址都需要拼写全链接–即host+port+service-path，这是一件很愚蠢的事情。 为了让事情变得简单一些，减少重复工作，我和聪明的各位一样决定使用vite的代理。 因为web的地址9000，本地启动的后台服务地址是8080，所以我最初的配置如下： 1234567891011121314export default defineConfig({ # ... 其它配置 server: { host: '0.0.0.0', port: 9000, proxy: { '/api': { target: 'http://localhost:8080/', changeOrigin: tru...