JavaScript 歷史與發展

各位先前可能聽過 ECMAScript 若不知道也沒關係,ES6的出現就他有關係,在1995年時 Netscape(網景)公司與 Sun(昇陽)公司合作 設計一個網頁程式語言名為 JavaScript 名稱屬 Sun(昇陽)公司擁有,後來被Oracle(甲骨文)公司所收購。1996年11月,網景公司將 JavaScript 提交給歐洲計算機製造商協會(ECMA)進行標準。各位可以發現ES4為什麼沒釋出?由於此版本更新幅度太大更新許多功能,怕龐大的變動讓使用者吃不消所以最後決定每年固定釋出更新直到最近的 ES6、ES7。

規格與版本

  • ECMA-262的第一個版本於1997年6月被 ECMA 組織採納
  • ECMAScript 3 (ES3) 發行於1999年底
  • ECMAScript 4 (ES4) 棄用(原因是貿然大幅度更新對用戶不太好所以改成每年逐一釋出)
  • ECMAScript 5 (ES5) 發行於2009年底
  • ECMAScript 6 (ES6) 發行於2015年中,為目前最新的官方版本

Comment

自動執行PHP程式

PHP通常架設在伺服器上運行的,主要是有使用者請求才會動作,但有些時候想將寫好的PHP程式,能夠自己在一定的時間內,自動執行去處理一些事情。
要讓PHP程式能夠自動執行,首先要先寫好要執行的php程式如b.php,之後在寫一個bat檔 b.bat 內容如下

C:\AppServ\php\php.exe -f c:\Appserv\test\b.php > b.txt

主要是利用,用php.exe去執行 b.php
C:\AppServ\php\php.exe也就是你安裝php的位址(記得改成自己安裝的資料夾位置)
隨後並且把結果寫到b.txt去(自己想看有沒有成功,如果有錯誤可以看到錯誤訊息)

Comment

React-router和React-router-dom的選擇

很多剛使用react的同學在接觸到react-router的時候就會很蛋疼,什麼react-router和react-router-dom?
往往開始會比較懵逼,下面我們就來一探究竟。

React-router

React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它沒有提供dom操作進行跳轉的api。

React-router-dom

React-router-dom提供了BrowserRouter, Route, Link等api,我們可以通過dom的事件控制路由。
例如點擊一個按鈕進行跳轉,大多數情況下我們是這種情況,所以在開發過程中,我們更多是使用React-router-dom。安裝很簡單npm i react-router-dom --save,安裝了淘寶鏡像的就用cnpm吧。

React-router-dom的核心用法

HashRouter和BrowserRouter

它們兩個是路由的基本,就像蓋房子必須有地基一樣,我們需要將它們包裹在最外層,我們只要選擇其一就可以了。現在講它們的不同:

HashRouter

如果你使用過react-router2或3或者vue-router,你經常會發現一個現象就是url中會有個#,例如localhost:3000/#,HashRouter就會出現這種情況,它是通過hash值來對路由進行控制。如果你使用HashRouter,你的路由就會默認有這個#。

這就是HashRouter的使用情況。下面是對應的代碼。

ReactDOM.render(
    <HashRouter>
        <Router path="/" component={home}></Route>
    </HashRouter>
),document.getElementById('root'));

Comment

CSS ::selection

網站當滑鼠反白時,反白區域的底色通常是藍色,但其實可以透過CSS ::selection選擇元素做背景色和字體顏色樣式的修改,設計此元素非常適合將用戶選擇的文本與您的網站配色方案進行匹配。

p::-moz-selection { 
    color: red;
}
p::selection { 
    color: red; 
}

如上所示,您可以::selection對單個元素進行樣式設置。
IE9+、Opera、Google Chrome 以及Safari 中支持::selection 選擇器。
Firefox 支持替代的::-moz-selection。

Comment

終極解決Javascript非同步

異步操作是JavaScript編程的麻煩事,麻煩到一直有人提出各種各樣的方案,試圖解決這個問題。

從最早的回調函數,到Promise對象,再到Generator函數,每次都有所改進,但又讓人覺得不徹底。它們都有額外的複雜性,都需要理解抽象的底層運行機制。

異步I / O不就是讀取一個文件嗎,幹嘛要搞得這麼複雜?異步編程的最高境界,就是根本不用關心它是不是異步。

async函數就是隧道盡頭的亮光,很多人認為它是異步操作的終極解決方案。

異步函數是什麼?

一句話,async函數就是Generator函數的語法糖。

前文有一個Generator函數,依次讀取兩個文件。

var fs = require('fs');

var readFile = function (fileName){
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

Comment

Copyright © 2018 ucamc