前端开发规范:命名规范、html规范、css规范、js规范(三)

简介: 前端开发规范:命名规范、html规范、css规范、js规范

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));

使用严格等

总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。例如:

(function(log){
  'use strict';
  log('0' == 0); // true
  log('' == false); // true
  log('1' == true); // true
  log(null == undefined); // true
  var x = {
    valueOf: function() {
      return 'X';
    }
  };
  log(x == 'X');
}(window.console.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

设置默认参数

辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象,那每个表达式将会被自左向右地做真假判断。基于此操作,最终总有一个表达式被返回回来。这在变量赋值时,是可以用来简化你的代码的。例如:如果x不存在且y不存在,x=1;如果x存在y存在,x = y

if(!x) {
  if(!y) {
    x = 1;
  } else {
    x = y;
  }
}

等同于:

x = x || y || 1;

这一小技巧经常用来给方法设定默认的参数。

(function(log){
  'use strict';
  function multiply(a, b) {
    a = a || 1;
    b = b || 1;
    log('Result ' + a * b);
  }
  multiply(); // Result 1
  multiply(10); // Result 10
  multiply(3, NaN); // Result 3
  multiply(9, 5); // Result 45
}(window.console.log));

不使用eval()函数

就如eval的字面意思来说,恶魔,使用eval()函数会带来安全隐患。eval()函数的作用是返回任意字符串,当作js代码来处理。

this关键字

只在对象构造器、方法和在设定的闭包中使用 this 关键字。this 的语义在此有些误导。它时而指向全局对象(大多数时),时而指向调用者的定义域(在 eval 中),时而指向 DOM 树中的某一节点(当用事件处理绑定到 HTML 属性上时),时而指向一个新创建的对象(在构造器中),还时而指向其它的一些对象(如果函数被 call() 和 apply() 执行和调用时)。

正因为它是如此容易地被搞错,请限制它的使用场景:

  • 在构造函数中
  • 在对象的方法中(包括由此创建出的闭包内)

首选函数式风格

函数式编程让你可以简化代码并缩减维护成本,因为它容易复用,又适当地解耦和更少的依赖。

接下来的例子中,在一组数字求和的同一问题上,比较了两种解决方案。第一个例子是经典的程序处理,而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。不推荐

(function(log){
  'use strict';
  var arr = [10, 3, 7, 9, 100, 20],
      sum = 0,
      i;
  for(i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  log('The sum of array ' + arr + ' is: ' + sum)
}(window.console.log));

推荐(函数式编程):

(function(log){
  'use strict';
  var arr = [10, 3, 7, 9, 100, 20];
  var sum = arr.reduce(function(prevValue, currentValue) {
    return prevValue + currentValue;
  }, 0);
  log('The sum of array ' + arr + ' is: ' + sum);
}(window.console.log));


相关文章
|
20小时前
|
人工智能 JavaScript 前端开发
前端秘法基础式终章----欢迎来到JS的世界
前端秘法基础式终章----欢迎来到JS的世界
|
2天前
|
JavaScript 前端开发 算法
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
9 0
|
2天前
|
前端开发 JavaScript
前端 JavaScript 与 HTML 怎么实现交互
前端 JavaScript 与 HTML 怎么实现交互
|
6天前
|
前端开发 数据安全/隐私保护
从建站到拿站 -- HTML和CSS基础
从建站到拿站 -- HTML和CSS基础
7 0
|
7天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
23 1
|
8天前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中,数据绑定是Vue.js框架的核心特性之一,它实现了视图与数据的双向绑定,极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理,从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析,帮助读者更好地理解Vue.js框架的工作机制。
9 0
|
9天前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
|
9天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
35 0
[HTML、CSS]知识点
|
9天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节、经验
[HTML、CSS]细节、经验
29 0
[HTML、CSS]细节、经验
|
9天前
|
存储 缓存 JavaScript
解密前端框架Vue.js的响应式原理
作为当下最流行的前端框架之一,Vue.js的响应式原理是其核心之一。本文将深入探讨Vue.js的响应式原理,从数据劫持、依赖收集到更新视图的完整流程,帮助读者更好地理解Vue.js框架的工作方式。

相关产品

  • 云迁移中心