JS传参技巧总结

110

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
    }

拓展阅读


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

岗伯伯 · 8月14日

可以说很全面了[赞]

回复

248技术 · 8月15日

第5个 this扩展
"<button id='1' data-name='xiaoyueyue' data-age='25' data-friend='heizi' onclick='alertInfo(this.dataset)'>点击</button>";
是不是这么写更好点的 如果单纯的传输数据。

回复

0

是的,好主意,我改

xiaoyueyue 作者 · 8月15日
0

有个问题想请教下大佬的 前后端分离项目的具体部署:我有这么一个理解的,就是一台服务器 两个node项目 一个是Vue 或者其他框架构建的前端项目,另一个是专注的后端接口工程(node OR 其他)。不知道这么理解对不的。刚开始想构建一个前后分离项目的,有点小白的。

248技术 · 8月16日
0

@248技术 我不是大佬,但你这么理解我觉得是没有问题的,不论前端开发采用的是事件驱动或是数据驱动都是这样的

xiaoyueyue 作者 · 8月16日
载入中...