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‘;

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) //5
    console.log(a) //4

    // good
    var a=b=4;
        b=5;
    console.log(b) //5
    console.log(a) //4

如果是引用类型的就不要写一起,写一起容易导致修改一个变量的值牵连另一个变量跟着改变。以下引用变量被重新赋值,不会影响其他变量①,但是对变量通过引用类型的方法改变变量的值,就会影响其他变量②。

    ①、
    var a=b=[];
        b=5;
    console.log(b) //5
    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.运算符优先级及简写。

  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/

?.不定更新.?

时间: 2024-08-13 13:20:00

Js极客之路 - 简化操作的相关文章

Js极客之路 - 优化操作(性能优化)

1.因为每次For循环都会计算一次arr.length,所以有必要存储数组长度以减少计算.针对这篇文章(http://www.crimx.com/2015/04/21/should-array-length-be-cached-or-not/),V8引擎好像已经帮我们做了不变数据的缓存,不过个人认为还是很有必要的,像他说的,假若只有V8引擎做了此事(V8开发者有这样说吗?),我们做缓存,对于V8就当帮它咯,对于其他就是优化咯. //bad var arr=[1,2,3,...]; for(var

数极客vs百度统计深度对比

声明:本测评时间为2018年1月,若信息有误或更新请反馈至邮箱:[email protected].测评报告仅供参考,因采购该服务产生的任何争议与本文无关,文章版权归作者所有,未经授权不得转载. 编者按:企业在选择用户行为分析工具时,大都不知道如何选择适合自己的用户行为分析工具.笔者自己公司之前用的是百度统计,去年7月份同时接入了数极客的分析平台.在同时使用了这两款行为分析产品后,笔者从两款产品的定位.数据接入方式.定量分析功能.定性分析功能.二次开发与扩展.服务项目等六个主要方面深入对比百度统

极客学院Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

===============课程目录=============== ├<初级中级>│  ├<1. HTML5开发前准备>│  │  ├1.HTML5开发前准备.mp4│  │  └2.开发前的准备-快捷键.mp4│  ├<10. React.js>│  │  ├React.js简介.txt│  │  ├<1.React 概述>│  │  │  ├React 开发环境搭建.mp4│  │  │  ├编写第一个 React 程序.mp4│  │  │  └什么

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

极客Web前端开发资源大荟萃#007

本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的'学'与'习'的全新功能.希望对大家有所帮助!原文来自:极客标签 移动设备表单输入设计体验 - leader.js 为了帮助降低移动或者手机端输入的操作复杂度,leader.js提供了一个相对更简单的输入体验,你只需要输入表单内容回车即可完成输入,非常方便. Javascript游戏,街头霸王 有没有让你想起点什么?我

极客Web前端开发资源集锦

本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的'学'与'习'的全新功能.希望对大家有所帮助!原文来自:极客标签 移动设备表单输入设计体验 - leader.js 为了帮助降低移动或者手机端输入的操作复杂度,leader.js提供了一个相对更简单的输入体验,你只需要输入表单内容回车即可完成输入,非常方便. Javascript游戏,街头霸王 有没有让你想起点什么?我

数极客VS友盟体验对比

本人系运营喵体系数据分析师一枚,趟在互联网大潮中三年多,不敢说丰富的数据分析经验,但就使用过的数据分析系统还是想跟大家分享一下体会和心得,也好帮助正在选择或未来要选择使用数据分析系统的同仁做出适合自己的选择. 我一直从事在一家汽车电商公司,电商离不开数据,但自己开发数据分析系统耗费的人力和时间成本太高,因此果断选择专业的数据分析平台,现在友盟(免费版)和数极客(付费版)都在用,业内搞网站分析的朋友肯定也都听过.以下就从产品定位.平台.数据接入和导出.功能模块和服务上给大家进行下对比. 一.产品定

极客时间-左耳听风-程序员攻略-软件设计

程序员练级攻略:软件设计 编程范式 学习编程范式可以让你明白编程的本质和各种语言的编程方式.因此,我推荐以下一些资料,以帮助你系统化地学习和理解. 极客时间的<编程范式游记>系列文章,目录如下. 编程范式游记(1)- 起源 编程范式游记(2)- 泛型编程 编程范式游记(3)- 类型系统和泛型的本质 编程范式游记(4)- 函数式编程 编程范式游记(5)- 修饰器模式 编程范式游记(6)- 面向对象编程 编程范式游记(7)- 基于原型的编程范式 编程范式游记(8)- Go 语言的委托模式 编程范式

2016第七季极客大挑战Writeup

第一次接触CTF,只会做杂项和一点点Web题--因为时间比较仓促,写的比较简略.以后再写下工具使用什么的. 纯新手,啥都不会.处于瑟瑟发抖的状态. 一.MISC 1.签到题 直接填入题目所给的SYC{We1c0m3_To_G33k_2O!6} 并且可以知道后边的题的Flag格式为 SYC{} 2.xiao彩蛋 题目提示关注微博,从Syclover Team 博客(http://blog.sycsec.com)可获取到三叶草小组微博,私信发送flag后即可得到. 3.闪的好快 一开始拖进PS分帧数