Posts match “ jquery ” tag:

A case study of using jQuery plugin with AngularJS: One Page Nav

坊間的 jQuery plugin + AngularJS 的做法都蠻基本又簡單的(e.g. An approach to use jQuery Plugins with AngularJS)。

實際上真正想要做一個對 jQuery plugin 的完善包裝是相當費工的,最近正好因緣際會之下有個使用 jQuery plugin 的需求,我們就來將這一次包裝成 directive 的過程走一遍吧!

jQuery One Page Nav

這次要包裝的 jQuery plugin 是 jQuery One Page Nav,效果基本上就是提供一個「知道你捲動到哪一個區塊了」的導覽列,同時也提供「捲動到特定區塊」的功能。

效果可以參考它的官方網頁: http://davist11.github.io/jQuery-One-Page-Nav/

Directive: jq-one-page-nav

基本的 directive 包裝就可以讓這個 jQuery plugin 動起來(在基本的情境下),經過一番深思熟慮之後,我決定將這個 directive 叫做 jq-one-page-nav

jq-one-page-nav.js
angular.module('pymaster.jq-one-page-nav', [])

.directive('jqOnePageNav', function ($timeout, $rootScope) {
  return {
    restrict: 'EA',
    scope: {
      items: '=',
      options: '='
    },
    replace: true,
    template: '\
      <div class="jq-one-page-nav">\
        <ul>\
          <li ng-repeat="item in items">\
            <a ng-href="#{{ item.id }}" ng-bind="item.content" title="{{ item.content }}"></a>\
          </li>\
        </ul>\
      </div>\
    ',
    link: function (scope, iElm, iAttrs) {
      $timeout(function () {
        iElm.find('ul').onePageNav(scope.options || {});
      });
    }
  };
});

這邊提供了兩個 attribute 可以傳入,分別是 itemsoptions

參數 功能
items 想要擺在導覽列的連結陣列,單一 item 的內容為 {id: '{HTML ID}', name: '{nav button name}'}
options 對應 jQuery One Page Nav 原本的 options

Code 說明

  • template 寫死 ul>li>a ,因為這是 jQuery One Page Nav 官方期待的 markup 結構
  • 裡面使用 $timeout 的原因是為了確保在 items 傳入後已經正確 compile 出 HTML 才做 jQuery plugin 的 initialization
  • 另外一個使用 $timeout 的原因是 One Page Nav 在 .onePageNav(...) 的當下會去取得各個導覽項目對應的 HTML ID 元素的捲動高度,若是你的 jq-one-page-nav 在 HTML 結構裡擺的 位置/順序 不對,很可能就無法取得正確的捲動高度

改進 1:支援重覆使用

Read on

三個不要再用 jQuery Promise 的理由

Update 2016/04/05 20:27
話說 beta 中的 jQuery 3.0 確定 Promise 的部分會是相容於 Promises/A+,到時候出了正式版本可以開心升級!


其實不要用 jQuery promise 這回事兒,時有所聞,最主要的原因是其實它實作的內容跟外面大部分的 Promise library (Promises/A+)都不一樣。

所以很多人覺得 jQuery 的 Promise 只是名為 Promise 的「某種東西」,並不是真正的 Promise。

想了解詳情可以看一下 2012 年的這篇文章
You're Missing the Point of Promises

然而我一直不以為意。

到這個星期我才切身的實際體會不要用的原因,這邊列出三點,應該是比較容易碰到的情況。

1. 面對靜態結果,$.when() 不會以非同步的方式產出 resolved promise

這個我想應該很多人已經有經驗 XD

舉例如下:

// 期待中,結果會是以 async 的方式取得

function xhrGet(something) {
    if (cache) {
        return $.when(cache);
    }
    return $.get(something);
}

/**
 * 在送出 XHR request 之後清空頁面,取得 response 之後重繪頁面
 * 
 * 沒有 cache - 正常運作
 *   有 cache - 在 `renderPage()` 之後才 `clearPage()`,頁面就沒了
 */
xhrGet(...).then(function (res) {
    renderPage(res);
});
clearPage();

那麼我們實際來確認一下大家的情況,下面用了三家的 library 來做測試:
(其中 Promise 的部分是用 polyfill 的方式,如果你的瀏覽器有原生支援就會用瀏覽器內建的)

Read on

jquery-css-mahoro: 新嘗試的集合

這篇文章並不是特別用來介紹 jquery-css-mahoro,主要在這次的開源過程中,我嘗試加入了一些之前沒有使用過的工具/流程。

本文將會概述一下這次 jquery-css-mahoro 中的新嘗試有哪些,而日後可能會有一些文章稍微深入介紹本次的新嘗試(也可能沒有,我就是懶),請大家拭目以待。

jquery-css-mahoro

不過還是要先來簡介一下這次的開源小物。

jquery-css-mahoro
https://github.com/pc035860/jquery-css-mahoro

是我覺得每次操作 CSS animation 的 class 都很麻煩,進而寫出的小小 jQuery plugin (真心覺得 ngAnimate 超方便)。

它能做的事情就 如 README 裡面所寫

  1. 加上 CSS animation class
  2. CSS animation 開始跑
  3. 移除 CSS animation class

本來我只是把它丟在 某個 gist 裡面,後來發覺這樣要使用還是不太方便,還是需要丟上 NPM;既然要丟上 NPM,不如就找時間來認真的開源一下。

關於命名

現在與 CSS animation 有關的 jQuery plugin 實在太多,大家的名字也都差不多沒什麼識別度,既然這樣我還不如選一個特立獨行一點的,好好地做 SEO 應該還還是會有可見度的啦(吧)。

至於為什麼叫 Mahoro,我想我高中的朋友們比較清楚 w

Read on