Some items you should konw :
  • Graceful degradation : ensuring that your web pages still work without JavaScript
  • Unobtrusive JavaScript : separating structure from behavior
  • Backward compatibility : ensuring that older broswers dont choke on your scirpts
  • Performance consideration : making sure that your script is performing at its best
 
 
Graceful degradation
Its always worth remembering that a visitor to your site might be using a browser that doesnt
support JavaScript. Or maybe the user has disabled JavaScript. If you dont consider this possibility,
you could inadvertently stop visitors from using your site. 
 
 
Unobtrusive JavaScript
Using an attribute like onclick in the markup is just as inefficient as using the style attribute.
You can attach an event to an element in an external JavaScript file :
        element.event = action ... 
eg : if you want to attach an event to an element with a unique ID, you can simply use getElementByID :
        getElementById(id).event = action  
There is just one problem. This code will be executed as soon as the JavaScript file loads.
But there is no guarantee which files will finish loading first. So the document may be incomplete when 
the script loads, the model of the document is also incomplete, and methods like getElementByTagName
simply wont work.
You need to execute the code once you're sure the document has finished loading.
Fortunately, the complete loading of a document is an event with a corresponding event handler.
        window.onload = prepareLinks ; 
        function prepareLinks() { ... }
 
Backward compatibility 
If you wrap a method in an if statement, the statement will evaluate to either true or false, depending on 
whether the method exists . This is called object detection.
As you saw before, methods are objects, just like almost everything else in JavaScript. It makes it quite esay
to exclude browsers that dont support a specific DOM method.
        if( !getElementById || !getElementByTagName ) return false;
 
 
Performance consideration
  • Minimizing DOM access and markup ( 减少DOM 以及 标记 )
  • Assembling and placing scripts ( 合并放置 脚本 ) :
     Reducing the number of requests required to load a page is probably the number one thing you can do 
     to improve the overall load time of your website.
  • Minification : this refers to the process of taking your script and "compressing" it by removing the unnecessary bits such as whitspace and comments.  Minifed code isnt pretty or human-readable, but it can make a big difference in filse size.
      In most cases, you will need to keep two copies : a working copy, in which you can make changes an 
      commens, and the minified copy, which you serve up on your site. As a standard convention, a good idea it
      to include min in the file name of minified files to distinguish them from their nonminified couterparts.
              <script src = "sciptes/scriptName.min.js"> </scirpt>
 

Best Practices in JavaScript的更多相关文章

  1. web前端性能意义、关注重点、测试方案、优化技巧

    1.前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则: 80%的最终用户 ...

  2. Cheatsheet: 2019 07.01 ~ 09.30

    Other Intro Guide to Dockerfile Best Practices QuickJS Javascript Engine Questions for a new technol ...

  3. 45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧,技巧和最佳实践)

    As you know, JavaScript is the number one programming language in the world, the language of the web ...

  4. 转:45 Useful JavaScript Tips, Tricks and Best Practices

    原文来自于:http://flippinawesome.org/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/ 1 – ...

  5. JavaScript Best Practices (w3cschool)

    JavaScript Best Practices (w3cschool) Local Variables: ·      总是在前面集中定义变量,(包括 for 的i).(strict mode) ...

  6. 45 Useful JavaScript Tips, Tricks and Best Practices

    <45 Useful JavaScript Tips, Tricks and Best Practices> http://flippinawesome.org/2013/12/23/45 ...

  7. JavaScript best practices JS最佳实践

    JavaScript best practices JS最佳实践 0 简介 最佳实践起初比较棘手,但最终会让你发现这是非常明智之举. 1.合理命名方法及变量名,简洁且可读 var someItem = ...

  8. 《javascript高级程序设计》 第24章 最佳实践 Best Practices

    24.1 可维护性 Maintainability24.1.1 什么是可维护的代码 What Is Maintainable Code?24.1.2 代码约定 Code Conventions 24. ...

  9. 24 javascript best practices for beginner(only 23 finally)

    原文是英文,链接: http://net.tutsplus.com/tutorials/JavaScript-ajax/24-JavaScript-best-practices-for-beginne ...

随机推荐

  1. css3骰子(transform初识)

    利用css3制作可旋转的骰子,效果图如下,也可以查看 demo: 首先是骰子的html结构,.page 是骰子的六个页面的 class,#one-#six分别表示六个面,.point 是骰子表面的点数 ...

  2. GDB多线程调试分析

    0x00: 在Linux系统上Gdb提供了一组多线程调试命令,如表所示: 多线程调试的主要任务是准确及时地捕捉被调试程序线程状态的变化的事件,并且GDB针对根据捕捉到的事件做出相应的操作,其实最终的结 ...

  3. win10 安装mysql zip 压缩包版

    从官网下载zip https://www.mysql.com/downloads/ 解压 D:\devtool\mysql-5.7.17-winx64\ 将  D:\devtool\mysql--wi ...

  4. Sundy_Android开发深入浅出和高级开发视频教程

    Sundy_Android开发深入浅出和高级开发视频教程 放于播音员的网盘中又名:android零基础到高级软件开发工程师培训课程全集(400多讲) 1.课程介绍 2.java重点难点 3.版本控制- ...

  5. jQuery-prepend、append、before、after的区别

    举例说明,原始html代码如下: <ol> <li>List item 1</li> <li>List item 2</li> <li ...

  6. PHP: 打印post数据,返回长度不为1但内容为空的问题

    问题: 首先,html长这样: 我们可以看到textarea标签的name值为cten,那么我们进行查看Post是否能够正常获取到数据: 后台进行获取: 结果:我们可以正常获取到数据 接下来,我们进行 ...

  7. 通过CSS3实现:鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  8. JAX-WS @WebParam自定义参数名称无效

    在使用myeclipse 自动对service方法类进行创建webservice服务时,默认创建参数命名都是arg0-9 这样就导致生成的xml配置文件命名不规范,需要对参数名称进行修改: myecl ...

  9. 制作URL以GET方式提交的简单加密程序

    首先我们用到的是 DESCryptoServiceProvider 类 对此微软给出的解释是 定义访问数据加密标准 (DES) 算法的加密服务提供程序 (CSP) 版本的包装对象.无法继承此类. 接下 ...

  10. Jenkins添加项目说明,增加项目描述

    背景:往往正常Jenkins上呈现的内容,太过简短,不易直观看了解项目是干嘛的,如下面的内容: 解决方案,使用插件,Extra Columns Plugin 安装成功后配置,需要结合自定义视图使用,新 ...