美文网首页
遗漏知识点

遗漏知识点

作者: 想成为大神的Danny | 来源:发表于2023-01-08 10:08 被阅读0次

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代码运行起来会首先进入该环境
  • 函数环境:当函数被调用执行时,会进入当前函数中执行代码
  • eval(不建议使用,可忽略)

因此在一个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)

相关文章

  • 遗漏知识点

    input 把input的外边框放在内部(这样input外边框不占用多余像素)标准盒子类型转ie盒子类型 ie盒子...

  • 遗漏知识点

    一、四种动画 (一)、合成器动画1、合成器自身触发的动画,如惯性滚动;2、transform、opacity(二)...

  • Java遗漏知识点

    使用环境: 操作少量的数据使用 String; 单线程操作大量数据使用 StringBuilder; 多线程操作大...

  • 面试遗漏知识点

    编写一个函数,递归删除指定路径下的所有文件 OC对象的内存布局 block内存管理。只有普通局部变量是传值,其他情...

  • iOS遗漏知识点

    _unsafe_unretained 这样修饰的变量不属于编译器管理的内存,与__weak类似。但是当指向的内存空...

  • CSS思维导图(自己梳理)

    以下是自己梳理的知识点,方便记忆,具体内容查看相应文件。有遗漏的知识点会在CSS小知识点中进行补充。

  • 自己遗漏的知识点

    行内元素、块元素、行内块元素 行内元素不可设置宽高块元素可设置宽高并且独占一行行内块元素可设置宽高 锚点 清除浮动...

  • 你投篮用到了核心力量吗?

    这些天霍伊在重复翻阅投篮的讲稿,发现稿中还是有几点遗漏了,打算结合球友们的投篮提问,顺带把遗漏的知识点写出来。 昨...

  • 20190814

    今天:1、早上将3个知识点默写并递增3个知识点默写。实务。并查看其他内容。 完成 2、早上将管理今晚遗漏点疏忽点再...

  • 复调之二声部

    复习了二声部写作,整理了一下,思路更加清晰,自己之前也有遗漏的知识点

网友评论

      本文标题:遗漏知识点

      本文链接:https://www.haomeiwen.com/subject/uqkucdtx.html