feral_coder的博客

关于flex布局基础，可以参考阮一峰大神的Flex布局教程，本篇文章主要讨论起成员属性flex。记得使用成员属性flex最多的时候是一个父容器由两个子元素，一个子元素宽度固定，另一个子元素需要占据父元素剩余的空间，这时候我们会设置如下.container { display:flex;}.item1 { width:100px;}.item2 { flex:1;}其实flex是flex-grow,flex-shrink,flex-basis三个属性的简写注

背景：wma是微软推出的一种音频存储格式，由于版权问题，目前浏览器的audio/vedio标签都不支持播放wma文件，由于项目需求需要前端读取本地音频时长等相关信息传到后端，所以只能另辟蹊径。思路：读取音频文件二进制数据，根据头文件解析相关信息下图位通过windows media 工具来读取wma文件，进行分析经过多个文件对比分析，得出如下结果头对象由多个部分组成 不同文件头部大小不一样，组成部分个数也不一样 每个部分的排列顺序可能不一样 文件属性内容固定，Object ID都一样

许多人发现下面的概念是js中复杂的部分：作用域链 闭包 this其实，这些概念要比它们看起来更加容易理解，尤其是了解了执行上下文相关的知识。这三个部分有什么共同点？它们都与变量查找有关-js引擎查找变量的方法。变量查找在下面的例子中，变量查找可能是令人迷惑的。当执行isApple函数时，执行栈中有三个堆叠的执行上下文。全局执行上下文 isBanana 函数执行上下文 isApple函数执行上下文接下来console开始查找apple变量。直观来说，我们可以通过

自从ES6更新后，js有三种作用域全局作用域 函数作用域 块级作用域从执行上下文的角度来看作用域是什么？全局作用域是全局执行上下文，函数作用域与函数执行上下文相关联块级作用域在ES6中被介绍，它不同于以上两种作用域。全局作用域的一个例子最简单的方式理解块级作用域是将它与其他两中作用域比较变量在全局作用域和函数作用域中工作相似，所以在这篇文章我们仅仅讨论全局作用域和块级作用域。在这个例子中，我们仅有一个全局执行上下文和一个全局变量环境。第二个apple覆盖了前一个

在上一篇文章中我们讨论了有关执行上下文，它是编译阶段创建的第一个执行上下文。我们称这个第一个执行上下文为全局执行上下文（global EC）,这个执行上下文存储的相关变量是全局变量。全局执行上下文并不是唯一的，当脚本运行时，多个执行上下文可以被创建或移出。那么这些执行上下文来自哪？一个执行上下文与编译阶段联系在一起，那么多个执行上下文暗示有多个编译阶段。这个机制与函数有关上面的代码中，我们知道在程序运行结束后控制台会打印20，但是在执行上下文里到底发生了什么？一如既往，从

对于大多数人来说，js是神秘的，它有许多唯一的特点你可能听过如下术语：提升 作用域和作用域链 闭包 this它们都有一些“怪异”的行为，在js中是唯一的理解这些概念的关键是执行上下文，我希望这篇文章提供一个不同的角度来理解javascript,如不是从MDN上复制一些准确但模糊的信息。不要误会，我也会从MDN上阅读一些相关信息，然后，我更相信理解比去记住这些信息更加有用。两步：编译和执行当一个js代码片段运行时，我们会讨论它的两个步骤：编译和执行这个看起来很简单，然后，j

transition定义：过渡，提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。从定义可知，过渡是让css属性变化持续一段时间,首先我们得抓住重点，要想有过渡，必须要有属性值发生变化，比如背景颜色从白色到黑色，某个元素的宽度由200到400 等等（文字内容变化不属于此列）。元素插入页面不会产生过渡，元素的display属性值变化也不会产生过渡效果，那么vue是如何实现元素插入或者显隐实现过渡效果的呢？vue提供了transition组件

svg是一种基于XML格式的图像描述语音，它是矢量图，相比较与canvas,放大时不会失真，相对于图像来说，因为它本就是文本形式存在，尺寸会更小。传统使用方式，我们会将svg复制到需要用到的地方，或者到处import，这样代码不仅不美观，而且维护起来很麻烦，特别时图标多了的时候。接下来我们讲讲怎么以组件的方式使用svg图标（以vue为例react同理）。实现原理：利用svg的use标签，通过i...

prettier本身没有格式化svg文件的功能，但是因为svg也是一种标签，可以看成是HTML，因此可以如下设置文件 => 首选项 => 设置 => setting.json{ "files.associations": { "*.svg": "html" }}...

apply与call都是用来改变js函数this指向的，因为比较简单，就不多赘述了！Function.prototype.apply = function(context) { var args if (arguments.length > 1) { args = arguments[1] } context.fn = this ...

前言：上一篇文章讲完了redux的基础核心部分，我们知道在实际开发中，我们会将reducer进行拆分，这样便于代码的阅读与维护，数据管理更加清晰。而通过上一篇文章，我们知道createStore只能接受一个reducer作为参数，如果我们将reducer进行拆分，那么怎么将多个reducer传入createStore函数呢？接下来，我们就来聊聊combineReducers的作用。首先我们先来...

废话不多说，直接上代码，水平有限，欢迎大家一起讨论！基本思想：使用异步队列存储处理函数，再根据传入的fn来改变Promise的状态，调用相应队列里的处理函数。function Promise(fn) { //初始化 this.status = 'PENDING' this.value = undefined this.successQueues = [] ...

一、redux是什么？redux是一个状态管理工具，随着 JavaScript 单页应用开发日趋复杂，我们需要管理应用的state(数据)也越来越多，这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 m...

前言、今天逛社区，无意间看到一道面试题，觉得很有意思，特此记录一下，题目如下function LazyMan() {} //设计LazyMan函数满足下列需求LazyMan('Tony');// Hi I am TonyLazyMan('Tony').sleep(10).eat('lunch');// Hi I am Tony// 等待了10秒...// I am eating...

前言：react的生命周期描述了react组件从初始化，组件运行，更新和销毁的整个过程，其中react为某些生命周期环节提供了钩子函数，便于开发者进行业务逻辑编写。1、初始化阶段getDefaultProps： 获取初始化props，由组件内部调用，不提供钩子函数，在初始化state之前 initState：初始化state，constructor()中初始化state static ...

方法一、利用开机启动文件夹将exe文件或exe文件的快捷方式复制到（启动）文件夹下以win7为例：开始→所有程序→启动→鼠标右键打开方法二、添加系统服务将程序添加到系统服务，开启自动开启即可添加服务命令：sc create 服务名称 binPath= 路径 start= auto“=”号后面有一个空格方法三：使用系统任务计划程序开始→搜索（任务计划程序），...

1、前言：我们知道，在几乎所有框架中都有许多开发环境的代码检查和警告类型的代码，而这些代码在生产环境不是必须的。但是打包的时候会将这些代码保留下来，增加了打包的尺寸。例如vue源码// vue/dist/vue.runtime.esm.js// …if (process.env.NODE_ENV !== 'production') { warn('props must be st...

前言：但我们使用ES module时，webpack就可以进行js Tree-shaking，Tree-shaking是指一个bundler遍历整个依赖树，检查哪个依赖被使用了，并且移除没有被使用的依赖。例如：// comments.jsexport const render = () => { return 'Rendered!'; };export const commen...

前言：在一下应用中，可能静态图片就占了应用尺寸的一半，虽然图片的加载不会像js一样阻塞dom的渲染，但是它们的加载却占用了很大的带宽，增加了公司的成本。在webpack中，我们可以使用url-loader，svg-url-loader，image-webpack-loader来进行图片优化。1、url-loader// webpack.config.jsmodule.exports =...

前言：element采用的是scss预编译语言，这里生成主题的方法是官方提供的命令行工具，通过修改scss文件的变量文件，然后重新编译成css样式文件，项目引入我们编译过的样式文件，因为比较简单，下面直接开始步骤：1、下载命令行工具（最好最为项目依赖）npm i element-theme -D2、下载样式模板npm i element-theme-chalk -D//或者...

简介：代码分割是webpack最大的一个特点，通过这个特点可以将你的代码切割进多个bundles里面，从而从而可以进行按需加载或者并行加载，可以实现更小的bundle和控制资源加载的优先级。在说代码分割之前，我们先来了解几个概念：1、bundles：bundles是指webpack打包后文件的统称，单一入口打包出来就只有一个文件，图片，字体文件等其他格式的文件也会被打包进这个bundle文...

1、配置js文件中使用jsx语法"files.associations": { ".js": "javascriptreact"}2、配置jsx中html标签自动补全"emmet.includeLanguages": { "javascript": "javascriptreact"}...

前言：首先，jsonp的出现是为了解决跨域请求的。跨域是由于浏览器的同源策源造成的，同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。同源是指协议、域名和端口号相同，如果三者有一不同则出现跨域。1、jsonp跨域机制虽然ajax受到同源策略的限制，但是script标签的src属性不会受到同源策略的限制，可以任意获取服务器上...

概述：Iterator是ES6新加入的概念，Iterator是一种接口。接口是一系列特征的集合，是方法的声明，是一种抽象概念，同时接口也是实现继承的一种方式。为什么说接口是抽象概念呢，对于OOP语言来说，接口只提供方法的声明，不提供方法的实现，具体实现由其实现类来重写。类可以看成是某一类型具有相同特征的数据结构的描述。通俗来说，就是为实现了接口的不同数据接口提供了统一的特性访问机制。对于js来...

1、概念：浏览器的内核分为两个核心部分，渲染引擎与js引擎，拿Chrome来说，它的渲染引擎是webkit渲染引擎，js引擎为v8。渲染引擎用来渲染窗口，可以显示html,xml,xhtml,图片等，也可以通过插件渲染其他的文件。例如PDF,在此不做讨论。2、请求过程在浏览器地址栏输入url地址，按下回车键 浏览器获取url进行域名解析，首先从本地DNS缓存查找，如果本地没有则去DNS服...

class Eventer { constructor() { this._events = {} } on(eName,fn) { if(eName in this._events) { this._events[eName].push(fn) //向已存在的事件中添加回调 }else{ this._events[eName] = [fn] } } e...

js函数执行的时都有执行期上下文，也就是我们所说的this,当函数空执行的时候，在非严格模式下this指向全局gloal或者window对象，在严格模式下指向undefined。一般我们可以通过apply或者call来改变this的指向，除此之外还可以通过bind来绑定this的指向。Function.prototype.myBind = function() { let context ...

资源的媒体类型，当我们打开浏览器输入url请求网页时，在浏览器中显示的内容有 HTML、有 XML、png等图片，那么，浏览器是如何区分它们，决定什么内容用什么形式来显示呢？也就是mine-type 媒体类型通常是通过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是通过 Content-Type 来表示的 例如 Content-Type = text/html...

应用：当我们在监听浏览器窗口变化，滚动，输入框变化等事件的时候，这些事件的触发频率很高，如果回调里处理的逻辑较为复杂，这样会给浏览器造成很大的负担甚至导致浏览器崩溃，这时我们就需要通过防抖或节流来限制事件的触发频率。1、防抖：给定一个时间长度，在这个时间长度内，如果某两次事件的触发间隔大于给定的时间长度，则进行事件逻辑处理，如果两次事件的触发间隔不大于给定时间长度，则会重置此时间，也就是说，如...

1、什么是http协议客户端和服务端之间数据传输的格式规范，简称“超文本传输协议”2、URI、URL和URNURI包含URL和URNURI：统一资源标识符 URL：统一资源定位符 URN：统一资源名称3、http协议由什么组成1）、请求报文包含三部分请求行：包含请求方法、URI、HTTP版本信息 请求头 请求体2）、相应报文包含三部分状态行：包含HTTP版本...

描述：运行 yarn eject报错解决：删除项目目录下的.git文件夹

前言：当我们在css或者img标签中使用本地或者网络图片时，webpack需要通过url-loader或者file-loader来对图片进行处理。url-loader与file-loader的区别：url-loader可以将图片转为base64字符串，能更快的加载图片，一旦图片过大， 就需要使用file-loader的加载本地图片，故url-loader可以设置图片超过多少字节时，使用file...

一、webpack4.x使用babel7.x 版本使用：babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime 等包npm install babel-loader @ba...

概念：CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）重要性 专用性 源码代码次序1、重要性：在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!impor...

一、浏览器缓存存在的意义：一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。二、分类     1、按缓存位置分类Service Worker Memory Cache Disk Cache Push CacheService WorkerService Worker 是运行在浏览器背后的独立线程，一般可以用来...

前言：一般页面访问的“258”原则，在2s内响应，很快，在2-5s内响应，速度还行，5-8s内响应，速度较慢，但还能接受，超过8s，槽糕透了。所以，页面的性能首先决定了用户的体验，只有用户体验好才能给网站带来更多的用户，除此之外，好的前端优化还能降低企业成本，提高公司利益。优化方向加快页面展示 减少服务器带宽流量 降低服务器压力一般优化方案一、将静态资源（例如js,css,htm...

1、概念：在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算，即隐式转换。2、隐式转换规则：字符串连接符+：只要两边有一个为字符串，则+为字符串连接符。1 + 'abc' // '1abc'算术连接符+：两边都是数字,或者null,boolean,undefined时，则+为算术连接...

1、前言：执行环境是js中最重要的一个概念，执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量都保存在这个变量。全局执行环境是最外层的一个执行环境，根据js运行的宿主环境不同而不同，在web浏览器中，全局执行环境是window对象，因此，所有的全局变量和函数都是window的属性。某个执行...

前言：在说拷贝之前，先说说js中的数据存储，我们知道js这广义上数据类型分为两种，原始数据类型和引用数据类型，原始数据类型包括string,boolean,number,null,undefined,symbol,引用类型有Function,Array,Object,Date,RegExp等等其实这些都可以归总为Object类型。对于原始类型数据，赋值即是拷贝，因为原始类型栈里存的就是其值。对...

一、定义：Event接口表示在DOM中发生的任何事情；一些是用户生成的（如用户点击鼠标，按下键盘等，都会生成一个事件），一些是由其它API生成的（如动画结束事件，过渡结束，视频播放被暂停等...）。事件通过由外部源触发，也可由编程方式触发，例如ele.click(),触发一个单击事件，或者通过定义事件，然后使用eleTarget.dispatch(event)分发一个事件。二、DOM元素注册事...