- 博客(36)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端修行 - 与后端配合的那些事情
最近总结一下个人作为前端，与后端、测试、以及产品经理、UI设计之间配合的那些事情，想到哪里说到哪里1 关于正确认识项目研发一号位都是后端的这个事情2 丑话说在前面，前端的事情前端自己来负责3 前后端接口规范定义4 前后端高效联调，需要双方深度参与5 首选后端同学来做show case工作6 前后端都可以做的事情，谁来做
2023-02-08 17:25:27
1905
3
原创 vue3开发实践总结
这个项目也算是完整的从0到1开发一个vue3项目，虽然项目不算大，但麻雀虽小五脏俱全，该有的体验也都把玩了一下。总体来说，vue3带来了一些新内容，但还是属于框架内的改动，无法影响到整个前端圈。如果是之前平稳运行的项目，不建议推倒重构到vue3版本，新项目或者小项目重构，可以大胆使用vue3vue3是vue的未来，现在也已经很成熟了，后续的新项目，都推荐使用vue3来做的...
2022-08-31 19:27:40
995
原创 技术管理 - 一定要抓大放小
技术管理者要懂得放权，这是经典个老话题，基本上每个管理的教程中都会体现，而每个管理者也都会遇到这个问题。本文是根据个人的体验，再聊一下这个话题，聊一些可能不一样的事情。
2022-07-26 15:55:20
1923
原创 结对编程实践心得
结对编程（英语Pairprogramming）是一种敏捷软件开发的方法，两个程序员在一个计算机上共同工作。一个人输入代码，而另一个人审查他输入的每一行代码。输入代码的人称作驾驶员，审查代码的人称作观察员（或导航员）。两个程序员经常互换角色。——源自。...
2022-07-24 00:04:54
1599
原创 前端安全 - 小程序接口token加密
我们的小程序属于toB电商类，与金钱密切相关，因此对接口的安全性校验比较看重处于产品性能+开发体验的考虑，我们没有将整体的接口数据都加密，而是每个接口的调用都会加上token，该token采用前后端加密匹配的方式来进行校验具体思路很简单，前后端获取到当前的时间戳time，加上当前用户的sk（小程序登录的），再加上一段前后端约定的文本密钥，进行加密，生成token在全局接口请求的地方统一处理，将所有的请求url上，都挂上sk、time、token这三个参数，而约定的文本密钥不通过网络传输后端拿到这三个参数之后
2022-06-30 20:14:10
3304
原创 做技术，自信不可或缺
自己团队里面的一个前端小鲜肉A君，技术、思维方式、工作效率等各项技能都优秀，但就是有一个缺点，不够自信……不够自信，这个就不好了，对他来说，有两个坏处一是在团队人多的时候说话会紧张，二是不敢与其余的同事争论这个像极了当初刚工作时候的我，我当时工作2年的时候，面对满屋子国家级别地震专家，紧张的话都说不利索；当时刚工作的时候，一旦与别人有争议的地方，都会先心里打鼓，是不是我做错了？这样无疑会影响自己的工作效率，而且容易被甩锅、被抢功，进而影响自己的职业生涯还有一点，领导、同事都喜欢自信的人，你不自信的话，别人怎
2022-06-29 22:34:56
1667
原创 前端安全 - 信任的iframe也有隐患
差不多是3、4年前的事情，不算是经典的前端安全问题，不过实际的界面效果就跟被攻击了一样，算是非常规的前端安全问题前同事，前端大佬F君，在群里跟我们分享一个问题，就是他们的门户网站，嵌入了合作方的广告iframe后，界面打开就直接滚动到这广告的位置了类似于上图，界面打开后，在无任何手动操作的情况下，直接滚动到了广告的位置肯定是这个广告iframe搞的鬼，F君分析他们的iframe源码，想具体找到他们是使用的什么代码去操作的这个，但苦于他们的源码内容比较多且压缩过，一时找不到是哪块代码的影响首先确定这个ifra
2022-06-29 13:47:42
843
原创 前端vs图片4 apng 前端动图的新姿势
APNG（Animated Portable Network Graphics）是一个基于PNG（Portable Network Graphics）的位图动画格式，扩展方法类似主要用于网页的GIF 89a，仍对传统PNG保留向下兼容……APNG与Mozilla社区关系密切，格式标准文档就放在Mozilla网站。——源自百度百科.........
2022-06-27 09:18:33
3647
原创 前端vs图片 3 jpg、png、gif 图片老三样系统总结
作为web图片届的三兄弟，jpg、png、gif多年来一直占据着互联网的绝大部分江山JPEG（）是JPEG标准的产物，该标准由制订是目前最为流行的图片格式，没有之一答：jpg就是jpeg，唯一的区别就是扩展名不同在之前旧的windows电脑上，扩展名不支持4位，故而缩写成.jpg对前端而言，需要通过扩展名判断图片格式时候（比如前端上传图片），需要同时支持 与 jpg图片还有一个扩展名，使用起来也完全没有问题，不过这个使用的人比较少标准JPEG格式此类型在网页下载时只能由上而下依序显示图像，直到图
2022-06-26 17:10:02
543
原创 前端vs图片：2 图片深度、图片分类等基本信息
一般聊起图片的深度，指的都是图片的色深，即色彩深度总结一下，色彩深度（Color Depth）为图像的一个像素可以表示多少个bit的颜色色彩深度越高，可用的颜色就越多，表现出来的画面就越精细除了上面的图片色深，其实图片还有一个位深度，简称位深位深度指的是存储每个像素所用的位数，主要用于存储，单位bit图片位深与色彩模式有关，比如常用的ARGB_8888，位深32位（4字节，8bit = 1byte ）在windows电脑上，右击查看图片的属性，可以查看到位深度的Mac电脑上，，也能看到深度不过这
2022-06-26 14:47:15
1656
原创 前端安全 - 记一次某社区网站的xss
在之前的前端规范 - 前端广义安全规范中聊到xss，就简单带过了昨天逛某社区网站的时候，突然弹了一个弹窗嗯？？？被xss了？当时手贱，直接刷新了网页，换了一批内容推荐，就没有这个弹窗了代码很简单，平路框输入 ，然后提交果然，也有alert弹窗，这块的xss的确没有做防御今天打开社区，之前发的那个xss的消息，下面评论说xss不生效了，已经被防御了再打开了一下，果然已经fix了，效率还是很高的搜了一下那个xss的原贴，跟我的代码差不多，莫非大家都只会这种xss方法？前端安全，还是很重要的，打算专门
2022-06-25 23:44:24
382
原创 前端bug快速定位 - 平稳运行的前端系统，只有某个人那里有问题
大家应对都会遇到一个经典的场景，就是我们做的网站，在所有人的电脑/手机上都运行的好好，结果就某一个同事那里运行会有问题如下list是问题定位的方法，基本是有顺序的查看他使用的链接，是不是完整的链接，有没有url上缺少必要参数或者是不是过期的链接、即将要下掉的域名先切换个通用的测试账号试一下，看看有没有问题查看他当前的用户，是否是、是否是的用户等，然后做相应的处理，比如赋予必要的权限、协助接触被风控这样的话，可以甄别是系统还是浏览器的原因接上一个，如果定位到是浏览器的原因的话，先清除浏览器缓存，然后重启
2022-06-25 12:03:16
160
原创 那些需要传授非前端同事的前端技能
非前端同事，这里主要包括产品、运营等非技术的同学，还有部分测试、后端等同学举例：产品同学看到线上系统出了个错误弹窗，因此@前端同学来看，前端同学一看，这个是接口错误引起的，然后又@后端同学因此，为了让他们更高效的定位问题、减少前端环境问题造成的影响，以及避免少打扰到前端同学，有必要对他们普及一些必要的前端相关技能这个是很重要的，抓包是定位问题的第一步这里我们不需要讲一些等专业而复杂的抓包工具，就打开chrome的控制台，讲解network里面的主要内容即可注：目前chrome的控制台支持了汉化，汉化版
2022-06-24 21:40:22
198
原创 前端小工具 - js模拟键盘、鼠标事件给element form批量赋值
QA同学提了一个小需求，就是能不能帮她们做一个小工具，可以批量赋值的，可以提高她们的输入效率这还不简单？N年前就干过。上来就干，先拿input试试粘贴到console中试一把，结果是界面显示数据设置上去了，但是保存的时候数据获取不到为啥呢？因为之前jQuery是从实际的input取值，然后继续下一步；现在是基于v......
2022-06-24 15:45:44
2120
3
原创 前端规范 - 前端开发规范专栏9篇完成小结
写了一系列前端规范，现在暂停一下，并做一下回顾html css js 三驾马车 3篇前端规范 - html规范前端规范 - css规范前端规范 - JS开发规范开发框架类 1篇前端规范 - vue开发规范开发实践类 5篇前端规范 - git使用规范前端规范 - 注释规范前端规范 - 前端广义安全规范前端规范 - 前后端接口规范前端规范 - 前端项目开发规范因为与业务场景强相关，下列一些博文不太方便作为前端规范来要求团队成员，但是可以作为开发指导借鉴下面的一些前端规范，其实也很重要，个人之前
2022-06-22 23:18:53
180
原创 前端规范 - js开发规范
因为会牵扯到业务逻辑，在实际开发场景中，js开发会占绝大部分，相应的规范细节也比较多限于篇幅原因，加上有eslint的这个利器，本文只讲一些最最常用的规范开启了eslint的项目，可以保证一个项目的底线；没有开启eslint的项目，时间长了大概率惨不忍睹我们做的是引用eslint的，然后在开发中调整成适合自己团队的规则比如 可以关闭两格缩进，html js css三者统一为两格缩进为什么不使用四格缩进保持空行[强制] 文件末尾空行[推荐] 不同模块之间空行[强制] 空格不超过1个[强制]
2022-06-22 21:11:35
665
原创 前端规范 - 前端项目开发规范
好好做业务，提高自己的工程能力根据团队的习惯，制定适合自己的rules比如 可以关闭老项目不做要求，新项目必须使用同时避免用成，那样就毫无意义无需封装一堆请求方法，直接通过统一json方式管理便于统一管理、修改、升级统一导出挂载在Vue原型链上，便于项目中直接访问，如 便于封装请求，以及拦截返回结果并且挂载在Vue原型链上，便于项目中直接访问，工具类文件，统一放置在下uat、pre、prod不同环境的变量参数，统一收纳配置，避免各自为政项目公用组件，放置在下面业务单独使用的组件，放置在业务文件
2022-06-21 15:08:09
516
原创 前端规范 - git使用规范
git规范看起来很简单，但如果执行不好的话，十分容易出问题，比如丢代码、出线上bug前端业务代码，只能创建在前端群组的git仓库中，不允许建在个人名下，不允许创建在其余的地方前端业务代码，owner必须为前端负责人，不接受后端owner负责不允许创建任何内部员工都有权限的公用代码，群组外人员权限需要手动赋予git提交权限已经很敏感，再加上与之挂钩的上线权限，所以授予外部人员权限，采用策略，够用即可个人经历不同的公司，有不同的管理方式，但都有共同的特点 杜绝无意义的提交，方便追踪代码提交格式：scop
2022-06-20 21:50:32
476
原创 前端规范 - html规范
如下为支持w3c标准的最小html构成，缺一不可[强制]2格缩进html、js、css保持统一，均为2格缩进最大宽度也是与js保持统一，一般默认120个字符[强制]属性需要双引号html使用双引号，不能不写，不能写单引号（虽然都可以使用）[强制]嵌套规则块级元素可以互相嵌套，行内元素也可以互相嵌套，行内元素不能嵌套块级元素[强制]自定义标签使用 - 命名为了与自带的标签做区分，自定义元素要使用中横线间隔[推荐]段落注释复杂的业务逻辑模块之间，需要用过注释包裹起来，方便确认代码的起止范围
2022-06-20 16:23:16
422
原创 前端规范 - 前端注释规范
最近做的项目，因为看别人的代码，没有注释，看的简直头疼。代码注释，是一个程序员最基本的素养，因为写的代码，不只是给机器去执行的，还需要给自己看，给继任者看，给同项目小伙伴看注释是一个磨刀不误砍柴工的活，自己阅读起来会快；大家都写注释，互相了解起来方便如果真的开发任务很重，可以把握优先级，把核心的注释写好有的同事，觉得自己命名没问题，逻辑没问题，就可以不用写注释这样的好习惯，的确可以少些一部分注释，不过所以没有理由不写注释，注释写的好，不见得是好程序员；注释写不好，肯定不是好程序员！单vue文件、js文
2022-06-20 12:42:16
2456
原创 前端UI交互 - 中后台系统 - 界面布局原则
前言：界面布局原则，这个属于UI专业的范畴，作为非专业人士，在此不谈专业性质的内容，只聊一下个人开发过程中遇到的、总结的一些布局情况
2022-06-19 13:50:37
1301
原创 前端UI交互 - 中后台系统 - 消息提示类交互
按照交互原则之 “凡事皆有反馈”的原则，对界面的操作，会在操作前做询问，操作后做成功/失败的提示本文会涉及到element ui的Message、MessageBox、Dialog、PopConfirm等组件在系统中做删除、禁用/启用、发布等一键操作的时候，需要提醒用户，避免误操作并且写出相关的提示信息，如果操作之后 ，会有如何后果之类的两者均可以做 confirm操作，不同的是：对此选择，Ant Design的建议是使用 PopConfirm，原因是不阻断用户心智不过，我推荐的是 MessageB
2022-06-19 11:20:24
1198
原创 前端UI交互 - 中后台系统 - 1+4色彩模式
即1种主色+4种辅助颜色，下图源自element ui目前中后台主流的主色彩颜色，都是蓝色调，而且几大UI框架默认的颜色也是蓝色基本上来说，用户操作最多的按钮，或者你最想让用户点的那个按钮比如弹窗底部的按钮，确定按钮是主色又比如表单的提交按钮表单的选中项颜色、tab的active颜色，均使用主色调来展示如果是不分主次，都使用主颜色的话，那就说明没有主颜色了，如下图代表着四种状态，目前前端江湖上基本上统一了四种状态success：成功类，绿色，使用频率第一warning：警告类：黄色dange
2022-06-18 16:26:34
1680
原创 前端UI交互 -前言 作为一个前端，我为什么在乎UI交互
个人可能是个感性的人，做前端这么多年，一直对UI交互这个领域充满了兴趣，而且也觉得很有必要。做过的很多系统，也使用过更多的系统，有的体验很好，有的就很差，还是有差别的。对前端来说，很多规范，开发规范、接口规范、安全规范等，但一般来说UI规范就是UI专门做的事情了，不过UI同学们不如前端开发一样贴近代码+用户，可以说前端天然的从事着UI交互的工作由此想写一篇UI交互规范文档，但由于篇幅比较长，需要一些图片、动画来辅助展示，所以写一个专栏，用于团队规范或者自查这个无需多言，用户体验包括产品功能、产品性能，
2022-06-18 14:05:13
721
原创 前端规范 - css规范
css是个神奇的东西，要精通css很难，但是不精通的话，通过各种拼凑，也能写出正常的界面。所以目前css届的前端网红，目前只有张鑫旭css有性能一说，但影响不大，除非你使用那些没人使用的filter之类的魔法写法。比如选择器不能过长，但你发现选择器比较长的话，也不会有明显的性能问题团队内部推广css规范，主要目的为2个：可维护性+避免样式污染所以相对于JS，css的规范不是那么多，但也值得注意一下............
2022-06-02 09:46:39
548
原创 我经历的前端屎山项目+挽救方法
最近看到掘金一篇好文《如何把前端项目写成一座屎山？》， 看的热泪盈眶，回想起了这么多年我遇到过的前端代码屎山作为一个有代码洁癖的人，挽救失足代码是工作中一大重要事项，在此总结了一下遇到过的失足代码，以及一些修正的方法...
2022-05-17 13:11:51
1016
原创 如何交接（接手）一个前端项目
2018年入职某公司，接手一大哥的前端项目，无任何交接文档，催也不给，无奈之下只好当面沟通交流，前后问了很多问题，导致双方又累又不开心。后来风水轮流转，2020年的时候，他来接手我的一个前端项目，我得知是他接手的时候，并没有准备报复，反而尽可能将交接文档写的完整清晰，这次的交接就比之前顺利的太多太多。一前一后的对比，希望他能提高自己的这方面意识，毕竟工作不仅仅是coding，也需要这种必要的软技能。将自己的项目交接给别人，不管这个项目目前状况如何，毕竟都是自己的心血，肯定都是希望对方善待这个项目。.
2022-05-06 01:00:35
5054
2
原创 前端性能优化自检表 - 2022
⭐️⭐️ 十分重要⭐️ 重要网络层面使用cdn ⭐️⭐️开启合适的缓存 ⭐️⭐️开启gzip ⭐️⭐️开启http2 ⭐️所有的文件（html js css）都是压缩过的 ⭐️⭐️减少域名减少http请求避免重定向避免404减少cookie携带资源层面无重复引用的文件 ⭐️⭐️引用公司公共的cdn文件 ⭐️⭐️无引用三方cdn的文件，如jsDelivr的cdn文件 ⭐️⭐️减少包的引用，如moment、lodash ⭐️⭐️资源预加载架构层面路由异步加载.
2022-05-05 23:35:04
115
原创 前端vs图片：1 图片放在哪里？一个好的图片oss能带来什么提升？
个人直接给出答案：放oss服务器普通的toB/toC项目一堆图片文件，每次打包的时候，都会重新拷贝、上线一遍，影响发版效率不说，主要的是直接放在了跟项目一起的服务器上，对cdn的使用、缓存上来着，远远不够小程序类项目这个就不用多说了，小程序不分包的话，限制2M，而一个图片，很可能比...
2021-12-20 14:23:52
1893
原创 前端vs图片：0 为什么需要重视图片
从流量来看据统计，图片内容已经占到了互联网内容总量的62%绝大部分toC网站，都是图片占流量大头某电商网站商详页，js、css、图片对比如下面三张图JS大小：css大小：图片大小：vue.min.js，压缩后94k，再gzip之后，33k...
2021-12-17 14:28:11
272
原创 前端规范 - vue开发规范
data里面的数据，按模块顺序，分开书写vue2 的option对象，属性需要按顺序排列从上到下的顺序如下：不使用v-html v-for必须添加key不写过于复杂的表达式，使用计算属性来代替一切从简 需要加上scoped作用域在template最外层dom添加样式，style里面，将样式统一包起来。如下面代码命名与语义化如上面架构，尽可能将单vue文件语义化，避免使用命名如果......
2021-12-01 22:38:01
3129
原创 前端规范 - 前端广义安全规范
不仅仅局限为前端老生常谈的xss、csrf等典型性前端安全问题更多的，是前端面临的整体的一些合规、风控、信息泄露等一系列问题
2021-12-01 11:25:41
1158
原创 前端规范——前后端接口规范
通用要求接口命名小驼峰如果不是restfull的接口，需要语义化，例如：getUserInfo、getUserList、createUser、updateUser、deleteUser、uploadUserImg 接口尽量轻巧，前端不需要的数据，不需要返回后端尽量统一风格，禁止单独适配为了避免某些Chrome浏览器广告屏蔽插件的误拦截，不使用ad等广告字眼对前端的要求：前端使用axios统一封装请求方法，做统一请求、拦截安全性要求如果是客户敏感信息，接口绝对需要返回最小
2021-11-30 18:22:13
4093
原创 乐视云大前端技术架构
团队介绍乐视云计算大前端，目前团队人数20+，负责公司全部业务线的前端工作，包括官网、商业平台的前端构建，flash、html5播放器的SDK，以及还处于Alpha阶段的React Native打包App的平台工具——LeVally，包括PC端、移动端的前端项目。在大量的业务实践中，我们团队的人员，经过各种探索、踩坑，形成了如今的技术架构，并且在不断的更新完善中前端规范代码未动，规范先行。可以在上图
2017-07-05 09:33:09
2923
前端小工具 - js模拟键盘、鼠标事件给element form批量赋值
2022-06-24
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人