不唐突的JavaScript的七条准则

合集下载

JavaScript开发规范要求

JavaScript开发规范要求

JavaScript开发规范要求作为一名开发人员(WEB前端JavaScript开发),不规范的开发不仅使日后代码维护变的困难,同时也不利于团队的合作,通常还会带来代码安全以及执行效率上的问题。

本人在开发工作中就曾与不按规范来开发的同事合作过,与他合作就不能用“愉快”来形容了。

现在本人撰写此文的目的除了与大家分享一点点经验外,更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。

当然,如果我说的有不科学的地方还希望各路前辈多多指教。

下面分条目列出各种规范要求,这些要求都是针对同事编码毛病提出来的,好些行业约定的其它规范可能不会再提及。

1、保证代码压缩后不出错对于大型的JavaScript项目,一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理,比如可以利用Google Closure Compiler Service对代码进行压缩,新版jQuery已改用这一工具对代码进行压缩,这一般会去掉开发时写的注释,除去所有空格和换行,甚至可以把原来较长的变量名替换成短且无意义的变量名,这样做的目的是加快文件的下载速度,同时也减小网站访问带来的额外数据流量,另外在代码保护上也起到了一点点作用,至少压缩后的代码即使被还原还是没那么容易一下读懂的。

要想代码能正确通过压缩,一般要求语句都要以分号正常结束,大括号也要严格结束等,具体还要看压缩工具的要求。

所以如果一开始没有按标准来做,等压缩出错后再回去找错误那是浪费时间。

2、保证代码能通过特定IDE的自动格式化功能一般较为完善的开发工具(比如Aptana Studio)都有代码“自动格式”化功能,这一功能帮助实现统一换行、缩进、空格等代码编排,你可以设置自己喜欢的格式标准,比如左大括号{是否另起一行。

达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。

你同事需要阅读你的代码,可能是因为你写的是通用方法,他在其它模块开发过程中也要使用到,阅读你的代码能最深入了解方法调用和实现的细节,这是简单API文档不能达到的效果。

js的七大原则--单一原则、开闭原则、替换原则(一)

js的七大原则--单一原则、开闭原则、替换原则(一)

js的七⼤原则--单⼀原则、开闭原则、替换原则(⼀)⼀.前⾔:js 的七⼤设计原则:1.单⼀原则2.开闭原则3.⾥⽒替换原则4.依赖倒转原则5.接⼝隔离原则6.合成复⽤原则7.迪⽶尔法则⼆.单⼀原则1.定义:单⼀原则就是⼀个对象或者⼀个⽅法,只做⼀件事。

⽐如,⽬前公司的前端框架,如下图:在src中api只是做接⼝层,assets⾥⾯是公共的⽅法,components是⽤来放组件的,⾥⾯的base和business分别存放的是基础组件和业务组件,mixins是⽤来存放混⼊的东西的。

store⽂件时⽤来放vuex中的东西的,style⽂件是⽤来存放样式的。

每个⽂件都有各⾃的职责,也都只负责⼀件事情。

这就符合单⼀职责的。

遵循单⼀职责的优点:1.可以降低类的复杂度,⼀个类只负责⼀项职责,其逻辑肯定要⽐负责多项职责简单的多。

2.提⾼类的可读性,提⾼系统的可维护性。

3.变更引起的风险降低,变更时必然的,如果单⼀职责原则遵守的好,当修改⼀个功能时,可以显著降低对其他功能的影响。

三.开闭原则尽量通过扩展软件实体来解决需求变化,⽽不是通过修改已有的代码来完成变化。

⼀个软件产品的⽣命周期内,都会发⽣变化,既然变化是⼀个既定的事实,我们就应该在设计的时候,尽量的适应这些变化。

以提⾼项⽬的稳定性和灵活性。

四.⾥⽒替换原则严格的定义:如果对每⼀个类型为T1的对象o1,都有类型为T2的对象o2,使得以T1定义的所有程序p在所有的对象o1都换成o2的时候,程序p的⾏为没有变化,那么类型T2就是类型T1的⼦类型。

通俗的定义:所有引⽤基类的地⽅必须能透明地使⽤其⼦类的功能。

更通俗的定义:⼦类可以扩展⽗类的功能,但是不能改变⽗类原有的功能。

⾸先来看⼀个例⼦,看它是否满⾜“⾥⽒替换”的原则//定义⼀个矩形类class Rectangle {constructor() {this.width=0;this.height=0;}setWidth(width) {this.width = width}setHeight(height) {this.height = height}getArea() {return this.width * this.height}}//定义⼀个正⽅形类,继承于矩形类class Square extends Rectangle {constructor() {super();}setWidth(width) {this.width = width;this.height = width;}setHeight(height) {this.height = heightthis.width = height}}// 执⾏的⽅法function result(rectangles) {rectangles.forEach((rectangle) => {rectangle.setHeight(5)rectangle.setWidth(4)let area = rectangle.getArea()console.log('area', area)})}let rectangles = [new Rectangle(), new Rectangle(), new Square()];result(rectangles) //结果是20 ,20, 16在我当初看到这个代码的时候,我的疑惑点在于为什么正⽅形求⾯积是16。

js 规范

js 规范

js 规范JavaScript(简称JS)是一种广泛用于动态网页编程的脚本语言。

为了保持代码的一致性和可读性,编写高质量的JavaScript代码是非常重要的。

下面是一些常见的JavaScript编码规范,可以帮助开发人员编写清晰、易于维护的代码。

1. 使用严格模式:在每个JavaScript文件的顶部使用"use strict"指令启用严格模式。

严格模式可以检测并修复一些常见的编码错误,并提供更好的代码优化。

2. 缩进和格式化:使用4个空格作为缩进的标准,并始终在代码块、对象和数组的每个元素之间留出空格。

这样可以提高可读性,并使代码更易于理解。

3. 命名约定:使用驼峰命名法(camelCase)来命名变量、函数和对象。

避免使用单个字符或者无意义的命名。

同时,使用有意义的变量和函数名可以增加代码的可读性。

4. 注释:在代码中使用注释来解释代码的功能和设计理念。

对于复杂的逻辑或者非常重要的代码块,最好添加注释。

这可以帮助其他开发人员更容易地理解你的代码。

5. 函数和方法的使用:函数和方法的命名应具有描述性和一致性。

确保每个函数只完成一个特定的任务,并保持函数的代码行数尽可能的小。

6. 变量和常量的声明:使用关键字const来声明不可变的常量。

对于可变的变量,使用关键字let。

这样可以提高代码的可维护性并防止意外的值改变。

7. 避免使用全局变量:全局变量容易导致命名冲突和意外的代码副作用。

优先使用局部变量,并将变量的作用范围尽可能限制在最小范围内。

8. 条件语句和循环结构:在条件语句和循环结构中使用大括号{}来明确代码块的边界。

这样可以避免潜在的错误,并提高代码的可读性。

9. 错误处理:在代码中使用try-catch语句来处理潜在的错误和异常。

这可以确保代码在发生错误时仍然能够正常运行,并提供错误信息。

10. 引号的使用:对于字符串,使用单引号''或双引号""没有差别,但要保持一致。

js代码规范

js代码规范

js代码规范JavaScript代码规范(1000字)JavaScript是一种广泛使用的脚本语言,具有灵活性和强大的功能。

为了使代码可读性更好、易于维护和共享,遵循一定的代码规范是非常重要的。

下面是一些常用的JavaScript代码规范。

1. 缩进:使用4个空格作为缩进。

不要使用制表符。

2. 空格:在运算符和操作数之间使用空格,使代码更易读。

3. 大括号:在if、for、while等语句中始终使用大括号。

即使语句只有一行,也应使用大括号。

这样可以减少错误,并提高代码的可读性。

4. 变量命名:使用驼峰命名法(camel case)命名变量和函数。

变量名应具有描述性,并遵循一致的命名约定。

5. 常量命名:使用全大写字母和下划线命名常量。

示例:MAX_LENGTH。

6. 注释:使用注释来解释代码的目的和用途。

对于复杂的代码块或特殊的算法,添加详细的注释是非常重要的。

7. 函数:函数应该具有描述性的名字,并且只完成一个任务。

函数应该尽量保持简短,并避免嵌套过深。

8. 字符串:使用单引号或双引号括起字符串,并保持一致。

示例:var name = 'John';。

9. 变量声明:始终使用var关键字声明变量。

这样可以提高代码的可读性,并避免变量泄漏到全局作用域。

10. 分号:在每条语句的末尾添加分号。

这样可以避免出现一些难以排查的错误。

11. 引号:避免在对象字面量中使用引号。

示例:var person = {name: 'John', age: 30};。

12. 布尔类型:避免使用布尔类型的构造函数。

示例:var isValid = true;。

13. 比较运算符:使用全等(===)和不全等(!==)运算符进行比较。

不要使用双等号(==)进行比较。

14. 避免全局变量:避免在全局作用域中定义变量。

将变量封装在函数内部,以减少变量冲突和增加代码的可维护性。

15. 异常处理:在可能引发错误的代码块中使用try-catch语句来处理异常。

JavaScript前端项目的质量保证

JavaScript前端项目的质量保证

JavaScript前端项目的质量保证在现代的软件开发过程中,质量保证是至关重要的一环。

对于JavaScript前端项目而言,质量保证可以确保项目的稳定性、可靠性和性能表现,为用户提供优质的使用体验。

本文将介绍一些常用的JavaScript前端项目质量保证措施,包括代码规范、自动化测试和性能优化等方面。

一、代码规范良好的代码规范是保证代码质量的基础。

对于JavaScript前端项目而言,可以采用以下规范来规范代码编写:1. 缩进和空白:使用统一的缩进风格和空白符,例如使用四个空格来缩进代码块。

2. 命名规范:使用有意义的变量和函数命名,避免使用过于简单或者难以理解的命名。

3. 注释规范:添加适当的注释来解释代码的作用和思路,方便他人理解和维护代码。

4. 避免全局变量:尽量减少使用全局变量,避免命名冲突和不可预测的副作用。

5. 异常处理:合理处理可能出现的异常情况,避免程序崩溃或者产生错误结果。

6. 文件组织结构:按照模块和功能进行代码文件的组织,便于维护和扩展。

二、自动化测试自动化测试是保证项目质量的重要手段之一。

对于JavaScript前端项目而言,可以采用以下自动化测试方式:1. 单元测试:编写单元测试代码,对项目中的每个功能模块进行测试,确保其功能的正确性。

2. 集成测试:将各个功能模块进行集成测试,测试它们之间的交互和兼容性。

3. UI测试:使用自动化测试工具模拟用户交互行为,测试用户界面的正确性和响应速度。

4. 性能测试:使用性能测试工具对前端项目进行压力测试,评估其性能表现和稳定性。

自动化测试可以提早发现潜在的问题和缺陷,减少人工测试的工作量,提高项目的稳定性和可靠性。

三、性能优化性能优化是保证前端项目用户体验的重要环节。

下面是一些常用的性能优化技巧:1. 代码压缩:使用压缩工具对JavaScript代码进行压缩,减小文件体积,提升加载速度。

2. 静态资源缓存:将静态资源(如图片、样式表)添加缓存头,利用浏览器缓存机制减少请求次数。

javascript规范

javascript规范

javascript规范JavaScript是一种广泛用于Web开发的编程语言,因其灵活性和易学性而成为了开发者的首选。

为了使代码清晰、易读、易于维护,制定了一些JavaScript规范。

本文将介绍一些常见的JavaScript规范,以帮助开发者写出更好的代码。

1. 变量和函数命名变量和函数的命名应该具有描述性,并且尽量避免使用简写。

同时,应使用驼峰命名法,即首字母小写,后续每个单词的首字母大写。

2. 缩进代码应该使用四个空格进行缩进。

可以在代码编辑器中设置自动缩进功能。

3. 空格在运算符(如=、+、-等)周围使用空格,例如:var x = y + z。

在逗号前不加空格,逗号后加一个空格。

4. 分号每行代码的末尾应添加分号。

这有助于提高代码的可读性,并防止一些意外的错误。

5. 注释对于代码中关键部分的注释是很重要的。

对于复杂的逻辑,应该用注释解释每个步骤的目的。

另外,注释也可以用来标明代码的作者、日期和版本号。

6. 变量声明变量应该在使用前首次声明,并且应该使用let或const关键字进行声明。

尽量避免使用var关键字。

7. 字符串应该使用单引号或反引号而不是双引号来定义字符串。

如果字符串中包含变量或表达式,应使用反引号。

例如:`Hello, ${name}!`8. 对象和数组对象和数组的定义应在一行内写完,而不是换行。

每个属性或元素在下一行单独缩进一次。

9. 条件语句条件语句的代码块应该使用花括号括起来,即使代码块只有一行。

这样可以提高代码的可读性和可维护性。

10. 函数函数应该有明确的输入和输出,并且每个函数只完成一个特定的任务。

函数的代码块应该缩进,并且最好在函数的开始处添加注释,解释函数的作用和参数的含义。

11. 模块化JavaScript中的模块化有助于将代码拆分成更小的、可重用的部分。

应该使用ES6的模块化语法,即使用import和export 关键字来导入和导出模块。

12. 错误处理对可能发生错误的代码应进行适当的错误处理。

javascript语法规则

javascript语法规则

javascript语法规则
JavaScript语法规则如下:
1. 变量声明:使用var、let、const关键字声明变量。

2. 标识符:使用字母、数字、下划线、美元符号组成,首字母不能是数字。

3. 语句与表达式:语句用于执行操作,表达式用于计算值。

语句以分号结束,表达式以值或变量结束。

4. 注释:双斜杠(//)表示单行注释,斜杠加星号(/*)与星
号加斜杠(*/)表示多行注释。

5. 数据类型:包括基本数据类型(Number、String、Boolean、Null、Undefined、Symbol)和复杂数据类型(Object)。

6. 操作符:用于计算值或操作数据,包括算术、比较、逻辑、赋值、位运算等操作符。

7. 函数:用于封装一些操作,为数据提供操作接口,函数可以接受参数并返回值。

8. 控制流程:包括条件语句(if、else、switch)、循环语句(for、while、do...while)、跳转语句(break、continue、return)。

9. 对象:JavaScript中的每个东西都是对象。

对象是由键值对
组成的,键是字符串类型,值可以是任意类型的数据。

对象可以扩展和修改。

10. 数组:数组是一种有序的列表,存储着一系列的值,每个
值都可以通过索引来访问。

11. Class:ES6新增了Class关键字,用于实现面向对象编程。

类定义了一组描述对象物理属性和方法的标准。

以上是JavaScript的一些基本语法规则,但实际上JavaScript 是一门灵活多变的语言,它有很多骚操作和技巧,需要不断的学习和实践才能写出优秀的代码。

js命名规则范文

js命名规则范文

js命名规则范文JavaScript 命名规则是为了让代码易于阅读、理解和维护。

以下是一些常用的 JavaScript 命名规则:1.变量和函数名应使用有意义的单词或短语,避免使用无意义的简写或缩写。

这有助于提高代码的可读性和可维护性。

2.变量和函数名应以小写字母开头。

驼峰命名法是一种常见的命名约定,其中第一个单词的首字母小写,后续单词的首字母大写。

例如:firstName, getUserName。

3.常量名通常全部大写,并使用下划线分隔单词。

例如:MAX_SIZE,PI。

4. 类名应以大写字母开头,每个单词的首字母也应该大写。

例如:Person, Car。

5. 避免使用 JavaScript 的保留字(如 if、for、while)作为变量名或函数名,以免发生冲突。

6.避免使用单个字符作为变量名,除非该字符用于迭代器或者临时变量。

8. 对于数组变量名,最好使用复数形式,以清楚地表示其为一个数组。

例如:users。

9. 在函数名中,应使用动词或动词短语,以清楚地表示其执行的操作。

例如:getUserData, calculateTotal。

10.当使用缩写时,应保持一致性,并使用大写字母来表示缩写的各个单词。

例如:HTML,URL。

11. 对于具有相同目的的变量,应使用统一的命名模式,以简化代码的阅读和理解。

例如:inputElement, submitButton。

12. 避免使用诸如 "tmp"、"foo"、"bar" 之类的一般性或无意义的命名,以免引起混淆。

13.如果代码需要与第三方库或框架进行交互,建议遵循其命名规则,以保持代码的一致性。

命名规则的遵守使得代码易于阅读和维护。

通过为变量、函数和类使用明确且有意义的命名,可以提高代码的可读性,并使其更易于理解所执行的操作。

同时,使用一致的命名模式可以减少代码中的混乱和疑惑,从而提高代码的可维护性和可重用性。

js书写规范

js书写规范

js书写规范JavaScript(简称JS)是一种用于网页开发的脚本语言,具有广泛的应用。

为了保持代码的可读性,提高代码质量和维护的效率,采用一定的书写规范是非常重要的。

下面是关于JavaScript编码规范的一些建议,以保证代码的一致性和可读性。

1. 代码缩进:- 使用4个空格来缩进代码块,而不是使用制表符(tab键)。

- 缩进应该是通过空格键来实现,而不是使用制表符。

2. 行长度:- 一行的长度应该限制在80个字符以内。

超出部分应该换行,可以使用 `\` (反斜线)将一行代码分为多行。

3. 命名规范:- 变量和函数名应该使用驼峰命名法(camel case),例如`myVariable`。

- 对于常量,应该使用全大写字母和下划线的组合,例如`MAX_SIZE`。

- 类名应该使用帕斯卡命名法(Pascal case),即每个单词的首字母都大写,例如 `MyClass`。

- 命名应该具有描述性,避免使用缩写和无意义的名称。

4. 空格的使用:- 在赋值、运算符和函数参数之间使用空格,例如 `var x = 10;`。

- 函数的参数列表前后应该有一个空格,例如 `function myFunction(arg1, arg2) { }`。

- 在控制结构(如if、while、for)的关键字后使用一个空格,例如 `if (condition) { }`。

- 在逗号后使用一个空格,例如 `var array = [1, 2, 3];`。

- 一元运算符的前后应该有一个空格,例如 `x++;`。

5. 括号的使用:- 在函数声明和函数调用时,括号应该紧挨着函数名,例如`function myFunction() { }` 和 `myFunction();`。

- 在控制结构内的代码块前后应该有括号,即使代码块只有一行。

- 如果一个代码块功能性不强,可以使用 `doSomething();` 的形式,省略大括号。

JavaScript的代码规范

JavaScript的代码规范

JavaScript的代码规范作为一门常用且灵活的编程语言,JavaScript能够为网页开发带来很多便利。

然而,由于其灵活性,JavaScript代码往往容易出现混乱和难以维护的问题。

为了提高代码的可读性和可维护性,制定并遵守一套良好的JavaScript代码规范是至关重要的。

一、命名规范1. 变量名、函数名和方法名应该使用驼峰命名法,即首字母小写,后续单词首字母大写。

例如:firstName。

2. 常量名应该全部大写,多个单词之间用下划线(_)分隔。

例如:MAX_COUNT。

3. 类名应该使用帕斯卡命名法,即首字母大写,后续单词首字母大写。

例如:Person。

二、缩进和空格1. 使用两个空格进行缩进,并确保在代码块之间的一致性。

2. 操作符前后应该加上空格,例如:var x = y + z;。

3. 在大括号({})前使用一个空格,例如:if (x > 0) {。

4. 在逗号(,)后面使用一个空格,例如:var fruits = ['apple', 'banana', 'orange'];。

三、注释规范1. 使用注释来解释代码的意图和功能,提高代码的可读性。

2. 使用单行注释(//)或多行注释(/* */)来注释代码。

3. 在函数、类和方法的上方使用多行注释来说明其功能和输入输出。

四、代码格式1. 所有语句结尾都应该加上分号(;),即使在可选的情况下也应该如此。

2. 在逻辑行结束后换行,不要过长的一行代码。

3. 在操作符之间使用空格,但在逗号后不需要加上空格。

4. 使用合理的缩进,保持代码块的整洁和可读性。

五、变量和常量声明1. 使用var来声明变量,避免使用全局变量。

2. 在函数或代码块的顶部声明变量,避免变量声明的提升带来的问题。

3. 声明变量时给其赋初值,避免出现undefined的情况。

4. 使用const或let来声明常量或块级作用域的变量,以提高代码的可维护性。

JavaScript 代码规范总结

JavaScript 代码规范总结

JavaScript 代码规范目录1、常见代码规范 (2)2、空格与运算符 (2)3、变量名 (2)4、代码缩进 (2)5、语句规则 (3)6、对象规则 (3)7、每行代码字符小于 80 (4)8、命名规则 (4)9、使用 JavaScript 访问 HTML 元素 (5)10、HTML 载入外部 JavaScript 文件 (5)11、文件扩展名 (5)12、使用小写文件名 (5)1、常见代码规范代码规范通常包括以下几个方面:1.1变量和函数的命名规则1.2空格,缩进,注释的使用规则。

规范的代码可以更易于阅读与维护。

代码规范一般在开发前规定,可以跟你的团队成员来协商设置。

2、空格与运算符通常运算符 ( = + - * / ) 前后需要添加空格:3、变量名变量名推荐使用驼峰法来命名(camelCase):4、代码缩进通常使用 4 个空格符号来缩进代码块:不推荐使用 TAB 键来缩进,因为不同编辑器 TAB 键的解析不一样。

5、语句规则简单语句的通用规则:• 5.1一条语句通常以分号作为结束符。

复杂语句的通用规则:• 5.1将左花括号放在第一行的结尾。

• 5.2左花括号前添加一空格。

• 5.3将右花括号独立放在一行。

• 5.4不要以分号结束一个复杂的声明。

6、对象规则对象定义的规则:6.1将左花括号与类名放在同一行。

6.2冒号与属性值间有个空格。

6.3字符串使用双引号,数字不需要。

6.4最后一个属性-值对后面不要添加逗号。

6.5将右花括号独立放在一行,并以分号作为结束符号。

7、每行代码字符小于 80为了便于阅读每行字符建议小于数 80 个。

如果一个 JavaScript 语句超过了 80 个字符,建议在运算符或者逗号后换行。

8、命名规则一般很多代码语言的命名规则都是类似的,例如:8.1变量和函数为小驼峰法标识, 即除第一个单词之外,其他单词首字母大写(lowerCamelCase)8.2全局变量为大写 (UPPERCASE )8.3常量 (如 PI) 为大写 (UPPERCASE )9、使用 JavaScript 访问 HTML 元素一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

js开发规范

js开发规范

js开发规范JavaScript开发规范(1000字)1. 缩进和空格:- 请使用四个空格作为一个缩进层级。

- 在函数、条件语句和循环语句内部,请使用换行符并且适当缩进,以提高代码的可读性。

2. 命名规范:- 变量和函数名请用小驼峰命名法(camelCase)。

- 类名请用大驼峰命名法(PascalCase)。

- 常量名请使用全大写字母和下划线分隔(UPPER_CASE)。

3. 代码注释:- 对于复杂的代码逻辑,请添加适当的注释以解释代码的意图和功能。

- 注释应该清晰、简洁,并使用正确的英语语法和拼写。

- 对于一些核心功能的注释,请务必详细解释其中的算法和思路。

4. 函数定义和调用:- 函数定义时请适当添加参数的类型信息。

- 调用函数时请确保函数名和参数之间有空格。

- 如果一个函数有多个参数,请按照从左到右的顺序依次列出参数。

5. 条件语句和循环语句:- 条件语句的括号内部请加上空格,例如:if (condition)。

- 在if语句的块状部分请使用大括号{},即使只有一行代码。

- 循环语句的条件部分请加上空格,例如:for (let i = 0; i < 10; i++)。

6. 异常处理:- 对于可能抛出异常的代码,请使用try-catch语句进行包裹并进行相应的处理。

- 在catch语句中,请尽量使用具体的异常类型进行异常处理,并提供相应的错误信息。

7. 类和对象定义:- 类的属性请定义在类的构造函数内部,并使用this关键字进行引用。

- 类的方法请定义在类的原型对象上。

- 对象的属性和方法请使用点号(.)进行引用。

8. 引用和依赖:- 对于外部库和模块的引用,请使用明确的路径,并确保路径信息的正确性。

- 尽量避免在全局作用域下直接引用外部库和模块,而是将其封装在函数内部,以避免命名冲突。

9. 内存管理:- 在函数内部使用完变量后,请适时释放其占用的内存,以提高性能。

- 对于大型数组和对象,请在使用完成后及时将其置为null,以释放内存空间。

javascript的基本语法遵循的标准

javascript的基本语法遵循的标准

javascript的基本语法遵循的标准JavaScript是一种弱类型的语言,它与其他编程语言不同,有着自己独特的规则和语法。

虽然JavaScript具有许多功能,但由于其脆弱性,它也需要遵循一定的规则和标准,以确保其程序的正确性,以及更安全地使用它。

首先,JavaScript的语法可以分为三个主要部分:变量、函数和对象。

其中,变量定义了程序变量的类型,函数定义了定义的程序功能,而对象则用来定义变量和函数的上下文。

对于变量,JavaScript遵循ECMAScript的变量命名规范。

这一规范要求变量的名称必须以字母开头,并且允许使用字母、数字、下划线和美元符号($)。

但不允许使用关键字。

其次,JavaScript遵循ECMAScript函数定义规范。

函数定义规范要求函数名必须以字母开头,并且允许使用字母、下划线和美元符号($),但不允许使用数字开头。

此外,函数定义规范要求函数参数必须以括号中列出。

最后,JavaScript还遵循ECMAScript对象定义规范,它要求对象的名称必须以驼峰命名法来编写,并且允许使用字母、数字、下划线和美元符号($),但不允许使用关键字。

此外,JavaScript还有另外一些标准,如JavaScript的书写规范、命名规范、数据类型的限制、基本运算符的使用规则、以及逻辑运算符的使用规则等。

以上是JavaScript的基本语法遵循的标准。

虽然JavaScript具备较弱的语法,但在写程序时,我们仍然需要遵循这些基本规则和标准,以确保程序的正确性、可读性和可扩展性。

只有这样,我们才能创造出更好的程序,并将JavaScript的强大功能发挥到极致。

js的语法核心标准

js的语法核心标准

js的语法核心标准JavaScript是一种广泛应用于网页开发的编程语言,它具有一套语法核心标准,掌握这些标准对于编写高效、可靠的JavaScript代码非常重要。

1. 变量声明和赋值:在JavaScript中,可以使用var、let或const关键字声明变量。

变量可以存储各种类型的值,包括字符串、数字、布尔值等。

赋值可以使用等号进行,例如:var x = 5;2. 数据类型:JavaScript支持各种数据类型,包括字符串、数字、布尔值、数组、对象和函数等。

了解每种数据类型的特点和用法可以更好地处理数据操作和逻辑运算。

3. 运算符:JavaScript包含了一系列运算符,可以用于进行算术运算、比较、逻辑运算等。

常见的运算符包括加减乘除、等于、不等于、大于、小于等。

掌握运算符的优先级和使用方法,可以编写出更复杂的表达式和条件语句。

4. 控制流程:JavaScript提供了多种控制流程语句,如条件语句、循环语句和跳转语句等。

条件语句包括if语句和switch语句,用于根据不同条件执行不同的代码块。

循环语句如for循环和while循环可以重复执行一段代码。

跳转语句如break和continue可以改变代码的执行流程。

5. 函数:函数是JavaScript编程中的重要部分,可以封装一段可重用的代码,并且可以接受参数和返回值。

定义函数使用关键字function,例如:function add(a,b) { return a + b; }。

6. 对象和原型:JavaScript是一门基于对象的语言,对象是一种包含属性和方法的数据结构。

通过创建对象和使用原型链,可以实现面向对象的编程,将代码组织得更清晰和可维护。

总结起来,了解JavaScript语法核心标准可以帮助开发者编写清晰、高效的JavaScript代码,并且能够更好地理解和应用现有的JavaScript库和框架。

不断学习和实践JavaScript语法,将有助于提升开发技能和解决问题的能力。

超详细的JavaScript基本语法规则

超详细的JavaScript基本语法规则

超详细的JavaScript基本语法规则⽬录01 JavaScript (简称:js)js分三个部分:JavaScript是什么?js的代码可以分三个地⽅写:02 操作符操作符:⼀些符号-----⽤来计算关系运算符:关系运算表达式:逻辑运算符:逻辑运算表达式:03 JS变量变量名的注意问题—变量名的命名:04 JS变量作⽤05 JS变量的交换使⽤第三⽅的变量进⾏交换第⼆种⽅式交换:⼀般适⽤于数字的交换06 注释注释的⽅式:07 JS的数据类型值类型(基本类型):引⽤数据类型:08 JS的数字类型09进制js中可以表⽰哪些进制呢?10 NaN不要⽤NaN验证是不是NaN如何验证这个结果是不是NaN,应该使⽤isNaN()判断结果不是⼀个数字可以使⽤isNaN(变量名)11 类型转换1.parseInt();//转整数2.parseFloat()//转⼩数3.Number();//转数字其他类型转字符串类型1 .toString()其他类型转布尔类型12 JS基本的代码规范01 JavaScript (简称:js)js分三个部分:ECMAScript 标准----js的基本的语法DOM------Document Object Model ⽂档对象模型BOM------Browser Object Model 浏览器对象模JavaScript是什么?是⼀门脚本语⾔(不需要编译,直接执⾏,常见的脚本语⾔:t-sql,cmd)是⼀门解释性语⾔是⼀门动态类型的语⾔是⼀门基于对象的语⾔注意:1.编译语⾔是需要把代码翻译成计算机所认知的⼆进制语⾔,才能够执⾏2.前端基础是HTML(标记语⾔,展⽰数据的)CSS(美化页⾯)JavaScript(⽤户和浏览器交互)这三⼤块js原名不是JavaScript,⽽是LiveScriptjs的作⽤?解决⽤户和浏览器之间的交互的问题js的代码可以分三个地⽅写:1.在html的⽂件中,script的标签中写js代码2.js代码可以在html的标签中写<script>//js代码alert("好好学习,天天向上"); //在页⾯中弹出对话框</script><input type="button" value="按钮" onclick="alert('被点了');"/>3.在js⽂件中可以写js代码,但是需要在html的页⾯中引⼊ script的标签中的src="js的路径"02 操作符操作符:⼀些符号-----⽤来计算算数运算符: + - * / %算数运算表达式:由算数运算符连接起来的表达式⼀元运算符: 这个操作符只需要⼀个操作数就可以运算的符号 ++ –⼆元运算符: 这个操作符需要两个操作数就可以运算,三元运算符: 条件表达式?表达式1:表达式2复合运算符: += -= *= /= %=复合运算表达式:由复合运算符连接起来的表达式var num=10;num+=10;------>就是:num=num+10;console.log(num);20赋值运算符: =关系运算符:> < >= <===不严格的===严格的!=不严格的不等!==严格的不等关系运算表达式:由关系运算符连接起来的表达式关系运算表达式的结果是布尔类型逻辑运算符:&&—逻辑与–并且||—逻辑或—或者!—逻辑⾮—取反–取⾮逻辑运算表达式:由逻辑运算符连接起来的表达式表达式1&&表达式2如果有⼀个为false,整个的结果就是false表达式1||表达式2如果有⼀个为true,整个的结果为true!表达式1表达式1的结果是true,整个结果为false表达式1的结果是false,整个结果为truevar num1=10;var num2=20;console.log(num1==num2&&5>6 )var num=20;console.log(num>10||5<0 )var flag=false;console.log(!flag )var num=10;var sum=(num+10)*5;console.log(sumvar result = (4 >= 6 || '⼈' != '狗' && !(12 * 2 == 144) && true) ;console.log(result);var num = 10;var result2 =( 5 == num / 2 && (2 + 2 * num).toString() === '22') ;console.log(result2);v ar num=20;var result=num/3;//num变量与3取余--->10/3的余数console.log(parseInt(result)var num=20;var result=num%3;//num变量与3取余--->10/3的余数console.log(result )var num=10;var sum=(num+10)+1var num = 20;num %= 5;// num=num-5;console.log(num )var str="5";var num=5;console.log(str===num )console.log(5>10);//falseconsole.log(5>=5);//trueconsole.log(5>3);//trueconsole.log(5==10);//false03 JS变量变量名的注意问题—变量名的命名:1.要遵循驼峰命名法(第⼀个单词的⾸字母是⼩写的,后⾯的所有的单词的⾸字母都是⼤写的)2.变量名要有意义3.变量名要规范4.不能使⽤关键字(系统⾃带的⼀些单词,不能使⽤)声明变量并初始化—变量的初始化----声明变量赋值声明了⼀个num的变量存储了⼀个数字100var num=110;输出这个变量的值alert(num);//弹框浏览器的控制台在浏览器中的开发⼈员⼯具中(快捷键:F12)的console的选项中console.log(num);//把内容输出在浏览器的控制台中声明多个变量然后⼀个⼀个的赋值var num1,num2,num3;//声明//依次的赋值num1=10;num2=20;num3=30;声明多个变量并且赋值var num1=10,num2=20,num3=30;var num=10;var $break=10;var shuZi=10;注意:操作的数据都是在内存中操作js中存储数据使⽤变量的⽅式(名字,值—>数据)js中声明变量都⽤var---->存储数据,数据应该有对应的数据类型js中的字符串类型的值都⽤双引号或者单引号04 JS变量作⽤变量的作⽤是存储数据的或者是操作数据变量声明(有var 有变量名字,没有值)变量初始化(有var 有变量名字,有值)变量声明的⽅式:var 变量名字;var number;//变量的声明,此时是没有赋值的,//⼀次性声明多个变量var x,y,z,k,j;//都是声明,没有赋值//变量的初始化(变量声明的同时并且赋值了)// = 的意义:赋值的含义//存储⼀个数字10var number = 10;//存储⼀个5var number2 = 5;//存储⼀个⼈的名字var name = "⼩⿊";//存储真(true)var flag = true;//存储⼀个null--->相当于是空var nll = null;//存储⼀个对象var obj = new Object();05 JS变量的交换使⽤第三⽅的变量进⾏交换var num1=10;var num2=20;// 把num1这个变量的值取出来放在temp变量中var temp=num1;// 把num2这个变量的值取出来放在num1变量中num1=num2;// 把temp变量的值取出来放在num2变量中num2=temp;console.log(num1);//20console.log(num2);//10第⼆种⽅式交换:⼀般适⽤于数字的交换var num1 = 10;var num2 = 20;// 把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量 num1 = num1 + num2;//30// num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2num2 = num1 - num2;//10// num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1num1 = num1 - num2;//20console.log(num1, num2);注意;变量的名字是不能重名,因为后⾯的会覆盖前⾯的var num1=10;var num1=20;console.log(num1);扩展的变量的交换:只需要看代码,不需要理解(位运算)var num1 = 10;var num2 = 20;num1 = num1 ^ num2;num2 = num1 ^ num2;num1 = num1 ^ num2;console.log(num1, num2);06 注释注释的⽅式:1.单⾏注释 //2.多⾏注释 /**///单⾏注释:⼀般⽤在⼀⾏代码的上⾯/多⾏注释:⼀般是⽤在函数或者是⼀段代码的上⾯///注释后的代码不执⾏了//console.log("哈哈,我⼜变漂亮了");//console.log("第⼆⾏");//声明变量并初始化// var num=10;07 JS的数据类型值类型(基本类型):字符串(String)数字-整数和⼩数(Number)布尔(Boolean)对空(Null)未定义(Undefined)Symbol引⽤数据类型:对象(Object)数组(Array)函数(Function)var num;console.log(num+10);//NaN-----not an number---->不是⼀个数字var num;console.log(num);如何获取这个变量的数据类型是什么? 使⽤typeof 来获取//typeof 的使⽤的语法* 都可以获取这个变量的数据类型是什么!* typeof 变量名* typeof(变量名)*var num = 10;var str = "⼩⽩";var flag = true;var nll = null;var undef;var obj = new Object();//是使⽤typeof 获取变量的类型console.log(typeof num);//numberconsole.log(typeof str);//stringconsole.log(typeof flag);//booleanconsole.log(String(nll));//是nullconsole.log(typeof nll);//不是nullconsole.log(typeof undef);//undefinedconsole.log(typeof obj);//objectconsole.log(typeof(num));08 JS的数字类型// 数字类型:整数和⼩数var num = 12;num=20; // 整数num=98.76; // ⼩数(其他的语⾔中,浮点型---单精度,双精度浮点) // 所有的数字都是属于number类型09进制js中可以表⽰哪些进制呢?var num=10;//⼗进制var num2=012;//⼋进制var num3=0x123;//⼗六进制var num=12;//⼗进制console.log(num);var num2=012;//⼋进制console.log(num2);var num3=0x1a;//⼗六进制console.log(num3);var num=0x1f;console.log(num);注意:想要表⽰⼗进制:就是正常的数字想要表⽰⼋进制:以0开头想要表⽰⼗六进制:0x开头10 NaN不要⽤NaN验证是不是NaNconsole.log(num+10==NaN);console.log("您好"=="我好");如何验证这个结果是不是NaN,应该使⽤isNaN()var num;//-----变量声明了,没有赋值,结果是:undefined是不是不是⼀个数字----->不是⼀个数字吗?NaN--->不是⼀个数字console.log(isNaN(10));判断结果不是⼀个数字可以使⽤isNaN(变量名)var str="您好";var num;var sum=num+10;//NaNconsole.log(sum);console.log(isNaN(sum));//不是数字为true,是数字结果为false注意:不要使⽤NaN判断是不是NaN,应该使⽤isNaN(值或者是变量) 11 类型转换1.parseInt();//转整数console.log(parseInt("10"));//10console.log(parseInt("10afrswfdsf"));//10console.log(parseInt("g10"));//NaNconsole.log(parseInt("1fds0"));//1console.log(parseInt("10.98"));//10console.log(parseInt("10.98fdsfd"));//102.parseFloat()//转⼩数console.log(parseInt("10"));//10console.log(parseInt("10afrswfdsf"));//10console.log(parseInt("g10"));//NaNconsole.log(parseInt("1fds0"));//1console.log(parseInt("10.98"));//10console.log(parseInt("10.98fdsfd"));//103.Number();//转数字console.log(Number("10"));//10console.log(Number("10afrswfdsf"));//NaNconsole.log(Number("g10"));//NaNconsole.log(Number("1fds0"));//NaNconsole.log(Number("10.98"));//10.98console.log(Number("10.98fdsfd"));//NaN注意:想要转整数⽤parseInt(),想要转⼩数⽤parseFloat()想要转数字:Number();要⽐上⾯的两种⽅式严格其他类型转字符串类型1 .toString()// var num=10;// console.log(num.toString());//字符串类型// //2 String();// var num1=20;// console.log(String(num1));如果变量有意义调⽤.toString()使⽤转换如果变量没有意义使⽤String()转换var num2;console.log(num2.toString());var num3=null;console.log(num3.toString());var num2;console.log(String(num2));var num3=null;console.log(String(num3));其他类型转布尔类型console.log(Boolean(1));//trueconsole.log(Boolean(0));//falseconsole.log(Boolean(11));//trueconsole.log(Boolean(-10));//trueconsole.log(Boolean("哈哈"));//trueconsole.log(Boolean(""));//falseconsole.log(Boolean(null));//falseconsole.log(Boolean(undefined));//false12 JS基本的代码规范js中声明变量⽤varjs中的每⼀⾏代码结束都应该有分号;(写代码有分号的习惯)js中的⼤⼩写是区分的: var N=10; njs中的字符串可以使⽤单引号,也可以使⽤双引号,⽬前我们暂时使⽤双引号以上就是超详细的JavaScript基本语法规则的详细内容,更多关于JavaScript语法规则的资料请关注其它相关⽂章!。

说几条JavaScript的基本规范

说几条JavaScript的基本规范

说⼏条JavaScript的基本规范
1、不要在同⼀⾏声明多个变量
2、使⽤===或!==来⽐较
3、使⽤字⾯量的⽅式来创建对象、数组,替代new Array这种形式
4、不要使⽤全局函数
5、switch语句必须要带default分⽀
6、函数不应该有的时候有return,有的时候没有return
7、fon-in循环中的变量,⽤var关键字说明作⽤域,防⽌变量污染
8、变量的声明遵循驼峰命名法,⽤let替代val,声明构造函数时⾸字母⼤写,定义常量的时候尽量⽤⼤写字母,⽤_分割
9、三元表达式可以替代if语句
10、&&和||是可以短路的,使⽤&&时如果前⾯⼀个值是错的,那么后⾯的值不⽤判断,使⽤||时,如果前⾯⼀个值是对的,那么后⾯的值不⽤判断
11、⽐较数据类型以下6中情况是false,其他都是true------false、""、0、null、undefined、NaN
12、数据类型检测⽤typeof,对象类型检测⽤instanceof
13、异步加载第三⽅的内容
14、单⾏注释//,多⾏注释/**/
15、使⽤命名空间解决变量名冲突
16、多⼈协作开发,新建⼀个js⽂件,const声明常量,在js⽂件中引⽤,⽤常量名替代⽅法名,这样做可以防⽌命名冲突。

JavaScript前端开发的设计原则

JavaScript前端开发的设计原则

JavaScript前端开发的设计原则一、简洁性在JavaScript前端开发过程中,简洁性是一个非常重要的设计原则。

简洁的代码易于理解和维护,同时也更加高效和可靠。

以下是一些实现简洁性的方法:1. 避免冗余代码:删除重复、多余或不必要的代码片段,确保代码的精简和高效性。

2. 使用合适的命名:选择有意义且易于理解的变量和函数名称,避免使用过于复杂或过于简单的命名。

3. 函数的单一责任原则:确保每个函数只负责一个特定的功能,避免函数功能过于复杂和混乱。

二、可读性可读性是JavaScript前端开发中另一个非常重要的设计原则。

通过编写易于阅读和理解的代码,可以提高代码的可维护性和可扩展性。

以下是一些提高可读性的方法:1. 使用注释:在关键的代码段附近添加注释,解释代码的作用和意图,帮助其他开发人员理解代码的逻辑。

2. 格式化代码:使用一致的缩进、空格和换行符,以提高代码的可读性。

3. 使用详细的变量和函数名称:使用描述性的名称来命名变量和函数,以便于其他人理解代码的含义。

三、可维护性可维护性是JavaScript前端开发设计中至关重要的一点,它确保了代码在长期维护和演进过程中的可靠性和可扩展性。

以下是一些提高可维护性的方法:1. 模块化设计:将代码分成模块,每个模块负责一个特定的功能,使得代码易于组织、维护和扩展。

2. 单元测试:编写单元测试来验证代码的正确性和健壮性,及早发现和修复潜在的问题。

3. 避免硬编码:将可变的值(如常量、配置项)抽离出来,避免将其硬编码到代码中,以便在需要时进行更改。

四、性能性能是JavaScript前端开发设计中一个至关重要的方面。

通过优化代码和减少资源的加载时间,可以提供更好的用户体验。

以下是一些提高性能的方法:1. 减少HTTP请求:合并和压缩CSS和JavaScript文件,减少资源的加载时间。

2. 最小化DOM操作:DOM操作是非常耗费性能的,尽量减少DOM操作的次数,提高代码的执行效率。

不唐突的JavaScript的七条准则整理收集

不唐突的JavaScript的七条准则整理收集

不唐突的JavaScript的七条准则整理收集(JavaScript是⼀个不可靠的助⼿)可能不唐突的JavaScript 的最重要的⼀个特性就是——你要停⽌任何假设:* 不要假设JavaScript是可⽤的,你最好认为它很有可能是不可⽤的,⽽不是直接依赖于它。

* 在你经过测试确认⼀些⽅法和属性可以使⽤之前,不要假设浏览器⽀持它们。

* 不要假设HTML代码如你想象的那样正确,每次都要进⾏检查,并且当其不可⽤的时候就什么也不要做。

* 让JavaScript的功能独⽴于输⼊设备* 要记住其他的脚本可能会影响你的JavaScript的功能,所以要保证你的脚本的作⽤域尽可能地安全。

在开始设计你的脚本之前,要考虑的第⼀件事情就是检查⼀下你要为其编写脚本的HTML代码,看看有什么东西可以帮助你达到⽬的。

(HTML是脚本的基⽯)在开始编写脚本之前,要先看⼀下你要为之编写JavaScript的HTML。

如果HTML是未经组织的或者未知的,那么你⼏乎不可能有⼀个好的脚本编写⽅案——很可能就会出现下⾯的情况:要么是会⽤JavaScript创建太多标记,要么就是应⽤太依赖于JavaScript。

在HTML中有⼀些东西需要考虑,那就是钩⼦和节点关系。

<1>.HTML 钩⼦HTML最初的和最重要的钩⼦就是ID,⽽且ID可以通过最快的DOM⽅法——getElementById 访问到。

如果在⼀个有效的HTML⽂档中所有的ID都是独⼀⽆⼆的话(在IE中关于name 和 ID 有⼀个bug,不过有些好的类库解决了这个问题),使⽤ID 就是安全可靠的,并且易于测试。

其他⼀些钩⼦就是是HTML元素和CSS类,HTML元素可以通过getElementsByTagName⽅法访问,⽽在多数浏览器中都还不能通过原⽣的DOM⽅法来访问CSS类。

不过,有很多外部类库提供了可以访问CSS类名(类似于getElementsByClassName)的⽅法。

javascript变量命名规则

javascript变量命名规则

javascript变量命名规则javascript变量命名规则是指定义一个变量时,遵守的一系列命名规范。

它是ECMAScript规范中定义的,由ES 语言实现者实施。

在javascript中,变量命名必须遵循一定的规则,以保证代码的正确和可阅读性。

1、 javascript变量可以由字母、数字、下划线以及美元符号组成,但是不能以数字开头。

2、 javascript变量名不能包含空格和特殊字符(例如@,#,%等),这样会导致语法错误。

3、 javascript变量名区分大小写,也就是说hello 和Hello是两个不同的变量。

4、 javascript使用的关键字不能作为变量名,关键字包括break,if,else,this,null,new等。

5、 javascript变量名应该尽可能简短,但要尽可能清晰,可以使用有意义的单词来表示变量。

6、在javascript中可以使用一些常用的缩写来作为变量名,比如num表示number,str表示string等。

7、 javascript变量名中可以使用拼音、拉丁字母、符号和数字,但是不能使用汉字和其他特殊字符。

8、最好使用驼峰式命名法,即首字母小写,每个新单词的首字母都大写,比如:userName,firstName。

9、 javascript变量名应该尽可能避免与关键字和函数名冲突,因为这会使代码难以阅读和理解。

10、 javascript变量名要符合标准命名规范,以便在编写代码的时候减少出错的可能性。

总之,javascript变量命名规则是一些规范,它们对javascript编程有着很大的影响,有助于编程人员正确地定义变量,并使其更加易于阅读和理解。

只有按照javascript变量命名规则来编写代码,才能保证代码的正确性,避免潜在的编程错误,从而提高代码的可读性和可维护性。

js代码规范

js代码规范

js代码规范JS代码规范(JavaScript Code Style Guide)是一种制定一致且易于阅读和维护的JavaScript代码的指南。

以下是一个包含大约1000字的JS代码规范示例:1. 使用适当的缩进:使用4个空格作为代码缩进的标准。

不要使用制表符进行缩进。

2. 给代码块加上大括号:在if语句、循环和函数中,即使只有一行代码,也要使用大括号包裹代码块。

3. 一行只写一条语句:每一行只写一条语句,不要将多条语句放在同一行。

4. 总是使用分号:在每一条语句的结尾都应该加上分号,即使在某些情况下可以省略。

5. 使用单引号或反引号来表示字符串:对于字符串,优先使用单引号或反引号,只在必要时使用双引号。

6. 声明变量时使用const或let:使用const来声明不会改变的变量,使用let来声明会改变的变量。

7. 使用驼峰命名法:对于变量名、函数名和对象的属性名,使用驼峰命名法(camelCase)。

8. 使用简洁明确的命名:命名变量、函数和对象时,使用简洁明确的命名,减少使用缩写或无意义的命名。

9. 将相关的代码分组:将相关联的代码分组,并用空行进行分隔,以提高代码的可读性。

10. 避免使用全局变量:限制全局变量的使用,将变量限定在函数或模块的作用域中。

11. 使用箭头函数:对于简单的函数,使用箭头函数(arrow function)来替代传统的function声明。

12. 使用模板字符串:对于字符串的拼接,使用模板字符串(template string)来提高代码的可读性。

13. 使用===进行比较:对于变量的比较,使用严格相等运算符(===)来避免类型转换和意外的行为。

14. 使用注释解释代码功能:对于复杂的代码逻辑或不容易理解的代码,使用注释来解释代码的功能和意图。

15. 处理异常情况:对于可能出现异常的代码块,使用try-catch语句来捕获和处理异常。

16. 使用模块化的代码组织方式:对于大型项目,使用模块化的代码组织方式,将代码分解为多个文件和模块。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

1.不要做任何假设(JavaScript是一个不可靠的助手)* 不要假设JavaScript是可用的,你最好认为它很有可能是不可用的,而不是直接依赖于它。

* 在你经过测试确认一些方法和属性可以使用之前,不要假设浏览器支持它们。

* 不要假设HTML代码如你想象的那样正确,每次都要进行检查,并且当其不可用的时候就什么也不要做。

* 让JavaScript的功能独立于输入设备* 要记住其他的脚本可能会影响你的JavaScript的功能,所以要保证你的脚本的作用域尽可能地安全。

在开始设计你的脚本之前,要考虑的第一件事情就是检查一下你要为其编写脚本的HTML 代码,看看有什么东西可以帮助你达到目的。

2.找出钩子和节点关系(HTML是脚本的基石)在开始编写脚本之前,要先看一下你要为之编写JavaScript的HTML。

如果HTML是未经组织的或者未知的,那么你几乎不可能有一个好的脚本编写方案——很可能就会出现下面的情况:要么是会用JavaScript创建太多标记,要么就是应用太依赖于JavaScript。

在HTML中有一些东西需要考虑,那就是钩子和节点关系。

<1>.HTML 钩子HTML最初的和最重要的钩子就是ID,而且ID可以通过最快的DOM方法——getElementById访问到。

如果在一个有效的HTML文档中所有的ID都是独一无二的话(在IE中关于name 和ID有一个bug,不过有些好的类库解决了这个问题),使用ID就是安全可靠的,并且易于测试,而且如果直接用name来作为对象进行操作,在FF 下是无效的,会报此对象未定义的错误。

其他一些钩子就是是HTML元素和CSS类,HTML元素可以通过getElementsByTagName方法访问,而在多数浏览器中都还不能通过原生的DOM方法来访问CSS类。

不过,有很多外部类库提供了可以访问CSS类名(类似于getElementsByClassName)的方法。

<2>.HTML 节点关系关于HTML的另外比较有意思的一点就是标记之间的关系,思考下面的问题:* 要怎样才可以最容易地、通过最少的DOM遍历来到达目标节点?* 通过修改什么标记,可以尽可能多地访问到需要修改的子节点?* 一个给定的元素有什么属性或信息可以用来到达另外一个元素?遍历DOM很耗资源而且速度很慢,这就是为什么要尽量使用浏览器中已经在使用的技术来做这件事情。

3.把遍历交给专家来做(CSS,更快地遍历DOM)有关DOM的脚本和使用方法或属性(getElementsByTagName, nextSibling, previousSibling,parentNode以及其它)来遍历DOM似乎迷惑了很多人,这点很有意思。

而有趣的是,我们其实早已经通过另外一种技术—— CSS——做了这些事情。

CSS 是这样一种技术,它使用CSS选择器,通过遍历DOM来访问目标元素并改变它们的视觉属性。

一段复杂的使用DOM的JavaScript可以用一个CSS选择器取代:JS代码var n = document.getElementById(’nav’);if(n){var as = n.getElementsByTagName(’a');if(as.length > 0){for(var i=0;as[i];i++){as[i].style.color = ‘#369′;as[i].style.textDecoration = ‘none’;}}}/* 下面的代码与上面功能一样 */#nav a{color:#369;text-decoration:none;}这是一个可以好好利用的很强大的技巧。

你可以通过动态为DOM中高层的元素添加class 或者更改元素ID来实现这一点。

如果你使用DOM为文档的body添加了一个CSS类,那么设计师就很可以容易地定义文档的静态版本和动态版本。

JS代码JavaScript:var dynamicClass = ‘js’;var b = document.body;b.className = b.className ? b.className + ‘ js’ : ‘js’;CSS:/* 静态版本 */#nav {….}/* 动态版本 */body.js #nav {….}4.理解浏览器和用户(在既有的使用模式上创建你所需要的东西)理解浏览器是如何工作的(尤其是浏览器是如何崩溃的)以及用户期望的是什么。

不考虑浏览器你也可以很容易地使用JavaScript创建一个完全不同的界面。

拖拽界面,折叠区域,滚动条和滑动块都可以使用JavaScript创建,但是这个问题并不是个简单的技术问题,你需要思考下面的问题:* 这个新界面可以独立于输入设备么?如果不能,那么可以依赖哪些东西?* 我创建的这个新界面是否遵循了浏览器或者其它富界面的准则(你可以通过鼠标在多级菜单中直接切换吗?还是需要使用tab键?)* 我需要提供什么功能但是这个功能是依赖于JavaScript的?最后一个问题其实不是问题,因为如果需要你就可以使用DOM来凭空创建HTML。

关于这点的一个例子就是“打印”链接,由于浏览器没有提供一个非JavaScript的打印文档功能,所以你需要使用DOM来创建这类链接。

同样地,一个实现了展开和收缩内容模块的、可以点击的标题栏也属于这种情况。

标题栏不能被键盘激活,但是链接可以。

所以为了创建一个可以点击的标题栏你需要使用JavaScript将链接加入进去,然后所有使用键盘的用户就可以收解决这类问题的极好的资源就是设计模式库。

至于要知道浏览器中的哪些东西是独立于输入设备的,那就要靠经验的积累了。

首先你要理解的就是事件处理机制。

5.理解事件(事件处理会引起改变)重点不是让所有的东西都变得可以拖拽、可以点击或者为它们添加内联处理,而是理解事件处理是一个可以完全分离出来的东西。

我们已经将HTML,CSS和JavaScript分离开来,但是在事件处理的分离方面却没有走得很远。

事件处理器会监听发生在文档中元素上的变化,如果有事件发生,处理器就会找到一个很奇妙的对象(一般会是一个名为e的参数),这个对象会告诉元素发生了什么以及可以用它做什么。

对于大多数事件处理来说,真正有趣的是它不止发生在你想要访问的元素上,还会在DOM 中较高层级的所有元素上发生(但是并不是所有的事件都是这样,focus和blur事件是例外)。

举例来说,利用这个特性你可以为一个导航列表只添加一个事件处理器,并且使用事件处理器的方法来获取真正触发事件的元素。

这种技术叫做事件委托,它有几点好处:* 你只需要检查一个元素是否存在,而不需要检查每个元素* 你可以动态地添加或者删除子节点而并不需要删除相应的事件处理器* 你可以在不同的元素上对相同的事件做出响应需要记住的另一件事是,在事件向父元素传播的时候你可以停止它而且你可以覆写掉HTML 元素(比如链接)的缺省行为。

不过,有时候这并不是个好主意,因为浏览器赋予HTML 元素那些行为是有原因的。

举个例子,链接可能会指向页面内的某个目标,不去修改它们能确保用户可以将页面当前的脚本状态也加入书签。

6.为他人着想(命名空间,作用域和模式)你的代码几乎从来不会是文档中的唯一的脚本代码。

所以保证你的代码里没有其它脚本可以覆盖的全局函数或者全局变量就显得尤为重要。

有一些可用的模式可以来避免这个问题,最基础的一点就是要使用var 关键字来初始化所有的变量。

假设我们编写了下面的脚本:JS代码var nav = document.getElementById(’nav’);function init(){// do stuff}function show(){// do stuff}function reset(){// do stuff}上面的代码中包含了一个叫做nav的全局变量和名字分别为init,show 和reset 的三个函数。

这些函数都可以访问到nav这个变量并且可以通过函数名互相访问:你可以将代码封装到一个对象中来避免上面的那种全局式编码,这样就可以将函数变成对象中的方法,将全局变量变成对象中的属性。

你需要使用“名字+冒号”的方式来定义方法和属性,并且需要在每个属性或方法后面加上逗号作为分割符。

JS代码var myScript = {nav:document.getElementById(’nav’),init:function(){// do stuff},show:function(){// do stuff},reset:function(){// do stuff}}所有的方法和属性都可以通过使用“类名+点操作符”的方式从外部和内部访问到。

这种模式的缺点就是,你每次从一个方法中访问其它方法或属性都必须在前面加上对象的名字,而且对象中的所有东西都是可以从外部访问的。

如果你只是想要部分代码可以被文档中的其他脚本访问,可以考虑下面的模块(module)模式:JS代码var myScript = function(){//这些都是私有方法和属性var nav = document.getElementById(’nav’);function init(){// do stuff}function show(){// do stuff}function reset(){// do stuff}//公有的方法和属性被使用对象语法包装在return 语句里面return {public:function(){},foo:’bar’}}();你可以使用和前面的代码同样的方式访问返回的公有的属性和方法,在本示例中可以这么访问:myScript.public() 和myScript.foo。

但是这里还有一点让人觉得不舒服:当你想要从外部或者从内部的一个私有方法中访问公有方法的时候,还是要写一个冗长的名字(对象的名字可以非常长)。

为了避免这一点,你需要将它们定义为私有的并且在return语句中只返回一个别名:JS代码return {public:public,foo:foo}}();这就保证了代码风格一致性,并且你可以使用短一点的别名来访问其中的方法或属性。

如果你不想对外部暴露任何的方法或属性,你可以将所有的代码封装到一个匿名方法中,并在它的定义结束后立刻执行它:JS代码(function(){// these are all private methods and propertiesvar nav = document.getElementById(’nav’);function init(){// do stuffshow(); // 这里不需要类名前缀}function show(){// do stuff}function reset(){// do stuff}})();对于那些只执行一次并且对其它函数没有依赖的代码模块来说,这种模式非常好。

相关文档
最新文档