1.隱含建立html 標籤
<input>
這個方法一般配合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 | |
| 無限 | 與服務端通訊 | 每次都會攜帶在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"}
自己封裝的方法
function parseParam(url) {
var paramArr = decodeURI(url)
.split("?")[1]
.split("&"),
obj = {};
for (var i = 0; i
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 傳參，在使用art-template 中琢磨出來的，再也不用只傳遞一個id 拼接成好幾個參數了！ happy！<!--base--> <button>test1</button> <!--高级--> <button> test </button># this 拓展
var box = document.createElement("p");
box.innerHTML =
"<button>点击</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.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
6.HTML5 data-* 自訂屬性
<button>点击</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>点击</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 = """; // 双引号的超文本标记语言
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>点击</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 点击";
}
box.innerHTML = html;
document.body.appendChild(box);
function alertInfo(id, name, age, home, friend) {
alert("我是 " + name + " , " + friend + " 是我的好朋友");
}8.arguments物件是所有（非箭頭）函數中都可用的局部變數。你可以使用 arguments 物件在函數中引用函數的參數。它是一個類別數組的物件。 【推薦學習：javascript高階教學】
<button> 分配 </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 document.querySelector("button").onclick = function() {
console.log("param: " + serialize(document.getElementById("formData"))); // param: ordersaleCode=&extractType=0
};
- #方法原始碼
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;
}
});
