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仓库 中有两个简单的例子，大家可以下回来研究研究。
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PMThe official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PMThis article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PMThe article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
Notepad++7.3.1
Easy-to-use and free code editor
Atom editor mac version download
The most popular open source editor
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
