javascript/JQuery – 第 2 页

js 操作缓存变量【原创辣鸡代码】

    /***
* Cache缓存管理
* @param type[string] eq-赋值/add-字符串增加/push-数组增加/extend-对象合并]
*/
function c( name, val ,type){
  //默认操作
  var type = type || "eq";
  //创造缓存空间
  if(typeof CACHE != "object"){CACHE={};}

  //指针定向到缓存
  var result = CACHE;

  //点语法，最终找到相关位置的父级
  if(name.match(/\./g)){
    var arr= name.split(".");
    arr.map(function(ele,ind){
      if(ind == arr.length -1 ){name = ele;return;}
      result = result[ele];
    })
    //找不到数据未定义
    if(!result){return false;}
  }

  //理解请求的操作
  var val_type = typeof val;
  var name_type = typeof name;
  //--理解为读取指定缓存 的逻辑
  if(val_type == "undefined"){return result[name];}
  //--理解为读取整个缓存 的逻辑
  if(name_type == "undefined"){return result;}

  //--下面是 对缓存进行操作的逻辑
  //-- -- 定义操作函数
  //-- -- --赋值
  function eq(){
    result[name] = val;
    return result[name];
  }
  //-- -- --字符串增加
  function add(){
    result[name] = (result[name])? result[name] + val : val;
    return result[name];
  }
  //-- -- --数组增加
  function push(){
    result[name].push( val );
    return result[name];
  }
  //-- -- --对象合并
  function extend(){
    if(typeof result[name] == "obj"){
      $.extend(result[name], val);
    }else{
      eq();
    }
    return result[name];
  }

  //-- -- 执行相关操作
  try{
    var run = `result= ${type}();`;
    eval(run);
  }catch(e){
    console.log(e);
    console.log(run);
    //操作失败返回错误
    result = false;
  }

  return result;
}

原生js平滑滚动【我写的很菜】

    /**
* 平滑滚动
* @param target[document.Element] 滚动目标
* @param lengthTo[number] 滚动到达
* @param type[string] 滚动x/y轴
* @param callback[function] 滚动后回调
*/
function roll(target,lengthTo,type,callback){
  var type = type || "x";
  var dd = target,
      dnow = (type == "x") ? dd.scrollLeft : dd.scrollTop;
      dmin = 0,
      dmax = (type == "x") ? dd.scrollWidth : dd.scrollHeight,
      dto = (lengthTo > dmin) ? ( ( lengthTo < dmax ) ? lengthTo : dmax ): dmin,
      step = 20,
      distance = Math.abs (dto - dnow),
      count = 1 ,
      direction = (dto > dnow)? 1 : -1 ;
       (function() {
         var timePre = count / step;
         var dnow = (type == "x") ? dd.scrollLeft : dd.scrollTop;
         var speed = Math.floor( distance / step ) ;
         // speed = Tween.Quad.easeIn(1,0, speed * 1.5  , 0.5 + 0.1 * count); //需要有缓动函数支持
         var move = dnow + direction * speed ;

// console.log(distance,speed , move);

         if(timePre > 1 || Math.abs(move - dto ) <= Math.abs(speed)){
           (type == "x") ? target.scrollLeft = dto :  target.scrollTop = dto;
                     if(typeof callback =="function"){
                         callback();
                     }
           return ;
         }
         (type == "x") ? target.scrollLeft = move : target.scrollTop = move;

         count++;
         setTimeout(arguments.callee, 40);
       })();
}

缓动函数计算公式

    /**
* 缓动计算公式
*/
var Tween = {
    Linear: function(t, b, c, d) {
        return c * t / d + b;
    },
    Quad: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * (t /= d) * (t - 2) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return - c / 2 * ((--t) * (t - 2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return - c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOut: function(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t, b, c, d) {
            return - c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOut: function(t, b, c, d) {
            return - c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t, b, c, d) {
            return (t == 0) ? b: c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOut: function(t, b, c, d) {
            return (t == d) ? b + c: c * ( - Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOut: function(t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * ( - Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t, b, c, d) {
            return - c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOut: function(t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOut: function(t, b, c, d) {
            if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return - (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
        },
        easeInOut: function(t, b, c, d, a, p) {
            if (t == 0) return b;
            if ((t /= d / 2) == 2) return b + c;
            if (!p) p = d * (.3 * 1.5);
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else var s = p / (2 * Math.PI) * Math.asin(c / a);
            if (t < 1) return - .5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        }
    },
    Back: {
        easeIn: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOut: function(t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t, b, c, d) {
            return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
        },
        easeOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOut: function(t, b, c, d) {
            if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    }
}

函数自调用 arguments.callee

    (function() {
      lengthNow -= step;
      if (lengthNow > -step) {
          lengthNow.scrollTop = lengthNow;
          setTimeout(arguments.callee, 20);
      }
  })();

box-sizing 导致的宽高问题原理

来源：http://www.cnblogs.com/huangyin1213/p/6245109.html

css3的Sizing

Box-sizing是css3的box属性之一，遵循css的boxmodel原理，css中box model是分为两种，第一种是w3c的标准模型，另一种是ie的传统模型，他们相同之处都是对元素极端的模型，具体说就是对元素的width，height,padding,border以及元素实际尺寸的计算关系。

w3c的标准box model

外盒尺寸计算(元素控件尺寸)

Element空间高度 = content height +padding+border+margin

Element空间宽度 = content width +padding+border+margin

内盒尺寸计算(元素大小)

Element Height = content Height+padding+border（height为内容的高度）

Element Width = content Width +padding+border(width为内容的宽度)

ie传统下Box Model(ie6一下，不包括ie6版本)

外盒尺寸计算（元素空间尺寸）

Element空间的高度 = content heigth +margin（height包含了元素内容宽度，边框宽度，内距宽度）

Element空间的宽度 = content Width +margin(Width包含了元素内容宽度，边框宽度，内距宽度)

内盒尺寸计算(元素大小)

Element height = content height (height包含了的元素内容高度，边框高度，内距高度)

Element Width = content width(width包含了元素内容宽度，边框宽度，内距宽度)

box-sizing属性定义盒元素尺寸的计算方法：

content-box:默认值，计算方法为width/height = content，表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内

padding-box:计算方法为width/height = content+padding，表示指定的宽度和高度包含内边距和北荣区域，边框宽度不包含在内

border-box:计算方法为width/height = content+padding+border，表示指定的w/h包含边框，内边距和内容区域。

inherit：表示继承父元素中box-sizing属性的值

正常情况下offsetWidth,offsetHeight获取元素的尺寸是足够了，但是某些元素比如SVG，MathML返回尺寸出错(这里不考虑),css3增加了一个box-sizing选择盒子模型，于是jquery里面就引入了augmentWidthOrHeight这个方法来处理因为box-sizing设置导致的问题，augmentWidthOrHeight这个方法其实就是对盒子模型的一个处理，所以jquery获取一个元素的w/h都是，ele.offsetW/H+augmentHeight方法也可以。

lodash 插件小用延迟抛送数据

    //lodash 是一个优化过的js工具，虽然我还没看懂。
    //如果你想要了解更多，请看中文文档：http://lodashjs.com/docs/#_debouncefunc-wait0-options
    
    /**
    *@param: func (Function): The function to debounce.
    *@param: [wait=0] (number): The number of milliseconds to delay.
    */
    _.debounce(function(){},500);

jquery.datetimepicker 只依赖jq

demohttp://down.admin5.com/demo/code_pop/18/1202/

ch那里改成

    ch:{ // Simplified Chinese
                months: [
                    "一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"
                ],
                dayOfWeek: [
                    "周日","周一", "周二","周三","周四","周五","周六"
                ]
            },

调用

    //插件
        $(".date").datetimepicker({
            step:5,
            lang:'ch',
            timepicker:false,
            format:'Y-m-d 00:00:00',
            formatDate:'Y-m-d 00:00:00',
     });

百度地图初使用

百度地图api 1.2
类库列表：[http://lbsyun.baidu.com/index.php?title=open/library]
GeoUtils地图几何类文件-参考[http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html]
引用<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=密钥"></script>
密钥来源：http://lbsyun.baidu.com/apiconsole/key

百度地图api 2.0
引用<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
密钥来源：http://lbsyun.baidu.com/apiconsole/key

模板字符串过滤 SaferHTML

    function SaferHTML(templateData) {  
  var s = templateData[0];  
  for (var i = 1; i < arguments.length; i++) {  
    var arg = String(arguments[i]);  
  
    // Escape special characters in the substitution.  
    s += arg.replace(/&/g, "&")  
            .replace(//g, ">");  
  
    // Don't escape special characters in the template.  
    s += templateData[i];  
  }  
  return s;  
}

createDOMFromString 用字符串创建dom对象

function createDOMFromString (str){
    var objConstain= document.createElement("div");
    objConstain.innerHTML=str;
    return objConstain;
}