Avalon
Avalon
杨林伟
像火箭科学家一样思考!
展开
-
avalon使用ms-visible出现重叠的问题
ms-visible: 只是隐藏元素,并不将其从DOM中移除。解决方法:使用 ms-if因为ms-if 在隐藏元素的同时,将元素移除了DOM,这样就有可能出现元素中不再包含子元素的情况。...原创 2019-07-15 17:24:31 · 466 阅读 · 0 评论 -
avalon中ms-visible和ms-if的区别
ms-if :在隐藏元素的同时,将元素移除了DOM,这样就有可能出现元素中不再包含子元素的情况,即满足:empty状态。ms-visible: 只是隐藏元素,并不将其从DOM中移除。使用ms-visible控制视图时,可能会出现重叠的现象。...原创 2019-07-15 17:21:45 · 1112 阅读 · 0 评论 -
36avalon - 自定义标签
以ms-开头的自定义标签, 我们需要用avalon.component方法定义它,然后在里面使用ms-widget指令 为它添加更多行为.avalon.component方法有两个参数,第一个标签名,必须以ms-开头;第二个是配置对象.配置对象里也有4个配置项template,自定义标签的outerHTML,它必须是用一个普通的HTML元素节点包起来,里面可以使用ms-*等指令defau...原创 2019-04-16 13:47:33 · 390 阅读 · 0 评论 -
35avalon - 指令ms-widget(组件绑定介绍)
此绑定只能应用于wbr, xmp, template, 及ms-开头的自定义标签。它将在原位置上转换成对应的组件的template的外观,加加上对应的数据与事件。如果此组件没有注册(使用avalon.component进行定义),或其存在子组件,而某个子组件没有注册,都会导致初始化失败。在对应位置上变成一个注释节点。...原创 2019-04-16 13:45:45 · 835 阅读 · 0 评论 -
34avalon - 指令ms-effect(动画绑定)
ms-effect拥有这三种绑定形式:<p ms-effect="[@configObj,{is:'fade'}">属性值为字面量,其中一个对象必须包括is属性,这用于指定特效名</p><p ms-effect="{is:fade, stagger:300}">属性值为对象字面量, 里面拥有is属性</p><p ms-effect="@f...原创 2019-04-16 13:40:17 · 784 阅读 · 1 评论 -
33avalon - 指令ms-validate(验证绑定)
avalon2新引入的指令,只能用于form元素上,用于为表单添加验证功能,它需要与ms-duplex, ms-rules指令一起配合使用。ms-validate的值应该对应一个对象,由于对象比较大,建议写在vm,像下面那样:vm.validate = { onValidateAll: function(reasons){ //返回一个数组,如果长度为零说明没有错 },...原创 2019-04-16 12:50:58 · 1023 阅读 · 0 评论 -
32avalon - 指令ms-rules(自定义验证规则)
直接上代码:<script> var vm = avalon.define({ $id: "validate2", firstname: '司徒正美', lastname: '', username: '', password: '', confirm_password: '',...原创 2019-04-16 12:38:46 · 844 阅读 · 0 评论 -
31avalon - 指令ms-rules(验证规则绑定)
avalon内置验证规则验证规则用法这些验证规则要求使用ms-rules指令表示,要求为一个普通的JS对象。此外要求验征框架能动起来,还必须在所有表单元素外包一个form元素,在form元素上加ms-validate指令。 var vm = avalon.define({ $id: "validate1", aaa: "", bbb: ''...原创 2019-04-16 11:53:49 · 759 阅读 · 0 评论 -
30avalon - 指令ms-duplex(同步后的回调)
ms-duplex还有一个回调,data-duplex-changed,用于与事件绑定一样, 默认第一个参数为事件对象。如果传入多个参数,那么使用$event为事件对象占位。<input value="11" ms-duplex-number="@aaa" data-duplex-changed="@fn"/>...原创 2019-04-16 11:43:12 · 529 阅读 · 0 评论 -
29avalon - 指令ms-duplex(数据验证)
avalon数据验证必须在所有表单元素的上方form元素加上ms-validate指令, 当前元素加上ms-rules才会生效<form ms-validate="@validation"> <input ms-duplex='@aaa' ms-rules='require,email,maxlength' data-maxlength='...原创 2019-04-16 11:41:50 · 551 阅读 · 0 评论 -
28avalon - 指令ms-duplex(数据格式化)
一般来说,数据格式化是由过滤器实现的,如<input value="11" ms-duplex="@aaa | uppercase"/>但这里有一个隐患,可能导致死循环, 因此建议放在事件回调中实现.<body ms-controller="test"> <script> var vm = avalon.define({ ...原创 2019-04-16 11:32:42 · 596 阅读 · 0 评论 -
27avalon - 指令ms-duplex(数据转换)
上面我们已经提到一个数据转换器ms-duplex-checked了.那只能用于checkbox与radio.为什么会有这种东西呢?因为无论我们原来的数据类型是什么,跑到表单中都会变成字符串,然后我们通过事件取出来 它们也是字符串,不会主动变回原来的类型.我们需要一种机制保持数据原来的类型,这就是数据转换器. avalon内置了4种过滤器:ms-duplex-string="@aaa"ms...原创 2019-04-16 11:30:09 · 934 阅读 · 0 评论 -
26avalon - 指令ms-duplex(各表单元素用法)
双工绑定双工绑定是MVVM框架中最强大的指令.react推崇单向数据流,没有双工绑定, 那么需要rudex等额外的库来实现相同的功能.双工绑定只要用于表单元素上.或当一个div设置了contenteditable为true,也可以用ms-duplex指令.各个表单元素的用法<body ms-controller="test"> <script> ...原创 2019-04-16 11:26:35 · 2464 阅读 · 0 评论 -
25avalon - 指令ms-on*(事件绑定)
ms-on* 介绍此绑定为元素添加交互功能,对用户行为作出响应. ms-on-*="xxx"是其使用形式, *代表click, mouseover, touchstart等事件名,只能与小写形式定义, xxx是事件回调本身,可以是方法名,或表达式。默认事件回调的第一个参数是事件对象,并进行标准化处理. 如果你是用ms-on-click="@fn(el, 1)“这样的传参方式,第一个传参被你占用...原创 2019-04-16 11:07:18 · 1856 阅读 · 0 评论 -
24avalon - 指令ms-for(循环绑定)
ms-for可以同时循环对象与数组<ul> <li ms-for="el in @aaa">{{el}}</li></ul>小括号里面的变量是随便起的,主要能符合JS变量命名规范就行,当然,也不要与window, this这样变量冲突. <li ms-for="($index, el) in @arr">{{$index...原创 2019-04-16 10:56:49 · 2399 阅读 · 0 评论 -
23avalon - 指令ms-visible(可见性绑定)
这是通过修改元素的style.display值改变元素的可见性, 要求属性值对应一个布尔,如果不是布尔, avalon会自动转换值为布尔。<body :controller="test"> <script> var vm = avalon.define({ $id: "test", aaa: "这是被隐藏的内容" toggle: false }...原创 2019-04-16 10:47:02 · 540 阅读 · 0 评论 -
22avalon - 指令ms-if(if绑定)
通过属性值决定是否渲染目标元素, 为否时原位置上变成一个注释节点。代码<body :controller="test"> <script> var vm = avalon.define({ $id: "test", aaa: "这是被隐藏的内容" toggle: false }) </script> <p...原创 2019-04-16 10:45:56 · 2169 阅读 · 0 评论 -
21avalon - 指令ms-hover(hover绑定)
用于类实现:hover伪类的效果, 当用户鼠标移动元素上方时添加几个类名, 鼠标移走时将刚才的 类名移除用法类似于类名绑定<body ms-controller="test"> <script> avalon.define({ $id: 'test', aaa: "aaa bbb ccc", ...原创 2019-04-16 10:38:45 · 525 阅读 · 0 评论 -
20avalon - 指令ms-active(active绑定)
为元素添加:active效果,当元素被点击时添加几个类名, 鼠标弹起后则立即移除 <body ms-controller="test"> <script> avalon.define({ $id: 'test', aaa: "aaa bbb ccc", ...原创 2019-04-16 10:36:52 · 462 阅读 · 0 评论 -
19avalon - 指令ms-class(类名绑定)
类名绑定用于为元素节点添加几个类名, 因此要求属性值为字符串或字符串数组字符串形式下,可以使用空格隔开多个类名字符串数组形下, 可以在里面使用三元运算符或与或号示例代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>...原创 2019-04-16 10:34:45 · 2055 阅读 · 0 评论 -
18avalon - 指令ms-text 与 ms-html
ms-text文本绑定文本绑定是最简单的绑定,它其实是双花括号插值表达式的一种形式它要求VM对应的属性的类型为字符串, 数值及布尔, 如果是null, undefined将会被转换为空字符串<span ms-text="@aaa">不使用过滤器</span><span ms-text="@aaa | uppercase">使用过滤器</span&g...原创 2019-04-16 10:31:41 · 1128 阅读 · 0 评论 -
17avalon - 指令ms-css(样式绑定)
CSS绑定用于为元素节点添加一组样式, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为样式名, 键值为样式值为元素添加样式示例代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>...原创 2019-04-16 10:27:05 · 1145 阅读 · 0 评论 -
16avalon - 指令ms-attr(属性绑定)
属性绑定用于为元素节点添加一组属性, 因此要求属性值为对象或数组形式. 数组最后也会合并成一个对象.然后取此对象的键名为属性名, 键值为属性值为元素添加属性。示例代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>...原创 2019-04-16 10:19:40 · 2842 阅读 · 0 评论 -
15avalon - 指令ms-important(important绑定)
这个指令是用于圈定某个VM的作用域范围(换言之,这个元素的outerHTML会被扫描编译,所有ms-*及双花括号替换成vm中的内容),ms-important的属性值只能是某个VM的$id。ms-important的元素节点下面的其他节点也可以使用ms-controller或ms-important。与ms-controller不一同的是,当某个属性在ms-important的VM找不到时,就...原创 2019-04-16 10:14:50 · 520 阅读 · 0 评论 -
14avalon - 指令ms-controller (controller绑定)
ms-contoller介绍ms-contoller这个指令是用于圈定某个VM的作用域范围(换言之,这个元素的outerHTML会被扫描编译,所有ms-*及双花括号替换成vm中的内容),ms-controller的属性值只能是某个VM的$id注意:ms-controller的元素节点下面的其他节点也可以使用ms-controller每个VM的$id可以在页面上出现一次, 因此不要在ms-...原创 2019-04-16 10:09:29 · 1504 阅读 · 0 评论 -
13avalon - 指令ms-skip (skip绑定)
让avalon的扫描引擎跳过某一部分区域, 方便能原样输出,合理使用ms-skip能大大提高性能。示例代码:<body :controller="test"><script>var vm = avalon.define({ $id: "test", aaa: "XXXX" toggle: false})</script><div ...原创 2019-04-16 10:00:02 · 389 阅读 · 0 评论 -
12avalon - 插值表达式
位于文本节点中的双重花括号,当然这个可以配置.此指令其中文本ms-text指令的简单形式.<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="...原创 2019-04-16 09:51:34 · 450 阅读 · 0 评论 -
11avalon - 指令
avalon指令介绍avalon的指令是一个非常重要的东西,它用来引入一些新的HTML语法, 使元素拥有特定的行为。 举例来说,静态的HTML不知道如何来创建和展现一个日期选择器控件。 让HTML能识别这个语法,我们需要使用指令。 指令通过某种方法来创建一个能够支持日期选择的元素。指令一共拥有3种形式:插值表达式自定义标签绑定属性其中绑定属性的种类是最多的,它们都位置于元素节点中,以...原创 2019-04-16 09:37:26 · 366 阅读 · 0 评论 -
10avalon - vm运作原理
avalon之所以使用Proxy, Object.defineProperty或VBScript来构造vm,那是因为它们创建出来的对象有一种自省机制,能让我们得知vm正在操作或访问了我们的对象。对于Object.defineProperty或VBScript,主要是靠将普通属性变成访问器属性。访问器属性内部是拥有两个方法,setter与getter。当用户读取对象的属性时,就将调用其getter...原创 2019-04-16 09:28:10 · 344 阅读 · 0 评论 -
09avalon - vm是如何作用视图
我们需要在页面上,使用ms-controller或ms-important来圈定每个vm的作用范围。简单的说,就是可以使用ms-controller或ms-important来指定作用域范围,才能使用avalon属性或方法。如下图(avalon只能作用域body包围的里面):当页面domReady时,vm就将自动将其里面的数据替换到各种指令中去,实现视图刷新效果。注意一个vm只能在页面上...原创 2019-04-15 19:50:47 · 489 阅读 · 0 评论 -
08avalon - 数据模型($model)
是指VM中的 $ model属性,它是一个纯净的javascript对象,去掉 $ id, $ watch等方法或属性,可以直接通过 $ .ajax提交给后端,当然我们 还可以通过JSON.parse(JSON.stringify(vm.$model))干掉里面的所有函数。注意,不要修改 $ model,你只能通过VM来改动 $ model,否则在1.5中,$model是只读的,每次都是返回一...原创 2019-04-15 19:44:15 · 765 阅读 · 0 评论 -
07avalon - 监控数组与非监控属性
监控数组操作此数组的方法会同步视图的特殊数组,它是由VM中的数组自动转换而来。方便与ms-repeat, ms-each配合使用, 能批量同步一大堆DOM节点。监控数组的方法与普通数组没什么不同,它只是被重写了某一部分方法,如 pop, shift, unshift, push, splice,sort, revert。其次添加了四个移除方法,remove, removeAt, removeA...原创 2019-04-15 19:29:13 · 555 阅读 · 0 评论 -
06avalon - vm计算属性 ($computed)
计算属性是监控属性的强化版,它必须依赖于 1个或多个监控属性。通过普通的监控属性实现对视图的监听,它自身的变化也由监控属性进行驱动。计算属性集中定义在$computed对象中。有多种形式。//函数形式的只读计算属性avalon.define({ $id: 'test', firstName: '333', lastName: 'xxx', $computed:...原创 2019-04-15 19:19:24 · 1024 阅读 · 0 评论 -
05avalon - vm监控属性 ($watch)
在VM中,改变它们会引起视图改变的属性。如果一个属性是 $ 开头, 或在 定义时放在$skipArray数组中 ,或是 函数或 节点元素 , 它们 都不会转换成监控属性.此外, 改变监控属性的值还会触发对应的$watch 监听回调....原创 2019-04-15 19:12:16 · 856 阅读 · 0 评论 -
04avalon - vm内部属性($id)
VM中以 $开头的属性 都是框架保留使用的特殊属性 ,大家为数据起名字时要小心避开这些以$开头的属性,目前除了 $id, $events, $watch, $fire, $model比较稳定外, 其他系统属性在不同版本存在增删的情况.$id :vm的名字$watch : 用于添加监听函数$fire : 用于触发监听函数$events:用于储存监听函数$model :返回一个纯净的J...原创 2019-04-15 19:08:25 · 691 阅读 · 0 评论 -
03avalon - vm介绍
avalon的所有操作都是围绕vm进行。 vm,亦即view model,视图模型。 只要我将一个JS对象添加一个$id属性, 再放到avalon.define方法里面,就能得到一个vm。例如: var vm = avalon.define({ $id: "start", name: "test"})vm是一种利用Proxy或 Object.definePropertie...原创 2019-04-15 18:56:32 · 410 阅读 · 0 评论 -
02avalon - avalon入门案例
先看代码<!DOCTYPE html><html> <head> <title>first example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=de...原创 2019-04-15 18:46:54 · 518 阅读 · 0 评论 -
01avalon - avalon简介
简介avalon 是一款迷你 、 易用 、 高性能 的前端MVVM框架。基于虚拟DOM与属性劫持的 ,拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。主流MVVM框架性能比较...原创 2019-04-15 18:30:08 · 458 阅读 · 0 评论