JavaScript

  • 介紹

    SheetJS js-xlsx一款能夠讀寫Excel的.xls、.xlsx格式表格的插件,瀏覽器支持良好,並且能在多個平台上使用,目前在github上有12602個star,在這邊的範例主要使用React,再加上SheetJS js-xlsx及react-input-files,讓你一個按鈕,簡單的實現直接選檔上傳。

  • 苦苦掙扎著繞過Redux?別擔心,你並不孤單。

    我從許多人那裡聽說,Redux是編寫他們想要的React應用程序的最大障礙。

    到本文結束時,您將了解Redux的用途,以及如何知道何時將其添加到您自己的應用程序中。

    為什麼?

    最好的問題是,我們為什麼要使用Redux?

    答案並非“因為互聯網上的其他人都在使用它。”(我不懷疑這就是為什麼很多人都在使用它,但讓我們更深入。)

    Redux有用的原因是它解決了一個問題。

    不,它解決的問題不是“國家管理”。這是非常模糊的。哎呀,React已經做了國家管理。Redux確實幫助管理狀態,但這不是它解決的問題。

    這是關於數據流

    如果你使用React超過幾分鐘,你可能知道道具和單向數據流。數據傳遞下來通過道具組件樹。給定這樣的組件:

    的count,存儲在App的狀態,將被傳遞下來的道具:

  • Apple的遊覽器Safari,原來也有像其他遊覽器如Chrome firefox檢查網頁元素的功能,只是預設隱藏需要手動去打開。

    偏好設定 > 進階 > 在選單中顯示開發人員選單。

  • Mike Cheng直播Webpack前端課程,內容包含Webpack基本應用操作,在一個小時內帶你認識Webpack,值得一看。

  • 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'));
  • Demo | 官網

    經常能見到單頁式使用選單滑動區塊的網站,我們稱為全屏滾動網站(也稱為單頁網站),尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。比如iPhone 5C的介紹頁面(查看)。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試試fullPage.js。

  • Google Code Prettify 顯示程式碼最簡單方法

    google推出的google code prettify,可用很簡單的方式讓程式碼自動分辨顏色,而且可自行調整自由度很高!

    看一個範例

    設定

    最快的方式是使用下列CDN方式。

    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  • 只能輸入1個數字 
    表達式 ^/d$
    描述 匹配一個數字
    匹配的例子 0,1,2,3
    不匹配的例子  
  • canvas實現刮刮卡

    這個刮刮卡用HTML5 canvas繪製。刮刮卡主要由兩層canvas繪製,底層放置隨機數,頂層放置圖片,限制每天只能刮三次,主要利用globalCompositeOperation我們可以將新圖形繪製在舊圖形之下、遮蓋部分區域、清除畫布部分區域 (不同於 clearRect() 函式只能清除矩形區域)。

    ctx.globalCompositeOperation = 'destination-out';
  • 函式(function)

    箭頭函式在 JavaScript 中改寫原本 function 的撰寫方式。除了較短的語法外,它們在保持this 關鍵字範圍方面也有優勢 參見這裡,此外在 ESLint 中官方也建議使用箭頭函式取代傳統寫法。

    函式 (function) 又稱方法 (method),用於程式碼過多重複時定義一個方法來去重複呼叫他來解省我們的開發效率,以下為範例:

    原本寫法

    // 使用有名稱的函式
    function sum(a, b){
        return a+b;
    }
    
    // 常數指定為匿名函式
    const sum = function(a, b) {
        return a+b;
    }
  • 獲取包含物件的陣列的索引的最佳方法是什麼?

    想像這種情況:

    var myArray = [
        //陣列的索引0
        {
            hello: 'leon',
            foo: 'baz'
        },
        //陣列的索引1
        {
            hello: 'stevie',
            foo: 'zoo'
        }
    ]

    在這個例子中,若想使用indexOf方法取得它將是。hello:'stevie' 索引的值為 1要如何做呢?

  • push() 在陣列的末端加入一個以上的元素,並返回新的陣列長度。

    var a = [1, 2];
    a.push(3);
    print(a); // 1,2,3

    unshift() 在陣列的開頭處加入一個以上的元素,並返回新的陣列長度。

    var a1 = [1, 2, 3];
    a1.unshift(4);
    print(a1); // 4,1,2,3
  • JavaScript如何使用正規表示式顯示數值千分位

    n = "1279834847944074100465236.33";
    re = /(\d{1,3})(?=(\d{3})+(?:$|\D))/g ;
    n1 = n.replace(re,"$1,");
    
    console.log(n + "\r\n" + n1);
  • 通過物件key對array進行分組,然後根據分組創建一個新的物件陣列?例如以下,有一個car陣列物件,要對make這個key作為分組關鍵:

    var cars = [
        {
            'make': 'audi',
            'model': 'r8',
            'year': '2012'
        }, {
            'make': 'audi',
            'model': 'rs5',
            'year': '2013'
        }, {
            'make': 'ford',
            'model': 'mustang',
            'year': '2012'
        }, {
            'make': 'ford',
            'model': 'fusion',
            'year': '2015'
        }, {
            'make': 'kia',
            'model': 'optima',
            'year': '2012'
        },
    ];
    //re-usable method
    Array.prototype.groupBy = function(prop) {
          return this.reduce(function(groups, item) {
            const val = item[prop]
            groups[val] = groups[val] || []
            groups[val].push(item)
            return groups
          }, {})
        };
    
    // initiate your groupBy. Notice the recordset Cars and the field Make....
    const groupByMake = cars.groupBy('make');
    console.log(groupByMake);
    
    //At this point we have objects. You can use Object.keys to return an array
  • 在JS中如果使用new Date函數,可以使用傳參數形式獲取某一月的最後一天,並且自動判斷潤平年和大小月,如下:

    //使用new Date(year,month,0)的方式,可以獲取該月份最後一天日期
    var lastDay = new Date('2019','05',0);

    輸出結果

  • 使用print()函數帶入document可將本頁面文本資料,直接由瀏覽器內建列印的對話視窗開啟列印

    HTML

    <input name="print" type="button" value="列印此頁"
    onClick="varitext()">

    Javascript

    function varitext(){
      var text = document
      print(text)
    }
  • var DateDiff = function (sDate1, sDate2) { // sDate1 和 sDate2 是 2016-06-18 格式
      var oDate1 = new Date(sDate1);
      var oDate2 = new Date(sDate2);
      var iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); // 把相差的毫秒數轉換為天數
      return iDays;
    };
    
    var GetDateDiff1 = DateDiff("2019/4/1","2019/4/2"); 
    console.log(GetDateDiff1); //1
    
    var GetDateDiff2 = DateDiff("2016/5/28","2016/6/2"); 
    console.log(GetDateDiff2);//5
  • window.location.href轉跳連結

    自己網域轉跳網址

    window.location.href='sethost.php';

    轉跳到其他網域,加入網頁http://

    window.location.href='http://www.google.com';

    window.open連結另開頁面

    window.open(' 新視窗的網址 ', '新視窗的名稱', config='height=高度,width=寬度');
  • 在 javascript 有分為物件與陣列,常見刪除的方法有 delete 與 splice。

    陣列

    var array=[ 'a', 'b', 'c', 'd' ];
    console.log(a[0]); // a
  • 若提到使用Node.js來架設網站,基本上都會聯想到 Express 模組,以下即是簡單地說明如何使用Node.js + Express 在十分鐘內架設一個網站。

    檔案架構:

    node_modules
    view
    --layout.ejs
    --login.ejs
    --index.ejs
    server.js
    package.json