平常遇到的一些問題或知識的筆記（一）

一、坑爹的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
複製代碼