编写可维护的代码

编程风格

1:换行

一行长度达到单行的最大字符(80字符)限制时,需要手动换行,通常会在运算符后换行,下一行增加俩个层级的缩进。

例子:

callAfuntion(document,element,window,"some all thing",true,123,

navigator)           // 正确

最后一个字符为运算符“,”

2:命名

函数变量采用驼峰式命名  大驼峰:PassCalss   小驼峰  passCalss

变量应为名词     函数应为动词(isXXX  canXXX  hasXXX getXXX setXXXX)

常量:值初始化之后不再变      大写字符_XXXX    (MAX_count)

构造函数:大驼峰式

funtion Person(name){

this.name = name;

}

Person.prototpye.sayname = function(){

return this.name;

}

var me = new Person("SSSS");

3:null

适用场景:

用来初始化可能被赋值成对象的变量

用来和一个已经初始化变量比较,变量可以是也可以不是对象

当函数的参数期望是对象时,用作参数传入

当函数的返回值期望是对象时,用作返回值传出

var person = null;

function getPerson (){

if(condition){

return new Person("SSS");

}else{

return null;

}

}

var person = getPerson();

if(person !== null){

dosomething();

}

不适用场景:

检测是否传入了某参数

检测未初始化的变量

function(arg1,arg2,arg3,arg4){

if(arg4 !==null){

doSomethiing();

}

}

var person;

if(person !== null){

dosomething();

}

null当做对象的占位符最好

4:undefined

null == undefined   ===>true

但是  用途是完全不一样的    undefined 是那些未被初始化变量的初始值

5:for in

用来遍历对象属性     遍历自身的还会遍历从原型继承的属性  避免此情况出现   用 hasOwnProperty判断

for(var i  in  obj){

if(obj.hasOwnProperty(i)){

}

}

6:变量提升    提升到包含这段逻辑函数的顶部执行

function doSomething(){

var result   =  10 + value;

var value = 10;

return result;  // 结果返回    NaN

}

原因js解析成

function doSomething(){

var result;

var value;

result   =  10 + value;

value = 10;

return result;  // 结果返回    NaN

}

同理   函数也是一样的会提升

7:严格模式     “use strict”

(function(){})();   立即执行

8:原始包装类型

String          Boolean          Number  表示全局作用的一个构造函数  作用:让原始值具有对象般的行为

var name ="SSS";

console.log(name.toUpperCase());

编程实践

1:不要紧耦合   目标松耦合

紧耦合就例如     修改.error的css  的名字  还要改html的

松耦合    修改一个组件 而不需要更改其他组件

2:将css从JavaScript抽离

样式修改时用添加删除类名

将html 从JavaScript抽离

模板放置在服务器

简单模板放置在客户端

使用带自定义type属性的script元素

<script type="text/x-my-template" id="list-item">

<li><a href="%s">%s</a></li>

</script>

// var script = document.getElementById("list-item");

//  templateText = script.text;

function addItem (url,text){

var list = document.getElementById("mylist"),

script = document.getElementById("list-item"),

templateText = script.text,

result = sprintf(template,url,text),

div = document.createElement("div");

div.innerHTML = result.replace(/^\s*/,"");

list.appendChild(div.firstChild);

}

addItem("/item/4","fffffff");

如果有问题,也许是模板文本的前导空格导致的

复杂客户端模板    handlebars.js

3:全局变量

尽量避免声明全局的,或使用单全局变量方式

如:

var Dd = {};

Dd.Book = function(title){

this.title = title;

this.page =1;

}

Dd.Book.prototype.topage = funciton(dir){

this.page+=dir;

}

Dd.cha1 = new Dd.Book("ddd");

Dd.cha2 = new Dd.Book("ddsssd");

Dd.cha3 = new Dd.Book("ddxxd");

命名空间:简单通过全局对象的单一属性表示的功能性分组

基于单全局变量的扩充方法  使用模块   YUI模块   AMD模块(异步模块)

4:事件处理

规则:

隔离应用逻辑   (单一函数调用)

var Dd = {

aa:funciton(e){

this.cc(e);

},

cc:funciton(e){

var  p = document.getElementById("p");

p.style.left = e.clientX +‘px‘;

p.style.top = e.clientY +‘px‘;

}

}

addListener(element,"click",funciton(e){

Dd.aa(e);

})

e对象被无节制分发了  错误  不过这样是第一步

不要分发事件对象

应用逻辑不应当依赖event对象正确完成功能原因:

方法接口需表明哪些数据是必要的

var Dd = {

aa:funciton(e){

this.cc(e.clientX,e.clientY);

},

cc:funciton(x,y){

var  p = document.getElementById("p");

p.style.left = x +‘px‘;

p.style.top = y +‘px‘;

}

}

addListener(element,"click",funciton(e){

Dd.aa(e);

})

5:typeof   检测原始值

原始值: 字符串     数字     布尔值     null     undefined

返回:     string     number     boolean     object/null     undefined(未定义的变量,值为undefined的变量)

不建议用null判断,除非期望返回的是null

typeof name

可用于引用类型Function      返回 function

引用值(除原始值以外的值)

Object     Array     Date     Error     typeof 返回均object

检测引用值     instanceof(可检测原型链,自定义类型)

value instanceof Date

function Aa(name){

this.name = name;

}

var me = new Aa("dd");

me instanceof Aa    ----> true

检测类型 优雅方案

Object.prototype.toString.call(value) === "[object Array]";(自定义对象不用)

属性(是否存在   in)次选 hasOwnProperty()

6: 配置数据(hardcoded)应用中写死的  如:

URL

需要展示给用户看的字符串

重复值

设置(配置项)

任何可能发现变更的值

function aa(val){

alert(val);     //val  配置数据

location.href = "/e/e/e";     //url 配置数据

removeClass(element,"class");     //class配置数据

}

抽离配置数据

var config ={

VAL:"value",

URL:" /e/e/e ",

CSS_CLASS:"class"

};

function aa(val){

alert( config.VAL);

location.href = config.URL;

removeClass(element, config.CSS_CLASS);

}

配置数据保存

1:jSON格式

{“ss”:"dd", “ss”:"dd", “ss”:"dd", “ss”:"dd"}

2:JSONP格式

myfunc( {“ss”:"dd", “ss”:"dd", “ss”:"dd", “ss”:"dd"} )

3:纯JavaScript格式

var config = {“ss”:"dd", “ss”:"dd", “ss”:"dd", “ss”:"dd"}

7:致力于抛出自定义错误(更加容易的调试,库的开发适用)

function getDivs(element){

if(element && element.getElementByTagName){

return element.getElementByTagName("div");

}else{

throw new Error("getDivs(): Argument must be a DOM element")

}

}

执行错误可明确知道问题在哪

捕获错误

try{

something();

}catch(ex){

handleError(ex);

}

8:错误类型

Error     基础类型

EvalError     通过eval()函数执行抛出的

RangeError     数字超出边界

ReferenceError     期望对象不存在

SyntaxError     eval()函数有语法错误

TypeError     变量不是期望的类型

URIError     encodeURI() encodeURIComponent() decodeURI() decodeURIComponent()等传递非法的URI字符串

时间: 2024-10-05 06:16:56

编写可维护的代码的相关文章

编写可维护的代码示例

/*广告图片数组*/ var imgs=[ {"i":0,"img":"images/index/banner_01.jpg"}, {"i":1,"img":"images/index/banner_02.jpg"}, {"i":2,"img":"images/index/banner_03.jpg"}, {"i&qu

一步步教你编写不可维护的 PHP 代码

译者注:这是一篇很棒文章,使用有趣的叙述方式,从反面讲解了作为一个优秀的 PHP 工程师,有哪些事情是你不能做的.请注意哦,此篇文章罗列的行为,都是你要尽量避免的. 随着失业率越来越高,很多人意识到保全自己的工作是多么的重要.那么,什么是保住自己工作,并让自己无可替代的好方法呢?一个很简单的事实是只要你的代码没有人能够维护,那么你就成功保住了工作.编写不可维护的代码是一个特殊的技能,但奇怪的是,似乎对某些开发者来说是很自然的.不过对于剩下的开发者来说,这里有一些技巧和提示来让你开始写不可维护的代

如何编写可维护的面向对象JavaScript代码

能够写出可维护的面向对象JavaScript代 码不仅可以节约金钱,还能让你很受欢迎.不信?有可能你自己或者其他什么人有一天会回来重用你的代码.如果能尽量让这个经历不那么痛苦,就可以节省不少时 间.地球人都知道,时间就是金钱.同样的,你也会因为帮某人省去了头疼的过程而获得他的偏爱.但是,在开始探索如何编写可维护的面向对象JavaScript代码之前,我们先来快速看看什么是面向对象.如果已经了解面向对象的概念了,就可以直接跳过下一节. 什么是面向对象?  面向对象编程主要通过代码代表现实世界中的实

如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 1 <script src="1.js"></script> 2 <script src="2.js"></script> 3 <script src="3.js">

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

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

《编写可维护的javascript》读书笔记(上)

最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. 1.缩进:一种是利用制表符缩进,一种是使用空格符缩进,各有利弊,任选一种,保持一致即可.个人比较喜欢制表符缩进. 2.语句结尾需要加上分号,避免没必要的BUG. 3.命名:首先要语义化,使用驼峰式命名法,小驼峰即首字母小写,之后每个单词首字母大写:大驼峰即首字母大写,之后同小驼峰:变量名前缀应该是名词(my

编写可维护的css

在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及分析 CSS 结构:第二部分将围绕方法论.思维框架以及编写与规划 CSS 的态度. CSS 文档分析 无论编写什么文档,我们都应当尽力维持统一的风格,包括统一的注释.统一的语法与统一的命名规范. 总则 尽量将行宽控制在 80 字节以下.渐变(gradient)相关的语法以及注释中的

编写可维护的JavaScript之事件处理

规则1:隔离应用逻辑 这会让你的代码容易调试 规则2:不要分发事件对象 event对象包含了太多信息 // a good example var handlePopup = { // 事件句柄,处理所有和event对象有关的东西 handleClick: function (e) { // 假设事件支持DOM Level2 e.preventDefault(); e.stopPropagation(); // 传入应用逻辑 this.showPopup(e.clientX, e.clientY)

编写高质量Python代码的59个有效方法

作者Brett Slatkin是 Google公司高级软件工程师.他是Google消费者调查项目的工程主管及联合创始人,曾从事Google App Engine的Python基础架构工作,并利用Python来管理众多的Google服务器.Slatkin也是PubSubHubbub协议的联合创始人,还用Python为Google实现了针对该协议的系统.他拥有哥伦比亚大学计算机工程专业学士学位. 精彩书评 "Slatkin所写的这本书,其每个条目(item)都是一项独立的教程,并包含它自己的源代码.