Skip to content

hugohua/pui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#PUI

PUI是拍拍前端的UI组件框架,用于实现页面上的交互效果,同时提供了常用的方法集,用于方便页面上的常用操作。

Pui的核心代码参考了jquery ui widgetGMUunderscorearalejs 的实现方式。在此感谢上述几个框架大牛们!

##why use PUI

写这个框架的目的,是为了从代码层面上规范UI组件代码。让开发者不再关注插件如何生成,抽象了一系列的重复任务。开发者仅需要实现具体的业务逻辑,其他则交给PUI完成。

PUI 解决了大量基础性问题,有助于提高效率,有利于代码重用, 非常适合用来创建有状态的插件。

其核心代码主要参考jQuery UI的实现,其API与jquery ui 基本一致。如果你熟悉jQuery ui的使用,那么相信你会很快熟练掌握PUI

  1. 生成命名空间(如果需要)和属性
  2. 避免在相同元素下widget的多实例化。即同一个dom下只实例化一次,并将插件对象缓存在dom上方便后续调用。
  3. 链式的转发回调插件
  4. 限制私有方法被外界调用

###Getting Started

####创建一个插件

Pui.widget('pp.plugin',{
    _create:function(){
        console.log('hello work');
    }
    //your code
})

调用方法:

$('#ID').plugin();

非常简单吧。

####创建一个页面模块

Pui.add('page',function(p){
    //p是对外接口
    p.init = function(){
        //this指向Pui
        this.aa();
    }
})

//如何访问
Pui.page.init();

###环境依赖

  • git
  • node(包括npm)
  • grunt (npm install -g grunt-cli)
  • bower (npm install -g bower)

API

组件类: Pui.widget

实用方法集:

  • add (模块定义方法)
  • tmpl (模板方法)
  • cookie (提供 cookie 操作方法)
  • localstore (提供 localStorage 操作方法)
  • supports (检测浏览器是否支持css属性)
  • throttle (无视一定时间内所有的调用)
  • debounce (当该函数被调用,wait毫秒后才执行)
  • detector (客户端信息检测)
  • loadAsset (懒加载容器内的资源文件(如:image、iframe))

###feekback 如果您有任何关于PUI的问题,可以通过git issue给我反馈bug,我会尽快解决。

Changelog

  • v0.1 项目创建

Other

My Blog

About

拍拍前端框架。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published