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

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

查看所有标签

猜你喜欢:

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

PHP项目开发全程实录

PHP项目开发全程实录

清华大学出版社 / 2008 / 56.00元

《软件项目开发全程实录丛书•PHP项目开发全程实录:DVD17小时语音视频讲解(附光盘1张)》主要特色: (1)12-32小时全程语音同步视频讲解,目前市场上唯一的“全程语音视频教学”的案例类 图书,培训数千元容,尽在一盘中! (2)10套“应用系统”并公开全部“源代码”,誓将案例学习进行到底! (3)丛书总计80个应用系统300个应用模块。 (4)含5000页SQL se......一起来看看 《PHP项目开发全程实录》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

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

HEX HSV 互换工具