- 博客(88)
- 收藏
- 关注
RSS订阅原创 flex布局之成员属性flex
关于flex布局基础，可以参考阮一峰大神的Flex布局教程，本篇文章主要讨论起成员属性flex。记得使用成员属性flex最多的时候是一个父容器由两个子元素，一个子元素宽度固定，另一个子元素需要占据父元素剩余的空间，这时候我们会设置如下.container { display:flex;}.item1 { width:100px;}.item2 { flex:1;}其实flex是flex-grow,flex-shrink,flex-basis三个属性的简写注
2020-08-10 20:25:29
446
原创 前端读取wma文件头获取音频时长
背景：wma是微软推出的一种音频存储格式，由于版权问题，目前浏览器的audio/vedio标签都不支持播放wma文件，由于项目需求需要前端读取本地音频时长等相关信息传到后端，所以只能另辟蹊径。思路：读取音频文件二进制数据，根据头文件解析相关信息下图位通过windows media 工具来读取wma文件，进行分析经过多个文件对比分析，得出如下结果头对象由多个部分组成 不同文件头部大小不一样，组成部分个数也不一样 每个部分的排列顺序可能不一样 文件属性内容固定，Object ID都一样
2020-08-08 14:41:12
1064
1
原创 Unicode字符集与utf-8编码
我们都知道计算存储数据和传输数据都是以二进制的形式，也就是0和1，这是因为0和1刚好对应电路中的高电位和低电位。计算机中最小的存储单位为字节（byte），最小传输单位是位（bit），一个字节占8位。既然计算机存储的是二进制数，那么在显示终端上是怎么展示成人类识别的文字或者符号的呢？我们知道计算机最开始是在美国使用，他们为了解决这个问题，于是想了一个办法，将每一个符号（文字）与一个数值对应，比如英文字母"a"，对应数字97,以二进制表示为01100001。而8位共有2的8次方256中排列组合，而英
2020-06-06 15:53:27
960
翻译 JavaScript执行上下文之作用域链，闭包和this（四）
许多人发现下面的概念是js中复杂的部分：作用域链 闭包 this其实，这些概念要比它们看起来更加容易理解，尤其是了解了执行上下文相关的知识。这三个部分有什么共同点？它们都与变量查找有关-js引擎查找变量的方法。变量查找在下面的例子中，变量查找可能是令人迷惑的。当执行isApple函数时，执行栈中有三个堆叠的执行上下文。全局执行上下文 isBanana 函数执行上下文 isApple函数执行上下文接下来console开始查找apple变量。直观来说，我们可以通过
2020-05-31 11:55:16
471
翻译 JavaScript执行上下文之词法环境和块级作用域（三）
自从ES6更新后，js有三种作用域全局作用域 函数作用域 块级作用域从执行上下文的角度来看作用域是什么？全局作用域是全局执行上下文，函数作用域与函数执行上下文相关联块级作用域在ES6中被介绍，它不同于以上两种作用域。全局作用域的一个例子最简单的方式理解块级作用域是将它与其他两中作用域比较变量在全局作用域和函数作用域中工作相似，所以在这篇文章我们仅仅讨论全局作用域和块级作用域。在这个例子中，我们仅有一个全局执行上下文和一个全局变量环境。第二个apple覆盖了前一个
2020-05-31 09:20:15
972
3
翻译 JavaScript执行上下文之调用栈和多执行上下文（二）
在上一篇文章中我们讨论了有关执行上下文，它是编译阶段创建的第一个执行上下文。我们称这个第一个执行上下文为全局执行上下文（global EC）,这个执行上下文存储的相关变量是全局变量。全局执行上下文并不是唯一的，当脚本运行时，多个执行上下文可以被创建或移出。那么这些执行上下文来自哪？一个执行上下文与编译阶段联系在一起，那么多个执行上下文暗示有多个编译阶段。这个机制与函数有关上面的代码中，我们知道在程序运行结束后控制台会打印20，但是在执行上下文里到底发生了什么？一如既往，从
2020-05-30 20:58:49
260
翻译 JavaScript执行上下文-从编译到执行（一）
对于大多数人来说，js是神秘的，它有许多唯一的特点你可能听过如下术语：提升 作用域和作用域链 闭包 this它们都有一些“怪异”的行为，在js中是唯一的理解这些概念的关键是执行上下文，我希望这篇文章提供一个不同的角度来理解javascript,如不是从MDN上复制一些准确但模糊的信息。不要误会，我也会从MDN上阅读一些相关信息，然后，我更相信理解比去记住这些信息更加有用。两步：编译和执行当一个js代码片段运行时，我们会讨论它的两个步骤：编译和执行这个看起来很简单，然后，j
2020-05-30 19:38:19
611
2
原创 Vue元素过渡效果
transition定义：过渡，提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。从定义可知，过渡是让css属性变化持续一段时间,首先我们得抓住重点，要想有过渡，必须要有属性值发生变化，比如背景颜色从白色到黑色，某个元素的宽度由200到400 等等（文字内容变化不属于此列）。元素插入页面不会产生过渡，元素的display属性值变化也不会产生过渡效果，那么vue是如何实现元素插入或者显隐实现过渡效果的呢？vue提供了transition组件
2020-05-20 10:39:50
957
原创 webpack导入svg图标
svg是一种基于XML格式的图像描述语音，它是矢量图，相比较与canvas,放大时不会失真，相对于图像来说，因为它本就是文本形式存在，尺寸会更小。传统使用方式，我们会将svg复制到需要用到的地方，或者到处import，这样代码不仅不美观，而且维护起来很麻烦，特别时图标多了的时候。接下来我们讲讲怎么以组件的方式使用svg图标（以vue为例react同理）。实现原理：利用svg的use标签，通过i...
2020-04-23 11:02:35
2497
原创 vscode使用prettier格式化svg文件
prettier本身没有格式化svg文件的功能，但是因为svg也是一种标签，可以看成是HTML，因此可以如下设置文件 => 首选项 => 设置 => setting.json{ "files.associations": { "*.svg": "html" }}...
2020-04-17 14:14:30
3125
原创 webpack代码分割之import()
简介：代码分割是webpack最大的一个特点，通过这个特点可以将你的代码切割进多个bundles里面，从而从而可以进行按需加载或者并行加载，可以实现更小的bundle和控制资源加载的优先级。在说代码分割之前，我们先来了解几个概念：1、bundles：bundles是指webpack打包后文件的统称，单一入口打包出来就只有一个文件，图片，字体文件等其他格式的文件也会被打包进这个bundle文...
2019-09-22 12:25:21
2784
原创 element-ui生成自定义主题
前言：element采用的是scss预编译语言，这里生成主题的方法是官方提供的命令行工具，通过修改scss文件的变量文件，然后重新编译成css样式文件，项目引入我们编译过的样式文件，因为比较简单，下面直接开始步骤：1、下载命令行工具（最好最为项目依赖）npm i element-theme -D2、下载样式模板npm i element-theme-chalk -D//或者...
2019-09-06 12:53:35
2285
原创 webpack优化之image 优化
前言：在一下应用中，可能静态图片就占了应用尺寸的一半，虽然图片的加载不会像js一样阻塞dom的渲染，但是它们的加载却占用了很大的带宽，增加了公司的成本。在webpack中，我们可以使用url-loader，svg-url-loader，image-webpack-loader来进行图片优化。1、url-loader// webpack.config.jsmodule.exports =...
2019-08-30 11:07:47
377
原创 webpack优化之使用ES module
前言：但我们使用ES module时，webpack就可以进行js Tree-shaking，Tree-shaking是指一个bundler遍历整个依赖树，检查哪个依赖被使用了，并且移除没有被使用的依赖。例如：// comments.jsexport const render = () => { return 'Rendered!'; };export const commen...
2019-08-30 10:29:43
1180
原创 webpack优化之optimization.nodeEnv
1、前言：我们知道，在几乎所有框架中都有许多开发环境的代码检查和警告类型的代码，而这些代码在生产环境不是必须的。但是打包的时候会将这些代码保留下来，增加了打包的尺寸。例如vue源码// vue/dist/vue.runtime.esm.js// …if (process.env.NODE_ENV !== 'production') { warn('props must be st...
2019-08-30 10:15:12
620
原创 windows将自己的程序注册成开机启动项
方法一、利用开机启动文件夹将exe文件或exe文件的快捷方式复制到（启动）文件夹下以win7为例：开始→所有程序→启动→鼠标右键打开方法二、添加系统服务将程序添加到系统服务，开启自动开启即可添加服务命令：sc create 服务名称 binPath= 路径 start= auto“=”号后面有一个空格方法三：使用系统任务计划程序开始→搜索（任务计划程序），...
2019-08-29 10:58:00
1065
原创 Spring入门学习
1、spring是什么？spring是一个轻量的java开源框架，它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 J2EE 应用程序开发提供集成的框架。Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Jav...
2019-08-13 11:11:04
166
原创 redux源码分析（二）之combineReducers
前言：上一篇文章讲完了redux的基础核心部分，我们知道在实际开发中，我们会将reducer进行拆分，这样便于代码的阅读与维护，数据管理更加清晰。而通过上一篇文章，我们知道createStore只能接受一个reducer作为参数，如果我们将reducer进行拆分，那么怎么将多个reducer传入createStore函数呢？接下来，我们就来聊聊combineReducers的作用。首先我们先来...
2019-07-25 13:03:46
700
原创 redux源码分析（一）之createStore
一、redux是什么？redux是一个状态管理工具，随着 JavaScript 单页应用开发日趋复杂，我们需要管理应用的state(数据)也越来越多，这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 m...
2019-07-23 16:07:50
509
原创 apply与call的实现
apply与call都是用来改变js函数this指向的，因为比较简单，就不多赘述了！Function.prototype.apply = function(context) { var args if (arguments.length > 1) { args = arguments[1] } context.fn = this ...
2019-07-20 20:53:38
127
原创 手动实现一个Promise
废话不多说，直接上代码，水平有限，欢迎大家一起讨论！基本思想：使用异步队列存储处理函数，再根据传入的fn来改变Promise的状态，调用相应队列里的处理函数。function Promise(fn) { //初始化 this.status = 'PENDING' this.value = undefined this.successQueues = [] ...
2019-07-20 20:34:44
189
原创 关于js异步队列，搞懂这一篇就够了！
前言、今天逛社区，无意间看到一道面试题，觉得很有意思，特此记录一下，题目如下function LazyMan() {} //设计LazyMan函数满足下列需求LazyMan('Tony');// Hi I am TonyLazyMan('Tony').sleep(10).eat('lunch');// Hi I am Tony// 等待了10秒...// I am eating...
2019-07-16 14:38:19
428
原创 聊聊React的生命周期
前言：react的生命周期描述了react组件从初始化，组件运行，更新和销毁的整个过程，其中react为某些生命周期环节提供了钩子函数，便于开发者进行业务逻辑编写。1、初始化阶段getDefaultProps： 获取初始化props，由组件内部调用，不提供钩子函数，在初始化state之前 initState：初始化state，constructor()中初始化state static ...
2019-07-10 11:17:44
104
原创 Web Event接口
一、定义：Event接口表示在DOM中发生的任何事情；一些是用户生成的（如用户点击鼠标，按下键盘等，都会生成一个事件），一些是由其它API生成的（如动画结束事件，过渡结束，视频播放被暂停等...）。事件通过由外部源触发，也可由编程方式触发，例如ele.click(),触发一个单击事件，或者通过定义事件，然后使用eleTarget.dispatch(event)分发一个事件。二、DOM元素注册事...
2019-07-02 14:48:46
562
原创 JSONP
前言：首先，jsonp的出现是为了解决跨域请求的。跨域是由于浏览器的同源策源造成的，同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。同源是指协议、域名和端口号相同，如果三者有一不同则出现跨域。1、jsonp跨域机制虽然ajax受到同源策略的限制，但是script标签的src属性不会受到同源策略的限制，可以任意获取服务器上...
2019-06-28 15:06:24
103
原创 Iterator迭代器
概述：Iterator是ES6新加入的概念，Iterator是一种接口。接口是一系列特征的集合，是方法的声明，是一种抽象概念，同时接口也是实现继承的一种方式。为什么说接口是抽象概念呢，对于OOP语言来说，接口只提供方法的声明，不提供方法的实现，具体实现由其实现类来重写。类可以看成是某一类型具有相同特征的数据结构的描述。通俗来说，就是为实现了接口的不同数据接口提供了统一的特性访问机制。对于js来...
2019-06-27 15:16:25
98
原创 js的深拷贝与浅拷贝
前言：在说拷贝之前，先说说js中的数据存储，我们知道js这广义上数据类型分为两种，原始数据类型和引用数据类型，原始数据类型包括string,boolean,number,null,undefined,symbol,引用类型有Function,Array,Object,Date,RegExp等等其实这些都可以归总为Object类型。对于原始类型数据，赋值即是拷贝，因为原始类型栈里存的就是其值。对...
2019-06-27 09:57:06
130
原创 Symbol
前言：Symbol是ES新加入的一种数据类型，属于原始数据类型。symbol表示独一无二的值。1、创建symbol//通过Symbol函数来创建一个symbol对象let s = Symbol()//可以传入一个字符串参数来描述当前symbol对象let s2 = Symbol('hello')typeof s // symbol2、symbol不能与任何类型进行运算，...
2019-06-26 15:42:08
316
原创 初探web worker
前言：js是单线程这个特性不多赘序，单线程意味着一次只能做一件事，对于现代计算机来说，存在着多个CPU，如果只使用单线程，对CPU的利用率将大大降低。而web worker的出现正式为了解决这个问题，web worker允许在后台创建线程，可以将一些比较耗时的任务交给worker线程来做，在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。一、使用注意项：web worker受...
2019-06-26 09:41:27
165
原创 前端路由理解
前言：啰嗦几句，我觉得学一个东西应该至少从三个方面出发，而不是只简单学习它的用法，首先这个东西是什么？用来干什么？如何实现的？一、什么是前端路由？后端路由：用来描述url与处理函数或者说是封装了某一业务逻辑代码之间的映射关系。拿javaweb来说，我们通过某一url向java后台发送请求，这个请求要做的业务将有controller来进行业务处理，其中路由就是用来描述请求路径与这个contr...
2019-06-21 17:15:06
584
1
翻译 css中link与@import导入样式文件的区别
1、link是html的标签，@import是css中的语法2、页面打开时，link引用的css文件被加载。而@import引用的CSS等页面加载完后最后加载。3、@import是css2.1后提出的，而link是不存在兼容问题。4、js操作DOM，可以使用link改变样式，无法使用@import的方式使用样式。1）、css中避免过多使用@import 如果了解了@i...
2019-06-18 14:17:35
235
原创 关于css中的BFC
1、概念：Block Formatting Context（格式化上下文），表示一个独立的渲染区域或者隔离的容器。2、形成BFC的条件浮动元素，float 除 none 以外的值； 定位元素，position（absolute，fixed）； display 为以下其中之一的值 inline-block，table-cell，table-caption； overflow 除了 vi...
2019-05-31 16:08:24
112
原创 css3过渡与动画
1、transition：过渡，在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。transition-property：要过渡的属性，默认值all,可也是width,color等属性 transition-duration：定义要过渡的时间，例如（2s） transition-transition-timing-functio...
2019-05-21 14:26:15
434
原创 cmd启动浏览器
1、启动chrome浏览器指定网址start"C:\ProgramFiles\Google\Chrome\Application\chrome.exe"http://www.weibo.com/或者start chrome.exe https://www.baidu.com2、 默认浏览器打开网站startiexplore.exewww.baidu.com...
2019-05-20 10:58:04
14690
1
原创 babel学习记录
一、前言：最开始接触babel是开始学习vue的时候，因为使用vue开发单页应用时使用了许多ES6/ES7的语法，当时只知道babel是用来将ES6/ES7语法转换为浏览器能识别的ES5，而且还错误地认为babel仅仅是webpack的一个插件，是为webpack而生的，后来随着慢慢学习，才发现babel是一个强大的工具链，它可以进行语法转换，polyfill(打补丁)，源码转换，jsx语法转换等...
2019-05-18 21:13:45
280
原创 聊聊前端像素相关问题
前言：关于浏览器的物理像素，设备独立像素，物理像素比一直很模糊，在学习前端期间也查找了不少资料，但是每次看完后时间稍长一点就忘记了，所以到现在对这个东西一直是一知半解的，特此写一遍笔记来总结相关概念。1、物理尺寸显示器的实际尺寸，与现实中的尺寸一样2、物理像素一个物理像素是显示器屏幕上最小的物理显示单元；显示器物理尺寸跟显示器物理物理像素没有关系，同样物理尺寸的显示器，retina屏...
2019-05-13 13:58:54
617
原创 二叉树算法实现数组排序
1、概念：二叉树是每个节点最多有两个子树的有序树。通常子树被称作“左子树”(left subtree)和“右子树”(right subtree)。二叉树常被用于实现二叉查找树和二叉堆。2、原理（灵魂画手），如下数组，遍历生成二叉树，则可以得到升序3、代码实现class Node { //树节点 constructor(value) { this.value = va...
2019-05-10 18:42:22
1343
原创 vue高级特性$attrs
前言：说到$attrs，我们先谈谈inheritAttrs,inheritAttrs是vue2.4.0新增的一个属性，官网文档说明：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置inheritAttrs到...
2019-05-10 14:00:31
432
原创 谈谈页面性能的那些事
前言：一般页面访问的“258”原则，在2s内响应，很快，在2-5s内响应，速度还行，5-8s内响应，速度较慢，但还能接受，超过8s，槽糕透了。所以，页面的性能首先决定了用户的体验，只有用户体验好才能给网站带来更多的用户，除此之外，好的前端优化还能降低企业成本，提高公司利益。优化方向加快页面展示 减少服务器带宽流量 降低服务器压力一般优化方案一、将静态资源（例如js,css,htm...
2019-05-09 17:05:22
172
原创 聊聊js执行环境与作用域
1、前言：执行环境是js中最重要的一个概念，执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量都保存在这个变量。全局执行环境是最外层的一个执行环境，根据js运行的宿主环境不同而不同，在web浏览器中，全局执行环境是window对象，因此，所有的全局变量和函数都是window的属性。某个执行...
2019-05-07 15:31:59
433
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人