Submit Search
Upload
Kissy design
•
10 likes
•
864 views
yiming he
Follow
introduction to kissy design
Read less
Read more
Technology
Report
Share
Report
Share
1 of 65
Download now
Download to read offline
Recommended
Kissy简介
Kissy简介
jay li
KISSY简介
Dive into kissy
Dive into kissy
jay li
dive into kissy
Kissy模块化实践
Kissy模块化实践
yiming he
MySQL aio
MySQL aio
zhaolinjnu
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
Backbonejs and RequireJS
Intro-to-SeaJS
Intro-to-SeaJS
lifesinger
Introduction to SeaJS.
KISSY Mechanism
KISSY Mechanism
lifesinger
KISSY 类库构想与实践
Recommended
Kissy简介
Kissy简介
jay li
KISSY简介
Dive into kissy
Dive into kissy
jay li
dive into kissy
Kissy模块化实践
Kissy模块化实践
yiming he
MySQL aio
MySQL aio
zhaolinjnu
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
Backbonejs and RequireJS
Intro-to-SeaJS
Intro-to-SeaJS
lifesinger
Introduction to SeaJS.
KISSY Mechanism
KISSY Mechanism
lifesinger
KISSY 类库构想与实践
KISSY for starter
KISSY for starter
yiming he
Yui3简介
Yui3简介
jay li
YUI3
mixin based component infrastructure
mixin based component infrastructure
yiming he
Banquet 52
Banquet 52
Koubei UED
jQuery源码学习
jQuery源码学习
fangdeng
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
解釋 coServ 的設計觀點,協助網站或是網路應用的開發者能更有效的使用 coServ 的各項功能,並期望 coServ 的開發者能有效縮短原有的開發時程。
Node way
Node way
Ethan Zhang
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Ming-Sian Lin
iOS App 開發 -- Storybard 基礎練習 包含以下主題 1. Tab page 2. Page Control 3. Table 4. Gesture 5. Collection 6. Timer 跟 Thread 7. iAd 跟 IAP
Mysql展示功能与源码对应
Mysql展示功能与源码对应
zhaolinjnu
Mysql客户端的一些展示命令与源码 Mysqld服务端的展示命令与源码 Mysql复制状态信息的查看命令与源码 Innodb monitor信息展示与源码
MySQL快速入门与提高
MySQL快速入门与提高
mysqlpub
MySQL快速入门与提高的经典文档。
ios分享
ios分享
Lucien Li
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
Chu-Siang Lai
> Mirror from https://speakerdeck.com/chusiang/xian-dai-it-ren-ding-yao-zhi-dao-de-ansible-zi-dong-hua-zu-tai-ji-qiao-ii-roles-and-windows Ansible 是個與 Puppet, Salt, Chef 並列的 Infrastructure as Code 組態設定工具,其簡單易用的特性讓人愛不釋手,在 DevOps 界更佔有一席之地。 本次凍仁將會帶領大家深入了解 Ansible Role, 怎麼用 Ansible 管 Windows 和實戰經驗分享,相信有了 Ansible 我們都可以提早下班了 (笑)。 * Record: https://youtu.be/6DmrBbWoQ9c
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
Hongjian Wang
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
JQuery 学习
JQuery 学习
cssrain
jquery,jquery学习,jquery笔记
Yui3 初探
Yui3 初探
isnull
iPhone,ios,Object-C基础入门
iPhone,ios,Object-C基础入门
Lucien Li
Object-C基础快速入门
Mvc
Mvc
tbmallf2e
MVC
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
8/30 在 KSDG 分享的內容。除了說明何謂模組之外,也介紹 node.js 從初學開始要進階時所要了解的幾個重點。
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
wtxidian
jEngine是基于Fdev4搭建的一套前端应用框架,致力于从框架的层面解决性能提升、模块化编程、异常监控等前端开发过程中经常遇到的问题,以帮助我们打造出高性能、模块化、可监控的前端应用架构。
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
More Related Content
What's hot
KISSY for starter
KISSY for starter
yiming he
Yui3简介
Yui3简介
jay li
YUI3
mixin based component infrastructure
mixin based component infrastructure
yiming he
Banquet 52
Banquet 52
Koubei UED
jQuery源码学习
jQuery源码学习
fangdeng
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
解釋 coServ 的設計觀點,協助網站或是網路應用的開發者能更有效的使用 coServ 的各項功能,並期望 coServ 的開發者能有效縮短原有的開發時程。
Node way
Node way
Ethan Zhang
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Ming-Sian Lin
iOS App 開發 -- Storybard 基礎練習 包含以下主題 1. Tab page 2. Page Control 3. Table 4. Gesture 5. Collection 6. Timer 跟 Thread 7. iAd 跟 IAP
Mysql展示功能与源码对应
Mysql展示功能与源码对应
zhaolinjnu
Mysql客户端的一些展示命令与源码 Mysqld服务端的展示命令与源码 Mysql复制状态信息的查看命令与源码 Innodb monitor信息展示与源码
MySQL快速入门与提高
MySQL快速入门与提高
mysqlpub
MySQL快速入门与提高的经典文档。
ios分享
ios分享
Lucien Li
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
Chu-Siang Lai
> Mirror from https://speakerdeck.com/chusiang/xian-dai-it-ren-ding-yao-zhi-dao-de-ansible-zi-dong-hua-zu-tai-ji-qiao-ii-roles-and-windows Ansible 是個與 Puppet, Salt, Chef 並列的 Infrastructure as Code 組態設定工具,其簡單易用的特性讓人愛不釋手,在 DevOps 界更佔有一席之地。 本次凍仁將會帶領大家深入了解 Ansible Role, 怎麼用 Ansible 管 Windows 和實戰經驗分享,相信有了 Ansible 我們都可以提早下班了 (笑)。 * Record: https://youtu.be/6DmrBbWoQ9c
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
Hongjian Wang
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
JQuery 学习
JQuery 学习
cssrain
jquery,jquery学习,jquery笔记
Yui3 初探
Yui3 初探
isnull
iPhone,ios,Object-C基础入门
iPhone,ios,Object-C基础入门
Lucien Li
Object-C基础快速入门
Mvc
Mvc
tbmallf2e
MVC
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
8/30 在 KSDG 分享的內容。除了說明何謂模組之外,也介紹 node.js 從初學開始要進階時所要了解的幾個重點。
What's hot
(19)
KISSY for starter
KISSY for starter
Yui3简介
Yui3简介
mixin based component infrastructure
mixin based component infrastructure
Banquet 52
Banquet 52
jQuery源码学习
jQuery源码学习
不一樣的Web server... coServ
不一樣的Web server... coServ
Node way
Node way
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Mysql展示功能与源码对应
Mysql展示功能与源码对应
MySQL快速入门与提高
MySQL快速入门与提高
ios分享
ios分享
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
JQuery 学习
JQuery 学习
Yui3 初探
Yui3 初探
iPhone,ios,Object-C基础入门
iPhone,ios,Object-C基础入门
Mvc
Mvc
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Similar to Kissy design
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
wtxidian
jEngine是基于Fdev4搭建的一套前端应用框架,致力于从框架的层面解决性能提升、模块化编程、异常监控等前端开发过程中经常遇到的问题,以帮助我们打造出高性能、模块化、可监控的前端应用架构。
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
高粒度模块化的前端开发
高粒度模块化的前端开发
iddcn
介绍模块化前端开发的实践过程,包括模块的划分、组织、继承、调用。介绍Moca和EVA框架在前端模块化开发过程中的作用以及优化手段;另外还介绍了ChinaFace.com前端团队架构
Kissy component model
Kissy component model
yiming he
Javascript primer plus
Javascript primer plus
Dongxu Yao
旺铺前端设计和实现
旺铺前端设计和实现
hua qiu
D2-ETao-show
D2-ETao-show
leneli
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
在北京 2012/9/9 所举办的 SDCC 分享「模块加载策略」
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
美团前端架构简介
美团前端架构简介
pan weizeng
Js高级技巧
Js高级技巧
fool2fish
本课程从规范的角度来出发来展示JS语言的全景图及其发展趋势。 课程并不打算让学员陷入那些让人抓狂的浏览器兼容性细节问题,将目光聚焦到重要的概念上,部分内容通过与JAVA的比较让学员有较深入的理解,并为这些功能点准备了充分的demo。
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
「關於 JavaScript 品質,我想說的是...」於 JSDC.tw 2013
a glance of Javascript module
a glance of Javascript module
zipeng zhang
CJS Module AMD UMD ES harmony
July.2011.w3ctech
July.2011.w3ctech
Kai Cui
Uliweb设计分享
Uliweb设计分享
modou li
介绍Uliweb近况及一些设计思路
JdonFramework中文
JdonFramework中文
banq jdon
JdonFramework是一个领域驱动设计框架,用以支持开发Evans DDD的Java应用。实现Domain Model + in-memory + DCI + Event Sourcing。
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
KISSY Editor Design 2 For D2 2012
Similar to Kissy design
(20)
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
高粒度模块化的前端开发
高粒度模块化的前端开发
Kissy component model
Kissy component model
Javascript primer plus
Javascript primer plus
旺铺前端设计和实现
旺铺前端设计和实现
D2-ETao-show
D2-ETao-show
Spring 2.x 中文
Spring 2.x 中文
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
美团前端架构简介
美团前端架构简介
Js高级技巧
Js高级技巧
JavaScript Code Quality
JavaScript Code Quality
a glance of Javascript module
a glance of Javascript module
July.2011.w3ctech
July.2011.w3ctech
Uliweb设计分享
Uliweb设计分享
JdonFramework中文
JdonFramework中文
KISSY Editor Design 2
KISSY Editor Design 2
More from yiming he
kissy 1.5 progress
kissy 1.5 progress
yiming he
progress about kissy 1.5 (kissy5)
kissy at alibaba
kissy at alibaba
yiming he
a share for college students
kissy modularization part2
kissy modularization part2
yiming he
kissy modularization part1
kissy modularization part1
yiming he
KISSY @ 2013-2
KISSY @ 2013-2
yiming he
KISSY 1.4.0 released
KISSY 1.4.0 released
yiming he
callSuper in kissy
callSuper in kissy
yiming he
implement super in KISSY
KISSY XTemplate
KISSY XTemplate
yiming he
Introduction to KISSY XTemplate
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
yiming he
Introduction to kissy for adc.alibabatech.org
Kissy component system
Kissy component system
yiming he
KISSY@2013.05
KISSY@2013.05
yiming he
kissy@2013.03
kissy@2013.03
yiming he
kissy
kissy@2013
kissy@2013
yiming he
kissy
KISSY 1.3-released
KISSY 1.3-released
yiming he
KISSY 1.3.0 released
Simple kissy1.3
Simple kissy1.3
yiming he
Hujs 总结
Hujs 总结
yiming he
Kissy in-progress
Kissy in-progress
yiming he
one company
Kissy dpl-practice
Kissy dpl-practice
yiming he
编辑器设计2
编辑器设计2
yiming he
KISSY Component API Design
KISSY Component API Design
yiming he
More from yiming he
(20)
kissy 1.5 progress
kissy 1.5 progress
kissy at alibaba
kissy at alibaba
kissy modularization part2
kissy modularization part2
kissy modularization part1
kissy modularization part1
KISSY @ 2013-2
KISSY @ 2013-2
KISSY 1.4.0 released
KISSY 1.4.0 released
callSuper in kissy
callSuper in kissy
KISSY XTemplate
KISSY XTemplate
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
Kissy component system
Kissy component system
KISSY@2013.05
KISSY@2013.05
kissy@2013.03
kissy@2013.03
kissy@2013
kissy@2013
KISSY 1.3-released
KISSY 1.3-released
Simple kissy1.3
Simple kissy1.3
Hujs 总结
Hujs 总结
Kissy in-progress
Kissy in-progress
Kissy dpl-practice
Kissy dpl-practice
编辑器设计2
编辑器设计2
KISSY Component API Design
KISSY Component API Design
Kissy design
1.
---剖析 kissy 设计思想
承玉@taobao
2.
3.
Closure library
4.
5.
KISSY
6.
Kissy 总体介绍 Kissy 核心 Kissy 模块化机制 Kissy 组件模型 Kissy 相关工具与第三方框架 Kissy 展望
7.
Kissy on github
8.
9.
•Suggest component
•Overlay •Editor •… •Dom core •Event •Anim •… •kernel seed •web •loader
10.
核心
11.
组件:tab,slider,overlay,imagezoom …
12.
自动补全 – suggest
13.
Kissy editor : 编辑器
14.
Core {dom/event/anim/ajax…} Web.js
kissy.js Lang.js Loader.js seed
15.
独立于环境,可运行于任意宿主环境 客户端 Browser 服务器端 Nodejs,命令行自动化测试
16.
客户端浏览器环境常用方法
17.
浏览器环境与nodejs环境 add : 模块定义 use
:动态加载模块与使用
18.
Taobao 首页示例 模块化思想 前端代码的演变 Kissy 模块化
19.
20.
21.
每个模块控制自身区域的交互与业务逻辑 http://a.tbcdn.cn/?? s/kissy/1.1.6/switchable/switchable-pkg-min.js, s/kissy/1.1.6/suggest/suggest-pkg-min.js, s/kissy/1.1.6/datalazyload/datalazyload-pkg-min.js, s/kissy/1.1.3/flash/flash-pkg-min.js, p/fp/2011a/expressway/profile-min.js, p/fp/2011a/header/header-min.js, p/fp/2011a/attraction/attraction-min.js, p/fp/2011a/expressway/expressway-min.js, p/fp/2011a/category/category-min.js, p/fp/2011a/category/sub-promotion-min.js, p/fp/2011a/guide/alimama-ecpm-min.js, p/fp/2010c/js/fp-hubble-monitor-min.js, p/fp/2011a/hotsale/p4p-min.js, p/fp/2011a/footer/footer-min.js?t=20110322.js
22.
KISSY
Biz mod mod Biz mod KISSY mod Page logic KISSY
23.
一种将系统分离成独立功能部分的方法 ◦ 函数分割成独立功能组 ◦ 使用面向对象来描述模块接口 ◦ 通过使用工业标准达到系统的透明可扩展 ◦ 缺点:由于模块间的消息通信导致性能受损 ◦ 优点:可维护性,焦点分离
24.
Pascal Erlang Perl Python Ruby php Java c/c++ 同步加载
25.
A.php 模块定义以及实现 ---------------------------main.php require_once("A.php"); //use A 使用 require_once 载入,防止重复 配置 include_path 定义查找路径 没有离线编译过程,引擎动态优化
26.
A.java/A.py 模块定义实现 -----------------main.java/main.py import A; //use A import 引用其他模块 classpath/sys.path 定义模块路径,自动补全后缀名 查找对应模块文件 Java 只用类来来实现模块编程,没有合并过程 (jar?),只有压缩过程(编译为紧凑的class/pyc)
27.
28.
<body onload=“init()”> <a
href=“#” onclick=“” color=“red”> Click </a> </body>
29.
脚本,标签,样式分离 <body> <a class=„go‟id=„act‟> click me </a> <script> window.onload=function(){}; var a=document.getElementById(„go‟); a.onclick=function(){}; </script> </body>
30.
外部脚本,全局勿扰,闭包 ----------y.html <body> <a class=„go‟>click<a> <script src=„xx.js‟></script> </body> -------xx.js (function(){})();
31.
动态并行加载,前端模块依赖,自动压缩打包 Labjs : script loader Yui3 : module loader Closure library : module program
32.
不需要静态引入外部脚本 <script>
$LABjs .script(“a.js”) .script(“b.js”) .wait() .script(“c.js”); </script>
33.
利用 function wrapper 分离 load , execute ,引入模块概念 模块定义: YUI.add(“module1”,function(S){ S.Module1=function(){}; }); 模块注册 YUI.add({module1:{ Fullpath:”xxx.js” }}); 模块使用 YUI().use(“module1”,function(S){ //use S.Module1 });
34.
Commonjs/module 规范? <script src='module.js' data-main='init'> </script>
35.
原则 ◦ 内聚性 ◦ 松耦合 ◦ 零重复 ◦ 封装 ◦ 可测试性 ◦ 可读性 ◦ 单一职责 模块解耦与焦点分离
36.
KISSY.add(“dom”,function(){
KISSY.DOM ={ addClass:function(){} }; }); 直接返回值 KISSY.add(“dom”,function(KISSY){ return { addClass:function(){} }; });
37.
KISSY.add(“event-target”,function(){ KISSY.Event.Target
= function(){}; }); 命名空间精简 : KISSY.add(“event/target”,function(){ var EventTarget = function(){} return EventTarget; });
38.
根据文件系统确定模块名字 event / base.js : KISSY.add(function(){}); 就表示模块 event/base
39.
包与路径约定,批量注册模块集合 S.config({ packages:[{ name:‟m1‟, path:”http://xx.com/” }] }); S.use(“m1/base”)->http://xx.com/m1/base.js
40.
定义模块 KISSY.add(“xx”, function(S,DOM){ },{ requires:[“dom”] });
41.
使用模块: S.use(“dom”,function (S,DOM){ //use DOM });
42.
Module compiler : 根据应用打包最紧凑的框架库
43.
组件 == 模块集合 淘宝组件开发所经历的阶段介绍 Suggest->Switchable->overlay->menu
44.
代表: Suggest
45.
//默认配置 var defaultConfig={}; function Suggest(config){ S.mix(config,defaultConfig,false); //初始化 } //功能 S.augment(Suggest,EventTarget,{});
46.
单类,单文件,单模块 逻辑 (数据,控制,渲染)集中 维护性不佳
47.
代表:Switchable
48.
49.
总体逻辑分离为几个模块文件. 单个模块逻辑功能(数据,控制,渲染)集中. 分离机制不能被其他组件公用,仅适合自身.
50.
代表:Overlay using UIBase
51.
var Component=UIBase.create(Parent,['MixComponent'],{ initializer:function(){}, _uiSetX:function(){}, renderUI:function(){}, bindUI:function(){}, destructor:function(){} },{ ATTRS:{ x:{} }, HTML_PARSER:{ yEl:".cls" } });
52.
完善的属性管理机制 生命周期管理 mixin 支持的基础框架 Refer: http://goo.gl/sgvXP
53.
代表:menu,menubutton Component , MVC 分离
54.
55.
基于阶段3发展而来 根据 MVC 逻辑模块分离 Render : 渲染逻辑 ModelControl: 数据与控制逻辑
56.
单元测试框架 Build 构建工具 文档生成工具
57.
Behavior-driven development framework describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); }); });
58.
59.
60.
Sphinx : 半自动化文档工具 Cheers for a great tool that actually makes programmers want to write documentation!
61.
62.
基于kissy独
立开源项目 Components 电子商务组件 库 Kissy 核心
63.
64.
Kissyteam.github.com
65.
Gtalk/email:yiminghe@gmail.com Blog: http://yiminghe.javaeye.com
Download now