JavaScript

  • 要獲取Value屬性的值,您可以執行以下操作:

    $("input[type='checkbox']").val();
  • this.props.history.push

    在導航時,您可以將傳遞道具傳遞給歷史對象

    this.props.history.push({
        pathname: '/template',
        search: '?query=abc',
        state: { detail: response.data }
    })
  • Exports & Imports (Modules)

    在撰寫 API 過程中你會將很多分支檔案拆開寫,一方面是減少過長的程式碼另一方面是日後好管理。你必須要先匯出分支檔(export)再經由主檔案中被引入(import),以下有個簡單例子,第一個分支檔 person.js 將函式 person 匯出,第二支分支檔將函式 clean 和變數 bastData 匯出 (另一種匯出寫法) ,最後再主檔案 index.js 引入被呼叫使用。

    分支檔 person.js、utility.js

    // person.js 分支檔1
    const person ={
      name:'Andy'
    } 
    
    export default person;
    // utility.js 分支檔2
    export const clean = () => {}
    export const bastData = 10;

    主檔 index.js

    // index.js
    //default export
    import person from './person.js';
    //named export
    import {baseData} from './utility.js';
    import {clean} from './utility.js';
    
    //named export (rename)
    import {clean as c} from './utility.js';
    import * as c from './utility.js';
    
  • 簡單來說applyMiddleware是使action中能做更多的事情,如同去賦予執行action有能力在中間去多執行function,不同只是傳遞資料參數,thunk則在中間扮演著處理非同步問題。

    Thunk應用增加延遲2秒

    const { createStore, applyMiddleware } = Redux;
    const { Provider, connect } = ReactRedux
    const thunk = ReduxThunk.default
    const Increment = () =>{
      return function (dispatch){
        setTimeout(()=>{
          dispatch({type: 'INCREMENT'})
        },2000)
      }
      // return {
      //     type: 'INCREMENT'
      // }
    }
    class Counter extends React.Component {
      render() {
        console.log(this.props);
        return (
          <div>
            <h2>Counter</h2>
            <div>
              <button onClick={this.props.decrement}>-</button>
              <span>{this.props.count}</span>
              <button onClick={this.props.increment}>+</button>
            </div>
          </div>
        )
      }
    }
    const actionsCreators = (dispatch)=> {
      return{
        increment: () => {
          //store.dispatch({ type: 'INCREMENT' });
          dispatch(Increment())
        },
        decrement : () => {
          dispatch({ type: 'DECREMENT' });
        }
      }
    }
    function mapStateToProps(state) {
      console.log(state);
    
      return {
        count: state.count
      };
    }
    
    const Concounter = connect(mapStateToProps,actionsCreators)(Counter);
    
    const initialState = {
      count: 0
    };
    
    function reducer(state = initialState, action) {
      switch(action.type) {
        case 'INCREMENT':
          return {
            count: state.count + 1
          };
        case 'DECREMENT':
          return {
            count: state.count - 1
          };
        default:
          return state;
      }
    }
    
    const store = createStore(reducer,window.devToolsExtension ? window.devToolsExtension() : undefined ,applyMiddleware(thunk));
    
    const App = () => (
      <Provider store={store}>
        <Concounter/>
      </Provider>
    );
    
    ReactDOM.render(<App />, document.getElementById('root'));
  • 手機眾多裝置的螢幕顯示大小不同,會因為排版時區塊及圖片可用百分比達到顯示等比縮放,但唯獨文字沒辦法設定依照顯示的百分比去做縮放。

    就因為這樣設計排版上,主要視覺區塊內的文字,大小設計剛好在區塊內,以不同顯示比例去看,區塊及圖片會因為設定成百分比而依照螢幕大小縮放,但文字確保持在您設定的大小,這就會產生區塊有自動縮放大小,文字卻沒有自動縮放大小,使得你設計的版面跑位或不是你所要呈現的設計樣子。

  • 首先要使用Javascript modules需要一台伺服器,以便能夠通過導入進行獲取,因為它不適用於該協議。您可以用來啟動當前的伺服器,若沒有以下提供lite-server ,這個使用node npm安裝的輕量伺服器可使用。

    透過 lite-server 這個輕量的開發伺服器,就可以快速啟動網站進行測試:

  • 關於Chart.js

    Chart.js是一款彈性很高的圖表JavaScript library,支援八種常見的統計圖表類型,夠將圖表混合在一起使用,也支援動畫的效果,讓我們製作出來的圖表更加精美!

    範例一 格線顏色與多線條

    Chart.js

        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [10, 30, 39, 20, 25, 34, -10],
                    fill: false,
                }, {
                    label: 'My Second dataset',
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [18, 33, 22, 19, 11, 39, 30],
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Grid Line Settings'
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            drawBorder: false,
                            color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
                        },
                        ticks: {
                            min: 0,
                            max: 100,
                            stepSize: 10
                        }
                    }]
                }
            }
        };
    
        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };
  • Animate.css是個動畫CSS library,不過主要是專注在處理動畫的部分,並不負責在網頁上該什麼時機呈現動畫,加上WOW.js,如捲軸頁面在向下滾動的時候,有些元素會產生細小的動畫效果。雖然動畫比較小,但卻能吸引你的注意。如果你希望你的頁面也更加有趣,那麼你可以試試WOW.js。

    WOW.js依賴animate.css,所以它支持animate.css多達60多種的動畫效果,能滿足您的各種需求。

    瀏覽器兼容

    IE6、IE7 等老舊瀏覽器不支持CSS3 動畫,所以沒有效果;而wow.js 也使用了querySelectorAll 方法,IE 低版本會報錯。為了達到更好的兼容,最好加一個瀏覽器及版本判斷。

    開始使用WOW.js

    引入文件

    css

    <link rel="stylesheet" href="/ucamc/css/animate.min.css">

    js

    <script src="/ucamc/dist/wow.js"></script>
  • Swfobject.js 崁入Flash SWF

    相信很多人使用Dreamweaver內建的崁入.SWF方式,當你崁入時會自動在你的網站上產生許多程式碼,弄得你眼花撩亂。而現在有了簡潔又簡單的swfobject.js 輕鬆在網頁上加入Flash SWF,並且若其他人的遊覽器上沒有安裝Flash play則會顯示你崁入flash區塊內的內容,如請連接到flashplay網站下載安裝flashplay外掛才可觀看到動畫之類的話,或是有使用不支援Flash的iphone、ipad的使用者在觀看你的網頁時,一樣的他會顯示崁入Flash區塊內的內容,這時可以在此區塊放張製作成flash的靜態的圖,就不會因為不支援flash而此區塊卻看不見任何的畫面。

    Step1 下載swfobject

    請至此位址下載最新版的swfobject
    之後將swfobject.js放入你的網站資料夾

  • callback()

    回調函數是一個作為參數傳遞給另一個函數的函數,然後在外部函數中調用該函數來完成某種例程或動作。

    callback()簡單的例子:

    function greeting(name) {
      alert('Hello ' + name);
    }
    
    function processUserInput(callback) {
      var name = prompt('Please enter your name.');
      callback(name);
    }
    
    processUserInput(greeting);

    上面的例子是一個同步回調,因為它立即執行。