lodash 中文文档

一个 JavaScript 的实用工具库, 表现一致性, 模块化, 高性能, 以及 可扩展。

lodash一开始是Underscore.js库的一个fork,因为和其他(Underscore.js的)贡献者意见相左。John-David Dalton的最初目标,是提供更多“一致的跨浏览器行为……,并改善性能”。之后,该项目在现有成功的基础之上取得了更大的成果…

与其前任Underscore一样,lodash的名字也是源于所有函数前面的那个字符。就像jQuery在全部函数前加全局的$一样,lodash使用全局的_来提供对工具的快速访问。例如,要对数组的所有元素执行某个行为,我们可以:

_.each([1, 2], function(n) { console.log(n); });

lodash 中文文档 v4.16.1 : http://www.css88.com/doc/lodash/ (旧版本可以进入后选择版本查看)

===============以下2016年9月24日增加==============

  • 目前最新版本为v4.16.1
  • 文档界面上根据官网提供的样式生产,更加美观,方便。
  • REPL运行代码,直接查看运行结果,更加直观,帮助理解。

:target 伪类使用技巧

什么是CSS伪类?

通常选择器不能表现HTML元素或属性的状态,我们可以在CSS选择器上添加伪类表示元素的状态、特征。伪类名写在选择器的:冒号后面,必要时可以添加(),例如:#comments:not(:target)

:target 伪类用来指定那些包含片段标识符的 URL 的目标元素样式。 例如:http://www.css88.com/demo/target-selector/#target-test这个 URL 包含了 #target-test 片段标识符。 在HTML中, 标识符是元素的id(或者name属性)。 这个示例 URL 指向的是ID为”target-test”的元素 。看看这个最简单的例子,页面上有个元素,如下:

<div id="target-test">这个元素的id为"target-test"</div>

添加CSS代码:

#target-test {
    background-color: transparent;
    border-bottom: 3px solid #ffdb3a;
    font-weight: 700;
}
#target-test:target {
    background-color: #ffdb3a;
}

点击查看:http://www.css88.com/demo/target-selector/

当然这个是最简单的例子,下面我介绍几个有意思的例子。 继续阅读

Zepto.js (1.2.0) API 中文文档

升级了 Zepto.js API 中文文档,最新版本1.2.0。

Zepto.js (1.2.0) API 中文文档地址:http://www.css88.com/doc/zeptojs_api/

Zepto.js 的更新说明:https://github.com/madrobby/zepto/releases

老版本文档:

 

JavaScript中undefined和null的区别

关于undefined

在JavaScript中,undefined这个词有多重含义。首字母大写的Undefined表示的是一种数据类型,首字母小写的undefined表示的是属于这种数据类型的唯一的一个值。但这两种undefined都只能存在于文档或规范中,不能存在于JavaScript代码中。

在JavaScript代码中,你看到的undefined最有可能是全局对象的一个属性,该属性的初始值是就是前面所说的原始值undefined,还有种情况就是,这个undefined是个局部变量,就像其他普通变量一样,没有任何特殊性,它的值不一定是undefined,但通常情况下都是的。下面我们所说的undefined,都指的是window.undefined这个属性.

在ES3中(Firefox4之前),window.undefined就是一个普通的属性,你完全可以把它的值改变成为任意的真值,但在ES5中((Firefox4之后),window.undefined成了一个不可写,不可配置的数据属性,它的值永远是undefined

你可以使用严格相等运算符来判断一个值是否是undefined:

var x;
if (x === undefined) {
   // 执行到这里
}
else {
   // 不会执行到这里
}

注: 这里必须使用严格相等运算符===,而不能使用普通的相等运算符==,因为x == undefined成立还可能是因为xnull,在JavaScript中null==undefined是返回true的. 继续阅读

JS判断浏览器iOS(iPhone)、Android手机移动端

通过判断浏览器的userAgent,用正则来判断手机是否是iosAndroid客户端。网上搜索来的,比较简单:

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

下面一个比较全面的浏览器检查函数,提供更多的检查内容,你可以检查是否是移动端Mobile、ipad、iphone、微信、QQ等。

//判断访问终端
var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

使用也很简单: 继续阅读

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中心: 继续阅读