BlogMind

一、是什么不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂 文件上传简单，文件变大就复杂 上传大文件时，以下几个变量会影响我们的用户体验 服务器处理数据的能力 请求超时 网络波动 上传时间会变长，高频次文件上传失败，失败后又需要重新上传等等 为了解决上述问题，我们需要对大文件上传单独处理 这里涉及到分片上传及断点续传两个概念 分片上传分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块（Part）来进行分片上传 如下图 上传完之后再由服务端对所有上传的文件进行汇总整合成原始的文件 大致流程如下： 将需要上传的文件按照一定的分割规则，分割成相同大小的数据块； 初始化一个分片上传任务，返回本次分片上传唯一标识； 按照一定的策略（串行或并行）发送各个分片数据块； 发送完成后，服务端根据判断数据上传是否完整，如果完整，则进行数据块合成得到原始文件 断点续传断点续传指的是在下载或上传时，将下载或上传任务人为的划分为几个部分 每一个部分采用一个线程进行上传或下载，如果碰到网络故障，可以从已经上传或下载的部分开始继续上传下载未完成的部分，而没有必要从头 ...

一、为什么要划分使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高 在划分项目结构的时候，需要遵循一些基本的原则： 文件夹和文件夹内部文件的语义一致性 单一入口/出口 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用 公共的文件应该以绝对路径的方式从根目录引用 /src 外的文件不应该被引入 文件夹和文件夹内部文件的语义一致性我们的目录结构都会有一个文件夹是按照路由模块来划分的，如pages文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹 这样做的好处在于一眼就从 pages文件夹看出这个项目的路由有哪些 单一入口/出口举个例子，在pages文件夹里面存在一个seller文件夹，这时候seller 文件夹应该作为一个独立的模块由外部引入，并且 seller/index.js 应该作为外部引入 seller 模块的唯一入口 12345// 错误用法import sellerReducer from 'src/pages/seller/reduc ...

一、执行上下文简单的来说，执行上下文是一种对Javascript代码执行环境的抽象概念，也就是说只要有Javascript代码运行，那么它就一定是运行在执行上下文中 执行上下文的类型分为三种： 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文 Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用 下面给出全局上下文和函数上下文的例子： 紫色框住的部分为全局上下文，蓝色和橘色框起来的是不同的函数上下文。只有全局上下文（的变量）能被其他任何上下文访问 可以有任意多个函数上下文，每次调用函数创建一个新的上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问 二、生命周期执行上下文的生命周期包括三个阶段：创建阶段 → 执行阶段 → 回收阶段 创建阶段创建阶段即当函数被调用，但未执行任何其内部代码之前 创建阶段做了三件事： 确定 this 的值，也被称为 This Bin ...

一、什么是虚拟DOM虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex） 实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上 在Javascript对象中，虚拟DOM 表现为一个 Object 对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别 创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应 在vue中同样使用到了虚拟DOM技术 定义真实DOM 1234<div id="app"> <p class="p">节点内容</p> <h3>{{ foo }& ...

一、组件通信的概念组件通信是指组件与组件之间数据传递和交互的方式。在 Vue 中，组件之间的通信是非常重要的概念，因为一个应用往往由多个组件构成，它们之间需要相互配合才能完成特定的功能。 二、通信方式1. props / $emit父组件通过 props 向子组件传递数据，子组件通过 $emit 向父组件发送事件 12345678910111213141516171819202122232425262728293031323334353637<!-- 父组件 --><template> <child :msg="message" @changeMsg="handleChange"/></template><script>export default { data() { return { message: 'Hello' } }, methods: { handl ...

一、什么是生命周期生命周期（Life Cycle）是指 Vue 组件从创建到销毁的整个过程，也就是组件的生命历程。 在这个过程中，Vue 提供了一系列的生命周期钩子函数，让我们能在特定的阶段执行自己的代码。 二、生命周期有哪些Vue 2.x 的生命周期钩子主要包含： 1. 创建阶段 beforeCreate：实例创建前，此时数据观测和事件配置都未初始化 created：实例创建后，此时已完成数据观测，但尚未挂载到 DOM 2. 挂载阶段 beforeMount：DOM 挂载前，此时模板已编译，但还未挂载到页面 mounted：DOM 挂载后，此时组件已经渲染到页面上 3. 更新阶段 beforeUpdate：数据更新时，DOM 更新之前调用 updated：数据更新后，DOM 更新完成后调用 4. 销毁阶段 beforeDestroy：实例销毁前调用 destroyed：实例销毁后调用 三、生命周期的应用场景 created 发送 ajax 请求 初始化数据 注册全局事件 mounted 操作 DOM 初始化第三方插件 获取 DOM 节点信息 beforeDestr ...

一、是什么一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure） 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁 下面给出一个简单的例子 12345678function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数，一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName();}init(); displayName() 没有自己的局部变量。然而，由于闭包的特性，它可以访问到外部函数的变量 二、使用场景任何闭包的使用场景都离不开这两点： 创建私有变量 ...

一、背景 网页开发，渲染线程和脚本是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应的原因，本质就是我们常说的 JS 是单线程的 而在小程序中，选择了 Hybrid 的渲染方式，将视图层和逻辑层是分开的，双线程同时运行，视图层的界面使用 WebView 进行渲染，逻辑层运行在 JSCore 中 渲染层：界面渲染相关的任务全都在 WebView 线程里执行。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程 逻辑层：采用 JsCore 线程运行 JS 脚本，在这个环境下执行的都是有关小程序业务逻辑的代码 二、通信 小程序在渲染层，宿主环境会把wxml转化成对应的JS对象 在逻辑层发生数据变更的时候，通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的视图 当视图存在交互的时候，例如用户点击你界面上某个按钮，这类反馈应该通知给开发者的逻辑层，需要将对应的处理状态呈现给用户 对于事件的分发处理，微信进行了特殊的处理，将所有的事件拦截后，丢到逻辑层交 ...

一、方式javaScript本地缓存的方法我们主要讲述以下四种： cookie sessionStorage localStorage indexedDB cookieCookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题 作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成 但是cookie在每次请求中都会被发送，如果不使用 HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用 cookie 保持登录态的网站上，如果 cookie 被窃取，他人很容易利用你的 cookie 来假扮成你登录网站 关于cookie常用的属性如下： Expires 用于设置 Cookie 的过期时间 1Expires=Wed, 21 Oct 2015 07:28:00 GMT Max-Age 用于设置在 Cookie 失效之前需要经过的秒数（优先级比Expires高） 1M ...

效果介绍这是我的博客的一个泡泡🫧交互，主要有以下功能： 页面上会漂浮着多个半透明的气泡 气泡会缓慢上升并旋转 点击气泡会产生爆炸效果，并显示随机词汇 词汇包含财运、奶茶等多种趣味文本 实现步骤1. HTML 结构整个特效是通过 JavaScript 动态创建的，使用 DocumentFragment 优化 DOM 操作： 12345const fragment = document.createDocumentFragment();const container = document.createElement('div');container.className = 'bubble-container';fragment.appendChild(container);document.body.appendChild(fragment); 2. CSS 样式需要添加以下样式来实现气泡和动画效果： 12345678910111213141516171819202122232425262728293031323334353637383940 ...