Web前端經常使用代碼筆記整理（01）

時間  2019-11-08
標籤 web 前端 經常 使用 代碼 筆記 整理 欄目 HTML 简体版
原文   原文鏈接

1.[] 和 Array 調用 slice 方法引發的問題

問題表示：在某些場景下，須要將函數的 arguments 參數做爲一個數組調用，可是 arguments 是一個奇異對象，因此試着將 arguments 轉化爲一個數組；javascript

function argToArr(){
    return [].slice.call(arguments, 0);
}
console.log(argToArr(1,2,3));    //[1,2,3]




function argToArr(){
        return Array.slice.call(arguments, 0);
    }
    console.log(argToArr(1,2,3));    //[]

問：這是爲何呢？
另外還有一個問題，是關於 Array 是怎麼找到 slice 方法的？
Array 自己是沒有 slice 方法，它的方法在 Array.prototype 中，而咱們在調用 slice 方法的時候，若是在 Array 自己沒有找到 slice 方法的話，會經過它的原型鏈往上查找，而 Array.proto 並無指向 Array.prototype，而是指向 Function()，那麼它是怎麼找到 slice 方法的呢？css

解釋：html

第二段代碼報錯是由於Array是構造函數，不是對象，打開控制檯，輸入 typeof Array，結果是 function
你也說了slice()方法在其原型對象中，而[]就是Array的原型對象，在控制檯中輸入 Array.prototype，結果是[],因此第一段代碼能夠順利執行。html5

第二段代碼以下修改就能夠了：java

functionargToArr(){
    returnArray.prototype.slice.call(arguments, 0); // 改這一行
}
console.log(argToArr(1,2,3));

其實你的本質問題就在於誤認爲Array是數組對象，然而它是構造函數。jquery

2.if條件語句相關

對於 if 語句括號裏的表達式，ECMAScript 會自動調用 Boolean()轉型函數將這個表達式的結果轉換成一個布爾值。若是值爲 true，執行後面的一條語句，不然不執行。web

3.arguments相關

經過arguments 對象的length屬性，來智能的判斷有多少參數，而後把參數進行合理的應用 。
好比，要實現一個加法運算，將全部傳進來的數字累加，而數字的個數又不肯定。ajax

function box() {
        var sum = 0;
        if (arguments.length == 0) return sum; //若是沒有參數，退出
        for(var i = 0;i < arguments.length; i++) { //若是有，就累加
            sum = sum + arguments[i];
        }
        return sum; //返回累加結果
    }
    alert(box(5,9,12));

4.函數內部屬性

函數內部，有兩個特殊的對象：arguments 和 this。arguments 是一個類數組對象，包含着傳入函數中的全部參數，主要用途是保存函數參數。但這個對象還有一個名叫 callee 的屬性，該屬性是一個指針，指向擁有這個 arguments 對象的函數。
對於階乘函數通常要用到遞歸算法，因此函數內部必定會調用自身；若是函數名不改變是沒有問題的，但一旦改變函數名，內部的自身調用須要逐一修改。爲了解決這個問題，咱們可使用 arguments.callee 來代替。正則表達式

function box(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num-1);//使用 callee 來執行自身         }
    }

5.event對象

直接接收 event 對象，是 W3C 的作法，IE 不支持，IE 本身定義了一個 event 對象，直接在 window.event 獲取便可。算法

input.onclick = function (evt) {
    var e = evt || window.event; //實現跨瀏覽器兼容獲取 event 對象
    alert(e);
};

6.事件的目標

W3C 中的 target 和 IE 中的 srcElement，都表示事件的目標。

function getTarget(evt) {
    var e = evt || window.event;
    return e.target || e.srcElement; //兼容獲得事件目標 DOM 對象
}
document.onclick = function (evt) {
    var target = getTarget(evt);
    alert(target);
};

7.阻止事件冒泡

在阻止冒泡的過程當中，W3C 和 IE 採用的不一樣的方法，那麼咱們必須作一下兼容。

function stopPro(evt) {
    var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation();
}

8.阻止事件默認行爲

function preDef(evt) {
    var e = evt || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

9.上下文菜單事件：contextmenu

當咱們右擊網頁的時候，會自動出現 windows 自帶的菜單。那麼咱們可使用 contextmenu 事件來修改咱們指定的菜單，但前提是把右擊的默認行爲取消掉。

function addEvent(obj, type, fn) { //添加事件兼容
    if (obj.addEventListener) {
        obj.addEventListener(type, fn);
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}
function removeEvent(obj, type, fn) { //移除事件兼容
    if (obj.removeEventListener) {
    ob    j.removeEventListener(type, fn);
    } else if (obj.detachEvent) {
        obj.detachEvent('on' + type, fn);
    }
}


addEvent(window, 'load', function () {
    var text = document.getElementById('text');
    addEvent(text, 'contextmenu', function (evt) {
        var e = evt || window.event;
        preDef(e);
        var menu = document.getElementById('menu');
        menu.style.left = e.clientX + 'px';
        menu.style.top = e.clientY + 'px';
        menu.style.visibility = 'visible';
        addEvent(document, 'click', function () {
            document.getElementById('myMenu').style.visibility = 'hidden';
        });
    });
});

10.js中的文檔模式-document.compatMode

文檔模式在開發中貌似不多用到，最多見的是就是在獲取頁面寬高的時候，好比文檔寬高，可見區域寬高等。

IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差異的，在Standards Mode下對於盒模型的解釋和其餘的標準瀏覽器是同樣，但在Quirks Mode模式下則有很大差異，而在不聲明Doctype的狀況下，IE默認又是Quirks Mode。因此爲兼容性考慮，咱們可能須要獲取當前的文檔渲染方式。

document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat。
BackCompat：標準兼容模式關閉。瀏覽器客戶區寬度是document.body.clientWidth;
CSS1Compat：標準兼容模式開啓。 瀏覽器客戶區寬度是document.documentElement.clientWidth。
例如：

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

11.跨瀏覽器獲取Style

function getStyle(element, attr) {
    if (typeof window.getComputedStyle != 'undefined') {//W3C
        return window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != 'undeinfed') {//IE
        return element.currentStyle[attr];
    }
}

12.js動態插入css相關styleSheets，insertRule，addRule，還有刪除樣式：deleteRule，removeRule

標準瀏覽器支持 insertRule， IE低版本則支持 addRule。

13.獲取頁面的寬高

window.innerWidth，window.innerHeight與document.documentElement.clientWidth，document.documentElement.clientHeight

注：用jquery獲取的頁面的寬度頁面不包括滾動條的寬度的

window.innerWidth與window.innerHeight（IE9及以上，谷歌，火狐識別，寬高包含滾動條的寬度）
document.documentElement.clientWidth與document.documentElement.clientHeight（IE，火狐，谷歌都能識別，寬高不包含滾動條的寬度）
若是頁面沒有滾動條:
window.innerWidth==document.documentElement.clientWidth，
window.innerHeight==document.documentElement.clientHeight（IE8及一下不識別window.innerHeight與window.innerWidth）

//跨瀏覽器獲取視口大小
function getInner() {
    if (typeof window.innerWidth != 'undefined') { //IE8及如下undefined
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

14.使用localStorage存儲數據，存儲位置在哪裏？

這個是瀏覽器隔離的，每一個瀏覽器都會把localStorage存儲在本身的UserData中，如chrome通常就是

C:\Users\你的計算機名\AppData\Local\Google\Chrome\User Data\Profile\Local Storage
若是要在瀏覽器查看，打開調試工具，在application選項卡下能夠查看。

15.js構造對象問題

function Person {}
Person.prototype.test = function() {}

當代碼 new Person(...) 執行時：
一個新對象被建立。它繼承自Person.prototype.構造函數 Person 被執行。執行的時候，相應的傳參會被傳入，同時上下文(this)會被指定爲這個新實例。
new Person()與new Person這兩種寫法有相同的效果。
new Person 等同於 new Person(), 只能用在不傳遞任何參數的狀況。

16.html5的拖拽，用了preventDefault防止彈出新頁面，ie有效，但在火狐下無論用？

<p id="p" draggable="true" ondragstart="dragStart(event)">sss</p> //ps:不加紅顯示不了p標籤。
<div ondragover="dragOver(event)" style="width:100%;height:50px;"></div>
<script>
function dragOver(e){
stopDefault(e);
}
function stopDefault(e) {
var event = e||window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
</script>

解決方式：
在body設置ondrop

document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
}

問題地址：https://segmentfault.com/q/1010000004689615

17.使用ajaxfileupload.js進行文件上傳，後臺成功執行，前臺卻進入error

問題描述：使用ajaxfileupload.js進行文件上傳，後臺正確執行，並返回了對應的響應值，可是前臺進入error，返回值自動加上了<pre>標籤

ajaxfileupload不支持響應頭ContentType爲application/json設置，不支持緣由多是爲了瀏覽器兼容，由於ie不支持application/json格式,另外firefox, chrome瀏覽器iframe在接收application/json格式的時候會自動將其轉化爲html格式，自動在json數據先後加上<pre></pre>標籤致使ajaxfileupload插件取json數據錯誤

問題地址：https://segmentfault.com/q/1010000004292314

18.網頁中的背景圖怎樣讓他加載的更快？

描述：網頁中不少地方有背景圖，但網頁打開時，他才一點一點的顯示，怎樣讓它快速的顯示？在網頁製做過程當中，怎樣優化有圖片的地方？

  1. 用 jpeg，設置壓縮率
  2. 圖片切片，組合成一張大圖
  3. 用 CDN 加速

問題地址：https://segmentfault.com/q/1010000003847764

19.([] + {}).length ?

[] + {} 運算，首先是調用對象的 valueOf 方法，若是返回一個基本類型，則以該基本類型參與運算；不然調用 toString 方法，返回基本類型則參與運算。

數組和對象的 valueOf（默認）返回自身，所以不是基本類型，接着調用 toString，空數組返回空字符串，普通對象始終返回字符串 [object Object]。故視爲兩個字符串的拼接，結果爲字符串 [object Object]，其長度爲 15。

一個例外是 Date 的實例，其實例首先調用 toString ，接着才調用valueOf。
能夠這樣驗證：
([]).toString() // ""
({}).toString() // "[object Object]"
([]+{}) // "[object Object]"

問題地址：https://segmentfault.com/q/1010000003824450

20.js對Date對象的操做的問題

使用JavaScript生成一個倒數7天的數組。
好比今天是10月1號，生成的數組是["9月25號","9月26號","9月27號","9月28號","9月29號","9月30號","10月1號"]。

Date 的 setDate() 能夠給 0 和負數做爲參數，日期會自動計算

var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

console.log(dates);
[Fri Sep 25 2015 09:58:23 GMT+0800 (中國標準時間),
 Sat Sep 26 2015 09:58:23 GMT+0800 (中國標準時間),
 Sun Sep 27 2015 09:58:23 GMT+0800 (中國標準時間),
 Mon Sep 28 2015 09:58:23 GMT+0800 (中國標準時間),
 Tue Sep 29 2015 09:58:23 GMT+0800 (中國標準時間),
 Wed Sep 30 2015 09:58:23 GMT+0800 (中國標準時間),
 Thu Oct 01 2015 09:58:23 GMT+0800 (中國標準時間)]

若是要取得格式化後的日期

var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

dates = dates.map(function(d) {
    return (d.getMonth() + 1) + "月" + d.getDate() + "日";
});

console.log(dates);

結果：

["9月25日",
 "9月26日",
 "9月27日",
 "9月28日",
 "9月29日",
 "9月30日",
 "10月1日"]

問題地址：https://segmentfault.com/q/1010000003811778

21.用閉包保存狀態

和普通function執行的時候傳參數同樣，自執行的函數表達式也能夠這麼傳參，由於閉包直接能夠引用傳入的這些參數，利用這些被lock住的傳入參數，自執行函數表達式能夠有效地保存狀態。

// 這個代碼是錯誤的，由於變量i歷來就沒背locked住
// 相反，當循環執行之後，咱們在點擊的時候i纔得到數值
// 由於這個時候i操真正得到值
// 因此說不管點擊那個鏈接，最終顯示的都是I am link #10（若是有10個a元素的話）

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');

}

// 這個是能夠用的，由於他在自執行函數表達式閉包內部
// i的值做爲locked的索引存在，在循環執行結束之後，儘管最後i的值變成了a元素總數（例如10）
// 但閉包內部的lockedInIndex值是沒有改變，由於他已經執行完畢了
// 因此當點擊鏈接的時候，結果是正確的

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i);

}

// 你也能夠像下面這樣應用，在處理函數那裏使用自執行函數表達式
// 而不是在addEventListener外部
// 可是相對來講，上面的代碼更具可讀性

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        };
    })(i), 'false');

}

22.各瀏覽器的navigator.userAgent

IE11：Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
IE10：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE9： Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE8： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
谷歌：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
火狐：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
QQ瀏：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 Core/1.47.933.400 QQBrowser/9.4.8699.400
360js:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
360jr:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
safar:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

23.向一個數組中插入元素

向數組結尾添加元素用push()很簡單，但下面有一個更高效的方法：

例如：

var arr = [1,2,3,4,5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;

最快的爲：
1.arr[arr.length] = 6; // 平均 5 632 856 ops/sec
2.arr.push(6); // 慢35.64%
3.arr2 = arr.concat([6]); // 慢62.67%

向數組的頭部添加元素如今咱們試着向數組的頭部添加元素：

var arr = [1,2,3,4,5];

arr.unshift(0);

[0].concat(arr);

注：這裏有一些小區別，unshift操做的是原始數組，concat返回一個新數組

最快的爲：

  1. [0].concat(arr); // 平均6 032 573 ops/sec
  2. arr.unshift(0); // 慢78.65%

向數組中間添加元素，使用splice能夠簡單的向數組中間添加元素，這也是最高效的方法：

var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');

參考地址：http://www.cnblogs.com/rubylouvre/p/5751564.html

24.360的渲染模式

360能選擇極速模式和兼容模式 但我想要像淘寶那樣
image

只能是極速模式,不能切換至兼容模式

網友的回覆：我查了不少時間,只找到<meta name="renderer" content="webkit"> 默認是極速模式渲染,可是這樣仍是可以切換的,我須要不能切換。
我在開發中也遇到過這個問題，就是當咱們的項目用IP訪問，用360查看默認是兼容模式，盆友們是否是也碰見過呢？
問題地址：https://segmentfault.com/q/10...

25.純css 實現footer sticker

但願footer一直在頁面底部
html代碼：

<!--主體內容-->
<div id="sticker">
    <div id="stickerCon"></div>
</div>

<!--底部內容-->
<div id="footer">footer</div>

css代碼：

html, body,#sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;} 
#footer {
    margin-top:-41px;
    height: 40px; 
    width: 100%; 
    text-align: center;
    line-height: 40px;
    color: #ABA498;
    font-size: 12px;
    background: #fafafa;
    border-top:1px solid #E7E7E7;
}

原文地址：https://segmentfault.com/a/11...

26.js中的pixelTop屬性

style對象：

pixelLeft
pixelTop
pixelWidth
pixelHeight

返回以像素爲單位的位置座標的數值,非像素單位轉換爲像素單位顯示。

left
top
width
height

返回帶單位的位置座標字符串

27.TweenMax.js用法總結

1.yoyo:Boolean -- YOYO球。另一種循環的方式，像咱們玩的YOYO球同樣，從頭至尾，再從尾到頭的往返運動，PS：要與repeat同時設置

2.repeat:int -- 循環次數。設置爲-1爲無限循環

28.window.location屬性

window.location 對象所包含的屬性

屬性 描述
hash 從井號 (#) 開始的 URL（錨）
host 主機名和當前 URL 的端口號
hostname 當前 URL 的主機名
href 完整的 URL
pathname 當前 URL 的路徑部分
port 當前 URL 的端口號
protocol 當前 URL 的協議
search 從問號 (?) 開始的 URL（查詢部分）

protocol 屬性是一個可讀可寫的字符串，可設置或返回當前 URL 的協議。

語法：

location.protocol=path

實例：假設當前的 URL 是: http://example.com:1234/test.htm#part2：

<script type="text/javascript">
document.write(location.protocol);
</script>

輸出：http:

29.正則表達式中的RegExp.$1

RegExp 是javascript中的一個內置對象。爲正則表達式。
RegExp.$1是RegExp的一個屬性,指的是與正則表達式匹配的第一個子匹配(以括號爲標誌)字符串，以此類推，RegExp.2, RegExp.3, ..RegExp.$99總共能夠有99個匹配。

例如：

var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正則表達式 匹配出生日期(簡單匹配)    
r.exec('1985-10-15');
s1=RegExp.$1;
s2=RegExp.$2;
s3=RegExp.$3;
console.log(s1+" "+s2+" "+s3)//結果爲1985 10 15

30.js中的Navigator對象

Navigator 對象包含有關瀏覽器的信息。

註釋：沒有應用於 navigator 對象的公開標準，不過全部瀏覽器都支持該對象。

Navigator 對象屬性：

屬性 描寫
appCodeName 返回瀏覽器的代碼名。
appMinorVersion 返回瀏覽器的次級版本。
appName 返回瀏覽器的名稱。
appVersion 返回瀏覽器的平臺和版本信息。
browserLanguage 返回當前瀏覽器的語言。
cookieEnabled 返回指明瀏覽器中是否啓用 cookie 的布爾值。
cpuClass 返回瀏覽器系統的 CPU 等級。
onLine 返回指明系統是否處於脫機模式的布爾值。
platform 返回運行瀏覽器的操做系統平臺。
systemLanguage 返回 OS 使用的默認語言。
userAgent 返回由客戶機發送服務器的 user-agent 頭部的值。
userLanguage 返回 OS 的天然語言設置。

在谷歌瀏覽器中打印Navigator對象，如圖所示：
圖片描述

31.markdown語法常常遺忘操做記錄

刪除線：~~ ~~包裹的文字會顯示刪除線 刪除線

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程