从2018百度前端技术学院看代码究竟应该怎么写(1)

任务描述

参考以下示例代码，补充其中的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高程三》后发现依旧不是很清晰，故又看了几篇好的博文，分享如下：

js原生创建模拟事件和自定义事件的方法

从2018百度前端技术学院看代码究竟应该怎么写(1)

任务描述

任务实现：

几点收获

额外补充

静书

引用和评论

2017前端笔试题解析

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具