搜索
首页web前端html教程avalon2学习教程13组件使用_html/css_WEB-ITnose

avalon2最引以为豪的东西是,终于有一套强大的类Web Component的组件系统。这个组件系统媲美于React的JSX,并且能更好地控制子组件的传参。

avalon自诞生以来,就一直探索如何优雅的定义组件使用组件。从avalon1.4的ms-widget,到avalon1.5的自定义标签。而现在的版本恰好是它们的结合体,并从web component那里借鉴了slot插入点机制及生命周期管理,从react那里抄来了render字符串模板。

在avalon1.4中,ms-widget指令的值是一个字符串,使用逗号隔开几个有限的元消息

<div ms-widget="widgetType, widgetVmID, widgetOption"></div>

在 avalon1.5 中,改成自定义标签做载体,使用config对象属性作为widgetOption, 使用$id或identifier属性来指定组件VM的$id, 使用标签名来指定组件的类型。

  <ms:button ms-repeat="array" ms-attr-config="x{{$index}}"></ms:button>

此外还有其他夹七夹八的东西,功能更强大了,但上手更难了。

现在细细回想起来,其中重要的配置项就只有两个组件的ID,组件的类型。其他的配置项需要用更优雅的方式加入去。幸好在开始写新组件指令前,我已经解决了。大家可以回去看一下, ms-attr, ms-css. 让指令的属性值以对象或对象数组的形式存在,不就能放许多东西吗。

  <xmp ms-widget="@obj"></xmp>  <xmp ms-widget="{is:'panel',$id:'aaa', title:@title}"></xmp>  <xmp ms-widget="[{is:'panel',$id:'aaa', title:@title},@otherConfig,@thirdConfig]"></xmp>

其次是生命周期。avalon2的组件生命周期更完善。

avalon1.4 avalon1.5 avalon2 web component xtag react
$init $init onInit createdCallback created componentWillMount
$childReady onReady attachedCallback inserted componentDidMount
$ready onViewChange attributeChangedCallback attributeChanged componentWillReceiveProps
$remove $dispose onDispose detachedCallback removed componentWillUpdate
componentDidUpdate
componentWillUnmount

从上表可以看到,avalon2与Web Component的生命周期很相近了。

  1. onInit,这是组件的vm创建完毕就立即调用时,这时它对应的元素节点或虚拟DOM都不存在。只有当这个组件里面不存在子组件或子组件的构造器都加载回来,那么它才开始创建其虚拟DOM。否则原位置上被一个 注释节点 占着。

  2. onReady,当其虚拟DOM构建完毕,它就生成其真实DOM,并用它插入到DOM树,替换掉那个注释节点。相当于其他框架的attachedCallback, inserted, componentDidMount.

  3. onViewChange,当这个组件或其子孙节点的某些属性值或文本内容发生变化,就会触发它。它是比Web Component的attributeChangedCallback更加给力。

  4. onDispose,当这个组件的元素被移出DOM树,就会执行此回调,它会移除相应的事件,数据与vmodel。

我们再来看一下如何定义组件。上面只是说如何添加配置项。onInit, onReady, onViewChagne, onDispose只是其中的四个配置项。

avalon2 的默认配置项比avalon1.5 少许多。

  1. is, 字符串, 指定组件的类型。如果你使用了自定义标签,这个还可以省去。

  2. $id, 字符串, 指定组件vm的$id,这是可选项。

  3. define, 函数, 自己决定如何创建vm,这是可选项。

  4. diff, 函数, 比较组件的前后两个虚拟DOM树,返回true同步到真实DOM中,可选。

  5. onInit, onReady , onViewChange , onDispose 四大生命周期钩子。

然后就没有了, 没有$replace, $slot, $template, $extend, $container, $construct, $$template 这些怪怪的东西。

说起自定义标签。之前1.5为了兼容IE6-8,是使用旧式的带命名空间的标签作为容器,而Web Component则是使用中间带杠的标签,如,风格大相径庭。显然后者是主流,是未来!

经过一番研究,发掘出三大标签作为组件定义时的容器。

xmp, wbr, template

xmp是闭合标签,与div一样,需要写开标签与闭标签。但它里面的内容全部作为文本存在,因此在它里面写带杠的自定义标签完全没问题。并且有一个好处时,它是能减少真实DOM的生成(内部就只有一个文本节点)。

<xmp ms-widget="@config"><ms-button ms-widget="@btn1"><ms-button><div></div><ms-tab ms-widget="@tab"><ms-tab></xmp>

wbr与xmp一样,是一个很古老的标签。它是一个空标签,或者说是半闭合标签,像br, area, hr, map, col都是空标签。我们知道,自定义标签都是闭合标签,后面部分根本不没有携带更多有用的信息,因此对我们来说,没多大用处。

<wbr ms-widget="@config" />

template是HTML5添加的标签,它在IE9-11中不认,但也能正确解析得出来。它与xmp, wbr都有一个共同特点,能节省我们定义组件时页面上的节点规模。xmp只有一个文本节点作为孩子,wbr没有孩子,template也没有孩子,并且用content属性将内容转换为文档碎片藏起来。

<template ms-widget="@config" ><ms-dialog ms-widget="@config"></ms-dialog></template>

当然如果你不打算兼容IE6-8,可以直接上ms-button这样标签。自定义标签比起上面三大容器标签,只是让你少写了is配置项而已,但多写了一个无用的闭标签。

<ms-dialog ms-widget="@config" ><ms-panel ms-widget="@config2"></ms-panel></ms-dialog><!--比对下面的写法--><xmp ms-widget="@config" ><wbr ms-widget="@config2"/></xmp>

如果你想在页面上使用ms-button组件,只能用于以下四种方式

<!--在自定义标签中,ms-widget不是必须的--><ms-button></ms-button><!--下面三种方式,ms-widget才是存在,其中的is也是必须的--><xmp ms-widget='{is:"ms-button"}'></xmp><wbr ms-widget='{is:"ms-button"}'/><template ms-widget='{is:"ms-button"}'></template>

在JS中,我们是这样使用它

<!DOCTYPE html><html>    <head>        <title>ms-validate</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <script src="../dist/avalon.js"></script>        <script>            var vm = avalon.define({                $id: 'test',                button: {//注意这里不能以 $开头                    buttonText: "VM内容"                }            })            avalon.component('ms-button', {                template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',                defaults: {                    buttonText: "默认内容"                },                soleSlot: 'buttonText'            })        </script>    </head>    <body ms-controller="test">    <!--在自定义标签中,ms-widget不是必须的-->    <ms-button ></ms-button>    <!--下面三种方式,ms-widget才是存在,其中的is也是必须的-->    <xmp ms-widget='{is:"ms-button"}'></xmp>    <wbr ms-widget='{is:"ms-button"}'/>    <template ms-widget='{is:"ms-button"}'></template></body></html>

但这样我们就不好控制组件的更新。我们改一改。

<!DOCTYPE html><html>    <head>        <title>ms-validate</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <script src="../dist/avalon.js"></script>        <script>            var vm = avalon.define({                $id: 'test',                button: {//注意这里不能以 $开头                    buttonText: "按钮内容"                }            })            avalon.component('ms-button', {                template: '<button type="button"><span><slot name="buttonText"></slot></span></button>',                defaults: {                    buttonText: "button"                },                soleSlot: 'buttonText'            })        </script>    </head>    <body ms-controller="test">    <!--在自定义标签中,ms-widget不是必须的-->    <ms-button ms-widget="@button"></ms-button>    <!--下面三种方式,ms-widget才是存在,其中的is也是必须的-->    <xmp ms-widget='[{is:"ms-button"},@button]'></xmp>    <wbr ms-widget='[{is:"ms-button"},@button]'/>    <template ms-widget='[{is:"ms-button"},@button]'></template></body></html>

这样我们直接操作 vm中的button对象中对应属性就能更新组件了。这比原来avalon1.*好用一万倍。

此外,avalon2还支持Web Components规范中所说的slot插入点机制,它是用来配置

一些字符串长度很长的属性。比如说ms-tabs组件,通常有一个数组属性,

而数组的每个元素都是一个很长的文本,用于以应一个面板。这时我们可以在自定义标签的

innerHTML内,添加一些slot元素,并且指定其name就行了。

当我们不使用slot,又不愿意写面板内部放进vm时,你的页面会是这样的:

<ms-tabs ms-widget='{panels:["第一个面板的内部dfsdfsdfsdfdsfdsf","第二个面板的内部dfsdfsdfsdfdsfdsf""第三个面板的内部dfsdfsdfsdfdsfdsf"]  }'></ms-tabs>

使用了slot后

<ms-tabs><div slot='panels'>第一个面板的内部dfsdfsdfsdfdsfdsf</div><div slot='panels'>第二个面板的内部dfsdfsdfsdfdsfdsf</div><div slot='panels'>第三个面板的内部dfsdfsdfsdfdsfdsf</div></ms-tabs>

而你的组件是这样定义

<ms-tabs><slot name='panels'></solt><slot name='panels'></solt><slot name='panels'></solt></ms-tabs>

上面的div会依次替代slot元素。

此外,如果我们只有一个插槽,不想在页面上slot属性,那么可以在组件里使用soleSlot。

注意avalon.component的第二个参数,是一个对象,它里面有三个配置项,template是必须的, defaults、 soleSlot是可选的。

组件属性的寻找顺序,会优先找配置对象,然后是innerHTML,然后是defaults中的默认值.我们可以看一下测试

div.innerHTML = heredoc(function () {            /*             <div ms-controller='widget0' >             <xmp ms-widget="{is:'ms-button'}">{{@btn}}</xmp>             <ms-button>这是标签里面的TEXT</ms-button>             <ms-button ms-widget='{buttonText:"这是属性中的TEXT"}'></ms-button>             <ms-button></ms-button>             </div>             */        })        vm = avalon.define({            $id: 'widget0',            btn: '这是VM中的TEXT'        })        avalon.scan(div)        setTimeout(function () {            var span = div.getElementsByTagName('span')            expect(span[0].innerHTML).to.equal('这是VM中的TEXT')            expect(span[1].innerHTML).to.equal('这是标签里面的TEXT')            expect(span[2].innerHTML).to.equal('这是属性中的TEXT')            expect(span[3].innerHTML).to.equal('button')            vm.btn = '改动'            setTimeout(function () {                expect(span[0].innerHTML).to.equal('改动')                done()            })        })

生命周期回调的例子.avalon是使用多种策略来监听元素是否移除,确保onDispose回调会触发!

<!DOCTYPE html><html>    <head>        <title>TODO supply a title</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <script src="./dist/avalon.js"></script>        <script>            var vm = avalon.define({                $id: 'widget0',                config: {                    buttonText: '按钮',                    onInit: function (a) {                        console.log("onInit!!")                    },                    onReady: function (a) {                        console.log("onReady!!")                    },                    onViewChange: function () {                        console.log("onViewChange!!")                    },                    onDispose: function () {                        console.log("onDispose!!")                    }                }            })            setTimeout(function () {                vm.config.buttonText = 'change'                setTimeout(function () {                    document.body.innerHTML = ""                }, 1000)            }, 1000)        </script>    </head>    <body>        <div ms-controller='widget0' >            <div><wbr ms-widget="[{is:'ms-button'},@config]"/></div>        </div>    </body></html>

在 avalon仓库 中有两个简单的例子,大家可以下回来研究研究。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML文档中的根标签是什么?HTML文档中的根标签是什么?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,确保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML标签和元素是同一件事吗?HTML标签和元素是同一件事吗?Apr 28, 2025 pm 05:44 PM

文章解释说,HTML标签是用于定义元素的语法标记,而元素是完整的单位,包括标签和内容。他们一起工作以构建网页。查拉克计数:159

&lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?&lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head&gt; &&lt;身体&gt; HTML中的标签,它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集?请说明如何指示HTML中文档使用的字符集?Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符,重点介绍了UTF-8。主要问题:确保正确显示文本,防止乱七八糟的字符,并增强SEO和可访问性。

HTML中的各种格式标签是什么?HTML中的各种格式标签是什么?Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签,强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别?HTML元素的' ID”属性与'类”属性之间有什么区别?Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异,重点是它们的独特性,目的,CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能,并为

HTML中的'类”属性是什么?HTML中的'类”属性是什么?Apr 28, 2025 pm 05:37 PM

本文解释了HTML“类”属性在分组样式和JavaScript操纵元素中的作用,将其与唯一的“ ID”属性进行对比。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),