业务代码编码规范-最佳实践

需要查找的dom不多，页面交互也不多时可以这样写：\

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
  <title>业务代码编码规范-最佳实践</title>  
</head>  
<body>  
<input type="text" name="name" class="js-input">
<input type="text" name="age" class="js-input">
<input type="button" name="" value="按钮" id="m-btn" data-msg="表单按钮">
  
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   
<script>
$(function () {
  //节点查询和函数内的全局变量都写在这里，统一通过id查询，如果需要查询多个，
  //请在class里定义js-xxx，然后使用它来查询，使样式和行为分离
  var btn = $('#m-btn');
  var input = $('.js-input');

  function btnFn (that) {
    //节点的内容统一存在data属性里
    var msg = that.data('msg');
    var data = [];
    for(var i = 0; i < input.length; i++) {
      var temp = {};
      var val = $(input[i]).val();
      var name = $(input[i]).attr('name');
      temp[name] = val;
      data.push(temp);
    }
    console.log(msg);
    console.log(data);
  }

  //事件绑定都写在这个函数里,只写事件绑定，具体业务处理写在xxxFn函数里
  function initEvent() {   
    btn.on('click', function () {
      var that = $(this);
      btnFn(that);
    })
  };  

  //程序入口都写在这里
  var init = function () {
    initEvent();
  }();  
})
</script>
</body>  
</html>

需要查找的dom比较多，页面交互也比较多时可以这样写：\

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
  <title>业务代码编码规范-最佳实践</title>  
</head>  
<body>  
<input type="text" name="name" class="js-input">
<input type="text" name="age" class="js-input">
<input type="button" name="" value="按钮" id="m-btn" data-msg="表单按钮">
  
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   
<script>
$(function () {
  var myAction = {};

  //节点查询和函数内的全局变量都写在这里，统一通过id查询，如果需要查询多个，
  //请在class里定义js-xxx，然后使用它来查询，使样式和行为分离
  var dom = {
    btn: $('#m-btn'),
    input: $('.js-input')
  }
 
  //dom相关的方法都写在这里，ajax相关的可以单独写一个$.extend，方法都扩展到myAction
  $.extend(myAction, {
    btnFn: function (that) {
      //节点的内容统一存在data属性里
      var msg = that.data('msg');
      var data = [];
      for(var i = 0; i < dom.input.length; i++) {
        var temp = {};
        var val = $(dom.input[i]).val();
        var name = $(dom.input[i]).attr('name');
        temp[name] = val;
        data.push(temp);
      }
      console.log(msg);
      console.log(data);
    }      
  });      
 
  //事件绑定都写在这个函数里,只写事件绑定，具体业务处理写在xxxFn函数里
  function initEvent() {   
    dom.btn.on('click', function () {
      var that = $(this);
      myAction.btnFn(that);
    })
  };  
 
  //程序入口都写在这里
  var init = function () {
    initEvent();
  }();  
})
</script>
</body>  
</html>