草庐IT

web前端开发规范

无处安放的code 2023-03-28 原文

web前端开发规范

规范概述

一个人走的更快，一群人可以走的更远，前提是统一的策略，还要不断地反省和优化。不管有多少人共同参与同一项目，尽可能确保每一行代码都像是同一个人编写的

  • 开发目录规范
  • 开发环境规范
  • 开发编码规范

一、目录及文件命名规范

(一)、例静态专题页目录

  - src / html 源代码   
  - img / image / images  图片资源  
  - js  JavaScript脚本 
  - dep / development / package 第三方依赖包

（二）、例管理端项目目录

 - project 
    -- static / public 静态文件
       -- js
       -- css
       -- tpl
       -- index.html
       ...
    -- src 源代码（逻辑）
      -- common 公共资源
        -- img
        -- css 
        ...
      -- component 组件 
         -- home 
         -- login
         ...
      -- api 接口请求
      --  view / page 模板文件

（三）、命名规范

  • 目录，文件名称统一小驼峰命名法。 productDetail.html

二、环境要求

（一）、开发环境统一

  1. Node.js 8.9 或更高版本，你可以使用 nvm 或 nvm-windows 在一台电脑中管理多个 Node 版本

  2. 使用VS Code进行代码编写

  3. 规定 Tab 大小为 2 个空格，保证在所有环境下获得一致展现(settings.json文件修改"editor.tabSize": 2)

  4. 安装插件 Vetur（ Vue开发扩展及 Vue 文件代码格式化）

  5. 使用 Chrome 浏览器并安装 Vue.js devtools 进行调试

三、编码规范

（一）、HTML / Template 编码规范

  1. HTML换行缩进：采用 tab空格

  2. 尽量减少标签层级

  3. 双标签必须闭合，单标签用斜线闭合

  4. 行内元素里面不可使用块级元素
    5. <a href="../test">
  <div></div>
</a>

  5. 避免使用已过时标签，如：font

  6. 对于属性的定义，使用双引号，不要使用单引号

  7. 为每个 HTML 页面根元素添加 lang 属性
    8.   <html lang="zh-CN">
    <!-- ... -->
  </html>

  8. 通过声明一个明确的字符编码，让浏览器轻松、快速的确定网页内容渲染方式，通常指定为'UTF-8'
    9. .....

【语义化】尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价；任何时候都要尽量使用最少的标签并保持最小的复杂度


（二）、css / Less / Sass 编码规范

  1. 类名使用小写字母，以中划线分隔

  2. id 采用驼峰式命名

  3. Less / Sass 中的变量、函数、混合等采用驼峰式命名

  4. 所有声明语句都应当以分号结尾 最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错,尤其压缩打包出错

  5. 选择器不要超过4层（在Less / Sass中避免嵌套超过4 层）

  6. 缩进使用两个空格代替 Tab

  7. 为选择器分组时，将单独的选择器单独放在一行

  8. 每条样式声明应该独占一行

  9. 尽可能不要使用行内（inline）样式

  10. 组件之间的完全解耦，不会造成命名空间的污染，如：.mod-xxx ul li 的写法带来的潜在的嵌套风险。

  11. 选择器权重（样式覆盖）
    • 非通用样式使用嵌套方式进行编写，避免影响其他自己不了解样式，造成样式覆盖
    • Vue 中样式谨慎使用 scoped，会影响样式选择器性能，请使用第一点进行特有样式编写
    • 样式需要修改时，尽量找到原样式声明进行修改

  12. 属性的书写顺序, 举个例子
    13. .box {
    /* 定位 */
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /* 盒模型 */
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 1px solid black;
    / *其他* /
    color: #efefef;
}
    • 定位相关, 常见的有：display position left top float 等
    • 盒模型相关, 常见的有：width height margin padding border 等
    • 其他属性

    （三）、JavaScript 编码规范

    1. 常量建议还是使用大写字符+下划线命名。 const PRICE_MAX=10000;

    2. 函数按职责命名，一般都是动词开头。 function setUserInfo(){}

    3. 变量不要先使用后声明

    4. 不要在同个作用域下声明同名变量

    5. 在必要的地方添加非空判断以提高代码的稳健性

    6. 使用===代替==，!==代替!=（==会自动进行类型转换，可能会出现奇怪的结果）

    7. 使用三目运算代替简单的 if-else
      8. let count = 100;
count = seat < 5 ? 20 : seat < 10 ? 60 : 90;

    8. 正确使用 null
      • 不要用null来判断函数调用时有无传参
      • 不要与未初始化的变量做比较

    9. 正确使用 undefined
      • 不要直接使用 undefined 进行变量判断

      • 使用typeof和字符串 'undefined' 对变量进行判断

      • 不要给变量赋值 undefined（undefined 本身就表示一个变量未定义）

    10. 普通函数：首字母小写，驼峰式命名，统一使用动词或者动词+名词形式,如：fnGetVersion()

    11. 对象方法与事件响应函数：对象方法命名使用fn+对象类名+动词+名词形式,如：fnAddressGetEmail()

    12. 事件响应函数：fn+触发事件对象名+事件名或者模块名，如：fnDivClick()

    【常用的动词】 
    get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,

    (四)、 编写注释

    1. 公共组件需要在文件头部加上注释说明：
      2. /**
*文件用途说明
*作者姓名、联系方式（旺旺）
*制作日期
**/
    2. 注释单独一行，不要在代码后的同一行内加注释：
      3. // 个人信息

    p.s. 部分编写思路参考别的码友，welcome您的观光,感谢！

web前端libr命名JavaScript

有关web前端开发规范的更多相关文章

  1. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - 是否可以覆盖 gemfile 进行本地开发？ - 2

    我们的git存储库中目前有一个Gemfile。但是，有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它，我必须将它添加到我们的Gemfile中，但每次我checkout到我们的master/dev主分支时，由于与跟踪的gemfile冲突，我必须删除它。我想要的是类似Gemfile.local的东西，它将继承从Gemfile导入的gems，但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗？ 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  4. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反？ - 2

    这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub

  5. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  9. ruby-on-rails - environment.rb 中设置的常量在开发模式中消失 - 2

    了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在，如果我运行script/server并发出请求，一切都很好。然而，在我的Rails应用程序的第二个请求中，一切都因单元化常量错误而变得糟糕。在生产模式下，我可以成功发出第二个请求，这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl

  10. ruby - Rails 开发服务器、PDFKit 和多线程 - 2

    我有一个使用PDFKit呈现网页的pdf版本的Rails应用程序。我使用Thin作为开发服务器。问题是当我处于开发模式时。当我使用“bundleexecrailss”启动我的服务器并尝试呈现任何PDF时，整个过程会陷入僵局，因为当您呈现PDF时，会向服务器请求一些额外的资源，如图像和css，看起来只有一个线程.如何配置Rails开发服务器以运行多个工作线程？非常感谢。 最佳答案 我找到的最简单的解决方案是unicorn.geminstallunicorn创建一个unicorn.conf:worker_processes3然后使用它:

随机推荐