HTML5 Polyfill 向下兼容

栏目: Html5 · 发布时间: 6年前

内容简介:开门见山,要点如下:直接发 FormData 会以 FormData 形式 POST,感觉不是太适合

开门见山,要点如下:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Fluent Python

Fluent Python

Luciano Ramalho / O'Reilly Media / 2015-8-20 / USD 39.99

Learn how to write idiomatic, effective Python code by leveraging its best features. Python's simplicity quickly lets you become productive with it, but this often means you aren’t using everything th......一起来看看 《Fluent Python》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码