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的生命周期很相近了。
-
onInit，这是组件的vm创建完毕就立即调用时，这时它对应的元素节点或虚拟DOM都不存在。只有当这个组件里面不存在子组件或子组件的构造器都加载回来，那么它才开始创建其虚拟DOM。否则原位置上被一个 注释节点 占着。
-
onReady，当其虚拟DOM构建完毕，它就生成其真实DOM，并用它插入到DOM树，替换掉那个注释节点。相当于其他框架的attachedCallback， inserted, componentDidMount.
-
onViewChange，当这个组件或其子孙节点的某些属性值或文本内容发生变化，就会触发它。它是比Web Component的attributeChangedCallback更加给力。
-
onDispose，当这个组件的元素被移出DOM树，就会执行此回调，它会移除相应的事件，数据与vmodel。
我们再来看一下如何定义组件。上面只是说如何添加配置项。onInit, onReady, onViewChagne, onDispose只是其中的四个配置项。
avalon2 的默认配置项比avalon1.5 少许多。
-
is, 字符串, 指定组件的类型。如果你使用了自定义标签，这个还可以省去。
-
$id, 字符串, 指定组件vm的$id，这是可选项。
-
define, 函数, 自己决定如何创建vm，这是可选项。
-
diff, 函数, 比较组件的前后两个虚拟DOM树，返回true同步到真实DOM中，可选。
-
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仓库 中有两个简单的例子，大家可以下回来研究研究。
HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159
& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.
& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.
HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.
HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.
'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.
HTML의 '클래스'속성은 무엇입니까?Apr 28, 2025 pm 05:37 PM이 기사는 스타일링 및 JavaScript 조작을위한 요소 그룹에서 HTML '클래스'속성의 역할을 고유 한 'ID'속성과 대조합니다.
HTML의 다른 유형의 목록은 무엇입니까?Apr 28, 2025 pm 05:36 PM기사는 HTML 목록 유형에 대해 설명합니다. Ordered (& lt; ol & gt;), unordered (& lt; ul & gt;) 및 설명 (& lt; dl & gt;). 웹 사이트 디자인을 향상시키기 위해 목록 작성 및 스타일링에 중점을 둡니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
