ECMAScript 2015(ES6)的十大特征

ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。

本文主要针对ES6做一个简要介绍。 主要译自:  http://webapplog.com/ES6/comment-page-1/。也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的十大特性。

以下是ES6排名前十的最佳特性列表(排名不分先后):

  1. Default Parameters(默认参数) in ES6
  2. Template Literals (模板文本)in ES6
  3. Multi-line Strings (多行字符串)in ES6
  4. Destructuring Assignment (解构赋值)in ES6
  5. Enhanced Object Literals (增强的对象文本)in ES6
  6. Arrow Functions (箭头函数)in ES6
  7. Promises in ES6
  8. Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
  9. Classes(类) in ES6
  10. Modules(模块) in ES6

声明:这些列表仅是个人主观意见。它绝不是为了削弱ES6其它功能,这里只列出了10条比较常用的特性。

首先回顾一下JavaScript的历史,不清楚历史的人,很难理解JavaScript为什么会这样发展。下面就是一个简单的JavaScript发展时间轴:

1、1995:JavaScript诞生,它的初始名叫LiveScript。

2、1997:ECMAScript标准确立。

3、1999:ES3出现,与此同时IE5风靡一时。

4、2000–2005: XMLHttpRequest又名AJAX, 在Outlook Web Access (2000)、Oddpost (2002),Gmail (2004)和Google Maps (2005)大受重用。

5、2009: ES5出现,(就是我们大多数人现在使用的)例如foreach,Object.keys,Object.create和JSON标准。

6、2015:ES6/ECMAScript2015出现。

历史回顾就先到此,现让我们进入正题。 继续阅读

jqXHR.fail()回调方法及其参数详细说明

为了让客户端提供错误日志,小弟使用了jqXHR.fail()去收集接口的错误信息,方便开发快速定位问题。

jqXHR.fail()是一个可供选择的 error 回调选项的构造函数,.fail()方法取代了的过时的.error()方法。从 jQuery 1.5 开始,$.ajax()返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性,方法和行为。为了让回调函数的名字统一,便于在$.ajax()中使用。jqXHR也提供.error() .success().complete()方法。

首先来看看语法。

过时的方法:

$.ajax({
...
error:function(jqXHR, textStatus, errorThrown) {},
...
})

Promise实现:

jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});

这里对这三个参数做详细说明。

第一个参数 jqXHR(jqXHR对象):这里的jqXHR是一个jqXHR对象,在jQuery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。 继续阅读

前端开发装逼手册

在装逼成本越来越高的 JS 圈,是时候充值一下了 ———— 题记

§ 开发

Macbook Pro 是标配,美其名曰“提高开发体验”
什么?你还在用 Spotlight?赶紧给我换 Alfred!

编辑器,Sublime / Atom / VS Code 三选一
虽然很想用IDE,但一定要忍住,并且与人解释道:
“启动速度慢,消耗资源多,不适合我这种完美主义者
如果不是为了美观,我宁愿使用 Vim / Emacs”

命令行 iTerm2 + Oh-my-zsh
二逼青年用 bash,普通青年用 zsh
我们也只是想做一名普通人罢了

查资料虽然都是百度
但一定要称都是用 Google
且要说英文而不是中文的“谷歌”
使用美式发音,当自己是湾区老司机

尽管四级飘过,六级没过
在 Stack Overflow 上点数也低
但也要说每天都与各国程序员谈笑风生 继续阅读

前端开发者接私活儿神器

同一家公司的同事,拿同样的工资,以前他在用肾机,我还在用诺记。吃饭的时候他是买单王,我在想这家伙应该没存什么钱吧。结果前段时间他买了个沃尔沃S60L,可我一套省城小三房的首付都还没凑齐。

他说他经常在外面接了些私活做,我感觉也不太靠谱,我也接过几个私活,不赚多少钱,还有的一个单子钱不多,开发时间很长,累得要死,吃力不讨好。我问他为什么能赚到钱,他告诉我,他的单价不比我的高,只是效率比我高很多,不是因为技术好多少而是他积累了很多前端模版,很多重复的功能就不用开发了,另外服务端直接用类似MashupCloud这样的BaaS平台,数据存储和常用的API服务足够做一个小型的项目。不用开发服务端程序,拼拼凑凑三两一个小单子就完成了。

这点心得让我大受启发,于是我开始使用这类的BaaS平台和一些第三方API接口,果然是私活儿神器。

献上MashupCloud地址希望大家能得到一些启发。

访问地址:http://mashupcloud.cn

主界面

主界面如下图所示,主要分为我的应用、数据模型、API中心: 继续阅读

推荐适合前端开发的十款 Chrome 扩展

对于前端开发者来说,Chrome 浏览器绝对是开发过程中不可缺少的利器:不仅仅是因为 Chrome 自带的功能强大的 devtool,更是因为 Chrome 有着各种好用的前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高你编码效率的强大扩展。我们就整理了十款前端开发相关的 Chrome 插件,在这里推荐给你。

1. 掘金 Chrome 插件

对于开发者来说,比开发过程更重要的,应该要算平时对于开发资源以及技术文章一点一滴的积累了吧。那么,开发者能够在哪里获取需要的技术内容呢?

过去,你可能需要在 GitHub、Dribbble 等许多网站之间不停地跳转来寻找自己需要的内容,现在,有了掘金 Chrome 插件,只需要一个新标签页面,你所需要的内容,它都能够为你聚合呈现出来,绝对算得上是发现干货的利器。 继续阅读

javascript :只执行一次的函数

在日常开发的时候,经常会碰到一种这样的情况:想让某个函数只执行一次,特别是在一些循环或定时执行的时候。

直接上代码:

function runOnce(fn, context) { //控制让函数只触发一次
    return function () {
        try {
            fn.apply(context || this, arguments);
        }
        catch (e) {
            console.error(e);//一般可以注释掉这行
        }
        finally {
            fn = null;
        }
    }
}

// Usage 1:
var a = 0;
var canOnlyFireOnce = runOnce(function () {
    a++;
    console.log(a);
});

canOnlyFireOnce(); //1
canOnlyFireOnce(); // nothing
canOnlyFireOnce(); // nothing

// Usage 2:
var name = "张三";
var canOnlyFireOnce = runOnce(function () {
    console.log("你好" + this.name);
});
canOnlyFireOnce(); //你好张三
canOnlyFireOnce(); // nothing

// Usage 3:
var obj = {name: "天涯孤雁", age: 24};
var canOnlyFireOnce = runOnce(function () {
    console.log("你好" + this.name);
}, obj);
canOnlyFireOnce(); //你好天涯孤雁
canOnlyFireOnce(); // nothing

继续阅读

前端开发中的JS调试技巧

转载自:http://seejs.me/2016/03/27/jsdebugger/

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。

本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。 继续阅读

移动前端适配—低级、无趣的老方法

首先请了解一下移动前端中 viewport (视口)http://www.css88.com/archives/5975

这里介绍一下几个移动前端适配—低级、无趣、一堆问题的老方法。早在几年前,移动前端适配有几个很简单使用的方法。那时屏幕尺寸或者说分辨率没如今这么多。一般设计师设计移动端页面统一按照640像素的宽度设计。因为当时的主流是iPhone4,iPhone4s ,iPhone5及iPhone5s,物理像素宽度为 640,分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。

例如下面是适配最简单粗暴的方法,而且根据我平时查看项目的代码的习惯,还有相对一部分项目还是使用这个方法做项目,或者维护项目:

<meta name="eqMobileViewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

看起来很简单,也很实用。开发时候一切根据640的设计稿除以2处理,字体也用简单的像素做单位(用rem换算麻烦)似乎是很完美,但是实际情况,特别是一些对齐,背景吻合总是会出现问题。还有就是用现在高分辨率的iPhone6s等手机看,总是会被设计师鄙视,看图就知道了。 继续阅读

用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API

这里了将介绍一下 页面可见性(PageVisibility)API的简单应用。

visibilitychange事件介绍

简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

这个事件可以满足一些用户需求,比如标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询,还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销。

这个事件已经得到现代浏览器广泛的支持,不过一些老版本的浏览器需要加相应的前缀。

Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
13前缀webkit
33无需前缀
10前缀moz
18无需前缀
10前缀ms 12.10 最新的测试已经支持

注:Opera 12.10浏览器在最小化时不触发visibilitychange事件,也不将hidden属性设置为true.

document的可见性属性

Page Visibility (Second Edition)中定义了2个只读的document属性:hiddenvisibilityState。

其中document.hidden是一个布尔值,简单的表示标签页显示或者隐藏。而document.visibilityState属性更为详细,目前有四个可能的值: 继续阅读

[前端日报]推荐一个GitHub/GitLab 代码结构浏览插件-Octotree

Octotree 是一个浏览器扩展(Chrome,Firefox,Opera和Safari),用以显示GitHub/GitLab 代码结构(代码树)。可以非常方便的浏览项目源代码,这样不必把每个项目拉取到你的机器。浏览器浏览时就像使用IDE目录结构,也不必来回的前进后退。

项目地址:https://github.com/buunguyen/octotree
chrome-github 继续阅读