在開發項目組里面，前端一般都是作為一個統稱而存在，很多剛畢業的童鞋就問我想從事前端方面問我怎么看，我會反問你對前端了解多少，很多人都認為前端基本上都是搞設計從事視覺方面。

前端從整個項目劃分來看，可以分為UE、頁面、邏輯，以下逐分析。

一、UE

如果只需要知道一種編程語言就可以構建一個全棧的應用程序，是不是特別了不起？Ryan Dahl為了把這個想法成為現實，創造了node.js。Node.js是建立在Chrome強勁的V8 JavaScript引擎上的服務器端框架。雖然最初是用C++編寫的，但是應用程序通過JavaScript運行。

這樣一來，問題就解決了。一種語言就可以統治一切。而且，在整個應用程序中你只需要使用這一種語言。所以，我們需要深刻了解node.js。這就是本文的主題。

下面這四個基本概念是你想要掌握node.js所必需的。我會盡可能長話短說向大家介紹它們。

如何定義牛逼工程師

有軟件工程方面的研究說，對于開發者個體而言，最優秀的開發者的生產效率約為平均值的2倍，而優秀的開發者會吸引其它優秀的人，或者激勵與幫助團隊中的其它成員，最終使團隊之間的生產效率差異達到10倍之多。

所謂牛逼的工程師，就是那些個體效率是其它人2倍，形成團隊之后達到10倍差異的一群人。

前端領域這幾年發展速度非常快，人才分布呈兩級分化趨勢，大家都在說缺前端，其實缺的是牛逼前端，對于低端的前端，培訓機構一直在量產，但是無法滿足要求。很多情況下，一個牛逼前端對于團隊的價值是再多低端前端都無法提供的。

牛逼的前端工程師有一些共通的特質，這些特質也許不屬于前端的核心范疇，但是可以通過它們將牛逼的人識別出來。

對用戶體驗的追求

舉例

我們先從示例應用程序的一些摘錄開始。下面是暴露Person對象的響應信息庫。很類似于傳統的，非響應信息庫，只不過它返回Flux<Person>而傳統的返回List<Person>，以及返回Mono<Person>的地方返回Person。Mono<Void>用作完成標識：指出何時保存被完成。關于Reactor類型的更多信息，請參閱

public interface PersonRepository { Mono<Person> getPerson(int id); Flux<Person> allPeople(); Mono<Void> savePerson(Mono<Person> person);
}

下面是我們如何暴露帶有新的函數式web框架的資源庫：

RouterFunction<?> route = route(GET("/person/{id}"),
    request -> {
        Mono<Person> person = Mono.justOrEmpty(request.pathVariable("id"))
            .map(Integer::valueOf)
            .then(repository::getPerson); return Response.ok().body(fromPublisher(person, Person.class));
    })
    .and(route(GET("/person"),
        request -> {
            Flux<Person> people = repository.allPeople(); return Response.ok().body(fromPublisher(people, Person.class));
    }))
    .and(route(POST("/person"),
    request -> {
        Mono<Person> person = request.body(toMono(Person.class)); return Response.ok().build(repository.savePerson(person));
}));

下面我們要介紹如何運行，比如在Reactor Netty中：

前言

生活有度，人生添壽。

Javascript從當初的一個“彈窗語言”，一步步發展成為現在前后端通吃的龐然大物。javascript的受歡迎程度也是與日俱增，今年編程語言又是花落javascript，這實在是一個充滿了活力的語言。如今，隨隨便一個網頁javascript代碼量都不下數千行，要是node后端那更不止幾千行了。（WTF）代碼量的增加給編程帶來的首要的問題就是如何去編寫和維護如此龐大的代碼呢？答案就是模塊化思想，其實就是面向對象（OOP）編程，如今比較流行的三大前端框架（angular,react,vue）基本都實現了組件化編程，但組件化和我們所說的模塊化又有所不同，應該可以這么理解，組件化是模塊化的升級版，模塊化是組件化的基礎。那么，問題來了，javascript怎么面向對象編程呢？我想這很多老鳥也不定說的清楚吧，前端雜而活躍的各種社區，很多前端er一度依賴各種插件，根本不需要去了解這些深層的東西卻照樣能完成任務。但我想作為一個有追求的前端er還是很有必要去學習這些看似用不著的東西的，別的不說，就單單因為我們是前端er,只會用jquery一個稍微厲害的后端都能代替你。好吧，廢話不多說，到底如何面向對象coding呢…..

很不幸，es5中并沒有給出明確的定義‘類’的概念，所以傳統的面向對象編程似乎是行不通的，那么又該腫么辦呢？值得慶幸的是，前輩們通過不斷探索總結，成功的用javascript模擬出了“類”。那么，javascript的類又該怎么定義呢？

在面向對象編程中，類（class）是對象（object）的模板，定義了同一組對象（又稱”實例”）共有的屬性和方法。

問題提出

font-weight的屬性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder，它們的區別是？
另外，在實際開發中，我們應該使用數值表達還是文字表達呢？

認識font-weight

根據W3C Fonts節章的規范標準，可知：

前言

React 好像已經火了很久很久，以致于我們對于 Virtual DOM 這個詞都已經很熟悉了，網上也有非常多的介紹 React、Virtual DOM 的文章。但是直到前不久我專門花時間去學習 Virtual DOM，才讓我對 Virtual DOM 有了一定的理解，以致于要懷疑起很久之前看過的那些文章來。倒不是這些文章講得不對，而是現在在我看來角度不太好，說得越多，越說不清。

讓我能夠有所開竅（自認為）的，是這篇文章：

Change And Its Detection In JavaScript Frameworks
Monday Mar 2, 2015 by Tero Parviainen

作者看問題的角度很棒，從數據變更與UI同步的角度來介紹各個典型框架，特別是對于 React 的 Virtual DOM，從這個角度理解起來更容易些。

什么是 rem

可能在你使用收音機或者用其他音樂播放器之前，就已經聽過“R.E.M.”這個詞了。在這個樂隊眼中，這個詞是“淺睡眠時眼球的快速轉動”的縮寫，而在 css 中，rem 代表著“以根元素為參照物的 em 單位“。他不會讓你拋棄你的宗教信仰也不會讓你相信那個遠在月球的人，但是它可以幫助你實現一個和諧、平穩的設計。

根據 W3C 規范中對 1rem 的定義：

1rem 與等于根元素 font-size 的計算值。當明確規定根元素的 font-size 時，rem 單位以該屬性的初始值作參照。

WEB服務器、應用程序服務器、HTTP服務器有何區別？IIS、Apache、Tomcat、Weblogic、WebSphere 都各屬于哪種服務器？這些問題困惑了很久，今天終于梳理清楚了：

Web服務器的基本功能就是提供Web信息瀏覽服務。它只需支持HTTP協議、HTML文檔格式及URL。與客戶端的網絡瀏覽器配合。因為Web服務器主要支持的協議就是HTTP，所以通常情況下HTTP服務器和WEB服務器是相等的(有沒有支持除HTTP之外的協議的web服務器，作者沒有考證過)，說的是一回事。

應用程序服務器(簡稱應用服務器)，我們先看一下微軟對它的定義：”我們把應用程序服務器定義為“作為服務器執行共享業務應用程序的底層的系統軟件”。 就像文件服務器為很多用戶提供文件一樣，應用程序服務器讓多個用戶可以同時使用應用程序（通常是客戶創建的應用程序）”

通俗的講，Web服務器傳送(serves)頁面使瀏覽器可以瀏覽，然而應用程序服務器提供的是客戶端應用程序可以調用(call)的方法(methods)。確切一點，你可以說:Web服務器專門處理HTTP請求(request)，但是應用程序服務器是通過很多協議來為應用程序提供(serves)商業邏輯 (business logic)。

在JavaScript中，對對象進行拷貝的場景比較常見。但是簡單的復制語句只能對對象進行淺拷貝，即復制的是一份引用，而不是它所引用的對象。而更多的時候，我們希望對對象進行深拷貝，避免原始對象被無意修改。

對象的深拷貝與淺拷貝的區別如下：

• 淺拷貝：僅僅復制對象的引用，而不是對象本身；
• 深拷貝：把復制的對象所引用的全部對象都復制一遍。

一. 淺拷貝的實現

淺拷貝的實現方法比較簡單，只要使用是簡單的復制語句即可。

1.1 方法一：簡單的復制語句

/* ================ 淺拷貝 ================ */ function simpleClone(initalObj) { var obj = {}; for ( var i in initalObj) {
        obj[i] = initalObj[i];
    } return obj;
}