util.js
轻量基础库、方法库
用时可直接拷贝
拆卸式使用
适用于mobile端简单页面
适用于PC简单页面
基于node、php等多种构建方法
(function(M){ /** * 初始化Ajax请求 * @param {object} option 参数 * { * data: {key: val}, //数据JSON * method: 'GET', //GET 或者 POST * url: 'http://qq.com', //cgi地址 * success: function(res){ //成功回调 * } * @兼容性 PC: IE 6+ & Mobile All * @支持 XHR2 跨域 * * @建议分类 HTTP * * @依赖方法 createInstance */ var initRequest = function(option){ console.log("Proxy starts creating Ajax!!"); var httpRequest = createInstance(); var success = option.success; var url = option.url; var method = option.method; var data = option.data; var dataArr = []; for(var i in data){ dataArr.push(i + "=" + data[i]); } if(method == "GET"){ url += "?" + dataArr.join("&"); } if(httpRequest){ httpRequest.onreadystatechange = function(){ if(this.readyState == 4){ console.log("Proxy Ajax loaded!!"); success && success(httpRequest.responseText); } }; httpRequest.open(method, url, false); httpRequest.withCredentials = true; //httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //httpRequest.setRequestHeader("X-Requested-From","_TC_QC_jsProxy_"); httpRequest.send(JSON.stringify(data)); console.log("Proxy created Ajax done!!method: " + method + "; data: " + JSON.stringify(data) + "----already send"); }else{ console.error("Proxy created Ajax Error!!"); } }; /** * 返回一个XHR实例 * @兼容: PC: IE6 + & Mobile All * @参数: 空 * @依赖: 无 */ var createInstance = function(){ var xmlHttp; return new XMLHttpRequest(); try{ // Firefox,Opera 8.0+,Safari xmlHttp = new XMLHttpRequest(); }catch(e){ // Internet Explorer try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ return false; } } } return xmlHttp; }; /** * 通过模板字符串生成HTML * @param {String} tmplStr 模板字符串 * @param {Object} data 模板数据 * * @兼容性: PC: IE 6+ & Mobile All * * @依赖: 无 * * @备注: 模板以<? ?>分隔JS代码如 模板内容中暂时无法使用单引号(双引替代)模板如 * <h2 class="<?=className?>"></h2><? alert("OK"); ?> */ var getTmpl = function(tmplStr, data){ var result; var varHtml = ""; for(var i in data){ varHtml += "var " + i + " = data." + i + ";"; } tmplStr = tmplStr.replace(/\s+/g, " "); tmplStr = varHtml + "var __result = ''; ?>" + tmplStr + "<?"; tmplStr += " return __result;"; tmplStr = tmplStr.replace(/<\?=([^\?]+)\?>/g, "' + $1 + '").replace(/<\?/gi, "';").replace(/\?>/g,"__result += '"); var str = new Function("data", tmplStr); result = str(data); return result; }; /** * 渲染HTML中的模板标签 * @param {String} 模板标签的id * @param {Object} 模板数据 * @param {boolean} 下次渲染是否以追加的方式渲染 默认为非 * * @兼容性 PC: IE 9+ & Mobile All * @依赖 getTmpl * * @备注: 模板如 * <div> * <script type='text/plain' id='list'> * <? for(var i = 0; i < 10; i ++){ * ?> * * <h1><?=i?></h1> * * <? } ?> * </script> * </div> * * 调用如: Util.renderTmpl('list', {});//会在div下直接生成模板HTML输出 */ //保留上次的el地址,便于清除 var lastRenderEls = {}; var renderTmpl = function(id, data, isAppend){ var tmplNode = document.getElementById(id); var tmplString = tmplNode.innerHTML; var result = getTmpl(tmplString, data); if(! lastRenderEls[id]) lastRenderEls[id] = []; if(! isAppend){ //清除上次的渲染 for(var i = 0; i < lastRenderEls[id].length; i ++){ var lastItem = lastRenderEls[id][i]; lastItem.parentNode.removeChild(lastItem); } } lastRenderEls[id] = []; var div = document.createElement("div"); div.innerHTML = result; var divChildren = div.childNodes; while(divChildren.length > 0){ lastRenderEls[id].push(divChildren[0]); tmplNode.parentNode.insertBefore(divChildren[0], tmplNode); } }; /** * 通过代理增加事件 * @param {HTMLNode} proxyNode 要绑定到的代理元素 * @param {String} selector 选择器 仅支持单字符串 支持# . tag选择 如 #a或.a或li等 * @param {String} eventType 事件类型 如click等 * @param {Function} func 处理函数 * * @兼容 PC: IE 6+ & Mobile All * @依赖 无 */ var addEvent = function(proxyNode, selector, eventType, func){//为代理节点添加事件监听 var proName = "",flag = 0; if(typeof(selector) == "string"){ flag = 1; switch(true){ case /^\./.test(selector) : proName = "className"; selector = selector.replace(".", ""); selector = new RegExp(" *" + selector + " *"); break; case /^\#/.test(selector) : proName = "id"; selector = new RegExp(selector.replace("#", "")); break; default: selector = new RegExp(selector); proName = "tagName"; } } var addEvent = window.addEventListener ? "addEventListener" : "attachEvent"; var eventType = window.addEventListener ? eventType : "on" + eventType; proxyNode[addEvent](eventType,function(e){ function check(node){ if(flag){ if(selector.test(node[proName])){ func.call(node, e); return; }; }else{ if(selector == node){ func.call(node, e); return; }; } if(node == proxyNode || node.parentNode == proxyNode) return; check(node.parentNode); } check(e.srcElement); }); }; //读取元素的css属性值 var css = function(el, property){ try{ return el.currentStyle[property] || el.style[property]; }catch(e){ var computedStyle = getComputedStyle(el); return computedStyle.getPropertyValue(property); } }; //执行动画 类似jquery animate var animate = function(el, endCss, time, callBack){ var FPS = 60; var everyStep = {}, currStyle = {}; for(var i in endCss){ var currValue = parseInt(this.css(el, i)); currStyle[i] = currValue; everyStep[i] = parseInt(parseInt(endCss[i]) - currValue) / time; } //当前frame var frame = 0, timer; function step(){ frame ++; //当前时间 ms var t = frame / FPS * 1000; //对时间做缓动变换 //标准化当前时间 var t0 = t / time; //变换函数 var f = function(x, p0, p1, p2, p3){ //二次贝塞尔曲线 //return Math.pow((1 - x), 2) * p0 + (2 * x) * (1 - x) * p1 + x * x * p2; //基于三次贝塞尔曲线 return p0 * Math.pow((1 - x), 3) + 3 * p1 * x * Math.pow((1 - x), 2) + 3 * p2 * x * x * (1 - x) + p3 * Math.pow(x, 3); } //对时间进行三次贝塞尔变换 输出时间 var t1 = f(t0, 0.3, 0.82, 1.0, 1.0) * time; for(var i in everyStep){ if(i == "opacity") el.style[i] = (currStyle[i] + everyStep[i] * t1); else el.style[i] = (currStyle[i] + everyStep[i] * t1) + "px"; } if(frame == time / 1000 * FPS){ clearInterval(timer); callBack && callBack(); } } timer = setInterval(step, 1000 / FPS); return { stop: function(){ clearInterval(timer); } }; }; var getUrlParam = function (n) { var m = window.location.search.match(new RegExp('(\\?|&)' + n + '=([^&]*)(&|$)')); return !m ? '' : decodeURIComponent(m[2]); }; var getParentData = function(node, dataName){ var parentNode = node; while(parentNode){ if(parentNode.dataset[dataName]){ return parentNode.dataset[dataName]; } parentNode = parentNode.parentNode; } }; var util = { request: initRequest, getTmpl: getTmpl, renderTmpl: renderTmpl, addEvent: addEvent, animate: animate, css: css, getUrlParam: getUrlParam, getParentData: getParentData }; window.Util = util; })();
下载地址:https://github.com/dorsywang/util.js
项目中看到的部分util.js:
/** * Created by wanglijuan on 2016/11/11. */ var util = function () { return { on:function (obj, type, handler) { var types = this.isArray(type) ? type : [type], k = types.length, d; if (!obj.addEventListener) { //绑定obj 为this d = function (evt) { evt = evt || window.event; var el = evt.srcElement; return handler.call(el, evt); }; handler._d = d; } if (k) while (k--) { type = types[k]; if (obj.addEventListener) { obj.addEventListener(type, handler, false); } else { obj.attachEvent('on' + type, d); } } obj = null; }, un:function (obj, type, handler) { var types = this.isArray(type) ? type : [type], k = types.length; if (k) while (k--) { type = types[k]; if (obj.removeEventListener) { obj.removeEventListener(type, handler, false); } else { obj.detachEvent('on' + type, handler._d || handler); } } }, isEmpty:function (data) { return data.replace(/[ ]/g, "") != "" ? data : "无"; }, getEvent:function (event) { return event ? event : window.event; }, getTarget:function (event) { return event.target || event.srcElement; }, setInnerText:function (element, text) { if (typeof element.textContent == "string") element.textContent = text; else element.innerText = text; }, $G:function (id) { return document.getElementById(id) }, getFirstNode:function (ele) { return ele.firstChild.nodeType == 1 ? ele.firstChild : ele.firstElementChild; }, getElementsByClassName:function (clsName) { var doc = document; if (!doc.getElementsByClassName) { var clsArr = []; var reg = new RegExp("\\b" + clsName + "\\b"); var eleArr = doc.getElementsByTagName("*"); for (var i = 0, eleobj; eleobj = eleArr[i++];) { if (reg.test(eleobj.className)) clsArr.push(eleobj); } return clsArr; } else { return doc.getElementsByClassName(clsName); } }, getCharCode:function (event) { return event.keyCode || event.which || event.charCode; }, getStyleValue:function(ele,attr){ var doc=document; var style=ele.currentStyle||doc.defaultView.getComputedStyle(ele,null); return parseInt(style[attr].replace(/px/g,"")); }, getBrowerVersion:function(){ var agent = navigator.userAgent.toLowerCase(), opera = window.opera, browser = { ie : !!window.ActiveXObject, webkit : ( agent.indexOf( ' applewebkit/' ) > -1 ), quirks : ( document.compatMode == 'BackCompat' ), opera : ( !!opera && opera.version ) }; if ( browser.ie ){ browser.version = parseFloat( agent.match( /msie (\d+)/ )[1] ); } browser.gecko = ( navigator.product == 'Gecko' && !browser.webkit && !browser.opera ); return browser; }, isArray:function (obj) { return Object.prototype.toString.call(obj) === '[object Array]'; }, request:function (option) { var ajaxRequest = creatAjaxRequest(); if (ajaxRequest == null) { alert("您的浏览器不支持AJAX!"); return; } ajaxRequest.onreadystatechange = function () { if (ajaxRequest.readyState == 4) { if (ajaxRequest.status >= 200 && ajaxRequest.status < 300 || ajaxRequest.status == 304) { option.onSuccess(ajaxRequest.responseText); } } else { if (option.hasLoading) util.$G(option.loading_Id).innerHTML = "<div class='hook_con'><img class='loading_pic' src='images/loading.gif'/></div>"; } }; ajaxRequest.open("post", option.url, true); ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajaxRequest.send(option.param); } }; /** * 创建一个ajaxRequest对象 */ function creatAjaxRequest() { var xmlHttp = null; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } }();
效果在:http://ueditor.baidu.com/website/ 这个网站
完整案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .coop-list { position: relative; width: 100%; overflow: hidden; margin-top: 5px; } .topBorder-move{position:relative;left:0;width:3000px;border-top: 2px dashed #DADDE1;} .bottomBorder-move{position:relative;left:0;width:4000px;border-bottom: 2px dashed #DADDE1;} .leftBorder-move{position:absolute;top:0;width:1px;height:4000px;border-left: 2px dashed #DADDE1;} .rightBorder-move{position:absolute;right:0;top:0;width:1px;height:3000px;border-right: 2px dashed #DADDE1;} </style> </head> <body> <div class="coop-list"> <div class="topBorder-move" id="J_borTop"></div> <div class="leftBorder-move" id="J_borLeft"></div> <div style="height:300px;"></div> <div class="rightBorder-move" id="J_borRight"></div> <div class="bottomBorder-move" id="J_borBottom"></div> </div> </body> </html> <script type="text/javascript" src="util.js"></script> <script type="text/javascript"> /** * 边框旋转 */ function border_move() { var borTop = util.$G("J_borTop"), borBottom = util.$G("J_borBottom"), borLeft = util.$G("J_borLeft"), borRight = util.$G("J_borRight"), left = util.getStyleValue(borTop, 'left'), top = util.getStyleValue(borLeft, 'top'); setInterval(function () { if (left < 0) { left += 2; borRight.style.top = left + "px"; borTop.style.left = left + "px"; } else left = -1500; if (top > -3000) { top -= 2; borBottom.style.left = top + "px"; borLeft.style.top = top + "px"; } else top = -1500; }, 60); } border_move(); </script>
只有在泥泞的道路上才能留下脚印