JavaScript中的一些特殊用法(一)

为什么80%的码农都做不了架构师?>>>   hot3.png

1. 不使用script自闭合标签

script中使用自闭合标签,虽然他在XHTML中合法,但是不符合HTML规范,而且得不到某些浏览器的正确解析。我曾经就在引入EXT时使用此方式,导致无法正确执行脚本。

<script src="example.js"/> --> <script src="example.js"></script>

2. 将脚本放到</body>前面

如果将脚本文件放到<head>中去,则在显示页面前先得下载执行脚本,增加了用户等待的时间。样式表放在<head>中防止内容显示不正常。一般方式如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<body><!-- html代码 --><script src="example.js"/>
</body>
</html>

3. 在函数内使用严格模式

如果在函数外部使用严格模式,则有可能会使第三方类库,和同事的代码不能正常工作,在函数内部则只能影响自己的代码,不至于影响到别人的代码。

function myfunction(){"use strict";//函数代码
}

4. 不要省略语句结尾的分号

代码结尾处没有分号容易引起压缩错误,另外在某些情况下可以增进代码的性能,应为解释器不比在花时间推测在什么地方插入分号。还有一种更常见的问题就是,自动插入分号有时会出错,所以并不建议省略分号。

5. 使用var定义变量

定义变量时使用var关键字,并且全部提前至函数的最开始。
这样做的好处就会避免无意识的创建出全局变量,而且让你的代码更容易理解。

function myfunction(){var result = 10 + value;var value = 10;return result;
}

这个函数语法上是没有问题的,但是不是很直观,不符合人的逻辑,修改如下会更好:

  funciton myfunction(){var result;var value;result = 10 + value;value = 10;return result;}

给大家解释一下,上面两个代码是等价的,result的值都是NAN.JavaScript会把函数内所有的变量声明提升到函数的最开始,代码一在代码执行时会变成代码二的样子,当运行到result = 10 + value;时,value的值为undefined,和10相加为NAN,然后value被赋值为10。
关于全局变量带来的问题,大家想必也比较清楚,不然也不会出现命名空间的概念。

6. 函数先声明再使用

和变量声明一样,函数声明也会被JavaScript引擎提前,因此在代码中,函数的调用可以出现在函数的声明之前。 还有一点值得注意,函数声明不应该出现在语句块之内,比如:

if (condition) {function myfunction(){alert("true");}
}else{function myfunction(){alert("false");}
}
myfunction();

运行代码我们发现会输出会和浏览器有关,在Chrome 51和Firefox 46输出true,IE 10下输出false。所以尽量避免在语句块中声明函数。

7. 慎用typeof underfined null判断

null是一个特殊值,我们经常和undefined混淆,下列场景应使用null:

  • 用来初始化一个变量,这个变量可能赋值为一个对象。
  • 用来和一个已经初始化的变量比较。
  • 当函数的参数期望传入对象时,用作参数传入。
  • 当函数的返回值期望是对象时,用作返回值传出。

下面一些情况不应该使用null:

  • 不要使用null来检查是否传入了某个参数。
  • 不要用null来检查一个变量是不是初始化。

理解null最好的方式是将他当做对象的占位符。我们经常将null和undefined搞混的原因是我们认为null和undefined都是变量未初始化,但是只有undefin代表一个变量还没有被初始化,null代表初始化为对象。看如下代码:

var person;
console.log(typeof person);    //undefined
console.log(typeof foo);      //undefined
var house = null;
console.log(typeof house);   //object

所以尽量不要用typeof判断变量是否初始化,你并不能确定是变量不存在还是变量未初始化,返回null是你也不能确定变量有没有被正确的赋值,所以小心使用typeof。

8. 小心使用Number类型

想必大家也知道JavaScript整数支持十进制,八进制,和十六进制的字面值。八进制中如果字面值中的数值超过了范围,那么前导零将会被忽略,后面的数值当做十进制解析。

console.log(012);    //10
console.lgo(082);    //82

如果将八进制和十六进制用于小数则会语法错误。还有一点,八进制字面量在严格模式下是无效的。 关于浮点数计算误差的问题大家也都清楚,凡是基于IEEE754数值的浮点计算都是这样,所以永远不要测试某个特定的浮点数值。
在数值类型中有一个比较特殊的值,NaN(Not a Number),这个数值用于表示本来应该返回数值但是返回的不是数值类型。NaN和任何值都不相等,包括NaN本身。我们可以用isNaN()函数测试。

9. 使用逻辑运算动态赋值

大家比较喜欢的操作

var person={age:10
}
var condition;
var myVar = condition && person;
alert(myVar)

如果condition转为boolean类型为false,则myVar = condition,若为true,则myVar = person。

var person={age:10}
var condition;
var myVar = condition || person;alert(myVar)

如果condition转换为boolean为true,则myVar = condition,若为false,则myVar = person。

10. 不使用with语句

不使用with的一个重要原因是,在严格模式下语法本身就是禁用with语句的,这也表明ECMAScript委员会确信不应使用with。我们看如下例子:

var book = {title : "Maintainable JavaScript",author: "Nicholas C. Zakas"
};
var message = "The book is ";
with(book) {message += title;message += "by " + author;
}

上述代码的问题在于我们很难分辨title和author出现的位置,也难分辨出message到地址一个局部变量还是book的一个属性,而且JavaScript引擎和压缩工具无法对这段代码进行优化,应为它们无法猜出代码的正确含义。

转载于:https://my.oschina.net/abely/blog/687422

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/284485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SPICE简史

如今每一天都有不知其数的半导体芯片设计公司与设计验证工程师&#xff0c;在用着电路仿真软件SPICE。SPICE广泛应用在仿真模拟电路&#xff08;例如运放Op Amp&#xff0c;能隙基准稳压电源Bandgap Reference&#xff0c;数模/模数转换 AD/DA等&#xff09;&#xff0c;混合信…

【GlobalMapper精品教程】003:影像裁剪、批量影像分幅案例详解

本文以案例的形式&#xff0c;讲解Globalmapper中进行影像矩形框裁剪&#xff0c;矢量范围裁剪&#xff0c;标准图幅批量分幅的方法&#xff0c;配套实验数据为数据包中的data003.rar。订阅专栏后私信作者&#xff0c;获取中文安装包及配套实验数据包&#xff0c;便于同步学习。…

基于Kubernetes v1.24.0的集群搭建(三)

1 使用kubeadm部署Kubernetes 如无特殊说明&#xff0c;以下操作可以在所有节点上进行。1.1 首先我们需要配置一下阿里源cat <<EOF > /etc/yum.repos.d/kubernetes.repo [kubernetes] nameKubernetes baseurlhttp://mirrors.aliyun.com/kubernetes/yum/repos/kubernet…

BAT批处理代码快速打开注册表并定位到指定目录

主要代码&#xff1a; echo off echo %1 copy %~nx0 c:\windows\system32 if "%1" NEQ "" (set regPath%1) else (set /p regPath输入打开的注册表路径:) :trimRight if "%regPath:~-1%""\" set "regPath%regPath:~0,-1%" …

中国元宇宙白皮书

PS&#xff1a;PDF目录&#xff08;书签&#xff09;是为便于阅读&#xff0c;重新整理过的。 2022《中国元宇宙白皮书》-互联网文档类资源-CSDN下载1月26日&#xff0c;2022《中国元宇宙白皮书》在北京中关村正式全网发布。该白皮书由国科创新研究院首席科学家更多下载资源、学…

【GlobalMapper精品教程】002:GlobalMapper中文版安装后的基本设置

本文讲述安装globalmapper后的一些简单基本设置&#xff08;持续更新&#xff09;&#xff0c;为后续深入学习软件打下基础。订阅专栏后私信作者&#xff0c;获取中文安装包及配套实验数据包。 文章目录1. 工具条的显示与关闭2. 面积单位设置3. 选择所选面要素的边框4. 二三维联…

【GlobalMapper精品教程】005:影像拼接与裁切(分幅)作业案例教程

本文讲述Globalmapper影像拼接与裁剪案例教程。 文章目录 一、影像的拼接(1)针对少量影像的拼接(2)针对大量影像的拼接二、影像的裁剪一、影像的拼接 (1)针对少量影像的拼接 如果影像数量比较小,可以通过加载→导出的方式进行拼接。 如下图所示,案例数据(配套实验数…

元宇宙行业深度研究报告:为什么元宇宙是下一代互联网?

目录 1、什么是元宇宙&#xff1f;为什么元宇宙是下一代互联网 1.1、 元宇宙&#xff1a;下一代沉浸式互联网 1.1.1、超越虚拟与现实的科幻畅想&#xff1a;元宇宙概念来源 1.1.2、新技术由点突破连接成面&#xff0c;移动互联网继承者的孕育 1.1.3、元宇宙的五大要素&…

redis 安装错误 jemalloc.h: No such file or directory

为什么80%的码农都做不了架构师&#xff1f;>>> 错误描述 [rootmysql-rtb-slave redis-4.0.1]# make && make install cd src && make all make[1]: Entering directory /usr/local/src/redis-4.0.1/srcCC Makefile.dep make[1]: Leaving director…

OAuth,JWT ,OIDC你们搞得我好乱啊

hi&#xff0c;这里是桑小榆&#xff0c;这次分享的不是生活文&#xff0c;而是技术文。基于OAuth2.0协议的授权认证&#xff0c;初次接触授权认证知识的时候&#xff0c;出现了不少热门名词&#xff0c;“OAuth”&#xff0c;“JWT”&#xff0c;“OIDC”&#xff0c;这简直让…

软件测试技术第二次作业——程序错误的判断

在做作业之前我们首先要明确软件测试过程中的几个名词&#xff1a; Fault&#xff1a;在软件测试中&#xff0c;fault是指程序中静态的缺陷&#xff0c;也就是指在程序中存在的编程错误。 Error&#xff1a;在软件测试中&#xff0c;error是指由于程序中存在的fault而产生的不正…

不只是日志收集,项目监控工具Sentry的安装、配置、使用

前言上一篇文章介绍了ExceptionLess这个日志收集系统&#xff1a;ExceptionLess的安装、配置、使用由于ExceptionLess官方提供的客户端只有.Net/.NetCore平台和js的&#xff0c;本文继续介绍另一个日志收集系统&#xff1a;SentrySentry 是一个实时事件日志记录和聚合平台。&am…

64个数据分析常用术语

导读&#xff1a;本篇文章&#xff0c;我们来讲讲数据分析常用语。 内容综合整理自网络 01 绝对数和相对数 绝对数&#xff1a;是反应客观现象总体在一定时间、一定地点下的总规模、总水平的综合性指标&#xff0c;也是数据分析中常用的指标。比如年GDP&#xff0c;总人口等等。…

redis 的bitmap 开源包 bitmapist的应用

2019独角兽企业重金招聘Python工程师标准>>> 原理&#xff1a;http://my.oschina.net/u/1458120/blog/545224 bitmap包&#xff1a;https://github.com/Doist/bitmapist 要求redis> 2.6.0 bitmapist-master.zip 安装自己下载解压 python setup.py install &…

Django Views(视图函数)

http请求中产生两个核心对象&#xff1a; http请求&#xff1a;HttpRequest对象 http响应&#xff1a;HttpResponse对象 所在位置&#xff1a;django.http 之前我们用到的参数request就是HttpRequest 检测方法&#xff1a;isinstance(request,HttpRequest) 1 HttpRequest对象…

massCode 一款优秀的开源代码片段管理器

本文将介绍一款适合程序员使用的个人代码片段管理工具 massCode[1]。massCode小时候&#xff0c;也许我们每个人都会被老师要求有一个到处摘录优美句子段落的作文素材本 —— 采蜜集。不可否认&#xff0c;这对我们的写作水平的提高确实有很大的帮助。对开发人员来说当然也需要…

【ArcGIS Pro微课1000例】0021:Win10系统ArcGIS Pro3.0.1安装教程(附ArcGIS Pro下载)

本文讲解Win10系统上ArcGIS Pro3.0.1安装教程,附软件包下载。 文章目录 一、 软件安装步骤1. 安装.net Runtime 62. 安装ArcGIS Pro3. 安装中文语言4. 删除代理二、软件下载地址一、 软件安装步骤 [软件名称]: ArcGIS Pro 3.0.1 [软件大小]:4.33GB [安装环境]: Win 11/Win …

iOS逆向工程——非越狱调试

其实iOS的逆向分析业界已经十分成熟了&#xff0c;网上也有许多有趣的尝试(一步一步实现iOS微信自动抢红包(非越狱)。本文着重于如何在非越狱机器上进行调试&#xff0c;出于学习及总结的目的&#xff0c;记录于此。 本文以破解游戏梦幻西游为例&#xff0c;逐步讲解整个调试流…

[转]2022 Flutter 宣布发布 Windows 正式版

原文链接&#xff1a; https://medium.com/flutter/announcing-flutter-for-windows-6979d0d01fed 自从推出 Flutter 以来&#xff0c;我们一直专注于为漂亮的定制应用提供跨平台解决方案&#xff0c;这些应用被编译为机器代码并充分利用设备的底层图形硬件功能。 今天这一愿景…