Run_youngman的博客

文章中介绍了几种常见的实现响应式大屏布局的方案，分析了特性并且介绍了使用过程中遇到的一些需要注意的点，帮助大家读后能更好的理解，快去动手实践起来吧~

本文介绍了使用echarts实现甘特图效果的实现思路分析以及部分技术方案

本文的核心思想是针对日常开发过程中的实际场景，以mapbox地图组件为例，结合实际封装过程，由浅入深，提升代码的可读以及可维护性，利民利己。

详细介绍element ui Table组件合并单元格的使用，有细节，推荐有疑问的选手阅读。

说在前面最早期的JavaScript并没有像现在一样承担着众多的“责任”，通常只需要在发展历程CommonJS模块化技术最早应用于服务器端编程，因为早期认为网页程序复杂度有限，但是在服务器端就不一样了，为了与操作系统和其他应用程序互动，如果没有模块化将举步维艰。node.js的模块系统，就是参照CommonJS规范实现的。浏览器对于CommonJS 是不兼容的，node.js提供了四个环境变量：module 代表当前模块，该变量是一个对象exports module变量的属性，外界加载的内

说在前面先来说一下这个插件的作用，引用官网的一句话，该插件使用 [terser](https://github.com/terser/terser) 来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。餐前小菜值得注意的是，vue-cli在开发环境中TerserWebpackPlugin是不会生效的，所以在引入该插件时，即使我们希望只在生产环境中生效，不需要判断当前的环境。应用初尝试vue-cli对于TerserWebpackPlugin是有

说在前面随着项目逐渐开发完善，项目工程越来越大，每次修改完前端代码等待编译的时间很长，严重影响开发效率，所以针对项目打包和启动编译过程进行了研究以及改进，本文会以叙事的口吻来逐步介绍优化的过程和思路，希望能帮助有相同问题或者类似问题的小伙伴一些启发。首先给大家看一看最初项目打包以及启动所需的时间：项目打包：项目启动：改动后项目重新编译：打包过程中会输出一系列的打包日志，每时每刻都在处理哪些内容，在经过一番思考过后我准备从这个点下手，发现到底是哪些操作影响了构建效率。cache-loade

说在前面最近项目同事反馈webpack打包时间过长，修改一次代码就要编译好久，所以我针对我们的项目进行了打包优化尝试，但是因为vue-cli启动的项目不会显示webpack打包时长，不利于对每次打包时间进行对比分析，所以我们借助vue-cli脚手架实现这一功能。对于一个项目的打包效率，我认为一共分为三个指标：npm run build打包时长npm run serve启动时长每次对代码进行修改后的编译时长对于npm run serve以及npm run build统计的方式不太一样，下面我们

说在前面某些时候，我们不得不考虑浏览器的兼容性，如今主流的浏览器，包括Chrome，Edge，Firefox，Opera，Safari都对ES6有了不同程度的支持，但是前端永远绕不过IE的坎，本节我们就针对IE的兼容性做功课。很遗憾的告诉大家，从Vue3开始，已经放弃了对IE11的支持，如果仍然需要支持IE11或者更低的版本，仍然需要使用Vue2，这里为了说明下通过代码转码实现浏览器的兼容，准备了一个基于webpack 5.x的最小化demo。具体的搭建过程可以参考之前的文章。代码结构- src-

说在前面在 npm 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本，到底哪个是符合我们实际开发情况的？有过vue开发经验的小伙伴肯定会用到.vue的单文件组件，到底要如何才能让项目识别特别的.vue结尾的文件？让我们带着问题阅读后面的文章。抛出一个问题细心的小伙伴可能会发现，在引入Vue时，我们使用的是const Vue = require('vue')包括之前接触到的，其实我们更习惯使用import来完成引入，对于vue3.x，写法应该是这样：import {crea

说在前面正常开发一个前端项目，不可能只有JS文件，为了让页面有更好的效果我们还会引入CSS文件，开发VUE项目，我们也会使用以.vue为后缀的文件。更多的，还有字体，图片，音视频，markdown等等。我们要知道，webpack默认只能打包处理JS文件的类型，既然webpack作为如今主流的项目打包方案，他肯定支持各种类型的文件打包，下面我们来看看loader能给我们带来什么惊喜。第三方 loader首先说明一件事，.vue文件最终是会被转化为js文件的，所以在vue文件中引入的css等资源也是需要被

说在前面最近在搭建前端框架，过程中遇到了不少问题，其中一个问题比较棘手，项目技术栈是webpack + vue，因为没有使用vue-cli,打包之后在前端运行报错process is not defined，网上也没有比较成熟的解决方案，特此记录，帮助有缘人。知根溯源了解到这个问题之后，我发现打包后的代码多处使用了process.env.NODE_ENV这个变量，但是却没有地方声明，这是导致该问题的主要原因。代码中访问process.env.NODE_ENV是以全局变量的方式去访问的，所以关键环节是

说在前面为什么需要按需加载和按需打包？打包很好理解，就是执行npm run build得到的dist文件夹，和我们添加压缩包一个道理，如果打包了一些本来不需要的资源，就会使得打包的最终文件变大，最终影响前端项目的加载效率。按需加载，比如我们的系统有5个模块，如果我们不做任何介入，Vue，React等框架默认的加载逻辑是把资源都下载到本地，然后执行后面的交互，如此一来，确实可以通过牺牲首次加载的时长换取后续运行的流畅性（因为不需要再次从网络端获取资源），但是如果本次用户只会用到其中一个模块A，那么其他模

说在前面前端项目使用gzip压缩后，可以大大的增加首屏加载的效率，给大家看一下压缩的效率。可以看到项目文件都减小了70%+，这对于首屏加载效率可以有很大的提升。开门见山大家可能在很多博客中看到了压缩方案，这里直接说一下在执行过程中遇到的两个问题，有遇到相同问题的兄弟可以参考。执行npm run build后压缩失败如图所示，全篇就只有一个.gz文件，出现这种问题要使用逆向思维，为什么会出现这种情况？首先出现了.gz文件，说明配置起到了作用，但是为什么只有一个，还没有名字呢？我们使用过程中

说在前面webpack作为一个知名的前端工程打包工具，为我们提供了很大的便利，打包后的文件晦涩难懂，但是当我们尝试打包调优时，又不得不去了解下打包的细节，了解某一个文件是由哪些内容打包而成，下面给大家介绍一种工具。开门见山webpack-bundle-analyzer文件可以很形象的展示打包的细节。安装：# NPMnpm install --save-dev webpack-bundle-analyzer // # Yarnyarn add -D webpack-bundle-analyze

说在前面目前我们项目，前端在打包并重新发布之后，系统经常会提示加载的页面发生异常，如下图：此时用户需要清除浏览器缓存，然后刷新才能看到正确的页面，目前项目处于测试阶段，等到真正部署并交由用户使用后，这种情况体验是比较差的。原因分析发生这种问题的原因，可能是加载的页面资源找不到了，但是为什么必须要清除缓存才可以解决问题呢？通过本地打包，发现打包之后的目录结构如下：通过上图可以发现，每次打包后生成的文件都是类似数字的命名方式，也就是说，下一次内容更新后，几乎仍然是此类数字命名的方式，两次打包的文

跨域是浏览器行为，不是服务器行为，是浏览器将请求阻止。说在前面前端开发过程中会遇到访问请求跨域的问题，比如调用如下方法访问疫情分布的公共接口，就会出现跨域的问题。export function getDiseaseInfo() { return axios({ url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', method: 'get' })}解决思路开头有说过，跨域是浏览器行为。实际上我们

爬虫的简单介绍首先呢，今天要介绍的爬虫不同于我们日常生活中见到的昆虫，而是在网络世界中从网站中抓取数据的网络爬虫。我们日常百度搜索引擎中可以查询到诸如知乎，微博等网站的信息都要归功于爬虫，二者一个提供内容，一个提供流量，相得益彰。比如说tophub这个网站，他上面集成了知乎，微信，b站，豆瓣等网站的热榜，网站建造的初衷是为了告别各大网站的智能推荐，他只是提供了一个平台，涉及到详情都会跳转到各网站的原始网页，不抓取正文内容。robots.txt各行都有各行的规矩，提到爬虫就不得不说一下robots.t

初识HTTPShttps协议的诞生，是为了解决http传输信息不安全的问题。https不是一个独立于http的协议，而是基于http协议，套了一层TLS协议的外壳，TLS的前身是更为人熟知的SSL协议，与1999年被推出1.0版本并正式替代当时的SSL3.0。我们平时使用的大部分网站都已经升级为https了，大家都知道https更安全（网站前面会出现一把小锁），但是他为什么安全呢，他的安全是绝对安全吗，有没有可能仍然存在信息泄露？HTTPS的实现过程下面，让我们一起走进HTTPS的内心世界。对网站

说在前面经常看谍战片的小伙伴们都知道，诸如《悬崖之上》，《潜伏》等，好多需要传递的消息都不是直接发送出去的，而是通过加密的方式，收件方通过特定的密码本来对内容进行破译和解读，这是因为发送出去的消息可能会被特务或者其他无线电台拦截，如果不进行加密，消息很快就会被破解。网络中也是一样，一些商业机密，甚至是悄悄话都可能会被截获，消息会经过公司防火墙、路由器，也可能会有黑客对数据进行拦截，此时将发送的数据进行加密才可以保护隐私，你拦截到了，但是你破解不了！对称加密对称加密是最快速，最简单的一种加密方式，加密

说在前面近日团队成员反馈前端项目修订部分内容后需要build很久，内存占用很大。我启动项目后查看确实存在这个问题（解决方案在文末）。之前了解过相关的内容，前端的代码想要在生产环境运行，肯定需要进行编译之类的操作，这时就很难调试了，因为只能看到构建后代码中错误的位置，无法定位到源代码对应的位置。这个时候就需要一个Map来映射构建后的代码和源代码之间的关系。SourceMapSourceMap是一个信息文件，里面存储着位置信息，有了他，出错的时候控制台就能直接显示原始代码，而不是转换后的代码。JQuery

说在前面我们平时经常会听到诸如这个软件是64位的，那个操作系统是32位的等此类话语，之前一直处于无感的状态，直到有一次培训，我32位的excel无法安装上64位中文版水晶球插件，这就勾起了我想了解其中缘由的兴趣。那么64位的究竟比32位区别在哪里？我们可以任何时候都义无反顾的选择64位吗？让我们带着疑问一起走近科学。冯诺依曼模型在冯诺依曼模型中，他提出了内存的存储单位是二进制进行运算，计算机内部存储器来保存运算程序，这两个方案大大加快了计算机的速度和运算效率。内存：存储的数据单位是一个二进制位，单

本文很多理论基础以及概念来自于《你不知道的JavaScript》，感谢KYLE SIMPSON先生。首先要说明，闭包是和作用域息息相关的。function foo(){ var a = 2; function bar(){console.log(a)} return bar;}var baz = foo();baz(); //2这段代码，函数bar()被当做一个值类型进行传递，

背景最近重新回归了前端开发，在开发过程中发现在组件封装过程中slot使用频率相当的高，像比较主流的Element UI也是提供了不少的插槽来帮助用户来更灵活的开发，本着学习知识以及和大家一起共同提高的态度，把自己对于slot组件的理解写成文章和大家一起分享。深入浅出小插槽如果对于slot的基本概念已经十分了解了，可以跳过该段落，如果你不是很确定，建议读完本段落。语法比较简单，通过子组件中添加 | 代码块 并且在父组件调用过程中使用默认插槽或者具名插槽来增加或者替换默认插槽内容。详情见官网。我理

最近在看《JavaScript语言精粹》这本书，读到了正则表达式一章，文中提及一个匹配JavaScript字符串的正则表达式对象，当我发现他的正则表达式的时候我就不淡定了，预感到自己要深陷其中了。var my_regexp = /"(?:\\.|[^\\\"])*"/我在研究这个正则表达式的过程中发现了自己的很多知识盲区，下面通过介绍这个正则表达式将知识内容一一列举出来。声明字符串时的反斜杠和引号声明字符串时，如果字符串内容中包含 ‘/’ 或者 引号的时候是需要特别注意的。反斜杠如果你想声明一

《深入浅出vue.js》中变化侦测的源码以及解析背景最近由于公司知识体系变动，需要学习vue来适应新的开发平台，我选择了《深入浅出vue.js》来进行学习，之前有了解过一些vue知识，这次打算深入学习一下，尤其是第一篇变化侦测，学习过程中对javascript也增加了不少理解，我把代码都手打了出来，代码中有很多按照自己理解打上的注释，这里分享给大家。开门见山这里我不给大家解释他是什么，书中...

背景开发过程中，经常由于一些代码的复制粘贴，或者编写时的一些不良习惯，导致代码可读性比较差，这个时候就需要一个代码格式化插件来帮助我们把不规范的代码格式化一下。VSCode中拥有大量的插件库，其中最具代表性的使用库就是Beautify了。设置VUE代码模板在我们开发过程中，难免会新建一些文件，那么可不可以当我们新建文件的时候，就把一些VUE文件中的基本信息给代入其中呢？比如，再比如一些钩子函...

vscode是一个非常优秀的编辑器，其中有很多出色的功能为编程带来巨大的便捷。但是今天我使用的时候发现了一件事，就是我在注释代码的时候，居然用 //来帮我注释HTML代码，下面看一下效果： 但是我看其他同事的电脑，他们都是可以正常生成{/**/}的注释，就像这个样子： 这个我就很纳闷了，本着不撞南墙不回头的决心，我决定对比各个配置，来找出到底是哪里出问题了。 我查找了首选项里面的所有...

现在列表也有了，点击文章列表的缩略图之后，就要直接展示博客内容了。大家知道一篇博客如果过长的话，会有一个导航栏，帮住用户快速的定位到某个位置，这里也要加入这个功能。之前说过了，这里引入了react-markdown，还有这个代码高亮的插件prismjf，在Components中新建一个文件夹，用来保存markdown中可能存在的各种布局块，比如代码块，列表，字体等。可以通过自定义样式的方式添加...

现在本地已经生成了博客文件，先不说部署，首先要把整个项目的环境搭建起来。不要嫌弃篇幅过长，因为我真的很想把每一步操作都写出来。我们运行初始的页面，确保初始框架可用，避免后续发生问题找不到根源。运行命令：yarn start，记得吗，这个也是package.json下scritps中的。默认端口是3000，如果能看到页面就说明我们的项目能用了。话说，ES2018都出来了，我们怎么...

在src目录下新建Containers文件夹和Components文件夹，分别用来放置容器组件以及子组件。考虑到学习成本以及项目本身就是个小体量的，所以这里的数据使用mobx管理，有兴趣的可以参考一下，MobX入门介绍,不想学习看看也能知道这是什么意思，这不是重点。简单介绍一下，一个好的应用程序是不允许出现不一致的数据状态的，mobx解决了这个根源问题，使用它就不可能发生状态不一致的情况。...

我参考的文章是官方的入门文章，声称只要10分钟就可以看完，我不会告诉你我看了多半天，英语真是硬伤。大致介绍一些mobx,是一套简单的，可扩展的，经过历史车轮碾压过的状态管理解决方案。 他是可以独立使用的库，但是很多人都是配合react来使用的，说白了就是替代redux的一套解决方案，前提是，部分场景下，redux在全家桶中的地位还是不可撼动的。核心观点：官方介绍说，状态管理是每个应用的...

打包是门学问，用户浏览你的网站，你应该总是想用户查看不同的页面的同时去加载相应的资源，而不是用户访问你的网站你就一股脑的把服务端资源全部传送给用户，比如我要看第一篇博客，你凭什么把所有的博客全部发给用户，浪费流量倒是小事，但是网站资源过多，这就是性能的瓶颈。在config下新建blog.js文件，分别把每篇博客作为打包的入口。可以打印一下blog返回的内容。通过这个不难看出，他找到了博...

平时使用**Eslint**来规范我们的代码，确实可以带来一些代码的规范性和可读性，避免了代码后期发生不可预估的错误。但是有的时候会被小虐一下，因为有的时候他报的错误确实不太好去理解。博主今天开发的时候，由于要用到一些JQuery的方法，所以全局的方式引入了JQuery,加入Eslint之前使用的时候是不会报错的，但是这次引入校验规则之后却告诉我$ is not defined，查阅了资料...

开发node文件相关的操作完整代码看这里。首先在根目录新建一个存放node脚本的文件夹，然后新建一个createNew.js,来实现指定位置生成markdown文件。这个文件中需要引用额外的包有inquirer来实现一些命令行输入操作，以及moment来处理一些时间的操作。yarn add moment,yarn add inquirer来完成操作。下面做一些关键代码的粘贴：...

了解博客搭建流程现在的博客搭建一般都是使用Github作为载体，无论我们经过什么配置，做的事情只有一个，那就是把编译好的系统部署到github上去，比如Hexo，只不过一些复杂的操作他都帮你省了，你只需要上传自己的博客内容就万事大吉了。github作为一个承载容器，你自己新建一个io后缀的项目之后(一个账号只可以有一个此项目)，每次把编译过的代码push到github上去之后，github...

最近周末有时间，想把加入前端一来一年时间对于react以及redux的理解记录下来，没有什么比一个产品更有说服力，在这里搭建一个简单的框架，供刚加入前端准备学习react的小白作为入门学习。 项目代码，稍后会有升级。 首先使用create-react-app要初始化一个脚手架，教程看这里。然后安装一个依赖包yarn add babel-plugin-transform-decorators...

create-react-app这个脚手架很好，快速搭建一个react项目十分便利，但是这个里面也有很多坑，包括antd的引入，babel的配置，以及webpack的配置导出等。在这里我把我踩过的坑给大家分享一下，由于我写的代码也不够深入，所以可能不够全面，但是对于帮助一个初学者更快的了解项目肯定是十分有用的，我自己本身很笨，所以我写的比较啰嗦，方便自己遇到问题之后过来再温习一下，之前写过几篇文章...

问题背景今天帮忙解决问题的时候遇到了一个很奇怪的问题，点击一个按钮跳转的另一个页面，他的mounted方法执行了三遍，想到这个问题我确实是很困惑的，查阅网络资料说是v-if和v-show的问题，线下我自己验证了一下，确实没有找到使用v-if会导致mounted多次的情况。解决思路首先遇到这个问题我就在思考，是不是某些原因引发了组件生命周期的消亡，于是我在mounted函数周围添加了destr...

为什么要使用scopedvue中为了让样式私有化，不至于当前组件的css样式对全局造成污染，添加了scoped属性，但同时也要慎重的使用，因为一旦出现问题，排查起来可能会很麻烦。scoped工作原理我们平时开发vue的时候可能会比较好奇，经常会看到data-v-asf23235kd33k在dom元素中出现，其实这就是scoped做的事情，比如我们一个button组件，我们定义了如下scope...