`
iwebcode
  • 浏览: 2010592 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

(OTHER)JavaScript编程最佳法则

 
阅读更多

JavaScript是目前Web开发中最为流行的语言之一,基本上Web开发者每天都会处理它。本篇文章为您制定了一份详细的Javascript最佳实践,希望能够帮助您成为更加出色的Web开发者。(推荐阅读:JavaScript初学者的10个迷你技巧

1、使用正确的<script>标签

如果你需要在HTML文档中使用一些JavaScript代码,你应当通常会使用如下的<script>标签:

<script type="text/javascript"> 
    //insert your code here 
</script> 

但是在源代码中,以下这种标签写法随处可见:

<script type="text/javascript" language="javascript"> 
    //insert your code here  
</script> 

在HTML中,language属性已经过时,因为具有type属性后,language它是冗余的,不要再这样写了。

事实上,客户端默认为将JavaScript代码指定type=”text/javascript”属性,除非需要type=”application/x-javascript” 这样的类型,否则完全没有必要写type属性。

2、将代码放置于外部文件

使用外部.js文档比在HTML文档里直接写JavaScript代码要简洁一些,同时也使得JavaScript文件可以被缓存,保证网站资源的快速访问。将你的JavaScript代码置于一个.js文档中,然后在HTML文档中使用<script>标签来引入它:

<script src="http://www.mangguo.org/myscript.js"></script> 

3、避免使用HTML注释包裹代码

90年代一些非常古老的浏览器无法执行JavaScript代码。为了防止这些浏览器出现不必要的结果。在1994年至1997年间,在HTML中使用注释包裹JavaScript代码是良好的兼容方案,以保证不支持JavaScript的浏览器能够忽略它。

这里是一个简单案例:

<script language="JavaScript"> 
    <!--  //insert your code here  //--> 
</script> 

然而在2010年,所有的浏览器(甚至是可爱的IE 6)都能解释JavaScript代码,因此绝对没有使用注释包裹JavaScript代码的必要了。更糟的是,如果代码被HTML注释包裹,并且使用了 — 符号,浏览器可能会误以为HTML文档已经结束。

4、使用框架

除非你的JavaScript代码很短或者很简单,你应该通过框架来避免过多代码上的重复劳动。在我看来,jQuery是最好的,有一个很棒的社区,所以值得尝试。

其实YUI也很棒,系统、强大、完善、稳妥、有Loader机制、更高效地提高Web应用的性能。

5、使用var关键字声明变量

你应当使用var语句来声明变量,否则变量会存在于全局作用域内,并且使用var使得代码可读易懂。比如下面的案例:

var name = "Jean";  
var size = data.length; 

6、保持代码的分离

几年前,当一个程序员想要为一个HTML元素添加事件时(比如说,你想要在用户输入时验证时间信息),他会使用特殊的属性把JavaScript代码放置于HTML中,比如onblur、onchange,onclick等等。比如:

<input type="text" name="date" onchange="validateDate()" /> 

虽然照样可行,但却很不简洁。HTML 应当只包含文档的结构层面,就如同使用内联CSS是不好的做法一样,内联JavaScript同样不可取。

取而代之,下面的代码如何?使用jQuery也很简单:

$(document).ready(function(){     
    $('input[name=date]').bind('change', validateDate);  
}); 

7、在文档底部包含脚本文件

不久以前,在<head>和</head>标签之间插入脚本文件一度成为最佳实践。但浏览器是顺序解析文档,并动态加载外部文件的。这就意味着在页面头部插入脚本会在安排在页面内容之前加载。

为了在内容就绪之后再加载脚本,JavaScript 文件应该在文档底部被包含。就像下面这样:

<script src="myscript.js?"></script> 
</body> 
</html> 

8、使用JSLint

JSLint是一款用于JavaScript源代码检查的应用程序。如果它发现JavaScript中存在某些问题,就会返回相关的问题描述信息和大概的解决方案。

JSLint能有效发现代码中的缺陷,或者说代码风格上值得改进之处。

9、不要轻易使用document.write

陈旧的document.write方法已经被不赞成使用了好些年,然而这仍然是一贯使用的方法。

document.write("helloworld");

应当使用DOM的innerHTML属性在页面中插入文本。

document.getElementById('hello').innerHTML='helloworld';

原文地址:http://www.catswhocode.com/blog/best-practices-for-modern-javascript-development

分享到:
评论

相关推荐

    javascript面向对象编程指南 2nd

    javascript面向对象编程指南 2nd英文版,英文名:Object-Oriented JavaScript。 What you will learn from this book The basics of object-oriented programming, and how to apply it in the JavaScript ...

    JavaScript 圣经第5版-Javascript编程宝典--黄金版 .rar

    Chapter 28: The Navigator and Other Environment Objects. Chapter 29: Event Objects. Chapter 30: Style Sheet and Style Objects. Chapter 31: Positioned Objects. Chapter 32: Embedded Objects. ...

    Beginning.JavaScript.5th.Edition

    Chapter 17: Other Javascript Libraries Chapter 18: Common Mistakes, Debugging, And Error Handling Appendix A: Answers To Exercises Appendix B: Javascript Core Reference Appendix C: W3C Dom Reference ...

    JavaScript Functional Programming for JavaScript Developers (PDF, EPUB, MOBI)

    The [removed] Functional Programming for JavaScript Developers course will take you on a journey to show how functional programming when combined with other techniques makes JavaScript programming ...

    JavaScript Patterns

    and other language-specific categories, the abstractions and code templates in this guide are ideal -- whether you're writing a client-side, server-side, or desktop application with JavaScript....

    JavaScript: Moving to ES2015

    This course is for experienced developers familiar with other object-oriented languages who wants to learn new capabilities of ES-2015 to improve their web development skills and build professional-...

    Speaking JavaScript

    Background: Understand JavaScript’s history and its relationship with other programming languages. Tips, tools, and libraries: Survey existing style guides, best practices, advanced techniques, ...

    Test-Driven JavaScript Development

    If you’re an experienced programmer with no prior experience with JavaScript, this part should help you understand where JavaScript differs from other languages, especially less dynamic ones, and ...

    The Principles of Object-Oriented JavaScript 1st Edition

    Zakas thoroughly explores JavaScript's object-oriented nature, revealing the language's unique implementation of inheritance and other key characteristics. You'll learn: –The difference between ...

    Enhancing Adobe Acrobat DC Forms with JavaScript

    • Utilize complex forms that include drop down and list boxes in combination with other form fields • Work with Action Wizard and JavaScript • Improve form navigation and printing of forms • Add ...

    Learning JavaScript Design Patterns - Addy Osmani.pdf

    This book also walks experienced JavaScript developers through modern module formats, how to namespace code effectively, and other essential topics. Learn the structure of design patterns and how ...

    JavaScript Domain-Driven Design(PACKT,2015)

    By the end of the book, you will learn to use other design patterns such as DSLs to extend DDD with object-oriented design base, and then get an insight into how to select the right scenarios to ...

    Javascript.Object.Oriented.Programming.pdf

    Using JavaScript, you can create interactive web pages along with desktop widgets, browser, and application extensions, and other pieces of software. Object-oriented programming, which is popularly ...

    JavaScript: The Good Parts

    If you want to learn more about the bad parts and how to use them badly, consult any other JavaScript book., JavaScript is the language of the Web -- the only language found in all browsers -- so ...

    Packt.Object-Oriented.JavaScript.3rd.Edition

    oriented programming in the JavaScript environment Use a JavaScript Console with complete mastery Make your programs cleaner, faster, and compatible with other programs and libraries Get familiar with...

    Advanced.Game.Design.with.HTML5.and.JavaScript.1430258004

    All the techniques covered in this book are core game design skills that can be applied to many other programming technologies. Table of Contents Chapter 1. Level-up: New JavaScript Tricks Chapter 2...

    与孩子一起学编程(Hello World!Computer Programming for Kids and Other Beginners)

    一本老少咸宜的编程入门奇书!一册在手,你完全可以带着自己的孩子,跟随Sande父子组合在轻松的氛围中熟悉那些编程概念,如内存、循环、输入和输出、数据结构和图形用户界面等。这些知识一点儿也不高深,听起来备感...

Global site tag (gtag.js) - Google Analytics