<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[feral_coder的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/feral_coder</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; feral_coder]]></copyright><item><title><![CDATA[flex布局之成员属性flex]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/107920481</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/107920481</guid><author>feral_coder</author><pubDate>Mon, 10 Aug 2020 20:25:29 +0800</pubDate><description><![CDATA[关于flex布局基础，可以参考阮一峰大神的Flex布局教程，本篇文章主要讨论起成员属性flex。

记得使用成员属性flex最多的时候是一个父容器由两个子元素，一个子元素宽度固定，另一个子元素需要占据父元素剩余的空间，这时候我们会设置如下


.container {
    display:flex;
}
.item1 {
    width:100px;
}
.item2 {
    flex:1;
}

其实flex是flex-grow,flex-shrink,flex-basis三个属性的简写

注]]></description><category></category></item><item><title><![CDATA[前端读取wma文件头获取音频时长]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/107878114</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/107878114</guid><author>feral_coder</author><pubDate>Sat, 08 Aug 2020 14:41:12 +0800</pubDate><description><![CDATA[背景：wma是微软推出的一种音频存储格式，由于版权问题，目前浏览器的audio/vedio标签都不支持播放wma文件，由于项目需求需要前端读取本地音频时长等相关信息传到后端，所以只能另辟蹊径。

思路：读取音频文件二进制数据，根据头文件解析相关信息

下图位通过windows media 工具来读取wma文件，进行分析



经过多个文件对比分析，得出如下结果

头对象由多个部分组成
	不同文件头部大小不一样，组成部分个数也不一样
	每个部分的排列顺序可能不一样
	文件属性内容固定，Object ID都一样]]></description><category></category></item><item><title><![CDATA[Unicode字符集与utf-8编码]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/106587527</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/106587527</guid><author>feral_coder</author><pubDate>Sat, 06 Jun 2020 15:53:27 +0800</pubDate><description><![CDATA[我们都知道计算存储数据和传输数据都是以二进制的形式，也就是0和1，这是因为0和1刚好对应电路中的高电位和低电位。

计算机中最小的存储单位为字节（byte），最小传输单位是位（bit），一个字节占8位。

既然计算机存储的是二进制数，那么在显示终端上是怎么展示成人类识别的文字或者符号的呢？

我们知道计算机最开始是在美国使用，他们为了解决这个问题，于是想了一个办法，将每一个符号（文字）与一个数值对应，比如英文字母"a"，对应数字97,以二进制表示为01100001。而8位共有2的8次方256中排列组合，而英]]></description><category></category></item><item><title><![CDATA[JavaScript执行上下文之作用域链，闭包和this（四）]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/106451306</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/106451306</guid><author>feral_coder</author><pubDate>Sun, 31 May 2020 11:55:16 +0800</pubDate><description><![CDATA[许多人发现下面的概念是js中复杂的部分：

作用域链
	闭包
	this
其实，这些概念要比它们看起来更加容易理解，尤其是了解了执行上下文相关的知识。

这三个部分有什么共同点？它们都与变量查找有关-js引擎查找变量的方法。

变量查找

在下面的例子中，变量查找可能是令人迷惑的。





当执行isApple函数时，执行栈中有三个堆叠的执行上下文。

全局执行上下文
	isBanana 函数执行上下文
	isApple函数执行上下文
接下来console开始查找apple变量。

直观来说，我们可以通过]]></description><category></category></item><item><title><![CDATA[JavaScript执行上下文之词法环境和块级作用域（三）]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/106447013</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/106447013</guid><author>feral_coder</author><pubDate>Sun, 31 May 2020 09:20:15 +0800</pubDate><description><![CDATA[自从ES6更新后，js有三种作用域

全局作用域
	函数作用域
	块级作用域
从执行上下文的角度来看作用域是什么？

全局作用域是全局执行上下文，函数作用域与函数执行上下文相关联



块级作用域在ES6中被介绍，它不同于以上两种作用域。

全局作用域的一个例子

最简单的方式理解块级作用域是将它与其他两中作用域比较

变量在全局作用域和函数作用域中工作相似，所以在这篇文章我们仅仅讨论全局作用域和块级作用域。



在这个例子中，我们仅有一个全局执行上下文和一个全局变量环境。

第二个apple覆盖了前一个]]></description><category></category></item><item><title><![CDATA[JavaScript执行上下文之调用栈和多执行上下文（二）]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/106446254</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/106446254</guid><author>feral_coder</author><pubDate>Sat, 30 May 2020 20:58:49 +0800</pubDate><description><![CDATA[在上一篇文章中我们讨论了有关执行上下文，它是编译阶段创建的第一个执行上下文。

我们称这个第一个执行上下文为全局执行上下文（global EC）,这个执行上下文存储的相关变量是全局变量。



全局执行上下文并不是唯一的，当脚本运行时，多个执行上下文可以被创建或移出。

那么这些执行上下文来自哪？

一个执行上下文与编译阶段联系在一起，那么多个执行上下文暗示有多个编译阶段。

这个机制与函数有关



上面的代码中，我们知道在程序运行结束后控制台会打印20，但是在执行上下文里到底发生了什么？

一如既往，从]]></description><category></category></item><item><title><![CDATA[JavaScript执行上下文-从编译到执行（一）]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/106443310</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/106443310</guid><author>feral_coder</author><pubDate>Sat, 30 May 2020 19:38:19 +0800</pubDate><description><![CDATA[对于大多数人来说，js是神秘的，它有许多唯一的特点

你可能听过如下术语：

提升
	作用域和作用域链
	闭包
	this
它们都有一些“怪异”的行为，在js中是唯一的

理解这些概念的关键是执行上下文，我希望这篇文章提供一个不同的角度来理解javascript,如不是从MDN上复制一些准确但模糊的信息。

不要误会，我也会从MDN上阅读一些相关信息，然后，我更相信理解比去记住这些信息更加有用。

两步：编译和执行

当一个js代码片段运行时，我们会讨论它的两个步骤：编译和执行

这个看起来很简单，然后，j]]></description><category></category></item><item><title><![CDATA[Vue元素过渡效果]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/106229328</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/106229328</guid><author>feral_coder</author><pubDate>Wed, 20 May 2020 10:39:50 +0800</pubDate><description><![CDATA[transition定义：过渡，提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

从定义可知，过渡是让css属性变化持续一段时间,首先我们得抓住重点，要想有过渡，必须要有属性值发生变化，比如背景颜色从白色到黑色，某个元素的宽度由200到400 等等（文字内容变化不属于此列）。元素插入页面不会产生过渡，元素的display属性值变化也不会产生过渡效果，那么vue是如何实现元素插入或者显隐实现过渡效果的呢？

vue提供了transition组件]]></description><category></category></item><item><title><![CDATA[webpack导入svg图标]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/105701735</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/105701735</guid><author>feral_coder</author><pubDate>Thu, 23 Apr 2020 11:02:35 +0800</pubDate><description><![CDATA[svg是一种基于XML格式的图像描述语音，它是矢量图，相比较与canvas,放大时不会失真，相对于图像来说，因为它本就是文本形式存在，尺寸会更小。传统使用方式，我们会将svg复制到需要用到的地方，或者到处import，这样代码不仅不美观，而且维护起来很麻烦，特别时图标多了的时候。接下来我们讲讲怎么以组件的方式使用svg图标（以vue为例react同理）。

实现原理：利用svg的use标签，通过i...]]></description><category></category></item><item><title><![CDATA[vscode使用prettier格式化svg文件]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/105579432</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/105579432</guid><author>feral_coder</author><pubDate>Fri, 17 Apr 2020 14:14:30 +0800</pubDate><description><![CDATA[prettier本身没有格式化svg文件的功能，但是因为svg也是一种标签，可以看成是HTML，因此可以如下设置

文件 =&gt; 首选项 =&gt; 设置 =&gt; setting.json


{
    "files.associations": {
        "*.svg": "html"
    }
}


...]]></description><category></category></item><item><title><![CDATA[webpack代码分割之import()]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/101115806</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/101115806</guid><author>feral_coder</author><pubDate>Sun, 22 Sep 2019 12:25:21 +0800</pubDate><description><![CDATA[简介：代码分割是webpack最大的一个特点，通过这个特点可以将你的代码切割进多个bundles里面，从而从而可以进行按需加载或者并行加载，可以实现更小的bundle和控制资源加载的优先级。

在说代码分割之前，我们先来了解几个概念：

1、bundles：bundles是指webpack打包后文件的统称，单一入口打包出来就只有一个文件，图片，字体文件等其他格式的文件也会被打包进这个bundle文...]]></description><category></category></item><item><title><![CDATA[element-ui生成自定义主题]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/100577155</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/100577155</guid><author>feral_coder</author><pubDate>Fri, 06 Sep 2019 12:53:35 +0800</pubDate><description><![CDATA[前言：element采用的是scss预编译语言，这里生成主题的方法是官方提供的命令行工具，通过修改scss文件的变量文件，然后重新编译成css样式文件，项目引入我们编译过的样式文件，因为比较简单，下面直接开始步骤：

1、下载命令行工具（最好最为项目依赖）


npm i element-theme -D

2、下载样式模板


npm i element-theme-chalk -D
//或者
...]]></description><category></category></item><item><title><![CDATA[webpack优化之image 优化]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/100152846</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/100152846</guid><author>feral_coder</author><pubDate>Fri, 30 Aug 2019 11:07:47 +0800</pubDate><description><![CDATA[前言：在一下应用中，可能静态图片就占了应用尺寸的一半，虽然图片的加载不会像js一样阻塞dom的渲染，但是它们的加载却占用了很大的带宽，增加了公司的成本。在webpack中，我们可以使用url-loader，svg-url-loader，image-webpack-loader来进行图片优化。

1、url-loader


// webpack.config.js
module.exports =...]]></description><category></category></item><item><title><![CDATA[webpack优化之使用ES module]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/100152012</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/100152012</guid><author>feral_coder</author><pubDate>Fri, 30 Aug 2019 10:29:43 +0800</pubDate><description><![CDATA[前言：但我们使用ES module时，webpack就可以进行js Tree-shaking，Tree-shaking是指一个bundler遍历整个依赖树，检查哪个依赖被使用了，并且移除没有被使用的依赖。

例如：


// comments.js
export const render = () =&gt; { return 'Rendered!'; };
export const commen...]]></description><category></category></item><item><title><![CDATA[webpack优化之optimization.nodeEnv]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/100151550</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/100151550</guid><author>feral_coder</author><pubDate>Fri, 30 Aug 2019 10:15:12 +0800</pubDate><description><![CDATA[1、前言：我们知道，在几乎所有框架中都有许多开发环境的代码检查和警告类型的代码，而这些代码在生产环境不是必须的。但是打包的时候会将这些代码保留下来，增加了打包的尺寸。

例如vue源码


// vue/dist/vue.runtime.esm.js
// …
if (process.env.NODE_ENV !== 'production') {
  warn('props must be st...]]></description><category></category></item><item><title><![CDATA[windows将自己的程序注册成开机启动项]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/100133504</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/100133504</guid><author>feral_coder</author><pubDate>Thu, 29 Aug 2019 10:58:00 +0800</pubDate><description><![CDATA[方法一、利用开机启动文件夹

将exe文件或exe文件的快捷方式复制到（启动）文件夹下

以win7为例：开始→所有程序→启动→鼠标右键打开

方法二、添加系统服务

将程序添加到系统服务，开启自动开启即可

添加服务命令：sc create 服务名称 binPath= 路径 start= auto

“=”号后面有一个空格

方法三：使用系统任务计划程序

开始→搜索（任务计划程序），...]]></description><category></category></item><item><title><![CDATA[Spring入门学习]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/99052869</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/99052869</guid><author>feral_coder</author><pubDate>Tue, 13 Aug 2019 11:11:04 +0800</pubDate><description><![CDATA[1、spring是什么？

spring是一个轻量的java开源框架，它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 J2EE 应用程序开发提供集成的框架。Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Jav...]]></description><category></category></item><item><title><![CDATA[redux源码分析（二）之combineReducers]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/97233312</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/97233312</guid><author>feral_coder</author><pubDate>Thu, 25 Jul 2019 13:03:46 +0800</pubDate><description><![CDATA[前言：上一篇文章讲完了redux的基础核心部分，我们知道在实际开发中，我们会将reducer进行拆分，这样便于代码的阅读与维护，数据管理更加清晰。而通过上一篇文章，我们知道createStore只能接受一个reducer作为参数，如果我们将reducer进行拆分，那么怎么将多个reducer传入createStore函数呢？接下来，我们就来聊聊combineReducers的作用。

首先我们先来...]]></description><category></category></item><item><title><![CDATA[redux源码分析（一）之createStore]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/96855922</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/96855922</guid><author>feral_coder</author><pubDate>Tue, 23 Jul 2019 16:07:50 +0800</pubDate><description><![CDATA[一、redux是什么？

redux是一个状态管理工具，随着 JavaScript 单页应用开发日趋复杂，我们需要管理应用的state(数据)也越来越多，这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 m...]]></description><category></category></item><item><title><![CDATA[apply与call的实现]]></title><link>https://blog.youkuaiyun.com/feral_coder/article/details/96630388</link><guid>https://blog.youkuaiyun.com/feral_coder/article/details/96630388</guid><author>feral_coder</author><pubDate>Sat, 20 Jul 2019 20:53:38 +0800</pubDate><description><![CDATA[apply与call都是用来改变js函数this指向的，因为比较简单，就不多赘述了！


Function.prototype.apply = function(context) {
    var args
    if (arguments.length &gt; 1) {
        args = arguments[1]
    }
    context.fn = this
    ...]]></description><category></category></item></channel></rss>