遗漏知识点

2023-01-08  本文已影响0人  想成为大神的Danny

innerHTML和outerHTML有什么区别

1）innerHTML:
　　从对象的起始位置到终止位置的全部内容, <span style="color:#fe2c24;">不包括HTML标签</span>。
2）outerHTML:
　　除了包含innerHTML的全部内容外, <span style="color:#fe2c24;">还包含对象标签本身</span>。

二、例子：

<div id="test">
    <span style="color:red">test1</span> test2
</div>

1）innerHTML的值是 <span style="color:red">test1</span> test2
2）outerHTML的值是 <div id="test"><span style="color:red">test1</span> test2</div>

其中，<div id="test"></div>就是差异之处

三种数据结构

一、栈数据结构

先进后出，后进先出；在某些场景，我们仍然需要基于栈数据结构来实现一些功能，比如JavaScript的执行上下文。执行上下文的执行顺序借用了栈数据结构的存取方式（函数调用栈）

二、堆数据结构

堆数据结构是一种树状结构。它的存取数据方式，则与书架与书非常相似。我们只需要知道书的名字，就可以很方便取出我们想要的书，不用像栈那种得把上面的都取出，才能拿到中间某个东西。好比在JSON格式的数据中，我们存储的key-value是可以无序的，因为顺序的不同并不影响我们的使用，我们只需要关心书的名字。

三、队列

在JavaScript中，理解队列数据结构的目的主要是为了清晰的明白事件循环的机制到底是怎么回事。队列是先进先出的数据结构。正如排队过安检一样，排在队伍前面的人一定是最先过安检的人。

四、变量对象与基础数据类型，引用数据类型与堆内存

JavaScript的执行上下文生成之后，会创建一个叫做变量对象的特殊对象，JavaScript的基础数据类型（undefined、null、boolean、number、string、symbol）往往会保存在变量对象中。

引用数据类型的值是保存在堆内存中的对象。JavaScript不允许直接访问堆内存中的数据，因此我们不能直接操作对象的堆内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。这里的引用，我们可以理解为保存在变量对象中的一个地址，该地址与堆内存的实际值相关联。当我们要访问堆内存中的引用数据类型时，实际上我们首先是从变量对象中获取了该对象的地址引用（或者地址指针），然后再从堆内存中取得我们需要的数据。

599584-8e93616d7afcf811.png

执行上下文

每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。

因此在一个JavaScript程序中，必定会产生多个执行上下文，在我的上一篇文章中也有提到，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。

执行上下文可以理解为函数执行的环境，每一个函数执行时，都会给对应的函数创建这样一个执行环境。

为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。

function f1() {
  var n = 999;
  function f2() {
    alert(n);
  }
  return f2;
}
var result = f1();
result(); // 999

因为f1中的函数f2在f1的可执行代码中，并没有被调用执行，因此执行f1时，f2不会创建新的上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。


599584-bb9829780f50c07e.png

什么是模块化？

1.ES6的模块化

模块内声明的变量都是局部变量，不会污染全局作用域；模块内部的变量或者函数可以通过export导出

导出

export let A = 123；
export function test(){
    console.log('test')
}
export class Hello{
    test(){
        console.log('class')
    }
}

导入

import {A,test,Hello} from './main.js'
console.log(A,test,Hello);
2.CommonJs

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

CommonJs规范通过module.exports定义，前端浏览器并不支持，推荐在后端nodeJs中使用

// foo.js
module.exports = function (r) {
    return Math.PI * r * r;
}

//main.js
var foo = require("./foo")
foo(2)
3.AMD(异步模块定义)

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback)
上一篇 下一篇

猜你喜欢

热点阅读