數的定義方式

1. 函數聲明方式 function 關鍵字 (命名函數)

2. 函數表達式 (匿名函數)

3. new Function()

Function 里面參數都必須是字符串格式

第三種方式執行效率低，也不方便書寫，因此較少使用

所有函數都是 Function 的實例(對象)

函數也屬于對象

函數的調用方式

1. 普通函數

function fn() {

console.log('人生的巔峰');

}

fn(); fn.call()

2. 對象的方法

var o={

sayHi: function() {

console.log('人生的巔峰');

}

}

o.sayHi();

3. 構造函數

function Star() {};

new Star();(構造函數和普通函數肯定不一樣了，他們的主要區別是構造函數首字母大寫，還有就是new關鍵字調用)

4. 綁定事件函數

btn.onclick=function() {}; // 點擊了按鈕就可以調用這個函數

5. 定時器函數

setInterval(function() {}, 1000); 這個函數是定時器自動1秒鐘調用一次

6. 立即執行函數

(function() {

console.log('人生的巔峰');

})();

立即執行函數是自動調用

言

熟悉的朋友都知道，我所分享的圖文，基本上都是后端開發相關的技術。

但是web開發是一套綜合的技術，牽涉到方方面面的知識。包括Linux服務器，TCP/IP網絡，數據庫，編程語言，HTML，JS，CSS等前端技術。

很多開發者窮其多年功力，不過只是在一方面有所精通。遑論號稱全棧的開發者，真正拿得出手的技術也必鳳毛麟角。

今天分享一篇前端JavaScript的基礎函數。因為覺得非常有用，通用性強，推薦給大家。

簡陋的過去

還記得早期的 JavaScript，你需要使用一個簡單的函數，來處理幾乎所有的事情。

瀏覽器供應商對 JS 實現的功能不同，甚至在基本功能上，如 addEventListener 和 attachEvent，都有所分歧。

時代已經改變了，但是每個開發人員在他們的武器庫中，仍然應該有一些功能，以方便功能實現。

1 - debounce

當涉及到事件驅動的性能時，debounce函數可以改變游戲規則。

如果您沒有使用具有scroll、resize、key* 事件的 debounce 函數，那么您可能沒有找到最佳實踐。

這里有一個debounce 函數，可大大提高你的代碼效率。

debounce 函數不允許在給定的時間框架內多次使用回調。在為頻繁觸發的事件分配回調函數時，這一點尤其重要。

2 - poll

正如在 debounce 函數中提到的，有時候你不需要插入一個事件，來表示你想要的狀態。如果事件不存在，你需要每隔一段時間檢查你想要的狀態。

下圖是 poll 函數的實現：

然后調用的時候使用下面的方式：

poll(function() {
	return document.getElementById('lightbox').offsetWidth > 0;
}, 2000, 150).then(function() {
    // Polling done
}).catch(function() {
    // Polling timed out, handle the error!
});

poll 在 web 上已經很有用了，并且在未來還會繼續使用！

3 - once

有時候，您希望某個給定功能只發生一次，這與您使用 onload 事件的方式類似。

once 函數確保一個給定函數只能調用一次，從而防止重復初始化！

4 - getAbsoluteUrl

從變量字符串中獲取絕對 URL 并不像您想象的那么容易。有 URL 構造器，但是如果不提供所需的參數，它可能會出現問題。

下面是一個獲得絕對 URL 和字符串輸入的代碼：

這種用法對獲取到 href 更為保險。

5 - isNative

用于確定給定的函數是否是本地的，你可以決定是否覆蓋它。下面的簡便函數能讓你認識更為清楚：

方法寫的有點兒丑，不過能用。:)

6 - insertRule

我們都知道，可以從選擇器中抓取一個節點列表（通過document.querySelectorAll），然后給每個節點一個樣式。

但是更有效的是，把這個樣式設置成選擇器：

這在處理一個動態的、大量使用 ajax 的站點時特別有用。

如果將樣式設置為選擇器，則不需要考慮樣式化可能與該選擇器匹配的每個元素。

7 - matchesSelector

我們經常在繼續之前驗證輸入。確保真實的輸入值，確保表單數據有效等等。

但是，我們多久才能確保，一個元素符合向前移動的條件呢？

你可以使用 matchesSelector 函數，來驗證元素是否屬于給定的選擇器匹配：

寫在最后

好了，輪子都準備完畢了，拿去裝車上吧！

Happy coding :-)

我是 @程序員小助手 ，持續分享編程知識，歡迎關注。

十幾個函數，對于前端的開發的同學來說，非常實用，比如，如何生成一個唯一的字符串ID，如何轉義HTML特殊字符。而對于想提升JS基礎能力及面試能力的同學來講，也非常有用，每一個功能考的都是你的基本功扎不扎實的問題。能學東西

如何生成隨機數？

我們可以使用Math.random方法來生成 一個隨機字符中，比如，當我們需要生成一個唯一字符串ID的時候，這就非常適合。

代碼如下：