JS笔记

不覆盖事件处理器

  var h1aOL = window.onload;
  window.onload = function() {
    if (h1aOL) h1aOL();
    h1Setup();
  }

用递归代替循环实现事件冒泡

this.onPress = function(e){
	var parent = e.currentTarget ||  document.activeElement; // the el you added Listener
	var button = e.target || e.srcElement;
	if (button.tagName == 'BUTTON' || button.tagName == 'LI'){
		reset(parent);

		button.addCls('y_pressed');
		self.onItemClick && self.onItemClick(button, getIndex(parent, button));
		return false;
	}else if(button.parentNode){    // 按下非按钮
        arguments.callee({          // 打不开事件冒泡，这里利用递归模拟一下
             currentTarget : parent,
             target : button.parentNode
        });
    }
}

循环的：

	exports.init = function(el){
		el.onClk(function(e){
			// 搜索 el 下的 li 元素，到容器为止
			var el = e.target, container = e.currentTarget;
			while(el.tagName == 'LI'){
				// do sth
				el = el.parentNode;
				if(container == el)break;
			}
		});
	} 

var el = document.querySelector('.step_1 form');
el.onClk(function (e){
	var el = e.target;
	var registeredEl = e.currentTarget;
	// console.log('0:' + el.tagName);
	// i=0;
	while(el){
		// console.log((i++) +':'+el.tagName);
		if(el.tagName == 'LABEL'){
			for(var _btn, i = 0, j = registeredEl.children.length; i < j; i++){
				_btn = registeredEl.children[i];
				if(el == _btn){
					if(_btn.className.indexOf('pressed') != -1){
						// press again
					}else{
						_btn.addCls('pressed');
					}
				}else{
					_btn.removeCls('pressed');
				}
			}
			break;
			return;
		}
		el = el.parentNode;
	}
});

获取 url 参数：

var getUrlParam = function(){
  var args = null;
  return function(name){
    if(args === null){
      if(location.search == "") return "";
      var queryArray = location.search.substring(1).split("&");
      var i;
      args = {};
      for(i = 0;i < queryArray.length;i++){
        var match = queryArray[i].match(/([^=]+)=([^=]+)/);
        if(match !== null){
          args[match[1]] = match[2];
        }
      }
    }
    return args[name] == undefined ? "" : args[name];
  };
}();

如何获取原生滚动条的宽度？

/**
 * 计算浏览器滚动条实际的物理宽度。该值根据OS的不同有所变化，例如主题、字体大小的影响。Utility method for getting the width of the browser scrollbar. This can differ depending on
 * operating system settings, such as the theme or font size.
 * @param {Boolean} force （可选的）True表示为计算一次实际的值。(optional) true to force a recalculation of the value.
 * @return {Number} 滚动体的宽度。The width of the scrollbar.
 */
function getScrollBarWidth(force){
    if(!Ext.isReady){
        return 0;
    }
    
    if(force === true || scrollWidth === null){
        // 供测试用的div，临时的，用完删除掉。Append our div, do our calculation and then remove it
        var div = Ext.getBody().createChild('<div class="x-hide-offsets" style="width:100px;height:50px;overflow:hidden;"><div style="height:200px;"></div></div>'),
            child = div.child('div', true);
        var w1 = child.offsetWidth;
        div.setStyle('overflow', (Ext.isWebKit || Ext.isGecko) ? 'auto' : 'scroll');
        var w2 = child.offsetWidth;
        div.remove();
        // 补上2才够位置。Need to add 2 to ensure we leave enough space
        scrollWidth = w1 - w2 + 2;
        l(scrollWidth)
    }
    
    return scrollWidth;
}

Fallback

对于有风险的方案，需要 Fallback 方案支持。有了 Fallback 的思想，也可以尝试和使用一些非常新的技术。比如 Google CDN 上的 jQuery 库，国内可能访问不了，但是对于国外用户来说它却非常好用，如下 Fallback 的例子。又比如 Websocket 只有比较新的浏览器才能支持，也可以这样有选择性的支持。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>