专业网站建设B/S软件开发专业微信营销专业技术建设团队做客户满意度最高的软件公司
郑州网站建设、郑州网站开发
　

一个周末如何成为前端工程师

作者：网站建设出处：学众科技发布时间：2020年06月18日点击数：1297

2周前，我将 TravisLight 开源了，这是一个建立监控的工具，也是一个用于 Travis-CI 的构件监控工具。出于兴趣，我用了一个周末的时间做了这个项目，而且我是以一个真正的前端开发者的角色来做的。

当我在 Nelmio 的时候，尽管我做了一些javascript的应用，但我参与的更多是后台开发。大部分时间我是在写API给前端调用，而且在工作中经常会出现偏差。实际上，我认为每一个做后台的开发者应该花些时间在前段开发上，补充一些前端知识，反之亦然。这是让你明白在工作中自己真正需要做些什么的最好的方法之一。

我认为一个前端工程师需要的唯一东西是一个好用的 API，和一个全面的文档。作为一个后台开发者，你必须提供这两个。所以，前端的工程师的水平取决于你。但是，不要迫使你的前端人员去使用你的工具。的确，Assetic 对于 PHP 是一个很好的开发工具，但是它对于前端工程师来说并不是一个好的工具。有许多更好的开发工具可以编译 JS/CSS 文件，写 JavaScript，例如 Grunt。让你前端工程师使用自己的工具吧！在一个 Symfony2 项目中，我会命令把所有的 JS/CSS 文件都放在 web/ 的文件夹中，而不是放在 *Bundle/Resouces/public 这样的文件夹中，这样，前端就不用为了找 JS/CSS 文件夹而去扫瞄 整个项目了。

但这不是我写这篇文章的目的，让我来解释我为什么和怎样写出 TravisLight 和我发现的工具吧。

最初

我想学习一下Backbone.js，因此我着手阅读了Backbone Fundamentals这本书。如果你对Backbone还不甚了解，那我给你介绍下，Backbone 是一个JavaScript 框架，它可以为你编写Web程序提供一个架构.

众所周知，在项目中实践是最佳的编程学习方式，因此，我决定使用Travis-CI API去写一个Backbone.js 应用程序，也就是TravisLight 。TravisLight 正是那个我一直想要的，用来治理 我的开源项目的简明工具。这真是一个绝佳的起步项目，尤其适合在周末进行。

我使用了Lo-Dash，一个Underscore.js的替代品，它具有风格一致，定制灵活，性能优越等优点。同时，我也使用了RequireJS和Moment.js。这样，我就需要一个工具去治理 所有的这些依赖，因此我关注了下来自Twitter的Bower。

Bower,网页包治理 器

Bower是一个网页包治理 器，也就是JS/CSS库包治理 器。虽说它现在是一个包下载器，但还是有必要用它来幸免对 jQuery, Twitter Bootstrap等进行版本操纵 。你只需要一个像这样的component.json文件： 

    
	
	
  1. 
		{  
	
    2. 

	
  2. 
		  "name": "travis-light",  
	
    3. 

	
  3. 
		  "dependencies": {  
	
    4. 

	
  4. 
		    "jquery": "~1.8.3"  
	
    5. 

	
  5. 
		  }  
	
    6. 

	
  6. 
		} 
	
    7.

运行“bower install”把依赖关系安装到组件或文件夹。 现在，我可以开始着重弄我的应用。每次我需要一个新的库只要运行“ bower install--save”来安装和更新“component.json”文件就行了。 有时候，我需要使用一些工具帮助我在应用上完成一些像运行jshint或编译文件的任务。于是我试了“Grunt”——一个Javascript编译工具，感觉还不错哦。

Grunt, JavaScript 编译工具

Grunt是一个基于任务的命令行 JavaScript 工程编译工具. 第一眼看上去, 这个工具似乎难以使用，但是一旦你用了，它太棒了！你能够验证(Lint)你的文件，缩小JS/CSS文件，运行测试单元等等。

在TravisLight，我主要使用Grunt 打包应用程序. 打包应用程序意味着:

  • 编译JavaScript文件;
  • 编译 CSS 文件;
  • 在 HTML 标记中使用编译好的文件;
  • 复制依赖库.

编译Javascript文件就是编译 RequireJS  的依赖关系。幸亏有 grunt-contrib-requirejs插件，太简单了！ 

    
	
	
  1. 
		requirejs: {  
	
    2. 

	
  2. 
		    compile: {  
	
    3. 

	
  3. 
		        options: {  
	
    4. 

	
  4. 
		            name: "main",  
	
    5. 

	
  5. 
		            baseUrl: "js/",  
	
    6. 

	
  6. 
		            mainConfigFile: "js/main.js",  
	
    7. 

	
  7. 
		            out: "dist/compiled.js"  
	
    8. 

	
  8. 
		        }  
	
    9. 

	
  9. 
		    }  
	
    10. 

	
  10. 
		} 
	
    11.

在TravisLight 里面编译CSS有两步： 

首先、把CSS里面的所有图片用grunt-image-embed 插件嵌进来： 

    
	
	
  1. 
		imageEmbed: {  
	
    2. 

	
  2. 
		    application: {  
	
    3. 

	
  3. 
		        src: 'css/application.css',  
	
    4. 

	
  4. 
		        dest: 'dist/application-embed.css',  
	
    5. 

	
  5. 
		        deleteAfterEncoding : false  
	
    6. 

	
  6. 
		    }  
	
    7. 

	
  7. 
		} 
	
    8.

然后，用grunt-contrib-mincss  插件压缩CSS文件； 

    
	
	
  1. 
		mincss: {  
	
    2. 

	
  2. 
		    compress: {  
	
    3. 

	
  3. 
		        files: {  
	
    4. 

	
  4. 
		            'dist/compiled.css': [  
	
    5. 

	
  5. 
		                'css/bootstrap.min.css',  
	
    6. 

	
  6. 
		                'dist/application-embed.css'  
	
    7. 

	
  7. 
		            ]  
	
    8. 

	
  8. 
		        }  
	
    9. 

	
  9. 
		    }  
	
    10. 

	
  10. 
		} 
	
    11.

现在，为了使用那些编译过的JS和CSS文件，我用 grunt-targethtml 插件编译HTML。 

    
	
	
  1. 
		targethtml: {  
	
    2. 

	
  2. 
		    dist: {  
	
    3. 

	
  3. 
		        src: 'index.html',  
	
    4. 

	
  4. 
		        dest: 'dist/index.html'  
	
    5. 

	
  5. 
		    }  
	
    6. 

	
  6. 
		} 
	
    7.

index.html文件如下： 

    
	
	
  1. 
		<!doctype html> 
	
    2. 

	
  2. 
		<html lang="en"> 
	
    3. 

	
  3. 
		    ...  
	
    4. 

	
  4. 
		 
	
    5. 

	
  5. 
		    <body data-api-url="https://api.travis-ci.org"> 
	
    6. 

	
  6. 
		        <!--(if target dist)> 
	
    7. 

	
  7. 
		        <script data-main="compiled" src="js/require.js"></script> 
	
    8. 

	
  8. 
		        <!(endif)--> 
	
    9. 

	
  9. 
		        <!--(if target dummy)><!--> 
	
    10. 

	
  10. 
		        <script data-main="js/main" src="components/requirejs/require.js"></script> 
	
    11. 

	
  11. 
		        <!--<!(endif)--> 
	
    12. 

	
  12. 
		    </body> 
	
    13. 

	
  13. 
		</html> 
	
    14.

arget dummy 是用于开发的一段默认代码。这是一种维持单个HTML文件从开发到成品过程中（或其他任何你想实现的环境）不变的好方式。在找到这个插件之前我一直不知道该怎么办。

最后，我又用 grunt-contrib-copy 插件实现复制一些文件到dist/ 文件夹。 

    
	
	
  1. 
		copy: {  
	
    2. 

	
  2. 
		    dist: {  
	
    3. 

	
  3. 
		        files: {  
	
    4. 

	
  4. 
		            'dist/js/require.js': 'components/requirejs/require.js'  
	
    5. 

	
  5. 
		        }  
	
    6. 

	
  6. 
		    }  
	
    7. 

	
  7. 
		} 
	
    8.

运行 grunt package 执行所有任务。查看 TravisLight的 grunt.js 文件可以获得更多细节尤其是一些别名。

这时候，我的Javascript应用已经跑起来了。我看了看一些Javascript测试库。虽然我对QUnit 有所了解但我还是想用一些没用过的，于是我是试了 Mocha 和 Chai。

测试Backbone.js主应用

在Javascript世界里，有大量的测试库像 QUnit, Mocha, Jasmine, Chai, Sinon.js, Expect.js, Should.js等等。

我试了Mocha 和 Chai。使用 NPM 和Node.js 包治理 器可以安装这些库。NPM 需要一个 package.json 文件维持项目列表的依赖关系和设备驱动程序的依赖关系： 

    
	
	
  1. 
		{  
	
    2. 

	
  2. 
		  "name": "TravisLight",  
	
    3. 

	
  3. 
		  "version": "0.0.1",  
	
    4. 

	
  4. 
		  "dependencies": {  
	
    5. 

	
  5. 
		  },  
	
    6. 

	
  6. 
		  "devDependencies": {  
	
    7. 

	
  7. 
		    "mocha": "~1.7.4",  
	
    8. 

	
  8. 
		    "chai": "~1.4.0" 
	
    9. 

	
  9. 
		  }  
	
    10. 

	
  10. 
		} 
	
    11.

运行npm install在node_modules/目录下安装Mocha 和 Chai。

现在你需要一个 test/index.html 文件在扫瞄 器中跑这个测试。 

    
	
	
  1. 
		TravisLight Test Suite  
	
    2. 

	
  2. 
		 
	
    3. 

	
  3. 
		   
	
    4. 

	
  4. 
		   
	
    5. 

	
  5. 
		 <div> 
	
    6. 

	
  6. 
		      
	
    7. 

	
  7. 
		 
	
    8. 

	
  8. 
		   
	
    9. 

	
  9. 
		   
	
    10. 

	
  10. 
		 </div> 
	
    11.

首先，在加载完jQuery 和 RequireJS后加载Mocha 和 Chai。然后加载一个 setup.js 文件，它包含了Mocha 和 RequireJS 的配置文件，和在这个测试文件中用到的两个全局变量assert 和 expect： 

    
	
	
  1. 
		var assert = chai.assert,  
	
    2. 

	
  2. 
		    expect = chai.expect;  
	
    3. 

	
  3. 
		 
	
    4. 

	
  4. 
		mocha.setup({  
	
    5. 

	
  5. 
		    ui: 'bdd' 
	
    6. 

	
  6. 
		});  
	
    7. 

	
  7. 
		 
	
    8. 

	
  8. 
		require.config({  
	
    9. 

	
  9. 
		    baseUrl: '../js/',  
	
    10. 

	
  10. 
		 
	
    11. 

	
  11. 
		    ...  
	
    12. 

	
  12. 
		}); 
	
    13.

我决定尝试行为驱动开发（BDD）模式，不过只只是一种尝试。这里有一个 TravisLight 路由测试文件的例子： 

    
	
	
  1. 
		define(  
	
    2. 

	
  2. 
		    [  
	
    3. 

	
  3. 
		        'router' 
	
    4. 

	
  4. 
		    ],  
	
    5. 

	
  5. 
		    function (router) {  
	
    6. 

	
  6. 
		        "use script";  
	
    7. 

	
  7. 
		 
	
    8. 

	
  8. 
		        describe('router', function () {  
	
    9. 

	
  9. 
		            it('should be an instance of Backbone.Router', function () {  
	
    10. 

	
  10. 
		                expect(router).to.be.an.instanceOf(Backbone.Router);  
	
    11. 

	
  11. 
		            });  
	
    12. 

	
  12. 
		 
	
    13. 

	
  13. 
		            it('should have a routes property', function () {  
	
    14. 

	
  14. 
		                expect(router.routes).to.be.an('object');  
	
    15. 

	
  15. 
		            });  
	
    16. 

	
  16. 
		        });  
	
    17. 

	
  17. 
		    }  
	
    18. 

	
  18. 
		);  
	
    19.

要是你想了解更多，可以看看test/directory 目录。

成功！哈，我写了一个JavaScript应用程序测试。

在Javascript项目中使用Travis-CI

我是Travis-CI的超级粉丝，我打算将TravisLight加入其中。而Grunt使得这变得非常简单。

grunt-mocha插件能够使用Mocha和PhantomJS进行测试。下面是这个插件在TravisLight中的配置： 

    
	
	
  1. 
		mocha: {  
	
    2. 

	
  2. 
		    all: [ 'test/index.html' ]  
	
    3. 

	
  3. 
		} 
	
    4.

一个简单的grunt mocha 示例如下（使用了PhantomJS）： 

    
	
	
  1. 
		$ grunt mocha  
	
    2. 

	
  2. 
		Running "mocha:all" (mocha) task  
	
    3. 

	
  3. 
		Testing index.html...................OK  
	
    4. 

	
  4. 
		>> 19 assertions passed (0.14s)  
	
    5. 

	
  5. 
		 
	
    6. 

	
  6. 
		Done, without errors. 
	
    7.

还不错。然而，Travis-CI需要通过一个.travis.yml文件进行配置。Javascript项目需要node_js环境来支持Travis-CI，并且需要通过Bower安装一系列的库来运行应用程序： 

    
	
	
  1. 
		language: node_js  
	
    2. 

	
  2. 
		 
	
    3. 

	
  3. 
		node_js:  
	
    4. 

	
  4. 
		    - 0.8  
	
    5. 

	
  5. 
		 
	
    6. 

	
  6. 
		before_script:  
	
    7. 

	
  7. 
		    - export PATH=$PATH:`npm bin`  
	
    8. 

	
  8. 
		    - bower install 
	
    9.

Travis-CI 首先运行npm install，然后运行npm test。第二个命令需要在TravisLight的package.json中进行配置 

    
	
	
  1. 
		{  
	
    2. 

	
  2. 
		  ...  
	
    3. 

	
  3. 
		 
	
    4. 

	
  4. 
		  "scripts": {  
	
    5. 

	
  5. 
		    "test": "./node_modules/grunt/bin/grunt test"  
	
    6. 

	
  6. 
		  }  
	
    7. 

	
  7. 
		} 
	
    8.

结尾

我真的很享受作为一个前端工程师的经历，并且我爱上了JavaScript 社区。如今，有大量超赞的Javascript库和框架，显然我没有足够的时间去一一尝试。

起初，我将这篇博客命名为JavaScript from the trenches，因为我决定将我所了解的Javascript内容重新学习一遍。我从来不认为自己是一个前端工程师，抑或Javascript开发工程师。我总是频繁地碰到这样一类人，他们认为JavaScript/CSS太简单了，不值得一学。我想他们误入歧途了，我对真正的前端工程师总是怀着无比崇敬的心情。

总的来说，这段经历改变了我对API的想法。此外，进行一个真实的项目，尽管是像TravisLight这样的小项目，使我的大脑更加灵活，我从来没有这么快了解新事物。

沙澧街