[App]App Framework Plugins

浏览数：20 / 时间：2015年06月11日

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

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 objects
var 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 event
if(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 object
for (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 event
if (!gmapsLoaded) {
$(document).one("gmaps:available", function () {
createMap()
});
} else {
createMap();
}
}
})(af);