HTML5 Polyfill 向下兼容

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhangxin09/article/details/81356901

开门见山，要点如下：

• 向 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;
}

https://www.cnblogs.com/sunpengwei/p/6906302.html
https://stackoverflow.com/questions/11661187/form-serialize-javascript-no-framework
https://gist.github.com/cwill5587/f5d17eaba1b6f1807bbc

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

MutationObserver

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
https://zhuanlan.zhihu.com/p/29581070
https://segmentfault.com/a/1190000005980048
https://www.cnblogs.com/alantao/p/6928927.html
https://github.com/jerrybendy/url-search-params-polyfill/blob/master/index.js