CuiGZ的代码规范规则

最新推荐文章于 2025-11-25 11:55:40 发布
原创 最新推荐文章于 2025-11-25 11:55:40 发布 · 474 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #代码规范

本文探讨了模块化组件化开发的最佳实践，包括组件命名规则（首字母大写，驼峰命名），推荐使用Element UI，强调了CSS的SCSS标准和ESLint代码风格。同时，指南涵盖了新文件夹命名、代码注释规范和不同技术领域的标签分类，如前端开发、后端开发、CSS框架等。
1.模块化 组件化开发
2.组件首字母必须要大写
3.采取驼峰命名规则（小驼峰，大驼峰）
4.优先使用element
5.代码注释标准
6.css以scss为标准（css采用普通的system-list模式）
7.新写的文件夹以小写字母为准（如很多单词构成:：启动驼峰命名格式）
8.使用eslint规范代码风格
模块化CSS
KEEP CODING
10-26 1104
模块化CSS是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且相互之间没有依赖关系，当修改其中一部分CSS时，不会对其他部分产生意料之外的影响。
【系统学习css】跟着element-ui学习css的命名
有一棵树的博客
05-11 760
每日鸡汤，每一个你想要学习的念头都是未来的你向自己求救 写css 最烦人的就是给class起名字了，这里不提用横线还是下划线，我来跟着element-ui 学习一下都可以起什么名字，分割线都用下划线 首先是整个网站的最最最外层，可以起名layout 不要一开始就用container, layout 布局肯定是最外层； 然后主要的模块分节可以使用section 然后横向的可以用row; 纵向用column 缩写就是col, 还可以用horizontal/vertical 对应的缩写hor/vert..
Css模块化的规范
weixin_43837268的博客
06-13 242
一.CSS命名规范： 1.stream 2.streamitem 3.stream-content 二.BEM规范： .block {} .block__element {} .block--modifier {} 例如： <div class="search"> <input type="search__btn search__btn--active" /> </d...
CSS - BEM架构（规范）
weixin_46086458的博客
03-21 819
做BEM规范的一个好处就是在维护或者debug的时候，开发者可以根据这种规范化的命名快速找到对应的css代码。BEM 的命名约定通常是通过块__元素–修饰符（如 block__element–modifier）来命名 CSS 类，以清晰地表达一个元素的层级结构和状态。BEM 架构有助于提高前端代码的可维护性和可重用性，减少选择器的嵌套，避免选择器的冲突，并提供更清晰的命名结构，使得代码更易于阅读和理解。：块是一个独立的实体，它在页面中有自己的意义并且可以独立存在。：元素是块的一部分，没有独立的意义。
Vue音频处理开发
2509_93946247的博客
11-24 446
举个例子，在data里定义一个audioContext对象和一个isPlaying布尔值，再通过methods里的函数来触发播放或暂停，界面状态自动更新，不用手动操作DOM。另外，Vue 3的setup语法糖里，用reactive定义播放器实例，比Options API更灵活，尤其是需要动态添加音频滤镜时。记得控制帧率，太高了卡顿，太低了动画跳帧，我一般用60fps做节流。另外，音频缓冲过长会影响体验，可以用Vue的异步组件配合loading状态，先显示占位图，等解码完成再启用控制按钮。
ts-属性修饰符，接口(约束数据结构)，抽象类(约束与复用逻辑)
岂不闻
11-23 761
类的基础知识，抽象类与接口(interface)对比，interface接口实现约束数据结构（组件通信传参，定义口返回数据结构），抽象类(约束数据结构以及复用逻辑)
Vue3项目实战
2509_93946337的博客
11-24 353
还有个细节，Pinia的store里用actions定义方法时，不用写commit了，直接赋值就行，比Vuex简单不少。举个实际例子：订单列表页需要支持按状态筛选和导出Excel，我单独建了个useOrderTable.js，里面用ref存筛选条件，computed处理过滤后的数据，onMounted里调接口初始化。我在用户管理模块里试过，把一个权限列表从数组改成树结构，用reactive包裹后，随便增删改查都能实时渲染，连watch都不用额外配置。部署时遇到个诡异问题：开发环境跑得好好的，生产环境白屏。
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Rockandrollman的博客
11-23 141
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Vue发布
2509_93943467的博客
11-24 199
以前在列表渲染成千上万条数据时，页面总会明显卡顿，但现在用新的函数处理数据，连滚动都流畅了许多。我测试了一个简单的待办应用，用Vue 3的函数配合和，代码量减少了30%，而内存占用却降低了。更惊喜的是，Tree-shaking支持现在更智能了，打包时只引入用到的功能，最终bundle大小能缩小40%以上。社区里已经涌现出许多基于Vue 3的UI库，比如PrimeVue和Quasar，它们都利用了新API的优势，组件更轻量、可定制性更强。举个例子，我以前处理用户认证时，得在多个组件里重复写登录状态的逻辑。
Vue移动应用案例
2509_93942886的博客
11-24 361
从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。
Vue文档
2509_93942660的博客
11-24 286
简单说，基础类型用ref，引用类型用reactive。至于emit，现在都推荐用defineEmits定义事件类型，TypeScript支持杠杠的。遇到复杂业务逻辑时，getter能帮大忙，把计算属性抽到store里，组件代码顿时清爽不少。如果组件用了v-if，这时候元素可能还没渲染，得用nextTick兜底。比如按钮重复点击问题，用v-throttle直接解决，比在每个methods里写防抖逻辑方便多了。比如v-for和v-if的优先级问题，比如key的重要性，这些看似基础的概念往往最能考验功底。
Vue深度学习
2509_93946115的博客
11-24 292
有个记忆技巧：想象组件是个机器人，onCreated是通电，onMounted是第一次启动，onUpdated是软件升级，onUnmounted就是断电关机。不过要注意Proxy的局限性，比如原始值得用ref包装，不然响应式会失效。比如做个图片懒加载v-lazy，或者权限校验v-permission，把通用DOM逻辑封装成指令，代码复用率直线上升。要注意指令的生命周期和组件生命周期的执行顺序，这点官方文档说得不太明白，需要自己测试。建议大家在掌握基础后，多看看原理层面的东西，这才是提升编程能力的关键。
Vue视频处理案例一、核心思路与基础布局
2509_93942763的博客
11-24 169
从视频的加载、播放控制，到进度条的交互、canvas的实时绘制，每个环节都可能遇到各种兼容性和性能问题。最终实现的效果是用户可以流畅地拖动进度条选择封面，选中的封面可以通过canvas的toDataURL方法转换成base64字符串，然后提交到后端保存。另外，为了更好的用户体验，可以在视频加载期间显示一个loading状态，在视频出错时给出友好提示。我们需要在用户拖动进度条时，实时地将当前时间点的视频帧绘制到canvas上。在实际测试中发现，如果每次鼠标移动都立即绘制画面，在低配电脑上会导致明显的卡顿。
Vue游戏开发案例
2509_93946396的博客
11-24 131
先说核心设计。拼图状态用了个二维数组存储，每个元素记录方块数值和当前位置。Vue的reactive()包装后，任何数据变动自动触发视图更新——这就省了手动操作DOM的麻烦。移动判定逻辑写在computed里，实时计算空白块相邻的可移动方块，用高亮边框提示用户。移动动画是关键体验点。刚开始直接用v-if控制渲染，结果方块跳闪严重。后来改用<transition-group>配合transform，300毫秒的cubic-bezier缓动曲线，让方块滑动带惯性效果。这里踩过坑：必须给方块设置display: i
VueWebSocket开发
2509_93947498的博客
11-24 301
WebSocket是一种全双工通信协议，它允许服务端主动向客户端推送数据，相比HTTP轮询，能减少延迟和服务器压力。通常，我会在Vue组件的生命周期钩子中初始化连接，比如在阶段。假设我们在一个电商项目中需要实时更新库存，我们可以将WebSocket数据存储到Vuex的store中，各个组件通过getters获取数据。另外，错误处理很重要，比如网络中断或服务端问题，我们可以通过事件记录日志，并尝试重连机制。在Vue中，数据绑定是强项，我们可以将WebSocket接收的数据直接绑定到模板中，实现实时更新。
Vue数据结构与算法
2509_93941399的博客
11-24 225
例如，在渲染一个商品列表时，如果直接使用遍历一个未排序的数组，每次更新都可能引发不必要的DOM操作。例如，对于一个搜索功能，如果数据量较大，线性搜索会明显拖慢体验，改用二分搜索就能将时间复杂度从O(n)降到O(log n)。本质上，这都是算法在减少不必要的计算。比如，在管理一个多选标签组件时，用Set存储已选ID，检查是否选中只需O(1)时间，远比数组的方法高效。同时，Vue的响应式系统对对象变化很敏感，如果频繁增删数据，最好使用Vue.set或重新赋值来触发更新，避免直接修改导致的性能问题。
vue3-10-计算属性以及get跟set
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
11-24 169
/ computed 返回值就是计算属性的值，接收返回值之后，可以直接在上面展示。// get 跟 set。
Vue机器学习实战
2509_93947330的博客
11-24 247
在Vue的methods里，写个loadModel函数，用TensorFlow.js的loadGraphModel或loadLayersModel加载线上模型。然后调用model.predict方法，输出结果是个概率数组，用Vue的computed属性过滤出最高概率的几条，显示成可读标签。机器学习这边，我选了TensorFlow.js，因为它能直接在浏览器里跑模型，省了搭建后端API的麻烦。样式上，用Vue的scoped CSS把结果列表做得醒目点，比如高亮显示最高置信度的项，让用户一眼看到重点。
vue x 状态管理
最新发布
ZJ15981837003的博客
11-25 200
vue x 状态管理
Vue嵌入式开发
2509_93947499的博客
11-24 239
很多人觉得Vue这种前端框架天生就该在浏览器里呆着，但如果你拆开它的运行时源码看看，会发现核心库压缩后还不到30KB。比如用BusyBox构建的轻量系统，把Vue当成界面渲染引擎，通过WebSocket和底层C程序通信，效果比QT之类的传统方案灵活得多。内存管理要特别注意。推荐用@vue/cli-service的模式打包成UMD格式，这样设备上的轻量级Webview直接就能解析。在资源受限的环境里，Vue或许不是万能的，但当你在凌晨三点盯着设备屏幕上看数据流畅刷新时，就会觉得那些配置优化掉的头发都值了。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值