Js极客之路 - 简化操作
1.对字符串使用单引号(避免动态添加元素时html会出现的双引号"引起的冲突,方便操作 - 单引号一个键,双引号两个键)
// bad
var name = "Barrior"; // good
var name = 'Barrior';
2.使用一个 var 声明多个变量,用逗号隔开。
// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z'; // good
var items = getItems(),
goSportsTeam = true,
dragonball = 'z';
然后,一个 var 声明多个变量,可能会在修改时造成逗号和分号的混淆。如果压缩,压缩工具会自动减少var的声明,变成【good】的这种形式,所以,为了后期维护,就都加上var吧,像【bad】这样,注意适当,美观和可读性最重要,var满天飞也不好。
3.以后赋值的变量不需要赋初始值。
// bad
var timer=null;
clearInterval(timer);
timer=setInterval(function(){
...code
},1000); // good
var timer;
clearInterval(timer);
timer=setInterval(function(){
...code
},1000);
4.值为基本类型的相等变量写在一起(更新:不能写在一起)。
// bad
var a=4,
b=4;
b=5;
console.log(b) //
console.log(a) // // good
var a=b=4;
b=5;
console.log(b) //
console.log(a) //4 2015.08.27更新:其实不能写在一起,后面的变量的作用域改变了,示例:
function fn(){
var a=b=4;
b=5;
console.log(b) //5
console.log(a) //4
}
fn();
console.log( b ) //5
console.log( a ) //Uncaught ReferenceError: a is not defined
如上,虽然输出没有影响,但是变量的作用域却改变了,a的作用域还是原本的作用域fn,而b的作用域却上升到了window
如果是引用类型的就不要写一起,写一起容易导致修改一个变量的值牵连另一个变量跟着改变。以下引用变量被重新赋值,不会影响其他变量①,但是对变量通过引用类型的方法改变变量的值,就会影响其他变量②。
①、
var a=b=[];
b=5;
console.log(b) //
console.log(a) //[] ②、
var a=b=[];
b.push(5);
console.log(b) //[5]
console.log(a) //[5]
5.语句结束的分号。
//bad?
(function() {
var name = 'Barrior';
return name;
})() //good
(function() {
var name = 'Barrior';
return name
})()
//最后不加分号;其实每行都不加分号都没问题,浏览器会自动给换行加上分号(每行能够形成独立的逻辑语义),即便压缩,好像压缩也会自动给换行加上分号,而且最后一行是没有分号的。
6.使用字面量创建对象
//bad
var arr=new Array(),
obj=new Object(); //good
var arr=[],
obj={};
7.条件表达式和等号的快捷操作。
条件表达式的强制类型转换遵循以下规则:
▊ 对象 被计算为 true
▊ Undefined 被计算为 false
▊ Null 被计算为 false
▊ 布尔值 被计算为 布尔的值
▊ 数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true
▊ 字符串 如果是空字符串 '' 则被计算为 false, 否则为 true
// bad
if (name !== '') {
...code
} // good
if (name) {
...code
} // bad
if (oTest != false) {
...code
} // good
if (!oTest) {
...code
} // bad
if (arr.length > 0) {
...code
} // good
if (arr.length) {
...code
}
8.使用1替代true,0替代false(因为在javascript语言中 true等于1,false等于0。因此,脚本包含的字面变量true都可以用1来替换,而false可以用0来替换。 )。
//bad
var b=true;
if( b ){
...code
} //good
var b=1;
if( b ){
...code
}
9、对有序集合进行顺序无关的遍历时,使用逆序遍历。逆序遍历可以节省变量,代码比较优化。
var len = elements.length;
while (len--) {
var element = elements[len];
// ......
}
10.运算符优先级及简写。
Js运算符优先级:
JavaScript在计算表达式时具有较高优先级的运算符先于较低优先级的运算符执行;例如,乘法的执行先于加法;下表按从最高到最低的优先级列出JavaScript运算符,具有相同优先级的运算符按从左至右的顺序计算。
优先级 |
运算符 |
说明 |
最高 |
. [] () |
字段访问、数组索引、函数调用和表达式分组 |
由高到低 依次排列 |
++ -- ~ ! delete new typeof void |
一元运算符、对象创建、 返回数据类型、未定义的值 |
* / % |
乘法、除法、取模 |
|
+ - + |
加法、减法、字符串连接 |
|
<< >> >>> |
移位 |
|
< <= > >= instanceof |
小于、小于或等于、大于、大于或等于、 是否为特定类的实例 |
|
== != === !== |
相等、不相等、全等、不全等 |
|
& |
按位“与” |
|
^ |
按位“异或” |
|
| |
按位“或” |
|
&& |
逻辑“与” |
|
|| |
逻辑“或” |
|
?: |
条件运算 |
|
= += -= *= /= %= &= |= ^= <<= >>= |
赋值、赋值运算 |
|
最低 |
, |
多重求值 |
● if语句转用&&符号。
//bad?
var a=true,
b;
if(a){
b=5
} //good?
var a=true,
b;
if(a) b=5 //good?
var a=true,
b;
a && (b=5)
● if...else语句转用三目运算。
//bad?
var a=1,
b; if( a ){
b=5
}else{
b=4
} //good?
var a=1,
b;
b = a ? 5 : 4
● 多个运算符一起操作,示例[1]
//bad?
lineBox.on('click','a',function(){
if( $(this).text()=='添加分组' ){
addCon.val('').focus();
hint.removeClass('red-text')
}
}); //good?
lineBox.on('click','a',function(){ $(this).text()=='添加分组' && addCon.val('').focus() && hint.removeClass('red-text') });
● 多个运算符一起操作,表单验证;DOM操作使用jQuery。
<form action="#" method="post"> <input type="text" /> <input type="password" /> <input type="submit" value="提交" /> </form> $('form').submit(function(){ return check( $('input[type=text]'),'请输入用户名' ) && check( $('input[type=password]'),'请输入密码' ) });
//【&&】运算规则:先执行左侧(文本的返回值),如果是false,那么停止执行,直接返回false,如果为true,那么执行后面一个值(密码的返回值)②;如果②为false,整个表达式直接返回false,如果为true,依次类推继续执行后面的值。 function check(obj,text){ return obj.val() ? true : (alert(text),false) }
//表达式运算流程:如果传进来的obj有val()值,那么返回【?】后面的true,如果没有值则执行【:】后面的小括号(小括号的优先级最高,所以里面的内容被独立成了一个)里面的内容,里面内容除了逗号没有其他运算符,所以执行顺序从左至右。
//如果改成这样:return obj.val() ? true : alert(text) , false
//运算流程:根据运算符优先级,表达式被分为三目运算(三目运算里再被分为true,和alert(text)两块),和false两块;这里的【,】运算符的作用是返回【,】右侧的值。所以,return 后面如果有多个表达式,且表达式之间由【,】隔开,整个return返回的是最后一个【,】右侧的值。所以这个表达式不管传进来的obj是否有值都返回了false。
附:
【|=】运算规则:对变量值与表达式值执行按位“或”运算,并将结果赋给该变量(https://msdn.microsoft.com/library/81bads72(v=vs.94).aspx)。
示例解释:
i = 1; //二进制为0001 i | 2; //2的二进制为0010 两个按位或为0011也就是3 i |= 2 等价于 i = i | 2; 所以 i 为 3
参考:
http://www.codeceo.com/article/javascript-guide.html
http://www.cnblogs.com/jclser/archive/2010/02/17/1668922.html
http://www.tashan10.com/kan-liao-zhe-ge-cai-fa-xian-jqueryyuan-dai-ma-bu-shi-na-yao-hui-se/
https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md
最后修改时间:2015-08-07
Js极客之路 - 简化操作的更多相关文章
- Js极客之路 - 优化操作(性能优化)
1.因为每次For循环都会计算一次arr.length,所以有必要存储数组长度以减少计算.针对这篇文章(http://www.crimx.com/2015/04/21/should-array-len ...
- AI 开发路漫漫,什么才是真正的极客精神?
摘要:AI开发看上去很美,实践起来却不是一件容易的事.一个聪明的开发者知道借助工具提升开发效率,一个智能的平台则会站在开发者的立场,为用户提供贴心服务. 前言 “理想很丰满,现实很骨感.”如果用一句话 ...
- [2013 eoe移动开发者大会]靳岩:从码农到极客的升级之路
(国内知名Android开发论坛 eoe开发者社区推荐:http://www.eoeandroid.com/) 前天,2013 eoe 移动开发者大会在国家会议中心召开,eoe 开发者社区创始人靳岩在 ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
- Node.js博客搭建
Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...
- 如何在node和vue前后端分离的项目中使用极客验证,用node的方式
1.用express的脚手架和vue-cli的脚手架搭建的项目目录如下图 2.在vue-client的src/component新建一个login.vue文件,作为登录页面,代码如下 <temp ...
- 极客Web前端开发资源集锦
本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的‘学’与‘习’的全新 ...
- 数据结构(逻辑结构,物理结构,特点) C#多线程编程的同步也线程安全 C#多线程编程笔记 String 与 StringBuilder (StringBuffer) 数据结构与算法-初体验(极客专栏)
数据结构(逻辑结构,物理结构,特点) 一.数据的逻辑结构:指反映数据元素之间的逻辑关系的数据结构,其中的逻辑关系是指数据元素之间的前后件关系,而与他们在计算机中的存储位置无关.逻辑结构包括: 集合 数 ...
- maven介绍 极客学院
来自极客学院 Apache Maven 是一套软件工程管理和整合工具.基于工程对象模型(POM)的概念,通过一个中央信息管理模块,Maven 能够管理项目的构建.报告和文档. Maven - 概述 M ...
随机推荐
- 【linux】【NodeJs】Centos7安装node-v10.16.3环境
前言 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. https://node ...
- kafka报错:Invalid message size: 0
现象 1.kafka topic 部分分区积压 2.问题kafka 节点上一直报错:java.lang.IllegalStateException: Invalid message size: 0 [ ...
- BERT预训练模型的演进过程!(附代码)
1. 什么是BERT BERT的全称是Bidirectional Encoder Representation from Transformers,是Google2018年提出的预训练模型,即双向Tr ...
- JVM调优(一)——参数查询和问题排查
JVM的参数类型 标准参数 -help -server -client -version -showversion -cp -classpath X参数 -Xint: 解释执行 -Xcomp:第一次使 ...
- 在Debian上用FVWM做自己的桌面
用FVWM做自己的桌面 Table of Contents 1. 前言 2. 学习步骤 3. 准备 3.1. 软件包 3.2. 字体 3.3. 图片 3.4. 参考资料 4. 环境 5. 布局 6. ...
- Angular 页面初始化动画
用于进入组件前的加载动画 第一步:index.html 定义动画模板和样式 // 样式 <style type="text/css">.preloader { posi ...
- 编写shell脚本实现一键创建KVM虚拟机
shell脚本一键创建虚拟机 代码如下: #!/bin/bashname=$1 #把位置变量$1重新定义为name(创建虚拟机的名字)path1=/var/lib/libvirt/images/ #i ...
- 【Spring Boot源码分析】@EnableAutoConfiguration注解(一)@AutoConfigurationImportSelector注解的处理
Java及Spring Boot新手,首次尝试源码分析,欢迎指正! 一.概述 @EnableAutoConfiguration注解是Spring Boot中配置自动装载的总开关.本文将从@Enable ...
- MongoDB 学习笔记之 索引选项和重建索引
索引选项: {background:true}在后台创建索引,索引在构建过程中,其他客户端仍然可以查询数据,不会阻塞. db.comments.createIndex({anonymous: 1},{ ...
- 数据的异构实战(一) 基于canal进行日志的订阅和转换
什么是数据的异构处理.简单说就是为了满足我们业务的扩展性,将数据从某种特定的格式转换到新的数据格式中来. 为什么会有这种需求出现呢? 传统的企业中,主要都是将数据存储在了关系型数据库中,例如说MySQ ...