前學(xué)Java的時(shí)候知道靜態(tài)方法是直接用類(lèi)名調(diào)用的，但是在JavaScript是這樣的嗎？對(duì)，也是一樣的，不過(guò)在js中類(lèi)是構(gòu)造函數(shù)。

在上面代碼中，定義了構(gòu)造函數(shù)Person，在Person上定義了一個(gè)方法say,需要注意的是構(gòu)造函數(shù)也是對(duì)象，然后在Person的原型上也定義了個(gè)getName方法，接著執(zhí)行下面的代碼：

我們發(fā)現(xiàn)Person.say()能執(zhí)行，而下面一行卻會(huì)出現(xiàn)錯(cuò)誤，原因是getName是定義在prototype對(duì)象上的，你用Person對(duì)象去調(diào)用它肯定不行，當(dāng)然你也可以這樣：

這樣是可以執(zhí)行的，因?yàn)樵赑erson構(gòu)造函數(shù)及Person的實(shí)例對(duì)象上都會(huì)有一個(gè)prototype屬性，指向原型對(duì)象Person prototype,當(dāng)然我們一般是這樣調(diào)用：

新建一個(gè)對(duì)象再去調(diào)用原型上的方法，直接用構(gòu)造函數(shù)名調(diào)用會(huì)出錯(cuò)。

Ps：如果喜歡，那就關(guān)注我吧！

多學(xué)員在學(xué)習(xí)的過(guò)程中都遇到過(guò)這樣的問(wèn)題：為什么老師講的我都能聽(tīng)懂，然而做起來(lái)卻總是諸多問(wèn)題？千鋒重慶校區(qū)老師告訴你，其實(shí)這是正常現(xiàn)象，誰(shuí)也不能幾天就成為大師，你的實(shí)踐還太少了！練習(xí)多了，經(jīng)驗(yàn)多了，靜態(tài)網(wǎng)頁(yè)自然也就手到擒來(lái)。

靜態(tài)的網(wǎng)頁(yè)其實(shí)就是由兩部分組成，一個(gè)是底層結(jié)構(gòu)HTML，另外一個(gè)就是負(fù)責(zé)修飾結(jié)構(gòu)的CSS。其實(shí)書(shū)寫(xiě)靜態(tài)網(wǎng)頁(yè)就像小時(shí)候過(guò)家家，首先得把需要的家庭成員找齊了，即首先考慮要做一個(gè)什么樣的網(wǎng)站，例如一個(gè)綜合類(lèi)網(wǎng)站包括：搜索框、導(dǎo)航、文章類(lèi)別模塊、文章標(biāo)題以及一部分廣告板塊；一個(gè)博客主頁(yè)包括：導(dǎo)航、文章縮略、文章搜索、文章導(dǎo)航以及沒(méi)有顯示但可能會(huì)有的評(píng)論區(qū)。

寫(xiě)頁(yè)面的時(shí)候是有劇本的，這個(gè)劇本指網(wǎng)頁(yè)設(shè)計(jì)圖，或者某個(gè)現(xiàn)有網(wǎng)頁(yè)，建議大家在模仿網(wǎng)上現(xiàn)有網(wǎng)頁(yè)的時(shí)候利用瀏覽器自帶的截圖功能，把整個(gè)完整的頁(yè)面截取下來(lái)，QQ瀏覽器，360瀏覽器都可以做到。這樣的優(yōu)點(diǎn)在于可以利用PS自己一步步測(cè)量數(shù)據(jù)、切圖都做到親力親為，并且做到了頁(yè)面數(shù)據(jù)的精準(zhǔn)度，而不是隨意的給數(shù)據(jù)，或者是利用瀏覽器的F12功能查看原網(wǎng)頁(yè)的數(shù)據(jù)。

按照設(shè)計(jì)好的劇本接著就可以找對(duì)應(yīng)的成員了，例如百度網(wǎng)頁(yè)從上往下分為導(dǎo)航頭部、中間logo和表單、尾部二維碼和文字，相對(duì)來(lái)說(shuō)頁(yè)面的整體布局是比較簡(jiǎn)單的，當(dāng)然還有很多不同類(lèi)型的頁(yè)面，布局要復(fù)雜一些。

當(dāng)看到一個(gè)網(wǎng)頁(yè)時(shí)，需要在腦海當(dāng)中對(duì)頁(yè)面進(jìn)行一個(gè)簡(jiǎn)單的掃描，如果把頁(yè)面當(dāng)成一張紙，要怎么樣從大到小一點(diǎn)點(diǎn)分割。當(dāng)有了初步的認(rèn)識(shí)之后，就可以把這些東西轉(zhuǎn)化成HTML結(jié)構(gòu)，所有不同顏色的框框在寫(xiě)的時(shí)候用的都是DIV。

從上往下，從大到小一點(diǎn)點(diǎn)先把某個(gè)模塊以不同的顏色色塊利用代碼堆積出來(lái)。保證大的模塊布局沒(méi)問(wèn)題之后，在往里面放一些小的東西，比如圖片img、表單form input、文字、超鏈接a、列表ul li，這時(shí)候簡(jiǎn)單的頁(yè)面結(jié)構(gòu)就出來(lái)了。

接下來(lái)要把寫(xiě)好的結(jié)構(gòu)進(jìn)行美化，不然頁(yè)面就會(huì)一團(tuán)亂麻，沒(méi)有美感，而網(wǎng)頁(yè)當(dāng)中潤(rùn)色部分是用CSS來(lái)做的。這個(gè)環(huán)節(jié)需要更加細(xì)心，例如百度首頁(yè)導(dǎo)航紅色框整體在綠色框的右邊，需要給紅色框添加float：right；紅色框里面文字的字號(hào)大小，字體，字體顏色，水平間距，垂直間距都需要一點(diǎn)點(diǎn)寫(xiě)。如果在寫(xiě)的過(guò)程中遇見(jiàn)了問(wèn)題，可以借助Chrome瀏覽器的調(diào)試功能，哪里錯(cuò)了用箭頭點(diǎn)哪里，結(jié)構(gòu)看左邊，CSS看右邊，看看CSS屬性有沒(méi)有顯示，有沒(méi)有劃掉，有沒(méi)有黃色報(bào)錯(cuò)等等。

在做頁(yè)面時(shí)，需要大量的練習(xí)，才可以熟能生巧。一個(gè)頁(yè)面寫(xiě)完之后，總結(jié)一下這個(gè)頁(yè)面在書(shū)寫(xiě)過(guò)程中遇到了哪些問(wèn)題，是怎么解決的，為什么這樣解決，深入思考這個(gè)模塊的這個(gè)效果可不可以用其他的方法來(lái)實(shí)現(xiàn)，以做到舉一反三。

千鋒重慶HTML5大前端培訓(xùn)，配合實(shí)戰(zhàn)項(xiàng)目講解網(wǎng)站頁(yè)面布局，讓你從容應(yīng)對(duì)HTML、CSS的學(xué)習(xí)，基礎(chǔ)打好了，才能更有信心面對(duì)之后的挑戰(zhàn)。

信息加速發(fā)展的互聯(lián)網(wǎng)時(shí)代，越來(lái)越多的科技公司為了專(zhuān)注核心競(jìng)爭(zhēng)力業(yè)務(wù)以及降低軟件項(xiàng)目成本，開(kāi)始將項(xiàng)目中的部分業(yè)務(wù)模塊分發(fā)給第三方外包公司來(lái)完成。而這樣是否就意味著大幅度地降低成本了？

事實(shí)告訴我們，并沒(méi)有。

本文作者作為一名外包商，以自身的經(jīng)歷告訴我們本可以在3天之內(nèi)完成了的一個(gè)報(bào)價(jià)僅為 1500 美元的靜態(tài) HTML 頁(yè)面，是如何被大型企業(yè)硬是拖成了一個(gè)為期 7 周且需要耗費(fèi) 18000 美元（約為人民幣12萬(wàn)）項(xiàng)目的。

不久前，我作為承包商工作，經(jīng)常從一個(gè)項(xiàng)目跳到另一個(gè)項(xiàng)目。有些是短期的，工作一周左右，可很快提交我的工作成果。也有的項(xiàng)目會(huì)持續(xù)幾個(gè)月，這期間我會(huì)攢一些錢(qián)用以休息一段時(shí)間。

我更喜歡短期工作，因?yàn)檫@樣的工作使我可以在單位時(shí)間內(nèi)收取更高的費(fèi)用。這樣不僅我感覺(jué)是在為自己打工，而且我覺(jué)得我不需要太努力工作就能過(guò)上還算體面的生活了。我的最高費(fèi)率仍然在合理的范圍之內(nèi)，而且我總是提供高質(zhì)量的服務(wù)。這就是我和一家大公司定下這個(gè)項(xiàng)目之前我的工作狀態(tài)。

這家公司聯(lián)系我的時(shí)候顯得很著急，經(jīng)理告訴我他們現(xiàn)在就需要一個(gè)人來(lái)搞定這件事。需要一個(gè)不怎么需要公司培訓(xùn)就能馬上上手，而且能交付最大性能的人。不管怎么說(shuō)，這剛好是我的座右銘。這個(gè)項(xiàng)目正是我喜歡的工作類(lèi)型。它內(nèi)容簡(jiǎn)短，很快就能做好，而且報(bào)酬很高。

在談判確定好合適的費(fèi)率后，我收到了一封包含說(shuō)明的電子郵件。他們給了我更多關(guān)于這個(gè)項(xiàng)目的背景。他們的開(kāi)發(fā)人員在沒(méi)有事先告知的情況下就離開(kāi)了，并且從未跟任何其他人匯報(bào)過(guò)項(xiàng)目的進(jìn)展。

我們需要您毫不分心地完成此項(xiàng)目。在合同期限內(nèi)，您將只與我們合作，并及時(shí)交付成果。我們會(huì)對(duì)給您造成的麻煩進(jìn)行補(bǔ)償。

任務(wù)說(shuō)明很簡(jiǎn)單：閱讀這些需求然后估計(jì)完成這個(gè)項(xiàng)目需要多長(zhǎng)時(shí)間。這是我職業(yè)生涯中遇到的一個(gè)那類(lèi)比較容易的項(xiàng)目之一。這是一個(gè)HTML頁(yè)面，包含一些簡(jiǎn)單的動(dòng)畫(huà)和幾個(gè)嵌入的視頻。我花了一個(gè)晚上研究需求并在腦中模擬實(shí)施。這些年來(lái)，我已經(jīng)學(xué)會(huì)了在能確定收到報(bào)酬之前不為客戶(hù)寫(xiě)任何代碼。

我確定了這個(gè)項(xiàng)目充其量也就是一天的活兒。但為了保持謹(jǐn)慎，我上報(bào)了20個(gè)小時(shí)，總計(jì)1500美元。畢竟這只是一個(gè)HTML頁(yè)面而已，我也只能收取這么多費(fèi)用。他們讓我到25英里外的衛(wèi)星辦公室去。在為他們工作的那三天里我必須天天開(kāi)車(chē)去那兒。

第二天，我到了衛(wèi)星辦公室。在一個(gè)購(gòu)物中心，然后通過(guò)一扇秘密的門(mén)進(jìn)入了一個(gè)秘密的世界，一些工作人員在他們的小隔間里安靜地工作著。接待員給我看了一個(gè)我將用它來(lái)工作的全新MacBook Pro，我必須從零開(kāi)始設(shè)置環(huán)境。我的確更偏向于使用公司的筆記本電腦，因?yàn)樗麄兘?jīng)常要求承包商安裝一些可疑的軟件。（我可不想裝到自己電腦上。）

我花了一天時(shí)間下載我的工具包，設(shè)置電子郵件、SSH密鑰和請(qǐng)求服務(wù)的授權(quán)。換句話(huà)說(shuō)，我什么都沒(méi)做。這就是為什么我上報(bào)了20個(gè)小時(shí)，還沒(méi)開(kāi)始寫(xiě)代碼呢，光前期設(shè)置就耗費(fèi)了8個(gè)小時(shí)。

第二天，我準(zhǔn)備開(kāi)始真正地干活了。有了MacBook Pro，我用它發(fā)了一封電子郵件給經(jīng)理。我告訴他我已經(jīng)準(zhǔn)備好工作了，正在等待上述的資源。那天，我在我柔和燈光下的工位上待著，玩著手指，直到太陽(yáng)落山。

我再次計(jì)算了一下。根據(jù)我的估計(jì)，我還只剩4個(gè)小時(shí)的時(shí)間來(lái)完成這項(xiàng)工作，這對(duì)單個(gè)HTML頁(yè)面來(lái)說(shuō)也不是不可能。但不用說(shuō)，第二天，我把這剩下的4個(gè)小時(shí)花在了吃公司贊助的午餐上，伙食很不錯(cuò)，而且我與其他員工玩得很開(kāi)心。

當(dāng)預(yù)計(jì)的20小時(shí)到期時(shí)，我確保向經(jīng)理發(fā)送了另一封電子郵件，讓他知道我確實(shí)人一直在公司，但我沒(méi)有收到我需要的資源。當(dāng)然，那封電子郵件被無(wú)視了。

接下來(lái)的星期一，我猶豫地開(kāi)過(guò)了這25英里。令我驚訝的是，經(jīng)理已經(jīng)來(lái)到衛(wèi)星辦公室，并熱情地問(wèn)候了我。他是個(gè)三十來(lái)歲，很隨和很不錯(cuò)的人。我很不解，他并不像當(dāng)初要雇我的那時(shí)候那么著急了。我們進(jìn)行了友好的交談，沒(méi)有提到任何工作。后來(lái)，我們?nèi)コ晕绮停读隋X(qián)。這是美好的一天。完全沒(méi)工作。

好吧你可以說(shuō)我很容易形成習(xí)慣，但如果你供我吃喝并每天呵護(hù)我，我會(huì)習(xí)慣這一切。這變成了一個(gè)例程。

我來(lái)上班，花一些時(shí)間在網(wǎng)上閱讀以及看視頻。我每天發(fā)一封電子郵件，所以他們知道我確實(shí)去了公司。

然后，我會(huì)去吃午飯并和碰見(jiàn)的有趣的人一起玩耍。在一天結(jié)束時(shí)，我站起來(lái)，伸個(gè)懶腰，打一個(gè)當(dāng)之無(wú)愧的哈欠，然后開(kāi)車(chē)回家。

我習(xí)慣了。事實(shí)上，我在期待這些。當(dāng)我終于收到一封帶有指向我需要的資源的鏈接的電子郵件時(shí)，我反而有點(diǎn)失望。我重新開(kāi)始腳踏實(shí)地，變回自己工作時(shí)的嚴(yán)肅臉。但是，在花了幾分鐘查看Zip文件后，我才注意到它缺少了我需要的大部分內(nèi)容。設(shè)計(jì)師給我發(fā)了一些Adobe Illustrator文件，我無(wú)法在MacBook上打開(kāi)它。

我回復(fù)了電子郵件來(lái)解釋我的疑慮，而且一并問(wèn)了一些其他問(wèn)題以節(jié)省時(shí)間。那時(shí)，我當(dāng)初上報(bào)的20個(gè)小時(shí)時(shí)間早都已經(jīng)過(guò)了。我現(xiàn)在真的想要完成這項(xiàng)工作了。

點(diǎn)擊發(fā)送后不久，我收到了一封電子郵件。只有一句：“轉(zhuǎn)發(fā)給Alex”，然后Alex得到了這封電子郵件的抄送。

Alex回答說(shuō)他轉(zhuǎn)發(fā)給了Steve。Steve回答說(shuō)Michelle是設(shè)計(jì)師，她會(huì)了解得更多一些。

Michelle的自動(dòng)回復(fù)稱(chēng)她正在度假，所有詢(xún)問(wèn)都應(yīng)該直接告訴她的經(jīng)理。

她的經(jīng)理回復(fù)說(shuō)“誰(shuí)是Ibrahim？(我的名字)”我的經(jīng)理回復(fù)說(shuō)他很抱歉還沒(méi)有向大家介紹我。

作為承包商，在人們注意到我在那里工作之前，我通常就已經(jīng)完成我的工作并離開(kāi)那家公司了。但這次，我收到了大量歡迎的電子郵件。這樣的郵件持續(xù)了一段時(shí)間，而我被迫回復(fù)那些友好地過(guò)了頭的郵件。有些人很想跟我本人見(jiàn)面。當(dāng)我說(shuō)我在加利福尼亞州，離得遠(yuǎn)著呢，他們有點(diǎn)失望。以及羨慕，他們說(shuō)他們羨慕加州美好的天氣。

他們很有禮貌地?zé)o視我的電子郵件，用抄送來(lái)轉(zhuǎn)移我的問(wèn)題，把我問(wèn)過(guò)的任何事情歸為垃圾郵件。我花了很多時(shí)間，像一位考古學(xué)家在深深的電子郵件之溝內(nèi)挖掘，希望找到我問(wèn)題的答案。

你可以想象每當(dāng)我想起我唯一的任務(wù)是構(gòu)建一個(gè)靜態(tài)HTML頁(yè)面時(shí)，我感覺(jué)到的冒名頂替綜合癥（心虛，懷疑自己的回報(bào)不是理所應(yīng)得的）的程度之深。原本虛報(bào)了的20個(gè)小時(shí)的項(xiàng)目變成了為期7周的冒險(xiǎn)，期間我享受免費(fèi)午餐，每天開(kāi)車(chē)50英里，并翻看電子郵件。

當(dāng)我最終完成項(xiàng)目時(shí)，我在GitHub上將它發(fā)送給了團(tuán)隊(duì)。

在不久之后，我收到了邀請(qǐng)，整個(gè)團(tuán)隊(duì)會(huì)用Google Hangout開(kāi)視頻會(huì)議對(duì)我的代碼進(jìn)行Code Review。

我花了一個(gè)多月的時(shí)間來(lái)寫(xiě)一個(gè)靜態(tài)HTML頁(yè)面，而現(xiàn)在整個(gè)團(tuán)隊(duì)都要評(píng)價(jià)我的工作？

那個(gè)什么，我要為自己說(shuō)句話(huà)，這個(gè)頁(yè)面也包含一些JavaScript交互，是響應(yīng)式的，還包括CSS動(dòng)畫(huà)......好吧我真的覺(jué)得自己像個(gè)來(lái)冒名頂替的。

當(dāng)然，視頻會(huì)議的時(shí)間又重新安排了幾次。當(dāng)它終于發(fā)生時(shí)，我和我的工作已經(jīng)不是會(huì)議的主題了。他們都坐在紐約某個(gè)地方的同一個(gè)房間里，像一個(gè)緊密團(tuán)結(jié)的團(tuán)體一樣聊了一會(huì)兒。事實(shí)上，他們所說(shuō)的關(guān)于我做的項(xiàng)目的所有內(nèi)容只有：

• 人1：嘿，有人在做這個(gè)贊助頁(yè)面嗎？
• 人2：是的，我認(rèn)為已經(jīng)完成了。
• 人1：太好了，我今晚合并吧。

那天晚上回家的時(shí)候，我意識(shí)到自己正面臨另一個(gè)挑戰(zhàn)。我在這家公司工作了7個(gè)星期，而我的原始報(bào)價(jià)為1,500美元。這相當(dāng)于每年11,100美元或每周214美元。或者直接說(shuō)，每小時(shí)5.35美元。

這幾乎還不夠我付油錢(qián)的。所以，我給他們發(fā)了一張發(fā)票，我按照原來(lái)的每小時(shí)費(fèi)率給他們報(bào)了7個(gè)星期，總額達(dá)18,000美元。我當(dāng)然感到羞恥，但我還能怎么辦呢？

就像我預(yù)期的那樣，我沒(méi)有收到回復(fù)。如果所有大公司都有什么相同之處，那就是他們并不急于按時(shí)支付賬單。這么簡(jiǎn)單的工作要價(jià)這么多，我覺(jué)得自己像一個(gè)騙子，但話(huà)又說(shuō)回來(lái)了，我又不是來(lái)做慈善的。我每天開(kāi)車(chē)50英里來(lái)做這項(xiàng)工作，如果工作沒(méi)有完成，那不是因?yàn)槲也幌搿＿@是因?yàn)樗麄兓貜?fù)太緩慢了。

接下來(lái)的一周我得到了回復(fù)。這是一封來(lái)自經(jīng)理的冷郵件，他把我每天的工作日分成不同的時(shí)間段。然后他把我工作的那部分時(shí)間高亮了，每天標(biāo)記一個(gè)小時(shí)的午休時(shí)間。最后他用我們商定的小時(shí)費(fèi)率做了一些計(jì)算。

顯然，我算錯(cuò)了。我錯(cuò)誤估算了總數(shù)。調(diào)整后，他們欠我的總金額是21,000美元。

請(qǐng)確認(rèn)重新調(diào)整后的小時(shí)數(shù)，以便財(cái)務(wù)可以給您寫(xiě)個(gè)支票。

我很快回復(fù)了確認(rèn)。

原文：https://idiallo.com/blog/18000-dollars-static-web-page

作者簡(jiǎn)介：Ibrahim Diallo，具有多年開(kāi)發(fā)經(jīng)驗(yàn)的軟件工程師。

本文為 CSDN 翻譯