![](https://img-blog.csdnimg.cn/20200814173510181.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
禅あ思之研发管理
文章平均质量分 77
各种规范和代码效率以及工程化
禅思院
靡不有初,鲜克有终
展开
-
前端工程化研究
前端工程化研究前言随着互联网的迅速发展,这几年进化速度之快让人咂舌,很多前端工程师都不禁吐槽“学不动了”。如今前端可谓包罗万象,产品形态五花八门,涉猎极广,各种各样的框架和库,随着web业务日益复杂化和多元化,UI的要求变高,从WebPage模式为主转变为WebApp模式,也从有混合模式开发到分离式开发的转变,对前端工程师的能力越来越来高,能力和层次已经不是 HTML、CSS、JS 前端三剑客仗剑那个时代了,我记得在15年的时候我在上海,当时JS 框架以 jQuery 为主,less 基本都不用,而我原创 2020-08-25 17:51:11 · 2183 阅读 · 6 评论 -
漫谈CodeReview
写在前面的话话说我为什么突然想写这篇文章呢?是有前奏的,在一次项目的重构的过程中,让我发现,代码的质量无法保证,后期的bug各种花样,测试精疲力竭,抱怨开发,开发抱怨项目负责人。来回的踢皮球!有人说,框架构建的时候,不会控制代码规范吗?严格控制编码校验吗?比如前端js,html,css等代码检查工具,通过这些不就控制啦吗?话虽如此,但是,这些工具也不是万能呢?前期开发,是团队的配合,每个人都好自...原创 2019-01-06 22:14:19 · 2548 阅读 · 1 评论 -
mac 11 变编译安装nginx
记录一次安装过程。原创 2024-07-04 20:53:24 · 124 阅读 · 0 评论 -
老大语录二 谈规划
在这之间就有了取和舍,并且也更专业的满足的客户的需求。Tob 类产品需要明确该功能的使用方是谁,一般在什么情况下会切入到该功能,用户看到该功能时下意识希望该功能输出哪些信息,该功能在交互中的期望反馈是什么。比如常见的审批流程,看是就是简单的审批流,往往底层的工作流引擎是需要沉淀的,很多团队也依靠这些沉淀开发出工单系统和OA系统。产品的定位,不同专业功能的敬畏,以及不明确场景下的减法。以上就是对产品功能规划判断的思考,也许有更好的评判公式,但实际经验中的总结也未免不是一种高效的方式来帮助我们来正确的做事。原创 2024-03-06 18:45:59 · 567 阅读 · 0 评论 -
老大语录一 谈管理
但建立流程时往往会受到部分人员的特殊甚至是个人诉求,如此叠加形成了复杂冗余的流程,更可怕的是这会以所谓“本企业特色”掩盖了优化的动力。之所以会出现对组织人员的素质会有过高的要求,是因为往往事务进展不顺时会发生在某个个体身上,我们往往会开始纠结于某个人如果有更强的职业素质或者综合能力(这里不讨论专业能力不够的情况下),事故就不会发生。并且一般事物来讲,人才的贡献边际效应一定是递减的。管理逻辑是根据业务需要组建适合的组织,梳理出主要的业务流程(主业务和支撑业务),制定合适的管理制度约束组织和流程的行为。原创 2024-02-28 21:53:30 · 464 阅读 · 0 评论 -
手把手教你pkg将Node.js项目打包为可执行文件
突然接到一个演示的需求,背景是这样的,需要在客户那边部署一个项目,但是这个项目需要的服务器的配置比较高,客户那边也没有好的机器,为了看系统的功能性,数据可以不就有真实性,也能慢走,这个时候我给项目经理说,可以考虑只部署前端,但是接口数据怎么来呢?原创 2024-02-25 06:15:00 · 2527 阅读 · 0 评论 -
vscode护眼色
最近写代码太累,眼睛疲劳,修改写主题配色最近这边文章本人投诉侵权啦,也无所谓啦,反正这篇文章该更新啦,现在我的vscode 配置基本大变化啦!配置开发插件提高工作效率插件安装参考文章大前端插件集合tips: 为了减少系统盘的大小或者后期重装系统造成的一些插件丢失,告诉大家一个好方案,因为vscode 可以解压的方式运行,下载下来,把目录弄到非系统盘,我的在E:\install_path\V...原创 2024-02-21 20:00:00 · 1210 阅读 · 0 评论 -
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 · 926 阅读 · 0 评论 -
OxLint 发布了,Eslint 何去何从?
由于最近的rust在前端领域的崛起,基于rust的前端生态链遭到rust底层重构,最近又爆出`OxLint`,是一款基于Rust的linter工具Oxlint在国外前端圈引起热烈讨论,很多大佬给出了高度评价;你或许不知道`OxLint`,相比`ESLint`大家都陌生,你可以认为他们是一样的功能。原创 2023-12-15 10:56:01 · 1957 阅读 · 0 评论 -
温故而知新篇十一
HTTP缓存前言HTTP缓存强制缓存协商缓存对比优缺点前言当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有“要请求资源”的副本,就可以直接从浏览器缓存中提取而不是从原始服务器中提取。常见的http缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力。http缓存都是从第二次请求开始的。第一次请求资源时,服务器返回资源,并在respone header头中回传资源的缓存参数;第二次请求时,浏览器判断这些请求参数,命中强缓存就直接200,否则就把请求参数加到reques原创 2022-03-22 23:45:00 · 299 阅读 · 0 评论 -
你所不知道的文件上传更安全的类型判断
你所不知道的文件上传更安全的类型判断前言在项目的实现过程中,大多数的前端在文件上传的的业务需求的实现过程中,就是简单的文件上传,也就是在表面上判断文件的后缀名来实现,例如:图片的校验,只需要判断后缀名为.jpeg、.jpg、.png等等,或者通过原生的html标签限制,如<input type="file" accept="image/*" />或者第三方的UI组件也是这个原理;其实我们都知道,这样的逻辑判断是没有什么问题,也没有任何逻辑问题,这只是在常规的情况下,如果一个黑客,当然不会用原创 2022-01-18 19:45:00 · 1598 阅读 · 0 评论 -
温故而知新篇十
JavaScript的原型和原型链什么是原型原型对象、实例、构造函数的关系proto和prototype构造函数Object和Function原型链原型链的终点什么是原型原型是一种对象属性,允许对象在彼此之间继承通用功能。 所有JavaScript对象都可以从Object.prototype继承属性和方法。 甚至原型本身也具有继承更多属性的能力,即另一个原型,也称为prototype chaining可以让所有的对象实例共享它所包含的属性和方法。原型对象、实例、构造函数的关系每个构造函数原创 2022-01-17 06:30:00 · 263 阅读 · 0 评论 -
温故而知新篇六
Express框架实战Express简介如何搭建一个服务中间件介绍路由&过滤器模板引擎实际业务场景Express简介Node(正式名称 Node.js)是一个开源的、跨平台的运行时环境,有了它,开发人员可以使用 JavaScript 创建各种服务器端工具和应用程序。此运行时主要用于浏览器上下文之外(即可以直接运行于计算机或服务器操作系统上)。据此,该环境省略了一些浏览器专用的 JavaScript API,同时添加了对更传统的 OS API(比如 HTTP 库和文件系统库)的支持。nod原创 2021-11-26 21:48:10 · 1033 阅读 · 0 评论 -
温故而知新篇五
你可能不知道的CSS写在前面的话只是团队的一种分享模式,不在于技术的高低,只在于这次分享的意义,也是大家坐在一起创聊的一种方式,在于活跃气氛,不外乎工作之余的一种娱乐方式tips文本缩进,块级用text-indent,内联用margin-left文本缩进,块级用text-indent,内联用margin-leftCSS 计数器CSS 计数器通过一个变量来设置,根据规则递增变量。使用计数器自动编号:counter-reset: 创建或者重置计数器counter-increme原创 2021-11-07 22:00:00 · 170 阅读 · 0 评论 -
温故而知新篇四
设计原理之 心智模型三大模型万事万物的认知常识,通过经验或是习惯已经告知了用户认为产品是怎样工作的形成路径运作原理特征运用总结三大模型心智模型万事万物的认知常识,通过经验或是习惯已经告知了用户认为产品是怎样工作的形成路径心智模型的形成运作原理特征运用总结设计的目的是最大程度地满足用户需求,在以“用户为中心的设计”理念下,通过对用户心智模型的研究来理解产品的用户,设计出更加适宜用户使用的产品。最终将用户心智模型应用于产品设计中的理论与方法,旨在有效提升企业产品开发与创新原创 2021-11-02 22:00:00 · 103 阅读 · 0 评论 -
温故而知新篇三
团队分享之CSS 动画CSS动画的优缺点CSS3 @keyframes 规则CSS3 动画animation(动画)属性兼容性优化惯性:透视节奏跟随更多动画DemoCSS动画的优缺点优点:简单、高效声明式的不依赖于主线程,采用硬件加速(GPU)简单的控制keyframe animation播放和暂停缺点:不能动态修改或定义动画内容不同的动画无法实现同步多个动画彼此无法堆叠CSS3 @keyframes 规则指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式原创 2021-10-22 19:33:25 · 465 阅读 · 12 评论 -
husky6.* 使用指南、标准化、效率化
husky6.* 使用指南、标准化、效率化前言husky6的版本更新好久啦,但是一些主流的框架都在使用新版的husky,但是好多都是使用的老版本的husky,新版的很少,文档也少。我们团队中正好,搭建新版的组件库,随便研究了一下husky 6.* 的api,并且应用到项目中,这篇文章记录了我加入的指南,避免各猿(媛)友,踩坑。现代原生git钩子变得容易;Husky 提高了提交质量,并提高了规范化!提交或推送时,可以使用它来整理提交消息,运行测试,整理代码等。赫斯基(Husky)支持所有Git钩子原创 2021-04-07 07:13:36 · 1257 阅读 · 1 评论 -
定制团队的eslint rules(一)
定制团队eslint前言ESLint介绍作用配置方式配置参数[主要针对第二种方式]Rules 说明结尾语前言我们都知道,javascript 是一门动态弱类型语言。现在平台、环境等各种因素,很复杂,造成团队之间的风格,各种各样,有时候也会出现不可避免的错误,造成的排查力度大,团队维护难,团队合作差等等。然而ESLint的出现,帮我们团队解决了代码统一,风格统一等的问题,让我们能在编译中发现代码错误的工具,在团队协作中,避免低级 Bug,产出风格统一的代码。从而提高团队的凝集力。对外让人感觉很正规的印象。原创 2020-12-27 14:01:47 · 6200 阅读 · 11 评论 -
项目中利用npm生成package.json的那点事儿
前言随着互联网的飞速发展,各种技术日益更新,迭代…。而前端无疑是变化最大的一种,做前端的人都知道nodejs,而nodejs有很多的依赖,那么我们在新建一个项目的时候,如何快速的导入这些依赖从而创建一个nodejs项目呢???前端入门级系统环境Linux stone 4.15.0-29deepin-generic #31 SMP Fri Jul 27 07:12:08 UTC 201...原创 2019-02-12 19:04:45 · 9378 阅读 · 0 评论 -
如何在chrome中安装Vue调试神器vue-devtools
前言最近研究一下vue-devtools,感觉还蛮不错的,顺便尝试安装了一下。vue-devtools是什么?vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。系统环境vue-devtools如何安装?第一种安装方法,考验自己的动手能力,对于我们开发来说,这都不是事儿,因为在安装成功的那一刻,有一种自豪的感觉。在gi...原创 2019-02-13 16:02:54 · 3096 阅读 · 0 评论 -
vscode中的插件Settings Sync(设置和插件同步)基本用法
打开vsode ,点击下面红色区域在下面红色区域输入 Settings Sync搜索,安装,完成之后重启打开github 登陆Github>Your profile> settings>Developer settings>personal access tokens>generate new token,输入名称,勾选Gist,提交 .[参照下下面...原创 2019-03-12 18:11:47 · 4357 阅读 · 0 评论 -
Git-命令-新建,删除本地和远程分支,更改本地和远程分支的名称
查看项目的分支们(包括本地和远程)// 全部分支$ git branch -a// 本地分支$ git branch删除本地分支$ git branch -d <BranchName>删除远程分支$ git push origin --delete <BranchName>本地创建新分支并切换到新分支$ git checkout -b feat/...原创 2019-08-22 13:56:03 · 3947 阅读 · 1 评论 -
前端开发者收集必备,总有你用到的
框架官网git官网npm官网React官网Redux官网React RouterVue官网NodeJS官网uni-appDvaJSjQuery官网jQuery API中文文档ZeptoJS官网cheerioJS安装地址RequireJS官网力扣JS题库ES6入门(阮一峰大佬的)babel(将ES6代码转为ES5代码)处理时间与日期的JS库Lodash你可能不...原创 2019-08-29 19:04:36 · 2111 阅读 · 2 评论 -
vscode高效开发方案【护眼绿主题,插件,和控制台】研究
最近写代码太累,眼睛疲劳,修改写主题配色插件安装参考文章大前端插件集合配置主题启动vscode把下面的代码放在配置中"workbench.colorCustomizations": { "foreground": "#519657", "editor.background": "#c8e6c9", "editor.lineHighlig...原创 2020-04-28 10:59:17 · 48835 阅读 · 9 评论 -
vscode大前端适用插件集合
vscode大前端适用插件集合你好! 这是极大提高开发效率的Visual Studio Code插件集合。VS DocBlockr: Atom插件Docblockr移植版,非常好用的注释插件Visual Studio IntelliCode - Preview : 提供AI支持(强化你的代码智能提示),微软出品Surround : 快速包裹代码并且添加对应的条件语句koroFileHe...原创 2019-05-27 09:52:40 · 5045 阅读 · 0 评论 -
前端异常监控解决方案研究
前端监控包括行为监控、异常监控、性能监控等,本文主要讨论异常监控。对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来,使监控本身统一于监控系统。因此,即使只讨论前端异常监控,其实也不能严格区分前后端界限,而要根据实际系统的设计,在最终...转载 2019-04-15 15:41:21 · 1627 阅读 · 0 评论 -
Commit message 的格式说明
每次提交,Commit message 都包括三个部分:Header,Body 和 Footer。其中,Header 是必需的,Body 和 Footer 可以省略,不管是哪一个部分,任何一行都不得超过72个字符(或100个字符)。这是为了避免自动换行影响美观。 <type>(<scope>): <subject> // 空一行 <body&g...原创 2019-03-13 17:33:35 · 6486 阅读 · 0 评论 -
git 加入钩子和提交信息规范化
用到的包yorkie , cz-conventional-changelog-lint,commitizen,conventional-changelog-cli初始话一个空的项目新建文件夹gitHooks, 在该目录下进行npm init安装yorkienpm install yorkie -D安装commitizenCommitizen是一个格式化commit m...原创 2019-03-13 17:36:17 · 3641 阅读 · 0 评论 -
前端项目使用svg的icon的制作流程
我们都知道任何一个项目到上线经过一段时间的UI设计,开发,测试等流程,为了统一管理项目中所使用的icon,也是为了后期的更改,更为了多人开发的使用,这样统一引用,给开发带来很好的收益以及减少开发时间,也为了后期更好的维护,下面我把阿里云上步骤弄到博客中.svg的icon的制作制作规则闭合: 将会带来全新的写作体验。合并: 如果有两个以上图形,或者有布尔关系的图形,请对图形合并并且扩展。...原创 2019-01-29 16:04:35 · 5596 阅读 · 4 评论 -
vue-cli3引入svg-icon正确姿势
在博客的前边已经介绍前端svg-icon的使用.为啥要这样做,我们都知道任何一个项目到上线经过一段时间的UI设计,开发,测试等流程,为了统一管理项目中所使用的icon,也是为了后期的更改,更为了多人开发的使用,这样统一引用,给开发带来很好的收益以及减少开发时间,也为了后期更好的维护,下面我以项目实列来说下(vue-cli3脚手架构建):项目构建生成目录:在构建的项目中在src的compone...原创 2019-01-22 10:18:10 · 10100 阅读 · 2 评论 -
前端icon使用[svg]
前端项目使用iconfont字体库管理相关图标。增加新的图标到相关项目步骤一:搜索相关图标;步骤二:加入购物车;步骤三:进入购物车,添加至相关项目;步骤四:进入相关项目,下载至本地;步骤五:覆盖相关项目中的src/style/fonts/目录文件即可。项目中引用图标项目中采用symbol引用方式这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可...原创 2019-01-03 13:37:40 · 6183 阅读 · 3 评论 -
前端开发规范[项目工程篇]
项目工程规范1. 文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。命名规范:参考 Code Guide全部采用小写方式, 以下划...原创 2019-01-03 13:33:22 · 2633 阅读 · 3 评论 -
前端开发规范[js篇]
js规范协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&amp;amp;表现&amp;amp;行为; 共用js工具类, 协作开发过程中, 此文件不可随意修改.命名格式全局变量, 使用全大写字母,并用下划线分隔单词 var CONST_NAME_LIKE_THIS = {}; let CONST_NAME_LIKE_THIS ={}; ...原创 2019-01-03 13:30:54 · 4424 阅读 · 3 评论 -
前端开发规范[css篇]
css规范协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&amp;表现&amp;行为; 共用css文件base.css书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改.基本原则 * 1. 自定义样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中...原创 2019-01-03 13:27:32 · 2619 阅读 · 2 评论 -
前端开发规范[html篇]
html规范协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&amp;amp;表现&amp;amp;行为; 共用html组件, 协作开发过程中, 此文件不可随意修改.1. 代码格式* 每个块级、列表、表格元素单独占一行,每个子元素都相对父元素缩进。* 纯文本在 HTML 标签结束之前不要换行。* 缩进: 统一两个空格缩进(总之缩进统一即可),不...原创 2019-01-03 13:25:12 · 2649 阅读 · 3 评论 -
如何友好的利用XHR的状态,实现前后端的桥梁
欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体...原创 2019-01-21 11:40:28 · 2762 阅读 · 1 评论 -
vue-cli4.* npm install 报错
vue-cli4.* npm install 报错问题描述: Unexpected end of JSON input while parsing near '…"解决办法:(1)npm install --registry=https://registry.npm.taobao.org --loglevel=silly(2) npm cache clean --force(3) npm...原创 2019-12-16 18:10:07 · 1236 阅读 · 1 评论 -
Github标星的Chrome 插件,开发者必备
Github标星的Chrome 插件,开发者必备对于web工程师来说,Chrome已经是Web开发中使用最多的浏览器,然而各种各样的Chrome插件层出不穷,成为web工程师的尖锐武器。markdown-here一键把简书的markdown文章,直接转换到头条文章编辑器中,就可以用这一款神器Tampermonkey油猴(Tampermonkey)是浏览器的插件,油猴...原创 2020-07-21 17:59:07 · 3181 阅读 · 1 评论 -
vue-cli4更新历程
4.0.1 (2019-10-16)???? Bug Fix@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex, @vue/cli-service-global, @vue/cli-ui-addon-webpack, @vue/cli-ui-addon-widgets, @vue/cli-ui, @vue/cli...原创 2019-10-17 09:34:12 · 7868 阅读 · 3 评论 -
认识Web Workers
前言在一个html文件中,我们通常会看到三种模块[html·css·js],一个好的页面,一般都这样的规则,css放在head中,js放在最下面,为啥要这样做呢?其实我们都知道页面在加载过程中从上到下的过程,如果js在加载的过程中,如果报错,一个页面的加载过程就会终止掉,有可能看不到页面,影响体验。从上面我们不能看出,页面在加载的过程中js和UI页面会共用一个线程,而js在执行时会阻塞浏览器...原创 2019-05-23 13:39:37 · 2870 阅读 · 0 评论