五个值得尝试的前端开发工具

2014-6-9 10:58| 发布者: joejoe0332| 查看: 3851| 评论: 0|原作者: 雷锋网|来自: 雷锋网

摘要: 在过去的几年时间里，出现了许多全新的网页应用程序，不过，由于应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加。开发人员都喜欢使用高质量的软件开发工具，本文就推荐五个优秀的前端开发工具和框架， ...

LiveReload

LiveReload_350

　　每天你会在键盘上点击多少次“刷新”键呢？很多次吧。LiveReload是一个简单的网页协议，可以触发事件到客户端，无论文件什么时候被改动，客户端都能及时刷新、处理事件。

　　一般来说，LiveReload可以和Grunt捆绑在一起使用，搭建本地前端开发环境。而在客户端，LiveReload则会提供一个简单的 Chrome扩展程序。谈到Chrome扩展程序，Chrome store绝对是一个好地方，你可以到上面逛一逛，就会发现里面有不少好东西，这里推荐几个，抛砖引玉：

1、 WhatFont，它是一个书签栏工具，采用鼠标悬浮功能特性，点击后就可以告诉用户在网站上所指的字体属性、字体名称、大小、颜色等等，非常方便。此外，它还可以帮助开发人员调试字体风格。

2、 Page ruler，它可以帮助开发人员测量网站中任何元素的尺寸，像素的宽度和高度。

3、 Proxy SwithcySharp，它可以用来帮助开发人员调试本地化信息，包括默认货币、电话号码等

4、当然，最受欢迎的当属Chrome app。

Mocha/Chai/Sinon

　　反复测试有没有让你觉得想吐？通常情况下，如果在前端开发的初始阶段没有设计好测试，那么后面的工作往往会变得非常困难。幸运的是，我们有不少优秀的测试框架，它们就像之前使用过的那些开发语言一样强大。目前主流的两个测试框架就是Jasmine和Mocha。

　　按照笔者已往的经验，更愿意推荐Mocha。它是一个功能丰富的Javascript测试框架，支持异步测试，这在Javascript中经常要用到。下面是两个测试案例，第一个是用Jasmine写的，第二个使用Mocha/Chai写的，如下所示：

Jasmine

01AsyncProcess = require('./async-process').AsyncProcess
02 
03describe('AsyncProcess', function() {
04    var asyncProcess;
05 
06    beforeEach(function() {
07        asyncProcess = new AsyncProcess();
08    });
09 
10    it('should process 42', function() {
11        var done = false;
12        var processed = null;
13 
14        deferred = asyncProcess.process();
15        deferred.then(function(result) {
16            done = true;
17            processed = result;
18        });
19 
20        waitsFor(function() {
21            return done;
22        }, "the async process to complete", 10000);
23 
24        runs(function() {
25            expect(processed).toEqual(42);
26        });
27    });
28});

Mocha/Chai

01AsyncProcess = require('./async-process').AsyncProcess;
02Chai = require('chai');
03 
04Chai.should();
05 
06describe('AsyncProcess', function() {
07    var asyncProcess;
08 
09    beforeEach(function() {
10        asyncProcess = new AsyncProcess();
11    });
12 
13    it('should process 42', function(done) {
14        deferred = asyncProcess.process();
15 
16        deferred.then(function(processed) {
17            processed.should.be.equal(42);
18            done();
19        });
20    });
21});

　　Jasmine所选的为默认语法，只有通过插件才能有Mocha一样的功能，而后者简洁的多。

　　和Jasmine不同，Mocha仅提供行为测试结构，这种测试框架通常对应的是行为驱动开发，也就是BDD。但是这点并不会对Mocha产生负面影响，它可以与Chai和Sinon这样的辅助测试工具结合使用。

　　下面，就是调用Sinon测试工具集内的spy类进行测试的一个例子：

01// Function under test
02function once(fn) {
03    var returnValue, called = false;
04    return function () {
05        if (!called) {
06            called = true;
07            returnValue = fn.apply(this, arguments);
08        }
09        return returnValue;
10    };
11}
12 
13it("calls the original function", function () {
14    var spy = sinon.spy();
15    var proxy = once(spy);
16 
17    proxy();
18 
19    assert(spy.called);
20});

　　Chai的特点在于，开发人员可以使用和自然语言相近的声明语法。不妨可以参考下面的例子，调用Chai中的should声明语法。

1foo.should.be.a('string');
2foo.should.equal('bar');
3foo.should.have.length(3);
4tea.should.have.property('flavors').with.length(3);

　　很清晰，对吗？现在就赶紧在你自己的代码上测试一下吧！

123 / 3 页下一页在本页阅读全文

酷毙

雷人

鲜花

鸡蛋

漂亮

收藏分享邀请

上一篇：史上开发时间最长的软件Xanadu发布下一篇：HTTP/1.1标准得以更新

快毕业了，没工作经验，
找份工作好难啊？
赶紧去人才芯片公司磨练吧!!

帐号		自动登录	找回密码
密码			注册

五个值得尝试的前端开发工具

LiveReload

Mocha/Chai/Sinon

Jasmine

Mocha/Chai

最新评论