[App]App Framework Plugins

標籤：style   blog   http   color   io   os   使用   ar   java   

------------------------------------------------------------------------------------------------------------

App Framework - 查詢選取器庫

App Framework 是一個異常快速的查詢選取器庫，從一開始就是針對行動裝置而建。識別早期已經存在的像jQuery*和ZeptoJS*架構制定的基礎原理，我們確定了加速效能的方式，只實現必要的API。我們目前為含jQuery*相容文法的App Framework支援超過60+個API，全部列表在這裡。

（http://app-framework-software.intel.com/documentation.php#App Framework/af_about）

 

外掛程式

App Framework外掛程式是可重用的JavaScript*代碼塊，來協助增強你的應用。它們可以被用來執行平凡的任務或建立複雜的使用者介面組件。你可以建立兩種類型的外掛程式。

• 不在對象上操作的實用外掛程式
• 在"儲存桶"/元素上操作的外掛程式

如果你已經有了一個使用我們實現了方法的jQuery*外掛程式，你的代碼應相當容易過渡。對大部分，你只需要在IIFE（立即調用的函數運算式）中改變引用從"jQuery"到"jq"。

 

為App Framework建立一個外掛程式

首先，文檔將說明建立外掛程式的基礎結構，接下來示範怎樣建立一個實用的外掛程式。最後本頁將分享如何在"儲存桶"中的元素上面建立一個外掛程式。

 

建立外掛程式第一步是建立一個IIFE（立即調用的函數運算式）並擴充$.fn object. 例如：

(function($){        $.fn.myPlugin=function(){     };})(af)

上面的代碼建立了一個可以使用$().myPlugin()返回對象訪問的簡單方法。當在外掛程式裡操作時，這裡有一些提示需要記住。

• JavaScript*變數"this"將變成主要的App Framework對象。
• 要啟用鏈式，外掛程式必須返回"this"。

 

下一步，這裡有一個不在對象上操作來製作一個實用外掛程式的例子。

(function($){        $.foo=function(){        alert("bar");    };})(af)

調用$.foo()來訪問這個方法。一旦它被執行，將彈出文本"bar"。這個外掛程式可以連結。這裡有一個例子，怎樣寫一個方法來連結它自己並計算在連結中一個本地計數器變數的執行數目。

 (function($){        var counter=0;        $.foo=function(){        alert("Counter = "+counter);        counter++;        return this;    };})(af);

當上面簡單的代碼執行了，第一次它將顯示並彈出"Counter = 0"。下一次它執行將顯示並彈出"Counter = 1"，等等。注意"return this"部分，這允許我們連結命令，所以我們可以用$.foo().foo()運行它;

 

最後，這裡有一個在HMTL元素上操作的外掛程式例子。在這個例子中，代碼將擷取文檔中所有元素的innerHTML值 並 在彈出框中顯示。

(function($){        var counter=0;        $.foo=function(){        var str="";        for(var i=0;i<this.length;i++)        {        str+=this[i].innerHTML;        str+=" | ";    }    alert(str);    return this;};})(af)

上面的外掛程式例子通過執行$("div").foo()能夠彈出所有div元素的內容。

這裡有一個更進階的外掛程式。這個外掛程式在你指定的地區中建立一個Google* Maps對象。它緩衝Google Maps對象，所以後來你可以訪問它們。

// @author Ian Maffett    // @copyright App Framework 2012     (function () {    var gmapsLoaded = false; //internal variable to see if the google maps API is available     //We run this on document ready.  It will trigger a gmaps:available event if it‘s ready    // or it will include the google maps script for you    $(document).ready(function () {    if(window["google"]&&google.maps){    $(document).trigger("gmaps:available");    gmapsLoaded = true;    return true;}var gmaps = document.createElement("script");gmaps.src = "http://maps.google.com/maps/api/js?sensor=true&callback=gmapsPluginLoaded";$("head").append(gmaps);window["gmapsPluginLoaded"] = function () {$(document).trigger("gmaps:available");gmapsLoaded = true;}}); //Local cache of the google maps objectsvar mapsCache = {}; //We can invoke this in two ways//If we pass in positions, we create the google maps object//If we do not pass in options, it returns the object// so we can act upon it. $.fn.gmaps = function (opts) {if (this.length == 0) return;if (!opts) return mapsCache[this[0].id];//Special resize eventif(opts=="resize"&&mapsCache[this[0].id]){ return google.maps.event.trigger(mapsCache[this[0].id], "resize");} //loop through the items and create the new gmaps objectfor (var i = 0; i < this.length; i++) {new gmaps(this[i], opts);}};  //This is a local object that gets created from the above.var gmaps = function (elem, opts) {var createMap = function () {if (!opts || Object.keys(opts).length == 0) {opts = {zoom: 8,center: new google.maps.LatLng(40.010787, -76.278076),mapTypeId: google.maps.MapTypeId.ROADMAP}}mapsCache[elem.id] = new google.maps.Map(elem, opts);google.maps.event.trigger(mapsCache[elem.id], ‘resize‘);} //If we try to create a map before it is available//listen to the eventif (!gmapsLoaded) {$(document).one("gmaps:available", function () {createMap()});} else {createMap();}}})(af);

 

@黑眼詩人　<www.chenwei.ws>

譯自：http://app-framework-software.intel.com/documentation.php#App Framework/af_plugins

[App]App Framework Plugins