HTML5 Polyfill 向下兼容

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

内容简介:开门见山,要点如下:直接发 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")) || {}
        };
    }
};

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

查看所有标签

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

An Introduction to the Analysis of Algorithms

An Introduction to the Analysis of Algorithms

Robert Sedgewick、Philippe Flajolet / Addison-Wesley Professional / 1995-12-10 / CAD 67.99

This book is a thorough overview of the primary techniques and models used in the mathematical analysis of algorithms. The first half of the book draws upon classical mathematical material from discre......一起来看看 《An Introduction to the Analysis of Algorithms》 这本书的介绍吧!

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具