＜HTML5 + Docker＞的插件集装箱

  大家都知道，PhoneGap是基于HTML，CSS和JavaScript的跨平台移动App软件框架。例如，它能搭配HTML5来支持Web App的开发，并可发挥本地(Native)设备的功能，包括地理定位、加速器、联系人、声音和振动等。此外，PhoneGap还可以有效管理各种插件(Plugin)，提供给HTML5应用来调用。于是，本文从HTML5跨平台的视角来看Docker、Android与PhoneGap的整合架构设计。让架构师扩大视野，涵盖终端和云平台，以一致的架构设计思维，追求决策未来性，开创产品的不一样生命。

  

例如，一般的语言表达Android的WebView的一段JavaScript语言：

// show.html (JavaScript程序代码)

<input type="button" value="Say hello" onClick="jsShow('Hello Android!')" />

<script type="text/javascript">

    function jsShow(str) {

        IToast.showToast(str);

    }

</script> 

当WebView(含幕后的Webkit里的其它类别)解析(执行)到其指令：

        IToast.showToast(str); 

就会去呼叫一段扩充的(Extended)的Java程序码(或称类别)： 

// myToast.java (Java程序代码)

public class myToast{

        Context mContext;

    myToast(Context c) {

        mContext = c;

    }

    public void showToast(String str) {

        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();

    }

} 

于是，上面的JavaScript程序代码就透过WebView而呼叫到这个showToast()函数了。那么，这两段程序代码之间，又由谁来建立其连结关系呢? 那就依赖另一段程序代码了，就是： 

// myActivity.java

public class myActivity extends Activity {

    @Override

    public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

WebView appView = new WebView(this);

appView.loadUrl("file:///android_asset/www/index.html");

appView.getSettings().setJavaScriptEnabled(true);

 

myToast obj = new myToast();

appView.addJavascriptInterface(obj, "IToast");

appView.loadUrl("file:///android_asset/show.html");

 

setContentView(appView);

    } 

其中的指令：   

    myToast obj = new myToast(); 

就诞生一个myToast类别的对象。接着， 

    appView.addJavascriptInterface(obj, "IToast"); 

就将该对象的参考(Reference)传递给WebView，这建立了WebView与myToast类别(对象)之间的链接关系。让WebView在执行JavaScript程序代码时，可以来呼叫myToast类别里的showToast()函数。首先，以图形表达出来：WebView与Android框架的关系：

    图-12、 WebView是Android框架的一部分

  然后，以图形来表达JavaScript程序代码(即show.html)和myToast类别，如下图：

 再以图形来表达myActivity类别，如下图：

    图-14、 myActivity继承Activity基类

 由myActivity类别来诞生WebView对象，也诞生myToast对象，如下图：

  接着，由myActivity呼叫WebView的addJavascriptInterface()函数，将myToast对象的参考(Reference)传递给WebView对象，这建立了WebView与myToast类别(对象)之间的链接关系。如下图： 

 接着，由myActivity呼叫WebView的loadURL()函数去将show.html载入到WebView里，如下图： 

 建立了链接关系之后，JavaScript的jsShow()函数就能透过WebView而呼叫到myToast的showToast()函数了，如下图： 

  从图里可以看出来，JavaScript模块(即jsShow()函数)与Java模块(即myToast类别)之间的相依性(Dependency)非常高，也就俗称的<高耦合性>，所以很不利于JavaScript模块的跨平台，也连带导致HTML5代码的框平台要求。因而有了PhoneGap框架来化解上述的不利情形。搭配PhoneGap的新架构就如下图所示： 

  由于IPlugin接口只提供单一函数：execute()；使得PhoneGap也只能提供单一函数：exec()。然而，在HTML5_JS里可能有多个函数，例如play()和stop()等。于是，在HTML5_JS里，必须从play()和stop()函数转而呼叫PhoneGap.exec()，然后透过WebView而调用IPlugin接口的execute()函数；最后转而调用myPlugin的mpPlay()和mpStop()函数。其中的接口转换过程，以程序代码表达如下： 

var myProxy=function(){};   

myProxy.prototype.play = function(success, fail, para1, para2){

    return PhoneGap.exec( success, fail,

                'myPlugin',       //java类别名称，注册于plugins.xml中

                'mpPlay',         //在Plugin里用来配对的action名称

                [para1, para2]     //所传递的参数(parameter)，Array结构

    );

};

myProxy.prototype.stop = function(success, fail, para1, para2){

    return PhoneGap.exec( success, fail,

                'myPlugin',       //java类别名称，注册于plugins.xml中

                'mpStop',        //在Plugin里用来配对的action名称

                [para1, para2]     //所传递的参数(parameter)，Array结构

    );

};

PhoneGap.addConstructor(function() {

    PhoneGap.addPlugin('myProxy', new myProxy());

});

   此时，HTML5_JS里面就看不到PhoneGap.exec()函数了，其好处是：一方面让HTML5_JS程序代码比较单纯；另一方面，让HTML5_JS与PhoneGap.exec()两者相依性(Dependency)降低，让HTML5_JS不受制于PhoneGap的框架API。因而HTML5实现了完美的跨平台特性。

 

4、结语

   人们不会期待一辆完整汽车既能在沙滩上跑，也能街道、高山、雪地里跑。