认清Javascript的地位并编写合理的Javascript代码

作为前端程序员,一定要认清javascript的地位,不要被它乱七八糟的特点所迷惑。JavaScript主要是用来操控和重新调整DOM,通过修改DOM结构,从而达到修改页面效果的目的。

要用这个中心思想指导以后的所有js学习,包括它的框架。

所谓合理就是合乎道理。那么合理的javascript代码通常遵循哪些原则?笔者认为至少要遵循以下几点:

有意义的命名

无论选择驼峰命名法还是匈牙利命名法,见名知意是最重要也最基本的一条法则。同时也要避免会产生歧义的命名。

例如 变量“当前时间”

var d;不好的命名

var currentTime 好的命名

每一个函数只干一件事

每个函数只干一件事就是避免把所有业务逻辑都放在同一个函数中完成,这样的好处是代码更为简洁,可读性提高,易于维护及复用。

合理的传参

举个简单的例子:

好的传参

funcation  queryStudent(Json student){

      ……………….

}

不好的传参

funcation  queryStudent(id,name,…){

      ……………….

}

合理的DOM

合理的

var  phaseObject =  

{

northLeftPhase = document.getElementById(‘northLeftPhase‘)

 }

phaseObject.northLeftPhase.src=‘http://phase.com/n/left.png‘;

不合理的

document.getElementByID(‘northLeftPhase‘).src = ‘http://phase.com/n/left.png‘;

合理的注释

语言精练,使用规范的注释模式,防止多意义,常更新。

原则,并不是所有的变量函数都需要注释,一般注释哪些比较生涩的算法。

精练的注释

//Selector the Elements

 var  findElements = window. findElements = function( exp ){ ....................... }

不精练的注释

//Selector the Elements by GetElementById & getElementsByTagN ....

Var findElements = window. findElements = function( exp ){ ....................... }

注释 != 字幕

好的

// find [ID = A]

 var oA = document.getElementById(‘A‘);

不好的

/*Found through the document.getElementByID*/

 var oA = document.getElementById(‘A‘);

合理的排版

缩进排版(Indentation)

4个空格常被作为缩进排版的一个单位。缩进的确切解释并未详细指定(空格 vs. 制表符)。一个制表符等于n个空格(视具体的编辑器而定,Eclipse默认一个制表符为4个字符)。

行长度(Line Length)

尽量避免一行的长度超过80个字符,因为很多终端和工具不能很好处理之。

注意:鉴于Eclipse开发工具工作区的左侧和右侧都被非代码编辑器所占据,因此建议每行的代码长度不要超过70个字符。

换行(Wrapping Lines)

    • 当一个表达式无法容纳在一行内时,可以依据如下一般规则断开之:
    • ·在一个逗号后面断开;
    • ·在一个操作符前面断开;
    • ·宁可选择较高级别(higher-level)的断开,而非较低级别(lower-level)的断开;
    • ·新的一行应该与上一行同一级别表达式的开头处对齐。

模块化编程

  • 便于管理;
  • 提高开发效率;
  • 减少错改代码的次数;
  • 易于维护;
  • 提高代码可读性;
  • 易于构建大型项目。
时间: 2024-07-31 14:22:48

认清Javascript的地位并编写合理的Javascript代码的相关文章

JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg

编写简洁的 JavaScript 代码

作者:尹锋链接:https://www.zhihu.com/question/20635785/answer/223515216来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 避免使用 js 糟粕和鸡肋 这些年来,随着 HTML5 和 Node.js 的发展,JavaScript 在各个领域遍地开花,已经从"世界上最被误解的语言"变成了"世界上最流行的语言".但是由于历史原因,JavaScript 语言设计中还是有一些糟粕和鸡肋,比如

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

用函数式编程技术编写优美的 JavaScript

用函数式编程技术编写优美的 JavaScript_ibm作者: 字体:[增加 减小] 类型:转载函数式编程语言在学术领域已经存在相当长一段时间了,但是从历史上看,它们没有丰富的工具和库可供使用.随着 .NET 平台上的 Haskell 的出现,函数式编程变得更加流行.一些传统的编程语言,例如 C++ 和 JavaScript,引入了由函数式编程提供的一些构造和特性.在许多情况下,JavaScript 的重复代码导致了一些拙劣的编码.如果使用函数式编程,就可以避免这些问题.此外,可以利用函数式编程

编写高质量JavaScript代码的68个有效方法

简介: <Effective JavaScript:编写高质量JavaScript代码的68个有效方法>共分为7章,分别涵盖JavaScript的不同主题.第1章主要讲述最基本的主题,如版本.类型转换要点.运算符注意事项和分号局限等.第2章主要讲解变量作用域,介绍此方面的一些基本概念,以及一些最佳实践经验.第3章主要讲解函数的使用,深刻解析函数.方法和类,并教会读者在不同的环境下高效使用函数.第4章主要讲解原型和对象,分析JavaScript的继承机制以及原型和对象使用的最佳实践和原则.第5章

编写高质量javascript代码的基本要点

javascript入门比较快,基础方面也比较简单,但如果想写出高质量的javascript代码也绝非易事,下图是在下整理的编写高质量javascript代码的基本要点,希望能够对各位有所帮助.

编写可维护javascript

for-in:对象属性遍历 var prop,obj={a:1.b:2,c:3}; for (prop in obj) { if (obj.hasOwnProperty(prop)) { //遍历只属于该对象的属性 } } in:判断属性在对象中是否存在 var obj={ cnt:0, related:null }; if("cnt" in obj){ //do some code } instanceof:判断一个变量是否某个js 对象( 非dom对象)的实例 typeof:判断运

编写第一个JavaScript程序

编写第一个程序 在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签,用户可以在 <script> 标签中直接编写 JavaScript 代码,具体步骤如下. 第 1 步,新建 HTML 文档,保存为 test.html. 第 2 步,在 <head> 标签内插入一个 <script> 标签. 第 3 步,为 <script> 标签设置type="text/javascript"属性. 现代浏览

编写高质量 Javascript -- 知识点小记

 一: 团队合作避免JS冲突 脚本中的变量随时存在冲突的风险, 1.   解决办法---用匿名函数将脚本包起来,让变量的作用域控制在匿名函数之内 如: <script type="text/javascript"> (function(){ var a=123,b="12121"; })(); </script> ..... <script type="text/javascript"> (function