跳到主要內容

發表文章

目前顯示的是 4月, 2017的文章

JQuery 中使用 Deferred 和 promise

Promise 常用來處理非同步流程,當執行成功時 resolve( ) 處理 .done( ); 失敗時 reject( ) 處理 .fail( );另外當成功執行 .done 之後還可以透過 .then( ) 繼續執行其它的處理,避免過多 CallBack 處理程序而造成 CallBack hell 。範例內容如下,並可參考連結有更詳細的說明 HTML: <button id="rs">ReSolve</button> <button id="rj">Reject</button> JQuery: var def= jQuery. Deferred ( ); $("#rs").click(() => def.resolve( ));     // handle resolve $("#rj").click(() => def.reject( ));       // handle reject var task = def. promise ( ); task.done( ( ) => {alert('Resolve Clicked!');})     // success to handle .done .then( ( ) => {alert('Call again for Resolve!');})   // next when .done finish .fail( ( ) => {alert('Reject Clicked!');})   // fail to handle .fail .always( ( ) => {$("button").prop("disabled", true);});   // here is always to handle without success or fail 參考連結:  http://blog.darkthread.net/post-2016-12-22-js-promise.aspx

ECMAScript中認識到的一些用法

最近看到一些使用 ECMAScript 的使用文章,在這裡做個記錄, 也許幫助自己記憶也能幫助別人(會用到Arrow Function,需要對 Arrow Function 先了解) 1. 建立新物件 & 新陣列的方法 未給值: var Object = new Object( ) 或寫成 var Object = { } var NewArray = new Array( ) 或寫成 var NewArray = [ ] 給值 var Object = {firstName: Scott, lastName: Wang, age: 31, }; var NewArray = [11,22,33,44 ] 2. 函數中未包含參數,但透過 arguments 搞定 var Add = ( ) => { alert(arguments.length); alert(arguments[2];}  // 3 45 Add(23,45,12); 3. 利用陣列當做參數計算 (利用apply ) var Add = ( ) => {  var sum;  for (var i = 0, j = arguments.length; i < j; i++) {         sum += arguments[i]; } Add.apply(null, [2,3,4,5]);  // 14 4. 函式附著到物件上( attach Function) Circulate(Num1, Num2) {    return {        first: Num1,        last:  Num2,        Add: ( ) => { this.first + this.last },        Sub: ( ) => { this.first - this.last }   } } Circulate cc =  Circulate(100, 25) cc.Add( )  // 125 cc.Sub( )  //   75 5. 依上例,利用 prototype 加入新的函數 cc.Multi( )  // Type Error Circu

簡單介紹 Arrow Function

好用的 Javascript 語法介紹給大家,先看看一個範例(將HTML <p> tag 的背景色設成紅色): HTML :    <p>1234567</p> function ChangeColor(obj, clr) {     obj.css('background-color',clr) } JQUERY: $(function(){     ChangeColor($('p'), red); }); 這是正規的寫法,利用 arrow function 則寫成下面: var ChangeColor = (obj, clr) => obj.css('background-color',clr) 這樣看起來是不是簡潔多了呢? 重點就在於 function 改用 => 來代替,只有一個參數時連括號也可省略(這裡用了兩個參數 obj clr 所以不能省哦),底下這個例子是在示範多個回應式,就請大家自請參考領略了 ^^ HTML :    <p id="#p1">1234567</p>    <p id="#p2">ABCDEF</p> JQUERY: var ChangeColor2 = (obj1, obj2) => { obj1.css('background-color',red),  obj2.css('background-color',blue) $(function(){     ChangeColor2($('#p1'), $('#p2')); }); 另外介紹需要回傳值時,要注意到使用  function ( ) => (( ) => "footbar")( ) 回傳 "footbar" 要在 function 前後使用括號,並且在最後使用一個 ( ),整個範例內容如下: HTML : <p>777</p> <div>555<