`

JavaScript模式化编程

 
阅读更多

 

我不知道现在生活中的苦是不是对自己是一种好处,我也不知道现在的好是不是坏处,希望一切的一切会更好。

 

我想写这篇文章好久了,有的时候都不知道自己从那写起。从基础写起,又怕被喷,太难了,又怕自己写的不好,又被喷。最好我想想还是写下这篇文章,可以说这是我干这么多年总结下来的结晶了。

 

JavaScript模式

 

说起这个,如果是程序员的应该都不陌生,我只不过他大家平时用到的,写下来系统化罢了,没什么大不了,嘿嘿。

 

好了说了半天,大家以为我在写心情,嘿嘿说说正题吧。

 

1.基本原则

  原则问题不能变,写模式唯一的好处就是可维护性好,编写出让人羡慕的代码才会是好代码。

  1.1 编写可维护的代码

    特性:阅读性好,具有一致性,预见性好,看起来如同一个人编写的,有文档

  1.2 尽量少用全局变量

    全局变量的坏处真是大大的,为了一个全局变量,有多少bug产生,有多少程序员要加班加点的干活。

    我这里就写一个原因,全局变量多的代码不好移植。页面上会有很多其他开发人员编写的代码。如果其中一个广告合作伙伴的脚本有x这个全局变量,你的脚本大量使用x的话,那么多发生什么事情,

    大家可见一斑了,非常的恶劣的bug。

    写一段代码:

<script type="text/javascript">

<!--

globleParam = "HellWorld";

console.log(globleParam);

console.log(window.globleParam);

console.log(window["globleParam"]);

console.log(this.globleParam);

//-->

</script>

    上面写了关于全局变量的调用

  1.3 变量释放的难题

    使用var创建的全局变量不能删除

    不使用var创建的隐含全局变量可以删除

    这说明隐含全局变量严格来讲不是真正的变量,而是全局对象的属性,属性可以通过delete操作符删除,但变量不可以

 

    例子:

      <script type="text/javascript">

  <!--

var global_1 = 1;

global_2 = 2;

(function(){

global_3 = 3;

}());

 

delete global_1;

delete global_2;

delete global_3;

 

console.log(typeof global_1);

console.log(typeof global_2);

console.log(typeof global_3);

  //-->

  </script>

 

  1.4 简单的访问全局变量

  var global = (function(){

return this;

  }());

  有的时候,为了快速得到全局对象,必须用这种方式

  1.5单一var模式

  这个可以说我是看jquery框架时候,感觉的。然后在网上查询了一下,发现大家也在用这个模式,很简单,就是将变量都放到一个var中,这样好处避免出现上面的全局变量问题还有就是变量复写的问题

 

  1.6 for循环的小细节

  在for中,要使用单一var这个模式,这个会节省很多不必要的计算时间的问题

  比如:

  for(var i = 0 ,max = myarray.length;i<max;i+=1){

 

  }

  1.7 for-in中的小判断

  for-in要进行属性检查,这个避免clone方法等不必要的方法进行操作

 

  <script type="text/javascript">

  <!--

  var people = {

name:'chenhailong',

age:'30',

sex:'male'

  }

  if(typeof Object.prototype.clone === 'undefined')

  {

Object.prototype.clone = function(){};

  }

  for(var i in people)

  {

if(people.hasOwnProperty(i)){

console.log(i,":",people[i]);

}

  }

    for(var i in people)

  {

console.log(i,":",people[i]);

  }

  //-->

  </script>

 

  1.8 在程序中要用“===”进行判断

  这样加上类型判断

  1.9 避免使用eval()

  eval是魔鬼,eval内部可以看作是全局变量,和上面的全局模式一样,尽量少用。

  1.10关于parseInt()的思考

  下面举一个例子:

    <script type="text/javascript">

  <!--

    var i = "09", 

   j = "06";

i = parseInt(i);

j = parseInt(j);

console.log(i,j);

i = new Number("09");

j = new Number("06");

console.log(i.toString(),j.toString());

i = "09";

j = "06";

i = parseInt(i,10);

j = parseInt(j,2);

console.log(i,j);

  //-->

  parseInt()的时候一下,要注意进制问题

  1.11添加Doc文档

  YUIDoc范例:

  我自己写了文章,下面提供链接

  http://chenhailong.iteye.com/admin/blogs/1724746

  你也出的javasscript source 一定要生成YUIDoc文档的,我希望大家这样,袁芳你怎么看?

 

 1.12 我不知道大家用没用过JSLint,一个非常好的工具,可以这样说,我现在所有写的规范模式,JSLint上面都有检查,如果你不符合上面写的东西,JSLint就是警告或者报错哦

 

我也强烈建议大家使用这个软件,原因有很多,最主要的是方便和减少bug的量,让你写出的代码大家去羡慕去吧。

 

 

太长了,我就写到这里,可以参看后文。

 

 

 

分享到:
评论

相关推荐

    Javascript模块化编程详解

    模块化编程是一种非常常见Javascript编程模式。它一般来说可以使得代码更易于理解,但是有许多优秀的实践还没有广为人知。 基础 我们首先简单地概述一下,自从三年前Eric Miraglia(YUI的开发者)第一次发表博客...

    JavaScript 设计模式 azw3

    最后,还探讨了模块化的JavaScript模式、jQuery及其插件中的设计模式。 《JavaScript设计模式》适合专业的Web开发人员和前端工程师阅读。通过阅读本书,他们将能够提高对设计模式的认识,并学会如何将设计模式应用...

    javascript设计模式与开发实践

    本书在尊重《设计模式》原意的同时,针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式,讲解了JavaScript面向对象和函数式编程方面的基础知识,介绍了面向对象的设计原则及其在设计...

    Javascript设计模式与开发实践

    本书在尊重《设计模式》原意的同时,针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式,讲解了JavaScript面向对象和函数式编程方面的基础知识,介绍了面向对象的设计原则及其在设计...

    javascript 单例模式演示代码 javascript面向对象编程

    单例模式的好处就是:类只实例化一次,省资源,节省开销,提高速度,学习js面向对象编程的朋友可以参考下。

    JavaScript权威指南(第6版)

    本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...

    编写可维护的JavaScript(中文)

    本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面,既包括具体风格和原则的介绍,也包括示例和技巧说明,最后还介绍了如何通过自动化的工具和方法来实现一致的编程风格。  《编写可维护的JavaScript》作者...

    21天学通JavaScript 源代码1(还有10章在源代码2文件)

    第二篇专门介绍JavaScript中内置对象的应用,内容包括JavaScript对象基础、窗口和框架、屏幕和浏览器对象、文档对象、历史对象和地址对象、表单对象和表单元素和脚本化cookie等。第三篇讲解的是JavaScript的高级技术...

    21天学通JavaScript 源代码2(有一部分在源码1文件中)

    第二篇专门介绍JavaScript中内置对象的应用,内容包括JavaScript对象基础、窗口和框架、屏幕和浏览器对象、文档对象、历史对象和地址对象、表单对象和表单元素和脚本化cookie等。第三篇讲解的是JavaScript的高级技术...

    JavaScript权威指南(第6版)中文文字版

    本书适合那些希望学习WEB编程语言的初、中级程序员和希望精通JavaScript的程序员阅读。 作者简介 作者:(美国)弗兰纳根(David Flanagan) 译者:淘宝前端团队 弗兰纳根(David Flanagan)是一名程序员,也是一名...

    JavaScript权威指南(第6版)(附源码)

    本书第6版涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习,也适合...

    JavaScript权威指南(第6版)(中文版)

    本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...

    JavaScript编程设计模式之构造器模式实例分析

    本文实例讲述了JavaScript编程设计模式之构造器模式。分享给大家供大家参考,具体如下: 经典的OOP语言中,构造器(也叫构造函数)是一个用于初始化对象的特殊方法。在JS中,因为一切皆对象,对象构造器经常被提起。...

    JavaScript权威指南(第6版)中文版pdf+源代码

     8.8 函数式编程194  第9章 类和模块201  9.1 类和原型202  9.2 类和构造函数203  9.3 JavaScript中Java式的类继承207  9.4 类的扩充210  9.5 类和类型212  9.6 JavaScript中的面向对象技术217  9.7 子类...

    JavaScript详解(第2版)

    1.9 标准化JavaScript和W3C 11 1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 浏览器是否已启用JavaScript ...

    JavaScript权威指南(第6版)(中文版).zip

    第十章为:正则表达式的模式匹配;第十一章为:javascript的子集和扩展;第十二章为:服务器JavaScript; 第十三章为:web浏览器中的javascript;第十四章:window对象;第十五章为:脚本化文档;第十六章为:脚本化CSS;第十七...

    JavaScript 权威指南(第四版).pdf

     8.8 函数式编程194  第9章 类和模块201  9.1 类和原型202  9.2 类和构造函数203  9.3 JavaScript中Java式的类继承207  9.4 类的扩充210  9.5 类和类型212  9.6 JavaScript中的面向对象技术217  9.7 子类...

    动态编程:Javascript问题解决实践和模式

    动态编程实用的Javascript问题解决模式。记忆化 制表 gridTraveler

    Google-JavaScript-编码规范指南

    这套规范不仅涵盖了JavaScript语言的基础语法和常见模式,还针对Google的实际项目需求,提供了一系列最佳实践和建议。 通过遵循Google JavaScript编码规范指南,开发者可以确保自己的代码风格与团队其他成员保持...

Global site tag (gtag.js) - Google Analytics