1. Implicit creation of html tags
<input type="hidden" name="tc_id" value="{{tc_id}}">
This method is generally used with ajax, and the above value uses a template Engine
2.window['data']
window["name"] = "the window object";
3. Use localStorage, cookie, etc. to store
window.localStorage.setItem("name", "xiaoyueyue");
window.localStorage.getItem("name");
Features: cookie, localStorage, sessionStorage, indexDB
| Features | cookie | localStorage | sessionStorage | indexDB |
|---|---|---|---|---|
| Data life cycle | Generally generated by the server, the expiration time can be set | It will always exist unless it is cleared | Clear when the page is closed | Always exists unless cleared |
| Data storage size | 4K | 5M | 5M | Unlimited |
| Communicate with the server | It will be carried in the header every time, and it will affect the request performance | Does not participate | Do not participate | Do not participate |
As you can see from the above table, cookie is no longer recommended for storage. If there are no large data storage requirements, you can use localStorage and sessionStorage. For data that does not change much, try to use localStorage to store it, otherwise you can use sessionStorage to store it.
Note: To storeobjecttype data, this deep copy method will ignore functions andundefined
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. Get address bar method
- My own encapsulated method
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. Regular expression method
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. Tag binding function parameter passing
<!--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 extension
Use this to pass parameters. I figured it out while using art-template. It is no longer necessary to pass only one id and splice it into several parameters! 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,friend
function alertInfo(data) {
alert(
"大家好,我是" +
data.name +
", 我今年" +
data.age +
"岁了，我的好朋友是" +
data.friend +
" !"
);
}
One thing to note here: the stored data—words containing uppercase => will be uniformly converted to lowercase, for example: data-orderId = “2a34fb64a13211e8a0f00050568b2fdd”, when the actual value is this .dataset.orderid;
event
Since this can be used, the event.target method is also available in the event:
Get the current index value according to the class. The parameter can be the event object
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-* Custom attribute
<button data-name="xiaoyueyue">点击</button>
var btn = document.querySelector("button");
btn.onclick = function() {
alert(this.dataset.name);
};
7. String parameter passing
Single parameter
var name = "xiaoyueyue",
age = 25;
var box = document.createElement("p");
box.innerHTML = "<button onclick=\"alertInfo('" + name + "')\">点击</button>";
document.body.appendChild(box);
// name, age
function alertInfo(name, age, home, friend) {
alert("我是" + name);
}
Multi-parameter passing
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("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 + "岁了！")
Complex parameter passing
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
argumentsThe object is all (non-arrow) Local variables available in functions. You can reference a function's parameters within a function using the arguments object. It is an array-like object.
[Recommended learning: javascript advanced tutorial]
<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
With the help of form form, ajax transfers the sequence Parameterization
// 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("&");
}Chestnut:
<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. Publish and subscribe to handle complex logic parameter transfer
Supports first subscribe and then publish, and first publish and then subscribe
- Method source code
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
};
})();
Example used in WeChat applet:
- global mount use
// app.js
App({
onLaunch: function(e) {
// 注册 storage，这是第二条
wx.Storage = Storage;
// 注册发布订阅模式
wx.yue = Event;
}
});
- Usage example
// 添加收货地址页面订阅
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);
// 补充跳转返回
Note: Pay attention to uninstalling the data after using it, and operate when the page is closed