澳门葡京手机网站:组件化的Web王国,探讨Web组件化的实现

致大家必将组件化的Web

2015/11/25 · HTML5 · 1
评论 ·
组件化

原文出处:
AlloyTeam   

那篇作品将从两年前的四次技术争议起来。争执的聚焦就是下图的两个目录分层结构。作者说按模块划分好,他说您傻逼啊,当然是按能源划分。

澳门葡京手机网站 1 《=》澳门葡京手机网站 2

”按模块划分“目录结构,把近年来模块下的装有逻辑和财富都放一块了,那对于两个人独立开发和珍贵个人模块不是很行吗?当然了,那争辩的结果是自家宝宝地改回主流的”按财富划分“的目录结构。因为,没有做到JS模块化和能源模块化,仅仅物理地点上的模块划分是平素不意义的,只会大增创设的老本而已。

就算如此他说得好有道理笔者无言以对,可是自己心不甘,等待他近日端组件化成熟了,再来世界一战!

如今日就是本身再三正义的生活!只是那时候不胜跟你撕逼的人不在。

模块化的供不应求

模块一般指可以单独拆分且通用的代码单元。由于JavaScript语言本人并未内置的模块机制(ES6有了!!),大家一般会动用CMD或ADM建立起模块机制。将来多数略带大型一点的系列,都会使用requirejs恐怕seajs来兑现JS的模块化。几人分工合营开发,其各自定义依赖和暴光接口,维护成效模块间独立性,对于项目的支出效能和品种前期扩张和掩护,都以是有很大的救助功用。

但,麻烦大家不怎么略读一下底下的代码

JavaScript

require([
‘Tmpl!../tmpl/list.html’,’lib/qqapi’,’module/position’,’module/refresh’,’module/page’,’module/net’
], function(listTmpl, QQapi, Position, Refresh, Page, NET){ var foo =
”, bar = []; QQapi.report(); Position.getLocaiton(function(data){
//… }); var init = function(){ bind();
NET.get(‘/cgi-bin/xxx/xxx’,function(data){ renderA(data.banner);
renderB(data.list); }); }; var processData = function(){ }; var bind =
function(){ }; var renderA = function(){ }; var renderB =
function(data){ listTmpl.render(‘#listContent’,processData(data)); };
var refresh = function(){ Page.refresh(); }; // app start init(); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
require([
    ‘Tmpl!../tmpl/list.html’,’lib/qqapi’,’module/position’,’module/refresh’,’module/page’,’module/net’
], function(listTmpl, QQapi, Position, Refresh, Page, NET){
    var foo = ”,
        bar = [];
    QQapi.report();
    Position.getLocaiton(function(data){
        //…
    });
    var init = function(){
        bind();
        NET.get(‘/cgi-bin/xxx/xxx’,function(data){
            renderA(data.banner);
            renderB(data.list);
        });
    };
    var processData = function(){
    };
    var bind = function(){
    };
    var renderA = function(){
    };
    var renderB = function(data){
        listTmpl.render(‘#listContent’,processData(data));
    };
    var refresh = function(){
        Page.refresh();
    };
    // app start
    init();
});

地点是有血有肉有些页面的主js,已经封装了像Position,NET,Refresh等成效模块,但页面的主逻辑依旧是”面向进度“的代码结构。所谓面向进程,是指依据页面的渲染进程来编排代码结构。像:init
-> getData -> processData -> bindevent -> report -> xxx

方法之间线性跳转,你大约也能感受那样代码弊端。随着页面逻辑更是复杂,那条”进程线“也会越加长,并且一发绕。加之紧缺专业约束,其余种类成员依照各自需求,在”进程线“加插各自逻辑,最终这一个页面的逻辑变得难以维护。

澳门葡京手机网站 3

付出须求小心翼翼,生怕影响“进度线”后边平常逻辑。并且每五回加插或修改都是bug泛滥,无不令产品有关人口无不忧心如焚。

 页面结构模块化

据悉上边的面向进度的难题,行业内也有这几个消除方案,而作者辈协会也总计出一套成熟的化解方案:Abstractjs,页面结构模块化。大家可以把大家的页面想象为多少个乐高机器人,要求分化零件组装,如下图,固然页面划分为tabContainer,listContainer和imgsContainer多少个模块。最后把这一个模块add到结尾的pageModel里面,最后采纳rock方法让页面运转起来。

澳门葡京手机网站 4
澳门葡京手机网站:组件化的Web王国,探讨Web组件化的实现。(原经过线示例图)

澳门葡京手机网站 5
(页面结构化示例图)

下边是伪代码的兑现

JavaScript

require([
‘Tmpl!../tmpl/list.html’,’Tmpl!../tmpl/imgs.html’,’lib/qqapi’,’module/refresh’,’module/page’
], function(listTmpl, imgsTmpl, QQapi, Refresh, Page ){ var
tabContainer = new RenderModel({ renderContainer: ‘#tabWrap’, data: {},
renderTmpl: “<li soda-repeat=’item in
data.tabs’>{{item}}</li>”, event: function(){ // tab’s event }
}); var listContainer = new ScrollModel({ scrollEl: $.os.ios ?
$(‘#Page’) : window, renderContainer: ‘#listWrap’, renderTmpl:
listTmpl, cgiName: ‘/cgi-bin/index-list?num=1’, processData:
function(data) { //… }, event: function(){ // listElement’s event },
error: function(data) { Page.show(‘数据重临至极[‘ + data.retcode +
‘]’); } }); var imgsContainer = new renderModel({ renderContainer:
‘#imgsWrap’, renderTmpl: listTmpl, cgiName: ‘/cgi-bin/getPics’,
processData: function(data) { //… }, event: function(){ //
imgsElement’s event }, complete: function(data) { QQapi.report(); } });
var page = new PageModel();
page.add([tabContainer,listContainer,imgsContainer]); page.rock(); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
require([
    ‘Tmpl!../tmpl/list.html’,’Tmpl!../tmpl/imgs.html’,’lib/qqapi’,’module/refresh’,’module/page’
], function(listTmpl, imgsTmpl, QQapi, Refresh, Page ){
 
    var tabContainer = new RenderModel({
        renderContainer: ‘#tabWrap’,
        data: {},
        renderTmpl: "<li soda-repeat=’item in data.tabs’>{{item}}</li>",
        event: function(){
            // tab’s event
        }
    });
 
    var listContainer = new ScrollModel({
        scrollEl: $.os.ios ? $(‘#Page’) : window,
        renderContainer: ‘#listWrap’,
        renderTmpl: listTmpl,
        cgiName: ‘/cgi-bin/index-list?num=1’,
        processData: function(data) {
            //…
        },
        event: function(){
            // listElement’s event
        },
        error: function(data) {
            Page.show(‘数据返回异常[‘ + data.retcode + ‘]’);
        }
    });
 
    var imgsContainer = new renderModel({
        renderContainer: ‘#imgsWrap’,
        renderTmpl: listTmpl,
        cgiName: ‘/cgi-bin/getPics’,
        processData: function(data) {
            //…
        },
        event: function(){
            // imgsElement’s event
        },
        complete: function(data) {
           QQapi.report();
        }
    });
 
    var page = new PageModel();
    page.add([tabContainer,listContainer,imgsContainer]);
    page.rock();
 
});

咱俩把这一个常用的呼吁CGI,处理多少,事件绑定,上报,容错处理等一多重逻辑格局,以页面块为单位封装成三个Model模块。

这样的1个虚幻层Model,我们得以清楚地见到该页面块,请求的CGI是怎么样,绑定了什么样风浪,做了什么样上报,出错怎么处理。新增的代码就相应放置在对应的模块上相应的情况方法(preload,process,event,complete…),杜绝了过去的无规则乱增代码的著作。并且,依照不同工作逻辑封装不相同档次的Model,如列表滚动的ScrollModel,滑块功用的SliderModel等等,可以进行中度封装,集中优化。

现行依照Model的页面结构开发,已经包括一点”组件化“的意味。逐个Model都包蕴各自的数额,模板,逻辑。已经算是一个完好无缺的功力单元。但相差真正的WebComponent照旧有一段距离,至少满意不断作者的”理想目录结构“。

 WebComponents 标准

大家回顾一下使用1个datapicker的jquery的插件,所急需的步奏:

  1. 引入插件js

  2. 引入插件所需的css(假设有)

  3. copy 组件的所需的html片段

  4. 丰盛代码触发组件运维

脚下的“组件”基本上只可以落得是有个别意义单元上的集合。他的能源都以松散地分散在两种财富文件中,而且组件成效域揭破在全局意义域下,缺乏内聚性很不难就会跟其余零件发生争持,如最简便易行的css命名顶牛。对于那种“组件”,还不如上边的页面结构模块化。

于是乎W3C按耐不住了,制定贰个WebComponents标准,为组件化的前程率领了明路。

上面以较为简单的法门介绍那份正经,力求我们可以高效明白已毕组件化的情节。(对那部分摸底的同校,能够跳过这一小节)

1. <template>模板能力

模板那东西大家最熟识但是了,前年见的较多的沙盘品质大战artTemplate,juicer,tmpl,underscoretemplate等等。而近期又有mustachejs无逻辑模板引擎等新入选手。可是大家有没有想过,这么基础的力量,原生HTML5是不协助的(T_T)。

而前天WebComponent将要提供原生的沙盘能力

XHTML

<template id=”datapcikerTmpl”>
<div>作者是原生的模版</div> </template>

1
2
3
<template id="datapcikerTmpl">
<div>我是原生的模板</div>
</template>

template标签钦定义了myTmpl的模板,须要动用的时候就要innerHTML= document.querySelector('#myTmpl').content;可以看到那么些原生的模版够原始,模板占位符等职能都不曾,对于动态数据渲染模板能力只好自力更新。

2. ShadowDom 封装组件独立的内部结构

ShadowDom可以驾驭为一份有单独功效域的html片段。那几个html片段的CSS环境和主文档隔离的,各自保持内部的独立性。也多亏ShadowDom的独自天性,使得组件化成为了恐怕。

JavaScript

var wrap = document.querySelector(‘#wrap’); var shadow =
wrap.createShadowRoot(); shadow.innerHTML = ‘<p>you can not see me
</p>’

1
2
3
var wrap = document.querySelector(‘#wrap’);
var shadow = wrap.createShadowRoot();
shadow.innerHTML = ‘<p>you can not see me </p>’

在切切实实dom节点上利用createShadowRoot方法即可生成其ShadowDom。如同在整份Html的屋子里面,新建了三个shadow的房间。房间外的人都不知底房间内有哪些,保持shadowDom的独立性。

3. 自定义原生标签

初次接触Angularjs的directive指令效能,设定好组件的逻辑后,2个<Datepicker
/>就能引入整个组件。如此狂炫酷炸碉堡天的作用,实在令人大快人心,跃地三尺。

JavaScript

var tmpl = document.querySelector(‘#datapickerTmpl’); var
datapickerProto = Object.create(HTMLElement.prototype); //
设置把大家模板内容大家的shadowDom datapickerProto.createdCallback =
function() { var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true)); }; var
datapicker = docuemnt.registerElement(‘datapicker’,{ prototype:
datapickerProto });

1
2
3
4
5
6
7
8
9
10
11
12
var tmpl = document.querySelector(‘#datapickerTmpl’);
var datapickerProto = Object.create(HTMLElement.prototype);
 
// 设置把我们模板内容我们的shadowDom
datapickerProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
};
 
var datapicker = docuemnt.registerElement(‘datapicker’,{
    prototype: datapickerProto
});

Object.create形式持续HTMLElement.prototype,得到1个新的prototype。当解析器发现大家在文档中标记它将检查是不是七个名为createdCallback的措施。倘使找到这几个方法它将即时运维它,所以大家把克隆模板的故事情节来创制的ShadowDom。

末尾,registerElement的办法传递大家的prototype来注册自定义标签。

地点的代码起始略显复杂了,把前面五个力量“模板”“shadowDom”结合,形成组件的里边逻辑。最终经过registerElement的方法注册组件。之后方可春风得意地<datapicker></datapicker>的应用。

4. imports搞定组件间的依靠

XHTML

<link rel=”import” href=”datapciker.html”>

1
<link rel="import" href="datapciker.html">

本条类php最常用的html导入效能,HTML原生也能支撑了。

WebComponents标准内容大致到此处,是的,我那里没有何样德姆o,也尚无实践经验分享。由于webComponents新性格,基本上除了高版本的Chrome帮助外,其他浏览器的支撑度甚少。即便有polymer支持牵动webcompoents的库存在,不过polymer自个儿的渴求版本也是极度高(IE10+)。所以明日的台柱并不是她。

我们简要来回想一下WebCompoents的四有的机能:

1 .<template>定义组件的HTML模板能力

  1. Shadow Dom封装组件的内部结构,并且维持其独立性

  2. Custom Element 对外提供组件的标签,完结自定义标签

  3. import化解组件结合和依赖性加载

 组件化实践方案

官方的正式看完了,大家思考一下。一份真正成熟可看重的组件化方案,需求有所的力量。

“资源高内聚”—— 组件财富内部高内聚,组件能源由小编加载控制

“功用域独立”—— 内部结构密封,不与大局或别的零件爆发潜移默化

“自定义标签”—— 定义组件的采取格局

“可相互结合”—— 组件正在有力的地点,组件间组装整合

“接口规范化”—— 组件接口有统一规范,或许是生命周期的保管

私家觉得,模板能力是基础能力,跟是或不是组件化没有强联系,所以并未提议1个大点。

既是是实践,现阶段WebComponent的支撑度还不成熟,不可以看做方案的手段。而除此以外一套以高质量虚拟Dom为切入点的机件框架React,在facebook的造势下,社区取得了大力发展。其余一名骨干Webpack,负责消除组件资源内聚,同时跟React格外切合形成互补。

所以【Webpack】+【React】将会是那套方案的大旨技术。

不领会您未来是“又是react+webpack”感到失望澳门葡京手机网站 6,依旧“太好了是react+webpack”不用再学一次新框架的欢悦澳门葡京手机网站 7。无论怎么着下边的内容不会让您失望的。

一,组件生命周期

澳门葡京手机网站 8

React天生就是强制性组件化的,所以可以从根特性上消除面向进程代码所推动的麻烦。React组件本人有生命周期方法,可以满足“接口规范化”能力点。并且跟“页面结构模块化”的所封装抽离的多少个主意能挨个对应。其余react的jsx自带模板作用,把html页面片直接写在render方法内,组件内聚性特别紧凑。

鉴于React编写的JSX是会先生成虚拟Dom的,要求时机才真的插入到Dom树。使用React必须求通晓组件的生命周期,其生命周期多个处境:

Mount: 插入Dom

Update: 更新Dom

Unmount: 拔出Dom

mount那单词翻译扩充,嵌入等。作者倒是提议“插入”更好领会。插入!拔出!插入!拔出!默念两次,懂了没?别少看黄段子的能力,

澳门葡京手机网站 9

组件状态就是: 插入-> 更新 ->拔出。

下一场每一种组件状态会有三种处理函数,一前一后,will函数和did函数。

componentWillMount()  准备插入前

componentDidlMount()  插入后

componentWillUpdate() 准备更新前

componentDidUpdate()  更新后

componentWillUnmount() 准备拔出前

因为拔出后基本都以贤者形态(小编说的是组件),所以没有DidUnmount这一个办法。

除此以外React别的一个核心:数据模型props和state,对应着也有自个状态方法

getInitialState()     获取开始化state。

getDefaultProps() 获取默许props。对于那么些尚未父组件传递的props,通过该措施设置暗许的props

componentWillReceiveProps()  已插入的零件收到新的props时调用

还有多少个万分情形的处理函数,用于优化处理

shouldComponentUpdate():判断组件是或不是要求update调用

丰硕最重大的render方法,React自己带的艺术刚刚好1三个。对于初学者的话是相比难以消化。但实质上getInitialStatecomponentDidMountrender多个景况方法都能成功一大半组件,不必惧怕。

再次来到组件化的大旨。

一个页面结构模块化的零部件,能独立包装整个组件的进程线

澳门葡京手机网站 10

笔者们换算成React生命周期方法:

澳门葡京手机网站 11

 

零件的情形方法流中,有两点须求新鲜表达:

1,二回渲染:

鉴于React的杜撰Dom天性,组件的render函数不需自个儿触发,依据props和state的变动自个通过差距算法,得出最优的渲染。

请求CGI一般都以异步,所以自然带来三遍渲染。只是空数据渲染的时候,有恐怕会被React优化掉。当数码回来,通过setState,触发三回render

 

2,componentWiillMount与componentDidMount的差别

和大部分React的学科文章不雷同,ajax请求作者提出在威尔Mount的办法内执行,而不是组件初步化成功之后的DidMount。那样能在“空数据渲染”阶段从前请求数据,尽早地回落三遍渲染的时光。

willMount只会履行几次,万分适合做init的事务。

didMount也只会举办四次,并且那时候真实的Dom已经形成,格外适合事件绑定和complete类的逻辑。

 

 二,JSX很丑,可是组件内聚的紧要!

WebComponents的正经之一,须要模板能力。本是觉得是我们耳熟能详的模板能力,但React中的JSX那样的怪物如故令人琢磨纷纭。React还尚未火起来的时候,大家就早已在新浪上狠狠地吐槽了“JSX写的代码那TM的丑”。那实际只是德姆o阶段JSX,等到实战的大型项目中的JSX,包罗多处境多数据多事件的时候,你会发现………….JSX写的代码如故很丑。

澳门葡京手机网站 12
(即使用sublime-babel等插件高亮,逻辑和渲染耦合一起,阅读性还是略差)

缘何我们会认为丑?因为大家已经经对“视图-样式-逻辑”分离的做法潜移默化。

基于维护性和可读性,甚至品质,大家都不提出直接在Dom下面绑定事件或许直接写style属性。我们会在JS写事件代理,在CSS上写上classname,html上的就是清楚的Dom结构。大家很好地维护着MVC的设计方式,一切安好。直到JSX把他们都夹杂在一块儿,所守护的技能栈受到入侵,难免有着抗拒。

 

可是从组件化的目标来看,那种高内聚的做法未尝不可。

下边的代码,从前的“逻辑视图分离”方式,咱们须求去找相应的js文件,相应的event函数体内,找到td-info的class所绑定的风浪。

相对而言起JSX的冲天内聚,全部事件逻辑就是在我jsx文件内,绑定的就是自身的showInfo方法。组件化的性状能及时浮现出来。

(注意:即使写法上我们好像是HTML的内联事件处理器,可是在React底层并不曾实际赋值类似onClick属性,内层如故接纳类似事件代理的法门,高效地维护着事件处理器)

再来看一段style的jsx。其实jsx没有对体制有硬性规定,大家全然可比照此前的定义class的逻辑。任何一段样式都应该用class来定义。在jsx你也全然可以这么做。可是出于组件的独立性,笔者指出部分唯有“四遍性”的体裁直接运用style赋值更好。减少冗余的class。

XHTML

<div className=”list” style={{background: “#ddd”}}> {list_html}
</div>

1
2
3
<div className="list" style={{background: "#ddd"}}>
   {list_html}
</div>

莫不JSX内部有担当繁琐的逻辑样式,可JSX的自定义标签能力,组件的黑盒性立马能体会出来,是还是不是一下子美好了无数。

JavaScript

render: function(){ return ( <div> <Menus
bannerNums={this.state.list.length}></Menus> <TableList
data={this.state.list}></TableList> </div> ); }

1
2
3
4
5
6
7
8
render: function(){
    return (
      <div>
         <Menus bannerNums={this.state.list.length}></Menus>
         <TableList data={this.state.list}></TableList>
      </div>
   );
}

即使如此JSX本质上是为了虚拟Dom而准备的,但那种逻辑和视图中度合一对于组件化未尝不是一件好事。

 

学习完React这些组件化框架后,看看组件化能力点的完结处境

“财富高内聚”—— (33%)  html与js内聚

“效用域独立”—— (2/4)  js的成效域独立

“自定义标签”—— (百分之百)jsx

“可互相结合”—— (一半)  可构成,但缺少可行的加载格局

“接口规范化”—— (百分百)组件生命周期方法

 

Webpack 能源组件化

对此组件化的财富独立性,一般的模块加载工具和营造流程视乎变得吃力。组件化的打造工程化,不再是事先大家常见的,css合二,js合三,而是体验在组件间的依靠于加载关系。webpack正好吻合须要点,一方面填补组件化能力点,另一方资助大家完善组件化的完全营造环境。

率先要说圣元点是,webpack是1个模块加载打包工具,用于管理你的模块能源看重打包难点。那跟我们耳熟能详的requirejs模块加载工具,和grunt/gulp打造工具的定义,多多少少有个别出入又微微雷同。

澳门葡京手机网站 13

率先webpak对于CommonJS与英特尔同时援助,满意大家模块/组件的加载格局。

JavaScript

require(“module”); require(“../file.js”); exports.doStuff = function()
{}; module.exports = someValue;

1
2
3
4
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

JavaScript

define(“mymodule”, [“dep1”, “dep2”], function(d1, d2) { return
someExportedValue; });

1
2
3
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
    return someExportedValue;
});

本来最精锐的,最优异的,当然是模块打包成效。那多亏这一效果,补充了组件化能源器重,以及完整工程化的力量

基于webpack的布署性意见,全体财富都以“模块”,webpack内部贯彻了一套财富加载机制,可以把想css,图片等能源等有依靠关系的“模块”加载。那跟大家使用requirejs那种只有处理js大大差距。而那套加载机制,通过壹个个loader来完结。

 

JavaScript

// webpack.config.js module.exports = { entry: { entry: ‘./index.jsx’,
}, output: { path: __dirname, filename: ‘[name].min.js’ }, module:
{ loaders: [ {test: /\.css$/, loader: ‘style!css’ }, {test:
/\.(jsx|js)?$/, loader: ‘jsx?harmony’, exclude: /node_modules/},
{test: /\.(png|jpg|jpeg)$/, loader: ‘url-loader?limit=10240’} ] } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.config.js
module.exports = {
    entry: {
     entry: ‘./index.jsx’,
    },
    output: {
        path: __dirname,
        filename: ‘[name].min.js’
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: ‘style!css’ },
            {test: /\.(jsx|js)?$/, loader: ‘jsx?harmony’, exclude: /node_modules/},
            {test: /\.(png|jpg|jpeg)$/, loader: ‘url-loader?limit=10240’}
        ]
    }
};

地点一份简单的webpack配置文件,留意loaders的布置,数组内3个object配置为一种模块能源的加载机制。test的正则为协作文件规则,loader的为匹配到文件将由哪些加载器处理,三个电脑之间用相隔,处理顺序从右到左。

 

style!css,css文件通过css-loader(处理css),再到style-loader(inline到html)的加工处理流。

jsx文件通过jsx-loader编译,‘?’开启加载参数,harmony帮助ES6的语法。

图片财富通过url-loader加载器,配置参数limit,控制少于10KB的图形将会base64化。

 财富文件怎样被require?

JavaScript

// 加载组件自个儿css require(‘./slider.css’); // 加载组件器重的模块 var
Clip = require(‘./clipitem.js’); // 加载图片能源 var spinnerImg =
require(‘./loading.png’);

1
2
3
4
5
6
// 加载组件自身css
require(‘./slider.css’);
// 加载组件依赖的模块
var Clip = require(‘./clipitem.js’);
// 加载图片资源
var spinnerImg = require(‘./loading.png’);

在webpack的js文件中大家除了require我们如常的js文件,css和png等静态文件也得以被require进来。大家因此webpack命令,编译之后,看看输出结果什么:

JavaScript

webpackJsonp([0], { /* 0 */ /***/ function(module, exports,
__webpack_require__) { // 加载组件自己css
__webpack_require__(1); // 加载组件正视的模块 var Clip =
__webpack_require__(5); // 加载图片财富 var spinnerImg =
__webpack_require__(6); /***/ }, /* 1 */ /***/
function(module, exports, __webpack_require__) { /***/ }, /* 2
*/ /***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(3)();
exports.push([module.id, “.slider-wrap{\r\n position: relative;\r\n
width: 100%;\r\n margin: 50px;\r\n background:
#fff;\r\n}\r\n\r\n.slider-wrap li{\r\n text-align:
center;\r\n line-height: 20px;\r\n}”, “”]); /***/ }, /* 3 */
/***/ function(module, exports) { /***/ }, /* 4 */ /***/
function(module, exports, __webpack_require__) { /***/ }, /* 5
*/ /***/ function(module, exports) { console.log(‘hello, here is
clipitem.js’) ; /***/ }, /* 6 */ /***/ function(module, exports)
{ module.exports = “data:image/png;base64,iVBORw0KGg……” /***/ }
]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
webpackJsonp([0], {
/* 0 */
/***/ function(module, exports, __webpack_require__) {
          // 加载组件自身css
          __webpack_require__(1);
          // 加载组件依赖的模块
          var Clip = __webpack_require__(5);
          // 加载图片资源
          var spinnerImg = __webpack_require__(6);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
 
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
          exports = module.exports = __webpack_require__(3)();
          exports.push([module.id, ".slider-wrap{\r\n position: relative;\r\n width: 100%;\r\n margin: 50px;\r\n background: #fff;\r\n}\r\n\r\n.slider-wrap li{\r\n text-align: center;\r\n line-height: 20px;\r\n}", ""]);
 
/***/ },
/* 3 */
/***/ function(module, exports) {
 
/***/ },
 
/* 4 */
/***/ function(module, exports, __webpack_require__) {
/***/ },
 
/* 5 */
/***/ function(module, exports) {
          console.log(‘hello, here is clipitem.js’) ;
/***/ },
/* 6 */
/***/ function(module, exports) {
          module.exports = "data:image/png;base64,iVBORw0KGg……"
/***/ }
]);

webpack编译之后,输出文件视乎乱糟糟的,但其实每1个财富都被封装在3个函数体内,并且以编号的款型标记(注释)。这一个模块,由webpack的__webpack_require__个中方法加载。入口文件为编号0的函数index.js,可以观看__webpack_require__加载其余编号的模块。

css文件在号码1,由于使用css-loader和style-loader,编号1-4都是处理css。其中编号2我们可以看大家的css的string体。最终会以内联的艺术插入到html中。

图形文件在号码6,可以看出exports出base64化的图纸。

 组件一体输出

JavaScript

// 加载组件本身css require(‘./slider.css’); // 加载组件器重的模块 var
React = require(‘react’); var Clip = require(‘../ui/clipitem.jsx’); //
加载图片能源 var spinnerImg = require(‘./loading.png’); var Slider =
React.createClass({ getInitialState: function() { // … },
componentDidMount: function(){ // … }, render: function() { return (
<div> <Clip data={this.props.imgs} /> <img
className=”loading” src={spinnerImg} /> </div> ); } });
module.exports = Slider;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 加载组件自身css
require(‘./slider.css’);
// 加载组件依赖的模块
var React = require(‘react’);
var Clip = require(‘../ui/clipitem.jsx’);
// 加载图片资源
var spinnerImg = require(‘./loading.png’);
var Slider = React.createClass({
    getInitialState: function() {
        // …
    },
    componentDidMount: function(){
        // …
    },
    render: function() {
        return (
            <div>
               <Clip data={this.props.imgs} />
               <img className="loading" src={spinnerImg} />
            </div>
        );
    }
});
module.exports = Slider;

假诺说,react使到html和js合为紧密。

这就是说充裕webpack,两者结合一起的话。js,css,png(base64),html
全部web财富都能合成三个JS文件。那多亏那套方案的骨干所在:零件独立一体化。假设要引用三个组件,仅仅require('./slider.js') 即可已毕。

 

投入webpack的模块加载器之后,大家组件的加载难点,内聚难题也都事业有成地化解掉

“能源高内聚”—— (百分百) 全数资源得以一js出口

“可相互结合”—— (百分百)  可构成可凭借加载

 

 CSS模块化实践

很喜欢,你能读书到此地。如今大家的零部件达成度分外的高,能源内聚,易于组合,功效域独立互不污染。。。。等等澳门葡京手机网站 14,视乎CSS模块的已毕度有不足。

那就是说近期组件完毕度来看,CSS成效域其实是全局性的,并非组件内部独立。下一步,我们要做得就是何许让咱们组件内部的CSS效能域独立。

此时或许有人马上跳出,大喊一句“德玛西亚!”,哦不,应该是“用sass啊傻逼!”。不过类型组件化之后,组件的中间封装已经很好了,其里面dom结构和css趋向不难,独立,甚至是破破烂烂的。LESS和SASS的一体式样式框架的宏图,他的嵌套,变量,include,函数等丰裕的功效对于全部大型项目标体制管理十二分实用。但对此一个意义单一组件内部样式,视乎就变的多少格格不入。“不大概为了框架而框架,合适才是最好的”。视乎原生的css能力已经满意组件的体制须求,唯独就是地点的css成效域难题。

 

此处作者付出思考的方案:
classname随便写,保持原生的办法。编译阶段,依据组件在类型路线的唯一性,由【组件classname+组件唯一路径】打成md5,生成全局唯一性classname。正当本人要写一个loader完结作者的想法的时候,发现歪果仁已经早在先走一步了。。。。

此处具体方案参考我事先博客的译文:

事先我们商讨过JS的模块。以后经过Webpack被加载的CSS财富叫做“CSS模块”?小编觉得仍旧分外的。今后style-loader插件的落到实处精神上只是创办link[rel=stylesheet]要素插入到document中。这种表现和常见引入JS模块分外差别。引入另三个JS模块是调用它所提供的接口,但引入七个CSS却并不“调用”CSS。所以引入CSS自己对于JS程序来说并不设有“模块化”意义,纯粹只是表达了一种财富倚重——即该零件所要已毕的意义还需求一些asset。

从而,那位歪果仁还扩张了“CSS模块化”的定义,除了上面的我们须求某个成效域外,还有众多效应,那里不详述。具体参考原文 

充足赞的某个,就是cssmodules已经被css-loader收纳。所以我们不须要借助额外的loader,基本的css-loader开启参数modules即可

JavaScript

//webpack.config.js … module: { loaders: [ {test: /\.css$/, loader:
‘style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]’
}, ] } ….

1
2
3
4
5
6
7
8
//webpack.config.js
…  
    module: {
        loaders: [
            {test: /\.css$/, loader: ‘style!css?modules&localIdentName=[local]__[name]_[hash:base64:5]’ },
        ]  
    }
….

modules参数代表开启css-modules功用,loaclIdentName为设置大家编译后的css名字,为了便利debug,我们把classname(local)和零部件名字(name)输出。当然可以在最后输出的版本为了节省提交,仅仅使用hash值即可。别的在react中的用法大约如下。

JavaScript

var styles = require(‘./banner.css’); var Banner = new
React.createClass({ … render: function(){ return ( <div> <div
className={styles.classA}></div> </div> ) } });

1
2
3
4
5
6
7
8
9
10
11
var styles = require(‘./banner.css’);
var Banner = new React.createClass({
    …
    render: function(){
        return (
            <div>
                <div className={styles.classA}></div>
            </div>
        )
    }
});

说到底那里关于出于对CSS一些构思,

有关css-modules的其它作用,小编并不打算采纳。在里边分享【大家竭尽所能地让CSS变得复杂】中提及:

咱俩项目中大部的CSS都不会像boostrap那样须求变量来安装,身为一线开发者的大家几乎能够感受到:设计师们改版UI,绝对不是归纳的换个色或改个间距,而是万物更新的全新UI,那相对不是3个变量所能化解的”维护性“。

反倒项目实战进度中,真正要消除的是:在本子迭代进度中那三个淘汰掉的逾期CSS,大批量地堆放在品种当中。我们像极了家中的欧巴酱不舍得丢掉没用的事物,因为那但是我们运用sass或less编写出具有惊人的可维护性的,肯定有复用的一天。

那几个堆积的超时CSS(or
sass)之间又有一对看重,一部分逾期失效了,一部分又被新的样式复用了,导致没人敢动这一个历史样式。结果现网项目迭代还带着多量两年前没用的样式文件。

组件化之后,css的布署同样被改正了。或许postcss才是您今后手上最契合的工具,而不在是sass。

 

到此处,我们总算把组件化最终3个题目也化解了。

“功用域独立”—— (百分百) 就好像shadowDom功效域独立

 

到此地,大家得以开一瓶82年的Coca Cola,好好庆祝一下。不是吗?

澳门葡京手机网站 15

 

 组件化之路还在后续

webpack和react还有这一个新万分重大的特性和职能,介于本文仅仅围绕着组件化的为骨干,没有各种解说。其它,配搭gulp/grunt补充webpack创设能力,webpack的codeSplitting,react的零件通讯难题,开发与生育环境安插等等,都以任何大型项目方案的所必须的,限于篇幅难点。可以等等作者更新下篇,或我们可以自动查阅。

而是,不得不再安利一下react-hotloader神器。热加载的支出形式相对是下一代前端开发必备。严酷说,借使没有了热加载,小编会很泼辣地甩掉那套方案,尽管那套方案再怎么好好,我都讨厌react要求5~6s的编译时间。可是hotloader可以在自作者不刷新页面的情景下,动态修改代码,而且不单单是样式,连逻辑也是即时生效。

澳门葡京手机网站 16

如上在form表单内。使用热加载,表单不需求重新填写,修改submit的逻辑立即见效。那样的支付成效真不是增强仅仅二个水准。必须安利一下。

 

或是你意识,使用组件化方案以往,整个技术栈都被更新了一番。学习费用也不少,并且可以预言到,基于组件化的前端还会过多不足的题材,例如质量优化方案须求重新考虑,甚至最基本的组件可复用性不肯定高。前边非常长一段时间,须求大家不停操练与优化,探求最优的前端组件化之道。

足足大家可以想象,不再担心本身写的代码跟某些什么人何人争执,不再为找某段逻辑在三个文件和措施间不停,不再copy一片片逻辑然后改改。我们每趟编写都以可选取,可整合,独立且内聚的组件。而各类页面将会由2个个嵌套组合的零部件,互相独立却相互功效。

 

对此如此的前端以往,有所指望,不是很行吗

迄今甘休,感激您的翻阅。

1 赞 6 收藏 1
评论

澳门葡京手机网站 17

内容提要

运用过多独自组件营造应用程序的想法并不出奇。Web
Component的产出,是再一次回忆基于组件的应用程序开发情势的好机遇。大家可以从这么些进程中收益,通晓什么接纳现有技术形成目的,并且在今后做出自个儿的前端Web应用。
 

本文由 埃姆杰 翻译。未经许可,禁止转发! 英文出处:Future Insights。

CMS组件化,简单架构示意图:

什么是组件?

软件开发是壹个语义丰裕(术语常常持续三个意味)的领域。很强烈,那里的“组件”是三个很泛的叫做,所以有需求指明我们想要表明的,在前者Web应用的言语环境中的意思。

前端Web应用中的组件,是指部分安插为通用性的,用来创设较大型应用程序的软件,那么些组件有多种表现格局。它可以是有UI(用户界面)的,也可以是当做
“服务”的纯逻辑代码。

因为有视觉上的表现形式,UI组件更易于明白。UI组件简单的例子包罗按钮、输入框和文本域。不论是奥斯陆包状的菜单按钮(无论你是或不是喜欢)、标签页、日历、选项菜单或然所见即所得的富文本编辑器则是有的进一步高档的例证。

提供服务类型的机件大概会令人为难了然,那种类型的例子包罗跨浏览器的AJAX帮忙,日志记录只怕提供某种数据持久化的效应。

依据组件开发,最首要的就是组件能够用来构成任何零件,而富文本编辑器就是个很好的例证。它是由按钮、下拉菜单和局部可视化组件等组成。另1个事例是HTML5上的video成分。它一样带有按钮,也同时涵盖三个能从摄像数据流渲染内容的因素。

内容提要

行使过多独立组件创设应用程序的想法并不新鲜。Web
Component的面世,是双重纪念基于组件的应用程序开发格局的好机遇。大家得以从那么些历程中收益,精通怎么样行使现有技术做到目的,并且在今后做出本人的前端Web应用。

澳门葡京手机网站 18

为啥要打造组件?

既是将来曾经知晓组件的意思,就看看使用组件的章程营造前端采取的利益。

哪些是组件?

软件开发是多少个语义丰裕(术语常常持续3个意味)的世界。很鲜明,那里的“组件”是一个很泛的名为,所以有要求指明大家想要表明的,在前者Web应用的言语环境中的意思。

前端Web应用中的组件,是指部分统筹为通用性的,用来营造较大型应用程序的软件,那些零件有五种表现方式。它能够是有UI(用户界面)的,也足以是用作
“服务”的纯逻辑代码。

因为有视觉上的表现格局,UI组件更便于明白。UI组件简单的例证包蕴按钮、输入框和文本域。不论是希腊雅典包状的菜系按钮(无论你是还是不是喜欢)、标签页、日历、选项菜单或许所见即所得的富文本编辑器则是部分尤其高档的例子。

提供服务类型的零件大概会令人难以了解,那种类型的例子包蕴跨浏览器的AJAX扶助,日志记录恐怕提供某种数据持久化的效果。

据悉组件开发,最首要的就是组件可以用来组合任何零件,而富文本编辑器就是个很好的事例。它是由按钮、下拉菜单和有个别可视化组件等构成。另多个例子是HTML5上的video成分。它一律包蕴按钮,也还要含有一个能从视频数据流渲染内容的要素。

Web组件使用WebPage+WebAPI的功利:

模块

你可能传说过 “组件是天生模块”的布道。好呢,感激它,我们又要表明那里的术语!

你或然会觉得“组件”的说教更为契合用来叙述UI,而“模块”更符合描述提供服务的效率逻辑。而对于笔者的话,模块和零部件意思相近,都提供社团、聚焦和包装,是与有些作用单位有关的。

干什么要打造组件?

既是将来一度领会组件的意味,就看看使用组件的法子营造前端采取的好处。

Ø  组件复用(组件条件管理页面复用+获取组件数据API复用)。

高内聚

又是三个软件工程的高频词! 大家将有关的有个别功能公司在一块儿,把整个封装起来,而在组件的例子中,就或然是连锁的效应逻辑和静态能源:JavaScript、HTML、CSS以及图像等。那就是我们所说的内聚。

那种做法将让组件更易于保险,并且这么做之后,组件的可信性也将增强。同时,它也能让组件的职能分明,增大组件重用的只怕。

模块

您可能听新闻说过 “组件是自然模块”的说教。可以吗,感激它,大家又要解释那里的术语!

您或然会认为“组件”的传教更是符合用来描述UI,而“模块”更切合描述提供劳动的职能逻辑。而对此自个儿来说,模块和组件意思相近,都提供社团、聚焦和包裹,是与某些作用单位相关的。

Ø  组件是分布式的第②方采纳,本身高内聚、组件之间松耦合,可以清楚为独立的子系统。

可重用

你看看的演示组件,尤其是Web
Component,更关怀可选取的标题。功用显著,达成清晰,API易于精晓。自然就能促进组件复用。通过打造可选拔组件,大家不仅保持了 DXC90Y(不要再一次造轮子)原则,还得到了对应的功利。

此间要唤醒: 不要过于尝试营造可选择组件。你更应该关切应用程序上所必要的那个特定部分。假使之后相应必要应运而生,可能零部件的确到了可选择的境地,就花一点外加时间让组件重用。事实上,开发者都欢乐去创建可选取效能块(库、组件、模块、插件等),做得太早将会让你后来痛楚不堪。所以,吸取基于组件开发的此外利益,并且接受不是拥有组件都能重用的真相。

高内聚

又是二个软件工程的高频词! 我们将有关的有个别效用团体在联合,把全体封装起来,而在组件的例子中,就恐怕是荣辱与共的效益逻辑和静态能源:JavaScript、HTML、CSS以及图像等。那就是我们所说的内聚。

那种做法将让组件更便于保证,并且这么做之后,组件的可相信性也将提升。同时,它也能让组件的效应明显,增大组件重用的只怕。

Ø  组件使用WebAPI,提供REST风格的WebService,轻量级,对客户端的须求也更少。

可互换

1个功用鲜明好组件的API能令人专断地改成其中间的法力已毕。如若程序内部的零部件是松耦合的,那其实可以用二个零件轻易地更迭另八个组件,只要坚守千篇一律的 API/接口/约定。

一旦你利用GoInstant提供的实时功用劳务组件,那她们前一周关门服务那样的音讯会影响到您。可是,只要提供了同样的数据同步API,你也足以自行营造利用三个 FirebaseComponent 组件可能 PubNubComponent 组件。

可重用

你见到的以身作则组件,越发是Web
Component,更尊崇可拔取的标题。功用肯定,完成清晰,API易于领会。自然就能拉动组件复用。通过营造可拔取组件,大家不仅保障了 DRubiconY(不要再一次造轮子)规则,还得到了对应的裨益。

那边要提示: 不要过分尝试构建可采纳组件。你更应当关怀应用程序上所急需的那个特定部分。借使之后相应须求出现,或然零部件的确到了可接纳的地步,就花一点十分时间让组件重用。事实上,开发者都爱好去创建可选拔功用块(库、组件、模块、插件等),做得太早将会让您后来痛心不堪。所以,吸取基于组件开发的其他利益,并且接受不是负有组件都能重用的真情。

Ø  组件可以独自支出,单独测试,低度封装,能够分别差异条件,别的组件完全可以不做任何测试。

可组合

事先也探讨过,基于组件的架构让组件组合成新组件特别便于。那样的安排性让组件尤其小心,也让任何零件中打造和暴光的职能更好应用。

随便是给程序添加效果,如故用来创制完整的顺序,越发复杂的功用也能如法泡制。那就是那种艺术的首要性利益。

是否有须要把持有的东西转换来组件,事实上取决于你协调。没有任何理由让你的主次由 你自己 的机件组合成你最惊叹的功能 ,乃至 最花哨的功能。而那一个零件又反过来构成任何零件。若是您从那几个办法中拿到了便宜,就想尽地去百折不挠它。但是要注意的是,不要用相同的办法把工作变得复杂,你并不需求过分关怀如何让组件重用。而是要爱慕突显程序的机能。

可互换

1个意义显明好组件的API能令人随意地转移其里面的功能完毕。假若程序内部的组件是松耦合的,那实在能够用一个零件轻易地更迭另1个组件,只要坚守千篇一律的 API/接口/约定。

比方你接纳GoInstant提供的实时效应劳务组件,那她们上周关门服务如此那般的新闻会影响到您。但是,只要提供了相同的数量同步API,你也足以自行创设利用三个 FirebaseComponent 组件可能 PubNubComponent 组件。

Ø  组件热插拔,组件易替换,可增添性强,不会有dll互相看重、影响,dll管理等一各个题材去处理。

今天就先导构建组件

在 Caplin
Systems 营造基于组件的自有应用程序时,作者动用了几条原则和履行。这个规范由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS”
是因为我们将顺序成效都封装在称作 Blades 的东西中。Blade是可以在有些应用中录取的效率特色,可是不得以在先后间重用。当作用真的
变得特别通用的时候,大家将相应的定义移到库文件中,供种种程序间使用。特定应用中的组件(blade)和我们先后间的通用组件能够动用,我们若是找到最好满意须要的任何库和框架。

那就是说,将来怎么库和框架可以协助大家打造组件呢?

在控制创设利用时应运用何种技术时,只须要探视流行的 TodoMVC 网站就能够见见大批量可供拔取的前端库和框架。你可能会觉得任何一种方案都能用来创设基于组件的应用程序。但是,他们之中的一些方案内置了对组件的协助。其中相比有名的是AngularJS、Ember
和 React。

可组合

事先也探讨过,基于组件的架构让组件组合成新组件尤其便于。那样的设计让组件特别注意,也让此外零件中创设和暴光的成效更好使用。

不论是是给程序添加效果,如故用来创设完整的主次,越发扑朔迷离的听从也能邯郸学步。那就是那种艺术的显要利益。

是否有要求把富有的东西转换到组件,事实上取决于你协调。没有任何理由让您的次第由 你自己 的零件组合成你最惊叹的功能 ,乃至 最花哨的功能。而这几个组件又反过来构成任何零件。假设您从那一个格局中拿走了好处,就想方设法地去锲而不舍它。然则要注意的是,不要用同样的办法把业务变得复杂,你并不需求过分关怀如何让组件重用。而是要关怀突显程序的效益。

Ø  .net/java/php/都可以支付组件,可多元化发展。

组件间是怎样通讯的?

在深入示例以前有必不可少简单地关乎组件间通讯的标题。假设组件之间是“独立”、“模块化”的,他们又是如何互相通讯的吧?

最醒目标答案就是让组件间相互引用并透过他们中间的API交互。那样做的题目就在于,那种做法会让组件相互着重。短时间内大概幸亏,一段时间将来,你在改动程序的时候程序会失控,修改贰个组件就会对另1个组件产生极大的震慑。决定移除七个不只怕牵动预期价值组件或者会让你的应用程序为止工作,因为它背后会有数个零件依赖于它。

这时,消除方案是提供松耦合的,让组件之间很少大概大概不知晓相互的方案。组件并不间接开立其他零件,在他们须要通讯的时候,他们经过“接口/约定”可能通过 “服务”。大家在创设BEscortJS程序时考虑了众多这么些方面的事物,并且应用 ServiceRegistry 访问用于组件间通信的劳动或然是Web
API如此的能源。Angular和Ember采纳了劳动和凭借注入不留余地那类难点。

现行就起来打造组件

在 Caplin
Systems 创设基于组件的自有应用程序时,作者动用了几条原则和施行。那一个规范由 BladeRunnerJS(BRJS) 开源工具集支撑。它被称作”BladeRunnerJS”
是因为大家将顺序效能都封装在称作 Blades 的事物中。Blade是足以在某些应用中录取的功力特色,可是不可以在程序间重用。当效能真的
变得更其通用的时候,大家将相应的定义移到库文件中,供种种程序间拔取。特定应用中的组件(blade)和大家先后间的通用组件可以行使,我们只要找到最好满足须要的任何库和框架。

那么,今后怎么着库和框架可以协理大家创设组件呢?

在决定创设利用时应运用何种技术时,只需要探视流行的 TodoMVC 网站就足以见到多量可供选拔的前端库和框架。你大概会认为任何一种方案都能用来营造基于组件的应用程序。可是,他们内部的一些方案内置了对组件的支撑。其中相比盛名的是AngularJS、Ember
和 React。

Ø  组件都有温馨独立的版本,组件可以单独编译,独立包装和布局,当有些组件有浮动的时候,可以独自对转移的组件进行版本升级,单独对转移组件举办安顿。

以身作则组件my-avatar

为了突显大家什么样用这个库和框架营造最中央的组件,大家创立了二个饱含UI,用于取回和出示用户头像的大致示例。在可能的图景下,该零件会有 my-avatar 标签,会从以下几个属性中赢得头像:

  • service 允许设置3个劳动。例如 twitter 或者 facebook
  • username 用于取回该用户名相对应的头像

零件间是什么样通讯的?

在深深示例在此以前有必不可少简单地关系组件间通讯的题材。借使组件之间是“独立”、“模块化”的,他们又是什么互相通讯的吧?

最精晓的答案就是让组件间互动引用并透过他们中间的API交互。那样做的题材就在于,这种做法会让组件互相看重。长时间内恐怕好在,一段时间以往,你在修改程序的时候程序会失控,修改贰个零件就会对另1个零件暴发巨大的熏陶。决定移除3个无法推动预期价值组件只怕会让您的应用程序截至工作,因为它背后会有数个零部件看重于它。

那儿,化解方案是提供松耦合的,让组件之间很少可能大致不驾驭互相的方案。组件并不直接创造其余零件,在他们要求通讯的时候,他们经过“接口/约定”或然通过 “服务”。我们在营造B奥德赛JS程序时考虑了成百上千那一个方面的事物,并且动用 ServiceRegistry 访问用于组件间通信的劳务只怕是Web
API诸如此类的财富。Angular和Ember拔取了劳务和依靠注入化解那类难题。

Ø  组件数据的生成会有一定的条件,组件自治,组件已毕格局自由发挥。

AngularJS

AngularJS 只怕是以后用来创设程序最盛行的前端化解方案了。作为创我的谷歌(Google),重新考虑HTML,考虑怎么重新发明,满足近期Web开发的急需。

Angular中得以行使自定义指令概念组件。之后,你可以应用 HTML
标记声明自定义组件。

查阅代码演示: 

以此事例显示了接纳Angular指令的简约程度。值scope 定义了从
 my-avatar 成分中得到,并且之后用来打造相应的img标签和渲染成用户头像的特性。

示范组件my-avatar

为了显示大家怎么用那个库和框架营造最核心的机件,大家树立了多个含有UI,用于取回和展现用户头像的粗略示例。在或者的景色下,该器件会有 my-avatar 标签,会从以下几特性子中拿到头像:

  • service 允许设置3个劳务。例如 twitter 或者 facebook
  • username 用于取回该用户名相对应的头像

Ø  可以独自做测试,能够单独布署、运营、调试等。

相关文章