octopus的专栏

转载 TypeScript 高级类型及用法

本文详细介绍了 TypeScript 高级类型的使用场景，对日常 TypeScript 的使用可以提供一些帮助。前言本文已收录在Github:github.com/beichensky/…[1]中，走过路过点个 Star 呗一、高级类型交叉类型(&)交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。 语法：T & U 其返回类型既要符合T类型也要符合U类型 用法：...

转载 「万字进阶」深入浅出 Commonjs 和 Es Module

一 前言今天我们来深度分析一下Commonjs和Es Module，希望通过本文的学习，能够让大家彻底明白Commonjs和Es Module原理，能够一次性搞定面试中遇到的大部分有关Commonjs和Es Module的问题。老规矩我们带上疑问开始今天的分析????????????： 1 Commonjs 和 Es Module 有什么区别 ？ 2 Commonjs 如何解决的循环引用问题 ？ 3 既然有了exports，为何又出了module.exports? ...

转载 js 监控iframe URL的变化

iframe的url可以前端任何地址，这样就可能出现漏洞，如果钓鱼网站通过js把src改成了危险地址，如果没有监控，就会有很大隐患。所以监控iframe的url变化就是必须要解决的问题了。第一印象的解决方案是通过setInterval轮询监控，貌似不太理想了，而且有延迟。千般搜索，终于找到了好的方法，可以通过H5新增的MutationObserver来解决，配合DOMAttrModified和onpropertychange来解决兼容性问题。废话少说，直接上代码。index.html代码

转载 分享 9 条 Webpack 优化策略

引言webpack的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。本文演示代码，仓库地址:https://github.com/Jack-cool/webpack4速度分析 ????webpack 有时候打包很慢，而我们在项目中可能用了很多的plugin和loader，想知道到底是哪个环节慢，下面这个

转载 总结18个 webpack 插件，总会有你想要的！

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。Plugin 的特点 是一个独立的模块 模块对外暴露一个 js 函数 函数的原型(prototype)上定义了一个注入compiler对象...

转载 你必须知道的 webpack 插件原理分析

在 webpack 中，专注于处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。它和loader有以下区别： loader是一个转换器，将 A 文件进行编译成 B 文件，比如：将A.less转换为A.css，单纯的文件转换过程。webpack 自身只支持 js 和 json 这两种格式的文件，对于其他文件需要通过loader将其转换为 commonJS 规范的文件后，webpack 才能解析到。 plugin是一个扩展器，它丰富了 webpack ...

转载 [万字总结] 一文吃透 Webpack 核心原理

背景Webpack 特别难学！！！时至 5.0 版本之后，Webpack 功能集变得非常庞大，包括：模块打包、代码分割、按需加载、HMR、Tree-shaking、文件监听、sourcemap、Module Federation、devServer、DLL、多进程等等，为了实现这些功能，webpack 的代码量已经到了惊人的程度： 498 份JS文件 18862 行注释 73548 行代码 54 个 module 类型 69 个 dependency 类

转载 一文带你了解如何排查内存泄漏导致的页面卡顿现象

不知道在座的各位有没有被问到过这样一个问题：如果页面卡顿，你觉得可能是什么原因造成的？有什么办法锁定原因并解决吗？这是一个非常宽泛而又有深度的问题，他涉及到很多的页面性能优化问题，我依稀还记得当初面试被问到这个问题时我是这么回答的： 先会检查是否是网络请求太多，导致数据返回较慢，可以适当做一些缓存 也有可能是某块资源的bundle太大，可以考虑拆分一下 然后排查一下js代码，是不是某处有过多循环导致占用主线程时间过长 浏览器某帧渲染的东西太多，导致的卡顿 在

转载 帮你彻底搞懂 JS 中的 prototype、__proto__与constructor（图解）

1. 前言作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _，读作“dunder proto”，“double underscore proto”的缩写），实际上，该属性在ES标准定义中的名字应该是[[Proto

转载 让我告诉你一些强无敌的 NPM 软件包

面对繁忙的日程安排与紧迫的工期限制，选择能够切实提升生产率的工具无疑至关重要。在这里，我整理出一份个人最喜欢的 NPM 软件包清单。为了便于浏览，我还对它们进行了分类，希望呈现出更加清晰的结构。当然，大家不必全数安装与学习。在大多数情况下，每个类别选择一款就足以解决生产需求。我只是想多提供一点替代方案，帮助每位读者朋友找到最适合自己的选项。闲言少叙，咱们马上开始！???? 实用工具Lodashlodash[1]是一套现代 JavaScript 实用程序库，提供模块化、性能与多种附加功能。

转载 值得收藏！让你全面认识 Nginx

Nginx是开源、高性能、高可靠的Web和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新。性能是Nginx最重要的考量，其占用内存少、并发能力强、能支持高达 5w 个并发连接数，最重要的是，Nginx是免费的并可以商业化，配置使用也比较简单。Nginx 特点 高并发、高性能； 模块化架构使得它的扩展性非常好； 异步非阻塞的事件驱动模型这点和Node.js相...

转载 配置React源码本地调试环境

1. 第一步，使用 create-react-app 脚手架创建项目npx create-react-app react-test2. 然后弹射 create-react-app 脚手架内部配置npm run eject3.克隆 react 官方源码 (在项目的根目录下进行克隆)git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react4.接着链接本地源码...

转载 如何提高CSS性能

正文从这开始~~结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分，所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验，这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题，以及如何制作不妨碍人们使用的CSS的最佳实践。目录 CSS是如何工作的？ 注意CSS的大小 优先考虑关键的CSS 使用高效的CSS动画 使用CSS优化字体加载

转载 一文彻底搞懂webpack devtool

为什么需要Source Map首先根据谷歌开发者文档的介绍，Source Map一般与下列类型的预处理器搭配使用：转译器（Babel） 编译器（TypeScript） Minifiers（UglifyJS）为什么呢？因为通常我们运行在浏览器中的代码是经过处理的，处理后的代码可能与开发时代码相差很远，这就导致开发调试和线上排错变得困难。这时Source Map就登场了，有了它浏览器就可以从转换后的代码直接定位到转换前的代码。在webpack中，可以通过devtool选项来配置Source Map

转载 Tmux 使用教程

Tmux 是一个终端复用器（terminal multiplexer），非常有用，属于常用的开发工具。本文介绍如何使用 Tmux。一、Tmux 是什么？1.1 会话与进程命令行的典型使用方式是，打开一个终端窗口（terminal window，以下简称"窗口"），在里面输入命令。用户与计算机的这种临时的交互，称为一次"会话"（session）。会话的一个重要特点是，窗口与其中启动的进程是连在一起的。打开窗口，会话开始；关闭窗口，会话结束，会话内部的进程也会随之终止，不管有没有运行完.

原创 vim插件管理器vim-plug

插件vim-plug有如下优点· 轻量级、单个文件且支持一些直观的安装选项。· 支持并行插件加载（要求Vim编译带有Python或Ruby支持，这几乎已经是现代Vim的标配）。· 支持大多数插件的延迟加载，即只为特定命令或文件类型触发必要的插件。1.安装vim-plug的方式非常简单· 下载插件文件。· 保存为$HOME/.vim/autoload/plug.vim。curl -fLo ~/.vim/autoload/plug.vim --create-dirs htt..

原创 vim折叠

Vim为浏览大型文件提供的一个强大工具是折叠。折叠功能支持文件部分内容的隐藏，隐藏的依据既可以是预定义的规则，也可以是手动添加的折叠标记。1．折叠Python代码首先，需要在.vimrc文件中将foldmethod设置为indent，设置代码如下。set foldmethod=indent将光标移动到其中一个折叠行上，输入zo可以打开当前折叠，输入zc都会将此折叠关闭输入za可切换折叠状态（打开关闭的折叠或关闭打开的折叠）。输入zR和zM分别用于同时打开和关闭所有折叠。2．折叠的类

原创 vim插件安装

1.创建一个存储插件的目录，执行下列命令。mkdir -p ~/.vim/pack/plugings/start2.使Vim能够自动加载每个插件的文档（Vim默认不会这么做）。在~/.vimrc文件（在Windows系统中为用户目录下的_vimrc文件）中添加下列代码。packloadall " 加载所有插件silent! helptags ALL " 为所有插件加载帮助文档然后，每次安装插件都可按照下列步骤进行。1．在GitHub上找到想

原创 linux deno安装与更新

curl -fsSL https://deno.land/x/install/install.sh | sh默认会安装在 /root/.deno/bin/下更新但是现在deno处于快速迭代器，可能几天就是一个版本，按照官网deno upgrade 或者 deno upgrade --version 1.0.5 总是不行，这样的可以直接找到对应包的地址 git clone 或者 windows上下载好再传到linux上unzip deno.zip就好了环境变量...

原创 命令模式

原创 选择模式

原创 替换模式

原创 插入-普通模式

原创 把撤销单元切成块

原创 .vimrc文件在哪里

echo $MYVIMRC

原创 win10 Scrapy的安装

由于在Scrapy的依赖库文件中，pywin32和Twisted的底层是基于C语言开发的，因此需要安装C语言的编译环境。对于Python3.8来说，可以通过安装Visual C++Build Tools来安装这个环境。Visual C++Build Tools是微软公司开发的，下载地址为https://visualstudio.microsoft.com/zh-hans/downloads/...

原创 安装lxml

解决办法：1、修改源（临时）：请使用命令：pip installnumpy -i http://pypi.douban.com/simple --trusted-host pypi.douban.com其他一些国内的pip源，如下：阿里云http://mirrors.aliyun.com/pypi/simple/中国科技大学https://pypi.mirrors....

原创 h5 键盘遮住输入框

var index = 0;if (isIOS()) { document.body.addEventListener('focusin', (e) => { //软键盘弹出的事件处理 index = index + 1; }); document.body.addEventListener('focusout', (e) =&gt...

转载 探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式

正文从这开始~在一个Web项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单。这篇文章就阐述了如何编写相对看着舒服的表单验证代码。假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。  所有选项不能为空  用户名长度不能少于6位 密码长度不能少于6位 手机号码必须符合格式 邮箱地址必须符合格式 注：为简...

转载 css制作箭头提示框效果

一直都在看站友们的作品，今天也来给大家分享一个小的效果，第一次发还有点小紧张呢，语言表达能力不是很好，还请见谅…^先来个简单点的吧，上效果图刚开始在网上看到效果图的时候感觉好神奇，当我试着写出来的时候发现，哇！原来这么简单，我这脑袋瓜咋没反应过来呢，所以整理了下顺便简化了分享出来，希望对大家有帮助。<div class="demo"></div><...

原创 nrm使用介绍

nrm安装npm install -g nrm添加registry地址nrm add sinopia http://192.168.30.135:4873nrm add taobao https://registry.npm.taobao.org切换npm registry地址nrm use taobaonrm use sinopia查看npm使用地址n...

转载 Promise实现原理（附源码）

本篇文章主要在于探究 Promise 的实现原理，带领大家一步一步实现一个 Promise , 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。 接下来，带你一步一步实现一个 Promise 1. Promise 基本结构  new Promise((resolve, reject) => {  set...

转载 前端性能与异常上报

概述对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用 try...catch代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口性能，进行问题排查。刚进公司时，在进行 Node.js的接口开发时，我不太习惯每次排查问题都要通过跳板机登上服务器看日志，后来慢慢习惯了这种方式。举个例子：/*** 获取列表数据* @pa...

转载 video 标签沉浸式播放解决方案

“沉浸播放式”这个概念是我从Android开发里面的沉浸式引申过来的一个概念，沉浸式其实就是隐藏页面顶部的status bar和底部的navigation bar之后呈现出来的页面，一般用户很容易把沉浸式状态栏和透明化状态栏混为一谈，他们的区别如下：沉浸式状态栏透明化状态栏那么回到前端开发，让我们看一下如何让video标签呈现这种沉浸式的播放效果，平常我们使用video标签都是...

转载 H5页面在微信端的分享

微信分享，咋一看好像很复杂，实则非常简单。只需要调用微信官方出的微信jssdk，加上些许配置，就可以实现h5页面在微信上的分享，官方文档地址为：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115一、获取基本信息找到已有公众号的appid，根据这个appid和url向后端发起请求，拿到配置所需要的参数：t...

转载 fiddler修改返回数据的三种方法

背景访问某个URL地址，正常返回结果是{"code":0,"msg":"success","rows":["US","CA","GB","AR","AU","AT","BE","BR","CL","CN","CO&

原创 add(2,3)(5)(1)

const add = (...args) => {    let sum = args.reduce((pre, crt) => pre + crt);    const accu = (...args2) => {    sum += args2.reduce((pre, crt) => pre + crt);        return accu;    }    ...

转载 HTML5全局属性汇总

局部属性和全局属性局部属性：有些元素能规定自己的属性，这种属性称为局部属性。 比如 link 元素，它具有的局部属性有 href、 rel、 hreflang、 media、 type、 sizes 这六个。 全局属性：可以用来配置所有元素共有的行为，这种属性称为全局属性，可以用在任何一个元素身上。1、accesskey 属性使用 accesskey 属性可以设定一个或

转载 JavaScript 的 this 指向问题深度解析

JavaScript 中的 this 指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题。与我们常见的很多语言不同，JavaScript 函数中的 this 指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。

转载 怎么迁移Sublime Text 3插件和配置

方法/步骤打开原sublime text 3软件点击Packages浏览菜单在弹出窗口点击进入上一个目录。拷贝整个Packages文件夹以及Installed Packages文件夹。在需要迁移的电脑，同样安装Sub