`

求助:用这样的方式写Kissy组件,可行吗?(Kissy推荐的方式是怎样的?)

阅读更多
看了Kissy自带组件的代码,又看了你在D2上的PPT , 看得有些晕(现有组件和D2演讲说说的组件编写方式貌似不同啊).

不清楚Kissy推荐的组件编写风格应该是什么样子的.

希望Kissy能够写一个简单的组件, 作为参考实现(或模版). 并加以说明.
希望达到的效果是:
无论谁来编写Kissy的组件, 大家的代码结构 风格都做到统一, 就好像一个团队开发的一样.
避免当初JQuery组件遇到的问题.

当属Jquery虽然社区繁荣,组件众多. 但是大家各自为政,不同的组件编写的规范和编码风格相去甚远.
为使用和维护带来了很大的麻烦.

希望Kissy在最初就定义好详细的组件编写的规范/约定/风格.


顺便问一下 我的这个编写方式 有什么不妥, 该如何改进 谢谢了


KISSY.app('GOCOM');

GOCOM.add('TextField',function(app){
	var S=KISSY;
	
	function TextField(cfg){
		this.init(cfg);

		this.afterInit();
	}
	GOCOM.TextField=TextField;


        //之前已经定义好父类 GOCOM.Field,下面部分方法从Field中继承而来.

	S.extend(TextField,GOCOM.Field,{

		VERSION : '0.1',

		xtype : 'textfield',
		
		getDefaultConfig : function(){
			return {
				value : '',
				size : 10,
				type : 'text'
			}
		},
		getTemplate : function(cfg){

			var tmpl=[
				'<div id="'+cfg.id+'_box" >',
					'<input id="'+cfg.id+'" ',
						' name="'+cfg.name+'" ',
						' size="'+cfg.size+'" ',
						' type="'+cfg.type+'" ',
						' value="'+cfg.value+'" />',
				'</div>'
			
			];
			return tmpl.join('');
		},

		render : function(tar){

			tar=this.getRenderToEl(tar);
							
			if (!this.rendered && tar){
		
				var html=this.getTemplate(this.getConfig());
				this.boxEl=KISSY.one(KISSY.DOM.create(html));
				
				tar.append(this.boxEl);

				this.el=KISSY.one('input');

				this.initEvent(this.getConfig());
				this.rendered=true;
			}
		}
	
	});

        // 之前已经定义好 GOCOM.Class模块,用来管理类.
	GOCOM.Class.register(TextField.prototype.xtype , TextField);
});




求助 玉伯

分享到:
评论
1 楼 lifesinger 2010-12-29  
这样挺好的,fins 的代码已经很规范^o^

KISSY.app('GOCOM');  只要有一处写了即可。比如:

gocom.js      <--- KISSY.app('GOCOM', { version: xxx, ... })
textfiled.js  <--- GOCOM.add(...)

相关推荐

    更强的自动补全提示:提示补全组件:Kissy Suggest(转)

    NULL 博文链接:https://nopainnogain.iteye.com/blog/837743

    kissy源文件代码

    淘宝发布开源编辑器:...KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件,目前已有 CSS 基础框架、搜索提示 Suggest 和 KISSY Editor 这个富文本编辑器等组件。

    异步上传组件uploader基于kissy

    异步上传组件uploader基于kissy,拥有flash,iframe,html5三种方式

    提示补全组件:Kissy Suggest

    NULL 博文链接:https://leon1509.iteye.com/blog/436009

    淘宝KISSY动画组件SnakeSlider

    KISSY“轮播组件”,用于滚动展示图片,例如:焦点图。 引用了KISSY框架 SnakeSlider是一个可定制复杂动画的轮播组件,支持在切换显示/隐藏切片时分别显示不同动画,基于LayerAnim组件实现动画效果。

    淘宝KISSY前端开发框架

    KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...

    KISSY.Suggest 仿百度、淘宝输入提示补全功能的组件及实例

    KISSY.Suggest 仿百度、淘宝输入提示补全功能的组件及实例!值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    Web常用UI库 kissy.zip

    Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...

    tb-video-player:淘宝视频播放器KISSY组件

    修复一个拼写错误,万万不该,destroy方法在1.4版本以前错误的写成了destory,新版本已经修复并兼容旧版 V1.3 兼容KISSY1.2.0及以下; V1.2 container支持DOM和Node对象; V1.1 增加视频封面配置项; 修复部分bug。 ...

    kissy_editor

    KISSY Editor 是开源项目 KISSY ...KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。

    kissy 框架

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。

    KISSY 1.4.8

    KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架

    KISSY Editor 1.0.0

    YUI RTE – 如果爱上你是场梦境,醒来后叫我如何继续使用? NicEditor – 爱唐装的摇摆,还是牛仔的风采?这是位别致的女孩,很难让人爱或不爱。 百度/QQ/163/白社会编辑器 – 各具特色。 淘宝用过一个很古老的编辑...

    js KISSY框架阿里云滑动下拉导航菜单效果代码

    js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码

    kissy-1.4.8.zip

    kissy-1.4.8.zip,淘宝最新前端开发包

    淘宝宝贝描述编辑器 KISSY Editor 2.0 beta

    这样使用 Gallery组件时, 可以 S.use("gallery/pagination/1.0/", function (S, Pagination) {}); 3) 还有几个注意点: 3.0) gallery-build 打包目录; 3.1) 打包规则: - 各个组件通过各自的 build.xml 统一build 到...

    top:返回顶部的kissy组件

    top版本:1.0.0教程:demo:changelogV1.0.0[!]

    Kissy 15天学会.zip

    Kissy 15天学会.zip欢迎下载!!!

    kissy-xtemplate:用于 KISSY 的独立 XTemplate 编译器

    亲吻xtemplate 用于 KISSY 的独立 XTemplate 编译器用法节点 var XTemplate = require ( 'kissy-xtemplate' ) ;new XTemplate ( ) . compileSync ( 'xxx.xtpl.html' , 'xxx.xtpl.js' ) ; 或使用异步版本: var ...

    snake-slider:一个基于 KISSY 的 javascript 滑块小部件

    SnakeSlider是一个可定制复杂动画的轮播组件,支持在切换显示/隐藏切片时分别显示不同动画,使用组件实现动画效果。 功能(Features) 支持自定义轮播切换动画,可定制任意复杂的动画效果(例如:显示一组顺序播放的...

Global site tag (gtag.js) - Google Analytics