html5向下兼容的意思,HTML5 Polyfill 向下兼容

开门见山，要点如下：

向 H5 标准靠拢，不搞自己的 API/DSL，浏览器不兼容的就作 Polyfill 处理。这就考验 Polyfill 的能力了。

原生实现，不依赖三方库

表单数据 FormData

直接发 FormData 会以 FormData 形式 POST，感觉不是太适合

/**

* 表单序列化，兼容旧浏览器和 H5 FormData，返回 JSON

* @param {Element} form

* @param {Object} cfg

*/

ajaxjs.xhr.serializeForm = function(form, cfg) {

var json = {};

if (window.FormData && FormData.prototype.forEach) { // 奇葩魅族浏览器，有 FormData 却只有 append 一个方法

var formData = new FormData(form);

formData.forEach(function(value, name) {

if(cfg && cfg.ignoreField != name) // 忽略的字段

json[name] = encodeURIComponent(value);

});

} else {

for (var i = 0, len = form.elements.length; i < len; i++) {

var formElement = form.elements[i], name = formElement.name, value = formElement.value;

if (formElement.name === '' || formElement.disabled || (cfg && cfg.ignoreField != name))

continue;

switch (formElement.nodeName.toLowerCase()) {

case 'input':

switch (formElement.type) {

case 'text':

case 'hidden':

case 'password':

json[name] = encodeURIComponent(value);

break;

case 'checkbox':

case 'radio':

if (formElement.checked)

json[name] = encodeURIComponent(value);

break;

}

break;

case 'textarea':

case 'select':

json[name] = encodeURIComponent(value);

break;

}

}

}

return json;

}

URL 参数 URLSearchParams

URL 搜索字符串

未有标准之前，自己是这样弄的，

/*

* --------------------------------------------------------

* 获取浏览器 url 参数

* --------------------------------------------------------

*/

ajaxjs.params = {

/**

*

*/

json2url : function(json, appendUrl) {

var params = [];

for ( var i in json)

params.push(i + '=' + json[i]);

params = params.join('&');

if (appendUrl) // 如果有 ? 则追加，否则加入 ?

params = ~appendUrl.indexOf('?') ? appendUrl + '&' + params

: appendUrl + '?' + params;

return params;

},

/**

* 读取 search 和 hash 的参数 location.params().hash['appinstall'];

* location.params().search['isappinstalled'];

*/

get : function(search, hash) {

search = search || window.location.search;

hash = hash || window.location.hash;

var fn = function(str, reg) {

if (str) {

var data = {};

str.replace(reg, function($0, $1, $2, $3) {

data[$1] = $3;

});

return data;

}

};

return {

search : fn(search, new RegExp("([^?=&]+)(=([^&]*))?", "g")) || {},

hash : fn(hash, new RegExp("([^#=&]+)(=([^&]*))?", "g")) || {}

};

}

};