日常遇到的一些问题或知识的笔记（一）

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文件显示百分比

如图，在win7环境下喜欢用 alt+tab切换窗口，再切回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
复制代码