JS 须知 9

1 ES5 严格模式

1 目的
  1 消除 JavaScript 语法的一些不合理, 不严谨之处, 减少一些怪异行为
  2 消除代码运行的一些不安全之处, 保证代码运行的安全;
  3 提高编译器效率, 增加运行速度;
  4 为未来新版本的 JavaScript 做铺垫
  5 是 JavaScript 的语言标准, 除了正常的运行模式, ES添加了第二种运行模式, 严格模式

2 设置
  1 将字符串 'use strict' 放在JS文件的第一行就开启的严格模式
  2 function test() { 'use strict' }  -- 局部严格模式
  
3 严格模式规范
  1 必须是使用关键字声明变量 var / let / const 🧡
  2 对不合理的操作直接报错, 不再做静默失败处理 🧡
  
  1 NaN = 123;
  2 var abc = 456;
  3 delete window.abc; 正常模式删除不了, 不报错
  4 abc.length = 4; 无法修改
  
  1 eval() 函数计算 JS 字符串, 并把它作为脚本代码来执行, ‘var hh = 666;’ == 声明赋值
  2 eval(‘var hh = 666;’); 内部会生成新的作用域
  3 禁止对象属性重名 (只有IE)
  4 禁止函数参重名
  5 禁止使用以 0 开头的八进制数, ES6新的语法标准, 八进制以 0o 开头表示, 与 16进制的 0x 形成统一语法格式 🧡
  6 禁止使用 with 语句, 正常模式也不推介使用, 效率很低下
  7 强制为 eval 创建新作用域
  
  8 arguments 不再和形参动态同步, 没有关联了 🧡
  9 禁止使用 arguments.callee
  10 函数中禁止 this 指向全局对象 window , this变成 undefined 🧡
  11 函数只能在全局 或 函数内部声明 🧡
  12 保留字直接是不能用来命名

2 SASS + LESS

1 sass
-----------------------------------------------------------------------------------
1 $开头定义变量 -- $hh = #008c8c

2 嵌套语法
  body { 
  	style -- ...
  	.box { style... }
  }

3 父选择器标识符 -- &

4 注释
  1 // -- 单行注释 -- 不会被编译到 css文件中
  2 /* */ -- 多行注释会被编译到 css文件中
  
5 格式
  1 xx.sass -- 缩进语法
  2 xx.scss -- 嵌套语法
-----------------------------------------------------------------------------------

2 less
-----------------------------------------------------------------------------------
1 @开头定义变量 -- $hh = #008c8c
2 less 语法 === scss 上面的 2-3-4
-----------------------------------------------------------------------------------

3 模块化规范

1 简单概念: 
-----------------------------------------------------------------------------------
1 没有模块化存在的问题: 
  1 引入大量的 JS文件, 容易出现全局变量名冲突的问题
  2 闭包可以解决该问题, 但是代码不可复用了
  3 对于大的项目, 没有模块化会形成巨大的障碍
  4 因为无法将一个大程序拆分成互相依赖的小文件, 再用简单的方法拼装起来
-----------------------------------------------------------------------------------

2 常见的模块化规范: 
-----------------------------------------------------------------------------------
1 ES6: 浏览器支持
2 CommonJS: Node支持
3 CMD: 遗弃了  //国内的个人开发的
4 AMD: ES6出现之前的代替品
-----------------------------------------------------------------------------------

3 CommonJS:  //需要依赖一些环境才可以使用
-----------------------------------------------------------------------------------
导出: 
module.exports = {
  b1,
  b2
}

导入: 
let {b1, b2} = require('./hh.js')
-----------------------------------------------------------------------------------

4 ES6 模块化规范
-----------------------------------------------------------------------------------
1 基础使用方式: 

  方式 1: 
    1 export {name, age}  //导出 -> 暴露俩个内部变量给外部
    2 import {name, age} from './hh.js'  //导入别人暴露出来的变量

  方式 2: 
    1 export { name as b1,  age as b2}  //设置期望导出的变量名
    2 import {b1, b2} from './hh.js'

    3 export {name, age}
    4 import {name as a1, age as a2} from './hh.js'  //设置当前文件, 要使用的变量

  方式 3: 
    1 export default {name, age}  
    2 import hh from "./a1.js"   //自定义命名

  方式 4: 
    import './a.js'  //表示直接导入并执行该文件, 但是该文件的变量还是要通过, 模块化的方式获取


2 导入导出的一些简写
  1 其他导出方式:
    1 export var age = 18;   
    2 export test() {}
    3 export class Test{}

  2 导入 -> 默认导出 + 其他导出 -> 简写: 
    1 import test,{name, ..} from './a.js';


3 注意事项:

  1 script标签加上 type="module", 底层就会把当前 JS文件当做模块化来解析了  (不会有命名冲突的问题了)

  2 ES6 的模块化自动采用 ES5严格模式

  3 模块之中, 顶层的 this 关键字返回是 undefined, 而不是指向 window

  4 一个模块可以有多个导出, 但只能有一个默认导出
-----------------------------------------------------------------------------------

4浏览器加载 JS的规则

1 说明: 默认情况浏览器是同步加载 JavaScript 脚本, 为了防止堵塞, 浏览器允许脚本异步加载

2 设置: 
-----------------------------------------------------------------------------------
1 <script src="./hh.js" defer></script>
  // 等到 DOM结构, 以及其他脚本执行完成, 才会执行这个脚本
  // 如果有多个defer脚本, 会按照它们在页面出现的顺序加载, 而多个async脚本是不能保证加载顺序的
  
2 <script src="./hh.js" async></script>
  // //async一旦下载完, 渲染引擎就会中断渲染, 执行这个脚本以后, 再继续渲染 (下载完就执行)
-----------------------------------------------------------------------------------