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;
             100%;
            overflow: hidden;
            margin-top: 5px;
        }
        .topBorder-move{position:relative;left:0;3000px;border-top: 2px dashed #DADDE1;}
        .bottomBorder-move{position:relative;left:0;4000px;border-bottom: 2px dashed #DADDE1;}
        .leftBorder-move{position:absolute;top:0;1px;height:4000px;border-left: 2px dashed #DADDE1;}
        .rightBorder-move{position:absolute;right:0;top:0;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>