JavaScript小经验小工具-总结一

1、Jquery Date Format --- Date的格式化工具类(作者是csdn的 meizz，很强大，很好用，在此膜拜感谢。)：

// 对Date的扩展，将 Date 转化为指定格式的String   
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
// 例子：   
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18   
Date.prototype.Format = function(fmt)   
{ //author: meizz   
  var o = {   
    "M+" : this.getMonth()+1,                 //月份   
    "d+" : this.getDate(),                    //日   
    "h+" : this.getHours(),                   //小时   
    "m+" : this.getMinutes(),                 //分   
    "s+" : this.getSeconds(),                 //秒   
    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
    "S"  : this.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
    fmt=fmt.replace(RegExp.$1, (this.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;   
};

2、监听easyui-numberbox、textbox.....的值变化，使用data-options="onChange:function(){}"是无效的，需要在js中使用Jquery绑定监听：

//值变化事件绑定
$('#id').numberbox({
	"onChange":function(newValue,oldValue){
		//doSomeThing
	  } 
});

3、在使用easyui-tabs动态新建一个tab时，需要使用href来加载界面，而不能使用content采用iframe标签进行加载，除非你的界面是静态的：

if ($('#tabsId').tabs('exists', tabName)) {
	$('#tabsId').tabs('select', tabName);
 }else{
	$('#tabsId').tabs('add',{
        	title:tabName,
        	href:url,
        	closable:true,
        	onLoad:function(){
        			//进行数据赋值
        			
			}     	
	});
} 

4、获取easyui-datagrid列名

var opts = $('#tableId').datagrid('getColumnFields');
var colName = [];
for (var j = 0; j < opts.length - 1; j++) {
	var col = $('#tableId').datagrid("getColumnOption",opts[j]);
	colName.push(col.field);// 把TITLEPUSH到数组里去
}
console.log(colName);

5、快速清空datagrid的方法

$('#grid').datagrid('loadData',{total:0,rows:[]});

6、zTree异步加载，通过浏览器调试观察数据请求

<script type="text/javascript">
var setting = {
		async: {
			enable: true,
			url:'url',
			autoParam:['id', 'level'],
			otherParam:{'otherParam':'${selectedVehicleJson}'},
			dataFilter: filter
		},
		check: {
			enable: true
		},
		data: {
			simpleData: {
				enable: true
			}
		},
};

function filter(treeId, parentNode, childNodes) {
	if (!childNodes) return null;
	for (var i=0, l=childNodes.length; i<l; i++) {
		childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
	}
	return childNodes;
}

$(document).ready(function(){
	$.fn.zTree.init($("#treeDemo"), setting);
});

7、mybatis批量插入，参数：List<实体>，返回成功的条数

<insert id="batchSave" useGeneratedKeys="true" parameterType="java.util.List">
		<selectKey resultType="long" keyProperty="主键id" order="AFTER">
			SELECT
			LAST_INSERT_ID()
		</selectKey>
		 	insert into 表 (列名1,列名2,...)
		 	values
		<foreach collection="list" item="item" index="index" separator="," >
			(#{item.列名1}, #{item.列名2}, ...})
		</foreach>
 </insert>

8、序列化form表单，返回json数据，后台使用实体进行接收

form2Json : function(formId) {
		var arr = $('#' + formId).serializeArray();
		var jsonStr = "";
		jsonStr += '{';
		for (var i = 0; i < arr.length; i++) {
			var jName =arr[i].name.replace(/\"/g,"'").replace(/\\/g,"\\\\");
			var jValue = arr[i].value.replace(/\"/g,"'").replace(/\\/g,"\\\\");
			jsonStr += '"' + jName.replace(/[\r\n]/g, "") + '":"' + jValue.replace(/[\r\n]/g, "") + '",';
		}
		jsonStr = jsonStr.substring(0, (jsonStr.length - 1));
		jsonStr += '}';
		var json = JSON.parse(jsonStr);
		
		return json;
	}

9、安全的字符串拼接concat

var i = '1';
var j = 2;
var k = '中文';
var ijk = ''.concat(i,j,k); 而非 i+j+k

10、数组清空

注意：

①：list.length = 0 删除数组里的所有内容，也将影响到其他引用。

②：list = [] 将一个新的数组的引用赋值给变量，其他引用并不受影响。这意味着以前数组的内容被引用的话将依旧存在于内存中，这将导致内存泄漏。

function empty(list) {
    list.length = 0;
}

例子：
var list = [1,2,3,4];
empty(list);
console.log(list);

11、为了性能，牺牲代码可读性的快速取整

//更快速的取整 双~~
console.log(~~47.11);
console.log(~~-12.88);
//更美观的取整
console.log(Math.floor(47.11));
console.log(Math.floor(-12.88));

12、实现contains功能，JavaScript中没有提供contains功能，但是有indexOf这个函数

var someText = 'javascript rules';
if (someText.indexOf('javascript') !== -1) {
}
// or
if (someText.indexOf('javascript') >= 0) {
}

如果想直接返回true 或者 false ，则需要使用~位运算符

var someText = 'javascript rules';
if (~someText.indexOf('javascript')) {
      console.log(true);
}
// or
if (!~someText.indexOf('abcd')) {
      console.log(false);
}

13、快速测试代码块的性能或者运行时间，console.time(label) ---> console.timeEnd(label)

console.time("Array initialize");
var arr = new Array(100),
    len = arr.length,
    i;

for (i = 0; i < len; i++) {
    arr[i] = new Object();
};
console.timeEnd("Array initialize"); // Array initialize: 0.711ms

14、快速取出数组中的最大或最小值

var numbers = [1, 2, 3, 4];
Math.max.apply(null, numbers) // 4
Math.min.apply(null, numbers) // 1

15、合并多维数组

var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
var newArray = [].concat.apply([], myArray);
console.log(newArray);