蜜桃二区,毒医王妃不好惹免费阅读全文,奶水奶头咂着奶小说,被快递员上门做到高潮,日本巨乳人妻无删减,情爱小说连载,暴躁妹妹csgo,床戏描写多的小说片段,给弟弟的家规

專業(yè)網(wǎng)站建設(shè)B/S軟件開發(fā)專業(yè)微信營銷專業(yè)技術(shù)建設(shè)團隊做客戶滿意度最高的軟件公司
鄭州網(wǎng)站建設(shè)、鄭州網(wǎng)站開發(fā)
　

一個周末如何成為前端工程師

作者：網(wǎng)站建設(shè)出處：學(xué)眾科技發(fā)布時間：2020年06月18日點擊數(shù)：1902

2周前，我將 TravisLight 開源了，這是一個建立監(jiān)控的工具，也是一個用于 Travis-CI 的構(gòu)件監(jiān)控工具。出于興趣，我用了一個周末的時間做了這個項目，而且我是以一個真正的前端開發(fā)者的角色來做的。

當我在 Nelmio 的時候，盡管我做了一些javascript的應(yīng)用，但我參與的更多是后臺開發(fā)。大部分時間我是在寫API給前端調(diào)用，而且在工作中經(jīng)常會出現(xiàn)偏差。實際上，我認為每一個做后臺的開發(fā)者應(yīng)該花些時間在前段開發(fā)上，補充一些前端知識，反之亦然。這是讓你明白在工作中自己真正需要做些什么的最好的方法之一。

我認為一個前端工程師需要的唯一東西是一個好用的 API，和一個全面的文檔。作為一個后臺開發(fā)者，你必須提供這兩個。所以，前端的工程師的水平取決于你。但是，不要迫使你的前端人員去使用你的工具。的確，Assetic 對于 PHP 是一個很好的開發(fā)工具，但是它對于前端工程師來說并不是一個好的工具。有許多更好的開發(fā)工具可以編譯 JS/CSS 文件，寫 JavaScript，例如 Grunt。讓你前端工程師使用自己的工具吧！在一個 Symfony2 項目中，我會命令把所有的 JS/CSS 文件都放在 web/ 的文件夾中，而不是放在 *Bundle/Resouces/public 這樣的文件夾中，這樣，前端就不用為了找 JS/CSS 文件夾而去掃瞄 整個項目了。

但這不是我寫這篇文章的目的，讓我來解釋我為什么和怎樣寫出 TravisLight 和我發(fā)現(xiàn)的工具吧。

最初

我想學(xué)習一下Backbone.js，因此我著手閱讀了Backbone Fundamentals這本書。如果你對Backbone還不甚了解，那我給你介紹下，Backbone 是一個JavaScript 框架，它可以為你編寫Web程序提供一個架構(gòu).

眾所周知，在項目中實踐是最佳的編程學(xué)習方式，因此，我決定使用Travis-CI API去寫一個Backbone.js 應(yīng)用程序，也就是TravisLight 。TravisLight 正是那個我一直想要的，用來治理 我的開源項目的簡明工具。這真是一個絕佳的起步項目，尤其適合在周末進行。

我使用了Lo-Dash，一個Underscore.js的替代品，它具有風格一致，定制靈活，性能優(yōu)越等優(yōu)點。同時，我也使用了RequireJS和Moment.js。這樣，我就需要一個工具去治理 所有的這些依賴，因此我關(guān)注了下來自Twitter的Bower。

Bower,網(wǎng)頁包治理 器

Bower是一個網(wǎng)頁包治理 器，也就是JS/CSS庫包治理 器。雖說它現(xiàn)在是一個包下載器，但還是有必要用它來幸免對 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”把依賴關(guān)系安裝到組件或文件夾。 現(xiàn)在，我可以開始著重弄我的應(yīng)用。每次我需要一個新的庫只要運行“ bower install--save”來安裝和更新“component.json”文件就行了。 有時候，我需要使用一些工具幫助我在應(yīng)用上完成一些像運行jshint或編譯文件的任務(wù)。于是我試了“Grunt”——一個Javascript編譯工具，感覺還不錯哦。

Grunt, JavaScript 編譯工具

Grunt是一個基于任務(wù)的命令行 JavaScript 工程編譯工具. 第一眼看上去, 這個工具似乎難以使用，但是一旦你用了，它太棒了！你能夠驗證(Lint)你的文件，縮小JS/CSS文件，運行測試單元等等。

在TravisLight，我主要使用Grunt 打包應(yīng)用程序. 打包應(yīng)用程序意味著:

  • 編譯JavaScript文件;
  • 編譯 CSS 文件;
  • 在 HTML 標記中使用編譯好的文件;
  • 復(fù)制依賴庫.

編譯Javascript文件就是編譯 RequireJS  的依賴關(guān)系。幸虧有 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.

現(xiàn)在，為了使用那些編譯過的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 是用于開發(fā)的一段默認代碼。這是一種維持單個HTML文件從開發(fā)到成品過程中（或其他任何你想實現(xiàn)的環(huán)境）不變的好方式。在找到這個插件之前我一直不知道該怎么辦。

最后，我又用 grunt-contrib-copy 插件實現(xiàn)復(fù)制一些文件到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 執(zhí)行所有任務(wù)。查看 TravisLight的 grunt.js 文件可以獲得更多細節(jié)尤其是一些別名。

這時候，我的Javascript應(yīng)用已經(jīng)跑起來了。我看了看一些Javascript測試庫。雖然我對QUnit 有所了解但我還是想用一些沒用過的，于是我是試了 Mocha 和 Chai。

測試Backbone.js主應(yīng)用

在Javascript世界里，有大量的測試庫像 QUnit, Mocha, Jasmine, Chai, Sinon.js, Expect.js, Should.js等等。

我試了Mocha 和 Chai。使用 NPM 和Node.js 包治理 器可以安裝這些庫。NPM 需要一個 package.json 文件維持項目列表的依賴關(guān)系和設(shè)備驅(qū)動程序的依賴關(guān)系： 

    
	
	
  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。

現(xiàn)在你需要一個 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.

我決定嘗試行為驅(qū)動開發(fā)（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應(yīng)用程序測試。

在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環(huán)境來支持Travis-CI，并且需要通過Bower安裝一系列的庫來運行應(yīng)用程序： 

    
	
	
  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.

結(jié)尾

我真的很享受作為一個前端工程師的經(jīng)歷，并且我愛上了JavaScript 社區(qū)。如今，有大量超贊的Javascript庫和框架，顯然我沒有足夠的時間去一一嘗試。

起初，我將這篇博客命名為JavaScript from the trenches，因為我決定將我所了解的Javascript內(nèi)容重新學(xué)習一遍。我從來不認為自己是一個前端工程師，抑或Javascript開發(fā)工程師。我總是頻繁地碰到這樣一類人，他們認為JavaScript/CSS太簡單了，不值得一學(xué)。我想他們誤入歧途了，我對真正的前端工程師總是懷著無比崇敬的心情。

總的來說，這段經(jīng)歷改變了我對API的想法。此外，進行一個真實的項目，盡管是像TravisLight這樣的小項目，使我的大腦更加靈活，我從來沒有這么快了解新事物。

沙澧街