国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS傳參技巧總結

wangshijun / 3453人閱讀

1.隱式創建 html 標簽
這種方法一般配合 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.獲取地址欄方法

自己封裝的方法

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.標簽綁定函數傳參




this 拓展

使用 this 傳參,在使用 art-template 中琢磨出來的,再也不用只傳遞一個 id 拼接成好幾個參數了!happy!

var box = document.createElement("div");
box.innerHTML =
  "";
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-* 自定義屬性
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 = "";
document.body.appendChild(box);

// name, age
function alertInfo(name, age, home, friend) {
  alert("我是" + name);
}
多參傳遞
  var name = "xiaoyueyue",
      age = "25",
      home = "shanxi",
      friend = "heizi",
      DQ = """; // 雙引號的超文本標記語言

    var params = """ + name + "","" + age + "","" + home + "","" + friend + """;
    var params2 = DQ + name + DQ + "," + DQ + age + DQ + "," + DQ + home + DQ + "," + DQ + friend + DQ;
    var box = document.createElement("div");
    box.innerHTML = "";
    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 +=
    "";
}
box.innerHTML = html;
document.body.appendChild(box);

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

arguments對象是所有(非箭頭)函數中都可用的局部變量。你可以使用 arguments 對象在函數中引用函數的參數。它是一個類數組的對象。

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("&");
}

栗子:

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.js
App({
  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 參數傳遞的深入理解

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108147.html

相關文章

  • JavaScript 函數式編程技巧 - 反柯里化

    摘要:作為函數式編程語言,帶來了很多語言上的有趣特性,比如柯里化和反柯里化。而反柯里化,從字面講,意義和用法跟函數柯里化相比正好相反,擴大適用范圍,創建一個應用范圍更廣的函數。作為函數式編程語言,JS帶來了很多語言上的有趣特性,比如柯里化和反柯里化。 可以對照另外一篇介紹 JS 柯里化 的文章一起看~ 1. 簡介 柯里化,是固定部分參數,返回一個接受剩余參數的函數,也稱為部分計算函數,目的是為了縮...

    zhjx922 評論0 收藏0
  • 7個javascript實用小技巧

    摘要:每種編程語言都有一些黑魔法或者說小技巧,也不例外,大部分是借助或者瀏覽器新特性實現。下面介紹的個實用小技巧,相信其中有些你一定用過。當然不管語言如何變化,我們總能在編程中總結一些小技巧來精簡代碼。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每種編程語言都有一些黑魔法或者說小技巧,JS也不例外,大部分是借...

    tinysun1234 評論0 收藏0
  • JavaScript如何工作:V8引擎深入探究 + 優化代碼的5個技巧(譯文)

    摘要:引擎可以是一個標準的解釋器,也可以是一個將編譯成某種形式的字節碼的即時編譯器。和其他引擎最主要的差別在于,不會生成任何字節碼或是中間代碼。不使用中間字節碼的表示方式,就沒有必要用解釋器了。 原文地址:https://blog.sessionstack.com... showImg(https://segmentfault.com/img/bVVwZ8?w=395&h=395); 數周之...

    William_Sang 評論0 收藏0
  • JavaScript 實戰開發經驗!函數多參數傳參技巧

    摘要:學堂碼匠掌握代碼的你,一定編寫封裝過函數,為了提升函數的控制性,必不可少的就是參數,必選可選的一大堆參數羅列出來,函數調用貌似變得麻煩起來必選參數指的是必須要傳入實參的參數可選參數在函數中有默認值,如有傳入實參,則取實參的值,如果沒有傳入 HTML5學堂-碼匠:掌握JavaScript代碼的你,一定編寫封裝過函數,為了提升函數的控制性,必不可少的就是參數,必選可選的一大堆參數羅列出來,...

    wing324 評論0 收藏0

發表評論

0條評論

wangshijun

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<