单行注释

多行注释

/*
 *空格 + 注释
 */

添加注释的一般原则

文档注释

/**
 *注释
 *@ 变量1 {String} 一个字符串变量
 */    

如何添加文档注释

块语句都应使用花括号

花括号对齐方式,左花括号挡在块语句的第一行末尾

if () {
    
} else {
    
}

块语句间隔

if(true){
    
}

if (true) {
    
}

if ( true ) {
    
}

switch 语句

switch (color) {
  case '#000':
      break
  
  case '#f00':
      break
  
  case '#00F':
      break
  
  default:
      break
}

  switch (color) {
  case '#000':
      break
  case '#00F':
      break
  default:
      break
}

while 语句 尽量避免使用,因为在严格模式下不能运行,而且容易造成对于变量的认知错误

let message = '你好!'
let book = {
  name: '少少',
  age: 18,
  message: '你好吗?'
}

with (book) {
    message += name
    console.log(message)
}

for 循环 遍历数组

for-in 循环 遍历对象

变量声明

let value = 10,
    result = 10,
    i,
    len;

函数声明

函数调用间隔

立即调用的函数

const myFunction = function () {
    // 函数
}
let value = function () {
    return 'string' // 变量
}()

// 好的写法
let value = (function () {
    return 'string'  
}())

严格模式 "use strict"

function () {
    "use strict"
    
}

(function () {
    "use strict"
    function () {
        
    }
    function () {
        
    }
    function () {
        
    }
})()

相等 JavaScript 有强制类型转换机制

将 html 和 js 代码分离开

全局变量带来的问题

意外的全局变量

单全局变量

// 再比如表示三本书
// 方法一
function Book (name) {
    return `书名:${name}`
}
const Book1 = Book("name1")
const Book2 = Book("name2")
const Book3 = Book("name3")

console.log(Book1, Book2, Book3)

// 单全局变量
class Books {
    Book1 = Book("name1")
    Book2 = Book("name2")
    Book3 = Book("name3")
    
    Book (name) {
        return `书名:${name}`
    }
}

console.log(Books.Book1, Books.Book2, Books.Book3)

/*
 *其他例子: jquery 定义了 $ 和 jQuery
 *以及vue 定义了 Vue
 */

class My {
    dom = {
        addDom () {
            ...
        },
        removeDom () {
            ...
        }
        ...
    }
    
    event = {
        onClick () {
            ...
        },
        oninput () {
          ...  
        }
        ...
    }
}

典型用法 (流水账式写法)

// 常见但是不推荐的写法 
handleClick (event) {
    const popup = document.getElementById("popup")
    popup.style.left = event.clientX
    popup.style.top = event.clientY
    popup.className = "show"
}

隔离应用逻辑 应用逻辑和用户行为应该区分开(一个函数只做一件事,便于函数复用)

clas Myapp {
    handleClick (event) {
      this.showPopup(event)  
    },
    showPopup (event) {
      const popup = document.getElementById("popup")
      popup.style.left = event.clientX
      popup.style.top = event.clientY
      popup.className = "show"
    }
}

不要分发事件对象 应用逻辑不应该依赖 event 对象来完成功能(便于测试,便于函数复用)

 clas Myapp {
    handleClick (event) {
    
      // 事件处理程序是接触 event 对象的唯一函数 (一个函数只做一件事)
      event.preventDefault()
      event.stopPropagation()
      
      // 传入应用逻辑
      this.showPopup(event.clientX, event.clientY)  
    },
    showPopup (x, y) {
      const popup = document.getElementById("popup")
      popup.style.left = x
      popup.style.top = y
      popup.className = "show"
    }
}

检测数组 (es5已有自带检测方法)

// 关注对象能做什么,而不是他是什么
function isArr(value) {
    return typeof value.sort === 'function'
}

// 更为优雅有效的解决方案 (兼容 IE6 以下版本)
function isArray (value) {
    if (typeof Array.isArray === 'function') {
        return Array.isArray(value) // 自带判断数组方法
    } else {
    
        // 某个值内置的 toString 在所有的浏览器中都会返回标准的字符串结果
        return Object.prototype.toString.call(value) === '[object Array]'
    }
}

检测属性是否存在

let myObject = {
    count: 0
}

if (myObject['count']) {
    // 存在但不执行
}

let myObject = {
    count: 0
}

if ('count' in myObject) { // in 只检查属性是否存在于对象实例或者对象原型
    // 执行
}

if (myObject.hasOwnPrperty('count')) { // 只检查是否存在于对象实例
    // 执行
}

什么是配置数据 写死在代码里,且将来可能会被修改

JavaScript 抛出错误的方法

throw new Error('错误信息')

如何书写抛出的错误文本

throw new Error('函数名: 可能的原因')

什么时候抛出错误

try-catch 语句 catch 代码块不能省略或留空

能在错误抛出前解析它;
抛出错误会中断 js 进程, 使用 try-catch 则不会中断 js 进程

个人理解: try-catch 语句可以用在自己知道可能会出错但是不能明确的知道错误原因,
或者在报错后仍需继续报错代码块之后语句的情况下

什么是自己的对象

对象的使用原则

防止对象被修改