【JS】WTool.js 基于JQuery的工具集 (写着玩的)

// console.info("加载WTool中...")/*** 威工具1.基于Jquery开发2.参考VUE双向绑定（已实现单项绑定）引用方法<script src="WTool.js" ></script><script>WTool.loadJquery();</script>*** guanweiMail@163.com*/
var WTool = {/*** 工具类配置信息*/WToolConfig:{jQueryUrl:"jquery.min.js" //v3.4.1},init:function(){},/*** 数据*/data:{},/*** 系统绑定obj set get方法 勿动*/defineProperties:{},/*** 引入Jquery* 具体版本请去WtoolConfig配置*/loadJquery:function(){// alert(WTool.WToolConfig.jQueryUrl)if(!window.jQuery){this.loadJs(this.WToolConfig.jQueryUrl);}else{console.info("已有Jquery，无需引入。")}},/*** 引入JS* @param url*/loadJs:function(url){console.info("引入" + url);document.write("<script src='"+url+"'><script>");},/*** 加载数据到页面** 需要配置* class="WTool"** {url:'www.baidu.com', data:{name:'张三'}, default:{name:'空'},defVal:'0', func(row, key, val){**      return !val ? 0:val;* }}* @param url   请求url* @param data  参数  可空* @param default  默认数据 可空* @param defVal  全局默认值 可空* @param func  可修改val 可空* @param keys   只修改这几个变量 keys:{'var1':true, 'var2':true}* @param name   变量名name 一般用于list* @param template   模板 一般用于select*/loadData:function (arg) {if(!arg){console.warn("WTool：参数不能为空");return;}var row = {};/*** 默认内置变量*/if(arg.default){row = arg.default;}/*** 判断是否需要请求后台获取变量*/if(arg.url){/*** 成功后的回调方法* @param data*/arg['okFunc'] = function(data){var okdata = {};if(arg.okDataFunc){okdata = arg.okDataFunc(data);}else{okdata = data.data;}//增加根据名称存储数据 一般用于listif(arg.name){row[arg.name] = okdata;}else{//copy 合并到row$.extend(row, okdata);}$.extend(row, WTool.data);arg['row'] = row;//增加到全局变量WTool.data[arg.url] = row;//渲染页面WTool.loadVarToWModel(arg);// WTool.loadVarToHtml(arg);//最后执行if(arg.endFunc){arg.endFunc(data);}}//请求数据WTool.post(arg);}else{//直接渲染内置变量WTool.loadVarToHtml(row);}},/*** 渲染页面* @param arg*/loadVarToWModel:function(arg){var row = arg.row;var keys = arg.keys;var defVal = arg.defVal;if(this.isBlank(defVal)){defVal = "";}// Object.assign(WTool.data, row);// this.data = row;var wmodels = $("[w-model]");var value;var valueEval;var thisEl;var tagName;var definePropertiesStr = "{";for (let i = 0; i < wmodels.length; i++) {thisEl = $("[w-model]")[i];//标签名tagName = thisEl.tagName;value = "";valueEval = "";value = thisEl.attributes['w-model'].value;switch (tagName) {case 'SELECT':var arr = row[value];if(!arr){continue;}//模板 一般用于select的optionvar innerHTML = arg[value + 'template'];if(WTool.isBlank(innerHTML)){innerHTML = WTool.data[value + 'template']}if(WTool.isBlank(innerHTML)){continue;}var objj = {};var addHtml = "";var length = arr.length;for (let j = 0; j < length; j++) {objj = arr[j];addHtml += WTool.formtStr(innerHTML, objj, "");}if(arg.beforeHtml){addHtml = arg.beforeHtml + addHtml;}if(arg.afterHtml){addHtml += arg.afterHtml;}thisEl.innerHTML = addHtml;WTool.data[value] = arr;continue;default:if(keys){if(!keys[value]){continue;}}valueEval = row[value];//默认值if(this.isBlank(valueEval)){valueEval = defVal;}var keystr = '[w-model="'+value+'"]';if(i != 0){definePropertiesStr += ",";}var s = `{configurable: true,get: function() {// console.log('get: ', `+value+`);return `+value+`;},set: function(data) {`+value+` = data;$('`+keystr+`').html(data);// console.log('set: ', `+value+`);}}`;var config = eval("(" + s + ")");Object.defineProperty(WTool.data, value, config)WTool.data[value] = valueEval;}}},/*** 将变量渲染到页面* 作废* @param row* @param func*/loadVarToHtml:function(arg){var row = arg.row;if (row != null) {for(var key in row){　　//遍历对象的所有属性，包括原型链上的所有属性if(row.hasOwnProperty(key)){  判断是否是对象自身的属性，而不包含继承自原型链上的属性var val = row[key];if(arg.func){val = arg.func(row, key, val);}var reg = eval("/{{"+key+"}}/g");$('.WTool').html($('.WTool').html().toString().replace(reg,val))}}//清理页面$('.WTool').html($('.WTool').html().toString().replace(/{{(.+?)}}/g,''))console.info("WTool：页面渲染成功")}else{console.warn("WTool：变量不能为空")}},/*** 设置属性 并绑定* @param key* @param val* @returns {boolean}*/setVar:function(key, val){try{var keystr = '[w-model="'+key+'"]';var s = `{configurable: true,get: function() {// console.log('get: ', `+key+`);return `+key+`;},set: function(data) {`+key+` = data;$('`+keystr+`').html(data);// console.log('set: ', `+key+`);}}`;var config = eval("(" + s + ")");Object.defineProperty(WTool.data, key, config)WTool.data[key] = val;}catch (e) {console.warn(e);return false;}return true;},/*** ajax POST请求** {url:'请求地址', data:请求参数, okFunc:function(){//成功回调方法}}** @param arg***/post:function (arg) {$.ajax({url: arg.url,type: 'POST',dataType:'json',data: arg.data,async: false,success: function (data) {if (data.status == 'success') {arg.okFunc(data);} else {alert(data.message);}},error: function (data) {alert("出错");}});},/*** 获取Url参数* @param name* @returns {string}*/getUrlParam:function(name){// 获取数据字典name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');var results = regex.exec(location.search);return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));},/*** 修改 title 标题* @param title*/setTitle:function(title){$('title').html(title);//TODO JEECG 专用try{$('.active.J_menuTab', parent.document).html(title + ' <i class="fa fa-times-circle"></i>')}catch (e) {}//TODO JEECG 专用},/*** 修改 title 标题* @param title*/getTitle:function(title){$('title').html(title);},/*=================== WStr 字符串工具 Start ======================*//*** 格式化字符串 添加变量* @param str* @param map*/formt:function (str, row, def, func) {if(!def){def = '';}for(var key in row){　　//遍历对象的所有属性，包括原型链上的所有属性if(row.hasOwnProperty(key)){  判断是否是对象自身的属性，而不包含继承自原型链上的属性var val = row[key];if(val == null || val == 'null'){val = def;}if(func){val = func(row, key, val);}var reg = eval("/{{"+key+"}}/g");str = str.replace(reg,val)}}//清理页面return str.replace(/{{(.+?)}}/g, def);},/*** 格式化字符串 添加变量* @param str* @param map*/formtStr:function (str, row, def, func) {if(!def){def = '';}if(WTool.isBlank(str)){return def;}for(var key in row){　　//遍历对象的所有属性，包括原型链上的所有属性if(row.hasOwnProperty(key)){  判断是否是对象自身的属性，而不包含继承自原型链上的属性var val = row[key];if(val == null || val == 'null'){val = def;}if(func){val = func(row, key, val);}var reg = eval("/{"+key+"}/g");str = str.replace(reg,val)}}//清理页面return str.replace(/{(.+?)}/g, def);},/*** 获取字符串* @param str   目标字符串* @param def   默认值 默认为""* @returns {string}*/getStr:function(str, def){if(WTool.isBlank(def)){def = "";}if(WTool.isBlank(str)){return def;}},/*** 判断字符串是否为空* @param str   需要被判断的字符串* @returns {boolean}   返回结果*/isBlank:function(str){if(str == null || str == undefined || str == '' || str == 'null' || str == 'NULL'){return true;}return false;},/*** 替换全部字符串* WTool.replaceAll("aa,bb,cc", ",", "-")* 返回 aa-bb-cc* @param str       //需要替换的字符串* @param before    //替换之前的字符串 支持正则* @param after     //替换之后的字符串* @returns {*}*/replaceAll:function(str, before, after){if(str){return str.toString().replace(eval("/"+before+"/g"), after);}else{return str;}},/*=================== WStr 字符串工具 End ======================*//*=================== WMath 数学工具 Start ======================*//*** 默认千位符* @param num* @returns {*|string}*/formatCurrency:function (num) {return num && (num.toString().indexOf('.') != -1 ? num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {return $1 + ",";}) : num.toString().replace(/(\d)(?=(\d{3}))/g, function($0, $1) {return $1 + ",";}));},/*=================== WMath 数学工具 End ======================*//*=================== WDate 日期工具 Start ======================*//*** 时间格式化处理* 默认返回当前时间* yyyy-MM-dd HH:mm:ss:S* @param fmt* @param date  可空* @returns {*}*/dateFormat:function (fmt, date){if(!date){date = new Date();}var o = {"M+" : date.getMonth()+1,     //月份"d+" : date.getDate(),     //日"H+" : date.getHours(),     //小时"m+" : date.getMinutes(),     //分"s+" : date.getSeconds(),     //秒"q+" : Math.floor((date.getMonth()+3)/3), //季度"S" : date.getMilliseconds()    //毫秒};if(/(y+)/.test(fmt))fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));for(var k in o)if(new RegExp("("+ k +")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));return fmt;},/*** 返回当前时间* 2019-12-26 9:46:24* @returns {*}*/now:function(){return this.dateFormat('yyyy-MM-dd HH:mm:ss', new Date());},/*** 返回当前时间* 2019-12-26* @returns {*}*/curdate:function(){return this.dateFormat('yyyy-MM-dd', new Date());}/*=================== WDate 日期工具 End ======================*/}/*** 字符串工具* @type {{isBlank: (function(*=): boolean)}}*/
var WStr = {/*** 判断字符串是否为空* @param str   需要被判断的字符串* @returns {boolean}   返回结果*/isBlank:function(str){return WTool.isBlank(str);}
}/*** 数学工具* @type {{formatCurrency: (function(*=): *|string)}}*/
var WMath = {/*** 格式化千位符* @param num* @returns {*|string}*/formatCurrency:function (num) {return WTool.formatCurrency(num);},/*** 返回当前时间* 2019-12-26 9:46:24* @returns {*}*/now:function(){return WTool.now();},/*** 返回当前时间* 2019-12-26* @returns {*}*/curdate:function(){return WTool.curdate();}
}/*** 数学工具* @type {{formatCurrency: (function(*=): *|string)}}*/
var WDate = {/*** 格式化千位符* @param num* @returns {*|string}*/dateFormat:function (fmt, date) {return WTool.dateFormat(fmt, date);}
}/*** 替换默认配置*/
if(window.WToolConfig){Object.assign(WTool.WToolConfig, window.WToolConfig);
}/*** 引入Jquery*/
WTool.loadJquery();console.info("加载WTool成功。")// Object.defineProperty(WTool,"data",{
//     get:function() {
//         console.info(this)
//         return data;
//     },
//     set: function(value) {
//         console.log("set:" + value); //value是 data改变后的值
//     }
// })//eval($("[w-model]").attr('w-model'))

【JS】WTool.js 基于JQuery的工具集 (写着玩的)相关推荐

php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
jQuery 表格工具集
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
常用jQuery web工具集4
tableHover tableHover一个jQuery插件当鼠标经过时,能够对表格的一整列或行进行着色加亮.支持colspans与rowspans的表格. tableHover Highlight ...
大数据挖掘分析工具集
大数据时代需要大数据挖掘,我习惯把大数据分成四个领域:数据科学.网络科学.空间地理科学和可视化技术. 最近的主要兴趣在空间地理领域,学习如何获取POI,Polygon,经纬度,空间匹配算法和可视化,一 ...
【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的...
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
基于jquery类库的绘制二维码的插件jquery.qrcode.js
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
h5打印时如何控制打印区域（基于jquery.PrintArea.js实现）
h5打印时如何控制打印区域(基于jquery.PrintArea.js实现) javaSript 的 window.print() 打印时打印范围不可控制,而jquery.PrintArea.js可以 ...
基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景请打开https://baike.baidu.com/item/日本动画#hotspotmining,查看百度百科页面效果. 2.插件源代码(更新 2017-08-28): jQue ...

【JS】WTool.js 基于JQuery的工具集 (写着玩的)

【JS】WTool.js 基于JQuery的工具集 (写着玩的)相关推荐

最新文章

热门文章