Archives for 8月 2015 | 前端道场

编写 input-filter 插件中的所知所得

GitHub：codelegant/input-filter，Git@OSC：chuanfeng/input-filter。

attachEvent 中的 this

事件处理程序在事件目标上定义，所以它们作为这个对象的方法来调用并不出人意料。这就是说，在事件处理程序内，this关键字指的是事件目标。

但是，对于attachEvent()来说，这是不对的：使用achEvent()注册的处理程序作为函数调用，它们的 this 值是全局（Window）对象。

target.attachEvent("onclick",function(){
    console.info(this);//并不是指代target，而是指代Window
});

target.attachEvent("onclick",function(){

console.info(this);//并不是指代target，而是指代Window

});

解决方案：

function eventHandler=function(){...}
target.attachEvent("onclick",function(){
    //把处理程序作为事件目标的方法调用
    //传递事件对象
    return eventHandler.call(target);
})

function eventHandler=function(){...}

target.attachEvent("onclick",function(){

//把处理程序作为事件目标的方法调用

//传递事件对象

return eventHandler.call(target);

})

查看全文

学习 ES6：第七种数据类型–符号(Symbols)

自1997年 JavaScript 发明以来，一直只有六种数据类型，在 ES6 中，出现了第七种数据类型：符号(Symbols)。

参考博文：ES6 In Depth:SymbolsMDN：Symbol。

自从1997年 JavaScript 语言第一次被标准化，就拥有六种数据类型，到 ES6 标准确立之前，每一个 JavaScript 变量都可以在其中找到归属。

Undefined
Null
Boolean
Number
String
Object

查看全文

学习 ES6：箭头函数 Arrow Functions

如果 JavaScript 中申明函数不用function关键字会是什么样？参考博文：ES6 In Depth:Arrow Functions

首先来看一段代码：

(() => "laichuanfeng")()
//运行结果：laichuanfeng

1 2	(() => "laichuanfeng")() //运行结果：laichuanfeng

如果你第一次接触，你肯定会生出一个念头：“这是 JavaScript 代码吗？这玩意能运行起来？”，但他的确是 JavaScript 代码，也的确能正常运行，等价于：

(function(){
    return "laichuanfeng";
})()

(function(){

return "laichuanfeng";

})()

这就是 ES6 中的的箭头函数，用str=>str就代表了一个函数，把“function”写成其它单词(functino)之类的概率也大大减少了 :)。

查看全文

学习TypeScript：初体验

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，添加了类，模块，接口三种特性。

官网地址：http://www.typescriptlang.org/；

另附上大神安德斯·海尔斯伯格（ Delphi 和 C# 之父，.NET 创立者）长达53分钟的TypeScript讲解视频。

我的系统环境是 win7-64bit+Git+Node.js+Npm+SublimeText3，以下操作以此为准。

安装

使用 Node.js 的 npm 包管理工具安装 TypeScript：npm install -g typescript。（Node.js安装参考）

使用 Git 安装 SublimeText3 插件：

先进入 SublimeText3 的包管理文件夹，如果不知道，打开 SublimeText3；使用 Ctrl+Shift+P 打开命令面板，找到Browse Packages，回车后就能打开管理文件夹；我的是C:\Users\Elegant\AppData\Roaming\Sublime Text 3\Packages。
在文件夹鼠标右键打开 Git Bash，输入git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript，运行后，就能从 GibHub 上把插件下载到包管理文件夹；重启 SublimeText3，如果在命令面板能搜索到 TypeScript 相关的命令，说明插件安装成功。

查看全文

ES6 中新的函数特性–不定参数，默认参数与解构赋值

ES6 中三种新的特性：不定参数和默认参数，解构赋值；使 JavaScript 函数语法更富表现力(推荐使用 FireFox)。

参考博文一：ES6 In Depth:Rest parameters and defaults

参考博文二：ES6 In Depth:Destructuring

不定参数

我们通过一个简单的可变参数函数containsAll给大家演示不定参数的用法。函数containsAll可以检查一个字符串中是否包含若干个子串，例如：containsAll("javascript", "java", "script")返回true。

首先使用传统方法来实现这个函数：

var containsAll=function(word) {
    for (let i = arguments.length; i--; ) {
        let alpha = arguments[i];
        if (word.indexOf(alpha) === -1) {
            return false;
        }
    }
    return true;
}

var containsAll=function(word) {

for (let i = arguments.length; i--; ) {

let alpha = arguments[i];

if (word.indexOf(alpha) === -1) {

return false;

}

return true;

}

查看全文