Javascript经验总结

1.javascript加载影响网页速度，解决办法（1）文件放入body结尾，(2) 使用defer……

2.对于禁用了javascript的浏览器可以使用标签，当浏览器可以使用javascript，这个标签中的内容将不会在页面显示。

3.条件操作：num=(nu1>nu2)?nu1:nu2;

4.With 语句作用为将代码的作用域设置到 一个特定的对像中。参考P52;使用此语句可能会使代码的性能下降。

5.在ECMAScript 中switch 中可能使用任何数据类型，但是在其它语言中并不支持这种方法。

6.Instanceof  用来判断数据类型。

7.数组操作：

1)  Value.reverse() 将数组反排序

2)  Value.sort();

3)  Concat(): 将数组组合并返回值，不影响原来的数组

    Var color=[‘red’];

   var colors=color.concat(‘yellow’,[‘black’,’brown’]);

   color=[‘red’];

   colors=[‘red’, ‘yellow’,‘black’,’brown’];
4).  Slice(a,b) 返回数组第[a,b)位，如果 是有a参数 没有b参数就返回从a开始数组的 值。

5)splice():

删除：arr.splice(0,2),删除数组从0开始的2个元素。

插入：arr.splice(2,0,’red’,’green’) 从第2个位置开始插入’red,green’;

替换：arr.splice(1,1,’red’,’purple’)

总的说来总共有三个参数:(a,b,c);a起始位置，b删除个数，c插入的值，其中c可以为空，b可以为0（不删除）;

6)Arr.shift():取出数组Arr的第一个元素并将数组长度减1，

7)  Arr.unshift(a) 在数组前面插入a，并且长度加1;

8)  Arr.Push(a)  将a加入数组arr

9)  Arr.pop()  出栈

8.  小心this的作用范围。

9. Number 数字类型

1)  Num.toFixed(a); 数字num 后面保留a位小数,不足补0。

2)  Num.toExponential(a);返回以指数表示法。

3)  Num.toPrecision(a);

10. string

1)  String.charAt(a)输出字符串第a个位置上的字符

2)  String.charCodeAt(a) 输出字符串string第处字符的编码。（一般是ASSII编码）

3)  concat() 将字符串拼接起来。Var string=’hello’,  var result=string.concat(‘world’);

    Alert(string) ;//’hello’                 alert(result);//’hello world’

1) String.IndexOf(str)  在字符口中string中查找子字符串str，并返回字字符出现的位置。如果没有找到就返回-1; lastIndexOf() 功能相反。这两个都 可以接收第二个参数表示 从哪里开始搜索。

2)toLowerCase(),toUpperCase() 转换字符串大小写。使用方法：string.toLowerCase();不会改变原来的值。

1)记住exec() 与match()的区别：string(字符串),pattern(正则式);   pattern.exec(string);  string.match(pattern);

2)search()与macth()差不多

3)replace():一共接收两个参数，第一个参数可以是正则表达示也可以是要被替换的字符，第二个参数可以为要换成的字符串也可以是一个函数。

4)fromCharCode() 接收一个或多个字符编码，然后将它们转换成一个字符串。如：String.fromCharCode(104,101,108,108,111); //返回’hello’

5)URL方法:

 encodeURL(); 

encodeURLComponent();

decodeURL();

decodeURLComponent();

11. Math

1)  Math.ceil() 执行向上舍入

2)  Math.floor() 向下舍入

3)  Math.round() 四舍五入

4)  Math.min()

5)  Math.max()

7)  Math.random() 返回0到1之间的一个随机数

……

12. prototype

此方法的好处是可以让所有实例共享。

a.hasOwnProperty(b) 检测属性a中是否有实例 b;

function Person(){};

Person.prototype={

constructor:Person,

 name:'liu',

 age:29,

 friends:['one','two'],

 sayName:function(){alert(this.name);}

 }

var per1=new Person();

var per2=new Person();

per1.friends.push('three');

per1.friends;// ['one','two',’three’]

per2.friends; // ['one','two',’three’]

 13. 稳妥构造函数模式：没有公共属性，而且方法不也不引用this对象，适合一些安全环境中（这些环境中会禁止使用this和new），防止数据被其它程序改动时使用。

    此方法为：不使用this，不使用new操作符调用构造函数 。

         function Person(){

             var o=new Object();

             o.sayName=function(){

                 alert(name);

             };

    return  o;

}

 

var person=Person(‘a’,20,’student');

person.sayName();

14. 匿名函数的用途：

     1) 递归function f(num)

{

if(num<=1) return 1;

else  return num*f(num-1);//区别

}

                  var a=f;

                  f=null;

                  a(4);//出错

        如果：function f(num)

{

if(num<=1) return 1;

else  return num*arguments.callee(num-1);//区别

}

Var a=f;

f=null;

a(4);//24

      2)  闭包：有权访问另一个函数作用域中的变量函数。

                闭包会占有比其它种类函数更多的内存，所以建议在非必要的情况下不要使用。

      3) 团包与变量：

                  Var f=function(num){

                         return num;

}(4);

                     f;//4

      4) 内存泄漏问题：看下面一个函数

               Function assignHandler(){
                  var element=document.getElementByIdx_x(“someElement”);

                  Element.οnclick=function(){

Alert(element.id);

}

}

           由于匿名函数存在着一个对assignHandler()活动对象的引用，因此会导致无法减少elment的引用数，所以内存永远不会被 回收。

            

              解决办法：

           Function assignHandler(){
                  var element=document.getElementByIdx_x(“someElement”);

                  Var id= element.id;

                  Element.οnclick=function(){

Alert(id);

}

Element=null;

}

14. window 对象

      1)  窗口关系及框架： 

          如果页面包含框架，则每个框架都拥有自己的window对象。P159

      2)  窗口位置：

            由于不同浏览器实现方法不一样所以不同浏览器之间存在着一定的差异。可以使用：

var left=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX,

 top=(typeof window.screenTop=="number")?window.screenTop:window.screenY;

         虽然 可以通过这种方法取得值， 但是不同浏览器在相同位置返回的值却可能不一样，因为有些浏览器可能算上浏览器边框和工具栏的值，但有的不算。

     3) 导航和打开窗口：

         Window.open(加载的url，窗口目标，……)   一共四个参数; 其中目标窗口可以 是_seft,_parent,_top,_blank;

     4) 弹出窗口：

          弹出窗口很多会被用户屏蔽，有两种方法可以屏蔽，浏览器内置屏蔽和其它阻止弹出窗口程序：如果 是浏览器内置屏蔽则window.open()返回null，如果 是第三方软件则可能 出现 一个错误这时要检测是否被屏蔽则可以用错误检测try catch;如：

                    Var blocked=false;

                   Try{

                          Var win=window.open(……);

                          If(win==null){blocked=true;}

                    }catch(e){

                         Blocked=true;

}

If(blocked==true) alert(‘弹出窗口被屏蔽’);

      5) 系统对话框：

         Alert();

         confirm() :会显示两个按钮“ok”，“cancel”,为了接收用户选中的是“ok”还是“cancel”可以接收confirm的返回值 比如 ：

            Var choice=confirm(‘are you sure?’);

         prompt() :  接收用户输入;

5)       location

  它提供与当前窗口中加载文档有关的信息，还提供了一些导航功能。

  Location.hash    URL中的hash(#号后面跟着的0个或多个字符)。

  Location.host   返回服务名称和端口号。

  Location.href   返回当前加载页面的完整URL.    toString()有同样功能。

  Location.hostname   返回服务名称。

  Location.pathname  URL中的目录和文件名。

Location.port   端口号

Location.protocol   返回协议

Location.search   URL的查寻字符。这个字符以问号开头。

 

使用location  进行位置操作。

Location.assign(“http://www.baidu.com”)

Window. location (“http://www.baidu.com”)

Location.href=http://www.baidu.com  //此方法最常用

 

Location.replace(“http://www.baidu.com”)进入后不能返回前一个页面

Location.reload()//重新加载（可能从缓存中加载）

Location.reload(true)//重新加载（从服务器重新加载）

8)  navigator 对象：识别客户端浏览器的实际标准。

9)  可以通过navigator.plugins 来检测浏览器插件 （IE不能用）

10)  screen 对象

11)  history 对象

     保存着用户上网的历史记录。出于安全方面的考虑开发人员不能得知用户访问过的URL，但是可以借此前行后退： 前进：history.go(a); 后退history.go(-a);其中正a表示前进，负a表示后退。

    也可能在go中传递一个字符串，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退。

   也可以使用back() ,forward()代替go();

history.length保存着历史记录的数量

15.客户端检测（第九章）

     1) 能力检测（特性检测）

     2) 怪癖检测

     3) 用户代理检测   使用navigator.userAgent

16. 内容操作

     1) innerText 通过innerText可以操作元素中包含的所有文本内容;

        返回的内容只有文本内容，不包含任何节点。

        如果用此设置节点的内容如果内容里面包含< ,>,& ，将被转码。

        innerText在火狐下不能使用，但是在火狐下有相同功能的 textContent.

        有如下两个兼容函数：

         var div=document.getElementByIdx_x('div')，

           text="hello & welcome,\"reader\"!";

function setInnerText(text){

                if(typeof     div.innerText=="string"){

                  div.innerText= text;      

}else{

                  div.textContent= text;                    

}

          }

         function getInnerText(){

                return (typeof    div.innerText=="string")?div.innerText:div.textContent;

           }

      2) innerHTML

      3) outerText

         在读取信息的时候outerText与innerText结果完全一样，但是在写入信息时，效果完全不一样。

         outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。

         div.outerText=”hello word!”;实际相当于下面的代码

　　　　　　var text=document.createTextNode(”hello word!”);

            div.parentNode.replaceChild(text,div);

     

      4) 总结 使用上述方法替换和改变子节点可能会导致浏览器内存问题，尤其是在IE中。如果被删除的节点元素设置了事件处理或者具有 javascript对象的属性。

                     

17．DOM操作技术

      1) 动态脚本

      2) 动态样式

      3) 操作表格

      4) 使用NodeList

18. 事件

      1) unload 卸载事件   当文档被完全卸载后触发。比如：

        Window.οnunlοad=function(){alert(“你已经离开页面”);};

      2) beforeunload 卸载前事件，可以在用户点击离开时询问用户是否真的想离开。（opera,谷歌等不支持此功能）

      3)

                 

 19. javascript 提高性能

     1) 尽量少使用全局变量，比如代码中多次使用document ，可以用局部变量doc代替document 这样就可以尽量少地全局遍历。

     2) 少使用with

     3) 少使用属性查找

     4) 减化for循环终止条件

     5) 当循环次数已知可以展开循环