丰满熟妇大号bbwbbwbbw,av在线中文字幕网址,让少妇达到高潮在线观看,久久精品电影院

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

一個(gè)周末如何成為前端工程師

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

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

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

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

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

最初

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

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

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

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

Bower是一個(gè)網(wǎng)頁(yè)包治理 器，也就是JS/CSS庫(kù)包治理 器。雖說(shuō)它現(xiàn)在是一個(gè)包下載器，但還是有必要用它來(lái)幸免對(duì) jQuery, Twitter Bootstrap等進(jìn)行版本操縱 。你只需要一個(gè)像這樣的component.json文件： 

    
	
	
  1. 
		{  
	
    2. 

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

	
  3. 
		  "dependencies": {  
	
    4. 

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

	
  5. 
		  }  
	
    6. 

	
  6. 
		} 
	
    7.

運(yùn)行“bower install”把依賴關(guān)系安裝到組件或文件夾。 現(xiàn)在，我可以開始著重弄我的應(yīng)用。每次我需要一個(gè)新的庫(kù)只要運(yùn)行“ bower install--save”來(lái)安裝和更新“component.json”文件就行了。 有時(shí)候，我需要使用一些工具幫助我在應(yīng)用上完成一些像運(yùn)行jshint或編譯文件的任務(wù)。于是我試了“Grunt”——一個(gè)Javascript編譯工具，感覺還不錯(cuò)哦。

Grunt, JavaScript 編譯工具

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

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

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

編譯Javascript文件就是編譯 RequireJS  的依賴關(guān)系。幸虧有 grunt-contrib-requirejs插件，太簡(jiǎn)單了！ 

    
	
	
  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 插件嵌進(jìn)來(lái)： 

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

最后，我又用 grunt-contrib-copy 插件實(shí)現(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.

運(yùn)行 grunt package 執(zhí)行所有任務(wù)。查看 TravisLight的 grunt.js 文件可以獲得更多細(xì)節(jié)尤其是一些別名。

這時(shí)候，我的Javascript應(yīng)用已經(jīng)跑起來(lái)了。我看了看一些Javascript測(cè)試庫(kù)。雖然我對(duì)QUnit 有所了解但我還是想用一些沒用過(guò)的，于是我是試了 Mocha 和 Chai。

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

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

我試了Mocha 和 Chai。使用 NPM 和Node.js 包治理 器可以安裝這些庫(kù)。NPM 需要一個(gè) package.json 文件維持項(xiàng)目列表的依賴關(guān)系和設(shè)備驅(qū)動(dòng)程序的依賴關(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.

運(yùn)行npm install在node_modules/目錄下安裝Mocha 和 Chai。

現(xiàn)在你需要一個(gè) test/index.html 文件在掃瞄 器中跑這個(gè)測(cè)試。 

    
	
	
  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。然后加載一個(gè) setup.js 文件，它包含了Mocha 和 RequireJS 的配置文件，和在這個(gè)測(cè)試文件中用到的兩個(gè)全局變量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ū)動(dòng)開發(fā)（BDD）模式，不過(guò)只只是一種嘗試。這里有一個(gè) TravisLight 路由測(cè)試文件的例子： 

    
	
	
  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 目錄。

成功！哈，我寫了一個(gè)JavaScript應(yīng)用程序測(cè)試。

在Javascript項(xiàng)目中使用Travis-CI

我是Travis-CI的超級(jí)粉絲，我打算將TravisLight加入其中。而Grunt使得這變得非常簡(jiǎn)單。

grunt-mocha插件能夠使用Mocha和PhantomJS進(jìn)行測(cè)試。下面是這個(gè)插件在TravisLight中的配置： 

    
	
	
  1. 
		mocha: {  
	
    2. 

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

	
  3. 
		} 
	
    4.

一個(gè)簡(jiǎn)單的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.

還不錯(cuò)。然而，Travis-CI需要通過(guò)一個(gè).travis.yml文件進(jìn)行配置。Javascript項(xiàng)目需要node_js環(huán)境來(lái)支持Travis-CI，并且需要通過(guò)Bower安裝一系列的庫(kù)來(lái)運(yùn)行應(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 首先運(yùn)行npm install，然后運(yùn)行npm test。第二個(gè)命令需要在TravisLight的package.json中進(jìn)行配置 

    
	
	
  1. 
		{  
	
    2. 

	
  2. 
		  ...  
	
    3. 

	
  3. 
		 
	
    4. 

	
  4. 
		  "scripts": {  
	
    5. 

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

	
  6. 
		  }  
	
    7. 

	
  7. 
		} 
	
    8.

結(jié)尾

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

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

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

沙澧街