前端常见知识点总结

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    设置viewport宽度，为一个正整数，或字符串`device-width`
// height   设置viewport高度正整数或者`device-height`，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable    是否允许手动缩放

article::before {
  content: attr(data-parent);
}

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

<style>
    .sub{
        width: 100px;
        float: left;
        background: #00abff;
    }
    .extra{
        width: 200px;
        float: right;
        background: red;
    }
    .main{
        margin-left: 100px;
        margin-right: 200px;
        background: pink;
    }
</style>

<div class="sub">sub</div>
<div class="extra">extra</div>
<div class="main">main</div>

<style>
    .sub, .extra {
        position: absolute;
        top: 0;
        width: 200px;
    }
    .sub {
        left: 0;
        background: red;
    }
    .extra {
        right: 0;
        background: #00abff;
    }
    .main {
        margin: 0 200px;
        background: pink;
    }
</style>
<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

<style>
    .layout {
        display: flex;
    }
    .main {
        flex: 1;
    }
    .aside {
        width: 200px;
    }
</style>
<div class="layout">
    <aside class="aside">侧边栏宽度固定</aside>
    <div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="main">主内容栏宽度自适应</div>
    <aside class="aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="aside">左侧边栏宽度固定</aside>
    <div class="main">主内容栏宽度自适应</div>
    <aside class="aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="aside">第1个侧边栏宽度固定</aside>
    <aside class="aside">第2个侧边栏宽度固定</aside>
    <div class="main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="main">主内容栏宽度自适应</div>
    <aside class="aside">第1个侧边栏宽度固定</aside>
    <aside class="aside">第2个侧边栏宽度固定</aside>
</div>

<style>
  .common {
    background: #00abff;
  }
  #demo1 {
    height: 100px;
    line-height: 100px;
  }
</style>
<div id="demo1" class="common">
    demo 1
</div>

<style>
  #demo1 {
    text-align: center;
  }
</style>
<div id="demo1">
    <span>hello world</span>
</div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #00abff;
}

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 100px solid #00abff;
}

#trapezoid {
  width: 50px;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 100px solid #00abff;
}

<style type="text/css">
    .b169 {
        width: 100%;
        height: 0;
        padding-bottom: 56.2%;
        position: relative;
    }

    .b169>.innerb169 {
        width: 100%;
        height: 100%;
        background-color: gainsboro;
        position: absolute;
    }
</style>
<div class="b169">
    <div class="innerb169">your html</div>
</div>

<style>
    .topDiv {
        width: 500px;
        border: 2px solid black;
    }
    .floatDiv {
        width: 100px;
        height: 100px;
        border: 2px dotted red;
        color: red;
        margin: 4px;
        float: left;
    }
    .bottomDiv {
        width: 500px;
        height: 100px;
        margin: 5px 0;
        border: 2px dotted black;
    }
    .textDiv {
        color: blue;
        border: 2px solid blue;
    }
</style>
<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

<style>
    .topDiv {
        width: 500px;
        border: 2px solid black;
    }
    .floatDiv {
        width: 100px;
        height: 100px;
        border: 2px dotted red;
        color: red;
        margin: 4px;
        float: left;
    }
    .bottomDiv {
        width: 500px;
        height: 100px;
        margin: 5px 0;
        border: 2px dotted black;
    }
    .textDiv {
        color: blue;
        border: 2px solid blue;
        clear: left;
    }
    .blankDiv {
        clear: both; /* or left */
    }
</style>
<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
    <div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>

<style>
    .topDiv {
        width: 500px;
        border: 2px solid black;
    }
    .floatDiv {
        width: 100px;
        height: 100px;
        border: 2px dotted red;
        color: red;
        margin: 4px;
        float: left;
    }
    .bottomDiv {
        width: 500px;
        height: 100px;
        margin: 5px 0;
        border: 2px dotted black;
    }
    .textDiv {
        color: blue;
        border: 2px solid blue;
    }
    .clearfix:after {
        content: '';
        height: 0;
        display: block;
        clear: both;
    }
</style>
<div class="topDiv clearfix">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

<style>
    .topDiv {
        width: 500px;
        border: 2px solid black;
        overflow: auto;
    }
    .floatDiv {
        width: 100px;
        height: 100px;
        border: 2px dotted red;
        color: red;
        margin: 4px;
        float: left;
    }
    .bottomDiv {
        width: 500px;
        height: 100px;
        margin: 5px 0;
        border: 2px dotted black;
    }
    .textDiv {
        color: blue;
        border: 2px solid blue;
    }
</style>
<div class="topDiv">
    <div class="textDiv">...</div>
    <div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>

<style>
    .common {
        color:black;
        background: #FF0000;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 50px;
    }
</style>
<div class="common">...</div>
<div class="common">...</div>

<style>
    .common {
        color:black;
        background: #FF0000;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 50px;
    }
    .bfc {
        overflow: hidden;
    }
</style>
<div class="bfc">
    <div class="common">...</div>
</div>
<div class="common">...</div>

<style>
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: blue;
    }
    .main {
        height: 200px;
        background: #f00;
    }
</style>
<div class="aside"></div>
<div class="main"></div>

<style>
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: blue;

    }
    .main {
        height: 200px;
        background: #f00;
        overflow: hidden;
    }
</style>
<div class="aside"></div>
<div class="main"></div>

设备像素比 ＝ 物理像素 / 设备独立像素

@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

<meta name="viewport" content="width=device-width, initial-scale=1">

// 页面适配
// 所有单位均需采用rem(视觉图的像素值)方法计算相应的虚拟像素值
$vm_design: 360; // 根据需要替换成设计稿的值,比如设计稿的宽度是360px
$vm_fontsize: $vm_design / 10;  // 是$vm_design的十分之一

@function rem($px) {
  @return ($px / $vm_fontsize) * 1rem;
}

// 页面适配
// 根元素大小使用vw单位
html {
  font-size: ($vm_fontsize / $vm_design) * 100vw; // 同时通过Media Queries 限制根元素最大最小值
  @media screen and (max-width: 320px) {
    font-size: 32px;
  }
  @media screen and (min-width: 540px) {
    font-size: 54px;
  }
}

// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
  max-width: 540px;
  min-width: 320px;
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: transparent;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且
都是正零 +0
都是负零 -0
都是 NaN
都是除零和 NaN 外的其它同一个数字

let a = {
  valueOf() {
    return 0;
  },
  toString() {
    return '1';
  },
  [Symbol.toPrimitive]() {
    return 2;
  }
}
1 + a // => 3
'1' + a // => '12'

var o = {
    name: 'tc9011',
};

var o1 = new Object({name: 'tc9011'});

function Human(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = function () {
        return this.firstName + ' ' + this.lastName;
    };
}

var tc = new Human('t', 'c');

const person = {
  isHuman: true,
};

const me = Object.create(person);

function createPerson(name, age, job){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function (){
    console.log(this.name);
  };
  return o;
}
var person1 = createPerson('tc',27,'SE');
var person2 = createPerson('zj',23,'Designer');

console.log(person1.name);                    // tc
console.log(person2.name);                    // zj

function Human() {}
Human.prototype.firstName = 't';
Human.prototype.lastName = 'c';
Human.prototype.fullName = function () {
  return this.firstName + ' ' + this.lastName;
};

var p1 = new Human();
console.log(p1.firstName);                    // t
console.log(p1.lastName);                     // c
p1.fullName();                                // t c

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ['tc','zj'];
}
Person.prototype = {
  constructor: Person,
  sayName: function () {
    console.log(this.name);
  }
};
var person1 = new Person('tc',29,'se');
var person2 = new Person('zj',24,'art');
person1.friends.push('wcx');
console.log(person1.friends);		               //["tc", "zj", "wcx"]
console.log(person2.friends);		               //["tc", "zj"]
console.log(person1.friends === person2.friends);  //false
console.log(person1.sayName === person2.sayName);  //true

new Person("John");

function create() {
    var obj = {};
    obj.__proto__ = Person.prototype; // 此时便建立了obj对象的原型链：
    // obj->Person.prototype->Object.prototype->null
    var result = Person.call(obj, arguments); // 相当于obj.Person("John")
    return typeof result === 'object' ? result : obj; // 如果无返回值或者返回一个非对象值，则将obj返回作为新对象
}

// 在for循环中，设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。
for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}                                       
// 10, 10, 10, 10, 10, 10, 10, 10, 10, 10


for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}                                       
// 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

var a = 0;

if (true) {
    a = 10;               // ReferenceError: a is not defined
    let a;
}                 

console.log(a);          // undefined
var a = 10;

console.log(b);			// Uncaught ReferenceError: b is not defined
let b = 10; 

if (true) {
    let a;
    let a;   // SyntaxError: Identifier 'a' has already been declared
}

const number = 1;
number = 3;   // TypeError: Assignment to constant variable.

const bar;   // SyntaxError: Missing initializer in const declaration
bar = 1;

const person = {};
person.name = 'tc9011';

console.log(person.name);               // tc9011

function f() {
  var args1 = Array.prototype.slice.call(arguments);
  var args2 = [].slice.call(arguments);

  // ES2015
  const args3 = Array.from(arguments);
  const args4 = [...arguments];

  console.log(args1);
  console.log(args2);
  console.log(args3);
  console.log(args4);
}

f('1', '2');
// [ '1', '2' ]
// [ '1', '2' ]
// [ '1', '2' ]
// [ '1', '2' ]

function foo() {
  var a = 0;
  function bar() {
    console.log(a);
  }
  return bar;
}

var baz = foo();
baz();						// 0

function foo() {
  var a = 0;
  function bar() {
    console.log(a);
  }
  return bar;
}

var baz = foo();
baz();						// 0

function foo() {
  var a = 0;
  function bar() {
    console.log(a);
  }
  baz(bar);
}

function baz(fn) {
  fn();
}

foo();                    					// 0

/************分割线**************/

var a = 0;
setTimeout(function () {
  console.log(a);
}, 1000);

function setTimeout(fn, delay) {
  // delay code
  fn();                                     // 0
}

function coolModule() {
  var something = "cool";
  var another = [1, 2, 3];

  function doSomething() {
    console.log(something);
  }

  function doAnother() {
    console.log(another.join(' ! '));
  }

  return {
    doSomething: doSomething,
    doAnother: doAnother,
  };
}

var foo = coolModule();

foo.doSomething();                              // cool
foo.doAnother();                                // 1 ! 2 ! 3

var a = 0;
(function () {
  console.log(a);                             // 0
})();

var count = 5;
outputNumbers(count);

/*********等价于***********/

outputNumbers(5);

var someFunction = function() {
  // 这里是块级作用域
}；
someFunction();

function() {
  // 这里是块级作用域	
}();  // 出错

(function() {
  // 这里是块级作用域
})();

var a = 0;
var fn = function () {
  console.log(a);                             // 0
};
fn();

for (var i = 1; i < 5; i++) {
  setTimeout(function() {
    console.log(i)                        // 5 5 5 5
  }, 1000);
}

for (var i = 1; i < 5; i++) {
  (function (j) {
    setTimeout(function() {
      console.log(j)                      // 1 2 3 4
    }, 1000);
  })(i);
}

person1.constructor === Person

Person.prototype.constructor === Person

person1.__proto__ === Person.prototype
person1.__proto__.constructor === Person

function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function () {
  return this.property;
};

function SubType() {
  this.subproperty = false;
}

// 继承SuperType
SubType.prototype = new SuperType();    // 重写原型对象，代之以一个新类型的实例
SubType.prototype.getSubValue = function () {
  return this.subproperty;
};
var instance = new SubType();
console.log(instance.getSuperValue());	//true

function Father() {
    this.lastName = 't';        
    this.isHuman = true;
}

var father = new Father();
console.log(father.isHuman);                    // t
console.log(father.lastName);                   // true


function Son() {
    this.firstName = 'c';
}

Son.prototype = new Father();					// 重写Son的原型对象

var son = new Son();
console.log(son.lastName);                       // t
console.log(son.isHuman);                        // true 
console.log(son.firstName);                      // c

function Father() {
    this.lastName = 't';        
    this.isHuman = true;
    this.card = {							  // 引用类型会被所有实例共享
        bank: '',
        ID: ''
    };
}

var father = new Father();
console.log(father.isHuman);                    // t
console.log(father.lastName);                   // true


function Son() {
    this.firstName = 'c';
}

Son.prototype = new Father();

var son = new Son();
console.log(son.lastName);                       // t
console.log(son.isHuman);                        // true 
console.log(son.firstName);                      // c

son.card.bank = 'BOC';							 // son实例改变card的值会影响其他实例

var son2 = new Son();
console.log(son2.card.bank);                    // BOC

function Father(name) {
    this.lastName = name;        
    this.isHuman = true;
    this.card = {
        bank: 'ICBC',
    };
}

function Son() {
    this.firstName = 'c';
    Father.call(this, 't');							// 向父类型传参
}

var son = new Son();
console.log(son.card.bank);                         // 'ICBC'
console.log(son.lastName);                          // t
son.card.bank = 'BOC';
console.log(son.card.bank);                         // 'BOC'

var son2 = new Son();
console.log(son2.card.bank);                        // 'ICBC'

function Father(name) {
    this.name = name;
    this.isHuman = true;
    this.card = {
        bank: 'ICBC',
    };
}

Father.prototype.getName = function () {
    console.log(this.name);
};

function Son(name) {
    Father.call(this, name);
}

Son.prototype = new Father();

var son = new Son('tc');
console.log(son.isHuman);                               // true
console.log(son.name);                                  // tc
son.getName();                                          // tc

console.log(son.card.bank);                             // ICBC
son.card.bank = 'BOC';
console.log(son.card.bank);                             // BOC

var son2 = new Son('zj');
console.log(son2.isHuman);                              // true
console.log(son2.name);                                 // zj
son2.getName();                                         // zj
console.log(son2.card.bank);                            // ICBC

var person = {
  name: 'tc',
  friend: ['a', 'b', 'c']
};

var anotherPerson = Object.create(person);
anotherPerson.name = 'zz';
anotherPerson.friend.push('d');
console.log(anotherPerson.friend);     // [ 'a', 'b', 'c', 'd' ]

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = 'jj';
yetAnotherPerson.friend.push('e');
console.log(yetAnotherPerson.friend);  // [ 'a', 'b', 'c', 'd', 'e' ]

console.log(person.friend);	           // [ "a", "b", "c", "d", "e" ]

var person = {
  name: 'tc',
  friend: ['a', 'b', 'c']
};

function createAnother(original) {
  var clone = Object.create(original);
  clone.sayHi = function () {
    console.log('hi')
  };
  return clone;
}

var anotherPerson = createAnother(person);
anotherPerson.sayHi();			                          // hi

function inheritPrototype(Son, Father) {
  var prototype = Object.create(Father.prototype);	// create object
  prototype.constructor = Son;        
  Son.prototype = prototype;
}

function Father(name) {
  this.name = name;
  this.colors = ['red','blue','green'];
}
Father.prototype.sayName = function () {
  console.log(this.name);
};

function Son(name, age) {
  Father.call(this,name);
  this.age = age;
}

inheritPrototype(Son, Father);

Son.prototype.sayAge = function () {
  console.log(this.age);
};

var son = new Son('a', 11);
console.log(son.name);                   // a
console.log(son.colors);                 // [ 'red', 'blue', 'green' ]
son.sayAge();                            // 11
son.sayName();                           // a

var x = 1;
function bar() {
  console.log(this.x);			
}
bar();                          // 1

function sayHi() {
  console.log(`${this.name} say hi`);
  console.log(this === o);
}

var o = {
  name: 'tc9011',
  sayHi: sayHi,
};

o.sayHi();                                  
// tc901 say hi
// true

var name = 'tc';

function Person(name) {
  this.name = name;
}

var a = new Person('tc9011');
console.log(a.name);                                 // tc9011
console.log(this.name);                              // tc

function sayName(age, isHuman) {
  this.age = age;
  this.isHuman = isHuman;

  console.log(this.name);
  console.log(this.age);
  console.log(this.isHuman)
}

var o = {
  name: 'tc9011',
  sayName: sayName,
};
var o2 = {
  name: 'tc',
};

o.sayName.call(o2, 15, true);                      // tc 15 true
o.sayName.apply(o2, [16, false]);                  // tc 16 false

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100)
}

var id = 21;

foo.call({id: 42});                 // id: 42

// shallow copy in the array
var array1 = [0, 1, 2, 3, { name: 'a' }];
var array2 = array1.slice();
console.log(array2);                // [ 0, 1, 2, 3, { name: 'a' } ]

array2.push(4);
array2[4].name = 'b';
console.log(array1);                // [ 0, 1, 2, 3, { name: 'b' } ]
console.log(array2);                // [ 0, 1, 2, 3, { name: 'b' }, 4 ]


// common shallow copy
function shallowCopy(source) {
  if (!source || typeof source !== 'object') {
    throw new Error('error arguments');
  }
  var targetObj = source.constructor === Array ? [] : {};
  for (var keys in source) {
    if (source.hasOwnProperty(keys)) {
      targetObj[keys] = source[keys];
    }
  }
  return targetObj;
}

var a = {
  name: 'a',
};

var b = shallowCopy(a);
console.log(b);                       // { name: 'a' }

// 通过递归实现深拷贝，但是没有办法处理源对象内部循环引用的问题，同时对Date，Funcion等类型值也没有实现真正的深度复制，但是这些类型的值在重新定义的时候一般都是直接覆盖，所以也不会对源对象产生影响，从一定程度上来说也算是实现了一个深拷贝。
function deepCopy(source) {
  if (!source || typeof source !== 'object') {
    throw new Error('error arguments');
  }
  var targetObj = source.constructor === Array ? [] : {};
  for (var keys in source) {
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepCopy(source[keys]);
      } else {
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}

var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  fun: function(){
    return 1;
  }
};
var o2 = deepCopy(o1);
console.log(o2 === o1);                     // false
console.log(o2.obj === o1.obj);             // false
console.log(o2.fun === o1.fun);             // true


// 通过`JSON.parse`和`JSON.stringify`实现深拷贝，在序列化JavaScript对象时，所有函数和原型成员会被有意忽略，这个实现可以满足一些比较简单的情况，能够处理JSON格式所能表示的所有数据类型，同时如果在对象中存在循环应用的情况也无法正确处理。
function deepCopy(source){
  return JSON.parse(JSON.stringify(source));
}
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  func: function(){
    return 1;
  }
};
var o2 = deepCopy(o1);
console.log(o2);                          // { arr: [ 1, 2, 3 ], obj: { key: 'value' } }


// 通用的深拷贝
function deepCopy(source) {
  if (!source || typeof source !== 'object') {
    throw new Error ('error arguments');
  }

  var targetObj = Object.prototype.toString.call(source) === '[object Array]' ? [] : {};
  for (var key in source) {
    if (source.hasOwnProperty(key)) {
      if (source[key] && typeof source[key] === 'object') {
        targetObj[key] = Object.prototype.toString.call(source) === '[object Array]' ? [] : {};
        targetObj[key] = deepCopy(source[key]);
      } else if (source[key] && Object.prototype.toString.call(source[key]) === '[object Function]') {
        targetObj[key] = new Function("return " + source[key].toString())();
      } else {
        targetObj[key] = source[key];
      }
    }
  }
  return targetObj;
}

var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  fun: function(){
    return 1;
  }
};

var o2 = deepCopy(o1);

console.log(o2 === o1);                     // false
console.log(o2.obj === o1.obj);             // false
console.log(o2.fun === o1.fun);             // false

o2.obj.key = 'tc';
console.log(o2);                            // { arr: [ 1, 2, 3 ], obj: { key: 'tc' }, fun: [Function] }
console.log(o1);                            // { arr: [ 1, 2, 3 ], obj: { key: 'value' }, fun: [Function: fun] }

// setTimeout模拟setInterval
function run() {
    //其他代码
    setTimeout(function(){
        run();
    }, 10000);
}

setInterval(function(){
    run();
}, 10000);

$.on('button', 'click', function onClick() {
  setTimeout(function () {
    console.log('You clicked the button!');
  }, 2000);
});

console.log('Hi!');

setTimeout(function timeout() {
  console.log('Click the button!');
}, 5000);

console.log('Welcome to loupe.');
// Hi!
// Welcome to loupe.
// Click the button!

// 当你点击按钮时会输出：
// You clicked the button!

setTimeout(function () {
  console.log(1);
});

new Promise(function (resolve, reject) {
  console.log(2)
  resolve(3)
}).then(function (val) {
  console.log(val);
});

// 2
// 3
// 1

console.log(1);
// 栈
setTimeout(function () {
  console.log(2);
  // 微任务
  Promise.resolve(100).then(function () {
    console.log('promise')
  })
});

let promise = new Promise(function (resolve, reject) {
  console.log(7);
  // 栈
  resolve(100)
}).then(function (data) {
  // 微任务
  console.log(data)
});
// 栈
setTimeout(function () {
  console.log(3)
});
console.log(5);

// 浏览器结果：1 7 5 100 2 promise 3
// node 结果：1 7 5 100 2 3 promise

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap {
            width: 200px;
            height: 200px;
            background: mediumpurple;
        }
        #outer {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background: #00abff;
        }
        #inner {
            position: relative;
            top: 25px;
            left:25px;
            width: 50px;
            height: 50px;
            background: white;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>
<script>
  var wrap = document.getElementById('wrap');
  var outer = document.getElementById('outer');
  var inner = document.getElementById('inner');

  wrap.addEventListener('click',function(){
    alert('789');
  },false);
  outer.addEventListener('click',function(){
    alert('456');
  },false);
  inner.addEventListener('click',function(){
    alert('123');
  },false);
</script>
</body>
</html>