支持分享的在线代码编辑器推荐
author: @TiffanysBear

博客中往往加一些在线代码编辑器进行代码DEMO的展示，往往有很好的效果。
下面就推荐几款支持分享的在线代码编辑器。

JSFiddle

https://jsfiddle.net/

国内访问慢或资源加载不了，建议使用代理。

高级特性：

• 支持从预置模板生成代码集，快速开始
• 支持实时合作
• 支持页面嵌入，可设置黑白主题色或自定义颜色
• 每次保存都会产生历史版本
• CSS支持SCSS，样式重置可选择使用Normalize.css
• JS支持CoffeeScript，Babel JSX，Type Script，Vue，React，Preact
• JS内置可选的常用框架与扩展，可定义加载时机，设置<script>标签属性attribute
• 外链支持从CDNJS搜索名称来加入对应资源
• 支持模拟异步请求
• 可设置界面布局、代码提示（beta）、自动运行、自动保存、高亮匹配标签、快捷键映射方案（Sublime、vim、Emacs）

Git常见用法和问题
author: @TiffanysBear

现在git已经成为各个大厂代码管理的基本工具了，相信对于常用的一些git操作指令已经很熟悉了，先讲一些常见的使用吧。
首先是了解下git的概念，工作区、暂存区、远程仓库。

常见用法

1、将计划改动加入到缓存区
增加某个文件：git add <filename>
增加全部文件：git add .

2、提交commit
git commit -m 'comment message'

3、推送改动
git push origin master

4、分支相关操作
切分支：git checkout -b <branch-name>
切回master分支：git checkout master

5、合并更新
本地同步： git pull
合并：git merge <branch>
查看改动文件: git diff <source_branch> <target_branch>

6、标签
创建标签：git tag 1.0.0 <commit_id> , 其中commit_id是通过 git log 获取的。

问题及解决

1、从工作区撤销
当看到自己的改动并不是自己想要修改时，且从未加入过暂存区，使用 git checkout -- <filename>, 撤销自己的改动。

2、从暂存区撤销
如果自己已经操作过 git add <filename>，需要从暂存区撤销，使用 git reset HEAD <file>... 对文件进行撤销回工作区

3、出现冲突conflict
当执行 git merge 操作时，可能会出现冲突，通过去代码中将冲突部分修改之后，再进行提交即可。

两年工作有感
author: @TiffanysBear

换工作感受：

• 持续学习，终身学习
• 人要多学习思考，深度思考，学会接纳
• 做事做到极致，保持高标准
• 做完了不等于做好了
• 自驱，延迟满足感
• 需要了解一些后端

技术栈感受：

• 思考的方面不同，角度不同
• 引入状态管理之后带来的思维变化
• 搭建项目工作流

实现一个hoverDelay延迟hover
author: @TiffanysBear

需求背景

经常在页面开发中，需要使用hover事件来触发相应的网络请求或页面DOM元素显示切换，需要考虑的问题就有了：

• hover动作非常快，如果一hover就请求，会造成多余请求的浪费，造成后端接口不必要的压力
• 如何判断这个用户hover是想做一定的操作，而不是鼠标误触
• 构造这个hover延迟的时候，怎样封装才能通用使用

先来看一下效果演示：

问题思考

基于上述的问题，思考是如下：

• 当用户hover停留在某一DOM元素上一定时长时，比如500ms，才认为这个用户是实际想要做某种操作，这时候在实际的进行相应的网络请求或页面DOM元素显示切换
• 如果在500ms之前就移开，就算是用户误触误滑，不做任何处理
• 构造hover通用封装时，采用jQuery的插件开发的方式，形成通用的解决方案

如何知道iframe文件下载download完成
author: @TiffanysBear

问题

当使用iframe作为文件下载的载体时，如何知道文件已经下载完毕。现有的iframe的onLoad方法具有兼容性问题，在chrome、IE下无法监听onLoad事件监听文件下载完毕，因为onLoad事件本身也是对iframe中的html结构的加载进度监听。

1
2
3
4
5
6
7
8
9

var url = 'http://www.example.com/file.zip';
var iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.display = 'none';
iframe.onload = function() {
    console.debug('start downloading...');
    document.body.removeAttribute(iframe);
}
document.body.appendChild(iframe);

当chrome、IE下时，如果HTTP文件头中包含Content-disposition: attachment；即下载文件的链接的话，不会触发这个事件onLoad事件。

这里说一下Content-disposition：

Content-disposition 是 MIME 协议的扩展，MIME 协议指示 MIME 用户代理如何显示附加的文件。Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名，文件直接在浏览器上显示或者在访问时弹出文件下载对话框。
Content-Disposition为属性名disposition-type是以什么方式下载，如attachment为以附件方式下载disposition-parm为默认保存时的文件名服务端向客户端游览器发送文件时，如果是浏览器支持的文件类型，一般会默认使用浏览器打开，比如txt、jpg等，会直接在浏览器中显示

注意事项：
1.当代码里面使用Content-Disposition来确保浏览器弹出下载对话框的时候。 response.addHeader(‘Content-Disposition’, ‘attachment’);一定要确保没有做过关于禁止浏览器缓存的操作。
代码如下:
response.setHeader(‘Pragma’, ‘No-cache’);
response.setHeader(‘Cache-Control’, ‘No-cache’);
response.setDateHeader(‘Expires’, 0);
不然会发现下载功能在opera和firefox里面好好的没问题，在IE下面就是不行

【转】触发浏览器回流的属性方法一览表
转载自 奇舞周刊 何文力
@TiffanysBear

下列的所有属性、方法，在读取或执行的同时，将会导致浏览器同步地计算样式和布局。这种行为又叫做回流，也是常见的性能瓶颈。

元素类

元素测量

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight elem.getClientRects(), elem.getBoundingClientRect()

滚动相关

elem.scrollBy(), elem.scrollTo()
elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
elem.scrollWidth, elem.scrollHeight
elem.scrollLeft, elem.scrollTop 除了读取，设置也会触发

聚焦

elem.focus() 会触发两次强制布局

其他

elem.computedRole, elem.computedName
elem.innerText
getComputedStyle

window.getComputedStyle() 调用通常会导致样式的重新计算，并且，当满足下列条件时，会触发强制布局：

元素属于一颗影子树中
出现下列任意一个媒体查询时：
min-width, min-height, max-width, max-height, width, height
aspect-ratio, min-aspect-ratio, max-aspect-ratio
device-pixel-ratio, resolution, orientation , min-device-pixel-ratio, max-device-pixel-ratio

所获取的属性是下列之一时：

height, width
top, right, bottom, left
margin [-top, -right, -bottom, -left, 或简写形式] 仅在数值是定值时
padding [-top, -right, -bottom, -left, 或简写形式] 仅在数值是定值时
transform, transform-origin, perspective-origin
translate, rotate, scale
grid, grid-template, grid-template-columns, grid-template-rows
perspective-origin
window

window.scrollX, window.scrollY
window.innerHeight, window.innerWidth
window.getMatchedCSSRules() 仅会导致样式重新计算

百度小程序Toast组件
author: @TiffanysBear

BdToast百度小程序自定义通用组件

BdToast百度小程序自定义通用组件-github地址

需求

手百小程序的toast仅支持在页中展示，不能自定义位置、字体大小、在单个文本中增加icon等需求；因此自定义一个全局可通用的Toast。

效果预览

高性能JavaScript
author: @TiffanysBear

从《高性能JavaScript》一书中的整理笔记：

1、将经常使用的对象成员、数组项、和域外变量存入局部变量

原因：数据存储位置对大地代码整体性能会产生重要的影响，直接变量和局部变量的访问速度快于数组和对象成员。因为局部变量位于作用域链的第一个对象中，全局变量位于作用域链的最后一环。变量在作用域链的位置越深，访问的时间就越长。

1
2
3

var doc = document;
var db = doc.body;
var odiv = doc.getElementById('div1');

2、避免使用with表达式，因为他改变了运行期上下文的作用域链。

3、同理with，也要注意使用try-catch，因为catch也会改变运行期上下文的作用域链。

4、嵌套成员变量会造成重大的性能影响，尽量少用。

5、DOM操作量化问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 在循坏中更新页面，问题所在：每次循环都对DOM元素访问了两次
// 一次是读取document.getElementById('here').innerHTML的内容
// 一次是修改它。
function changeDOM() {
    for (var i=0; i < 15000; i++) {
        document.getElementById('here').innerHTML += 'a';
    }

}    
// 改变方法，使用局部变量存好改变量，在循环结束时一并修改
function changeDOM() {
    var content =''；
    for (var i=0; i < 15000; i++) {
        content += 'a';
    }
    document.getElementById('here').innerHTML += content;
}
    // 关于js字符串拼接的性能优化问题
    // js的处理机制是：新建一个临时字符串，将新字符串赋值为 content + 'a'
    // 然后返回这个新字符串并同时销毁原始字符串
    // 导致字符串的连接效率较低的重要原因不仅在于对于新的临时变量的不断创建
    // 还有js的垃圾回收机制下不断在对象创建期间回收，导致的效率低下
    // 提高效率的办法是用数组的join函数：
        function changeDOM() {
          var content =[]；
          for (var i=0; i < 15000; i++) {
              content.push('a');
          }
         document.getElementById('here').innerHTML += content.join('');
      }
    // 但是同时也要注意，后来的大部分浏览器都对“+”的连接字符串做了优化
    // 由于SpiderMonkey等引擎对字符串的“+”运算做了优化，结果使用Array.join的效率反而不如直接用"+"！
    // 因此建议是：在IE7以下，使用join，在新浏览器下，除了变量缓存外，不需要做别的优化

为你的博客增加访问量统计
author: TiffanysBear

需求

在github上搭建的博客系统，比如想知道自己网站的PV、UV即用户访问量、页面访问量

PV: 页面访问量，单个用户连续访问N个页面，记录为N次。
UV: 用户访问量，单个用户IP连续访问N个页面，记录为1次。

分析

可以使用不蒜子计数器，轻量级的网页计算方式。目前存在的问题是，如果网站已经运行一段时间，想初始化访问次数，目前是只能先注册登录，自行修改，但是到目前，注册登录功能一直还没有上线，只能联系Bruce，手工升级==，但是也可以通过js自己手动解决。

代码使用

首页在页面中引入不蒜子计数器的js：

1

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后在页面html上加上标签即可，可以根据自己的需求加上：

1
2
3
4
5
6
7
8
9
10
11

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

<span id="busuanzi_container_page_pv">
    文章点击次数:<span id="busuanzi_value_page_pv"></span>
</span>
  
<span id="busuanzi_container_site_uv">
    本站浏览量:<span id="busuanzi_value_site_uv"></span>
</span>

现在基本的统计页面PV、UV的需求就完成了，或许你建站很久，还想加上初始值。

Vue源码学习和分析笔记
author: @TiffanysBear

准备工作

前序了解

Flow 静态类型检查工具

类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。

1
2
3
4
5
6
7
8

/*@flow*/

function split(str) {
  return str.split(' ');
}

split(22);

类型注释：事先注释好我们期待的类型，Flow 会基于这些注释来判断。

1
2
3
4
5
6
7
8
9

/*@flow*/


function add(x: number, y: number): number {
  return x - y;
}

add('Hello', 11);

点击了解更多Flow相关特性