首页 > 编程语言 >javascript 规范

javascript 规范

时间:2022-09-29 19:39:35浏览次数:81  
标签:jQuery JavaScript 变量 压缩 javascript 规范 com 代码

关于变量及方法等的命名,没有硬性规定,但是为了规范,遵循一些约定还是有必要的。

变量定义:

  用var 关键字将要使用的变量定义在代码开头,变量间用分号隔开。

  原因有二:

  • 一是便于理解,知道下面的代码会用到哪些变量,同时代码显得整洁且有规律,也方便管理,变量定义与逻辑代码分开;
  • 二是因为JavaScript中所有变量及函数名会自动提升,也称之为​​JavaScript的Hoist特性​​,即使你将变量的定义穿插在逻辑代码中,在代码解析运行期间,这些变量的声明还是被提升到了当前作用域最顶端的,所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。当然,再次说明这只是一种约定,不是必需的。

变量及函数命名 

  一般使用​​驼峰命名法​​(CamelCase),即首个单词的首字母小写,后面单词首字母大写,比如resultArray,requestAnimationFrame。

  对于常量,所有字母采用大写,多个单词用下划线隔开,比如WIDTH=100,BRUSH_COLOR='#00ff00'。

  当变量是jQuery类型时,建议以$开头,开始会不习惯,但经常用了之后会感觉很方便,因为可以很方便地将它与普通变量区别开来,一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法,比如var $element=$('a'); 之后就可以在后面的代码中很方便地使用它,并且与其他变量容易区分开来。

 

引号的使用

  一般HTML代码里面使用双引号,而在JavaScript中多用单引号,比如下面代码所示:

var name = 'Wayou';
document.getElementById(‘example’).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>';

  一方面,HTML代码中本来就使用的是双引号,另一方面,在JavaScript中引号中还需要引号的时候,要求我们单双引号间隔着写才是合法的语句,除非你使用转意符那也是可以的。再者,坚持这样的统一可以保持代码风格的一致,不会出现这里字符串用双引号包着,另外的地方就在用单引号。

 

压缩

下载的插件里面,一般都会提供一个压缩的版本一般在文件名里带个'min'字样。也就是minified的意思,压缩浓缩后的版本。并且平时我们使用的jQuery也是官网提供的压缩版本,jquery.min.js。

这里的压缩不是指代码进行功能上的压缩,而是通过将代码里面的变量名,方法函数名等等用更短的名称来替换,并且删除注释(如果有的话)删除代码间的空白及换行所得到的浓缩版本。同时由于代码里面的各种名称都已经被替代,别人无法阅读和分清其逻辑,也起到了混淆代码的作用。

压缩的好处

  • 源码经过混淆压缩后,体积大大减小,使代码变得轻量级,同时加快了下载速度,两面加载变快。比如正常jQuery v1.11.0的源码是276kb,而压缩后的版本仅94.1kb!体积减小一半还多。这个体积的减小对于文件下载速度的提升不可小觑。
  • 经过压缩混淆后,代码还能阅读嘛?当然不能,所以顺带还起到了代码保护的作用。当然只是针对你编写了一些比较酷的代码又不想别人抄袭的情况。对于jQuery社区,这里本身就是开源的世界,同时JavaScript这东西其实也没什么实质性方法可以防止别人查看阅读你的代码,毕竟有混淆就有反混淆工具,这里代码压缩更多的还是上面提到的压缩文件的作用,同时一定程度上防止别人抄袭。

 

Reference:

  1. jQuery官网学习中心关于插件开发的文章:​​http://learn.jquery.com/plugins/​
  2. jQuery官网插件中心:​​http://plugins.jquery.com/​
  3. jQuery官网插件发布指南:​​http://plugins.jquery.com/docs/publish/​
  4. JavaScript Hoist :​​http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html​
  5. Google Web Developer Tool :​​https://developers.google.com/closure/​


作者:panie


标签:jQuery,JavaScript,变量,压缩,javascript,规范,com,代码
From: https://blog.51cto.com/u_15812342/5723943

相关文章

  • JavaScript 事件
    EVENT(上)之前我们简单的了解过一些事件,比如​​onclick​​​ /​​onload​​​ /​​onscroll​​ /...今天开始,我们详细的学习一些事件什么是事件一个事件由什么东西......
  • JavaScript 语言基础知识点
    1、JavaScript数据类型2、JavaScript变量3、Javascript运算符4、JavaScript流程控制5、JavaScript函数基础6、JavaScript数组7、JavaScript字符串函数8、JavaS......
  • 18.getElementById(id)是javascript中访问某个元素的方法
    document.getElementById(id)是javascript中访问某个元素的方法。返回指定ID的元素getElementById()方法可返回对拥有指定ID的第一个对象的引用。HTMLDOM定义了多......
  • JavaScript ES6常用基础知识总结
    ​ES6let与const及其相关块级作用域ES6新增了块级作用域,总结一句话大致就是:大括号{}包起来的代码块基本山都可以当做块级作用域。常见的有直接使用{}包起来:{vara=4}函数......
  • JavaScript——正则表达式
    正则表达式                                                         ......
  • JavaScript——案例-表单验证
    需求     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><formid="reg-form"action="#"......
  • JavaScript封装方法
    1、输入一个值,返回其数据类型**2、数组去重3、字符串去重1、输入一个值,返回其数据类型**functiontype(para){returnObject.prototype.toString.call(para)......
  • JavaScript 中的全局变量 和局部变量
    JS中声明全局变量主要分为显式声明或者隐式声明。1.显示声明:使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量;在function内部声明的是局部变量。<scrip......
  • JavaScript——事件监听
    事件监听    1、事件绑定      2、常见事件    ......
  • JavaScript构造函数
    一、什么是构造函数 构造函数(Constructor)的创建方式和普通函数一样。但通常首字母进行大写,用于和普通函数区分。 但是当一个函数创建好以后,我们并不知道它是不是构造......