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



<!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>
相关文章
相关标签/搜索