前端命名规范-摩杜云开发者社区

学习网址：

1.函数命名规范

函数 ( 方法 ) 注释

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

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

常用注释关键字

2.JS

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

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

<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- body goes here -->
 
    <script src="main.js" async></script>
  </body>
</html>

JS声明提前

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

(function(log){
  'use strict';
 
  var a = 10;
 
  for(var i = 0; i < a; i++) {
    var b = i * i;
    log(b);
  }
 
  if(a === 10) {
    var f = function() {
      log(a);
    };
    f();
  }
 
  function x() {
    log('Mr. X!');
  }
  x();
 
}(window.console.log));

提升后的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 < a; i++) {
    b = i * i;
    log(b);
  }
 
  if(a === 10) {
    // Function assignments will only result in hoisted variables but the function body will not be hoisted
    // Only by using a real function declaration the whole function will be hoisted with its body
    f = function() {
      log(a);
    };
    f();
  }
 
  x();
 
}(window.console.log));

SOP-'use strict'; 是什么

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

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

变量声明必须使用 var、let 或 const 关键字，不能直接赋值。
禁止使用未声明的变量。
禁止删除不可配置的属性。
禁止修改只读属性的值。
禁止对不存在的对象属性进行赋值操作。
禁止在全局作用域内声明变量。
禁止使用 with 语句。
禁止使用 arguments.callee 和 arguments.caller。
禁止使用 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

==, >, <, +, -, ... 这些操作符所造成的隐式类型转换都是无副作用的，它不会改变变量本身保存的值。，但是，如果你覆写某个对象的 valueOf/toString的话，==就会产生副作用.

例如：

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';
}

3.CSS

id和class的命名

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

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

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

属性格式

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

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

结构性属性：

display
position, left, top, right etc.
overflow, float, clear etc.
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;
}