学习.交流
专业源于专注
www. onlyit. cn   
学习交流 文件下载 手册资料 交流QQ群

    

 2  1/1   1  
作者
内容
dragonzsp  [个人空间]


注册  2011-03-25
发贴数  136
精华数  0
原创贴  4
来自  温州
状态  正常

级别  贵宾
#1»发布于2022-10-27 11:19

文章目录 
前言 
一、命名公式 
1. 动词+名 
2. 判断+名 
二、命名规范 
1. 匈牙利命名法 
2. 驼峰式命名法 
3. 帕斯卡命名法 
4. BEM 命名法 
总结 
前言 
本文将从程序的命名常见形似以及现在主流的命名规范做介绍。 
一、命名公式 
1. 动词+名 
函数命名的时候。 
 
// 如: 
var getUserName = function() {}; 
var addData = function() {} 
 
2. 判断+名 
当返回布尔值的时候使用is+的形式。 
 
// 如: 
var isBool = function() {}; 
 
二、命名规范 
1. 匈牙利命名法 
基本原则是:变量名=属性+类型+对象描述,其中每一对象的名称都要求有明确含义,可以取对象名字全称或名字的一部分。要基于容易记忆容易理解的原则。保证名字的连贯性是非常重要的。 
 
// 如: 
var szUserName = 'admin'; 
var aFruits = ['苹果', '西瓜', '樱桃']; 
 
说明(类型部分)  符号 
数组  a 
指针  p 
函数  fn 
无效  v 
句柄  h 
长整型  l 
布尔  b 
浮点型(有时也指文件)  f 
双字  dw 
字符串  sz 
短整型  n 
双精度浮点  d 
计数  c(通常用 cnt) 
字符  ch(通常用 c) 
整型  i(通常用 n) 
字节  by 
字  w 
实型  r 
无符号  u 
关于匈牙利命名法的前缀除了属性部分外,还有属性部分和描述部分,感兴趣的小伙伴可以点击此处立即查阅 
 
2. 驼峰式命名法 
驼峰式命名法(Camel-Case),当变量名或函数名是由一个或多个单词连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母。 
 
// 如: 
var userName = 'admin'; 
var fruits = ['苹果', '西瓜', '樱桃']; 
 
3. 帕斯卡命名法 
帕斯卡命名法(Pascal),当变量名和函式名称是由二个或二个以上单词连结在一起,每个单词首字母大写。 
 
// 如: 
var UserName = 'admin'; 
 
4. BEM 命名法 
前面介绍的三中命名规范在多种语言中是通用的,第四种 BEM 则主要侧重于前端的 css 命名规范。 
BEM:(Block: 块, Element: 元素, Modifier: 修饰符)是一种基于组件的Web 开发方法,基本思想是将用户界面划分为独立的块。 
 
官方标准:namespace-block__element_modifier 
 
追加约定:给组件添加命名空间 m,表示 模块,防止和第三方组件命名冲突。如:m-block __ element_modifier 
所有单词一律小写。 
单词之间用 - 分隔,命名尽量不要超过三个单词,避免命名过长。 
块名称(Block)通过 - 与命名空间(Namespace)分隔。 
块名称 Block 表示一个最高级别的抽象或者说是组件,主要是起到边界的作用,其中有以下三个主要功能特点: 
 
负责描述功能,不应该包含状态。 
 
/* correct */ 
.m-header { 

 
/* error */ 
.m-header--active { 

 
不影响自身布局,不包含具体的样式。 
 
/* correct */ 
.m-header { 

 
/* error */ 
.m-header { 
  background-color: skyblue; 

 
不能使用元素选择器和 ID 选择器。 
 
/* correct */ 
.m-header { 

 
/* error */ 
.m-header a { 

 
元素名称(Element)通过 __ 与块名称(Block)分隔。 
元素名称(Element)表示目的,而不是状态,在此层用于设置盒子边距宽高度数据、布局方式等。不能脱离 Block 父级单独使用。 
.m-header__logo { 
  margin-left: 50px; 
  width: 100px; 

.m-header__nav { 
  margin: 100px; 

 
修饰符名称(Modifier)通过 _ 与元素(Element)名称分隔。 
修饰符名称(Modifier)表示的是状态。 
.m-header__nav_navlist { 
  background-color: #2b2b2b; 

 
在组件开发中避免使用全局的 OOCSS 原子类,因为这会降低组件的可复用性;如:pull-left、pull-right、clearfix。(补充:OOCSS 原子类是指将复用度高的样式抽取出来,整合独立的抽象公共类) 
尽量避免使用子选择器,如果层次关系过长,逻辑不清晰,非常不利于维护;如: .kso-nav ul li a {}。 
使用 sass 预编译语法 
首先先搭建好我们的页面结构: 
 
<div class="m-header"> 
  <div class="m-header__logo"> 
    <img class="m-header__logo_img" src="" alt="" /> 
  </div> 
  <div class="m-header__nav"> 
    <ul class="m-header__nav_ul"> 
      <li></li> 
      <li></li> 
    </ul> 
  </div> 
</div> 
 
sass 写法: 
 
/* namespace-block__element_modifier */ 
/* namespace-block */ 
.m-header { 
  /* element */ 
  &__logo { 
    /* modifier */ 
    &_img { 
    } 
  } 
  /* element */ 
  &__nav { 
    /* modifier */ 
    &_ul { 
    } 
  } 

 
总结 
程序的命名规范没有强制使用某一种,结合自己日常开发习惯,使用顺手的就可以了,当然同时用多种也可以,比如用驼峰式命名法定义函数,帕斯卡命名法定义变量可以提高辨别度等。以上,便是今天介绍到的全部内容,希望会对你有所帮助。  
---------------- 
版权声明:本文为CSDN博主「俊小张」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 
原文链接:https://blog.csdn.net/weixin_44808483/article/details/115293929


        




官方认证第三方服务团队   QQ:187199580
收费教程地址链接:http://www.onlyit.cn/topic_list_detail?subject_id=7&topic_id=102140&topic_page_id=1
手机收费版本地址链接:http://www.onlyit.cn/topic_list_detail?subject_id=3&topic_id=103479&topic_page_id=1

qf2016  [个人空间]
QQ名  meng 113779009


注册  2016-01-17
发贴数  1511
精华数  0
原创贴  0
来自  
状态  正常

级别  版主
#2»发布于2022-10-27 16:31

 
我比较习惯多个单词之间下划线分开,比如: grid_set_row_num      Grid_Set_Row_Num


        



 2  1/1   1  

登录后方可发贴


[ 电话: 0571-85462761 王先生 QQ: 124520435 加入软件QQ群 - 杭州 - 浙ICP备19051128号-1 网安 33010402003225 ]