搜尋
首頁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

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)