【基础系列】JS使用技巧专题

JS使用技巧专题


1开发技巧

1.1函数使用

1.1.1函数声明方式

JS函数的写法总结

http://blog.csdn.net/firesnake666/article/details/5855128

js函数的几种写法

http://blog.csdn.net/gufeng672/article/details/9961221

JS中声明函数大体上有三种方法：

1.常规方法

JScript codefunction funcName(var1,var2....){ //add you code here }

2.匿名函数引用法（找不到具体的称呼，暂且先这么叫）

JScript code varfuncName=function(var1,var2...){ //add you code here }

3.构造函数法

JScript code varfuncName=new Function("x","y","alert(x+y);");

3中方法对函数的执行没有区别只是语法上和函数初始化的时候有些区别,通过如下实验

可以看出他们的区别

JScript codealert(fn1); alert(fn2); alert(fn3); function fn1(){ alert("fn1"); }var fn2=function(){ alert("fn2"); } var fn3=new Function("alert('fn3');");fn1(); fn2(); fn3();

可以看到只有fn1被输出了函数体代码，其他两个都是undefined。因为JS的执行分为两个阶段

预处理阶段和执行阶段,预处理阶段会对代码进行扫描分析并初始化变量表。通过第一种方法

声明的函数在预处理阶段就会被初始化,而其他两种只有在执行阶段执行到相应行是才会被初始化.

1.2对象使用

1.2.1定义对象（对象创建）

JavaScript中没有类的概念，只有对象。在JavaScript中定义对象可以采用以下几种方式：

1.基于已有对象扩充其属性和方法

2.工厂方式

3.构造函数方式

4.原型(“prototype”)方式

5.动态原型方式

1.2.1.1 一.基于已有对象扩充其属性和方法

varobject =newObject();

object.name = "zhangsan";

object.sayName =function(name)

{

    this.name = name;

    alert(this.name);

}

object.sayName("lisi");

    这种方式的弊端：这种对象的可复用性不强，如果需要使用多个对象，还需要重新扩展其属性和方法。

1.2.1.2 二.工厂方法方式

functioncreateObject()

{

    varobject =newObject();

    object.username = "zhangsan";

    object.password = "123";

    object.get =function()

    {

        alert(this.username + ", " +this.password);

    }

    return object;

}

varobject1 = createObject();

varobject2 = createObject();

object1.get();

改进一：采用带参数的构造方法：

functioncreateObject(username, password)

{

    varobject =newObject();

    object.username = username;

    object.password = password;

    object.get =function()

    {

        alert(this.username + ", " +this.password);

    }

    return object;

}

var object1 = createObject("zhangsan","123");

object1.get();

改进二：让多个对象共享函数对象

这样，不用每个对象都生成一个函数对象。

functionget()

{

    alert(this.username + ", " +this.password);

}

//函数对象只有一份

functioncreateObject(username, password)

{

    varobject =newObject();

    object.username = username;

    object.password = password;

    object.get =get;//每一个对象的函数对象都指向同一个函数对象

    return object;

}

var object = createObject("zhangsan","123");

var object2 = createObject("lisi","456");

object.get();

object2.get();

优点：让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。

缺点：对象和它的方法定义分开了，可能会造成误解和误用。

1.2.1.3 三.构造函数方式

构造函数的定义方法其实和普通的自定义函数相同。

functionPerson()

{

    //在执行第一行代码前，js引擎会为我们生成一个对象

    this.username = "zhangsan";

    this.password = "123";

    this.getInfo =function()

    {

        alert(this.username + ", " +this.password);

    }

    //此处有一个隐藏的return语句，用于将之前生成的对象返回

    //只有在后面用new的情况下，才会出现注释所述的这两点情况

}

//生成对象

varperson =newPerson();//用了new

person.getInfo();

改进版：加上参数：

functionPerson(username, password)

{

    this.username = username;

    this.password = password;

    this.getInfo =function()

    {

        alert(this.username + ", " +this.password);

    }

}

varperson =newPerson("zhangsan", "123");

person.getInfo();

1.2.1.4 四.原型(“prototype”)方式

例子：

functionPerson()

{

}

Person.prototype.username = "zhangsan";

Person.prototype.password = "123";

Person.prototype.getInfo =function()

{

    alert(this.username + ", " +this.password);

}

varperson =newPerson();

varperson2 =newPerson();

person.username = "lisi";

person.getInfo();

person2.getInfo();

使用原型存在的缺点：

1.不能传参数；

2.有可能会导致程序错误。

如果使用原型方式来定义对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反映到其他对象当中。

单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。

比如，username改为数组后：

functionPerson()

{

}

Person.prototype.username =newArray();

Person.prototype.password = "123";

Person.prototype.getInfo =function()

{

    alert(this.username + ", " +this.password);

}

varperson =newPerson();

varperson2 =newPerson();

person.username.push("zhangsan");

person.username.push("lisi");

person.password = "456";

person.getInfo();//输出：zhangsan,lisi, 456

person2.getInfo();//输出：zhangsan,lisi, 123

//虽然没有对person2对象进行修改，但是它的name和person是一样的，即为zhangsan,lisi

这是因为使用原型方式，person和person2指向的是同一个原型，即对应了同样的属性对象。

对于引用类型(比如数组)，两个对象指向了同一个引用，所以对一个所做的更改会影响另一个。

而对于字符串(字面常量值)，重新赋值之后就指向了另一个引用，所以二者的修改互不影响。

对原型方式的改进：

使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各个对象间共享同一个方法。

//使用原型+构造函数方式来定义对象

functionPerson()

{

    this.username =newArray();

    this.password = "123";

}

Person.prototype.getInfo =function()

{

    alert(this.username + ", " +this.password);

}

varp =newPerson();

varp2 =newPerson();

p.username.push("zhangsan");

p2.username.push("lisi");

p.getInfo();

p2.getInfo();

五.动态原型方式

在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

functionPerson()

{

    this.username = "zhangsan";

    this.password = "123";

    if(typeofPerson.flag== "undefined")

    {

        //此块代码应该只在第一次调用的时候执行

        alert("invoked");

        Person.prototype.getInfo =function()

        {

            //这个方法定义在原型中，会被每一个对象所共同拥有 

            alert(this.username + ", " +this.password);

        }

        Person.flag =true;//第一次定义完之后，之后的对象就不需要再进来这块代码了

    }

}

varp =newPerson();

varp2 =newPerson();

p.getInfo();

p2.getInfo();

1.2.2对象方法定义

var HJSmart = HJSmart || {};

(function(HJSmart) {

    HJSmart.EA= HJSmart.EA || {};

    HJSmart.EA.DeviceStatusData= function() {

        //类成员，私有变量

       var _body =undefined;

        var _devStatusEntity = {

            cmdCode :0x0000,//"命令码"

            workingStage:0x00,//工作阶段

        };

        //类属性，公有属性

        HJSmart.EA.DeviceStatusData.cmdOperateData= {

            cmdID : {},

            cmdCode:{}

        };

        //实例方法，私有方法

        function_updateStatusDataWithMessage(pReceiveMessage){

            var messageType = HJSmart.message.getByte(pReceiveMessage, 9);

            return _updateStatusDataWithMessageBody(pReceiveMessage);

        }

        //类方法，公有方法

        HJSmart.EA.DeviceStatusData.createDeviceStatusDataWithMessageBody=        function(messageBody)

        {

        vardevStatusData = new HJSmart.EA.DeviceStatusData();

        devStatusData.updateStatusDataWithMessageBody(messageBody);

        return devStatusData;

    };

    return {

        //实例方法，公有成员方法 

        getDeviceStatusData: function(){  

            if(_devStatusEntity != null)

                return _devStatusEntity;

            else if(_devStatusEntity == null && _body != null)

                return _updateStatusDataWithMessage(_body);

            else return null;

        }

    };

};

})(HJSmart);

1.2.3类继承的实现方式

functionBaseFunc(){

    //私有成员变量

    var varParivateAttr="Hello Parivate Attr";

    //私有实例方法

    var varParivateFunc=function(){

        alert("varParivateFunc");

    };

    //公有成员

    this.varPublicAttr="Hello Public Param";

    //公有实例方法

    this.varPublicFunc=function(){

        alert("varPublicFunc");

    }

}

function SubFunc(){

    //定义子类扩展实例方法

    this.varPublicSubFunc=function(){

        alert("varPublicSubFunc");

    };

    //模拟继承基类核心代码

    BaseFunc.apply(this,arguments);

}

//类方法(静态方法)声明

SubFunc.staticFunc1=function(){

    alert("SubFunc.staticFunc1");

};

1.2.4命名空间的生成

/**

*生成类

**/

class:function(newClass,parent){

    //静态方法

    newClass.static=function(funcObj){

        cnGame.core.extend(newClass,funcObj);

        return newClass;

    };

    //实例方法

    newClass.methods=function(funcObj){

        cnGame.core.extend(newClass.prototype,funcObj);

        return newClass;

    };

    //类继承

    if(this.core.isFunction(parent)){

        var func=function() {};

        func.prototype= parent.prototype;

        newClass.prototype=newfunc();

        newClass.prototype.constructor= newClass;

        newClass.parent= parent;

    }

    return newClass;

},

/**

*生成命名空间,并执行相应操作

**/

register:function(nameSpace, func) {

    var nsArr= nameSpace.split(".");

    var parent= win;

    for(vari=0,len=nsArr.length;i< len; i++) {

      if((typeof  parent[nsArr[i]] =='undefined') && (parent[nsArr[i]] = {}))

        parent=parent[nsArr[i]];

    }

    if(func) {

        func.call(parent,this);

    }

    return parent;

},

1.3jQuery绑定事件

1.3.1通过#查询指定id的控件来绑定事件

示例js代码

//显示细节控制面板

$('#js_detailedSettingLip').on('click', function(){

    uiFactory.showDetailedSetting();

});

$('#js_comfirmSettingBtn').on('click', function(){

    uiFactory.closeDetailedSetting();

    uiFactory.settingLip($('#js_settingRiceSize').find('option:selected').text(),

    $('#js_settingRiceSolidity').find('option:selected').text());

});

1.3.2通过.查询指定样式的一类控件数组来绑定事件

示例js代码

$('.js_settingSelect').on('change', function(){

    var textVal =$(this).find('option:selected').text();

    $(this).parents('.js_settingItem').find('.js_SettingValue').text(textVal);

    uiFactory.settingLip($('#js_settingRiceSize').find('option:selected').text(),$('#js_settingRiceSolidity').find('option:selected').text());

});

1.3.3通过事件名绑定

$(document).bind("recieveMessage",{},_receiveReportMessageFunction);

1.4事件触发

1.4.1trigger触发

1.4.1.1js原生触发

自定义事件到激发这个事件，需要document.createEvent()，event.initEvent()，element.dispatchEvent()这三部，分别是创建事件对象，初始化事件对象，触发事件。先给个简单的例子。

function foo1(){

    console.log("foo1is execute");

}

functionfoo2(){

    console.log("foo2is execute");

}

varev=document.createEvent('HTMLEvents');

ev.initEvent('fakeEvent',false,false);

document.addEventListener("fakeEvent",foo1,false);

document.addEventListener("fakeEvent",foo2,false);

document.dispatchEvent(ev)

event is the created Eventobject.

type is a string that representsthe type of event to be created. Possible event types include “UIEvents”,“MouseEvents”, “MutationEvents”, and “HTMLEvents”. See Notes section fordetails.

javascript自定义事件(event)

http://blog.allenm.me/2010/02/javascript自定义事件event/

1.4.1.2jQuery触发

$(document).bind('recieveReportMessageData', {},function(event, cookInfoEntity) {

    initPageUi(cookInfoEntity);

});

$.event.trigger("recieveReportMessageData",devData.getCookInfoEntity());

1.5Window对象使用

1.5.1JS跳转页面

第一种：

window.location.href="login.jsp?backurl="+window.location.href;

第二种：

alert("返回");

window.history.back(-1);

第三种：

window.navigate("top.jsp");

第四种：

self.location=’top.htm’;

第五种：

alert("非法访问！");

top.location=’xx.jsp’;

1.5.2页面回退函数

history.back(-1):直接返回当前页的上一页，数据全部消息，是个新页面

history.go(-1):也是返回当前页的上一页，不过表单里的数据全部还在

history.back(0)刷新history.back(1)前进history.back(-1)后退

window.location.reload();//刷新

window.history.go(1);//前进

window.history.go(-1);//返回

window.history.forward();//前进

window.history.back();//返回

1.6onbeforeunload事件

用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

http://www.jb51.net/article/30640.htm

2api

2.1Date对象

js获取当前日期时间及其它操作汇总

varmyDate =newDate();

myDate.getYear();//获取当前年份(2位)

myDate.getFullYear();//获取完整的年份(4位,1970-????)

myDate.getMonth();//获取当前月份(0-11,0代表1月)

myDate.getDate();//获取当前日(1-31)

myDate.getDay();//获取当前星期X(0-6,0代表星期天)

myDate.getTime();//获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours();//获取当前小时数(0-23)

myDate.getMinutes();//获取当前分钟数(0-59)

myDate.getSeconds();//获取当前秒数(0-59)

myDate.getMilliseconds();//获取当前毫秒数(0-999)

myDate.toLocaleDateString();//获取当前日期

varmytime=myDate.toLocaleTimeString();   //获取当前时间

myDate.toLocaleString( );//获取日期与时间


日期时间脚本库方法列表

Date.prototype.isLeapYear判断闰年

Date.prototype.Format日期格式化

Date.prototype.DateAdd日期计算

Date.prototype.DateDiff比较日期差

Date.prototype.toString日期转字符串

Date.prototype.toArray日期分割为数组

Date.prototype.DatePart取日期的部分信息

Date.prototype.MaxDayOfDate取日期所在月的最大天数

Date.prototype.WeekNumOfYear判断日期所在年的第几周

StringToDate字符串转日期型

IsValidDate验证日期有效性

CheckDateTime完整日期时间检查

daysBetween日期天数差

2.2对象类型转换

2.2.1JSON对象与字符串转换

一、JSON字符串转换为JSON对象

要运用上面的str1，必须运用下面的要领先转化为JSON对象：

//由JSON字符串转换为JSON对象

var obj =eval_r('(' + str 1+ ')');

或者

var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

或者

var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

然后，就可以这样读取：

Alert(obj.name);

Alert(obj.sex);

特别留心：如果obj本来就是一个JSON对象，那么运用eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用parseJSON（）函数处理后会有疑问（抛出语法异常）。

二、可以运用toJSONString()或者全局要领JSON.stringify()将JSON对象转化为JSON字符串。

例如：

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

或者

var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

alert(last);

留心：

上面的多个要领中，除了eval_r()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的JSON修改了API，将JSON.stringify()和JSON.parse()两个要领都注入到了Javascript的内建对象里面，前者变成了Object.toJSONString()，而后者变成了String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低

JS解析Json方法

http://blog.sina.com.cn/s/blog_49d274100101dl1e.html

Json字符串转换为JS对象的高效方法实例

http://www.jb51.net/article/36261.htm

JS对象与JSON格式数据相互转换

http://www.jb51.net/article/29729.htm

JS操作JSON总结

http://www.cnblogs.com/worfdream/articles/1956449.html

js怎么解析json格式字符串

http://blog.csdn.net/love__coder/article/details/6617539

2.2.2字符串与数字相互转换

js字符串转换成数字，数字转换成字符串

http://blog.sina.com.cn/s/blog_5fe072b00100deb6.html

2.2.2.1js字符串转换成数字

将字符串转换成数字，得用到parseInt函数。JS中基本类型数据只有整型，浮点型，字符型和布尔型。

将字符串转化成整型，只能用parseInt(str)把字符串解析成整数,默认按照十进制,但若是0开头则按八进制，若是0x开头则按十六进制；或者parseInt(str,radix)按指定进制,把字符串解析成整数,即把str当成radix进制翻译成十进制parseInt(string)：函数从string的开始解析，返回一个整数。

举例：parseInt('123') :返回123（int）；

parseInt('1234xxx') :返回1234（int）；

如果解析不到数字，则将返回一个NaN的值，可以用isNaN()函数来检测；

举例：

var i = parseInt('abc');

if (isNaN(i))

{

    alert('NaN value');

}

同样的parseFloat函数是将字符串转换成浮点数。

举例：parseFloat('31.24abc') :返回31.24；

2.2.2.2js数字转换成字符串

将字符串转换成数字，得用到String类的toString方法

举例：

var i = 10;

var s = i.toString();

alert(typeof s);

//将输出String

2.2.2.3js数字与字符串的区别

js的数字的加法与字符串的连接都是+符号，所以究竟是加还是字符串的连接就取决与变量的类型。

举例：

var a = 'abc' + 'xyz';

//a的值为：abcxyz,字符串与字符串是连接

var a = 10 + 5;           //a的值为：15，数字是加

var a = 'abc' + 10;       //a的值为：abc10，字符串与数字，自动将10转换成字符串了

var a = 'abc' + 10 + 20 + 'cd';

//a的值为:abc1020cd

var a = 10 + 20 + 'abc' + 'cd';

//a的值为:30abccd，可以数字加的先数字加，然后再连接

如果从html页面元素得到的值，想按数字加，就需要先转换为数字，因为从页面得到的值默认是字符串。

2.2.3字符串转布尔类型

javascript字符串数字相互转换，布尔类型转换

http://blog.163.com/www_jiangtao/blog/static/2491527320114332720780/

2.强制类型转换

还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。

ECMAScript中可用的3种强制类型转换如下：

Boolean(value)——把给定的值转换成Boolean型；

Number(value)——把给定的值转换成数字（可以是整数或浮点数）；

String(value)——把给定的值转换成字符串。

用这三个函数之一转换值，将创建一个新值，存放由原始值直接转换成的值。这会造成意想不到的后果。

当要转换的值是至少有一个字符的字符串、非0数字或对象（下一节将讨论这一点）时，Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null，它将返回false。

可以用下面的代码段测试Boolean型的强制类型转换。

Boolean("");//false–emptystring

Boolean("hi");//true–non-emptystring

Boolean(100);//true–non-zeronumber

Boolean(null);//false-null

Boolean(0);//false-zero

Boolean(newObject());//true–object

Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。

还记 得吗，parseInt()和parseFloat()方法只转换第一个无效字符之前的字符串，因此"4.5.6 "将被转换为"4.5 "。

用Number()进行强制类型转换，"4.5.6"将返回NaN，因为整个字符串值不能转换成数字。

如果字符串值能被完整地转换，Number()将判断是调用parseInt()方法还是调用parseFloat()方法。

下表说明了对不同的值调用Number()方法会发生的情况：

Number(false)0

Number(true)1

Number(undefined)NaN

Number(null)0

Number("5.5")5.5

Number("56")56

Number("5.6.7")NaN

Number(newObject())NaN

Number(100)100

最后一种强制类型转换方法String()是最简单的，因为它可把任何值转换成字符串。

要执行这种强制类型转换，只需要调用作为参数传递进来的值的toString()方法，即把1转换成"1 "，把true转换成"true "，把false转换成"false "，依此类推。

强制转换成字符串和调用toString()方法的唯一不同之处在于，对null或undefined值强制类型转换可以生成字符串而不引 发错误：

vars1=String(null);//"null"

varoNull=null;

vars2=oNull.toString();//won’twork,causesanerror

3.利用js变量弱类型转换

举个小例子，一看，就会明白了。

varstr='012.345';

varx=str-0;

x=x*1;

上例利用了js的弱类型的特点，只进行了算术运算，实现了字符串到数字的类型转换，不过这个方法还是不推荐的。

2.3数组操作

2.3.1 1、数组的创建

vararrayObj =newArray();//创建一个数组

vararrayObj =newArray([size]);//创建一个数组并指定长度，注意不是上限，是长度

vararrayObj =newArray([element0[,  element1[, ...[, elementN]]]]);//创建一个数组并赋值

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

2.3.2 2、数组的元素的访问

vartestGetArrValue=arrayObj[1];//获取数组的元素值

arrayObj[1]="这是新值";//给数组元素赋予新的值

2.3.3 3、数组元素的添加

arrayObj. push([item1  [item2 [. . . [itemN ]]]]);//将一个或多个新元素添加到数组结尾，并返回数组新长度

arrayObj.unshift([item1  [item2 [. . . [itemN ]]]]);//将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

arrayObj.splice(insertPos,0,[item1[,  item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

2.3.4 4、数组元素的删除

arrayObj.pop();//移除最后一个元素并返回该元素值

arrayObj.shift();//移除最前一个元素并返回该元素值，数组中元素自动前移

arrayObj.splice(deletePos,deleteCount);//删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

2.3.5 5、数组的截取和合并

arrayObj.slice(start,  [end]);//以数组的形式返回数组的一部分，注意不包括end对应的元素，如果省略end将复制start之后的所有元素

arrayObj.concat([item1[,  item2[, . . . [,itemN]]]]);//将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

2.3.6 6、数组的拷贝

arrayObj.slice(0);//返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.concat();//返回数组的拷贝数组，注意是一个新的数组，不是指向

2.3.7 7、数组元素的排序

arrayObj.reverse();//反转元素（最前的排到最后、最后的排到最前），返回数组地址

arrayObj.sort();//对数组元素排序，返回数组地址

2.3.8 8、数组元素的字符串化

arrayObj.join(separator);//返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用separator隔开。

toLocaleString、toString、valueOf：可以看作是join的特殊用法，不常用

2.3.9二、数组对象的3个属性

1、length属性

Length属性表示数组的长度，即其中元素的个数。因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。和其他大多数语言不同的是，JavaScript数组的length属性是可变的，这一点需要特别注意。当length属性被设置得更大时，整个数组的状态事实上不会发生变化，仅仅是length属性变大；当length属性被设置得比原来小时，则原先数组中索引大于或等于length的元素的值全部被丢失。下面是演示改变length属性的例子：

var arr=[12,23,5,3,25,98,76,54,56,76];

//定义了一个包含10个数字的数组

alert(arr.length);//显示数组的长度10

arr.length=12;//增大数组的长度

alert(arr.length);//显示数组的长度已经变为12

alert(arr[8]);//显示第9个元素的值，为56

arr.length=5;//将数组的长度减少到5，索引等于或超过5的元素被丢弃

alert(arr[8]);//显示第9个元素已经变为"undefined"

arr.length=10;//将数组长度恢复为10

alert(arr[8]);//虽然长度被恢复为10，但第9个元素却无法收回，显示"undefined"

由上面的代码我们可以清楚的看到length属性的性质。但length对象不仅可以显式的设置，它也有可能被隐式修改。JavaScript中可以使用一个未声明过的变量，同样，也可以使用一个未定义的数组元素（指索引超过或等于length的元素），这时，length属性的值将被设置为所使用元素索引的值加1。例如下面的代码：

var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);

代码中同样是先定义了一个包含10个数字的数组，通过alert语句可以看出其长度为10。随后使用了索引为15的元素，将其赋值为15，即arr[15]=34，这时再用alert语句输出数组的长度，得到的是16。无论如何，对于习惯于强类型编程的开发人员来说，这是一个很令人惊讶的特性。事实上，使用new Array()形式创建的数组，其初始长度就是为0，正是对其中未定义元素的操作，才使数组的长度发生变化。

由上面的介绍可以看到，length属性是如此的神奇，利用它可以方便的增加或者减少数组的容量。因此对length属性的深入了解，有助于在开发过程中灵活运用。

2、prototype属性

返回对象类型原型的引用。prototype属性是object共有的。

objectName.prototype

objectName参数是object对象的名称。

说明：用prototype属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

对于数组对象，以以下例子说明prototype属性的用途。

给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入Array.prototype， 并使用它。

function array_max()

{

    var i, max =this[0];

    for(i = 1; i <this.length; i++)

    {

        if(max <this[i])

            max =this[i];

    }

    return max;

}

Array.prototype.max =  array_max;

var x =newArray(1,  2, 3, 4, 5, 6);

var y = x.max();

该代码执行后，y保存数组x中的最大值，或说6。

3、constructor属性

表示创建对象的函数。

object.constructor //object是对象或函数的名称。

说明：constructor属性是所有具有prototype的对象的成员。它们包括除Global和Math对象以外的所有JScript固有对象。constructor属性保存了对构造特定对象实例的函数的引用。

例如：

x =newString("Hi");

if(x.constructor == String)//进行处理（条件为真）。

或

function MyFunc {

    //函数体。

}

y =newMyFunc;

if(y.constructor == MyFunc)//进行处理（条件为真）。

对于数组来说：

y =newArray();

js数组的操作

http://blog.csdn.net/xcxinghai/article/details/13502583

2.3.10Javascript数组循环遍历之forEach

http://blog.csdn.net/oscar999/article/details/8671546

2.4本地缓存localStorage与SessionStorage

2.4.1localStorage

2.4.1.1存储

HJSmart.EA.Utl.saveCookInfoEntiyToLocalStorage= function(userApplianceInfo,cookEntityData)

{

    if(window.localStorage &&userApplianceInfo) {

        var storage = window.localStorage;

        var appIDStr =userApplianceInfo.applianceId.toString();

        //storage.setItem(userApplianceInfo.applianceId.toString(),JSON.stringify(cookEntityData));

        storage.setItem(appIDStr +"_cook_mode",cookEntityData.mode);

        storage.setItem(appIDStr +"_cook_content",cookEntityData.content);

        storage.setItem(appIDStr +"_cook_num",cookEntityData.num.toString());

        storage.setItem(appIDStr +"_cook_timer",cookEntityData.timer.toString());

        storage.setItem(appIDStr +"_cook_workTime",cookEntityData.workTime.toString());

        storage.setItem(appIDStr +"_cook_solidity",cookEntityData.solidity.toString());

        storage.setItem(appIDStr +"_cook_riceType",cookEntityData.riceType.toString());

        storage.setItem(appIDStr +"_cook_hasFaults",cookEntityData.hasFaults.toString());

        if(cookEntityData.hasFaults)

        {

              storage.setItem(appIDStr + "_cook_errorCode",cookEntityData.devError.errorCode);  

              storage.setItem(appIDStr +"_cook_errorTitle",cookEntityData.devError.errorTitle);

            storage.setItem(appIDStr +"_cook_errorDesc",cookEntityData.devError.errorDesc);

        }

    }

}

2.4.1.2读取

HJSmart.EA.Utl.getCookInfoEntiyFromLocalStorageWithDevInfo =function(userApplianceInfo)

{

    if(window.localStorage &&userApplianceInfo) {

        var storage = window.localStorage;

        var cookData = newmdSmart.EA.cookInfoEntity();

        var appIDStr =userApplianceInfo.applianceId.toString();

        cookData.mode =parseInt(storage.getItem(appIDStr + "_cook_mode")) ;

        cookData.content =parseInt(storage.getItem(appIDStr + "_cook_content"));

        cookData.num =parseInt(storage.getItem(appIDStr + "_cook_num"));

        cookData.timer =parseInt(storage.getItem(appIDStr + "_cook_timer"));  

        cookData.workTime =parseInt(storage.getItem(appIDStr + "_cook_workTime"));

        cookData.solidity =parseInt(storage.getItem(appIDStr + "_cook_solidity"));

        cookData.riceType =parseInt(storage.getItem(appIDStr + "_cook_riceType"));

        var faultsStr =storage.getItem(appIDStr + "_cook_hasFaults");

        if(faultsStr == "true")

            cookData.hasFaults = true;

        else

            cookData.hasFaults = false;

        //var localJSONData=storage.getItem(userApplianceInfo.applianceId.toString());

        //varlocalData = eval("("+localJSONData+")");

        //cookData.mode =localData["mode"];

        //cookData.content =localData["content"];

        //cookData.num =localData["num"];

        //cookData.timer =localData["timer"]; 

        //cookData.workTime =localData["workTime"];

        //cookData.solidity =localData["solidity"];

        //cookData.riceType =localData["riceType"];

        //cookData.hasFaults =localData["hasFaults"];

        if(cookData.hasFaults != false)

        {

            cookData.devError= newmdSmart.EA.Error();

            cookData.devError.errorCode =parseInt(storage.getItem(appIDStr + "_cook_errorCode"));

            cookData.devError.errorTitle =storage.getItem(appIDStr + "_cook_errorTitle");

            cookData.devError.errorDesc =storage.getItem(appIDStr + "_cook_errorDesc");

        }

        return cookData;

    }

    return null;

}

3调试问题定位

3.1交互问题

3.1.1用户界面事件失效

可能原因：

1、js文件中有语法错误，导致js未加载完成，无法执行逻辑；

3.1.2事件触发的方法只能用实例方法，不能用类方法

此方法绑定不到事件方法

$(document).bind("recieveMessage",{},HJSmart.EA.Utl._receiveReportMessageFunction);

HJSmart.EA.Utl._receiveReportMessageFunction =function(event,message)

{

    console.log('ReportMessage');

}

必须用如下方法：

$(document).bind("recieveMessage",{}, _receiveReportMessageFunction);

function _receiveReportMessageFunction(event,message)

{

    console.log('ReportMessage');

}

3.1.3页面启动时停在了弹出浮层页面

    调试过程中，页面启动后没有正常加载，而停在了弹出浮层，一般都是有js逻辑错误，导致后续js逻辑没有走通，例如遇到未定义变量，js逻辑会直接停住，不报异常。

3.1.4页面跳转后无法回退

        通过href跳转的，目前无法回退

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,736评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,167评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,442评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,902评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,302评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,573评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,847评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,562评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,260评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,367评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,016评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2赞 269

推荐阅读更多精彩内容

  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,621评论 2赞 17
  • js高级
    第一章： JS简介 从当初简单的语言，变成了现在能够处理复杂计算和交互，拥有闭包、匿名函数， 甚至元编程等...
    LaBaby_阅读 1,563评论 0赞 6
  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 2,017评论 1赞 10
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,151评论 0赞 4
  • 他们说没有标题比较酷
    我是阿K，他叫Hab，三岁起我就开始跟在他后面叫“哥哥”。 小时候Hab的纸飞机折的真好，不像我折的，飞出去就栽下...
    白蒙萌阅读 233评论 6赞 4