当前位置:首页 > 日记 > 正文

共享经典Javascript开发技巧

共享经典Javascript开发技巧
javascript开发的经典技巧分享:

1。确保为第一次变量赋值使用var关键字

变量没有被声明,并且直接有价值,默认值是一个新的全局变量,尽可能避免使用全局变量。

2,使用而不是

=和!=运算符将在需要时自动转换数据类型!不,他们也会比较值和数据类型,这使它们更快于。

{ 10 } = 10 /是false

{ 10 } = 10 /是真的

10= 10 /是真的

10= 10 / false是false

{ = 0 /是真的

{ = 0 = / false是false

假真但是真是false是错误的。

false是false

3、不确定性、空,0、假,南的逻辑结果,和空字符串都是假的

在4年底,用分号

实际上,最好使用分号,忘记写什么也不做,在大多数情况下Javascript解释器会自动添加。

5。使用对象构造函数
功能人(firstName、lastName){
this.firstname =名;
this.lastname =姓;
}
Var Saad =新人(萨阿德)
6。使用类,实例构造函数,并仔细

类型:Javascript运算符是用来返回字符串形式的变量的原始类型。注意:空返回对象也会,和大多数的对象类型(数组、日期等)也将返回对象。
构造函数:一个内部原型属性,可以重写代码
instanceof:Javascript运算符将在原型链构造函数搜索,返回真,返回假
var arr = {
型ARR; / /返回对象
ARR是阵列 / /真的
/ / { }(arr.constructor);
7。使用自调用函数

函数在创建后直接执行。它通常被称为自调用匿名函数(自调用匿名函数)或直接调用函数表达式(立即调用函数表达式):

(函数(){())
这里放置的代码将自动执行。
});
(函数(a,b){)
var结果;
返回结果;
})(10,20)
8。对数组成员的随机访问
可变项目= { 12, 548,A,2, 5478,'foo ',8852,'doe ',2145, 119 };
无功randomitem =项目{ math.floor(Math.random()*项目。长度)};
9。获取指定范围内的随机数。

这个函数在生成测试的假数据时特别有用,例如在指定范围内的工资数。

复制代码如下:var x = math.floor(Math.random()*(最大-最小+ 1))+ min;

10。生成从0到指定值的数字数组。
var { } = numbersarray,max = 100;
对于(var i = 1;numbersarray.push(i++)<最大;); / /数= { 1,2,3…100 }
11。生成随机字母数字字符串
功能generaterandomalphanum(LEN){
无功rdmstring = ;
(为;rdmstring.length < len;rdmstring = Math.random(ToString)(36),Substr(2));
返回rdmstring.substr(0,Len);
}
12。无序数字序列
var数字= { 5, 458, 120,- 215, 228, 400,122205,- 85411 };
numbers.sort数=((){ return函数Math.random()0.5 });
数字数组将类似于{ 120, 5, 228,400, 458,- 215,- 85411, 122205 }。
在这里,我们使用内置数组排序函数的Javascript,和更好的方式是用特殊的代码实现(如Fisher Yates算法)。我们可以把这个讨论在StackOverflow。

13。字符串到空空间

# java,C,PHP和其他语言实现了一个特殊的字符串空间的功能,但没有Javascript。这样,可以通过以下代码对字符串对象函数使用微调函数。

string.prototype.trim =函数(){ return this.replace( / ^ + | + $ / g,);};

新的Javascript引擎已经有了一个本地实现。

14。除了数组之间
VaR array1 = { 12,foo
VaR array2 = {无名氏
Array.prototype.push.apply(array1,array2);
/ * 2 = { 12,foo,{名称乔},2458,DOE,555, 100 }。
15。对象被转换为数组。

复制代码代码如下:var argarray = array.prototype.slice.call(参数);

16。验证它是否是一个数字
功能isnumber(N){
返回!IsNaN(parseFloat(n))系统(N);
}
17。验证它是否是数组
功能ISArray(obj){
返回object.prototype.tostring.call(obj)={ }对象数组;
}
但如果toString()方法被重写,它将无法工作。下面的方法也可以用:

复制代码如下:Array.isArray(obj); / /它的一个新的阵列的方法

如果你不使用框架的浏览器,也可以使用实例,但是如果环境过于复杂,也犯了一个错误。

var myFrame. = document.createelement('iframe);
document.body.appendchild(myFrame.);
VaR MyArray =窗口。帧{窗口。帧。length-1 }。阵列;
var arr =新MyArray(A,B,10); / / {A,B,10 }
的MyArray /实例构造函数已经丢失,结果将是不正常的
构造函数不是跨帧共享。
数组是数组; / /假
18。获取数组中的最大值和最小值。
var数字= { 5, 458, 120,- 215, 228, 400,122205,- 85411 };
无功maxinnumbers = math.max.apply(数学、数字);
无功mininnumbers = math.min.apply(数学、数字);
本文中可以详细介绍Javascript如何获得数组的最大值和最小值。

19。空数组
VaR MyArray = { 12, 222, 1000 };
myarray.length = 0; / / MyArray将等于。
20。不要直接从数组中的删除或删除元素

如果直接使用数组元素的删除,它实际上不会删除它,只需将元素设置为未定义。

避免:

可变项目= { 12, 548,A,2, 5478,'foo ',8852,'doe ',2154, 119 };
items.length; / /返回11
删除项目{ 3 };返回true
items.length; / /返回11
项目的结果{ { 12, 548,A,未定义的* 1, 5478,富,8852,未定义的* 1,DOE,2154, 119 }。
并应:

可变项目= { 12, 548,A,2, 5478,'foo ',8852,'doe ',2154, 119 };
items.length; / /返回11
items.splice(3,1);
items.length; / /返回10
项目的结果{ 12 *,548,
删除对象的属性时,可以使用删除。

21。使用长度属性截断数组。

前一个示例用长度属性清除数组,它也可以用来截断数组。

VaR MyArray = { 12, 222, 1000,124, 98, 10 };
myarray.length = 4; / / MyArray将等于{ 12, 222, 1000,124 }。
同时,如果长度属性变大,数组的长度值将增加,而未定义则用于填充新元素。长度是可写属性。

myarray.length = 10; / /新的数组的长度是10
myarray.length MyArray { 1 }; / /未定义
22。使用逻辑和OR
var = 10;
DoSomething(foo = = 10); / /是的事情一样(foo = = 10)(做);
foo = = 5); / /做| |(事一样(Foo!= 5)(做);
逻辑也可以用来设置默认值,比如函数参数的默认值。

函数doSomething(arg1){
arg1 = arg1 10 | |; / / arg1将有10作为默认值如果不是已经设置
}
23。使map()函数方法到数据周期
VaR的平方= { }(1、2、3、4。地图功能(Val){)
返回空值;
});
正方形将等于 { 1, 4, 9,16 }。
24。保留指定的位数。
var = 2.443242342;
Num = num.tofixed(4); / /数将等于2.4432
注意,tofixec()返回一个字符串,不是一个数字。

25,浮点运算的问题

0.1 + 0.2 = 0.3 / false是false

9007199254740992 + 1 等于9007199254740992

9007199254740992 + 2 等于9007199254740994

为什么因为0.1加0.2等于0.3000000000000000.the一些Javascript是根据IEEE 754标准建造的,它是内部64位浮点十进制表示。可以看出Javascript中的数字是如何编码的。

你可以通过使用固定的解决这个问题()和精密()。

26,通过for循环检查对象的属性。

以下用法防止迭代进入对象的原型属性。

对于(对象中的var名称){
如果(object.hasownproperty(名字)){
一些有名字的事情
}
}
27,逗号运算符
var a=0;
var(=,++,99);
console.log(一); / /将等于1
console.log(B); / / B等于99
28。暂时存储用于计算和查询的变量。

在jQuery选择器中,整个DOM元素可以临时存储。

无功navright = document.queryselector(' #正确);
无功navleft = document.queryselector(' #左);
无功navup = document.queryselector(' #);
无功navdown = document.queryselector(' # down);
29。检查传入的参数需提前()
需(0 / 0); / /假
有限(foo); / /假
系统(10); / /真的
有限(10); / /真的
系统(定义); / /假
(有限); / /假
有限(空); / /真的,在这个特别的关注
30。避免在数组中使用负数索引
无功numbersarray = { 12345 };
var = numbersarray.indexof(foo); / /等于1
numbersarray.splice(,2); / /将返回{ 5 }
注意传递给剪接的索引参数不是负数,当负数为负数时,元素从数组的结尾被删除。

31。用JSON序列化和反序列化
无功的人= {姓名:'saad,年龄:26,部门:{编号:15,名称:RD} };
无功stringfromperson = json.stringify(人);
对stringfromperson / * {名字的结果:萨阿德
无功personfromstring = JSON.parse(stringfromperson);
对personfromstring /人和相同的对象的值。
32。不要使用eval()或函数的构造方法

eval()函数的开销和构造函数(功能consturctor)是大的,和每一个电话,Javascript引擎的源代码转换成可执行的代码。

VaR func1 =新的功能(功能码);
VaR func2 = eval(功能码);
33。避免使用()

使用与()可以向全局范围添加变量,因此如果有其他名称相同的名称,很容易混淆,二进制值将被覆盖。

34。不要在数组中使用

避免:

var总和= 0;
对于(VAR我arraynumbers){
总和= arraynumbers {我};
}
但:

var总和= 0;
对于(var i = 0,len = arraynumbers.length;我< len;i++){
总和= arraynumbers {我};
}
另一个优点是,i和莱恩的两个变量在for循环的第一个声明中,而这两个变量只会初始化一次,这比下面的要快。

对于(var i = 0;i < arraynumbers.length;i++)

35。使用函数而不是一个字符串,当通过setInterval和setTimeout()()

如果通过一系列的setTimeout()和setInterval(),他们将在一个类似eval转化,这必然要慢,所以不要使用:

('dosomethingperiodically setInterval()',1000);
('dosomethingafterfiveseconds setTimeout()',5000);
它是使用:

setInterval(dosomethingperiodically,1000);
setTimeout(dosomethingafterfiveseconds,5000);
36。使用开关/案例代替大量的如果

当判断有两个以上的分支时,交换机的使用情况是更快更优雅的,这更有利于代码的组织。当然,如果有超过10个分支,请不要使用开关/案例。

37。在交换机中使用数字间隔

事实上,也可以用这种方式编写开关中的案例条件:

功能getcatery(年龄){
无功catery = ;
开关(true){
案例isnan(年龄):
catery = 不是一个时代;
打破;
案例(年龄= 50):
catery =老;
打破;
案例(20岁):
catery =宝贝;
打破;
违约:
catery =年轻;
打破;
};
返回catery;
}
getcatery(5); / / 宝宝收益
38。以对象为原型

通过这种方式,可以将对象作为参数创建一个用作原型的新对象。

函数克隆(对象){
功能(oneshotconstructor){ };
oneshotconstructor.prototype =对象;
返回新的oneshotconstructor();
}
克隆(数组.原型);
39、html字段转换功能
功能escapehtml(文本){
变量替换=>、、};
返回text.replace( / { <>} / G函数(字符){
返回替换{字符};
});
}
40。不要在循环中使用最后的catch。

catch catch中的catch部分将在执行变量时分配一个异常,该变量将在运行时范围内嵌入到一个新变量中。

避免:

var对象= { 'foo ','bar},我;
为(i = 0,len = object.length;我< len;i++){
{试
抛出异常的东西
}
catch(e){
处理/异常
}
}
并应:

var对象= { 'foo ','bar},我;
{试
为(i = 0,len = object.length;我< len;i++){
抛出异常的东西
}
}
catch(e){
处理/异常
}
41。使用时注意xmlhttprequests设置超时时间

xmlhttprequests执行时,它将终止连接时,它是很长时间没有响应(如网络问题)。它可以通过setTimeout()。

新的XMLHttpRequest(XHR)var =;
xhr.onreadystatechange =函数(){
如果(this.readystate = = 4){
ClearTimeout(超时);
带有响应数据的某事
}
}
VaR超时= setTimeout()函数(){
(XHR。中止); / /调用错误回调
60 * 1000后超时};
Xhr.open(' ',网址,真的);
Xhr.send();
同时,需要注意的是,不多xmlhttprequests请求同时启动的重要。

42。处理WebSocket超时

通常,如果WebSocket连接被创建,如果在30秒内没有活动,服务器端将过程连接超时。防火墙也可以在单位时间内处理没有活动的连接。

为了防止这种情况发生,您可以每次都向服务器发送一条空消息。这个要求可以通过以下两个功能实现:一个是保持连接活动,另一个是结束状态。

VaR值= 0;
功能存活(){
var超时= 15000;
如果(websocket.readystate = = WebSocket。打开){
WebSocket.send();
}
值= setTimeout(KeepAlive,超时);
}
功能cancelkeepalive(){
如果(值){
canceltimeout(值);
}
}
keepalive()函数可以放在开放的结束()的WebSocket连接方法,并cancelkeepalive()放在关闭后结束()方法。
以上是分享javascript开发技巧,希望能对大家有所帮助。

相关文章

QQ谈QQ空间的伤感爱情语句

QQ谈QQ空间的伤感爱情语句

语句,空间,伤感,爱情,电脑软件,有些人喜欢读一些文章,尤其是一些美丽的如伤感的句子,优美的诗歌等等,等等! 第一,岸边的拘留不是外来的花草和稀有的药材,奔腾向前的河流。 第二,如果没有力量,它就会走自己的路。 三,当我老了,我意识到记忆是座桥,它是…

ai很快就建起了一个生动漂亮的绿色

ai很快就建起了一个生动漂亮的绿色

花瓶,生动,漂亮,电脑软件,ai,本教程是快速创建一个栩栩如生的青花瓷花瓶给朋友的AI教程,青花瓷是非常漂亮的,但难度一般,建议大家一起学习吧。 本教程教朋友们用ai快速创建一个生动漂亮的绿色花瓶,这是非常困难的。花瓶是美丽的。很难做到。与…

带感情签名的情人节情感签名

带感情签名的情人节情感签名

情人节,感情,情感,电脑软件,QQ签名是指根据用户的兴趣和意见对用户进行个性化的声明,使用QQ签名是非常广泛的,尤其是对年轻人而言。下面简单介绍一下情人节的一些情感签名,以供参考。 1,冲淡记忆的时间,也不要回到青春。 2、那些提醒我们的生活,…

搞笑个性签名,搞笑个性签名,个性签名

搞笑个性签名,搞笑个性签名,个性签名

个性签名,搞笑,电脑软件,人们不会让我成为囚犯,如果那个人让我挖他的坟墓,Rdquo,为你的QQ选择一个有趣的签名,让你的QQ展示你的个性。这里有一些有趣的签名给你。 1。她比我强。你对她和你母亲很好。 2,我知道她是你回来,所以你珍惜现在 3,我不知…

如何在AI绘制箭头ai箭头设置和绘图

如何在AI绘制箭头ai箭头设置和绘图

设置,绘图,绘制,箭头,如何在,在AI,如何用ai排版画箭头通常需要添加箭头图形,但如何在AI画箭头呢下面分享ai箭头的设置和绘图方法,需要的朋友可以参考一下 ai是一个强大的矢量图形排版软件。特别是排版时,我们经常需要添加箭头。那么AI的箭头在…

标志设计过程中应注意的基本细节

标志设计过程中应注意的基本细节

应注意,过程中,细节,标志,电脑软件,本教程是介绍罗设计给朋友的过程中需要注意的一个基本细节。这个教程很好。这是值得学习的。 如果你问设计师如何设计一个Lo,他会告诉你图形、字体、颜色和间距将传达不同的信息。你不妨学习它。 本教程…

QQ爱情个性签名经典签名

QQ爱情个性签名经典签名

个性签名,经典,爱情,电脑软件,QQ,Ldquo,微风,是天空送给夏天最好的礼物。 1,穿着中国服装,唱着寂寞和寒冷。 2,留下一滴沙漏,那是我在想你的记号。 3,云寒为空雨,心冷泪在眼里。 4、时间染冷,不爱不忘。 5、明月夜送君千里,等待来年秋风。 6,星星坠落,…

超级可爱的企鹅企鹅

超级可爱的企鹅企鹅

企鹅,超级可爱,电脑软件,本教程介绍了一个朋友以CDR来绘制超级可爱的QQ企鹅方法。导师画的QQ企鹅很漂亮。这不是很棒吗值得学习。建议像你这样的朋友一起学习这个教程。 随着科学技术的发现,互联网正在不断地运行。现在人们的工作和生活都离…

多excel表条件自动求和公式excel函

多excel表条件自动求和公式excel函

函数,条件,公式,电脑软件,excel,我们在excel中做统计,我们经常遇到使用有条件的,它是数据项的某个条件: 1。利用SUMIF单条件求和公式(): 要计算C列中的数据,需要统计条件是B列中的数据是条件1,并将结果放入C6单元中。只要我们输入公式= SUMIF(B2:B5…

PS滤镜制作很漂亮的渐变花GIF动画

PS滤镜制作很漂亮的渐变花GIF动画

动画,滤镜,渐变,很漂亮,效果图,本教程是向一个朋友介绍ps滤镜,并做一个非常漂亮的渐变GIF动画渲染方法。本教程制作的动画效果非常漂亮。建议你喜欢你的朋友快速学习。 本教程是介绍一个PS滤镜给朋友创建一个非常漂亮的渐变GIF动画效果。本…

令人捧腹的搞笑个性签名搞笑个性签

令人捧腹的搞笑个性签名搞笑个性签

令人捧腹,个性签名,搞笑,电脑软件,用最鼓舞人心的话说走-不要吃太胖哦,会被杀的。 你认为你喜欢像你这样的人,而你通常是自恋的。 抱着冰淇淋,吃棒棒糖,哼着小曲子,坐在费里斯的车轮。 世界上最遥远的距离是你在澳大利亚的家,我在家粥。 有些人依…

jQuery中复选框使用的简单示例演示

jQuery中复选框使用的简单示例演示

复选框,示例,演示,简单,电脑软件,和大家分享一个列表基于jQuery的复选框,并选择取消选定的函数代码,适合网络多批次操作后的场景需要(如删除)。结合实例,代码简单,基本覆盖选项来选择操作的所有方面,希望能够帮助到前端爱好者的需要。 介绍jQuery…