作为前端程序员,一定要认清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)的断开;

·新的一行应该与上一行同一级别表达式的开头处对齐。

模块化编程

便于管理;

提高开发效率;

减少错改代码的次数;

易于维护;

提高代码可读性;

易于构建大型项目。

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

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

    编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  2. 编写高效的JavaScript

    Web前端性能优化——编写高效的JavaScript   前言 随着计算机的发展,Web富应用时代的到来,Web 2.0早已不再是用div+css高质量还原设计的时代.自Gmail网页版邮件服务的问世 ...

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

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  4. 编写高质量JavaScript代码绳之以法(The Essentials of Writing High Quality JavaScript)翻译

    原文:The Essentials of Writing High Quality JavaScript 才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<Java ...

  5. 编写高质量JavaScript代码的基本要点记录

    原文:深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 1.最小全局变量(Minimizing Globals)的重要性 JavaScript通过函数管理作用域.在 ...

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

    简介: <Effective JavaScript:编写高质量JavaScript代码的68个有效方法>共分为7章,分别涵盖JavaScript的不同主题.第1章主要讲述最基本的主题,如版 ...

  7. 编写高效的JavaScript程序

    作者: Addy Osmani  来源: CSDN  发布时间: 2013-01-10 14:15  阅读: 7952 次  推荐: 15   原文链接   [收藏] 英文原文:Writing Fas ...

  8. 编写第一个JavaScript程序

    编写第一个程序 在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签,用户可以在 <script> 标签中直接编写 JavaScript 代码, ...

  9. 如何编写高质量JavaScript代码

    书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且随着时间的推移,这些bug的成本也会增加,尤其当这些bug潜伏并慢慢出现在已经发布的软件中时.当 ...

随机推荐

  1. node 简介 起源

    最近的node 的一篇文章阅读量很大,所以写一篇基础篇供大家分享,抛砖引玉,各取所需. 部分内容来源大神笔记. Node.js 简介:@@@@@@@@@@@@@@@@@@@ Node.js是目前非常火 ...

  2. dubbo&hsf&spring-cloud简单介绍

    Dubbo: 简介:Dubbo是一个分布式服务框架,以及SOA治理方案.其功能主要包括:高性能NIO通讯及多协议集成,服务动态寻址与路由,软负载均衡与容错,依赖分析与降级等. 底部NIO基于netty ...

  3. 初识RabbitMQ系列之一:简单介绍

    一:RabbitMQ是什么? 众所周知,MQ是Message  Queue(消息队列)的意思,RabbitMQ就是众多MQ框架其中的一款,开源实现了AMQP协议(官网:http://www.amqp. ...

  4. 关于戴尔没有活动分区,遇到了“Windows安装程序无法将windows配置为在此计算机的硬件上运行”提示等

    虽然只有几句话,但是还是超级好用的 装过很多戴尔的笔记本,发现很多都是这里的问题导致系统装不进去. 1.硬盘设置有问题.进BIOS ,到SATA 设置看看硬盘是不是设置为AHCI了.这个ghost系统 ...

  5. Uva 11988 Broken Keyboard STL+链表

    两种方法,直接上代码 STL标准模板库 #include <iostream> #include <list> #include <algorithm> #incl ...

  6. 笨办法用js屏蔽被http劫持的浮动广告

    最近发现网站经常在右下角弹出一个浮动广告,开始的时候以为只是浏览器的广告. 后来越来越多同事反映在家里不同浏览器也会出现广告.然后深入检查了下,发现网站竟然被劫持了. 然后百度了一大堆资料,什么htt ...

  7. vue指令v-once示例解析

    只渲染元素和组件一次.随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过.这可以用于优化更新性能. <!-- 单个元素 --> <span v-once>This ...

  8. 分页工具类 BaseAction

    package com.xxxxxxx.bos.web.action.common; import java.io.IOException; import java.lang.reflect.Para ...

  9. RMAN备份介质的移动与再恢复测试 [ catalog start with ‘dir’ ]

    --RMAN备份介质的移动与再恢复测试 ---------------------------------------------------------2013/09/21   由于目前生产环境中没 ...

  10. 突然兴起复习一下Swift3.0

    /// 参考Swift3.0.1文档 /// 摘录来自: Apple Inc. "The Swift Programming Language (Swift 3.0.1)". iB ...