跳到主要內容

發表文章

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 }   } } C...

簡單介紹 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<...

MIME類型與網頁播放VIDEO

專案中網頁需要播放 *.mp4 格式影片,HTML5 設定很簡單,影片也確定路徑及內容都沒問題,但卻無法播放,最後終於得到教訓 ^^..., 關鍵在於 IIS MIME (Multipurpose Internet Mail Extension) 類型中未加入該項 ,因此設定 IIS MIME 類型選項,並在 副檔名加入 .mp4 , 類型加入 video/mp4  之後  重新啟動 IIS 站台 ,問題立馬解決 ^^ 真是令人興奮。學海無涯,知識永遠都在前面,等待後人不斷的發現進步。

用HTML5 加上 JQuery.data 來做到動態改變背景顏色

最近看到一個小範例利用HTML5 加上 JQuery $.data 來做到動態改變顏色的方式, 覺得可以做個記錄下來,看完後對 $.data 的使用應該更為清楚。 HTML: <div class="color-list" data-color ="#330">改變背景色</div> JQuery: var selector = '.color-list' $(selector).css('background-color',function() {     return $(this).data('color') })

Tab 水平使用心得及效果

網頁中常會用到水平 tab 來排列,滑鼠移到上方時下方會出現一條底線,這是怎麼做到的呢? 讓我們看下去吧.... HTML : <ul> <li><a href="#intro">INTRO</a></li> <li><a href="#">PRO</a></li> <li><a href="#flip-3d">3D-FLIP</a></li> <li><a href="#slide">SLIDE</a></li> <li><a href="#switch">SWITCH</a></li> <li><a href="#water-fill">WATER FILL</a></li> </ul> PS: CSS 中要將 list 中的黑點去掉可用 list-style:none (自己常會忘記.. 那就寫下來吧) SCSS : ul{     list-type:none;    width:500px;    display:flex;   // 利用 flex 水平排列    justify-content:space-between;    // 平均分配空白    li{         a{                text-decoration:none;  //  隱藏底線                &:after{              ...

Base64 加密帶入URL 傳值加號會變空白問題

ASP 中網頁常會用到 GET  方式帶參數傳送資料,最近發現在使用過 Base64 編碼後在目標網頁利用 QueryString 得到的值無法完全解碼,進而發現 '+' 被轉變成為空白,進由保哥 & 黑暗執行緒文章了解如下: URL 傳參數時 '=' , '+'  兩者會被視特殊符號,第一個用來賦值 ( 例: param=abc),而加號則被視為轉換空白符號(例: a b => a+b),之後解碼完再還原成空白。而 Base64 加密後產生的加號若沒有經過必要處理的話,在 QueryString 取值時 Base64 解密完加號也就被還原成空白 @@||| , 解決這個問題利用 HtmlUtility.URLEncode (url) 它會自動幫忙將編碼 '+' 轉換,這樣在做 QueryString 就會得到應該看到的加號而不是空白了。