<!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>
业务代码编码规范-最佳实践
猜你喜欢
转载自blog.csdn.net/xutongbao/article/details/80647915
今日推荐
周排行