HTML5 Polyfill 向下兼容

ゝ一世哀愁。 2022-05-18 10:05 196阅读 0赞

开门见山，要点如下：

*  向 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