前端代码如何规范编写?

简介: 前端代码如何规范编写?

编写长长长长长的组件

一整个页面只编写1个组件去维护,单个组件代码行数轻松写到1000行以上。

拒绝Ts

坚决不用Ts,甚至将Ts写的项目重构成Js代码。

拒绝hooks

所有组件都用Class组件,拒绝函数组件,拒绝hooks

样式混用和强行覆盖

内联样式与css文件样式混用和覆盖。类名随便起,不要透露结构信息,相同的css代码在各个类上直接复制黏贴一份。遇到冲突的样式强行再覆盖一层。

全面拥抱状态管理器

所有状态都通过类似Redux或Mobx等状态管理器去管理。

不做模块抽象和复用

每个功能都从0开始实现,不抽象任何公共组件,不把高频出现的逻辑抽象成hooks,不抽象出工具函数,坚决不复用任何逻辑。

父子组件多传参,尽可能多层传递

父组件给子组件传非常多参数,然后子组件继续又将这些参数层层往下传递。

单文件开发

将状态、数据、类型、工具函数、网络请求和组件等等全部放入一个文件中。

打破文件组织结构与组件结构关系

虽然组件天然是一个多叉树结构,但相应的文件全部平铺到1层。

不封装网络请求函数

每次请求都创建新的Axios实例,网络请求错误不统一拦截,全部单独catch。

 

到处修改UI组件库内部样式

为了达到设计要求,通过导出类名强行覆盖UI组件库的内部css样式,多用!important魔法。

多用Js代替CSS实现效果

伪类伪元素等坚决不用,动画过渡等效果也必须通过Js实现。

把JSX结构掰开揉碎

直接在JSX上写长函数和复杂参数,至少需要达到一眼看上去稀碎,完全无法在脑中构建出页面的样子。

到处使用微前端

尽可能的把页面拆成一个个单一功能的微前端应用。

不要argue需求

对于产品或设计给到的需求全盘接受,尽力实现交互复杂混乱繁冗的功能,获得技术成就感,做一只不挑食的小白兔。

代码永远不写注释!

目录
相关文章
|
28天前
|
前端开发 JavaScript 开发者
水墨代码:前端川的诞生——在夏日阴雨中启航
【前端川】网站于农历五月初一(2024年6月6日)上线,融合水墨画与现代前端技术,呈现独特的水墨代码美学。创建者陈川分享技术心得与实战经验,网站特色包括水墨风格界面、技术深度解析及实战案例。在夏日雨中启航,"前端川"致力于为开发者提供灵感与帮助,探索前端技术的无限可能。
63 17
|
2月前
|
前端开发 JavaScript API
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
104 3
|
17天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
26 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
4天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
11天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
19 2
|
22天前
|
前端开发 JavaScript 安全
微前端架构采用 TypeScript 提升开发效率和代码可靠性
【6月更文挑战第12天】微前端架构采用 TypeScript 提升开发效率和代码可靠性。TypeScript 的类型安全防止了微前端间的类型错误,智能提示与自动补全加速开发,重构支持简化代码更新。通过定义公共接口和使用 TypeScript 编写微前端,确保通信一致性与代码质量。在构建流程中集成 TypeScript,保证构建正确性。总之,TypeScript 在微前端架构中扮演关键角色,推荐用于大型前端项目。
46 4
|
1天前
|
前端开发 API
支付系统27-------梳理一下支付按钮,前端的代码
支付系统27-------梳理一下支付按钮,前端的代码
|
4天前
|
前端开发 JavaScript Java
高效前端开发技巧:如何优化JavaScript代码执行效率
在当今互联网应用日益复杂的背景下,前端开发者面临着更高的性能要求。本文探讨了一些提升JavaScript代码执行效率的实用技巧,包括优化循环结构、减少内存占用以及利用现代浏览器的优化能力。通过这些方法,开发者可以在保持代码清晰易读的前提下,显著提升应用程序的响应速度和用户体验。
|
14天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
16 0
|
1月前
|
前端开发 JavaScript
综合案例(前端代码练习):猜数字和表白墙
综合案例(前端代码练习):猜数字和表白墙
20 0