发表于 | 分类于

提取公共代码，项目中会引用很多重复的代码，每个页面都把这些公共代码加载进去会导致一些问题，比如说

  • 重复加载资源，导致资源浪费
  • 每个页面打开时间长（用户体验差）

解决的方向：提取公共代码，一次加载完成所有的公共代码，打开第二个页面的时候，无须再次加载而浪费资源。

splitChunks

阅读全文 »

发表于 | 分类于

给公司项目框架引入vuex遇到的坑以及分享的ppt，记录下第一次在小组内分享。

为什么要有状态管理规范？

业务模块功能迭代有这样的特点：

  • 组件单向数据流，在父子组件直接传递
  • 非父子组件会有一些共享的状态，场景比较简单
  • 模块开始分层，跨多层组件状态共享开始变得复杂难懂

上述问题提到的处理方法一般有：

阅读全文 »

发表于 | 分类于
表达式 名称 描述
?=exp 正向前瞻 零宽度，断言出现的位置后面能匹配exp，则匹配成功，匹配不占据匹配长度，非捕获
?!exp 负向前瞻 零宽度，断言出现的位置后面不能匹配exp，则匹配成功，匹配不占据匹配长度，非捕获
?:exp 正向前瞻 非捕获性分组，断言出现位置后面匹配exp，占据查询的匹配长度

零宽度：表示只匹配位置，不匹配字符

栗子一：

1
str.replace( /\B(?=(?:\d{3})+$)/g, ',' );

分析：
\B 或者 \b 匹配到的是一个位置，没有字符，
\B：表示非单词边界
\b：表示单词边界
之后了解?= ?:之间的差别
?=exp 表示零宽度正预测先行断言，简单来说，就是在断言出现的位置后面必须匹配exp，否则匹配失败，当匹配成功，也不会占据查询长度（也就是下一个查询的index与exp匹配成功的长度无关）
?:exp 表示非捕获性分组，若匹配成功，不会存在匹配成功的分组当中，但是会占据查询长度。
所以这一个正则的匹配思路为：
栗子：
‘1234567’.replace(/\B(?=(?:\d{3})+$)/g, ‘;’) // 1,234,567
先匹配第一个非单词边界（1和2之间），然后?=预测后面的内容为\d{3}三个连续的数字，+做循环，不断检测三个连续数字，（234 567），当数字匹配完之后，开始检查是否为字符串结尾，若为结尾，则匹配成功；接着从第二个单词边界开始(2和3之间)，……
最后查询结束符合匹配的就在1和2之间 4和5之间

栗子二：

1
2
3
4
5
6
7
/*将字符串中除了div和p标签之外替换成p*/
var input = '<div class="beautiful">,<p class="provocative">,<span class="sexy">,<h1 class="attractive" id="header">,</h1>,</span>,</p>,</div>';
var output = input.replace(/<(\/?)(?!div|p|\/p|\/div)(?:[a-z0-9]+)(.*?)>/g, '<$1p$2>');
console.log(input);
console.log(output);
//<div class="beautiful">,<p class="provocative">,<span class="sexy">,<h1 class="attractive" id="header">,</h1>,</span>,</p>,</div>
//<div class="beautiful">,<p class="provocative">,<p class="sexy">,<p class="attractive" id="header">,</p>,</p>,</p>,</div>

分析：
以<开始，可匹配/或者不匹配（有？，？表示0或以上），后面不为div或p或/p或/div（有?! 表示负向前瞻），后面为多个数字或者小写字母，但是不捕获，占据位置，最后可有可无的多个任意字符

发表于 | 分类于
  • URL ： uniform resource locator 统一资源定位符，是互联网上用来标识某一处资源的地址，组成部分：协议 ，ip地址（域名部分）， 端口号（有或无） ， 虚拟目录部分， 文件名， 锚部分， 参数部分
  • URI ： uniform resource identifier 统一资源标识符， 每种资源如HTML文档，图像，视频等都是一个URI来定位的，组成部分：命名机制， 主机名， 自身的名称
  • URN： uniform resource name 统一资源命名， 通过名字来标识资源
阅读全文 »

发表于 | 分类于

@keyframes name 动画的名称应用在animation-name
定义规则

1
2
3
4
5
6
7
8
from {}
to {}
or
0% {}
25% {}
50% {}
75% {}
100% {}

animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

阅读全文 »

发表于 | 分类于

HTTP：超文本传输协议，属于应用层协议，用于浏览器与服务器之间的通信，客户端打开tcp连接，发送请求给服务器，服务器接收请求并作出响应。

  • 特点：
  1. 无状态，有会话协议，服务器与浏览器之间的请求响应不会保留任何数据，是一种无连接无状态的协议
  2. 简单的
  3. 可扩展的
  4. 连接： 连接由传输层来控制，TCP连接是一种可靠传输，不会丢失信息（即使丢失了也会返回错误）UDP连接是不可靠传输

HTTP流

step1. 打开一个TCP连接，TCP连接后被用来发送一条或多条请求，以及接受回应的消息；
step2. 客户端发送一个HTTP请求封装在数据帧中
step3. 服务端接收并处理HTTP请求，返回响应
step4. 关闭连接或者为后续请求重用连接

  • 请求报文
    请求行 ： 请求方法 请求url 协议版本 eg.
    请求头部 ： headers
    空行
    请求数据
    阅读全文 »

发表于 | 更新于 | 分类于

可视化的音乐播放器，可戳我观看效果

了解Web-Audio-Api

  • 基础知识

<audio>标签是HTML5的新标签，通过添加src属性实现音乐播放。

AudioContext是音频播放环境，原理与canvas的绘制环境类似，都是需要创建环境上下文，通过上下文的调用相关的创建音频节点，控制音频流播放暂停操作等操作，这一些操作都需要发生在这个环境之中。

1
2
3
4
5
try{
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
}catch(e){
    alert('Web Audio API is not supported in this browser');
}

阅读全文 »

发表于 | 分类于

原始值：number, string, boolean, undefined, null, symbol
对象值：object

ToPrimitive(input, PreferredType)：转换规则：(当不是原始值)

  1. PreferredType是String，则先调用toString()，结果不是原始值的话再调用valueOf()，还不是原始值的话则抛出错误；
  2. PreferredType是Number，则先调用valueOf()再调用toString()。
  3. 当没有给ToPrimitive方法传类型时，通常的表现就像是传递了Number类型，先调用valueOf(),再调用toString()

ToNumber：Number()

ToString：String()

阅读全文 »