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

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

查看所有标签

猜你喜欢:

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

刷屏

刷屏

[美] 凯文•阿洛卡 / 侯奕茜、何语涵 / 中信出版社 / 2018-10-1 / 68.00

1. YouTube流行趋势经理,解密如何打造爆款视频 在视频时代,制造互动,才能创造潮流 用户不再是被动的观众,而是主动的传播者 2. 《刷屏》以行内人视角解读: 病毒视频 粉丝经济 网红产业 平台如何为内容创作者赋能 3. 你是否常常被病毒视频刷屏?你是否觉得很多网红火爆到“无法用常理解释”? 视频时代已经到来,我们每天观看网络......一起来看看 《刷屏》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具