詳細內容

分類: Javascript

發佈: 29 十一月 2018

建立: 29 十一月 2018

點擊數: 73

使用Javascript

最流行的答案是沒有jQuery的解決方案：

該Node.contains()方法返回一個Boolean值，該值指示節點是否是給定節點的後代，即節點本身，其直接子節點之一（childNodes），子節點直接子節點之一等等。

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

閱讀全文: 如何使用javascript、jQuery當點擊DIV區塊外部背景將其DIV隱藏

Comment

詳細內容

分類: Javascript

發佈: 05 十月 2018

建立: 05 十月 2018

點擊數: 322

簡單來說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'));

閱讀全文: 如何應用React + Redux + Thunk伺服器獲取資料範例ajax、axios

Comment

詳細內容

分類: 資訊筆記

發佈: 28 十一月 2018

建立: 28 十一月 2018

點擊數: 81

VSCode中的代碼格式通過以下快捷方式提供：

• 在Windows Shift+ Alt+上F
• 在Mac Shift+ Option+上F
• 在Ubuntu Ctrl+ Shift+上I

閱讀全文: 如何在VSCode中格式化代碼自動排版快捷鍵

Comment

詳細內容

分類: Javascript

發佈: 20 九月 2018

建立: 20 九月 2018

點擊數: 457

Javascript table 轉 Excel檔案

讀取HTML table 將document.write寫入檔案

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
    var textRange; var j=0;
    tab = document.getElementById('headerTable'); // id of table

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
        //tab_text=tab_text+"</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
    {
        txtArea1.document.open("txt/html","replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus(); 
        sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
    }  
    else                 //other browser not tested on IE 11
        sa = window.open('data:application/vnd.ms-excel,' +　encodeURIComponent(tab_text));  

    return (sa);
} 

閱讀全文: Javascript HTML表單table輸出Excel

Comment