- 博客(161)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 个人信息-求职[web前端]
我有近近10年开发及6年的管理经验Web前端,所负责的技术团队经历了 Web 前端几代技术变革，参与了几乎，在性能优化、开发效率、所有前端相关项目工程化架构选型上都有丰厚的产出。在上家致力于数据安全前端的相关工作，专注于Vue.js技术栈来推进工程化、微前端、可视化以及低代码技术的落地;负责部门团队建设、技术储备、考核、培养、带教、招聘等。所带团队由3人扩展12人，产品有当初的3个发展到8个以上，具有丰富的大型项目经验。
2024-03-20 15:09:08
201
原创 老大语录三 谈需求变更
• 不要强制定义谁的权利，论述清楚底层逻辑更重要。团队成员有权利知道这些。• 团队只有在一个底层价值观下，才能达到士气上的一致，才不会疲于解释各种现象，安抚各种情绪。• 让感知利害关系的人做决策。且敬畏不同的专业。• 方案要基于人性但不是以此为中心，当人性与客观事实存在矛盾时，需要像现实妥协，但仍然充分考虑人性。需求变更，研发人员最讨厌出现的情形。这个是根本上的反感，即使抛开需求变更带来的计划打乱，可能带来的大家需要加班加点填补变更带来的成本。
2024-03-12 13:11:45
765
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇四]
在这实现第一个组件space[间距]到这里，第一个间隔组件开发完成啦，很简单，按照自己定义的打包规则去处理自己的组件，所以在规则下，开发组件就像自己的开发页面一样，唯一的就是开发组件要有统一的设计和思考，不然长时间下来很难把控。
2024-03-12 13:10:50
297
原创 老大语录二 谈规划
在这之间就有了取和舍，并且也更专业的满足的客户的需求。Tob 类产品需要明确该功能的使用方是谁，一般在什么情况下会切入到该功能，用户看到该功能时下意识希望该功能输出哪些信息，该功能在交互中的期望反馈是什么。比如常见的审批流程，看是就是简单的审批流，往往底层的工作流引擎是需要沉淀的，很多团队也依靠这些沉淀开发出工单系统和OA系统。产品的定位，不同专业功能的敬畏，以及不明确场景下的减法。以上就是对产品功能规划判断的思考，也许有更好的评判公式，但实际经验中的总结也未免不是一种高效的方式来帮助我们来正确的做事。
2024-03-06 18:45:59
534
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇三]
接上文的全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]，进行详细编写rollup打包脚本
2024-03-06 18:36:19
307
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇一]
我们在使用第三方各种UI库，比如element、ant design等提供的ui组件，发现他们打包万变不离其宗，看似复杂其实也不复杂，只要明白其中的原理，抽丝剥茧，就很简单啦！本文接上文的工程项目，进行接下来的工作。当然一个人还是很难和大厂推出的产品进行对比，但是我们不是为了对比，我们是为了提高自己，让能力更近一步。很多博客上博主也有很多讲解rollup的网站不是对api的详细抄袭就是对api文档的解释，基本上没有实战的教程；纯属个人见解，感觉写的很模糊，没有实战性！
2024-02-28 21:54:57
297
1
原创 老大语录一 谈管理
但建立流程时往往会受到部分人员的特殊甚至是个人诉求，如此叠加形成了复杂冗余的流程，更可怕的是这会以所谓“本企业特色”掩盖了优化的动力。之所以会出现对组织人员的素质会有过高的要求，是因为往往事务进展不顺时会发生在某个个体身上，我们往往会开始纠结于某个人如果有更强的职业素质或者综合能力(这里不讨论专业能力不够的情况下)，事故就不会发生。并且一般事物来讲，人才的贡献边际效应一定是递减的。管理逻辑是根据业务需要组建适合的组织，梳理出主要的业务流程(主业务和支撑业务)，制定合适的管理制度约束组织和流程的行为。
2024-02-28 21:53:30
429
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]
本来不想写用的插件单独列出来介绍的，考虑再三还是写吧，正好好好真正的在加深一次印象吧！
2024-02-27 08:25:37
207
原创 手把手教你pkg将Node.js项目打包为可执行文件
突然接到一个演示的需求，背景是这样的，需要在客户那边部署一个项目，但是这个项目需要的服务器的配置比较高，客户那边也没有好的机器，为了看系统的功能性，数据可以不就有真实性，也能慢走，这个时候我给项目经理说，可以考虑只部署前端，但是接口数据怎么来呢？
2024-02-25 06:15:00
1818
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]
一个好的工程化项目，必然有一个好的文档管理，这样才算称得上一个好的工程化，也大大提高后面的工作和文档查找的效率！
2024-02-19 17:18:00
355
原创 全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]
本文从实战出发，初步单间一个为 turbo的基础项目工程项目，本文我估计，是全网唯一一个手把手第一次真正从0到一的完整的教程，纯属个人见解，因为我没有看到像我这么全的！，本文旨意在搭建一个vue3的组件库，后面还有更多的文章信息，我也不知道后面文章什么时候更新，本人很赖！希望搭建鼓励鼓励我！
2024-02-18 20:30:00
319
原创 手把手教你Termius去除登录并解除限制，非常简单
Termius 8 去除登录并解除限制 多协议远程管理软件 for Mac or for Win
2024-01-30 13:58:02
582
原创 Module-Federation[微前端]
微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈（vue，react，jq，ng等）独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性独立运行时 微应用之间运行时互不依赖，有独立的状态管理。
2024-01-04 10:02:13
740
原创 linuxnodejs 20.* 安装问题，version `GLIBCXX_3.4.26‘
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
2024-01-03 10:36:10
775
原创 ES7 至 ES12 实用的新语法
es2016之后有很多很实用的新特性，其中有很多也已经用上了，本次分享想做一个新特性的汇总，希望能对大家有一定的帮助。以下的特性顺序并不是按照时间顺序来的，为了方便记忆，按照数据类型和语法类型做了归类。每个新特性会按照概念，语法和示例几个方面来介绍。
2023-12-22 13:16:29
1492
翻译 尤大的忏悔：Vue 3 启示录
幸运的是，随着 TypeScript 在大多数项目中的可用性，如今，我们能够在类型级别和运行时级别强制执行它，”他说。“对于Vue来说，首先要适应其不断变化的用户群，并适应行业不断变化的需求，我们必须想出一些东西来解决这些新需求带来的新问题，那就是可扩展性，”他说。“这也导致了像 VueUse 这样非常强大的社区努力，它为我们提供了一系列非常有用的实用程序，解决了许多问题，这些问题[并不]真正适合包含在 Vue 核心中，但社区很好地解决了它，”他说。“如今，类型检查是前端解决方案的赌注，”You说。
2023-12-21 10:27:13
535
原创 OxLint 发布了，Eslint 何去何从？
由于最近的rust在前端领域的崛起，基于rust的前端生态链遭到rust底层重构，最近又爆出`OxLint`，是一款基于Rust的linter工具Oxlint在国外前端圈引起热烈讨论，很多大佬给出了高度评价；你或许不知道`OxLint`，相比`ESLint`大家都陌生，你可以认为他们是一样的功能。
2023-12-15 10:56:01
1874
原创 温故而知新篇一
团队分享之设计模式[认知]写在前面的话单例模式工厂模式策略模式代理模式观察者模式模块模式构造函数模式混合模式总结写在前面的话在面向对象软件设计过程中，针对特定问题的简洁而优雅的解决方案。在不同的编程语言中，对设计模式的实现其实是可能会有区别的。（23种）单例模式是保证一个类只有一个实例，并且提供一个访问它的全局访问点。适用场景需要频繁实例化然后销毁的对象创建对象时耗时过多或者耗资源过多，但又经常用到的对象有状态的工具类对象频繁访问数据库或文件的对象资源共享的情况下，避免
2021-10-19 22:02:58
724
8
原创 Rollup 打包通用项目工程库[非TS]，工程化之路
Rollup 打包通用项目工程库[非TS]，工程化之路很长一短时间没有写博客啦！最近刚好有空写了一下，本文侧重于实践，文案描述不太多，总体实现效果如图效果图1效果图2Rollup 的基础概念就不说的，不知道请点击这里看官网在这里就不废话多说啦，直接上代码，下面就是通用的一些基础配置，我们所有的工具类，组件库等都是通过这一块实现的，形成通用的一些配置，形成工程化的模板！下面我以组件库图表为例子，项目工程结构如下：项目目录├─ packages
2021-09-03 08:26:17
1014
1
原创 husky6.* 使用指南、标准化、效率化
husky6.* 使用指南、标准化、效率化前言husky6的版本更新好久啦，但是一些主流的框架都在使用新版的husky，但是好多都是使用的老版本的husky，新版的很少，文档也少。我们团队中正好，搭建新版的组件库，随便研究了一下husky 6.* 的api,并且应用到项目中，这篇文章记录了我加入的指南，避免各猿(媛)友,踩坑。现代原生git钩子变得容易;Husky 提高了提交质量，并提高了规范化！提交或推送时，可以使用它来整理提交消息，运行测试，整理代码等。赫斯基（Husky）支持所有Git钩子
2021-04-07 07:13:36
1224
1
原创 搭建rollup的组件库,研究和实战
搭建rollup的组件库,研究和实战前言今年慢慢的发现大部分主流的前端框架vue和react都采用rollup来打包，但是好多UI组件库，基本没有用rollup来打包，接下来我就基于rollup搭建一个UI库，来发布组件，并且对rollup的一些实践，并记录下来。rollup 介绍官网上是这样说的Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaS
2021-03-29 09:22:02
591
2
原创 开启nginx 用户登录认证
前言最近在做前端工程化的一些东西，形成一种开发文档和组件化的demo,供前端成功可见，其他的部门或者用户通过密码访问，但是这个认证不想太复杂，想来想去，在nginx上配置把，做个拦截，相对来说，没有任何成本，新人入职，可以有个专门的学习和熟悉的过程，大大提高新人的效率和后面的追踪！安装yum -y install httpd-tools生成密码htpasswd -c pass.db idssfe默认在当前位置下会有一个pass.db的文件，我们可以查看该文件cat pass.db
2021-03-22 09:56:04
842
原创 基于md的UI组件文档库研究
写在前面的话自过年以来，由于时间的原因，一直没有更新博客，年前规划的事情，一直没有推动，一直想写个基于vue3的禅思UI库，迟迟为动手，各个方面的原因都有吧，一边工作，一边要忙着考试，心有余力而不足啊！前端组件化是我们前端圈子里最流行的一段话，也是我们前端在开发过程中面临的挑战。所以我们面临的问题很多，学习的有限，所以一边的学习，一边的去研究，把已有的消化为自己的，这才是技术人员的成长之道。我为了后面我自己的禅思UI库做准备，所以我根据已有的，慢慢去琢磨，看看别人的思想和设计，来完成属于禅思的组件
2021-03-15 09:59:58
858
原创 webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs‘
webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs’遇到问题我们在在github项目的Issues看到Error: Cannot find module ‘webpack-cli/bin/config-yargs’ #1948this is the older folder structure i just created a few days ago:所以我们把 webpack-cli 降级到3*的版本 即可
2021-01-26 14:21:05
973
原创 定制团队的eslint rules(二)
@[TOC](定制团队的eslint rules(二))前言在上篇文章中定制团队的eslint rules(一)，已经介绍了eslint的各种参数说明，配置等等，对它有个大致的了解，接下来，我如何定义的一个自己的团队规则配置，以cicada-eslint-config为列。项工程搭建目录树我搭建我的一个cicada-eslint-config 的项目工程，具体目录树如下。cicada-eslint-config├─ index.js├─ package.json├─ README.md└
2021-01-04 11:24:30
265
原创 定制团队的eslint rules(一)
定制团队eslint前言ESLint介绍作用配置方式配置参数[主要针对第二种方式]Rules 说明结尾语前言我们都知道，javascript 是一门动态弱类型语言。现在平台、环境等各种因素，很复杂，造成团队之间的风格，各种各样，有时候也会出现不可避免的错误，造成的排查力度大，团队维护难，团队合作差等等。然而ESLint的出现，帮我们团队解决了代码统一，风格统一等的问题，让我们能在编译中发现代码错误的工具，在团队协作中，避免低级 Bug，产出风格统一的代码。从而提高团队的凝集力。对外让人感觉很正规的印象。
2020-12-27 14:01:47
6139
11
原创 我心中的前端工程化
我心中的前端工程化前言前端工程化四化一架前言最近好像流行一句话，“别更新啦！我学不动啦！”,由这句话不难看出，前端技术一直再不断的更新，技术的不断的都能新的目的，就是为了让页面渲染更快，承载的东西更多等等前端工程化“前端工程化”是什么？四化一架“四化一架”是什么？四化一架之开发规范化四化一架之模块化四化一架之组件化四化一架之自动化四化一架之脚手架...
2020-12-10 20:46:40
255
原创 vue-cli 打包之后的各种部署问题集中地
vue-cli 打包之后的各种部署问题集中地，这里总能找到你自己的方式。前端越来越多的人再使用vue,现在也越来越多的前后端的解耦，所以在这个时代种，前端的人员对于的自己的项目部署，要有充分的知道，也知道的一些各种配置和部署，以应对后面的变化，以下的部署方式都是自己通过实现的一些整理方式。第一种分离式部署部署到nginx上在nginx 上部署项目是前端比较常见的，也是比较大众的，市面上大部分都在这上面部署的！下面让我们看下如何在nginx 上配置。部署在根目录下面，比如你访问的是htpp:/
2020-12-02 13:37:54
1024
原创 在前端里，谁的位置不可少！怎么提高中标率？
在前端里，谁的位置不可少！怎么提高中标率？前言最近一直在公司的事情，因为我们组的2个人请的长期假期，造成前端的资源一度紧张，又是临近年终，公司各个产线忙各种招标的事情，而招标的事情是要开发一个针对招标需求的一个系统，说白拉就是开发一个不需要后端的支持的一个前端系统，包括数据尽量真实，前端业务尽量完美！哎，压力山大…,默默吐糟产品经理…其实在我没来这家公司之前，我都会遇到一个场景，就是项目经理，总是追着前端问，开发的怎么样拉？今天做多少拉？能看吗？等等…，项目经理的各种炮弹，轰炸而来！这时，作为前
2020-11-23 19:56:17
275
原创 vuepress 热更新失效研究
vuepress 热更新失效研究问题开发时修改/docs目录下的.md文件后触发热更新本文提供2中方案修改第一种 安装依赖 watchpack$ npm install -D watchpack这种方法 不能更新config 的一些配置，如果修改拉，必须重新运行第二种 修改package.js 种的命令官网上是这样的$ "dev": "vuepress dev docs"改为这样的$ "dev": "vuepress dev docs --temp .temp"这种方法是通
2020-11-02 20:32:44
4315
10
原创 前端工程化研究之npm私服
前端工程化研究之npm私服前言由于公司内部项目开发，处于隐私保护的需要，不想将自己封的包推到npm社区，，但又急需要一套完整的包管理工具来管理越来越多的组件，模块，项目；还有经常下载一些npm包，有时候下载不下来，有时候下载，下来运行报错，各种坑，还有内部git 环境ci/cd 自动部署耗时过程，就把公司使用频繁的一些包弄到内部环境，有内部环境下载，会更快，也不会出现下载不下来的情况！经过多次调研，npm有各种各样的私服方式，因为我们对这一块看的也不是很重要，也没有必要花太多时间在这上面，就用一个简单
2020-09-09 18:23:53
3020
2
原创 前端工程化研究之数据mock化
前端工程化研究之数据mock化相信大家都知道，前后端分离最的好处就是各司其职，效率更高。我们都知道，在早些年，也就是”三剑客“时代，往往等待后端开发完成之后，前端才能完全介入开发工作，有冲淡测试数据的角色。前端的眼里越来越大，往往项目的延期，推到前端的角色上，大部分的项目开发，往往都是前期很轻松，等到快上测试的时候，就是各种加班，更有甚者通宵，这又是谁的过呢？前端、后端？各种责任的推卸。开发的周期后端和前端不是同步进行的，造成开发的周期扩大，成本的增加；前后端的分离开发，按照规范执行，事半功倍，效率、成本
2020-09-07 16:07:05
2099
2
原创 前端工程化研究
前端工程化研究前言随着互联网的迅速发展，这几年进化速度之快让人咂舌，很多前端工程师都不禁吐槽“学不动了”。如今前端可谓包罗万象，产品形态五花八门，涉猎极广，各种各样的框架和库，随着web业务日益复杂化和多元化，UI的要求变高，从WebPage模式为主转变为WebApp模式，也从有混合模式开发到分离式开发的转变，对前端工程师的能力越来越来高，能力和层次已经不是 HTML、CSS、JS 前端三剑客仗剑那个时代了，我记得在15年的时候我在上海，当时JS 框架以 jQuery 为主，less 基本都不用，而我
2020-08-25 17:51:11
2160
6
原创 前端微服务化研究(六)：沙盒实现
在写这个之前，我们先说下fetchfetch什么是fetch: 在msdn上是这样说的，提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与
2020-08-21 18:03:53
3424
4
原创 基于 TypeScript + Rollup 构建类库和发布npm
基于 TypeScript + Rollup 构建类库和发布npm建立项目工程$ mkdir virtual-list$ cd virtual-list$ npm init -y$ mkdir src$ cd src$ type nul>index.ts$ cat <<EOF >.gitignore > node_modules > EOF安装和配置 typescript安装依赖$ cd virtual-list$ npm inst
2020-08-14 15:51:47
6531
5
原创 elementUI之el-select多选tag数值问题，研究和改造
写在前面的话我们在使用官网的UI组件的时候，总会遇到这样活着那样的展示问题，这些虽然都是小小的问题，但是产品经理就是非要和你过不去，说这些不是我想要的样子，而我们就是因为这个小小展示问题，功能没问题，就是要花很大的时间，将官网上的组件进行一顿改造，其实我们也很欲哭无泪啊！毕竟组件不是我们开发的，开发一套组件也不是一朝一夕能完成的。所以我们只能默默的去改造，改造的过程，心里也不知道埋怨多久啦！下面我改造和研究的一些组件的问题，以select 多选tag 问题！使用过程我们用的是element-ui 的
2020-07-21 17:15:02
8659
6
原创 基于select下拉分页，查询，回显，默认值研究和以及实现
基于select下拉分页，查询，回显，默认值研究和以及实现前言随着vue的技术越来越成熟，前端圈子里涌现出很多UI库，正整用到自己项目中和业务中的聊聊无几，我们公司用了element UI 框架，真心不想吐槽，用别人的ui框架，只能默默的忍受啊，哈哈！在项目中我经常用到select选择框，在下拉数据比较多的情况下很容易造成浏览器的吃力，特别在表格中，会生成很多如下dmo,造成大量的dom树,如下图在一般情况下，表格中的列特别多，分页的话一般，也有20条吧，相当于20个dom,如果分页点击，生成的更
2020-06-15 20:57:14
2883
2
原创 高级工程师必学，AST实践和研究[一]
高级工程师必学，AST实践和研究[一]前言通过前面的文章(聊一聊 Javascript 中的 AST)，我们知道了什么是AST,以及AST在项目中的实践和应用的重要性，但是我们如何去写一个自己的模块和插件呢？这边文章教大家去写一个简单的demo,由简单入深，才能更好的去了解和研究AST一步一步的揭开面纱。背景随着互联网技术的不断进步，技术的不断更新和发展，我们之前老的项目往往无法去跟...
2020-02-06 17:55:28
2396
1
原创 webSocket封装，心跳检测+断线重连基于ES6 class
ES6 class 封装websocket 使用介绍在《菜鸟教程中》这样介绍WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的...
2020-01-16 12:13:39
8049
12
Ref Effect baseHandler reactive Proxy Vue 3
2024-01-04
mvvm双向绑定原理和实现
2020-03-20
websocket封装使用心跳检测+断线重连
2020-01-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人