1、坑爹的sessionStorage
一直以为sessionStorage、localStorage跟cookie一样，只要存在，整个域名下都可见，直到新开了一个窗口tab页，惊奇的发现下面的sessionStorage丢失了！
Web Storage 包含如下两种机制：
sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。 localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。
sessionStorage存储问题：
当前页面，或者通过location.href、window.open、或者通过带target="_blank"的a标签打开新标签，可见 主动打开一个新窗口或者新标签，不可见 通过带target="_blank"的A标签、window.open等方式打开新窗口时，增、删、改sessionStorage不会影响原窗口
参考blog.haoji.me/aboute-sess…
2、文件打包压缩上传到linux服务器后文件名乱码问题解决
打包压缩excel文件上传到linux服务器，发现文件名乱码了。
通过locale命令看到linux服务器的编码格式为utf-8
于是把excel文件通过另存为将编码格式设置为utf-8
1、windows系统一般默认的编码格式为gbk或者gb2312
2、打开excel另存为
3、在弹框里找到工具(L)——Web选中(W)...——编码
4、将excel文件的编码改为utf-8
到这一步以为可以了，用好压压缩完上传到服务器，发现还是乱码 进行下一步修改
1、用好压右键打开压缩包
2、在“选项——Language——设置代码页——更多代码页与设置”选择UTF-8
3、重新压缩excel文件
4、上传linux服务器后解压缩，文件名没有乱码了
3、gulp的一些理解
gulp.src
创建一个流，用于从文件系统中读取Vinyl对象
gulp.dest
创建用于将Vinyl对象写入文件系统的流
简单理解：，gulp.src把源文件转为Vinyl对象，经过一系列的gulp规则操作完源文件后，再由gulp.dest把转换完的源文件输出到系统
Vinyl对象是gulp特有的文件流
4、什么是vanilla.js？
其实就是原生js
vanilla.js官网 官网笑喷人的原话：
Vanilla JS is so popular that browsers have been automatically loading it for over a decade.
5、ejs的两种用法
5.1、直接引用
<script src="ejs.js"></script>
<script>var people = ['geddy', 'neil', 'alex'],html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>
复制代码直接引用还有一种写法：
var ejs = require('ejs'),people = ['geddy', 'neil', 'alex'],html = ejs.render('<%= people.join(", "); %>', {people: people});
复制代码5.2、作为express的视图引擎
var ejs = require('ejs');
app.engine('.html', ejs.__express); // 配置需要渲染的视图文件，支持html、ejs、jade（jade需要配jade引擎）
app.set('views', './tpls'); // 视图路径
app.set('view engine', 'ejs'); // 指定视图引擎app.use('/', function(req, res, nexgt) {var data = {user: {name: '张三丰',age: '108',sex: '男'}}res.render('index.html', data); // 渲染data数据到tpls目录下的index.html，页面上采用ejs语法渲染数据即可
})
复制代码6、artTemplate的一些坑
include的两种写法
include方法有4个参数
//常用的是前面两个参数，除了filename是string类型，后面3个都是object include = function include(filename, data, blocks, options) {...}
6.1、include+空格
{{include 'foldTable2Tmpl' {tmplData:$children,isChildren:1} }}
include+空格的写法以空格区分参数，坑的位置：
include后面的每个参数后面都要打空格，即使后面没参数了也要空格，不打空格就报错 后面3个对象参数（data、blocks、options）可以带多个属性，但是属性之间不能有空格，否则报错
6.2、include()
这种写法里面可以随便打空格，问题出在嵌套，例如tree型结构。下面这种情况会出现莫名其妙的dom结构
复制代码
{{if $value.children && $value.children.length > 0}}{{each $value.children as $children $childrenIndex}}{{include 'foldTable2Tmpl' {tmplData:$children,isChildren:1} }}{{/each}}{{/if}}
复制代码上面这个问题出在artTemplate内部解析错误，采用include+空格写法即可避免了
7、git提交本地分支到远程
创建本地分支
拉取远程分支到本地（适用于远程有分支）
git checkout -b iss53 origin/iss53 // 拉取远程分支（origin/iss53）到本地分支（iss53）
创建本地分支（适用于远程无分支）
1、
git checkout -b iss53 // 创建本地分支iss53
2、git branch iss53 // 创建本地分支iss53
切换本地分支
git checkout iss53 // 切换到本地分支iss53
删除本地分支
git branch -d iss53 // 删除本地分支iss53
推送本地分支到远程
git push origin iss53:iss53 // 冒号前面的iss53是本地分支，冒号后面的iss53是远程分支（远程没有会自动创建）
采用上面这种推送（推送本地分支到远程），每次push，git都会提醒类似下面这种情况：
There is no tracking information for the current branch. Please specify which branch you want to merge with. See git-pull(1) for details. git pull If you wish to set tracking information for this branch you can do so with: git branch --set-upstream-to=origin/ release
可以执行下面的指令：
git branch --set-upstream-to=origin/remote_branch your_branch // （remote_branch）远程分支，（your_branch）本地分支
这样关联后，每次执行pull/push都只会pull/push到关联的分支。
8、一些答疑解惑
1、IIFE：function foo(){ }(); 运行结果？
IIFE（Immediately Invoked Function Expressions）代表立即执行函数 。
报错：Uncaught SyntaxError: Unexpected token ) 原因：
以
function关键字开头的语句会被解析为函数声明，而函数声明是不允许直接运行的。只有当解析器把这句话解析为
函数表达式，才能够直接运行 ，以运算符开头 把它变成函数表达式，有两种方式：
1、
(function foo(){ })() ;2、
(function foo(){ }()) ;用
void操作符：void function foo(){ }(); 也可以解决，但是有隐患。表达式的值是undefined，如果 IIFE 有返回值 ，不要用void关键字：var str = void function foo(){ return 'foo' }(); // undefined
var str = (function foo(){ return 'foo' }()); // "foo"
2、axios、fetch对比
axios（vue官方推荐、github的star42K，好用！）
- 从 node.js 创建 http 请求
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口（重要，方便了很多的操作，诸如get、post这些请求已经封装好了）
- 可监控请求进度（例如上传、下载文件），还可以中断请求
fetch（更底层，轻便灵活，成长中）
1）fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2）fetch默认不会带cookie，需要添加配置项
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4）fetch没有办法原生监测请求的进度
5）更轻便灵活？可以设置mode为"no-cors"（不跨域 ）这样可以解决跨域问题
9、解决css3效果出现抖动的问题
问题描述
在使用css3的过渡或者动画时出现
解决方案
1、布局的话，放弃transform，改用margin或flex 2、backface-visibility: hidden。但是这个会造成页面模糊 3、设置用到css3新属性的dom宽高为偶数
如transform之后如果不是整数，跟显示的实际像素对不上就会出现抖动
10、file类型input上传同一份文件不触发change事件
试了三种方法：
1、置空input的值，chrome下没成功
2、覆盖当前input，chrome下没成功
3、改变input的type类型，上传完后再改回来，chrome下成功
11、ajax + FormData实现简单的文件上传
用FormData对象接收文件
var file = dom.files[0];
var formData = new FormData();
formData.append('image', file);
复制代码利用ajax上传文件
$.ajax({type: 'post',timeout: 60000,processData: false, // 设置为false，对于非Get请求，不自动将 data 转换为字符串// contentType: false,url: 'url',data: formData,dataType: 'JSON',success: function(data) {console.log(data);}
})
复制代码需要主要ajax的参数processData，默认下会把ajax序列化，上传文件时要把它置为false
12、CSS3实现多行文本省略
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;复制代码-webkit-line-clamp
限制在一个块元素显示的文本的行数
display: -webkit-box;
*必须结合的属性 *，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient
必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow
设置文本超出时的以'...'省略号代替
13、用measure导出的sketch文件显示百分比
按 alt 键即可切回显示像素
14. jquery报错Illegal invocation
ajax请求时报错
Uncaught TypeError: Illegal invocation
这是ajax的请求参数太大了，无法解析，一般是插件未初始化完成，导致带上了整个DOM节点对象，例如整个window对象
15、滚动条样式-webkit-scrollbar
::-webkit-scrollbar { // 整个滚动条全局样式width: 6px;height: 6px;background-color: transparent;
}
::-webkit-scrollbar-thumb { // 滚动条上的滚动滑块-webkit-border-radius: 4px;border-raidus: 4px;background-color: rgba(67, 160, 71, 0.7);
}
::-webkit-scrollbar-track { // 滚动条轨道background-color: transparen;
}
复制代码16、IE下a标签下载问题
在IE下用createElemnt('a') + FileReader下载二进制文件，报错：
传递给系统调用的数据区域太小
由于IE对URL的字符限制是最大2083个，一般的文件下载转换为二进制长度超过这个限制就会报错，解决方案如下：
// msSaveOrOpenBlob兼容IE10+
var blob = this.response // 转换后的二进制文件
window.navigator.msSaveOrOpenBlob(blob, '下载的文件.xlsx')
复制代码17、简单理解原型链
什么是原型链？
对象实例与其原型对象之间的连接就是原型链
在js中，一般通过函数创建对象。只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。当调用构造函数创建一个对象实例后，该实例内部将包含一个指针，该指针指向构造函数的原型对象。
该指针为[[Prototype]]，无法直接访问，各浏览器实现了 _proto_ 来访问该指针，即可以通过_proto_访问原型对象上的任意可访问属性
代码示例：
var Person = function () {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 25;
Person.job = "Software Engineer";
Person.prototype.sayName = function () {alert(this.name);
}var person1 = new Person();
person1.sayName(); // "Nicholas"var person2 = new Person();
person2.sayName(); // "Nicholas"alert(person1.sayName == person2.sayName); // true
复制代码代码图解：
18、闭包
闭包是指有权访问另一个函数内部作用域中变量的函数。
创建闭包的常见方式，就是在一个函数内部创建另一个函数
return该创建好的函数给外部用，这个return出去的函数即闭包
// 闭包实现简单的计数器
function counter(){var num = 0;return function () {return num++}
}
var res = counter()
res(); // 1
res(); // 2
复制代码
