JS传参技巧总结

Posted 10manongit

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS传参技巧总结相关的知识,希望对你有一定的参考价值。

1.隐式创建 html 标签

<input type="hidden" name="tc_id" value="{{tc_id}}">
这种方法一般配合ajax,上面的value使用了模板引擎

2.window[‘data‘]

window[‘name‘] = "the window object";

3.使用localStorage,cookie等存储

window.localStorage.setItem("name", "xiaoyueyue");
window.localStorage.getItem("name")
特点:cookie,localStorage,sessionStorage,indexDB
特性 cookie localStorage sessionStorage indexDB
数据生命周期 一般由服务器生成,可以设置过期时间 除非被清理,否则一直存在 页面关闭就清理 除非被清理,否则一直存在
数据存储大小 4K 5M 5M 无限
与服务端通信 每次都会携带在 header 中,对于请求性能影响 不参与 不参与 不参与

从上表可以看到,cookie 已经不建议用于存储。如果没有大量数据存储需求的话,可以使用 localStoragesessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储,否则可以用 sessionStorage 存储。

注意点:存储object类型数据,此深拷贝方法会忽略掉函数和 undefined
  var obj = {
    type: undefined,
    text: ‘xiaoyueyue‘,
    methord: function () {
      alert("I am an methord")
    }
  }

  localStorage.setItem(‘data‘, JSON.stringify(obj));
  console.log(JSON.parse(localStorage.getItem(‘data‘))); // {text: "xiaoyueyue"}

4.获取地址栏方法

  1. 自己封装的方法
function parseParam(url) {
  var paramArr = decodeURI(url).split("?")[1].split("&"),
    obj = {};
  for (var i = 0; i < paramArr.length; i++) {
    var item = paramArr[i];
    if (item.indexOf("=") != -1) {
      var tmp = item.split("=");
      obj[tmp[0]] = tmp[1];
    } else {
      obj[item] = true;
    }
  }
  return obj;

}

2.正则表达式方法

function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

5.标签绑定函数传参

<!--base-->
 <button id="test1" onclick="alert(id)">test1</button>
 
<!--高级-->
<button id="test" name="123" yue="xiaoyueyue" friend="heizi" onclick="console.log(this.getAttribute(‘yue‘),this.getAttribute(‘friend‘))">test</button>
 

this拓展

使用this传参,在使用art-template中琢磨出来的,再也不用只传递一个id拼接成好几个参数了!happy!

    var box = document.createElement("div");
    box.innerHTML =
      "<button id=‘1‘ data-name=‘xiaoyueyue‘ data-age=‘25‘ data-friend=‘heizi‘ onclick=‘alertInfo(this.dataset)‘>点击</button>";
    document.body.appendChild(box);

    // name,age,friend
    function alertInfo(data) {
      alert(‘大家好,我是‘ + data.name + ‘, 我今年‘ + data.age + ‘岁了,我的好朋友是‘ + data.friend + ‘ !‘)
    }
这里需要注意一点:存储的data—含有大写的单词 =》这里会统一转化为小写,比如:data-orderId = “2a34fb64a13211e8a0f00050568b2fdd”,在实际取值的时候为this.dataset.orderid;

event

既然可以使用this,那么在事件当中event.target方法也是可以的:

根据 class 获取当前的索引值,参数可以为 event对象
  var getIndexByClass =  function (param) {
    var element = param.classname ? param : param.target;
    var className = element.classname;
    var domArr = Array.prototype.slice.call(document.querySelectorAll(‘.‘ + className));
    for (var index = 0; index < domArr.length; index++) {
      if (domArr[index] === element) {
        return index;
      }
    }
    return -1;
  },

6.HTML5 data-* 自定义属性

<button data-name="xiaoyueyue">点击</button>
 var btn = document.querySelector("button")
    btn.onclick = function () {
      alert(this.dataset.name)
    }

7.字符串传参

单个参数

var name = ‘xiaoyueyue‘,
  age = 25;

var box = document.createElement("div");
box.innerHTML = ‘<button onclick="alertInfo(‘‘ + name + ‘‘)">点击</button>‘;
document.body.appendChild(box);


// name, age
function alertInfo(name, age, home, friend) {
  alert("我是" + name)
}

多参传递

  var name = ‘xiaoyueyue‘,
      age = ‘25‘,
      home = ‘shanxi‘,
      friend = ‘heizi‘,
      DQ = "&quot;"; // 双引号的超文本标记语言

    var params = "&quot;" + name + "&quot;,&quot;" + age + "&quot;,&quot;" + home + "&quot;,&quot;" + friend + "&quot;";
    var params2 = DQ + name + DQ + ‘,‘ + DQ + age + DQ + ‘,‘ + DQ + home + DQ + ‘,‘ + DQ + friend + DQ;
    var box = document.createElement("div");
    box.innerHTML = "<button onclick=‘alertInfo(" + params + ")‘>点击</button>";
    console.log(box)
    document.body.appendChild(box);


    // name, age,home,friend
    function alertInfo(name, age, home, friend) {
      alert("我是" + name + ‘,‘ + "我今年" + age + "岁了!")

复杂传参

  var data = [
      {
        "name": "xiaoyueyue",
        "age": "25",
        "home": "shanxi",
        "friend": "heizi"
      }

    ]

    var box = document.createElement("div"),html =‘‘;

    for (var i = 0; i < data.length; i++) {
     html += "<button id=‘btn‘  onclick=‘alertInfo(id,"" + data[i].name + "","" + data[i].age + "","" + data[i].home + "","" + data[i].friend + "")‘>点击</button>";
    }
    box.innerHTML = html;
    document.body.appendChild(box);

    function alertInfo(id, name, age, home, friend) {
      alert("我是 " + name + " , " + friend + " 是我的好朋友")
    }

8.arguments

arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。它是一个类数组的对象。

<button onclick="fenpei(‘f233c7a290ae11e8a0f00050568b2fdd‘,‘100‘,‘0号 车用柴油(Ⅴ)‘)">分配</button>
function fenpei() {
    var args = Array.prototype.slice.call(arguments);
    alert("我是" + args[2] + "油品,数量为 " + args[1] + " 吨, id为 " + args[0])

}

9.form表单

借助form表单,ajax传递序列化参数

// form表单序列化,摘自JS高程
function serialize(form) {
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;

    for (i = 0, len = form.elements.length; i < len; i++) {
        field = form.elements[i];

        switch (field.type) {
            case "select-one":
            case "select-multiple":

                if (field.name.length) {
                    for (j = 0, optLen = field.options.length; j < optLen; j++) {
                        option = field.options[j];
                        if (option.selected) {
                            optValue = "";
                            if (option.hasAttribute) {
                                optValue = (option.hasAttribute("value") ? option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ? option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                        }
                    }
                }
                break;

            case undefined: //fieldset
            case "file": //file input
            case "submit": //submit button
            case "reset": //reset button
            case "button": //custom button
                break;

            case "radio": //radio button
            case "checkbox": //checkbox
                if (!field.checked) {
                    break;
                }
                /* falls through */

            default:
                //don‘t include form fields without names
                if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
        }
    }
    return parts.join("&");
}

栗子:

 <form id="formData">
        <div class="pop-info">
            <label for="ordersaleCode">订单编号:</label>
            <input type="text" id="ordersaleCode" name="ordersaleCode" placeholder="请输入订单编号" />
        </div>
        <div class="pop-info">
            <label for="extractType">配送方式:</label>
            <select id="extractType" name="extractType" class="mySelect">
                <option value="0" selected>配送</option>
                <option value="1">自提</option>
            </select>

        </div>
    </form>
    <button>获取参数</button>
 document.querySelector("button").onclick = function () {
        console.log(‘param: ‘+serialize(document.getElementById("formData"))); // param: ordersaleCode=&extractType=0
    }

拓展阅读

以上是关于JS传参技巧总结的主要内容,如果未能解决你的问题,请参考以下文章

记录--九个超级好用的 Javascript 技巧

你可能不知道的JavaScript代码片段和技巧(下)

你可能不知道的JavaScript代码片段和技巧(上)

回归 | js实用代码片段的封装与总结(持续更新中...)

js技巧总结

AJAX相关JS代码片段和部分浏览器模型