前端javascript知识（二）

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

（1） navigator.userAgent
（2） 不同浏览器的特性，如addEventListener

简单，Number，Boolean，String，Null，Undefined
复合，Object，Array，Function

var myvalue=”abcdefghi”;
var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);
alert(jiequ);

alert(typeof(null)); // object
alert(typeof(undefined)); // undefined
alert(typeof(NaN)); // number
alert(NaN==undefined); // false
alert(NaN==NaN); // false
var str="123abc";
alert(typeof(str++)); // number
alert(str);// NaN

var x = 1, y = z = 0;
function add(n) {
  n = n+1;
}
y = add(x);
function add(n) {
  n = n + 3;
}
z = add(x);
1、undefined、undefined

//阻止冒泡的方法
function stopPP(e)
{
  var    evt = e|| window.event;
  //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
  evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true);
}

for(var i=0, j=0; i<10, j<6; i++, j++){
  k = i + j;
}
10

/*假设：一个英文字符占用一个字节，一个中文字符占用两个字节*/
function getBytes(str){
  var len = str.length,
      bytes = len,
      i = 0;
  for(; i<len; i++){
      if (str.charCodeAt(i) > 255) bytes++;
  }
  return bytes;
}
alert(getBytes("玩,as"));

function cloneObject(o) {
  if(!o || ‘object‘ !== typeof o) {
      return o;
  }
  var c = ‘function‘ === typeof o.pop ? [] : {};
  var p, v;
  for(p in o) {
      if(o.hasOwnProperty(p)) {
          v = o[p];
          if(v && ‘object‘ === typeof v) {
              c[p] = Ext.ux.clone(v);
          }
          else {
              c[p] = v;
          }
      }
  }
  return c;
};

\n alert(“p\np”);

function parseQueryString(url){
  var params = {},
      arr = url.split("?");
  if (arr.length <= 1)
      return params;
  arr = arr[1].split("&");
  for(var i=0, l=arr.length; i<l; i++){
      var a = arr[i].split("=");
      params[a[0]] = a[1];
  }
  return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",
  ps = parseQueryString(url);
console.log(ps["key1"]);

启用GZIP压缩
保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

function say() {
 // Local variable that ends up within closure
 var num = 888;
 var sayAlert = function() { alert(num); }
 num++;
 return sayAlert;
}
var sayAlert = say();
sayAlert();//889

function proto(object) {
  return !object?                null
      : ‘__proto__‘ in object?  object.__proto__
      : /* not exposed? */      object.constructor.prototype
}

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(fn){
      for ( var i = 0; i < this.length; i++ ) {
          fn( this[i], i, this );
      }
  };
}
["a", "b", "c"].forEach(function(value, index, array){
  assert( value, "Is in position " + index + " out of " + (array.length - 1) );
});

Object.prototype.slice.call(arguments);

var ninja = function myNinja(){
  alert(ninja == myNinja);
};
ninja();
myNinja();
true、报错（error - myNinja is not defined.）

function getX(e){
  e = e || window.event;
  //先检查非IE浏览器，在检查IE的位置
  return e.pageX || e.clentX + document.body.scrollLeft;
}

function getStyle(elem, name){
  if(elem.style[name]){//如果属性存在于style[]中，直接取
      return elem.style[name];
}
else if(elem.currentStyle){//否则 尝试IE的方法
      return elem.currentStyle[name];
}//尝试W3C的方式
else if(document.defaultView && document.defaultView.getComputedStyle){ 
      name = name.replace(/([A-Z])/g, "-$1");//W3C中为textAlign样式，转为text-align
      name = name.toLowerCase();
      var s = document.defaultView.getComputedStyle(elem, "");
      return s && s.getPropertyValue(name);
  }else{
      return null;
  }
}

function print_r(theObj) {
  var retStr = ‘‘;
   if(typeof theObj == ‘object‘) {
        retStr += ‘<div style="font-family:Tahoma; font-size:7pt;">‘;
        for(var p in theObj) {
              if (typeof theObj[p] == ‘object‘) {
                    retStr += ‘<div><b>[‘+p+‘] => ‘ + typeof(theObj) + ‘</b></div>‘;
                    retStr += ‘<div style="padding-left:25px;">‘ +  print_r(theObj[p]) + ‘</div>‘;
              } else {
                    retStr += ‘<div>[‘+p+‘] => <b>‘ + theObj[p] +  ‘</b></div>‘;
              }  
         }
        retStr += ‘</div>‘;
    }
    return  retStr;
}

var b = parseInt("01");
alert("b="+b);
var c = parseInt("09/08/2009");
alert("c="+c);
b=1、c=0。

var foo = ‘hello‘;
(function() {
     var foo= foo || ‘world‘;
     console.log(foo);
})();
world

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就行

减少http请求次数：cssspirit,data uri
JS，CSS源码压缩
前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
用setTimeout来避免页面失去响应
用hash-table来优化查找
当需要设置的样式很多时设置className而不是直接操作style
少用全局变量
缓存DOM节点查找的结果
避免使用CSS Expression
图片预载
避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

异步加载方式：
defer，只支持IE
async：
创建script，插入到DOM中，加载完毕后callBack，见代码：
function loadScript(url, callback){
    var script = document.createElement("script")
    script.type = "text/javascript";
    if(script.readyState){ //IE
        script.onreadystatechange = function(){
             if (script.readyState == "loaded" ||script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
             }
       };
   } else {
//Others: Firefox, Safari, Chrome, and Opera
       script.onload = function(){
          callback();
       };
  }
  script.src = url;
  document.body.appendChild(script);
}