• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 前端编码风格规范之 JavaScript 规范

前端编码风格规范之 JavaScript 规范

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5教程,HTML5中国,前端编码风格规范之 JavaScript 规范,html5cn,html5资料,html等相关知识,匿名希望在学习及工作中可以帮助到您
英文原文:Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / SASS coding style


JavaScript 规范


全局命名空间污染与 IIFE


总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。


IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改(i.e. 第三方库,window 引用,被覆盖的未定义的关键字等等)。


不推荐


  • y = 100;

  • // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
  • // will be stored in the window object. This is very unclean and needs to be avoided.
  • console.log(window.x + ' ' + window.y);
  • 复制代码

    推荐


  • (function(log, w, undefined){
  • 'use strict';

  • var x = 10,
  • y = 100;

  • // Will output 'true true'
  • log((w.x === undefined) + ' ' + (w.y === undefined));

  • }(window.console.log, window));
  • 复制代码

    IIFE(立即执行的函数表达式)


    无论何时,想要创建一个新的封闭的定义域,那就用 IIFE。它不仅避免了干扰,也使得内存在执行完后立即释放。


    所有脚本文件建议都从 IIFE 开始。


    立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。


    不推荐



    推荐



    so,用下列写法来格式化你的 IIFE 代码:


  • 'use strict';

  • // Code goes here

  • }());
  • 复制代码

    如果你想引用全局变量或者是外层 IIFE 的变量,可以通过下列方式传参:


  • 'use strict';

  • $(function() {
  • w.alert(d.querySelectorAll('div').length);
  • });
  • }(jQuery, window, document));
  • 复制代码

    严格模式


    ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮,运行的也更加快速。


    严格模式会阻止使用在未来很可能被引入的预留关键字。


    你应该在你的脚本中启用严格模式,最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。


    不推荐


  • 'use strict';

  • (function(){

  • // Your code starts here

  • }());
  • 推荐

  • (function(){
  • 'use strict';

  • // Your code starts here

  • }());
  • 复制代码

    变量声明


    总是使用 var 来声明变量。如不指定 var,变量将被隐式地声明为全局变量,这将对变量难以控制。如果没有声明,变量处于什么定义域就变得不清(可以是在 Document 或 Window 中,也可以很容易地进入本地定义域)。所以,请总是使用 var 来声明变量。


    采用严格模式带来的好处是,当你手误输入错误的变量名时,它可以通过报错信息来帮助你定位错误出处。


    不推


  • y = 100;
  • 复制代码

    推荐


  • y = 100;
  • 复制代码

    理解 JavaScript 的定义域和定义域提升


    在 JavaScript 中变量和方法定义会自动提升到执行之前。JavaScript 只有 function 级的定义域,而无其他很多编程语言中的块定义域,所以使得你在某一 function 内的某语句和循环体中定义了一个变量,此变量可作用于整个 function 内,而不仅仅是在此语句或循环体中,因为它们的声明被 JavaScript 自动提升了。


    我们通过例子来看清楚这到底是怎么一回事:


    原 function


  • 'use strict';

  • var a = 10;
  • 您可能想查找下面的文章:

    • 一款利用html5和css3动画排列人物头像的实例演示
    • html5教程调用绘图api画简单的圆形代码分享
    • html5教程画矩形代码分享
    • html5教程制作简单画板代码分享
    • html5基础教程常用技巧整理
    • html5教程-Canvas入门
    • html5教程画矩形代码分享
    • HTML5晃动DeviceMotionEvent事件
    • HTML5教程之html 5 本地数据库(Web Sql Database)
    • HTML5中对contenteditable属性的解释与规定

    相关文章

    • 2018-12-03H5怎么操作WebSQL数据库
    • 2018-12-03详解HTML5浏览器兼容性解决方案
    • 2018-12-03HTML5的表单(绝对特别强大的功能)使用示例_html5教程技巧
    • 2017-08-06HTML5 语义化结构化规范化
    • 2018-12-03什么是 WebSocket?深入理解html5中WebSocket
    • 2018-12-03HTML5边玩边学(七)-动画初步之飞舞的精灵
    • 2017-08-06html5 offlline 缓存使用示例
    • 2018-12-03新增特性如何使用?总结新增特性实例用法
    • 2018-12-03IE8不兼容rgba()的处理方法详解
    • 2018-12-03怎样实现H5微信播放全屏

    文章分类

    • html/xhtml
    • html5
    • CSS
    • XML/XSLT
    • Dreamweaver教程
    • Frontpage教程
    • 心得技巧
    • bootstrap
    • vue
    • AngularJS
    • HBuilder教程
    • css3
    • 浏览器兼容
    • div/css
    • 网页编辑器
    • axure

    最近更新的内容

      • HTML5 新旧语法标记对我们有什么好处
      • HTML5新增加标签和功能概述
      • 详解HTML5中div和section以及article的区别
      • HTML5实现的Loading缓冲效果
      • 使用jQuery HTML5和FormData上传文件的方法示例
      • HTML5 中的新数组
      • HTML5 Canvas实现烟花绽放特效_html5教程技巧
      • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
      • HTML5 Canvas API中drawImage()方法的使用实例
      • 如何用H5实现拖放效果

    关于我们 - 联系我们 - 免责声明 - 网站地图

    ©2020-2025 All Rights Reserved. linkedu.com 版权所有