日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
2017值得一瞥的JavaScript相關(guān)技術(shù)趨勢

2017值得一瞥的JavaScript相關(guān)技術(shù)趨勢從屬于筆者的Web 前端入門與工程實踐，推薦閱讀2016-我的前端之路:工具化與工程化獲得更多關(guān)于2016年前端總結(jié)。本文主要內(nèi)容翻譯自，筆者對于每個條目進(jìn)行了些許完善。

創(chuàng)新互聯(lián)公司專注于高陽企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城開發(fā)。高陽網(wǎng)站建設(shè)公司,為高陽等地區(qū)提供建站服務(wù)。全流程按需策劃設(shè)計，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

本文中提及的這些趨勢可能離大部分開發(fā)者還很遠(yuǎn)，或者說離真正的大規(guī)模工程化應(yīng)用還很遠(yuǎn)，不過不妨礙我們提前兩三年了解下。本文僅代表原作者個人看法，不喜留言輕噴，譯者也很好奇大家對這個列表的看法。

跨年前兩天，Dan Abramov在Twitter上提了一個問題：

JS社區(qū)毫不猶豫的拋出了它們對于新技術(shù)的預(yù)期與期待，本文內(nèi)容也是總結(jié)自Twitter的回復(fù)，按照流行度降序排列。有一個尚未確定的小點是既然函數(shù)式編程已不再是少數(shù)派，是否要把它踢出紅毯呢?

WebAssembly

去年筆者就表示過了對于WebAssembly的期待，WebAssembly就是面向Web平臺的底層代碼。其初衷是希望能夠使所有語言都能夠編譯運(yùn)行到Web平臺，這一點對于很多函數(shù)式編程、響應(yīng)式編程的粉絲充滿吸引力。特別是隨著這幾年JavaScript社區(qū)的突飛猛進(jìn)，很多開發(fā)者并不能跟得上這門語言衍化的速度，因此他們也非常希望能夠直接用自己習(xí)慣的語言而不是要去重頭學(xué)一門從入門到直接放棄的語言。不過JavaScript目前還處于明顯的上升勢頭，暫時還沒人唱衰它。并且WebAssembly仍處于襁褓中，才進(jìn)入到預(yù)覽階段，離真正的發(fā)布還有很長的距離?？偨Y(jié)而言，筆者建議我們都應(yīng)該對WebAssembly保持一定的關(guān)注，畢竟它會對未來的JavaScript造成極大的影響。如果你對于WebAssembly有興趣，那么推薦閱讀Eric Elliott的相關(guān)博客。

Elm

筆者個人不太意愿使用Elm，不過其特性還是很有借鑒價值

2016年不少的開發(fā)者參與到Elm的開發(fā)中，Elm不僅僅是JavaScript的擴(kuò)展庫，而是一門可以編譯到JavaScript的編程語言，對于很多熱衷于函數(shù)式編程的開發(fā)者是個不錯的選擇。參考Elm 入門介紹，Elm提供了如下特性：

  • 并不會存在運(yùn)行時錯誤，沒有null，沒有undefined is not a funtion。
  • 非常友好的錯誤提示信息能夠輔助你開發(fā)。
  • 比較嚴(yán)格的代碼規(guī)范與項目架構(gòu)，保證了你的應(yīng)用在快速迭代中依然保持著***實踐。
  • 自動為所有的Elm包添加語義版本描述。

總而言之，Elm為我們提供了優(yōu)秀的工具來保證編寫干凈、簡單與碎片化的代碼，并且因為Elm是可以編譯到JavaScript，因此很多JavaScript開發(fā)者都可以保持下關(guān)注或者嘗試下。

babili(babel-minify)

Babili最早于2016年8月份發(fā)布，它是基于Babel工具鏈上的支持原生ES6語法的壓縮工具。Henry Zhu在這篇文章中稱述了為什么我們需要另一個壓縮工具，關(guān)鍵點如下：

目前大部分壓縮工具只能

夠處理ES5代碼，因此在壓縮之前需要先進(jìn)性編譯，而Babili能夠支持直接輸入ES2015+。隨著瀏覽器性能的提升，越來越多的瀏覽器支持直接運(yùn)行ES2015的代碼，因此我們不需要再進(jìn)行轉(zhuǎn)換編譯。另外Babili也可以作為Babel preset引入到現(xiàn)有的Babel配置中，也可以作為直接使用的命令行工具。

這里舉個簡單的例子，我們編寫了如下的ES6類:

 
 
 
 
    
  
  
  
  
  1. class Mangler {    
    2.   
  
  
  
  2.    constructor(program) {    
    3.   
  
  
  
  3.      this.program = program;    
    4.   
  
  
  
  4.    }    
    5.   
  
  
  
  5.  }    
    6.   
  
  
  
  6.  // need this since otherwise Mangler isn't used    
    7.   
  
  
  
  7.  new Mangler();  
    8.

之前，利用傳統(tǒng)的Babel進(jìn)行編譯與壓縮，會得到如下代碼:

 
 
 
 
    
  
  
  
  
  1. // ES2015 code -> Babel -> Uglify/Babili -> Minified ES5 Code    
    2.   
  
  
  
  2.  var a=function a(b){_classCallCheck(this,a),this.program=b};a();  
    3.

而Babili的效果如下:

 
 
 
 
    
  
  
  
  
  1. // ES2015 code -> Babili -> Minified ES2015 Code    
    2.   
  
  
  
  2.  class a{constructor(b){this.program=b}}new a;  
    3.

OCaml

OCaml本身和JS沒啥關(guān)系，不過列表接下來的兩項都是基于OCaml，因此還是要先介紹下。如果你關(guān)注了近兩年來的函數(shù)式編程崛起之路，你或許聽過Haskell。而得益于OCaml能夠編譯到就S，其以后來居上的姿態(tài)凌駕于Haskell。Facebook的不少開發(fā)者都是OCaml的粉絲，他們的Hack、Flow以及Infer都是基于OCaml構(gòu)建的。

BuckleScript

BuckleScript是基于OCaml實現(xiàn)的服務(wù)端框架，由著名的Bloomberg團(tuán)隊創(chuàng)造而來。Duane Johnson對他們的解釋如下：

BuckleScript或者bsc，是個基于OCaml編譯器的相對較新的JavaScript服務(wù)端框架。換言之，你可以使用優(yōu)秀的函數(shù)式、自帶類型的OCaml語言，同時也能繼續(xù)背靠基于npm包管理器的Web生態(tài)系統(tǒng)。

我們來簡要的看下BuckleScript代碼風(fēng)格，譬如用BuckleScript實現(xiàn)簡單的服務(wù)端：

 
 
 
 
    
  
  
  
  
  1. let port = 3000    
    2.   
  
  
  
  2.  let hostname = "127.0.0.1"    
    3.   
  
  
  
  3.  let create_server http =    
    4.   
  
  
  
  4.    let server = http##createServer begin fun [@bs] req resp ->    
    5.   
  
  
  
  5.        resp##statusCode #= 200;    
    6.   
  
  
  
  6.        resp##setHeader "Content-Type" "text/plain";    
    7.   
  
  
  
  7.        resp##_end "Hello world\n"    
    8.   
  
  
  
  8.      end    
    9.   
  
  
  
  9.    in    
    10.   
  
  
  
  10.    server##listen port hostname begin fun [@bs] () ->    
    11.   
  
  
  
  11.      Js.log ("Server running at http://"^ hostname ^ ":" ^ Pervasives.string_of_int port ^ "/")    
    12.   
  
  
  
  12.    end    
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.  let () = create_server Http_types.http  
    15.

編譯輸出為:

 
 
 
 
    
  
  
  
  
  1. 'use strict';    
    2.   
  
  
  
  2.  var Pervasives = require("bs-platform/lib/js/pervasives");    
    3.   
  
  
  
  3.  var Http       = require("http");    
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.  var hostname = "127.0.0.1";    
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  function create_server(http) {    
    8.   
  
  
  
  8.    var server = http.createServer(function (_, resp) {    
    9.   
  
  
  
  9.      resp.statusCode = 200;    
    10.   
  
  
  
  10.      resp.setHeader("Content-Type", "text/plain");    
    11.   
  
  
  
  11.      return resp.end("Hello world\n");    
    12.   
  
  
  
  12.    });    
    13.   
  
  
  
  13.    return server.listen(3000, hostname, function () {    
    14.   
  
  
  
  14.      console.log("Server running at http://" + (hostname + (":" + (Pervasives.string_of_int(3000) + "/"))));    
    15.   
  
  
  
  15.      return /* () */0;    
    16.   
  
  
  
  16.    });    
    17.   
  
  
  
  17.  }    
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.  create_server(Http);  
    20.

OCaml***的特性就是其函數(shù)式語言特性，我們再看下其對于不可變類型的支持，我們使用OCaml stdlib實現(xiàn)的不可變類型如下:

 
 
 
 
    
  
  
  
  
  1. module IntMap = Map.Make(struct    
    2.   
  
  
  
  2.    type t = int    
    3.   
  
  
  
  3.    let compare (x : int) y = compare x y    
    4.   
  
  
  
  4.  end)    
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  let test () =    
    7.   
  
  
  
  7.    let m = ref IntMap.empty in    
    8.   
  
  
  
  8.    let count = 1000000 in    
    9.   
  
  
  
  9.    for i = 0 to count do    
    10.   
  
  
  
  10.      m := IntMap.add i i !m    
    11.   
  
  
  
  11.    done;    
    12.   
  
  
  
  12.    for i = 0 to count do    
    13.   
  
  
  
  13.      ignore (IntMap.find i !m)    
    14.   
  
  
  
  14.    done    
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.  let () = test()  
    17.

而如果要用Facebook Immutable實現(xiàn)的代碼為:

 
 
 
 
    
  
  
  
  
  1. 'use strict';    
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  var Immutable = require('immutable');    
    4.   
  
  
  
  4.  var Map = Immutable.Map;    
    5.   
  
  
  
  5.  var m = new Map();    
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  function test() {    
    8.   
  
  
  
  8.    var count = 1000000;    
    9.   
  
  
  
  9.    for(var i = 0; i < count; ++i) {    
    10.   
  
  
  
  10.      m = m.set(i, i);    
    11.   
  
  
  
  11.    }    
    12.   
  
  
  
  12.    for(var j = 0; j < count; ++j) {    
    13.   
  
  
  
  13.      m.get(j);    
    14.   
  
  
  
  14.    }    
    15.   
  
  
  
  15.  }    
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.  test();  
    18.

性能評測下，二者的執(zhí)行時間對比為：

  • BuckleScript: 1186ms
  • JavaScript: 3415ms

編譯后的體積為：

  • BuckleScript (production): 899 Bytes
  • JavaScript: 55.3K Bytes

ReasonML

ReasonML與React師出同門，是基于OCamel設(shè)計的語法友好、編輯器支持程度高，并且有強(qiáng)大的編譯工具支持的語言。建議閱讀Sean Grove對ReasonML的介紹。本文簡單介紹幾個JavaScript與Reason的語法對比：

Purescript

另一個強(qiáng)類型、高性能的能夠編譯到JavaScript的編程語言，其定位與Elm類似，主要特性為：

  • 沒有運(yùn)行時錯誤
  • 嚴(yán)格的，類似于JavaScript的計算
  • 支持JavaScript 對象語法
  • 提供相較于Hashkell更強(qiáng)大方便的類型系統(tǒng)
  • 更方便地JavaScript庫集成

Webpack-blocks

Dan Abramov說過，Webpack的定位就是在相對底層，因此將配置以編程塊的方式實現(xiàn)會更加完備。

 
 
 
 
    
  
  
  
  
  1. const { createConfig, defineConstants, env, entryPoint, setOutput, sourceMaps } = require('@webpack-blocks/webpack2')          
    2.   
  
  
  
  2.    const babel = require('@webpack-blocks/babel6')          
    3.   
  
  
  
  3.    const devServer = require('@webpack-blocks/dev-server2')          
    4.   
  
  
  
  4.    const postcss = require('@webpack-blocks/postcss')          
    5.   
  
  
  
  5.    const autoprefixer = require('autoprefixer')          
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.    module.exports = createConfig([          
    8.   
  
  
  
  8.      entryPoint('./src/main.js'),          
    9.   
  
  
  
  9.      setOutput('./build/bundle.js'),          
    10.   
  
  
  
  10.      babel(),          
    11.   
  
  
  
  11.      postcss([          
    12.   
  
  
  
  12.        autoprefixer({ browsers: ['last 2 versions'] })          
    13.   
  
  
  
  13.      ]),          
    14.   
  
  
  
  14.      defineConstants({          
    15.   
  
  
  
  15.        'process.env.NODE_ENV': process.env.NODE_ENV          
    16.   
  
  
  
  16.      }),          
    17.   
  
  
  
  17.      env('development', [          
    18.   
  
  
  
  18.        devServer(),          
    19.   
  
  
  
  19.        devServer.proxy({          
    20.   
  
  
  
  20.          '/api': { target: 'http://localhost:3000' }          
    21.   
  
  
  
  21.        }),          
    22.   
  
  
  
  22.        sourceMaps()          
    23.   
  
  
  
  23.      ])          
    24.   
  
  
  
  24.    ]);  
    25.

GraphQL

GraphQL是個不錯的REST替代查詢語言，特別是對于那些擁有大量數(shù)據(jù)的公司。這個案例分析很好地闡述了從REST到GraphQL的轉(zhuǎn)變之路。我能夠想象2017年GraphQL會繼續(xù)處于上升勢頭，不過要談到真的大規(guī)模實施，還要到2018年吧。

React Storybook

相信大家對于React Storybook并不陌生了，你能夠獨立于應(yīng)用而交互式的開發(fā)你的組件，就如下圖所示：

[jQuery 3.0]()

爺爺輩的jQuery仍然處于不斷的迭代更新中，可能很多開發(fā)者忽略了2016年6月份發(fā)布的jQuery 3.0版本，可以參考這里獲取更多信息。

Pixi.js

如果你打算在瀏覽器中實現(xiàn)精彩的2D效果，特別是對于使用WebGL的游戲開發(fā)者，Pixi.js是個值得一看的庫，可以參考這里獲取更多的Demo。

Preact與[inferno]()

非常優(yōu)秀的React的替代庫。

Rust

Rust可以編譯到JavaScript啦(通過emscripten)。

Custom Elements

Custom Elements(包括Shadow DOM)一直不被主流的開發(fā)者接受，不過看似2017這一點將會發(fā)生些許變化。變化的關(guān)鍵因素在于瀏覽器支持比例的改善。個人還是蠻期待Custom Elements的，可以關(guān)注SmashingMag或者Google’s關(guān)于Custom Elements的解釋。

WebRTC

很難相信WebRTC已經(jīng)五歲了，F(xiàn)acebook、Slack、Snapchat以及WhatsApp都在他們的服務(wù)中集成了WebRTC?？梢灶A(yù)見WebRTC會在2017年被更多的公司采用，蒸蒸日上。

Next.js

Next.js是個基于React、Webpack與Babel構(gòu)建的，支持服務(wù)端渲染的小框架，其來源于ZEIT團(tuán)隊，在React社區(qū)獲得了不小的關(guān)注度。


分享題目：2017值得一瞥的JavaScript相關(guān)技術(shù)趨勢
文章分享：http://www.dlmjj.cn/article/ccodgso.html