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

一、坑爹的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…

二、文件打包压缩上传到linux服务器后文件名乱码问题解决

打包压缩excel文件上传到linux服务器，发现文件名乱码了。

经过locale命令看到linux服务器的编码格式为utf-8

因而把excel文件经过另存为将编码格式设置为utf-8

一、windows系统通常默认的编码格式为gbk或者gb2312
二、打开excel另存为
三、在弹框里找到工具(L)——Web选中(W)...——编码
四、将excel文件的编码改成utf-8

到这一步觉得能够了，用好压压缩完上传到服务器，发现仍是乱码 进行下一步修改

一、用好压右键打开压缩包
二、在“选项——Language——设置代码页——更多代码页与设置”选择UTF-8
三、从新压缩excel文件
四、上传linux服务器后解压缩，文件名没有乱码了

三、gulp的一些理解

gulp.src

建立一个流，用于从文件系统中读取Vinyl对象

gulp.dest

建立用于将Vinyl对象写入文件系统的流

简单理解：，gulp.src把源文件转为Vinyl对象，通过一系列的gulp规则操做完源文件后，再由gulp.dest把转换完的源文件输出到系统

Vinyl对象是gulp特有的文件流

四、什么是vanilla.js？

其实就是原生js

vanilla.js官网 官网笑喷人的原话：

Vanilla JS is so popular that browsers have been automatically loading it for over a decade.

五、ejs的两种用法

5.一、直接引用

<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.二、做为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语法渲染数据便可
})
复制代码

六、artTemplate的一些坑

include的两种写法

include方法有4个参数

//经常使用的是前面两个参数，除了filename是string类型，后面3个都是object include = function include(filename, data, blocks, options) {...}

6.一、include+空格

{{include 'foldTable2Tmpl' {tmplData:$children,isChildren:1} }}

include+空格的写法以空格区分参数，坑的位置：

include后面的每一个参数后面都要打空格，即便后面没参数了也要空格，不打空格就报错 后面3个对象参数（data、blocks、options）能够带多个属性，可是属性之间不能有空格，不然报错

6.二、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+空格写法便可避免了

七、git提交本地分支到远程

建立本地分支

拉取远程分支到本地（适用于远程有分支）

git checkout -b iss53 origin/iss53 // 拉取远程分支（origin/iss53）到本地分支（iss53）

建立本地分支（适用于远程无分支）

一、git checkout -b iss53 // 建立本地分支iss53
二、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到关联的分支。

八、一些答疑解惑

一、IIFE：function foo(){ }(); 运行结果？

IIFE（Immediately Invoked Function Expressions）表明当即执行函数 。

报错：Uncaught SyntaxError: Unexpected token ) 缘由：

以function关键字开头的语句会被解析为函数声明，而函数声明是不容许直接运行的。

只有当解析器把这句话解析为函数表达式，才可以直接运行 ，以运算符开头 把它变成函数表达式，

有两种方式：

一、(function foo(){ })() ;

二、(function foo(){ }()) ;

用void操做符：void function foo(){ }(); 也能够解决，可是有隐患。表达式的值是undefined ，若是 IIFE 有返回值 ，不要用void关键字：

var str = void function foo(){ return 'foo' }(); // undefined

var str = (function foo(){ return 'foo' }()); // "foo"

二、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"（不跨域 ）这样能够解决跨域问题

九、解决css3效果出现抖动的问题

问题描述

在使用css3的过渡或者动画时出现

解决方案

一、布局的话，放弃transform，改用margin或flex 二、backface-visibility: hidden。可是这个会形成页面模糊 三、设置用到css3新属性的dom宽高为偶数

如transform以后若是不是整数，跟显示的实际像素对不上就会出现抖动

十、file类型input上传同一份文件不触发change事件

试了三种方法：

一、置空input的值，chrome下没成功
二、覆盖当前input，chrome下没成功
三、改变input的type类型，上传完后再改回来，chrome下成功

十一、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

十二、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

设置文本超出时的以'...'省略号代替

1三、用measure导出的sketch文件显示百分比

如图，在win7环境下喜欢用 alt+tab切换窗口，再切回sketch文件发现竟然只显示百分比了，本来觉得是文件问题，每次关掉重开，其实不是：

按 alt 键便可切回显示像素

14. jquery报错Illegal invocation

ajax请求时报错

Uncaught TypeError: Illegal invocation

这是ajax的请求参数太大了，没法解析，通常是插件未初始化完成，致使带上了整个DOM节点对象，例如整个window对象

1五、滚动条样式-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;
}
复制代码

1六、IE下a标签下载问题

在IE下用createElemnt('a') + FileReader下载二进制文件，报错：

传递给系统调用的数据区域过小

因为IE对URL的字符限制是最大2083个，通常的文件下载转换为二进制长度超过这个限制就会报错，解决方案以下：

// msSaveOrOpenBlob兼容IE10+
var blob = this.response // 转换后的二进制文件
window.navigator.msSaveOrOpenBlob(blob, '下载的文件.xlsx')
复制代码

1七、简单理解原型链

什么是原型链？

对象实例与其原型对象之间的链接就是原型链

在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
复制代码

代码图解：

1八、闭包

闭包是指有权访问另外一个函数内部做用域中变量的函数。
建立闭包的常见方式，就是在一个函数内部建立另外一个函数

return该建立好的函数给外部用，这个return出去的函数即闭包

// 闭包实现简单的计数器
function counter(){
	var num = 0;
	return function () {
		return num++
	}
}
var res = counter()
res(); // 1
res(); // 2
复制代码