1.学习TypeScript——使用VS Code搭建TypeScript开发环境

前言

TypeScript和VSCode已经成为了2016年前端开发最流行的开发语言和开发工具之一,更多请看2016年JavaScript流行详情。使用TypeScript语言开发的类库和框架也越来越多,鼎鼎大名的Google的Angular 2中文网)项目就是使用TypeScript作为主要的开发语言的(还有JS版本和Dart版本)。

现在浏览器显然已经不能满足了JS了,很多App也开始使用JS开发了,使用基于TypeScript的IonicNativeScript能够快速高效地帮助你开发APP。

TypeScript是JavaScript的超集,TypeScript只是增强了JavaScript而非改变了JavaScript,TypeScript同样也是基于ECMAScript标准的编程语言。因此非常流行的Vue和React及我们常用Jquery等类库都可以使用TypeScript来编码,TypeScript强大的智能类型分析系统,能够使你的代码更加强壮。

说了这么多TypeScript的优点,下面让我们来学习如果在VScode中使用TypeScript开发项目吧。

下载TypeScript

TypeScript官网中文网)提供了多种下载方式,我们使用NPM来下载TypeScript,如果你没有安装NPM,请到Nodejs官网进行安装。

在CMD(Windows系统)或者终端(macOS系统)中输入一下命令:

npm install -g typescript

安装完毕后我们输入tsc -v可以查看当前安装的TypeScript版本号。当前最新的版本是2.1.5。

下载VSCode

VSCode是我使用过最棒的编辑器没有之一,比Sublime Text还有优秀。

VSCode官网就可以下载相应系统的VSCode安装包,最新的VSCode版本是1.9。

VSCode下载图

创建项目

创建目录

首先我们创建一个项目文件夹,比如叫ts_vscode,然后创建一些主要目录,在VSCode中打开项目,在macOS上我们可以直接使用命令来操作:

# 创建ts_vscode及主要文件夹
mkdir -p ts_vscode/src/{css,images,fonts}

# 使用VSCode打开
code ts_vscode

目录结构:

ts_vscode/
    └─src/
        ├─ css/
        ├─ fonts/
        └─ images/

创建package.json

使用命令npm init来创建package.json文件,一般默认就可以,具体详情可以看这里

创建

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    └─ package.json

创建tsconfig.json

使用tsc --init命令就可以快速创建一个tsconfig.json文件,关于tsconfig.json的属性描述请访问这里

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ package.json
    └─ tsconfig.json

安装项目依赖和开发依赖

我们的这个项目使用jQuery和Bootstrap来做,因此我们使用npm来安装:

npm install jquery bootstrap --save

我们的项目使用了TypeScript来开发,因此我们需要下载相对应的声明文件,关于声明文件请访问这里。安装声明文件命令:

npm install @types/jquery @types/bootstrap -save-dev

创建index.html

ts_vscode目录下创建index.htmlindex.html文件中放入下面的代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TypeScript with VSCode</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="./src/css/index.css">
</head>

<body>
  <h1 class="text-center"></h1>
  <div class="container">
    <div class="row show-grid">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-6">
        <button type="button" class="btn btn-default" aria-label="Left Align">
          <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        </button>
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
        </button>
      </div>
    </div>
  </div>
  <!-- /.modal -->
  <!-- js -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./src/index.js"></script>
</body>

</html>

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ index.html
    ├─ package.json
    └─ tsconfig.json

创建index.ts文件并编写TS代码

src目录下创建index.ts文件。我们使用TS编写一个类,并使用这个类的方法向index.htmlh1标签中插入一句话,代码如下:

class Main {
    constructor() {

    }

    name: string;

    show(text: string): void {
        let $ele: JQuery = $("h1");
        $ele.text(text);
    }
}

let main = new Main();
main.name = "Hello TypeScript";
main.show(main.name);

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    ├─ images/
    │    └─ index.ts
    ├─ index.html
    ├─ package.json
    └─ tsconfig.json

编译和启动项目

我们使用package.json中的scripts来编译和启动项目。

编译比较简单,tsc命令就可以编译项目,tsc -w命令监控并自动编译,编译会使用tsconfig.json中的配置项。

启动项目我们安装live-server,来帮助我们启动一个服务器环境,live-server非常轻便且带有自动刷新功能,我们使用npm全局安装即可:

npm install -g live-server

安装完毕后,我们修改package.json中的scripts如下:

"scripts": {
    "test": "tsc -w & live-server"
}

最终目录结构:

最终目录结构

最后我们在终端中输入npm t就可以启动项目了,启动成功后如下图:

启动项目成功

尝试改变项目文件,你可以发现浏览器会自动编译和自动刷新哦。

总结

本文章我们认识了VSCode和TypeScript,学会了基本的安装和编译及简单的TypeScript代码编写。本篇文章的示例代码请访这里

下篇文章我们将学习如何构建打包TypeScript项目。

[译]jQuery3新特性

jQuery称霸web江湖已经有十年了,它屹立不倒是有原因的。jQuery提供了用户容易操作DOM的接口,执行Ajax请求,创建动画,以及更多。另外,与DOM API不同,jQuery实现了复合模式。因此,你可以使用在一个无论包含多少(零个、一个或者更多)元素的jQuery集合上调用jQuery方法。

在未来几周内,jQuery随着第3个版本的发布将要达到一个重要的里程碑。jQuery3修复了很多bug,增加了一些新的功能,弃用并删除了一些功能,并更改了一些功能的行为。在这篇文章中,我将要突出介绍jQuery3最重要的变化。

新特性

以下各节中我将讨论在jQuery3中加入的重要特性。

for...of循环

jQuery3可能将使用for…of循环来遍历jQuery集合中的DOM元素。这种新的迭代器是ECMAScript2015(又名ECMAScript 6)规范的一部分。这个新迭代器可以使你遍历迭代对象(包括Array,Map,Set,等等)。

当使用这个新的迭代器时,你在循环中接受到的值不是jQuery对象而是一个DOM元素。这个迭代器将会略微的提高你操作jQuery集合的方式。

为了理解这个迭代器是怎样工作的,假设你想为页面上每一个input元素分配一个ID。jQuery3之前你会这么写:

var $inputs = $('input');

for(var i = 0; i < $inputs.length; i++ ){
 $inputs[i].id = 'input-' + i; 
}

在jQuery3中你可以这么写:

var $inputs = $('input');
var i = 0;

for(input of $inputs){
 input.id = 'input-' + i++; 
}

$.get()$.post()增加了新的方法签名

为了$.get()$.post()的实用功能和$.ajax()一样,jQuery3为其增加了新的方法签名。添加的新的方法签名是:

$.get([settings])

$.post([settings])

settings是一个具有很多属性的对象。你可以提供给$.ajax()使用,它们是相同的对象。想要了解更多关于$.ajax()的,请参考$.ajax()网页中的说明。

唯一的不同是,当settings对象传递给$.get()$.post()而不是$.ajax()时,method属性总是被忽略的。其原因是$.get()$.post()有一个预设的HTTP方法来执行Ajax请求($.get()是GET,$.post()是POST)。基本上,你不能通过$.get()发送一个POST请求的。

思考下面的代码

$.get({
 url: 'https://www.audero.it',
 method: 'POST' // 这个属性会被忽略
})

尽管设置了method属性,这段代码是不会发送一个POST请求,而是一个GET请求。

动画使用requestAnimationFrame()

所有的现在浏览器,包括IE10及以上,都支持requestAnimationFrame。jQuery3将会在内部使用这个API执行动画,使动画更加流畅并且减少对CPU资源的消耗。

unwrap()

jQuery3给unwrap()添加了一个可选参数,这个新的方法签名是:

unwrap([selector])

感谢这个变化,您将能够通过选择器表达式的字符串在已经选择的父元素中去匹配。如果存在匹配项,则匹配的子元素的父元素被移除;否则不执行操作。

改变的特性

jQuery3也修改了一些特性的行为。

:visible:hidden

新版本的jQuery修改了:visible:hidden过滤器的释义。如果元素有任何的布局容器,即使宽度和(或)高度都为0,也将会视为:visible。举例说明,br元素和没有内容的行级元素(内联元素)现在都会被:visible过滤器选中。

因此,如果在一个页面中有以下标记语言:

<div></div>
<br/>

然后你运行以下语句:

console.log($('body :visible').length);

在jQuery1.x和jQuery2.x中你得到的结果为0,但是在jQuery3中你得到的结果是2。

data()

另一个重要的变化是有关data()方法的行为。他已经变得和Dataset API规范一样了。jQuery 3将所有属性的键都转换成驼峰式命名方式。要想理解这个变化,请思考下面的元素:

<div id="container"></div>

如果你使用的jQuery3之前的版本你会这么写:

var $elem = $('#container');
$elem.data({
 'my-property':'hello'
});
console.log($elem.data());

在控制台你将会得到如下的结果:

{my-property:"hello"}

而使用jQuery3你将得到如下的结果:

{myPropery:"hello"}

请注意,在jQuery3中属性名已经变成了驼峰式没有横杠(-),而在以前的版本中,属性名会保持全小写和保留横杠(-)。

Deferred对象

jQuery3改变了Deferred对象的行为,Deferred对象是Promise对象的前身,这次改变提高了Deferred对象对Promise/A+提案的兼容性。Deferred这个对象及其它的历史都是很有趣的。想要了解更多,你可以去阅读官方文档或者阅读我写的书jQuery实战(第三版),这本书也包含了jQuery3。

在jQuery1.x和2.x中,传递给Deferred的回调函数内出现未捕获的异常会阻断程序的执行。不像原生Promise对象那样会抛出异常冒泡至window.onerror(通常冒泡到这里)。如果你没有定义一个函数处理错误事件(通常我们是会处理的),那么异常信息就会显示并且程序会终止执行。

jQuery3遵循原生Promise对象的模式。因此,抛出的异常被当作失败,接着失败回调函数执行。一旦失败回调函数执行完成,进程就会继续,下面的的成功回调函数将被执行。

为了帮助你理解两者不同,让我们看一个小例子。思考下面的代码:

var deferred = $.Deferred();

deferred
 .then(function(){
 throw new Error('An error'); 
 })
 .then(
 function(){
 console.log('Success 1'); 
 },
 function(){
 console.log('Failure 1');
 }
 )
 .then(
 function(){
 console.log('Success 2');
 },
 function(){
 console.log('Failure 2');
 }
 );

deferred.resolve();

在jQuery1和jQuery2中,只有第一个函数(抛出错误的函数)被执行。另外,因为我没有为window.onerror定义任何处理函数,所以控制台将会输出“Uncaught Error: An error”并且程序执行将会终止。

在jQuery3中,行为是完全不同的。你将在控制台上看到“Failure 1”和“Success 2”两条信息。异常被第一个失败回调函数处理,并且一旦被处理,随后的成功回调函数也会被执行。

SVG文档

没有任何版本的jQuery,包括jQuery3,官方正式支持SVG文档。然而,事实是很多方法是可以工作的,还有另外一些,比如类名操作在以前是不可正常使用的,但是它们在jQuery3中更新后也可以正常使用了。因此,在即将到来的jQuery版本中,你可以放心地在SVG文档上使用addClass()hasClass()方法。

已废弃或者已移除的方法和属性

除目前所描述的改进外,jQuery还移除和废弃了一些特性。

废弃bind()unbind()delegate()undelegate()

很久以前(jQuery1.7版本时)jQuery就引入了on()方法,它提供了统一的接口替换bind()delegate()live()方法。与此同时jQuery也提供了off()方法,同样提供了统一的接口替换unbind()undelegated()die()方法。从on()off()方法引入时就不推荐使用bind()delegate()unbind()undelegate()方法,但它们还是一直存在着。

jQuery3废弃了这些方法并且打算在未来的版本(可能是jQuery4)会移除它们。在你所有的项目中坚持使用on()off()方法,这样你就不必担心未来的版本更新。

移除load()unload()error()方法

jQuery3抛弃了已经废弃的load()unload()error()方法。这些方法很久以前(在jQuery1.8时)就被废弃了,但是他们仍旧留在jQuery中。如果你使用的插件依赖其中的一个或多个方法,升级到jQuery3后你的代码将会崩溃。因此,在升级时注意。

移除contextsupportselector属性

jQuery3抛弃了已经废弃的contextsupportselector属性。正如我在上一节讲到的,如果你仍旧在项目中使用这些属性或者使用的插件依赖这些属性,升级到jQuery3后你的代码将会崩溃。

Bug修复

jQuery3修复了在以前版本中存在的重大bug。在下面章节中,我将介绍两点,这两点在你的工作中会有很大的不同。

width()height()的值不再四舍五入

jQuery3修复了width()height()及所有其它相关方法的bug。这些方法将不再将结果像素值四舍五入到整数值,因为四舍五入后在某些情况下很难对元素进行定位。

为了理解这个问题,假设你有一个宽度为100px的容器元素,它里面包含三个宽度为三分之一(33.333333%)的元素:

<div class="container">
 <div>My name</div>
 <div>is</div>
 <div>Aurelio De Rosa</div>
</div

在jQuery3之前,如果你尝试用以下代码来获取子元素的宽度……

$('.container div').width();

……你得到的结果是33。原因是jQuery将33.33333四舍五入了。在jQuery3中,这个bug被修复了,因此你得到结果是更加精确的(即浮点数的结果)。

wrapAll()

新版本jQuery修复了一个当传递函数给wrapAll()时发生的bug。在jQuery之前,当传递一个函数给wrapAll()时,jQuery集合中每一个元素都被包裹。换句话说,这种行为和传递一个函数给wrap()是一样的。

除了修复这个问题,还有一个变化:由于这个函数在jQuery3中只会被调用一次,因此jQuery集合每个元素的索引不能传入这个方法中。最终这个方法的上下文(this)将指向jQuery集合中的第一个元素。

下载jQuery3 beta1

如果你对这篇文章感兴趣,你可能想要尝试jQuery3第一个beta版。您可以通过访问下面两个url来获得。

它在npm上也是可用的,你可以通过运行下面的命令来下载:

npm install jquery@3.0.0-beta1

总结

很多人认为jQuery将会死掉,认为在现代网页开发中已经没有一席之地。然而其仍在持续发展,jQuery使用统计(在排名前100万的网站中使用率为78.5%)反驳了这些说法。

在这篇文章中,我已经带着你介绍了jQuery3将会带来的重要特性变化。或许你可能已经注意到了,这个版本是不太会对你现有的项目造成崩溃,因为它没有引入一些重大的变化。尽管如此,在升级期间还是有一些事项需要注意得,如Deferred对象的改进。在更新第三方插件时也要注意,审查项目将帮助你发现异常行为或者崩溃的功能。

  • 本文章翻译自What’s New in jQuery 3
  • 本人英文水平有限,翻译不正确不通顺的地方,敬请指出。