【util】工具类方法 总结
来源：互联网 发布：健体与健美的区别 知乎 编辑：程序博客网 时间：2024/06/03 15:56
utils.js：可供其他页面共享的js
1.将点击事件抽象到utils.js中
·这种方法写完之后能够保证js的优美，当页面有多个click事件时能够避免代码重复，并且将click事件集中到一起
utils.js
/** * Created by 111 on 2016/3/10. */var utils = {};utils.quick ={ click:function(method,node){ var list = null; if(node){ list = $(node).find("[data-click]"); }else{ list = $("[data-click]"); } list.on("click",function(eventObject){//this指当前对象，若为save，则this指<button id="goHome" data-click="save">data测试save</button> var click =$(this).data("click"); if(click && method[click]){ //获取button的附加click元素 return method[click].apply(this,[eventObject]); } }); }, offClick:function(node){ if(node){ $(node).find("[data-click]").off('click'); }else{ $("[data-click]").off('click'); } }};·使用data-click属性来自定义点击方法名
页面
<%@ page isELIgnored="false"%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <link rel="stylesheet" href="${resource}/css/index.css?revision=${revision}"> <title></title> <script type="text/javascript" src="${resource}/lib/jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="${resource}/js/utils.js"></script> <script type="text/javascript"> $(document).ready(function(){ utils.quick.click({ save:function(){ utils.quick.offClick("#save");//取消绑定点击事件,第二次点击不会相应 alert("save"); } },"#save")//只有id为save的标签内的含有data-click属性的标签会被查找出来，绑定点击事件， //如果省略则所有的具有data-click属性的元素都会查找出来然后判断 }) </script></head><body><div id="save"> <button id="goHome" data-click="save">data测试save</button></div><button id="go" data-click="query">data测试query</button></body></html>多个data-click 属性可以这样写：
$(document).ready(function(){ utils.quick.click({ save:function(){ alert("save"); }, query:function(){ alert("query"); } }); });2.生成全局唯一标识符（UUID）：通常可作为一个id使用，基本不会重复
utils.uuid= { uuid:function(){ var d = new Date().getTime(); var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(c){ var r = (d+Math.random()*16)%16 |0; // Math.random()*16 随机产生0-16之间的小数 % 模运算即取余 d = Math.floor(d/16); //round()四舍五入;floor()向上取整;ceil()向下取整； return (c = 'x'?r:(r &0x7 |0x8)).toString(16); }); return uuid; }};js调用
alert(utils.uuid.uuid());
3.js模板引擎nano的使用：就不需要再去拼html了
utils.template = { // JS模板工具 https://github.com/trix/nano /** * @param template 静态的模板，模型使用{object.name}的形式 * @param data 填充的数据对象 * @returns {XML|string|void} */ nano: function (template, data) { return template.replace(/\{([\w\.]*)\}/g, function (str, key) { var keys = key.split("."), v = data[keys.shift()]; for (var i = 0, l = keys.length; i < l; i++) v = v[keys[i]]; return (typeof v !== "undefined" && v !== null) ? v : ""; }); }};·语法：
utils.template.nano(template,data);//template指填充数据的模板，可以为静态模板，写在页面上，data指用来填充的数据
简单使用
<!--jsp1.2默认不使用el表达式，如果遇到el表达式没解析，可以试试加上这个--><%@ page isELIgnored="false"%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <link rel="stylesheet" href="${resource}/css/index.css?revision=${revision}"> <title></title> <script type="text/javascript" src="${resource}/lib/jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="${resource}/js/utils.js"></script> <script type="text/javascript"> $(document).ready(function(){ var data = { //模拟填充的数据 user: { login: "tomek", first_name: "Thomas", last_name: "Mazur", account: { status: "active", expires_at: "2009-12-31" } } } var item = utils.template.nano($("#templateTest").html(),data); $("#nano-test").html(item);// $("#nano-test").html(utils.template.nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)); }) </script></head><body><div id="nano-test"></div>//静态模板，或者不使用直接用js中注释的方法插入<script type="text/html" id="templateTest"> <p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p></script></body></html>异步请求list数据，不分页
<%-- Created by IntelliJ IDEA. User: 111 Date: 2016/2/10 Time: 11:44 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCtype html><html><head> <%--<script type="text/javascript" src="../public/js/amd_test.js"></script>--%> <script type="text/javascript" src="../public/js/utils.js"></script> <script type="text/javascript" src="../public/lib/jquery/jquery-2.1.3.min.js"></script> <title></title> <script type="text/javascript"> window.onload = function(){ $.ajax({ //请求到list数据，list保存的对象含有name和sex字段 url:'../test/data', dataType:'json', method:'post', async:false, success:function(data){ $.each(data,function(index,item){ $("#tbody").append(utils.template.nano($("#template-list").html(),item)); }) }, error:function(XMLHttpRequest ,textStatus,errorThrown){ console.log(XMLHttpRequest.status+"/n"+XMLHttpRequest.statusText+"/n"+errorThrown+"/n"); } }) } </script></head><body><div> <table> <thead> <tr> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody id="tbody"></tbody> </table></div><script type="text/html" id="template-list"> <tr> <td>{name}</td> <td>{sex}</td> </tr></script></body></html>分页的后期根据前端分页插件提供
4.美化页面的弹出框和确定框(需要bootstrap插件 ，需要上面的nano js引擎,uuid)
·alert/confirm utils.js
utils.modal = { /** * myAlert * @param title 标题 不填则默认 * @param body 内容 * @param callback 回调函数 */ myAlert: function () { var settings = resolveModal.apply({}, arguments); myAlert.open(settings); }, /** * myConfirm * @param title 标题 * @param body 内容 * @param callback 回调函数 */ myConfirm: function () { var settings = resolveModal.apply({}, arguments); myConfirm.open(settings); }};var resolveModal = function () {//解析调用时的参数，并返回 var settings = null; if (arguments.length == 1) {//仅一个参数 if ($.type(arguments[0]) == 'string') { settings = { body: arguments[0] } } else if ($.type(arguments[0]) == 'object') { settings = arguments[0]; } else if ($.type(arguments[0]) == 'function') { settings = { callback: arguments[0] } } } else if (arguments.length == 2) {//两个参数 if ($.type(arguments[1]) == 'function') { settings = { body: arguments[0], callback: arguments[1] } } else { settings = { title: arguments[0], body: arguments[1] } } } else if (arguments.length == 3) {//三个参数 settings = { title: arguments[0], body: arguments[1], callback: arguments[2] } } return settings;};var myAlert = { id: null, template: '<div class="modal fade" id="{id}" style="width: 360px" role="dialog" aria-hidden="true"><div class="modal-dialog" style="width: 360px;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title"></h4></div><div class="modal-body" style="font-size:16px;"></div><div class="modal-footer"><button type="button" class="btn btn-primary">确定</button></div></div></div></div>', settings: { title: '消息提示', body: '消息提示' }, init: function () { $('#' + this.id).on('hide.bs.modal', function () { myAlert.callback(); }); this.init = null; }, callback: $.noop, close: function () { $('#' + myAlert.id).modal('hide'); }, open: function (options) { if (!this.id) { this.id = utils.uuid.uuid(); $('body').append(utils.template.nano(this.template, {id: this.id})); $('#' + this.id + ' button.btn-primary').on('click', myAlert.close); } var dom = $('#' + this.id), setting = $.extend({}, this.settings, options); this.callback = setting.callback ? setting.callback : $.noop; $('h4.modal-title', dom).text(setting.title); $('div.modal-body', dom).html(setting.body); document.activeElement && $(document.activeElement).blur(); dom.modal({backdrop: 'static', show: true}); this.init && this.init(); }}var myConfirm = { id: null, template: '<div class="modal fade" id="{id}" role="dialog" aria-hidden="true" style="width: 360px"><div class="modal-dialog" style="width: 360px;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title"></h4></div><div class="modal-body" style="font-size:16px;"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary">确定</button></div></div></div></div>', settings: { title: '消息提示', body: '确定继续' }, callback: $.noop, result: false, init: function () { $('#' + this.id).on('hide.bs.modal', function () { myConfirm.callback(myConfirm.result); }); this.init = null; }, close: function () { $('#' + myConfirm.id).modal('hide'); }, open: function (options) { if (!this.id) { this.id = utils.uuid.uuid(); $('body').append(utils.template.nano(this.template, {id: this.id})); $('#' + this.id + ' button.btn-primary').on('click', function () { myConfirm.result = true; myConfirm.close(); }); } var dom = $('#' + this.id), setting = $.extend({}, this.settings, options); $('h4.modal-title', dom).text(setting.title); $('div.modal-body', dom).html(setting.body); this.callback = setting.callback ? setting.callback : $.noop; this.result = false; document.activeElement && $(document.activeElement).blur(); dom.modal({backdrop: 'static', show: true}); this.init && this.init(); }}测试页面
window.onload = function(){ utils.modal.myAlert("提示","操作失败！",function(){ alert("111"); }); utils.modal.myConfirm("提示","确定删除吗",function(flag){ alert(flag); }); };整体代码，可直接复制使用，css 需要的可以微调
var utils = {};utils.uuid= { uuid:function(){ var d = new Date().getTime(); var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(c){ var r = (d+Math.random()*16)%16 |0; // Math.random()*16 随机产生0-16之间的小数 % 模运算即取余 d = Math.floor(d/16); //round()四舍五入;floor()向上取整;ceil()向下取整； return (c = 'x'?r:(r &0x7 |0x8)).toString(16); }); return uuid; }};utils.modal = { /** * myAlert * @param title 标题 不填则默认 * @param body 内容 * @param callback 回调函数 */ myAlert: function () { var settings = resolveModal.apply({}, arguments); myAlert.open(settings); }, /** * myConfirm * @param title 标题 * @param body 内容 * @param callback 回调函数 */ myConfirm: function () { var settings = resolveModal.apply({}, arguments); myConfirm.open(settings); }};var resolveModal = function () {//解析调用时的参数，并返回 var settings = null; if (arguments.length == 1) {//仅一个参数 if ($.type(arguments[0]) == 'string') { settings = { body: arguments[0] } } else if ($.type(arguments[0]) == 'object') { settings = arguments[0]; } else if ($.type(arguments[0]) == 'function') { settings = { callback: arguments[0] } } } else if (arguments.length == 2) {//两个参数 if ($.type(arguments[1]) == 'function') { settings = { body: arguments[0], callback: arguments[1] } } else { settings = { title: arguments[0], body: arguments[1] } } } else if (arguments.length == 3) {//三个参数 settings = { title: arguments[0], body: arguments[1], callback: arguments[2] } } return settings;};var myAlert = { id: null, template: '<div class="modal fade" id="{id}" role="dialog" aria-hidden="true"><div class="modal-dialog" style="width: 360px;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title"></h4></div><div class="modal-body" style="font-size:16px;"></div><div class="modal-footer"><button type="button" class="btn btn-primary">确定</button></div></div></div></div>', settings: { title: '消息提示', body: '消息提示' }, init: function () { $('#' + this.id).on('hide.bs.modal', function () { myAlert.callback(); }); this.init = null; }, callback: $.noop, close: function () { $('#' + myAlert.id).modal('hide'); }, open: function (options) { if (!this.id) { this.id = utils.uuid.uuid(); $('body').append(utils.template.nano(this.template, {id: this.id})); $('#' + this.id + ' button.btn-primary').on('click', myAlert.close); } var dom = $('#' + this.id), setting = $.extend({}, this.settings, options); this.callback = setting.callback ? setting.callback : $.noop; $('h4.modal-title', dom).text(setting.title); $('div.modal-body', dom).html(setting.body); document.activeElement && $(document.activeElement).blur(); dom.modal({backdrop: 'static', show: true}); this.init && this.init(); }}var myConfirm = { id: null, template: '<div class="modal fade" id="{id}" role="dialog" aria-hidden="true"><div class="modal-dialog" style="width: 360px;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title"></h4></div><div class="modal-body" style="font-size:16px;"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" class="btn btn-primary">确定</button></div></div></div></div>', settings: { title: '消息提示', body: '确定继续' }, callback: $.noop, result: false, init: function () { $('#' + this.id).on('hide.bs.modal', function () { myConfirm.callback(myConfirm.result); }); this.init = null; }, close: function () { $('#' + myConfirm.id).modal('hide'); }, open: function (options) { if (!this.id) { this.id = utils.uuid.uuid(); $('body').append(utils.template.nano(this.template, {id: this.id})); $('#' + this.id + ' button.btn-primary').on('click', function () { myConfirm.result = true; myConfirm.close(); }); } var dom = $('#' + this.id), setting = $.extend({}, this.settings, options); $('h4.modal-title', dom).text(setting.title); $('div.modal-body', dom).html(setting.body); this.callback = setting.callback ? setting.callback : $.noop; this.result = false; document.activeElement && $(document.activeElement).blur(); dom.modal({backdrop: 'static', show: true}); this.init && this.init(); }}utils.template = { // JS模板工具 https://github.com/trix/nano /** * @param template 静态的模板，模型使用{object.name}的形式 * @param data 填充的数据对象 * @returns {XML|string|void} */ nano: function (template, data) { return template.replace(/\{([\w\.]*)\}/g, function (str, key) { var keys = key.split("."), v = data[keys.shift()]; for (var i = 0, l = keys.length; i < l; i++) v = v[keys[i]]; return (typeof v !== "undefined" && v !== null) ? v : ""; }); }};5.简单的判别浏览器（ie/firefox/chrome,新出的win10的edge浏览器在这里匹配不成功，显示的是chrome浏览器，需要的话需要重写）
edge的navigator.userAgent:mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/46.0.2486.0 safari/537.36 edge/13.10586
utils.browser ={ isIE: function () { return /msie/.test(navigator.userAgent.toLowerCase()) || /rv:([\d.]+)\) like gecko/.test(navigator.userAgent.toLowerCase()); }, isFirefox: function () { return /firefox/.test(navigator.userAgent.toLowerCase()); }, isChrome: function () { return /chrome/.test(navigator.userAgent.toLowerCase()); }, get: function () { var browser = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? browser.ie = s[1] : (s = ua.match(/msie ([\d.]+)/)) ? browser.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? browser.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? browser.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? browser.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? browser.safari = s[1] : 0; return browser; }}6.订阅/发布/取消订阅模式（观察者模式）
jquery版
(function ($) { //jquery私有作用域 var o = $({}); $.subscribe = function () { o.on.apply(o, arguments); }; $.unsubscribe = function () { o.off.apply(o, arguments); }; $.publish = function () { o.trigger.apply(o, arguments); };}(jQuery));页面调用
·订阅一个事件，函数中执行代码，接下来如果想调用这个事件，则直接发布即可，如果想取消这个订阅事件，则取消即可。
<%-- Created by IntelliJ IDEA. User: 111 Date: 2016/2/10 Time: 11:44 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><!DOCtype html><html><head> <%--<script type="text/javascript" src="../public/js/amd_test.js"></script>--%> <link rel="stylesheet" href="../public/lib/bootstrap/css/bootstrap.min.css"> <script type="text/javascript" src="../public/lib/jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="../public/js/utils.js"></script> <script type="text/javascript" src="../public/lib//bootstrap/js/bootstrap.min.js"></script> <title></title> <script type="text/javascript"> window.onload = function(){ utils.quick.click({ btn:function(){ $.publish("/test/data"); $.unsubscribe(""); } }) $.subscribe("/test/data",function(){ alert("subscribe"); }); }; </script></head><body><div> <button data-click="btn">点击</button></div></body></html>7.对字符串判断的一些util类
utils.string = { trim: function (str) { return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, ''); }, isEmpty: function (str) { return (!str || 0 === str.length); }, isNotEmpty: function (str) { return !this.isEmpty(str); }, isBlank: function (str) { return (!str || 0 === this.trim(str).length); }, isNotBlank: function (str) { return !this.isBlank(str); }, startwith:function(data,str){ if(str==null||str==""||data == null ||data.length==0||str.length>data.length) return false; if(data.substr(0,str.length)==str) return true; else return false; return true; }, endwith:function(data,str){ if(str==null||str==""||data == null ||data.length==0||str.length>data.length) return false; if(data.substring(data.length-str.length)==str) return true; else return false; return true; }};8.ajax的get/post请求
utils.js
utils.myAjax ={ post: function () { var list = resolveAjax(arguments); var settings = { url: list[0], dataType: 'json', type: 'POST', data: list[1], cache: false }; $.ajax(settings).done(list[2]).fail(function (XMLHttpRequest, textStatus, errorThrown) { if (XMLHttpRequest.status == 200 && XMLHttpRequest.responseText.indexOf('<title>CAS – Central Authentication Service</title>') > 0) { utils.modal.alert('登录超时', function () { location.reload(); }); } else { list[3](XMLHttpRequest, textStatus, errorThrown) } }); }, get: function () { var list = resolveAjax(arguments); var settings = { url: list[0], dataType: 'json', type: 'GET', data: list[1], cache: false }; $.ajax(settings).done(list[2]).fail(function (XMLHttpRequest, textStatus, errorThrown) { if (XMLHttpRequest.status == 401) { location.reload(); } else { list[3](XMLHttpRequest, textStatus, errorThrown) } }); }};var resolveAjax = function (arg) { if (!arg.length) { throw 'URL不能为空' } var result = []; for (var i = 0; i < arg.length; i++) { result.push(arg[i]); } if ($.type(result[1]) == 'function') { result.splice(1, 0, ''); } if (!result[3]) { result.push($.noop); } return result;};页面调用：
utils.myAjax.post("../test/data",{},function(){ alert("11"); }); 0 0
- 【util】工具类方法 总结
- 【Java】java.util.Objects 工具类方法研究
- java util工具类
- Util工具类
- 工具类util
- DWR之UTIL.JS工具方法
- java.util其他工具类
- java.util.Timer工具类
- util 工具类(更新中............)
- java.util.Properties工具类
- android 的Util工具类
- Java.util.Collections工具类
- java.util.Objects工具类
- SharedPreferences util工具类封装
- util工具
- org.springframework.util.Assert 这个类，叫方法入参检测工具类
- Date类的常用方法及Date和String的相互转换的Util工具类
- 10node.js工具类util.inherits和util.inspect
- andriod6.0低功耗模式(关闭wifi、蓝牙、gps、屏幕亮度等)
- PAT-Find Coins (25)
- Vim如何保存需要root权限的文件
- spring 事务管理不起作用原因分析与解决
- string拼接和StringBuilder性能对比
- 【util】工具类方法 总结
- 九个酒迷喝醉酒
- 关于request.getServletPort()获取访问地址的说明
- vijos P1067 守望者的烦恼
- iOS猜拳游戏源码
- js遮罩层的应用
- oracle忘记用户名和密码
- 使用Eclipse生成generated serial version ID的时候,Eclipse弹出出错信息
- android四大组件之ContentProvider小结
