使命形貌
参考以下示例代码，补充个中的JavaScript功用，完成一个JavaScript代码的编写本使命完成的功用为：用户能够在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显在“您输入的值是”笔墨的右侧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
</head>
<body>
<label>请输入北京本日空气质量：<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button>
<div>您输入的值是：<span id="aqi-display">还没有录入</span></div>
<script type="text/javascript">
(function() {
/*
在解释下方写下代码
给按钮button绑定一个点击事宜
在事宜处置惩罚函数中
猎取aqi-input输入的值，并显现在aqi-display中
*/
})();
</script>
</body>
</html>
使命完成：
这个入门级使命想必所有人都认为很简单，写完不到三五分钟，可不知人人有无看过底下使命提交栏那些高分代码，我离别挑了一个5分的，9分的，10分的看了下，除了一般分数与代码不符以外，总的来说高分照样有原理的
这是5分代码:
<script type="text/javascript">
function weather() {
var weather=document.getElementById('aqi-input').value;
document.getElementById('aqi-display').innerHTML=weather;
}
</script>想必大部份人都是如许写的吧，完成了基础需求以后认为就能够万事大吉了，那让我们看下9分代码是怎样完成的吧。
这是9分代码：
<script type="text/javascript">
(function () {
var $ = function (id) {
return document.getElementById(id);
}
$("button").onclick = function () {
handler();
}
var handler = function () {
var num = parseInt($("aqi-input").value);
if ((!isNaN(num)) && (num >= 0) && (num <= 1000)) {
$("aqi-display").innerHTML = num;
} else {
alert($("aqi-input").value + "不是有用的aqi值，请输入0-1000之间的整数！")
}
}
//用户按下enter时触发提交事宜。13示意enter按键的keycode编码。
$("aqi-input").onkeyup = function (event) {
if (event.keyCode === 13) {
handler();
}
}
</script>看到没,9分代码的人就能从空气质量检测如许一个需求想到做一个合理的边境搜检,而且他还缓存了dom查找，削减了开支，然则他疏忽了最症结的一点，这也是为何他不是10分的缘由，那接下来我们就一揭10分庐山真面目：
10分代码：
<script type="text/javascript">
function addEvent(obj, type, callback) {
if (obj.addEventListener) {
obj.addEventListener(type, callback);
} else {
obj.attachEvent('on'+type, callback);
}
}
(function () {
const input = document.querySelector('#aqi-input');
const button = document.querySelector('#button');
const display = document.querySelector('#aqi-display');
addEvent(button, 'click', function() {
display.innerText = input.value;
})
})();
</script>他虽然没做边境值搜检,然则他注意到最症结的一点差别浏览器事宜的兼容性处置惩罚，因而连系以上两个部份的长处我将我的代码补葺以下:
<script type="text/javascript">
(function(){
//处置惩罚浏览器事宜兼容性
var EventUtil = {
addEventHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeEventHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
};
//缓存dom操纵，削减开支
var button = document.getElementById("button");
var aqi_input = document.getElementById("aqi-input");
var aqi_display = document.getElementById("aqi-display");
EventUtil.addEventHandler(button,"click",function(){
//搜检是不是正当数据
var text = parseInt(aqi_input.value);
//依据详细营业场景设定合理边境值
if(!isNaN(text)&&text>0&&text<500){
aqi_display.innerHTML = text;
}else{
alert("请您输入0-500之间的正当值！")
}
});
//猜想用户习气
aqi_input.onkeyup = function(){
var event = event || window.event;
if(event.keyCode == 13){
button.click();
}
}
})();
</script>几点收成
写代码的时刻头脑严谨,多场景去想题目(如：兼容性)
应用生涯基本知识去做合理揣摸(如：输入检测)
将本身作为用户的角度去完美代码(如：增添回车键提交输入值)
可见写代码是个手艺与艺术相连系的历程！
分外补充
在此使命的进修中，有想到模仿JavaScript事宜,查阅《JavaScript高程三》后发明照旧不是很清楚，故又看了几篇好的博文，分享以下：
