vue前端标准

此文档的目的是让前端和产品、服务端开发,相互之间形成一种默契。

比如一些通用设计,不需要产品去说明,我们默认怎么做。

以及,我们开发之间的默契。

期盼大家的补充

开发原则:

感谢各位开发大佬共建原则,以兼顾平衡效率、质量,保证了代码的健壮性,实现了易扩展、易维护的软件工程,确保了代码的生命周期long long time.

  1. 开发规范学习材料 参考链接
    1.代码未动,思想先行
    a. 避免代码过度设计,但编程思想需要考虑全面。强烈建议,在各位置引入 @todo机制,简单备注,未来可能出现也可能不出现,可能出现时,代码该如何改动。

  2. 测试驱动开发Tdd
    不用具体实施vue-test jest的代码来写单侧用例,但必须用脑图规划单侧用例以驱动开发,为评估影响面和稳定性提供保证。

面向过程、面向对象

  1. 面向过程

    面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。
    总结:按照步骤编程 (函数和变量)

  2. 面向对象

    面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
    总结:将需求分析出一个一个的对象,然后在分析出对象中的属性和方法,最后按照步骤编程(方法和属性)

  3. 面向过程与面向对象对比
    在这里插入图片描述

  4. 应用场景

    前端更偏向使用面向过程。后端更偏向使用面向对象。

    前端的业务,往往是一个过程流,更偏向使用面向过程!

    面向对象思想,在前端的应用领域,多是开发实现复杂的工具类,和库。同时组件化思想也和面向对象思想有异曲同工之妙,面向组件化开发。

css

  • CSS 属性很多,难记
  • CSS 属性之间互相影响,难以完全掌握
  • 写出的CSS 代码臃肿、难维护、难复用
  • 业务和ui设计变动频繁,极容易越写越乱。

css原则:

  1. 注意抽离全局样式,尤其是在写css之前,开发者必须先关注全局样式设计,再自己写。(日常开发中,太多开发者各自写各自的,随着业务变动的增长,css中开始逐渐重置着样式相互覆盖,相互提示权重的混乱想象,直到最后难以维护(这里的难以维护,是值,整体网站ui的一致性被破坏。该了一个地方的字体,发现另外一个地方的字体大小不一致了。例如表格的鉴于,同一个网站,两个表格的样式能有细微的差别,这种差别不应该存在的!)

  2. 样式的层级嵌套过深,书写顺序随意,不尊重盒模型,导致渲染性能逐渐增加。
    为什么很少关注css优化?
    浏览器的渲染能力太强大,业务不复杂,觉得不管怎样都能修改和维护。所以就不关注,从而导致实际项目中,经常出现样式不一致的问题,也都是针对性改改就过去了。
    在业务复杂,一个产品支持多个业务,或者开发组件库。css的管理和开发规范,还是要重视的。

共建

举例说明:

例如在下图的需求中,我们通过CDN方式引入了外部sdk(不支持npm引入),这种情况下考略到性能问题!

我们需要做一个延时加载,并且在用户空窗期预加载。

但在未来存在的的某种场景下,这个动态资源是某个页面渲染的前置条件。考虑到这种情况,我们如果提前做了。就出现两种情况,未来压根没出现造成代码冗余,现在就开发,过度设计降低了当下的开发效率!

所以,我们需要考虑到这种情况。构建 @todo 注释,表明未来可能出现的情况,以及可能怎么做,需要怎么做。

放在最后,我们定期全局搜索,@todo 对整个项目,未来需要做可能做的事情,有个整体把控。在这种todo真正出现时,做到心中有数,而不是盲目乱拆代码。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/568718.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目管理商业文件--商业论证与效益管理计划

本文描述从事项目管理和了解项目管理领域所需的基本知识,词汇定义来自于《项目知识管理体系》(PMBOK指南)第六版,仅作个人学习使用,任何对此文章的引用,应当说明源出处,不得用于商业用途。 如有侵权、联系速删 文章目录…

C# LINQ笔记

C# LINQ笔记 from子句 foreach语句命令式指定了按顺序一个个访问集合中的项。from子句只是声明式地规定集合中的每个项都要访问,并没有指定顺序。foreach在遇到代码时就执行其主体。from子句什么也不执行,只有在遇到访问查询变量的语句时才会执行。 u…

LED和数码管及按键

目录 LED LED灯亮的原理图 LED灯光闪烁 电路设计 keil文件 LED流水灯的实现 keil文件 数码管 显示的基本原理 LED数码管的显示方式 静态显示方式 动态显示方式 具体案例 数码管静态显示 电路图 keil文件 数码管动态显示 电路图 keil文件 74LS138译码器 译…

如何快速进行城市内涝模拟?HTWATER软件

原文链接:如何快速进行城市内涝模拟?HTWATER软件https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247599079&idx2&sndc6f3da8b17c5587cf5b7766e7019729&chksmfa820200cdf58b16658983ecfbf2b369bff39813302942d6f7eb7b71428c68da71…

Vue+OpenLayers7入门到实战:OpenLayers图形绘制功能,OpenLayers实现在地图上绘制线段、圆形和多边形

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7入门到实战 前言 本章介绍如何使用OpenLayers7在地图上实现图形绘制功能,OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。 注意:本章需要用到Element-UI组件,可能需要额外安装依赖,这里跳过不详述,具体…

电脑如何一键修复所有dll缺失,几种修复dll文件丢失的方法

修复所有DLL(动态链接库)文件缺失的问题通常不可能通过单一的"一键修复"按钮来实现,因为DLL文件缺失可能由各种不同的原因导致,比如应用程序安装不正确、病毒感染、或系统文件损坏等。 使用内置的系统文件检查器&#x…

网络原理(7)——以太网数据帧和DNS协议(数据链路层和应用层)

目录 一、以太网数据帧(数据链路层) 二、DNS协议(域名解析系统,应用层协议) 一、以太网数据帧(数据链路层) 以太网横跨了数据链路层和物理层,这里只做简单介绍,因为普通程序员用不到这一块&am…

Rust基本类型

数值类型 整数类型 无符号整数只能取正数和0,有符号整数可以取正数负数和0。isize和usize类型取决于程序运行的计算机CPU类型,若CPU是32位的,则这两个类型是32位的,若CPU是64位的,则它们是64位的。rust整型 默认使用…

基于Spring Boot的云上水果超市的设计与实现

摘 要 伴随着我国社会的发展,人民生活质量日益提高。于是对云上水果超市进行规范而严格是十分有必要的,所以许许多多的信息管理系统应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套云上水果超市,帮助商家进行…

酒店管理系统【GUI/Swing+MySQL】(Java课设)

系统类型 Swing窗口类型Mysql数据库存储数据 使用范围 适合作为Java课设!!! 部署环境 jdk1.8Mysql8.0Idea或eclipsejdbc 运行效果 本系统源码地址:https://download.csdn.net/download/qq_50954361/89036287 更多系统资源库…

拓展AI边界:去中心化人工智能的应用场景和主要项目盘点

随着区块链技术的发展和普及,去中心化人工智能(AI)逐渐成为技术领域的焦点之一。区块链的去中心化特性为AI技术的应用提供了新的可能性,使得数据共享、模型训练和应用部署更加安全、透明和可靠。本文将探索去中心化AI的应用场景&a…

达梦数据库自动备份(全库)+还原(全库) 控制台

一 前提 1.安装达梦数据库DB8(请参照以前文章) 我的数据库安装目录是 /app/dmDB8 2.已创建实例 (请参照上一篇文章) 二 准备测试数据 三 自动备份步骤 1.开启归档模式 开启DM管理工具管理控制台 弹不出来工具的 输入命令 xhost 第一步 将服务器转换为配置状态 右键-&g…