pan old

pan.js

另一個JS框架

PAN.JS（或P.JS ）是一個輕（<40KO）和簡單的JS框架，可幫助您快速開發結構良好的Web應用程序。

您可以將Web應用程序組織成組件和工具。它帶有一些有用的預製內容。只需在HTML中包含JS文件並開始使用它即可。 P.JS仍在開發中，如果您有任何建議，請不要猶豫。

目錄

• 相容性
• 用法
  • 作為圖書館
  • 作為框架
• 核心類
  • 抽像類
  • 事件發射極課
• 工具
  • 斷點
  • 顏色
  • CSS
  • 探測器
  • GA標籤
  • 鍵盤
  • Konami代碼
  • 老鼠
  • 註冊表
  • resizer
  • 字符串
  • 股票
  • 視口
• 托多
• ChangElog
• 將其重寫在打字稿中。

相容性

P.JS沒有依賴關係（不，您不需要jQuery）。它與所有現代瀏覽器兼容與IE8。
根據所使用的瀏覽器和類，您可能需要SRC/Polyfills文件夾中包含的polyfills。
默認構建包含所有必需的多填充，但您可以使用no-compatibility版本。

用法

使用P.J.有兩種方法
您可以通過實例化工具來將其用作簡單的庫，也可以通過擴展P.JS創建自己的工具和組件來將其用作框架。

作為圖書館（簡單的方式）

• 在您的html中包括構建

 < script src =" ../../builds/pan-0.3.min.js " > </ script >

• 實例化您需要的工具
• 開始使用它們

 var viewport = new P . Tools . Viewport ( ) ;

viewport . on ( 'resize' , function ( width , height )
{
    console . log ( width , height ) ;
} ) ; 

作為一個框架（強大的方式）

根據P.JS類創建自己的工具和組件。您可以將組件放入P.Components對像中，也可以創建自己的名稱空間，例如Foo.Bar.My_Class 。
繼承基於John Resig代碼，並具有一些改進，例如深處合併，Singleton，Defualt選項等。
P.JS以嚴格的模式開發。在您的身上做，並隨時分享您的自定義工具和組件。

• 在您的html中包括構建

 < script src =" ../../builds/pan-0.3.min.js " > </ script >

• 根據P.JS摘要或事件發射機類創建自己的工具和組件（您可能需要將每個類放入其他文件中）

 // Create a class wrapping the all application
P . Components . My_App = P . Core . Abstract . extend (
{
    construct : function ( )
    {
        // Instantiate a sidebar and header
        this . sidebar = new P . Components . My_Sidebar ( { color : 'blue' } ) ;
        this . header  = new P . Components . My_Header ( ) ;
    }
} ) ;

// Create a class for the sidebar
P . Components . My_Sidebar = P . Core . Abstract . extend (
{
    // Default options
    options :
    {
        colors : 'red'
    } ,

    construct : function ( options )
    {
        this . _super ( options ) ;

        this . main = document . querySelector ( 'aside' ) ;

        console . log ( 'Init Sidebar' ) ;
    }
} ) ;

// Create a class for the header
P . Components . My_Header = P . Core . Abstract . extend (
{
    construct : function ( )
    {
        this . main = document . querySelector ( 'header' ) ;

        console . log ( 'Init Header' ) ;
    }
} ) ;

• 發射 ？

 // Let's rock
var my_app = new P . Components . My_App ( ) ;

• 有啤酒嗎？

核心類

核心課程是P.J.的基礎。
每個工具或組件都從這些類中繼承，您的自定義類也應該。

抽像類

P.Core.Abstract是默認類。

• 可以擴展
• 實例化時將調用construct方法
• static屬性將課程視為單身人士。這意味著， new的新型Instiant將正常起作用，但是new的每個下一個Intertiation都會返回第一個Intertiation。
• options屬性是一個實例化時將與選項合併的對象
• 在options中的register屬性將自動將實例化添加到註冊工具中，並將register值作為密鑰添加
• 在方法中調用_super( parameters )將調用父級被壓制方法

擴展 /構造

 // Inherit from Abstract
P . Components . Custom_Class = P . Core . Abstract . extend (
{
    construct : function ( )
    {
        console . log ( 'Welcome to my custom class' ) ;
    }
} ) ;

var custom_class = new P . Components . Custom_Class ( ) ; 

選項（深度合併）

 P . Components . Custom_Class = P . Core . Abstract . extend (
{
    // Options with random deep properties
    options :
    {
        test :
        {
            foo   : 'bar' ,
            lorem : 'ipsum'
        }
    } ,

    // Add options argument
    construct : function ( options )
    {
        // Pass options to _super
        this . _super ( options ) ;

        console . log ( 'Options' , this . options ) ;
    }
} ) ;

// Instantiate by passing different options
var custom_class = new P . Components . Custom_Class ( {
    test :
    {
        lorem : 'dolores'
    }
} ) ; 

靜態 /單例

 // Currently, static functionnality is only used for tools
// It's just a matter of organization, do whatever you want.
P . Tools . Custom_Class = P . Core . Event_Emitter . extend (
{
    // Chose a name never used
    static : 'custom_tool' ,

    construct : function ( )
    {
        // Don't forget the _super
        this . _super ( ) ;

        console . log ( 'Init' ) ;
    }
} ) ;

// 'custom_class' and 'custom_class_again' will share the same instance
// 'construct' will be called only the first time
var custom_class       = new P . Tools . Custom_Class ( ) ,
    custom_class_again = new P . Tools . Custom_Class ( ) ; 

註冊（使用註冊工具）

 // Create any class you'd like
P . Components . Test_Class = P . Core . Abstract . extend ( { } ) ;

// Instantiate and specify the register property in options object
// The value is the key you want to retrieve the instance later
var test_class = new P . Components . Test_Class ( { register : 'my_key' } ) ;

// Instantiate the registry tools and get the test_class using the register key
var registry     = new P . Tools . Registry ( ) ,
    test_class_2 = registry . get ( 'my_key' ) ; 

事件發射極課

P.Core.Event_Emitter擴展了P.Core.Abstract ，並使用額外的事件方法進行提交。

• on ， off和trigger方法
• 多個事件聽
• 事件參數
• 名稱空間
• 自動歸一化事件名稱（ event-name == eventname == event_name ）

默認示例

 // Create a custom component that extends Event_Emitter
P . Components . Custom_Component = P . Core . Event_Emitter . extend (
{
    construct : function ( )
    {
        this . _super ( ) ;

        // Save context
        var that = this ;

        // Interval every seconds
        window . setInterval ( function ( )
        {
            // Trigger event and pass parameters
            that . trigger ( 'event-test' , [ 'test-1' ] ) ;
        } , 1000 ) ;
    }
} ) ;

var custom_component = new P . Components . Custom_Component ( ) ;

// Listen to 'event-text'
custom_component . on ( 'event-test' , function ( value )
{
    // Will log 'text-1' every second
    console . log ( value ) ;
} ) ; 

名稱空間示例

 // Create a custom component that extends Event_Emitter
P . Components . Custom_Component = P . Core . Event_Emitter . extend (
{
    construct : function ( )
    {
        this . _super ( ) ;

        // Save context
        var that = this ;

        // Wait a second
        window . setTimeout ( function ( )
        {
            // Trigger some events
            that . trigger ( 'event-1' , [ 'test-1' ] ) ;
            that . trigger ( 'event-2' , [ 'test-2' ] ) ;
            that . trigger ( 'event-3' , [ 'test-3' ] ) ;
            that . trigger ( 'event-4' , [ 'test-4' ] ) ;
        } ) ;
    }
} ) ;

// Try to instantiate twice but get a common object each time
var custom_component = new P . Components . Custom_Component ( ) ;

// Listen two events
custom_component . on ( 'event-1 event-2' , function ( value )
{
    console . log ( value ) ;
} ) ;

// Stop listening to 'event-1' event
custom_component . off ( 'event-1' ) ;

// Listen to event with namespace
custom_component . on ( 'event-2.foo event-3.bar event-4.bar' , function ( value )
{
    console . log ( value ) ;
} ) ;

// Stop listening on 'event-2' with 'foo' namespace
custom_component . off ( 'event-2.foo' ) ;

// Stop listening on every events with 'bar' namespace
custom_component . off ( '.bar' ) ;

工具

P.JS配備了一些預製工具。每個都是單身人士（靜態）。您可以多次實例化，您將始終獲得第一個實例。

如果需要，您可以擴展這些工具。

• 斷點
• 顏色
• CSS
• 探測器
• GA標籤
• 鍵盤
• Konami代碼
• 老鼠
• 註冊表
• resizer
• 字符串
• 股票
• 視口

斷點

斷點的工作方式有點類似於媒體查詢的寬度和高度。指定一些斷點，並在調整視圖大小時會觸發事件。

請參閱代碼
請參見示例

選項

 {
    breakpoints : [ // Breakpoints
        {
            name  : 'large' ,
            width :
            {
                value    : 960 ,
                extreme  : 'min' ,
                included : false
            }
        } ,
        {
            name  : 'medium' ,
            width :
            {
                value    : 960 ,
                extreme  : 'max' ,
                included : true
            }
        } ,
        {
            name  : 'small' ,
            width :
            {
                value    : 500 ,
                extreme  : 'max' ,
                included : true
            } ,
            height :
            {
                value    : 500 ,
                extreme  : 'max' ,
                included : true
            }
        }
    ]
}

特性

• 所有（數組）每個註冊的斷點
• 活躍的（陣列）活性分子斷點

方法

• 添加
  • breakpoints （對象|數組）添加一個是多個斷點
  • silent （可選，布爾值，默認：true）不應觸發事件
• 消除
  • breakpoints （字符串|數組）刪除一個是多個斷點按名稱
  • silent （可選，布爾值，默認：false）不應觸發事件
• IS_ACTIVE
  • breakpoint （字符串）測試如果斷點是有效的
• match_media
  • condition （字符串）繼續進行經典火柴，但只返回布爾值

事件

• 更新
  • breakpoints （數組）當前活動斷點

顏色

幫助您將字符串轉換為形成良好的顏色。
創建美麗的彩虹。 ？

請參閱代碼
請參見示例

選項

 {
    gradients :
    {
        parse   : true ,          // Automatically parse, looking for text to convert to gradient
        target  : document . body , // Default target when parsing
        classes :
        {
            to_convert : 'gradient-text' ,          // Searched class
            converted  : 'gradient-text-converted' // Converted class
        }
    }
}

特性

• 名稱（對象）歸一化顏色（hexa名稱）

方法

• ANY_TO_RGB ：嘗試將任何內容轉換為RGB對象input （字符串）任何看起來像顏色的任何東西（＃ff0000，＃f00，red，red，{r：1，g：0，b：1}，{h：1，s：1，s：1，l：0.5}）
• 解析：解析目標，以尋找要調整大小的DOM元素。
  • target （可選，DOM元素，默認值：document.body）
  • selector （字符串，默認值：“ to-kealize'）
• get_steps_colors ：返回每個步驟從指定的顏色到另一個步驟
  • start （任何）
  • end （和）
  • count （數字）
  • format （可選，字符串，值： 'rgb' | 'hsl' ，默認值： 'hsl' ）
• RGB_TO_HSL ：從RGB轉換為HSL input （對象）RGB對象
• HSL_TO_RGB ：從HSL轉換為RGB input （對象）HSL對象

事件

沒有任何

CSS

在目標元素上應用CSS，並自動添加前綴。屬性將自動形成。

請參閱代碼
請參見示例

選項

 {
    prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}

特性

沒有任何

方法

• 申請：在目標上應用CSS並添加前綴
  • target （dom element | jQuery）元素以經典的fetcher（例如querySelector或jQuery）檢索
  • 應用values （對象）值
  • prefixes （可選，布爾值|數組）適用於默認前綴或前綴陣列

事件

沒有任何

探測器

提供引擎，瀏覽器，系統和功能等信息。

請參閱代碼
請參見示例

選項

 {
    targets : [ 'html' ] // Add detected informations to targets in array (selector or DOM Elements)
}

特性

• 引擎（對象）
  • ie （編號）
  • gecko （編號）
  • webkit （編號）
  • khtml （編號）
  • opera （編號）
  • version （數字）
• 瀏覽器（對象）
  • ie （編號）
  • firefox （數字）
  • safari （編號）
  • konq （編號）
  • opera （編號）
  • chrome （數字）
  • version （數字）
• 系統（對象）
  • windows （布爾值）
  • mac （布爾）
  • osx （布爾）
  • iphone （布爾）
  • ipod （布爾）
  • ipad （布爾）
  • ios （布爾）
  • blackberry （布爾）
  • android （布爾）
  • opera_mini （布爾）
  • windows_mobile （布爾值）
  • wii （布爾）
  • ps （布爾）
• 功能（對象）
  • touch （布爾）
  • media_query （布爾）

方法

沒有任何

事件

沒有任何

GA標籤

使用當前實例向Google Analytics（分析）發送信息。您必須自己實例化Google Analytics（分析）。

請參閱代碼
請參見示例

選項

 {
    send               : true , // Should send informations
    parse              : true , // Automatically parse
    true_link_duration : 300 ,  // Wait duration before following the link (enough time to be sure that informations have been well stend)
    target  : document . body ,   // Default target when parsing
    classes :
    {
        to_tag : 'tag' ,   // Search class
        tagged : 'tagged' // Tagged class
    } ,
    logs :
    {
        warnings : false , // Log warning
        send     : false  // Log sent informations
    }
}

特性

沒有任何

方法

• 解析：解析目標，以尋找要調整大小的DOM元素。
  • target （可選，DOM元素，默認值：document.body）
  • selector （字符串，默認值：“ to-kealize'）
• 發送：向Google Analytics（分析）發送信息
  • datas （對象）
    • category （任何）
    • action （任何）
    • label （可選，任何）
    • value （可選，任何）
    • unique （可選，字符串）不應多次發送數據（取決於字符串值）

事件

• 發送
  • 數據（數組）已發送數據

鍵盤

鍵盤的方法，屬性和事件親戚

請參閱代碼
請參見示例

選項

沒有任何

特性

• keycode_names （對象）已知的鍵盤
• 唐斯（數組）當前倒下字符（不是鍵盤）

方法

• KEYCODE_TO_CHARACTER ：將鍵代碼轉換為字符
  • input （數字）鍵代碼
• IS_DOWN ：測試當前指定的鍵代碼或字符是否已關閉
  • input （字符串|編號）鍵代碼或字符
• are_down ：測試當前指定的鍵代碼或字符是否已下降
  • inputs （數組）鍵盤和/或字符

事件

• 向下
  • keycode （編號）
  • character （字符串）
• 向上
  • keycode （編號）
  • character （字符串）

Konami代碼

知道您的用戶何時使用Konami Code↑↑↓↓←→←→BA

請參閱代碼
請參見示例

選項

 {
    reset_duration : 1000 , // Time in before reseting
    sequence :             // Sequence to enter
    [
        'up' ,
        'up' ,
        'down' ,
        'down' ,
        'left' ,
        'right' ,
        'left' ,
        'right' ,
        'b' ,
        'a'
    ]
}

特性

沒有任何

方法

沒有任何

事件

• 用過的
• 暫停
  • index （int）超時前進
• 錯誤的
  • index （int）在失敗之前進步

老鼠

鼠標的屬性和事件親戚

請參閱代碼
請參見示例

選項

沒有任何

特性

• 向下（布爾）是鼠標
• 位置（對象）有關光標位置的信息，其自動計算的比率相對於屏幕
• 車輪（對象）最後的車輪信息

方法

沒有任何

事件

• 向下
  • position （對象）鼠標位置信息
  • 鼠標位置下的target （DOM元素）直接元素
  • 如果您不想防止默認事件，只需在回調中返回false
• 向上
  • position （對象）鼠標位置信息
  • 鼠標位置下的target （DOM元素）直接元素
• 移動
  • position （對象）鼠標位置信息
  • 鼠標位置下的target （DOM元素）直接元素
• 車輪
  • wheel （對象）鼠標輪信息
  • 如果您不想防止默認事件，只需在回調中返回false

註冊表

密鑰/值註冊表何時需要存儲變量並在不使用醜陋的全局變量的情況下將其檢索。
您可以將其用於緩存變量。

請參閱代碼
請參見示例

選項

沒有任何

特性

• 項目（數組）每個存儲的物品

方法

• 得到
  • key （字符串）
  • callback （可選，函數）如果未找到指定的密鑰和函數結果的項目返回
• 放
  • key （字符串）
  • value （任何）

事件

• 更新
  • key （字符串）
  • value （任何）

resizer

根據許多可能的選項調整容器內部的元素大小。
可以根據類和容器上的類和屬性自動解析和調整大小。
為了工作，您必須在DOM元素本身上指定以下屬性

• 在容器上
  • data-width | width （可選，數字）
  • data-height | height （可選，數字）
• 在內容上
  • data-width | width （數字）
  • data-height | height （數字）
  • data-fit-type （可選，字符串，值： 'fill' | 'fit' ，默認值： 'fill' ）
  • data-align-x （可選，字符串，值： '左' | 'center' | '右' ，默認值： 'center' ）
  • data-align-y （可選，字符串，值： 'top' | 'center' | '底部' ，默認值： 'center' ）
  • data-rounding （可選，字符串，值： 'ceil' | 'floes' | 'round' | none，默認值： 'ceil' ）

請參閱代碼
請參見示例

選項

 {
    force_style : true ,          // Add 'position' and 'overflow' CSS properties if not set yet
    parse       : true ,          // Automatically parse
    target      : document . body , // Default target when parsing
    auto_resize : true ,          // Resize on browser 'resize' event
    classes     :
    {
        to_resize : 'to-resize' , // Containers searched class (on the container)
        content   : 'content'    // Content class (must be inside container)
    }
}

特性

沒有任何

方法

• 解析：解析目標，以尋找要調整大小的DOM元素。
  • target （可選，DOM元素，默認值：document.body）
  • selector （字符串，默認值：“ to-kealize'）
• 調整大小：調整他的容器內的內容
  • container （DOM元素）
  • content （DOM元素）
  • force_style （可選，布爾值，默認值：true）添加“位置”和“溢出”樣式屬性，如果尚未設置
• resize_all ：調整容器中的每個內容
• get_sizes ：計算和回發送大小以將容器內的內容集中
  • parameters （對象）
    • content_width （編號）
    • content_height （編號）
    • container_width （編號）
    • container_height （編號）
    • fit_type （可選，字符串，默認值：填充，值：填充| fit ）
    • align_x （可選，字符串，默認值：中心，值：左|中心|右）
    • align_y （可選，字符串，默認值：中心，值：頂部|中心|底部）
    • rounding （可選，字符串，默認值： ceil ，value： ceil |地板|圓|無）
  • format （可選，字符串，默認值：兩個，值： cartesian | css ）

事件

沒有任何

字符串

管理字符串的方法

請參閱代碼
請參見示例

選項

沒有任何

特性

沒有任何

方法

• convert_case
  • 需要更改的value （字符串）字符串
  • format （字符串）想要的情況
    • 駱駝
    • 帕斯卡
    • 蛇
    • 短跑
    • 火車
    • 空間
    • 標題
    • 點
    • 削減
    • 後斜線
    • 降低
    • 上
    • Stutlycaps
    • ...（請參閱代碼以獲取完整列表）
• 修剪
  • value （字符串）字符串到修剪
  • characters （字符串）字符修剪
• to_boolean
  • value （字符串）用許多支持的語言巧妙地轉換為布爾值
    • 0
    • 錯誤的
    • nop
    • 尼恩
    • 非
    • ...（請參閱代碼以獲取完整列表）
• to_slug
  • value （字符串）字符串slugify

事件

沒有任何

股票

運行一個觸發每個框架底座上的示例事件的股票。

請參閱代碼
請參見示例

選項

 {
    auto_run : true
}

特性

• 跑步（布爾）是現在正在運行的股票
• 時間（對象）有關時間（MS）的信息
  • start零件何時開始
  • elapsed時間
  • 自上次滴答以來花費delta時間時間
  • current時間

方法

• 重置：重置股票
  • run （布爾）應開始運行計時器
• 運行：運行股票
• 停止：停止股票
• tick ：觸發tick（如果需要手動觸發它）
• 等待：X幀後應用功能
  • frames_count （編號）
  • action （功能）
  • after （可選，布爾值，值： true | false ，默認： true ）應在觸發tick事件後應用功能

事件

• 打鉤
  • time （對象）時間信息
• tick-x
  • time （對象）時間信息

視口

向您提供有關寬度，高度，滾動頂部，滾動左捲軸，滾動delta等信息的信息。
觸發滾動和調整大小的事件。
可以在滾動上禁用懸停以提高性能

請參閱代碼
請參見示例

選項

 {
    disable_hover_on_scroll : false ,                 // Improve performance when scrolling but disable hovers
    initial_triggers        : [ 'resize' , 'scroll' ] // On the next frame, triggers 'resize' then 'resize' events
}

特性

• 頂部| y （數字）視口頂
• 左| x （編號）左側
• 滾動| X （對象）有關滾動的信息
  • delta （對象）
    • top | y （數字）滾動delta top
    • left | x （數字）滾動增量左
  • direction （對象）
    • y （字符串）垂直滾動方向
    • x （字符串）水平滾動方向
• pixel_ratio （編號）像素比

方法

• match_media
  • condition （字符串）繼續進行經典火柴，但只返回布爾值

事件

• 調整大小
  • viewport （對象）
• 滾動
  • viewport （對象）

UTILS

崇高的片段

• 從Utils/Sublime-Snippets/獲得崇高的文本片段/
• 在崇高的文字上，轉到Preferences > Browse Packages...
• 在User/文件夾中的任何位置添加摘要

BC ：PAN課程

 P . Components . Class = P . Core . Abstract . extend (
{
    static  : 'class' ,
    options : { } ,

    construct : function ( options )
    {
        this . _super ( options ) ;


    }
} ) ;

BCS ：PAN類嚴格

 ( function ( )
{
    'use strict' ;

    P . Components . Class = P . Core . Abstract . extend (
    {
        static  : 'class' ,
        options : { } ,

        construct : function ( options )
        {
            this . _super ( options ) ;


        }
    } ) ;
} ) ( ) ;

BFN ：PAN功能

 /**
 * Description
 */
name : function ( options )
{
    var that = this ;

    this . _super ( ) ;


}

BN ：泛新

 new Pan . Namespace . Class ( ) ;

BNC ：PAN新組件

 new Pan . Components . Class ( ) ;

BNT ：PAN新工具

 new Pan . Tools . Class ( ) ; 

托多

• UMD
• NPM
• ️循環錯誤錯誤
• 單位測試
  • 核
  • 斷點
  • 顏色
  • CSS
  • 探測器
  • GA標籤
  • 鍵盤
  • Konami代碼
  • 老鼠
  • 註冊表
  • resizer
  • 字符串
  • 股票
  • 視口
• 駱駝 / pascalcase別名
• 類（創建）
  • 觸碰
  • 故事情節
  • 導航
  • 滾動
  • 圖像
    • 更新Pixel_ratio上的圖像
    • 加載並顯示圖像
  • 加載程序
  • 揭露器
  • 字符串
    • bug convert_case用dashed
  • 時間 /日期
    • formater（自定義格式（喜歡））
    • 當地的
• 課程（更新）
  • 探測器
    • ️ add_detector方法
  • 斷點
    • ️在選項中將類添加到元素/選擇器中
  • resizer
    • ️在圓形時none加
  • 鍵盤
    • ️偵聽指定鍵的事件
    • ️字符到密鑰代碼
  • event_emitter
    • 延期觸發器（可以指定事件）
  • 更好的匹配媒體
    • 多次匹配
    • 寬度和高度的後備
  • GA標籤
    • 用方法“ init（ua_code）”動態添加GA腳本
      • 觸發事件
  • 老鼠
    • 車輪類型檢測
  • 顏色
    • 更好的參數名稱（輸入/輸出）
    • 更好的梯度（多個步驟）
    • 只有一個轉換方法（默認=> rgb）
    • 使用字符串工具
    • 深色方法
    • 合併方法
    • 顏色為組件
  • 註冊表
    • 持久性（localstorage / cookie後備）

ChangElog

0.2.0（2015-11-14）

• 用construct替換init
• 在摘要上添加$屬性
• 將p-添加到默認類
• 修復null選項錯誤
• 添加許可證
• 沒有添加多填充構建
• 在構建之上添加信息
• 更新結構具有更好的範圍和一般的'use strict'
• 添加Konami代碼類
• 添加字符串類
• 在抽像中添加註冊表中的Autosave
• 將瀏覽器類分為視口，斷點和檢測器類
• 將觸發訂單添加到視口
• 將match_breakpoint添加到視口
• 修復no-features類無用於檢測器的類
• 當沒有斷點活動時，請在斷點上修復初始觸發器
• 添加針對檢測器CSS類目標的DOM元素支持
• 添加註冊表中的事件
• 在get_sizes方法上添加format參數（支持“ cartesian”，“ CSS”或“兩者”）
• 僅通過指定事件添加油門
• 添加wait方法

0.1.0（2015-03-10）

init