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

南風一濺發表於2018-12-10
筆記

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檔案顯示百分比

圖13
如圖，在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
複製程式碼

相關文章