Kinghiee

一、 javascript 6种常见继承在解释 inherits 函数之前先来再次熟悉一下js6种继承方式。熟悉后再来看 inherits 函数中的继承实现。 1. 原型链继承这种继承的最大特点是：子类的原型继承父类的实例对象 例子 1234567891011121314151617function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;};function SubType() { this.subproperty = false;}SubType.prototype = new SuperType(); // 子类原型继承父类实例对象(这是原型链继承的特点)SubType.prototype.getSubValue = function() { return this.subproperty;}let inst ...

一、export 命令export 命令用于规定模块的对外导出接口。 一个独立文件就是一个模块。如果从外部想要获取文件内部所有变量，文件内没有使用export关键字输出该变量(提供对外接口)，那么外部就无法获取文件内部变量。 (一)、文件内部不提供对外接口(没有使用export关键字导出)noExport.mjs 文件内 123456// noExport.mjslet demo = 'kinghiee';function logInfo() { console.log('logInfo func');} import.mjs 文件内 123import noExport from './noExport.mjs';console.log(noExport); 在编辑器中会发现，会提示如果要是不顾提示坚持执行会得到如下error 123456789import noExport from './noExport.mjs'; ^^^^^^^^SyntaxError: Th ...

一、loader的本质是什么?loader 本质上是导出为函数的 JavaScript 模块。loader runner(有兴趣自行了解)会调用此函数，然后将上一个 loader 产生的结果或者资源文件传入进去。函数中的 this 作为上下文会被 webpack 填充，并且 loader runner 中包含一些实用的方法。 如下代码是loader函数 1234567891011/** * * @param {string|Buffer} content 源文件的内容 * @param {object} [map] 可以被 https://github.com/mozilla/source-map 使用的 SourceMap 数据 * @param {any} [meta] meta 数据，可以是任何内容 */function webpackLoader(content, map, meta) { // 你的 webpack loader 代码}module.exports = webpackLoader ...

前言手动搭建 vue ssr 一直是一些前端开发者的噩梦，因为其中牵扯到很多依赖包之间的配置以及webpack在node中的使用。就拿webpack配置来说，很多前端开发者还是喜欢用webpack-cli脚手架搭建项目。导致这样的原因之一无外乎学习成本高，软件复杂等。这也是有些前端开发者直接拥抱nuxt.js的部分原因。这篇博客使用vue2，以步骤为主，来展示如何创建完整ssr开发环境。 主要参考文章 vue2 ssr 中文官网 webpack 中文官网 webpack-dev-middleware webpack-hot-middleware webpack tapable memory-fs express vue2 ssr 官方参考案例 构建ssr所需依赖包1234567891011121314151617181920212223242526{ "devDependencies": { "chokidar": "^3.5.3", "css-loader": &quo ...

桥接模式概念桥接模式是一种结构型设计模式， 可将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构， 从而能在开发时分别使用。 较为通俗的概念 1将抽象与实现分离，使它们可以独立变化。使用组合的方式替代替代继承的方式实现实现解耦和复用 继承的弊端(局限)继承好处 提高了代码的复用性（多个类相同的成员可以放到同一个类里） 提高了代码的维护性（如果放大的代码需要修改，修改一处就行） 继承弊端 继承让类与类之间产生了关系，增强了类的耦合性。 继承弊端的案例 如下描述： 需要实现一个支付系统，系统目前划分两种支付渠道，但是后续还有可能有其他类型支付。支付方式有密码和指纹，后续也可加入刷脸等支付方式 微信支付1.1 密码支付1.2 指纹支付1.3 xxxx 支付宝支付2.1 密码支付2.2 指纹支付3.3 xxxx 其他支付渠道 开始实施时，如果支付渠道和方式的分类都已知，可以写一个支付类，并且支付方式里通过参数对支付方式和渠道进行分支判断，去实行不同的支付方式。但是到了后期，支付渠道和方式的增加，我们需要修改原先代码，久而久之，代码里充满了分支语句，难以维 ...

备忘录模式概念及其解释备忘录模式是一种行为设计模式， 允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。 它在实际开发中用在word、excel等软件的撤销恢复功能、缓存上一页内容、游戏中存档等等 使用场景 当你需要创建对象状态快照来恢复其之前的状态时， 可以使用备忘录模式。 备忘录模式允许你复制对象中的全部状态 （包括私有成员变量）， 并将其独立于对象进行保存。 尽管大部分人因为 “撤销” 这个用例才记得该模式， 但其实它在处理事务 （比如需要在出现错误时回滚一个操作） 的过程中也必不可少。 当直接访问对象的成员变量、 获取器或设置器将导致封装被突破时， 可以使用该模式。 备忘录让对象自行负责创建其状态的快照。 任何其他对象都不能读取快照， 这有效地保障了数据的安全性。 备忘录模式优缺点优点 在不破坏对象封装情况的前提下创建对象状态快照 通过让负责人维护原发器状态历史记录来简化原发器代码 缺点 客户端过于频繁地创建备忘录，将消耗大量内存 备忘录模式相关角色 发起人（Originator）：负责创建一个备忘录，记录自身需要保存的状态，具备状态回滚功能 备忘录 ...

外观模式概念及其解释外观模式是一种结构型设计模式， 能为程序库、 框架或其他复杂类提供一个简单的接口。 它为子系统提供了一个接口，屏蔽一个或多个子系统的复杂功，提供了一个一致的界面（接口）给用户。外观模式是一个非常简单的模式，但它的功能却很强大，非常有用。外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式可以将一些复杂操作封装起来，并创建一个简单的接囗用于调用，它经常出现在多层架构的系统中。 使用场景 子系统复杂 : 子系统复杂 , 通过使用外观模式可以简化调用接口。 子系统通常会随着时间的推进变得越来越复杂。 即便是应用了设计模式， 通常你也会创建更多的类。 尽管在多种情形中子系统可能是更灵活或易于复用的， 但其所需的配置和样板代码数量将会增长得更快。 为了解决这个问题， 外观将会提供指向子系统中最常用功能的快捷方式， 能够满足客户端的大部分需求。 层次复杂 : 系统结构层次复杂 , 每个层级都一个使用外观对象作为该层入口 , 可以简化层次间的调用接口。 外观模式优缺点优点 简化调用: 简化复杂系统的调用过程, 无需对子系统进行深入了解, 即可完成调用。 ...

准备 win10系统 Chocolatey: win下的包管理工具，主要用于下载mkcert mkcert: 一个用于生成locally-trusted本地开发证书工具 nodeJs: v16.1.0 Chocolatey包管理工具下载这里提供我两种成功下的方法 方法一 打开chocolatey官网 找到INSTALLING CHOCOLATEY页面 3. 在下拉框中找到适合自己的下载方案 根据官方提示操作(如下图) 创建installChocolatey.cmd文件，文件内容下方已给出 创建完毕文件，运行该文件。 运行choco -?命名查看是否已经安装生效 方法二 以管理员的身份打开PowerShell的控制台 设置PowerShell的ExecutionPolicy为Bypass或者AllSigned 1Set-ExecutionPolicy Bypass -Scope Process -Force 启用TLS 1.2 1[System.Net.ServicePointManager]::SecurityProtocol =[System.Net.S ...

一、link标签定义及使用说明定义: link标签规定了当前文档与外部资源的关系，日常开发常用于链接样式表。 注意: link标签可以出现在head或者body元素中，在body中的情况具体取决于它是否有一个body-ok的链接类型，与此同时link可以重复使用多次，但是最好的实践方式还是把link放到head中使用。 body-ok的链接类型有哪些 ? 类型 描述 dns-prefetch Specifies that the user agent should preemptively perform DNS resolution for the target resource’s origin. modulepreload Specifies that the user agent must preemptively fetch the module script and store it in the document’s module map for later evaluation. Optionally, the module’s dependencies ...

一、情况概述最近在项目布局实现中遇到sticky属性，之前对它的了解不多。这次详细了解它的具体用法。 二、sticky 属性值MDN 定义 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 可以把sticky通俗的理解为: relative和fixed布局的混合 三、sticky 使用条件 父元素不能设置overflow:hidden, scroll, auto, 或 overlay属性。 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 父元素的高度不能低于sticky元素的高度 sticky元素仅在其父元素内生效 四、案例123 <div class="box"> <div class= ...