03 2021 档案
摘要：默认情况下： #div1 { width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; } offsetWidth = width + padding + border 盒模型宽度 = 内容宽度 + 内边距 + 边框 （不算
阅读全文
摘要：在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。 单页面应用的路由，需要解决2个问题： 1.如何改变 URL，不触发页面的刷新？ 2.如何监听 URL 的变化（包括：用户主动切路由和浏览器的前进后退）？ 一、Hash模式 URL表现形式 在内部传递的实际 URL 之前使用
阅读全文
摘要：什么是媒体查询 @media ？ 概念：为不同尺寸的屏幕设定不同的CSS样式 示例： @media screen and (min-device-width:100px) and (max-device-width:300px) { #div0 {...} } @media screen and (
阅读全文
摘要：什么是响应式 Vue采用非入侵式响应式系统，数据模型仅仅是普通的JavaScript对象。 当修改数据时，视图会自动进行更新。 如何追踪变化 当把一个普通的JavaScript对象传入Vue实例，作为 data 选项。 Vue将遍历此对象的所有的property，并使用Object.definePr
阅读全文
摘要：为什么要使用JSONP 由于浏览器的安全限制（同源策略），不允许AJAX访问跨域（协议、域名、端口有不同）的数据接口。 JSONP的实现原理 因为script标签不存在跨域限制。可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址。 这种数据获取方式，称为“JS
阅读全文
摘要：背景 当一个组件非常大时，可以在什么时候用到了，再去加载，而不是一开始就去加载。从而优化页面的渲染速度。 使用异步组件 <template> <div> <!-- 异步组件 --> <AsyncDemo v-if="isShow"/> <button @click="isShow = true">s
阅读全文
摘要：背景 性能优化，会缓存不活动的组件实例，而不是销毁它们。 主要用于保留组件状态或避免重新渲染。 Props include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 注
阅读全文
摘要：基础 混入 (mixin) 提供了一种方式，来分发 Vue 组件中的可复用功能。 一个混入对象可以包含任意组件选项。 当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 选项合并 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 数据对象在内部会进行递归合
阅读全文
摘要：背景 修改与DOM元素相关联的数据后，页面不会立即重新渲染。如果立即去获取DOM，这个时候DOM上的数据还是修改之前的，因为DOM还没有更新。 要想或得更新后的DOM，那么就需要使用 Vue.nextTick() 这个API。 原理 Vue 在更新 DOM 时是异步执行的。 只要侦听到数据变化，Vu
阅读全文
摘要：架构模式（architectural pattern） 是一门专门的学问，用来设计一个程序的结构。属于编程方法论。 以下讨论的 MVC、MVP、MVVM都是架构模式。 MVC （Model-View-Controller） 后端分层开发的概念 Model（模型层）：操作数据。 View（视图层）：提
阅读全文
摘要：事件绑定 事件绑定 const btn = document.getElementById('btn1') // 主流浏览器 btn.addEventListener('click', event => { console.log('clicked me') }) // IE8 及更早版本 btn.
阅读全文
摘要：获取DOM节点 document.getElementById('id') // 元素 document.getElementsByTagName('div') // 集合 document.getElementsByClassName('class') // 集合 document.querySe
阅读全文
摘要：单线程与多线程 当一个程序开始运行时，它就是一个进程，进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由一个或多个线程所组成的。 线程是程序中的一个执行流，每个线程都有自己的专有寄存器(栈指针、程序计数器等)。线程可以理解为进程中的执行的一段程序片段。 例如——某音频播放程序可以实
阅读全文
摘要：目的 函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类
阅读全文
摘要：参数1 参数2及之后参数 返回 .call( ) `this`绑定的对象 参数 执行结果 .apply( ) `this`绑定的对象 参数的数组 执行结果 .bind( ) `this`绑定的对象 参数 函数 示例： // applyadd.apply(null, [1, 2]);
阅读全文
摘要：1. 作用域 作用域（Scope）指的是代码中定义变量的区域或上下文，它决定了代码中哪些部分可以访问哪些变量。JavaScript 中的作用域主要有两种：全局作用域和局部作用域。 1.1 全局作用域 在最外层定义的变量具有全局作用域，可以在任何地方访问。 var globalVar = "I am
阅读全文
摘要：原型 原型图（图片来源：JavaScript高级程序设计） 构造函数Person 的原型（Person.prototype) 指向 Person Prototype 原型Person Prototype 的构造函数（Person.prototype.constructor) 指向 Person 实例
阅读全文
