分享一些JavaScript简易小技巧
特性检测而非浏览器检测
因为某某特性某浏览器不支持,我们经常的做法是在代码中直接先做浏览器判断如:
1 |
if(Broswer.isFirfox){ |
2 |
//do something |
3 |
} |
其实这样做是不科学的,因为很可以其它浏览器上可以支持你要用的特性,所以,比较好的做法为是直接做特性判断。如:
1 |
if(window.localStorage){ |
2 |
//使用本地存储功能 |
3 |
} |
使用方括号来访问属性或方法
这一点到不是强制的,只不过如果使用方括号来访问可以享受一些动态特性带来的好处,而且命名方面有少了许多限制。如:
1 |
for(var i=0;i<9;i++){ |
2 |
obj["method"+i](); |
3 |
} |
表单的那些事
这里主要提两个很有用的属性,可以让你操作表单方便不少。
- form有一个elements属性。作用呢就是可以得到一个表单下的所有表单元素,这样在批量处理表单元素时就很有用,如:表单元素的序列化,或者验证之类的很有帮助。
- 对于第一个表单元素也有一个类似属性为form.这样可以很轻松得到一个表单元素属于哪个表单。
a元素onclick的那些事
1 |
<a href="cool.html" onclick = "doSomething()">做点什么吧</a> |
点击这样一个链接时会有两种情况发生,1、如果dosomthing返回true,那么浏览器就会发生跳转到cool.html,相返如果返回false的话,就会忽略href。因此借住这个特性,我们可以写这样的代码。
1 |
function doSomething(){ |
2 |
return confirm("您确认要离开吗"); |
3 |
} |
有没有发现比起下面这样的代码爽了很多。
1 |
function doSomething(){ |
2 |
var ret = confirm("确认要离开吗?"); |
3 |
if(ret){ |
4 |
window.loaction.href = "cool.html"; |
5 |
} |
6 |
} |
类型转换时不一样的做法
怎样把字符串转换成数字呢?我知道parseInt("123",10),除此之外还有什么好办法没,看下面的。
1 |
var num1 = "123"; |
2 |
num1 = num1*1; |
3 |
var num2 = "123"; |
4 |
num2 = +num2; |
这两种方法是不是很不错。还是很简洁吧。祝学习愉快!
1 |
var a = 1; |
2 |
a = !!a; |
分享一些JavaScript简易小技巧的更多相关文章
- 你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
- JavaScript 编码小技巧
三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) { answer = ...
- JavaScript使用小技巧
原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘 ...
- 19 个 JavaScript 编码小技巧
这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好 ...
- JavaScript 转换小技巧
1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做 ...
- Javascript 编程小技巧总结(部分内容借鉴他人)
1 – 使用===,而不是== ==(或!=)操作符在需要的时候会自动执行类型转换.===(或!==)操作不会执行任何转换.它将比较值和类型,而且在速度上也被认为优于==. 2 – 使用闭包实现私有变 ...
- JavaScript 调试小技巧
'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断 ...
- 谈谈如何用eoLinker管理各类API接口及分享API接口管理小技巧教程
在前后端分离的开发模式下,前后端往往需要接口文档来进行交互.我的上一篇随笔中已经写到用传统的文档写接口时,由于需求经常变动,接口文档也会随之变动.一开始,某接口信息已经写入文档,但后期因为需求变动,发 ...
- 22条常用JavaScript开发小技巧
1.使用var声明变量 如果给一个没有声明的变量赋值,默认会作为一个全局变量(即使在函数内赋值).要尽量避免不必要的全局变量. 2.行尾使用分号 虽然JavaScript允许省略行尾的分号,但是有时不 ...
随机推荐
- php安装php-redis扩展
下载安装php-redis扩展: 地址:https://github.com/phpredis/phpredis/ $ wget http://pecl.php.net/get/redis-3.1.2 ...
- List集合中的对象比较,取出不同对象
今天在做金碟系统与我们系统的对接的时候需要做一个客户同步 在同步时,需要比较对象,对查询出的数据库的数据进行比较 for(int i=0;i<list2.size();i++){ if(! li ...
- FPGA算法学习(1) -- Cordic(圆周系统之旋转模式)
三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来计算任意角度的三角函数的值.这种表格在人们刚刚产生三角函数的概念的时候就已经有了,它们通常是通过从已知值(比如sin(π/2)= ...
- HDU暑假多校第四场J-Let Sudoku Rotate
一.题意 Sudoku is a logic-based, combinatorial number-placement puzzle, which is popular around the wor ...
- cachel-control
nodejs: res.set('Cache-Control', 'public, max-age=31557600'); express全局设置: app.use(express.sta ...
- 【APUE】Chapter16 Network IPC: Sockets & makefile写法学习
16.1 Introduction Chapter15讲的是同一个machine之间不同进程的通信,这一章内容是不同machine之间通过network通信,切入点是socket. 16.2 Sock ...
- AutoMapper.RegExtension 介绍
AutoMapper.RegExtension 为一个特小特小特小的用来根据约定自动调用AutoMapper中的方法配置映射的扩展库.你可以引入该库也可以将源码中核心部分的代码文件夹整个拷贝至项目中. ...
- MySQL☞order by与distinct
asc(升序,默认值)/desc(降序) 1.根据某一列的列值进行升序或者降序操作. select 列名 别名 from 表名 order by 列名 asc/desc 2.根据多个列值进行排序 s ...
- Unity动态换装之Spine换装
注:转载请注明转载,并附原链接 http://www.cnblogs.com/liaoguipeng/p/5867510.html 燕双飞情侣 一.动态换装原理 换装,无非就是对模型的网格,或者贴图进 ...
- windows本地连接腾讯云的mysql服务器
由于最近数据库需要用上Navicat作为数据库,但是我的mysql装在腾讯云的Ubuntu上,因此需要做些配置开放端口,和监听端口,因此略显麻烦,这里记录一下连接的具体步骤,方便以后又得装(flag) ...