当前位置:首页 » 网页前端 » 前端设计命名
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端设计命名

发布时间: 2023-02-28 03:37:20

① 为什么前端命名的时候都爱用下划线或中划线

1,选中需加下划线的行;2,在表格和边框工具栏按“线型”工具选择下划线类型(实线或虚线);3,按“外侧框线”工具按钮选择其中的下划线。这种下划线,不论是否该行有无文字均会划线。

② 为什么前端命名的时候都爱用下划线或中划线

这只是一种命名风格也是为了后期维护或者查找的时候方便而且现在项目都是几个人一起开发为了便于管理避免起名冲突就这样在开发之前就制定好要求的

③ 前端开发中的图片的常规命名有哪些

  • 所有的命名最好都小写。

  • 文件夹命名,尽量采取单个英语单词描述,如login,index。

  • html文件名称,当需要多个英语单词描述时用”_”(下划线)连接多个单词分隔,如:user_add.html,动词放在后面,便于相同业务模块文件放在一起。

  • css,image,js文件名称,当需要多个英语单词描述时用”-“(分隔线)连接多个单词分隔,如:font-awesome.css,login-user.jpg,login-pwd.jpg。 当基于某种类型从属关系划分文件时,以.(点)作为单词分隔,如:jquery.min.js,common.left-sliding.js

  • js变量命名

    建议采取系统匈牙利命名法,因为js语言是一弱类型语言,声明变量时,在名称上标识其数据类型,以提高代码的的可读性。

    变量名=数据类型+对象描述

    s: 表示字符串Stringn:表示数字i: 表示整型Int(它是Number中的整数类型)fl: 表示浮点Float(它是Number中的小数类型)b: 表示布尔Booleana: 表示数组Arrayo: 表示对象Objectfn: 表示函数Function

    例如var aPerson = []; // Array数组var oBtn = document.getElementById(‘btn’); //Object对象var fnName = function () {}; // function函数var sName = “w3cplus”; // string字符串

④ 前端规范一(命名规范)

前端规范一(命名规范)

1、小驼峰命名法(lowerCamelCase) :第一个单词以小写字母开始,第二个单词的首字母大写,例如:firstName、lastName。

2、大驼峰命名法(CamelCase) :每一个单词的首字母都采用大写字母,例如:FirstName、LastName。

3、下划线命名法(snake_case):下划线命名法也叫蛇形法,全由小写字母和下划线组成,在两个单词之间用下滑线连接。例如:first_name。

4、中划线命名法(kebab-case):中划线命名法也叫串式命名法,各个单词之间通过下划线“-”连接。例如:first-name。

强制使用:中划线命名法

命名规则:1、文件名不得含有空格

2、文件名建议只使用小写字母,不使用大写字母

3、文件名包含多个单词时,单词之间建议连词线 ( - ) 分隔

4、有复数结构式,要使用复数

示例:login 、 error-page、 icons

强制使用:全部大写字母

为了醒目,某些说明文件的文件名,可以使用大写字母

示例:README

补充说明: README 标准

◎ 项目简介。
◎ 注意事项。
◎ 线上的示例地址(测试、正式)。
◎ 支持运行的环境。
◎ 必要的依赖准备,以及如何搭建。
◎ 项目的安装指南。
◎ 相关的文档链接。
◎ 相关人员的联系方式。

README.md 示例:

强制使用:小驼峰命名法

命名规则:前缀为动词,见名知意

1、onXxx 监听事件的回调

2、handleXxx 处理事件

3、getXxx 获取某个值

4、setXxx 设置某个值

常见场景:

a、事件处理:

(1).事件主动监听采用 onXxx ,被动处理使用handleXxx

示例:onXxxSubmit: '提交表单'
handleXxxSizeChange: '处理分页页数改变'
handleXxxPageChange: '处理分页每页大小改变'
onXxxKeydown: '按下键'

(2). 其他命名:元素+click、 元素+change、select+范围

示例:selectAllXxx: '选择所有'
xxxCellClick: '当某个单元格被点击时会触发该事件'
xxxSortChange: '当表格的排序条件发生变化的时候会触发该事件'

b、增删改查处理:

增: addXxx 添加子项

createXxx 创建大项

删: deleteXxx 真删除

removeXxx 伪删除

改:updateXxx

查: getXxx 获取原始数据需要修改

fetchXxx 原始数据

示例:getUserList: '获取用户列表', fetchToken: '取得Token', deleteUser: '删除用户', removeTag: '移除标签', updateUserInfo: '更新用户信息', addUser: '添加用户', createAccount: '创建账户'

c、API接口函数:

get: getXxxApi

post: postXxxApi

patch: patchXxxApi

delect: delectXxxApi

域名:xxxUrl

一般属性变量 强制使用:小驼峰命名法

1、布尔值

命名规则:前缀为判断性动词

hasXxx 判断是否含有某个值。true:含有此值; false:不含有此值

isXxx 判断是否为某个值。true:为某个值; false:不为某个值

示例:isShow: '是否显示', isLoading: '是否处于加载中', hasToken: '是否包含Token',

2、数组命名

命名规则:使用名词+List组合

示例: userList: '用户列表'

3、私有属性变量

命名规则:前缀为下划线(_)后面和变量命名一样。

4、枚举变量 \textcolor{red}{强制使用:大驼峰命名法}

枚举的属性使用全大写字母,单词间用下划线隔开。

示例:let TargetState = { READING: 1, READED: 2, APPLIED: 3, READY: 4 };

5、常量: 强制使用:使用全大写字母,单词间用下划线隔开

强制使用:大驼峰命名法

命名规则: 可参考vue官网风格指南

例如: 1、按照功能来命名

2、应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。

3、组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。

示例:components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

强制使用: 中划线命名法

命名规则:

1.class、id 、标签、属性的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用中划线 “-” 连接

2.class必须代表相应模块或部件的内容或功能,不得以样式信息进行命名。

3.元素 id 必须保证页面唯一。

4.禁止创建无样式信息的 class

示例:

1、尽量不要缩写、简写的单词。除了 template => tmp、message => msg、image => img、property => prop 这些单词已经被公认的缩写

2、可读性强的命名优先于简短的命名

3、命名长度最好在 20 个字符以内,避免多长带来的阅读不便

4、命名要有具体的含义,避免使用一些泛指和无具体含义的词

5、不要使用拼音,更不要使用中文

6、正则表达式用 Exp 结尾

7、ref:使用Ref结尾

⑤ ui切图怎么命名给前端

1、所有命名全部为小写英文字母

原因是开发小哥哥的代码里面全是小写的英文字母,如何切图命名成中文的话,会导致开发小哥哥将命名全部更改,这样会耽误产品开发的进度。

2、所有命名不得出现大写以及中文和空格或其他符号,单词之间用_隔开

  • 切图格式:Png格式

  • 通用切片命名格式:组件_类别_功能_状态@2x.png

  • 举例:

    [email protected](中文对应的是:标签栏_图标_主页_默认@2x.png)

1.工程师在实现我们效果图的过程中,需要计算好每一个元素的位置,然后再调用我们切好的图进行填充,那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求;

2.切图输出应该尽可能的降低工程师的开发工作量,避免因切图输出而导致的不必要的工作量,养成良好的命名习惯,比如可以利用版本命名,亦或时间命名都可以更清晰地标明。

3.一个团队之间应该统一标准,制定并遵循规范,这样不管是后期版本的跟新迭代或者是设计师之间的交接,都会方便快捷很多。

⑥ 前端开发命名必备单词

一、导航类

导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav

边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu

子菜单:submenu 标题:title 摘要:summary

二、页面结构

容器:container 页头:header 内容:content/container 页面主体:main

页尾:footer 导航:nav 侧栏:sidebar 栏目:column

页面外围控制整体布局宽度:wrapper 左右中:left right center

三、功能

标志:logo 滚动:scroll 广告:banner 标签页:tab

登录:login 文章列表:list 登录条:loginbar 提示信息:msg

注册:regsiter 当前的:current 搜索:search 小技巧:tips

功能区:shop 图标:icon 标题:title 注释:note

加入:joinus 指南:guild 状态:status 服务:service

按钮:btn 热点:hot 合作伙伴:partner 新闻:news

友情链接:friendlink 下载:download 版权:right 投票:vote

四、p英文释译

标题 title 字体 font 身体 body 大小 size

列表 list 文本 text 样式 style 对齐 align

图像 image 修饰 decoration 资源 source 线 line

宽度 width 穿过 through 高度 height 缩进 indent

行 line 斜体 italic 链接 link 加粗 bold

斜体 italic 加重 weight 加粗 bold 宽 width

输入 input 高 height 下面的 under 背景 background

顶部 top 主体 main

五、css英文释译

重复 repeat 填充 padding 位置 position 正常 normal

显示类型 display 父级 parent 显示可见 visibility 子级 children

隐藏 hidden 顶部导航topnav显示 visible 溢出 overflow

列表 list 样式 style 边框 border 导航 nav

广告图片 banner 行高line-height边界 margin 页眉 header

六、样式文件命名

主要的master.css 模块mole.css 基本共用base.css 布局,版面layout.css

主题themes.css 专栏columns.css 文字font.css 表单forms.css

补丁mend.css 打印print.css

七、颜色释译

绿 green 红 red 蓝 blue 黑 black

灰 gray 黄 yellowa 紫 purple 白 white

棕 brown 卡其色 khaki

六、命名参考

登录条loginBar 标志:logo 侧边栏:sideBar 广告:banner

导航:nav 子导航:navBar 菜单:menu 子菜单:subMenu

搜索:search 滚动:scroll 页面主体:main 内容:content

标签页:tab 文章列表:list 提示信息:msg 小技巧:tips

栏目标题:title 加入:joins 指南:guild 服务:service

热点:hot 新闻:news 按钮:btn 投票:vote

状态:status 合作伙伴:partner 外套:wrap 商标:label

顶导航:topnav 左导航:leftSideBar 右导航:rightSideBar菜单内容:menuContent

菜单容器:menuContainer注释:note 边导航图标:sidebarIcon版权:right

友情链接:friendLink容器:container 页脚:footer 当前:current

激活:active 购物车:shop 登录:login 注册:regsiter

下载:download 面包屑:breadCrumb

⑦ 为什么前端命名的时候都爱用下划线或中划线

其实命名只要符合规范就行
那为什么那样命名呢
主要也是为了好区分 后期好维护
因为现在一个项目不是一个人在做 有很多人
那么命名的时候 就要事先规范好 这样便于维护
而且也避免重名 便于查找 差不多就是这样
你可以去后盾人平台看一下,里面的东西不错

⑧ 前端html页面id命名问题

常用id的命名
(1) 页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2) 导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3) 功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:right