当前位置: 首页 > news >正文

JS小技巧

1.使用 === 代替 ==

JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践。

“如果两边的操作数具有相同的类型和值,===返回true,!==返回false。”——JavaScript:语言精粹

然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果。

 

在js中数字0是逻辑的false。空字符串("")是逻辑的false。undefined是逻辑的false。null是逻辑的false。

"  "含有空格的字符串是逻辑的true。字符串"0"是逻辑的true。字符串"undefined"是逻辑的true。字符串"null"是逻辑的true。

/* 
判断str是否为空。为空则返回true,否则返回false 
*/
function isNull(str){
    if("0" === str || 0 === str){
    return false;
    }
    if(!str || str == null || str == '' || str == 'null'){
    return true;
    }
    return false;
}

 

 

2.将脚本放在页面的底部

在本系列前面的文章里已经提到过这个技巧,我粘贴信息在这里。

 

记住——首要目标是让页面尽可能快的呈献给用户,脚本的夹在是阻塞的,脚本加载并执行完之前,浏览器不能继续渲染下面的内容。因此,用户将被迫等待更长时间。

如果你的js只是用来增强效果——例如,按钮的单击事件——马上将脚本放在body结束之前。这绝对是最佳实践。

建议

<p>And now you know my favorite kinds of corn. </p>  
<script type="text/javascript" src="path/to/file.js"></script>  
<script type="text/javascript" src="path/to/anotherFile.js"></script>  
</body>  
</html>  

3.使用{}代替 new Ojbect()

在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数,像下面这样:

var o = new Object();  
o.name = 'Jeffrey';  
o.lastName = 'Way';  
o.someFunction = function() {  
   console.log(this.name);  
} 

然而,这种方法的受到的诟病不及实际上多。作为代替,我建议你使用更健壮的对象字面量方法。

更好的做法

复制代码
var o = {  
   name: 'Jeffrey',  
   lastName = 'Way',  
   someFunction : function() {  
      console.log(this.name);  
   }  
};  
复制代码

注意,果你只是想创建一个空对象,{}更好。

var o = {};

“对象字面量使我们能够编写更具特色的代码,而且相对简单的多。不需要直接调用构造函数或维持传递给函数的参数的正确顺序,等”——dyn-web.com

4.使用[]代替 new Array()

这同样适用于创建一个新的数组。

例如:

var a = new Array();  
a[0] = "Joe";  
a[1] = 'Plumber'; 

更好的做法:

var a = ['Joe','Plumber'];  

“javascript程序中常见的错误是在需要对象的时候使用数组,而需要数组的时候却使用对象。规则很简单:当属性名是连续的整数时,你应该使用数组。否则,请使用对象”——Douglas Crockford

5.定义多个变量时,省略var关键字,用逗号代替

var someItem = 'some string';  
var anotherItem = 'another string';  
var oneMoreItem = 'one more string';

更好的做法

var someItem = 'some string',  
    anotherItem = 'another string',  
    oneMoreItem = 'one more string';

…应而不言自明。我怀疑这里真的有所提速,但它能是你的代码更清晰。

6.自执行函数

和调用一个函数类似,它很简单的使一个函数在页面加载或父函数被调用时自动运行。简单的将你的函数用圆括号包裹起来,然后添加一个额外的设置,这本质上就是调用函数。

(function doSomething() {  
   return {  
      name: 'jeff',  
      lastName: 'way'  
   };  
})();  

7.移除"language"属性

曾经脚本标签中的“language”属性非常常见。

<script type="text/javascript" language="javascript">  
...  
</script> 

然而,这个属性早已被弃用,所以请移除(译者注:html5 中已废弃,但如果你喜欢,你仍然可以添加)。

 

<摘自:http://www.cnblogs.com/yanhaijing/p/3465237.html>

转载于:https://www.cnblogs.com/kevin-yuan/p/3470199.html

相关文章:

  • 【研究任务】热迁移方式——pre-copy、post-copy和x-multifd
  • 创建用于自定义SharePoint解决方案部署的Visual Studio项目
  • JavaScript中的对象个人分享
  • Python数据结构
  • Discuz!X3.1 全新安装图文教程
  • 关于Solr的使用总结的心得体会
  • paip.语义分析--单字词形容词表180个
  • vue格式化快捷键设置
  • jQuery学习——克隆
  • IBM WebSphere MQ介绍安装以及配置服务详解
  • 思维导图—你不知道的JavaScript中卷
  • C# 类相同属性赋值
  • MVC验证
  • UVa10305 拓扑排序
  • 专科程序员与本科程序员之间有什么区别?
  • 2018一半小结一波
  • Android交互
  • CAP理论的例子讲解
  • Django 博客开发教程 16 - 统计文章阅读量
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • flutter的key在widget list的作用以及必要性
  • javascript数组去重/查找/插入/删除
  • java架构面试锦集:开源框架+并发+数据结构+大企必备面试题
  • mongodb--安装和初步使用教程
  • React Native移动开发实战-3-实现页面间的数据传递
  • React组件设计模式(一)
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典:程序员走江湖必备
  • Spring框架之我见(三)——IOC、AOP
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • 前嗅ForeSpider采集配置界面介绍
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 微信小程序开发问题汇总
  • 学习笔记DL002:AI、机器学习、表示学习、深度学习,第一次大衰退
  • 中国人寿如何基于容器搭建金融PaaS云平台
  • 做一名精致的JavaScripter 01:JavaScript简介
  • Python 之网络式编程
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • #13 yum、编译安装与sed命令的使用
  • #Spring-boot高级
  • (2)MFC+openGL单文档框架glFrame
  • (aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器
  • (附源码)ssm失物招领系统 毕业设计 182317
  • (转) SpringBoot:使用spring-boot-devtools进行热部署以及不生效的问题解决
  • (转)原始图像数据和PDF中的图像数据
  • ****** 二十三 ******、软设笔记【数据库】-数据操作-常用关系操作、关系运算
  • .gitignore文件---让git自动忽略指定文件
  • .NET企业级应用架构设计系列之开场白
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • .net专家(高海东的专栏)
  • ::前边啥也没有
  • ?.的用法
  • @transaction 提交事务_【读源码】剖析TCCTransaction事务提交实现细节
  • [ Linux ] git工具的基本使用(仓库的构建,提交)
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • [2024] 十大免费电脑数据恢复软件——轻松恢复电脑上已删除文件