\

There is not much DOM to find and not much page interaction to write: \

<! DOCTYPEhtml>  
<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>Business code Coding specification - Best practices</title>  
</head>  
<body>  
<input type="text" name="name" class="js-input">
<input type="text" name="age" class="js-input">
<input type="button" name="" value="Button" id="m-btn" data-msg="Form button">
  
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   
<script>
$(function () {
  // select * from 'id'; // select * from 'id';
  // Define jS-xxx in class and use it to query, separating style and behavior
  var btn = $('#m-btn');
  var input = $('.js-input');

  function btnFn (that) {
    // The contents of the node are stored in the data attribute
    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);
  }

  // The event bindings are written in this function, only the event bindings, the specific business processing is written in the xxxFn function
  function initEvent() {   
    btn.on('click'.function () {
      var that = $(this); btnFn(that); })};// The program entry is written here
  var init = function () { initEvent(); } (); })</script>
</body>  
</html>
Copy the code

\

If you need to find more DOM and page interactions, you can write: \

<! DOCTYPEhtml>  
<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>Business code Coding specification - Best practices</title>  
</head>  
<body>  
<input type="text" name="name" class="js-input">
<input type="text" name="age" class="js-input">
<input type="button" name="" value="Button" id="m-btn" data-msg="Form button">
  
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   
<script>
$(function () {
  var myAction = {};

  // select * from 'id'; // select * from 'id';
  // Define jS-xxx in class and use it to query, separating style and behavior
  var dom = {
    btn: $('#m-btn'),
    input: $('.js-input')}// Dom related methods are written here, ajax-related methods can be written in a separate $.extend, which extends to myAction
  $.extend(myAction, {
    btnFn: function (that) {
      // The contents of the node are stored in the data attribute
      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); }});// The event bindings are written in this function, only the event bindings, the specific business processing is written in the xxxFn function
  function initEvent() {   
    dom.btn.on('click'.function () {
      var that = $(this); myAction.btnFn(that); })};// The program entry is written here
  var init = function () { initEvent(); } (); })</script>
</body>  
</html>
Copy the code

\

\

\

\

\