前端命名规范

Posted on by hackdl

学习网址：

  • https://develope服务器托管网r.aliyun.com/article/1368230?spm=a2c6h.12873639.article-detail.52.44203afcWqU9Z9&scm=20140722.ID_community@@article@@1368230._.ID_community@@article@@1368230-OR_rec-V_1-RL_community@@article@@1391402#slide-9
  • https://developer.aliyun.com/article/1368231?spm=a2c6h.12873639.article-detail.28.2b9a5c0f23U7Sr&scm=20140722.ID_community@@article@@1368231._.ID_community@@article@@1368231-OR_rec-V_1-RL_community@@article@@1368230
  • https://developer.aliyun.com/article/1368232?spm=a2c6h.12873639.article-detail.29.585910590jb69b&scm=20140722.ID_community@@article@@1368232._.ID_community@@article@@1368232-OR_rec-V_1-RL_community@@article@@1368231
  • https://developer.aliyun.com/article/1368233?spm=a2c6h.12873639.article-detail.24.1f2c7dd0qaUFSM&scm=20140722.ID_community@@article@@1368233._.ID_community@@article@@1368233-OR_rec-V_1-RL_community@@article@@1368232

1.函数命名规范

函数 ( 方法 ) 注释

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照 javadoc(百度百科)语法：

/** 
* 函数说明 
* @关键字 
*/

常用注释关键字

推荐 :

/**
 - 合并Grid的行
 - @param grid {Ext.Grid.Panel} 需要合并的Grid
 - @param cols {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
 - @param isAllSome {Boolean} ：是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
 - @return void
 - @author polk6 2015/07/21 
 - @example
 - _________________                             _________________
 - |  年龄 |  姓名 |                             |  年龄 |  姓名 |
 - -----------------      mergeCells(grid,[0])   -----------------
 - |  18   |  张三 |              =>             |       |  张三 |
 - -----------------                             -  18   ---------
 - |  18   |  王五 |                             |       |  王五 |
 - -----------------                             -----------------
*/
function mergeCells(grid, cols, isAllSome) {
    // Do Something
}

2.JS

JS脚本加载（文件位置和加载）

说到js和css的位置，大家应该都知道js放在下面，css放在上面。但是，如果你的项目只需要兼容ie10+或者只是在移动端访问，那么可以使用HTML5的新属性async，将脚本文件放在内兼容老旧浏览器(IE9-)时：脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。而在现代浏览器中：脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。综上所述，所有浏览器中推荐:

JS声明提前

javascript会自动将函数作用域内的变量和方法的定义提前（只是提前声明，赋值还是在原处）例如：

(function(log){
  'use strict';
 
  var a = 10;
 
  for(var i = 0; i

提升后的js

(function(log){
  'use strict';
  // All variables used in the closure will be hoisted to the top of the function
  var a,
      i,
      b,
      f;
  // All functions in the closure will be hoisted to the top
  function x() {
    log('Mr. X!');
  }
 
  a = 10;
 
  for(i = 0; i

SOP-‘use strict’; 是什么

‘use strict’; 是一个JavaScript指令，用于开启严格模式。在严格模式下，JavaScript会进行更多的错误检查和限制，以帮助开发者编写更安全、更易于维护的代码。

严格模式的主要作用包括：

  1. 变量声明必须使用 var、let 或 const 关键字，不能直接赋值。
  2. 禁止使用未声明的变量。
  3. 禁止删除不可配置的属性。
  4. 禁止修改只读属性的值。
  5. 禁止对不存在的对象属性进行赋值操作。
  6. 禁止在全局作用域内声明变量。
  7. 禁止使用 with 语句。
  8. 禁止使用 arguments.callee 和 arguments.caller。
  9. 禁止使用 eval（) 函数。

通过使用 ‘use strict’;，可以确保代码在执行过程中遵循这些规则，从而减少潜在的错误和问题。

SOP-(function(log){…}(windows.conslole.log));是什么语句

这是一个立即执行函数表达式（IIFE），它接受一个参数log，并在函数体内使用这个参数。这个语句的作用是创建一个匿名函数，并将windows.console.log作为参数传递给这个匿名函数。当这个匿名函数被调用时，它会执行传入的log函数。

等同== 和严格等===的区别

  • ==， 两边值类型不同的时候，要先进行类型转换，再比较。
  • ===，不做类型转换，类型不同的一定不等。

==等同操作符

  • 如果两个值具有相同类型，会进行=比较，返回=的比较值
  • 如果两个值不具有相同类型，也有可能返回true
  • 如果一个值是null另一个值是undefined，返回true
  • 如果一个值是string另个是number，会把string转换成number再进行比较
  • 如果一个值是true，会把它转成1再比较，false会转成0
console.log( false == null )      // false
console.log( false == undefined ) // false
console.log( false == 0 )         // true
console.log( false == '' )        // true
console.log( false == NaN )       // false
 
console.log( null == undefined ) // true
console.log( null == 0 )         // false
console.log( null == '' )        // false
console.log( null == NaN )       // false
 
console.log( undefined == 0)   // false
console.log( undefined == '')  // false
console.log( undefined == NaN) // false
 
console.log( 0 == '' )  // true
console.log( 0 == NaN ) // false

总结一下==

  • false 除了和自身比较为 true 外，和 0，”” 比较也为 true
  • null 只和 undefined 比较时为 true， 反过来 undefined 也仅和 null 比较为 true，没有第二个
  • 0 除了和 false 比较为 true，还有空字符串 ”” 和空数组 []
  • 空字符串 ” 除了和 false 比较为 true，还有一个数字 0

==, >,

例如：

Array.prototype.valueOf = function() {
  this[0]++;
  return this;
}
var x = [1, 2, 3];
x == 0;
console.log(x);   // [2, 2, 3]

===操作符：

  • 要是两个值类型不同，返回false
  • 要是两个值都是number类型，并且数值相同，返回true
  • 要是两个值都是stirng，并且两个值的String内容相同，返回true
  • 要是两个值都是true或者都是false，返回true
  • 要是两个值都是指向相同的Object，Arraya或者function，返回true
  • 要是两个值都是null或者都是undefined，返回true

真假判断

  • js中以下内容为假：
  • false
  • null
  • undefined
  • 0
  • ” (空字符串)
  • NaN

三元条件判断（if 的快捷方法）

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。不推荐：

if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

推荐：

return x === 10 ? 'valid' : 'invalid'

3.CSS

id和class的命名

ID和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称不推荐 :

.heavy {
  font-weight: 800;
}
 
.important {
  color: red;
}

一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class。

属性格式

  • 为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
  • 属性名的冒号后使用一个空格。出于一致性的原因，
    属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
  • 每个选择器和属性声明总是使用新的一行。
  • 属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
  • URI值（url()）不要使用引号。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：【按顺序来编写CSS样式代码】

结构性属性：

  1. display
  2. position, left, top, right etc.
  3. overflow, float, clear etc.
  4. margin, padding

表现性属性：

  • background, border etc.
  • font, text

不推荐：

.box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

推荐：

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

服服务器托管网务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: