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