<li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    首页»JavaScript»JS传参技巧总结

    JS传参技巧总结

    来源:xiaoyueyue 发布时间:2018-08-14 阅读次数:

    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")

    特点:

    1、localStorage 是持久存储,不主动删除 一直存在 sessionStorage 是临时存储,关闭浏览器数据就没了

    2、localStorage 可以多窗口共享 sessionStorage 不能多窗口共享数据

    4.获取地址栏方法

    自己封装的方法

    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;
    
    }

    正则表达式方法

    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中琢磨出来?#27169;?#20877;也不用只传递一个id拼接成好几个参数了!happy!

    var box = document.createElement("div");
    box.innerHTML = "<button id='1' data-name='xiaoyueyue' data-age='25' data-friend='heizi' onclick='alertInfo(this)'>点击</button>";
    document.body.appendChild(box);
    
    // name,age,friend
    function alertInfo(val) {
      console.log(val);
      alert('大家好,我是' + val.dataset.name + ', 我今年' + val.dataset.age + '岁了,?#19994;?#22909;朋友是' + val.dataset.friend + ' !')
    
    }

    event

    既然可以使用this,那么在?#24405;?#24403;中event.target方法也是可以?#27169;?/p>

    根据 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';
    
    var params = "&quot;" + name + "&quot;,&quot;" + age + "&quot;,&quot;" + home + "&quot;,&quot;" + friend + "&quot;";
    var box = document.createElement("div");
    box.innerHTML = "<button onclick='alertInfo(" + params + ")'>点击</button>";
    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");
    
    for (var i = 0; i < data.length; i++) {
      box.innerHTML = "<button id='btn'  onclick='alertInfo(id,\"" + data[i].name + "\",\"" + data[i].age + "\",\"" + data[i].home + "\",\"" + data[i].friend + "\")'>点击</button>";
    }
    
    document.body.appendChild(box);
    
    function alertInfo(id, name, age, home, friend) {
      alert("我是" + name + "," + friend + "是?#19994;?#22909;朋友")
    }

    8.arguments

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

    <button onclick="fenpei('f233c7a290ae11e8a0f00050568b2fdd','100','0号 车用柴油(Ⅴ)')">分配</button>
    function fenpei() {
        var args = Array.prototype.slice.call(arguments);
        alert("我是" + args[2] + "?#25512;罰?#25968;量为 " + args[1] + " 吨, id为 " + args[0])
    
    }
    QQ群:WEB开发者官方群(515171538),验证消息:10000
    微信群:?#26377;?#32534;微信 849023636 邀请您加入,验证消息:10000
    提示:更多精彩内容关注微信公众号:全栈开发者中?#27169;╢sder-com)
    网友评论(共0条评论) 正在载入评论......
    理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
    登录会员中心
    大乐透彩票预测
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>