原生JS post方式进行页面跳转时间格式化扩展 json 获取json串的key数组使用方括号取值和使用点号取值的区别 jquery 闭包对象申明方式序列化form为json对象使用ajax的方式进行文件上传为JS动态生成的元素添加事件 小程序JS封装 wxrequest函数添加附加参数

原生JS

---

post方式进行页面跳转

/** * post方式进行页面跳转 * 使用方法： * var params = {activityId:activityId}; * $$.Post("#business/hdyq/enrolls",params); * @param URL 目标地址 * @param PARAMTERS 需要传入的参数 * 方法来源：http://www.cnblogs.com/sweetXiaoma/p/5906965.html */ Post: function (URL, PARAMTERS) { //创建form表单 var temp_form = document.createElement("form"); temp_form.action = URL; //如需打开新窗口，form的target属性要设置为'_blank' temp_form.target = "_self"; temp_form.method = "post"; temp_form.style.display = "none"; //添加参数 for (var item in PARAMTERS) { var opt = document.createElement("textarea"); opt.name = item; opt.value = PARAMTERS[item]; temp_form.appendChild(opt); } document.body.appendChild(temp_form); //提交数据 temp_form.submit(); }

时间格式化扩展

/** * 使用方法： * var date = new Date() * console.log(date.format("yyyy-MM-dd hh:mm:ss.S")) * 输出结果为：2017-03-29 15：50：21.235 */ Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); } } return format; }

json

---

获取json串的key数组

var jsonStr = {houseId: "12", valuationMethod: "25", negotiatedPrice: "152", valuationUnitPrice: "12", discount: "1"}; var keys = []; //循环遍历json串，进行获取key for(var jkey in jsonStr){ keys.push(jkey); }

使用方括号取值和使用点号取值的区别

从取值模型上来看，‘[]’取值方式是以数组模型进行取值，而‘.’取值则是以对象模型进行取值。在js中有一个特点：**关联数组就是对象，对象就是关联数组**。这也导致了在大多数情况下这两种取值方式没有什么区别，也就是说在大多数情况下两种取值方式都可以相互的替用。 然而在某些情况下还是不可替换的，使用对象取值模型也就意味着你已经知道了该json中所有的key值，然后可以在'.'号后面直接写出需要获取的值的key，这种情况下使用数组取值模型也是可以实现，只需要在[]中书写key值即可；在不明确json对象中key值时，或者需要动态的根据key（该值也不明确）值获取对应值的时候，使用对象模型取值就收到限制了，因为对象模型不允许将key设置为变量，所以这个时候只能使用数组模型获取，因为数组模型取值的索引值可以为变量，让使用者动态的输入。可以从下面状态机的代码中更清楚的认识到这个问题。 //在status时已知的情况下，数组模型和对象模型都可以实现，然而在key非常多的情况下，就可以看出数组模型的优势了，代码量少，而且效率时高于对象模型的switch的 var status = {1:'激活',2:'锁定',3:'状态3',4:'状态4',5:'状态5'}; //使用数组模型取值实现状态机 function getStatus(key){ if(key in status){ return status[key]; }else{ return undefined; } } //使用对象模型实现状态机 function getStatus(key){ if(key in status){ //使用switch的方式进行取值 }else { return undefined; } } //但是在状态不明确，需要动态生成的情况下，switch也是无能为力的，这个时候就只能使用数组模型了，代码与上边数组模型一样

jquery

---

闭包对象申明方式

/** * 闭包创建一个javascript对象，并将该对象注册到window中以供全局使用 */ $(function(w, $){ //创建的对象 var myObject = { variable1:'', method1:function(){ } }; //讲对象注册到window对象中 w.myObject = myObject; }(window, $));

序列化form为json对象

/** * @param formId 需要序列化的form的Id值 * @param valExcepts 一个数组，该数组中的值为：在进行序列化是原则上是需要所有的表单都必填，如果需要排除对该表单的输入进行验证，则将该表单的name值放入该数组中 */ serializeToJson: function (formId, valExcepts) { var vars = $("#" + formId).serializeArray(); var rtnJson = {}; if (valExcepts == undefined) { valExcepts = []; } if(vars.length == 0){ rtnJson = undefined; } for (var i = 0; i < vars.length; i++) { var key = vars[i].name; var value = vars[i].value; if (!valExcepts.includes(key) && ( value == undefined || value == '' )) { //此处使用到的a对象为一个提示信息弹出控件，对功能不影响 a.alertMessage($("[name=" + key + "]").parent().find("p").html() + "不能为空"); rtnJson = undefined; break; } else { if (rtnJson[key] !== undefined) { if (!rtnJson[key].push) { rtnJson [key] = [key]; } rtnJson[key].push(value || ''); } else { rtnJson[key] = value || ''; } } } return rtnJson; }

使用ajax的方式进行文件上传

该方法上传文件需要使用到jquery.form.js插件

uploadFile:function(formId){ $("#"+formId).ajaxSubmit({ type: "post", url: "/sales/sales/uploadAttach", success: function (data) { if (data) { salesUtil.loadAttachs(); } else { a.alertMessage("系统错误，请联系管理人员！"); } } }); }

为JS动态生成的元素添加事件

要为JS动态生成（append, innerHTML and so on …）的元素添加事件有两种方式，一种事在代码生成后为其单独绑定事件，及在append之类的方法之后使用$(selector).click(func)之类的方法；还有一种就是我要记录的$(document.body).on(type, selector, func)来预先绑定事件，这种绑定方式是监听的当前网页所有元素，而第一种是绑定事件时刻的页面的指定元素。

/** * 方法1：$(selector).click(func) */ var insertElementHtml = '<a href="#" class="testElement"></a>'; $(document.body).append(insertElementHtml); //必须先将相同元素的同类型事件解绑，否则事件会叠加，重复调用 $('.testElement').unbind('click'); //顺序必须在append之后，否则append的元素上无事件 $('.testElement').click(function(){alert("我就是一个测试按钮")}); /* * 方法2：$(document.body).on(type, selector, func) */ //放置于任意位置都可 $(document.body).on('click', '.testElement', function(){alert("我就是一个测试按钮")); var insertElementHtml = '<a href="#" class="testElement"></a>'; $(document.body).append(insertElementHtml);

小程序JS封装

---

wx.request函数添加附加参数

当前实现方法是在app.js中心书写一个request函数，参数与wx.request函数一致。在新的request函数中写入附加参数：

request: function (parms) { // 获取请求中的header信息 let data = {} if (parms['header']) { data = parms['header'] } //向header中附加参数 if(this.globalData.buildingId){ data['BuildingId'] = this.globalData.buildingId }else{ throw new Error("app.globalData.buildingId is not defined") } //向header中写入用户个人信息 if (parms['auth']) { if(!this.globalData.userInfo){ this.getUserInfo(function(data){ data['UserInfo'] = data }) }else{ data['UserInfo'] = this.globalData.userInfo } } //重置当前请求的header parms['header'] = data //执行请求 wx.request(parms) }