JavaScript语法约定和程序调试原理解析

 更新时间:2020年11月03日 10:57:17   作者:汪末末  
这篇文章主要介绍了JavaScript语法约定和程序调试原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

JavaScript 语法约定

1、大小写的区分

1). JavaScript的关键字,永远都是小写的;

2). 内置对象,如Math和Date是以大写字母开头的;

3). 对象的名称通常是小写;若是多个单词,驼峰(Camel)命名法。

驼峰(Camel)命名法:开头单词小写,后面单词首字母大写。使用的很普遍,很多人习惯这种命名方法。示例:userName。

2、变量、对象和函数的名称命名

当声明变量、对象和函数的名称时大小写,数字,下划线,美元符号都可以,但是必须以字母,下划线,美元符号开头。否者会出现Uncaught SyntaxError类型的错误提示。

3、分号 ";"

JavaScript允许开发者自行决定是否以分号结束一行代码。
如果没有分号,JavaScript就将行代码的结尾看作该语句的结尾,不会报错。但最好每写完一行代码就加上";" 作为结尾。

4、运算符周围的空格

在运算符( = + - * / )周围以及逗号之后添加空格,如下:

var a = 2 + 5;var arr = ["a", "b", "c"];

5、代码缩进

使用对代码块缩进使用 4 个空格,使代码块更加清晰。如以下格式:

function isFunny(){
  var isTrue=true;
	if(isTrue){
		console.log("你是对的");
	}
}

JavaScript 语法约定的特点:

  • 善代码可读性
  • 提升代码可维护性

JavaScript 程序调试

1、打开浏览器,按F12进入调试界面:

Elements:用于查看和编辑当前页面中的HTML和CSS元素。

Console:用于显示脚本中所输出的调试信息,或运行测试脚本等。

Sources:用于查看和调试当前页面所加载的脚本的源文件。在source目录下进行调试。在该模式下,点击js里每一行即可以加断点。


断点调试细节后续讲到!!!

  • Network:用于查看HTTP请求的详细信息,如请求,响应及返回内容等。
  • Timeline:用于查看脚本的执行时间,页面元素渲染时间等信息。
  • Profiles:用于查看CPU执行时间与内存占用等信息。
  • Resource:用于查看当前页面所请求的资源文件,如HTML,CSS样式等。
  • Audits: 用于优化前端页面,加速网页加载速度等。

2、用alert,每次都弹框判断出错的位置

alert() 会阻塞 UI 和 alert() 以下的 javascript 代码的执行,必须点击 '确定' 按钮才能继续,非常低效。当使用 alert() 进行弹出时,最后产品上线后,会降低用户体验。

3、用console.log,这个数据量小还可以,调试时console.log是最常用的命令之一。

console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,console.log()也可以接受换行符\n以及制表符\t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为可能会有所不同。

以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! 😄 后续继续更新!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解如何在JavaScript中使用装饰器

    详解如何在JavaScript中使用装饰器

    Decorator装饰器是ES7的时候提案的特性,目前处于Stage 3候选阶段(2022年10月)。装饰器简单来说就是修改类和类方法的语法糖,很多面向对象语言都有装饰器这一特性。本文就来说说如何在JavaScript中使用装饰器,需要的可以参考一下
    2022-10-10
  • js登录滑动验证的实现(不滑动无法登陆)

    js登录滑动验证的实现(不滑动无法登陆)

    下面小编就为大家分享一篇js登录滑动验证的实现(不滑动无法登陆),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • dedecms页面如何获取会员状态的实例代码

    dedecms页面如何获取会员状态的实例代码

    下面小编就为大家带来一篇dedecms页面如何获取会员状态的实例代码。一起跟随小编过来看看吧,希望对大家有所帮助。
    2016-03-03
  • Javascript 对象(object)合并操作实例分析

    Javascript 对象(object)合并操作实例分析

    这篇文章主要介绍了Javascript 对象(object)合并操作,结合实例形式分析了javascript基于jQuery的extend方法、对象属性、遍历赋值等操作实现对象合并相关操作技巧与使用注意事项,需要的朋友可以参考下
    2019-07-07
  • Summernote实现图片上传功能的简单方法

    Summernote实现图片上传功能的简单方法

    下面小编就为大家带来一篇Summernote实现图片上传功能的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript实现动态改变层大小的方法

    javascript实现动态改变层大小的方法

    这篇文章主要介绍了javascript实现动态改变层大小的方法,涉及javascript操作页面属性的相关技巧,需要的朋友可以参考下
    2015-05-05
  • js如何在字符串中查找某个字符的位置

    js如何在字符串中查找某个字符的位置

    这篇文章主要给大家介绍了关于js如何在字符串中查找某个字符的位置的相关资料,在JavaScript中我们经常需要对字符串进行各种操作,包括查找包含特定字符的字符串,需要的朋友可以参考下
    2023-11-11
  • 利用Js+Css实现折纸动态导航效果实例源码

    利用Js+Css实现折纸动态导航效果实例源码

    这篇文章主要给大家介绍了利用Js+Css实现折纸动态导航的效果,实现后的效果非常不错,文中给出了简单的介绍和完整的实例代码,对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。
    2017-01-01
  • javascript实现瀑布流自适应遇到的问题及解决方案

    javascript实现瀑布流自适应遇到的问题及解决方案

    这篇文章主要介绍了javascript实现瀑布流自适应遇到的问题及解决方案,需要的朋友可以参考下
    2015-01-01
  • js获取url参数值的几种方式详解

    js获取url参数值的几种方式详解

    这篇文章为大家主要介绍了js获取url参数值的几种方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-07-07

最新评论