<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[octopus的专栏]]></title><description><![CDATA[持续学习...]]></description><link>https://blog.csdn.net/Magneto7</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; Magneto7]]></copyright><item><title><![CDATA[TypeScript 高级类型及用法]]></title><link>https://blog.csdn.net/Magneto7/article/details/121489097</link><guid>https://blog.csdn.net/Magneto7/article/details/121489097</guid><author>Magneto7</author><pubDate>Tue, 23 Nov 2021 11:17:39 +0800</pubDate><description><![CDATA[本文详细介绍了 TypeScript 高级类型的使用场景，对日常 TypeScript 的使用可以提供一些帮助。

前言

本文已收录在Github:github.com/beichensky/…[1]中，走过路过点个 Star 呗

一、高级类型

交叉类型(&amp;)

交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。


	语法：T &amp; U

	
	其返回类型既要符合T类型也要符合U类型
	

	
		用法：...]]></description><category></category></item><item><title><![CDATA[「万字进阶」深入浅出 Commonjs 和 Es Module]]></title><link>https://blog.csdn.net/Magneto7/article/details/121177113</link><guid>https://blog.csdn.net/Magneto7/article/details/121177113</guid><author>Magneto7</author><pubDate>Sat, 06 Nov 2021 12:16:29 +0800</pubDate><description><![CDATA[一 前言

今天我们来深度分析一下Commonjs和Es Module，希望通过本文的学习，能够让大家彻底明白Commonjs和Es Module原理，能够一次性搞定面试中遇到的大部分有关Commonjs和Es Module的问题。

老规矩我们带上疑问开始今天的分析????????????：


	1 Commonjs 和 Es Module 有什么区别 ？
	
	
	2 Commonjs 如何解决的循环引用问题 ？
	
	
	3 既然有了exports，为何又出了module.exports? ...]]></description><category></category></item><item><title><![CDATA[js 监控iframe URL的变化]]></title><link>https://blog.csdn.net/Magneto7/article/details/120225122</link><guid>https://blog.csdn.net/Magneto7/article/details/120225122</guid><author>Magneto7</author><pubDate>Fri, 10 Sep 2021 16:36:31 +0800</pubDate><description><![CDATA[iframe的url可以前端任何地址，这样就可能出现漏洞，如果钓鱼网站通过js把src改成了危险地址，如果没有监控，就会有很大隐患。所以监控iframe的url变化就是必须要解决的问题了。

第一印象的解决方案是通过setInterval轮询监控，貌似不太理想了，而且有延迟。

千般搜索，终于找到了好的方法，可以通过H5新增的MutationObserver来解决，配合DOMAttrModified和onpropertychange来解决兼容性问题。

废话少说，直接上代码。



index.html代码]]></description><category></category></item><item><title><![CDATA[分享 9 条 Webpack 优化策略]]></title><link>https://blog.csdn.net/Magneto7/article/details/116709669</link><guid>https://blog.csdn.net/Magneto7/article/details/116709669</guid><author>Magneto7</author><pubDate>Wed, 12 May 2021 15:24:27 +0800</pubDate><description><![CDATA[引言

webpack的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。

本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。

本文演示代码，仓库地址:https://github.com/Jack-cool/webpack4

速度分析 ????

webpack 有时候打包很慢，而我们在项目中可能用了很多的plugin和loader，想知道到底是哪个环节慢，下面这个]]></description><category></category></item><item><title><![CDATA[总结18个 webpack 插件，总会有你想要的！]]></title><link>https://blog.csdn.net/Magneto7/article/details/116709027</link><guid>https://blog.csdn.net/Magneto7/article/details/116709027</guid><author>Magneto7</author><pubDate>Wed, 12 May 2021 15:14:02 +0800</pubDate><description><![CDATA[何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。

Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。

Plugin 的特点


	是一个独立的模块
	
	
	模块对外暴露一个 js 函数
	
	
	函数的原型(prototype)上定义了一个注入compiler对象...]]></description><category></category></item><item><title><![CDATA[你必须知道的 webpack 插件原理分析]]></title><link>https://blog.csdn.net/Magneto7/article/details/116708771</link><guid>https://blog.csdn.net/Magneto7/article/details/116708771</guid><author>Magneto7</author><pubDate>Wed, 12 May 2021 15:06:07 +0800</pubDate><description><![CDATA[在 webpack 中，专注于处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。它和loader有以下区别：


	loader是一个转换器，将 A 文件进行编译成 B 文件，比如：将A.less转换为A.css，单纯的文件转换过程。webpack 自身只支持 js 和 json 这两种格式的文件，对于其他文件需要通过loader将其转换为 commonJS 规范的文件后，webpack 才能解析到。
	
	
	plugin是一个扩展器，它丰富了 webpack ...]]></description><category></category></item><item><title><![CDATA[[万字总结] 一文吃透 Webpack 核心原理]]></title><link>https://blog.csdn.net/Magneto7/article/details/116708467</link><guid>https://blog.csdn.net/Magneto7/article/details/116708467</guid><author>Magneto7</author><pubDate>Wed, 12 May 2021 15:00:26 +0800</pubDate><description><![CDATA[背景

Webpack 特别难学！！！

时至 5.0 版本之后，Webpack 功能集变得非常庞大，包括：模块打包、代码分割、按需加载、HMR、Tree-shaking、文件监听、sourcemap、Module Federation、devServer、DLL、多进程等等，为了实现这些功能，webpack 的代码量已经到了惊人的程度：


	498 份JS文件
	
	
	18862 行注释
	
	
	73548 行代码
	
	
	54 个 module 类型
	
	
	69 个 dependency 类]]></description><category></category></item><item><title><![CDATA[一文带你了解如何排查内存泄漏导致的页面卡顿现象]]></title><link>https://blog.csdn.net/Magneto7/article/details/116643524</link><guid>https://blog.csdn.net/Magneto7/article/details/116643524</guid><author>Magneto7</author><pubDate>Tue, 11 May 2021 10:20:09 +0800</pubDate><description><![CDATA[不知道在座的各位有没有被问到过这样一个问题：如果页面卡顿，你觉得可能是什么原因造成的？有什么办法锁定原因并解决吗？

这是一个非常宽泛而又有深度的问题，他涉及到很多的页面性能优化问题，我依稀还记得当初面试被问到这个问题时我是这么回答的：


	先会检查是否是网络请求太多，导致数据返回较慢，可以适当做一些缓存
	
	
	也有可能是某块资源的bundle太大，可以考虑拆分一下
	
	
	然后排查一下js代码，是不是某处有过多循环导致占用主线程时间过长
	
	
	浏览器某帧渲染的东西太多，导致的卡顿
	
	
	在]]></description><category></category></item><item><title><![CDATA[帮你彻底搞懂 JS 中的 prototype、__proto__与constructor（图解）]]></title><link>https://blog.csdn.net/Magneto7/article/details/116643129</link><guid>https://blog.csdn.net/Magneto7/article/details/116643129</guid><author>Magneto7</author><pubDate>Tue, 11 May 2021 10:12:47 +0800</pubDate><description><![CDATA[1. 前言

作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _，读作“dunder proto”，“double underscore proto”的缩写），实际上，该属性在ES标准定义中的名字应该是[[Proto]]></description><category></category></item><item><title><![CDATA[让我告诉你一些强无敌的 NPM 软件包]]></title><link>https://blog.csdn.net/Magneto7/article/details/116642965</link><guid>https://blog.csdn.net/Magneto7/article/details/116642965</guid><author>Magneto7</author><pubDate>Tue, 11 May 2021 10:09:15 +0800</pubDate><description><![CDATA[面对繁忙的日程安排与紧迫的工期限制，选择能够切实提升生产率的工具无疑至关重要。

在这里，我整理出一份个人最喜欢的 NPM 软件包清单。为了便于浏览，我还对它们进行了分类，希望呈现出更加清晰的结构。

当然，大家不必全数安装与学习。在大多数情况下，每个类别选择一款就足以解决生产需求。我只是想多提供一点替代方案，帮助每位读者朋友找到最适合自己的选项。闲言少叙，咱们马上开始！

???? 实用工具

Lodash

lodash[1]是一套现代 JavaScript 实用程序库，提供模块化、性能与多种附加功能。]]></description><category></category></item><item><title><![CDATA[值得收藏！让你全面认识 Nginx]]></title><link>https://blog.csdn.net/Magneto7/article/details/116642758</link><guid>https://blog.csdn.net/Magneto7/article/details/116642758</guid><author>Magneto7</author><pubDate>Tue, 11 May 2021 10:06:02 +0800</pubDate><description><![CDATA[Nginx是开源、高性能、高可靠的Web和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新。性能是Nginx最重要的考量，其占用内存少、并发能力强、能支持高达 5w 个并发连接数，最重要的是，Nginx是免费的并可以商业化，配置使用也比较简单。

Nginx 特点


	高并发、高性能；
	
	
	模块化架构使得它的扩展性非常好；
	
	
	异步非阻塞的事件驱动模型这点和Node.js相...]]></description><category></category></item><item><title><![CDATA[配置React源码本地调试环境]]></title><link>https://blog.csdn.net/Magneto7/article/details/115662955</link><guid>https://blog.csdn.net/Magneto7/article/details/115662955</guid><author>Magneto7</author><pubDate>Tue, 13 Apr 2021 14:08:01 +0800</pubDate><description><![CDATA[1. 第一步，使用 create-react-app 脚手架创建项目




npx create-react-app react-test


2. 然后弹射 create-react-app 脚手架内部配置


npm run eject

3.克隆 react 官方源码 (在项目的根目录下进行克隆)


git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react

4.接着链接本地源码...]]></description><category></category></item><item><title><![CDATA[如何提高CSS性能]]></title><link>https://blog.csdn.net/Magneto7/article/details/115588252</link><guid>https://blog.csdn.net/Magneto7/article/details/115588252</guid><author>Magneto7</author><pubDate>Sun, 11 Apr 2021 09:19:09 +0800</pubDate><description><![CDATA[正文从这开始~~

结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分，所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验，这也需要优化你的CSS。

本篇文章将涵盖CSS会导致哪些性能问题，以及如何制作不妨碍人们使用的CSS的最佳实践。

目录


	CSS是如何工作的？
	
	
	注意CSS的大小
	
	
	优先考虑关键的CSS
	
	
	使用高效的CSS动画
	
	
	使用CSS优化字体加载
	]]></description><category></category></item><item><title><![CDATA[一文彻底搞懂webpack devtool]]></title><link>https://blog.csdn.net/Magneto7/article/details/115339508</link><guid>https://blog.csdn.net/Magneto7/article/details/115339508</guid><author>Magneto7</author><pubDate>Wed, 31 Mar 2021 00:10:03 +0800</pubDate><description><![CDATA[为什么需要Source Map

首先根据谷歌开发者文档的介绍，Source Map一般与下列类型的预处理器搭配使用：

转译器（Babel）
	编译器（TypeScript）
	Minifiers（UglifyJS）
为什么呢？因为通常我们运行在浏览器中的代码是经过处理的，处理后的代码可能与开发时代码相差很远，这就导致开发调试和线上排错变得困难。这时Source Map就登场了，有了它浏览器就可以从转换后的代码直接定位到转换前的代码。在webpack中，可以通过devtool选项来配置Source Map]]></description><category></category></item><item><title><![CDATA[Tmux 使用教程]]></title><link>https://blog.csdn.net/Magneto7/article/details/106924605</link><guid>https://blog.csdn.net/Magneto7/article/details/106924605</guid><author>Magneto7</author><pubDate>Tue, 23 Jun 2020 15:28:03 +0800</pubDate><description><![CDATA[Tmux 是一个终端复用器（terminal multiplexer），非常有用，属于常用的开发工具。

本文介绍如何使用 Tmux。



一、Tmux 是什么？

1.1 会话与进程

命令行的典型使用方式是，打开一个终端窗口（terminal window，以下简称"窗口"），在里面输入命令。用户与计算机的这种临时的交互，称为一次"会话"（session）。

会话的一个重要特点是，窗口与其中启动的进程是连在一起的。打开窗口，会话开始；关闭窗口，会话结束，会话内部的进程也会随之终止，不管有没有运行完.]]></description><category></category></item><item><title><![CDATA[vim插件管理器vim-plug]]></title><link>https://blog.csdn.net/Magneto7/article/details/106864486</link><guid>https://blog.csdn.net/Magneto7/article/details/106864486</guid><author>Magneto7</author><pubDate>Fri, 19 Jun 2020 22:25:33 +0800</pubDate><description><![CDATA[插件vim-plug有如下优点

· 轻量级、单个文件且支持一些直观的安装选项。

· 支持并行插件加载（要求Vim编译带有Python或Ruby支持，这几乎已经是现代Vim的标配）。

· 支持大多数插件的延迟加载，即只为特定命令或文件类型触发必要的插件。



1.安装vim-plug的方式非常简单

· 下载插件文件。

· 保存为$HOME/.vim/autoload/plug.vim。


curl -fLo ~/.vim/autoload/plug.vim --create-dirs htt..]]></description><category></category></item><item><title><![CDATA[vim折叠]]></title><link>https://blog.csdn.net/Magneto7/article/details/106821730</link><guid>https://blog.csdn.net/Magneto7/article/details/106821730</guid><author>Magneto7</author><pubDate>Thu, 18 Jun 2020 00:25:50 +0800</pubDate><description><![CDATA[Vim为浏览大型文件提供的一个强大工具是折叠。折叠功能支持文件部分内容的隐藏，隐藏的依据既可以是预定义的规则，也可以是手动添加的折叠标记。

1．折叠Python代码

首先，需要在.vimrc文件中将foldmethod设置为indent，设置代码如下。


set foldmethod=indent

将光标移动到其中一个折叠行上，输入zo可以打开当前折叠，输入zc都会将此折叠关闭

输入za可切换折叠状态（打开关闭的折叠或关闭打开的折叠）。输入zR和zM分别用于同时打开和关闭所有折叠。

2．折叠的类]]></description><category></category></item><item><title><![CDATA[vim插件安装]]></title><link>https://blog.csdn.net/Magneto7/article/details/106820772</link><guid>https://blog.csdn.net/Magneto7/article/details/106820772</guid><author>Magneto7</author><pubDate>Wed, 17 Jun 2020 23:32:31 +0800</pubDate><description><![CDATA[1.创建一个存储插件的目录，执行下列命令。


mkdir -p ~/.vim/pack/plugings/start

2.使Vim能够自动加载每个插件的文档（Vim默认不会这么做）。在~/.vimrc文件（在Windows系统中为用户目录下的_vimrc文件）中添加下列代码。


packloadall                " 加载所有插件
silent! helptags ALL       " 为所有插件加载帮助文档

然后，每次安装插件都可按照下列步骤进行。

1．在GitHub上找到想]]></description><category></category></item><item><title><![CDATA[linux deno安装与更新]]></title><link>https://blog.csdn.net/Magneto7/article/details/106683175</link><guid>https://blog.csdn.net/Magneto7/article/details/106683175</guid><author>Magneto7</author><pubDate>Thu, 11 Jun 2020 10:55:25 +0800</pubDate><description><![CDATA[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

就好了


环境变量
...]]></description><category></category></item><item><title><![CDATA[命令模式]]></title><link>https://blog.csdn.net/Magneto7/article/details/106581705</link><guid>https://blog.csdn.net/Magneto7/article/details/106581705</guid><author>Magneto7</author><pubDate>Sat, 06 Jun 2020 02:04:40 +0800</pubDate><description><![CDATA[]]></description><category></category></item></channel></rss>