Soumettre la recherche
Mettre en ligne
Kissy design
•
10 j'aime
•
864 vues
yiming he
Suivre
introduction to kissy design
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 65
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Kissy简介
Kissy简介
jay li
Dive into kissy
Dive into kissy
jay li
Kissy模块化实践
Kissy模块化实践
yiming he
MySQL aio
MySQL aio
zhaolinjnu
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
Intro-to-SeaJS
Intro-to-SeaJS
lifesinger
KISSY Mechanism
KISSY Mechanism
lifesinger
Recommandé
Kissy简介
Kissy简介
jay li
Dive into kissy
Dive into kissy
jay li
Kissy模块化实践
Kissy模块化实践
yiming he
MySQL aio
MySQL aio
zhaolinjnu
用Jquery实现拖拽层
用Jquery实现拖拽层
yiditushe
Backbone js and requirejs
Backbone js and requirejs
Chi-wen Sun
Intro-to-SeaJS
Intro-to-SeaJS
lifesinger
KISSY Mechanism
KISSY Mechanism
lifesinger
KISSY for starter
KISSY for starter
yiming he
Yui3简介
Yui3简介
jay li
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
Node way
Node way
Ethan Zhang
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Ming-Sian Lin
Mysql展示功能与源码对应
Mysql展示功能与源码对应
zhaolinjnu
MySQL快速入门与提高
MySQL快速入门与提高
mysqlpub
ios分享
ios分享
Lucien Li
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
Chu-Siang Lai
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
Hongjian Wang
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
JQuery 学习
JQuery 学习
cssrain
Yui3 初探
Yui3 初探
isnull
iPhone,ios,Object-C基础入门
iPhone,ios,Object-C基础入门
Lucien Li
Mvc
Mvc
tbmallf2e
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
wtxidian
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
Contenu connexe
Tendances
KISSY for starter
KISSY for starter
yiming he
Yui3简介
Yui3简介
jay li
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
Node way
Node way
Ethan Zhang
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
iOS App 開發 -- Storybard 基礎練習、APP 上架、IAP
Ming-Sian Lin
Mysql展示功能与源码对应
Mysql展示功能与源码对应
zhaolinjnu
MySQL快速入门与提高
MySQL快速入门与提高
mysqlpub
ios分享
ios分享
Lucien Li
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
現代 IT 人一定要知道的 Ansible 自動化組態技巧 Ⅱ - Roles & Windows
Chu-Siang Lai
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
Hongjian Wang
Web设计 4 锋利的j_query(进入企业级应用阶段)
Web设计 4 锋利的j_query(进入企业级应用阶段)
ziggear
JQuery 学习
JQuery 学习
cssrain
Yui3 初探
Yui3 初探
isnull
iPhone,ios,Object-C基础入门
iPhone,ios,Object-C基础入门
Lucien Li
Mvc
Mvc
tbmallf2e
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
Tendances
(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 不可不知的事
Similaire à Kissy design
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
wtxidian
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
高粒度模块化的前端开发
高粒度模块化的前端开发
iddcn
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
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
美团前端架构简介
美团前端架构简介
pan weizeng
Js高级技巧
Js高级技巧
fool2fish
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
a glance of Javascript module
a glance of Javascript module
zipeng zhang
July.2011.w3ctech
July.2011.w3ctech
Kai Cui
Uliweb设计分享
Uliweb设计分享
modou li
JdonFramework中文
JdonFramework中文
banq jdon
KISSY Editor Design 2
KISSY Editor Design 2
yiming he
Similaire à 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
Plus de yiming he
kissy 1.5 progress
kissy 1.5 progress
yiming he
kissy at alibaba
kissy at alibaba
yiming he
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
KISSY XTemplate
KISSY XTemplate
yiming he
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
yiming he
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@2013
kissy@2013
yiming he
KISSY 1.3-released
KISSY 1.3-released
yiming he
Simple kissy1.3
Simple kissy1.3
yiming he
Hujs 总结
Hujs 总结
yiming he
Kissy in-progress
Kissy in-progress
yiming he
Kissy dpl-practice
Kissy dpl-practice
yiming he
编辑器设计2
编辑器设计2
yiming he
KISSY Component API Design
KISSY Component API Design
yiming he
Plus de 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
Télécharger maintenant