模块化

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">