需要查找的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>