Js的一些使用技巧【持续更新】

原生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)
  }