高粒度模块化的前端开发
模块化
/photos/olaborda/2078050462/sizes/l/in/photostream/
12年3月26日星期一一
模块 Module
可组合、分解和更换的单元 可组成系统的、具有某种确定独立功能的半 自律性的子系统 是较大系统的独立部件 功能、状态与接口反映外部特性，逻辑反映 内部特性
VISUAL Controller
structure
Web Developer
VISUAL structure
Controller
Images from: /gfx/ZMjAxNjg0.html
12年3月26日星期一一
前端模块类型划分
展示
VISUAL
外观
reset.css header.css mod.css
page.css
/*-- HTML --*/ <link href="combobase?files=domain/assets/css/reset.css|domain/assets/ css/header.css|domain/assets/css/mod.css|domain/assets/css/page.css" rel="stylesheet"/>
/view/182267.htm
12年3月26日星期一一
前端设计三大要素
VISUAL
外观
STRUCTURE
结构
CONTROLLER
控制器
12年3月26日星期一一
他们的看法
VISUAL
Designer
structure
Controller
product manager
Less is more
Images from:/png/computer/20071008/png_100RO92007.html
12年3月26日星期一一
Moca资源组织
usage module element moca container layout structure document base
12年3月26日星期一一
传统js模块组织
/*-- HTML --*/ <script src="domain/assets/js/jquery-1.x.js" ></script> <script src="domain/assets/js/common.js" ></script> <script src="domain/assets/js/jquery.ui.x.js" ></script> <script src="domain/assets/js/xx.js" ></script> </head> <body> ... <script> (function(){ //to change world. })(); </script> </body> </html>
Less is more
Images from:/png/computer/20071008/png_100RO92007.html
12年3月26日星期一一
Moca资源组织
usage module element moca container layout structure document base color.less classes.less variables.less reset.less
12年3月26日星期一一
现状 前端的模块化 解决方案 环境配置 性能优化
CHINAFACE前端架构
12年3月26日星期一一
常见的前端模块化
12年3月26日星期一一
传统CSS模块组织
/*-- reset --*/ html,body....{...} /*-- header --*/ #header{...} #body{...} /*-- mod --*/ .mod{ ... } .mod .hd{ ... } .mod .bd{ ... } /*-- login --*/ ＃login-form{...} selector{...}
高粒度模块化
DE
前端开发
蒋吉兵
2012/03/24
FRONT-END MODULAR DEVELOPMENT |
@集冰
12年3月26日星期一一
About Me
蒋吉兵 Eddy or JJB Weibo: @集冰 Email: idd.chiang@ Website:
box/mod/...
布局
layout
结构
ms-grid/grid
框架
文档
full-screen/fixed-screen
核心
12年3月26日星期一一
reset/variables/classes
Moca资源组织
usage module element moca container layout structure document base
解决方案
12年3月26日星期一一
展示模块解决方案
+
Lessphp
12年3月26日星期一一
TEMPLATE
CONTROLLER
VISUAL
应用 模块
应用 模块
page use
block-base
元素
icon/form/ajax/button
模块划分
展示模块 功能模块
Less is more
元件
容器
inline code
parse/exec
a.js b.js
parse/exec
c.js d.js
大量匿名模块不便管理 请求数猛增
parse/exec
e.js
parse/exec
...
12年3月26日星期一一
ChinaFace前端模块化
模块划分
12年3月26日星期一一
文本
模块化
12年3月26日星期一一
功能
STRUCTURE
结构
CONTROLLER
控制器
前端模块分为：展示模块和功能模块
12年3月26日星期一一
前端模块抽离原则
・充分了解产品需求，熟读PRD； ・深度挖掘产品需求，提炼模块； ・从视觉规范中抽离高耦合、高相似的部分； ・模块化业务需求中的重合部分； ・暴露接口实现模块间通讯；
12年3月26日星期一一
Less Less is more
12年3月26日星期一一
依赖与继承
/** * File: module/register.less */ @import "../base/variable"; @import "../element/form-element"; .form-input{ .efInput(220px) } /*-- element/form-element --*/ .efInput(@mWidth:218px,@mHeight:auto,@mSize:14px,@mBorderColor:#d4d4d4){ width:@mWidth; ... ...; background: url('@{imgPath}input-bg.png@{version}') no-repeat; &:focus{ border-color: #a1a1a1; } } Less Less is more
Images from:/png/computer/20071008/png_100RO92007.html
icon-base.less icon-timeline.less
12年3月26日星期一一
Moca语法定义
/*-- base/variables.less --*/ @version: “?v=0.1.1”; @imgPath: “/img/”; /*-- base/color.less --*/ //ColorSystem For ChinaFace @mLink: “#b40000”; /*-- base/classes.less --*/ .ClearFix(){ zoom:1; &:before,&:after{ content: "\0020"; display: block; height: 0; overflow: hidden; } &:after{ clear: both; } }
模块化
/photos/ejpphoto/2314610838/
12年3月26日星期一一
模块化
/photos/decojim/969950876/sizes/o/in/photostream/
12年3月26日星期一一
12年3月26日星期一一
再再进一步
//path1/a.js Mod.define(function(){/*...*/}).require(‘c.js’,‘d.js’);
/*-- HTML --*/ <script src="domain/Seed.js" ></script> </head> <body> ... <script> Mod.require(‘a.js,b.js’).doSomething(function(){ //to do }); </script> </body> </html>
Less is more
