模塊化

1. IIFE

window.onload = function () {init()
}function init() {keySearch()others() // 多人開發的模塊
}var keySearch = (function () {var searchKw = document.getElementById('J_search_kw'),autoKw = document.getElementById('J_autoKw'),recomKw = JSON.parse(document.getElementById('J_recomKw').innerHTML),kwOrder = 0,t = null;function setAutoKws() {autoKwChange() // 打開頁面就開始輪播t = setInterval(autoKwChange, 2000)}function autoKwChange() {var len = recomKw.length;autoKw.innerHTML = recomKw[kwOrder]kwOrder = kwOrder >= len - 1 ? 0 : kwOrder + 1}return function () {// 模塊化，return function出去，還可以傳參 可以在function里做很多事setAutoKws()}
})();
// 其他人寫的模塊
var others = (function(){return function(){}
})();

4. 模塊化和面向對象的選取：可復用則插件化

input的oninput事件 HTML5新增

• IE9及以下會有兼容問題，需使用onpropertychange
  VUE的雙向數據綁定并不是這么簡單
  

input的onchang事件

• 失去焦點才觸發
• focus和blur時的值不同才觸發

input的onfocus、onblur事件

如果只是修改樣式，直接用css也能做到

• 由于placeholder修改樣式不便，不同瀏覽器的定義有差異，因此常用onfocus、onblur來模擬placeholder
  
  
  

<input type="text" 
maxlength="40" 
value="請輸入關鍵字" 
name="SerchKey" 
class="inp-txt"
onfocus="if(this.value=='請輸入關鍵字')
{this.value='';this.className='inp-txt inp-txt-active'}"
onblur="if(this.value=='')
{this.value='請輸入關鍵字';this.className='inp-txt'}" 
autocomplete="off">