首页前端开发JavaScriptjavascript怎么传参数

javascript怎么传参数

时间2024-01-29 22:40:03发布访客分类JavaScript浏览699
导读：收集整理的这篇文章主要介绍了javascript怎么传参数，觉得挺不错的，现在分享给大家，也给大家做个参考。javascript传参数的方法：首先创建一个相应的js文件；然后通过“function alertInfo(name, age,...
收集整理的这篇文章主要介绍了javascript怎么传参数，觉得挺不错的，现在分享给大家，也给大家做个参考。

javascript传参数的方法：首先创建一个相应的js文件；然后通过“function alertInfo(name, age, home, friend) { ...} ”实现传参即可。

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript怎么传参数？

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@H_406_34@特性
cookielocalStoragesessionStorageindexDB
数据生命周期一般由服务器生成，可以设置过期时间除非被清理，否则一直存在页面关闭就清理除非被清理，否则一直存在
数据存储大小4K5M5M无限
与服务端通信每次都会携带在 header 中，对于请求性能影响不参与不参与不参与

从上表可以看到，cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 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("p");
    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,friendfunction 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("p");
    box.innerHTML = "button onclick=\"alertInfo('" + name + "')\">
    点击/button>
    ";
    document.body.appendChild(box);
// name, agefunction 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("p");
        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("p"),  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 对象在函数中引用函数的参数。它是一个类数组的对象。

【推荐学习：javascript高级教程】

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">
      p class="pop-info">
        label for="ordersaleCode">
    订单编号：/label>
        input      type="text"      id="ordersaleCode"      name="ordersaleCode"      placeholder="请输入订单编号"    />
      /p>
      p class="pop-info">
        label for="extractType">
    配送方式：/label>
        select id="extractType" name="extractType" class="mySelect">
          option value="0" selected>
    配送/option>
          option value="1">
    自提/option>
        /select>
      /p>
    /form>
    button>
    获取参数/button>
    
document.querySelector("button").onclick = function() {
      console.log("param: " + serialize(document.getElementById("formData")));
     // param: ordersaleCode=&
extractType=0}
    ;

10. 发布订阅处理复杂逻辑传参

支持先订阅后发布，以及先发布后订阅
  • 方法源码
var Event = (function() {
  var clientList = {
}
    ,    pub,    sub,    remove;
  var cached = {
}
    ;
  sub = function(key, fn) {
    if (!clientList[key]) {
          clientList[key] = [];
    }
        // 使用缓存执行的订阅不用多次调用执行    cached[key + "time"] == undefined ? clientList[key].push(fn) : "";
        if (cached[key] instanceof Array &
    &
     cached[key].length >
 0) {
          //说明有缓存的 可以执行      fn.apply(null, cached[key]);
          cached[key + "time"] = 1;
    }
  }
    ;
  pub = function() {
        var key = Array.prototype.shift.call(arguments),      fns = clientList[key];
    if (!fns || fns.length === 0) {
          //初始默认缓存      cached[key] = Array.prototype.slice.call(arguments, 0);
          return false;
    }
        for (var i = 0, fn;
     (fn = fns[i++]);
 ) {
          // 再次发布更新缓存中的 data 参数      cached[key + "time"] != undefined        ? (cached[key] = Array.prototype.slice.call(arguments, 0))        : "";
          fn.apply(this, arguments);
    }
  }
    ;
  remove = function(key, fn) {
        var fns = clientList[key];
        // 缓存订阅一并删除    var cacheDFn = cached[key];
        if (!fns &
    &
 !cachedFn) {
          return false;
    }
    if (!fn) {
          fns &
    &
     (fns.length = 0);
          cachedFn &
    &
     (cachedFn.length = 0);
    }
 else {
      if (cachedFn) {
            for (var m = cachedFn.length - 1;
     m >
    = 0;
 m--) {
              var _fn_temp = cachedFn[m];
          if (_fn_temp === fn) {
                cachedFn.splice(m, 1);
          }
        }
      }
          for (var n = fns.length - 1;
     n >
    = 0;
 n--) {
            var _fn = fns[n];
        if (_fn === fn) {
              fns.splice(n, 1);
        }
      }
    }
  }
    ;
  return {
    pub: pub,    sub: sub,    remove: remove  }
    ;
}
    )();

在微信小程序中使用的例子:

  • 全局挂载使用
// app.jsApp({
  onLaunch: function(e) {
        // 注册 storage，这是第二条    wx.Storage = Storage;
        // 注册发布订阅模式    wx.yue = Event;
  }
}
    );
  • 使用实例
// 添加收货地址页面订阅 onLoad: function (options) {
        wx.yue.sub("addAddress", function (data) {
            y.setData({
                addAddress: data            }
)        }
) }
/** * 生命周期函数--监听页面隐藏 */ onHide: function () {
        // 取消多余的事件订阅    wx.Storage.removeItem("addAddress");
}
, onUnload: function () {
        // 取消多余的事件订阅    wx.yue.remove("addAddress");
}
    
// 传递地址页面获取好数据传递wx.yue.pub("addAddress", data.info);
    // 补充跳转返回
注意:使用完成数据后要注意卸载，在页面被关闭时操作

以上就是javascript怎么传参数的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

上一篇: javascript怎么设置全选下一篇:JavaScript怎么实现鼠标追随猜你在找的JavaScript相关文章 html font标签如何设置字体大小？html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处： javascript怎么传参数
本文地址： https://pptw.com/jishu/591692.html
javascript怎么设置全选 深入了解Angular中的PIPE（管道）

游客 回复需填写必要信息
↑