司徒正美
发表于
2016-06-29 03:27:00

一步步编写avalon组件02：分页组件 - 司徒正美

【摘要】本章节，我们做分页组件，这是一个非常常用的组件。grid, listview都离不开它。因此其各种形态也有。本章节教授的是一个比较纯正的形态，bootstrap风格的那种分页栏。我们建立一个ms pager目录，控制台下使用npm init初始化仓库。然后我们添加dependencies配置项阅读全文 ...继续阅读 (54)

司徒正美
发表于
2016-06-28 03:11:00

一步步编写avalon组件01：弹出层组件 - 司徒正美

【摘要】"avalon2" 已经稳定下来，是时候教大家如何使用组件这个高级功能了。组件是我们实现叠积木开发的关键。 "avalon2" 实现一个组件非常轻松，并且如何操作这个组件也比以前的avalon2，还是react, angular轻松多了，不需要flux这样奇怪的额外设施。 "avalon2" 的组阅读全文 ...继续阅读 (38)

司徒正美
发表于
2016-06-27 11:49:00

avalon2学习教程15指令总结 - 司徒正美

【摘要】[avalon][1] 的指令在上一节已经全部介绍完毕，当然有的语焉不详，如ms js。本节主要总结我对这方面的思考与探索。 MVVM的成功很大一语分是来自于其指令，或叫绑定。让操作视图的功能交由形形式式的指令来代劳。VM，成了一个大管家。它只一个反射体。我们对它的操作，直接影响到视图。因此俗称“操阅读全文 ...继续阅读 (35)

司徒正美
发表于
2016-06-27 11:46:00

avalon2学习教程14动画使用 - 司徒正美

【摘要】avalon2实际上没有实现完整的动画模块，它只是对现有的CSS3动画或jquery animate再包装一层。我们先说如何用CSS3为avalon实现动画效果。首先要使用avalon.effect注册一个特效。所有注册了的特效，都可以在avalon.effects对象中找到。 css3动画要求阅读全文 ...继续阅读 (52)

司徒正美
发表于
2016-06-27 07:35:00

avalon2学习教程13组件使用 - 司徒正美

【摘要】avalon2最引以为豪的东西是，终于有一套强大的类Web Component的组件系统。这个组件系统媲美于React的JSX，并且能更好地控制子组件的传参。 avalon自诞生以来，就一直探索如何优雅的定义组件使用组件。从avalon1.4的ms widget，到avalon1.5的自定义标签。而阅读全文 ...继续阅读 (52)

司徒正美
发表于
2016-06-27 07:32:00

avalon2学习教程12数据验证 - 司徒正美

【摘要】avalon2砍掉了不少功能（如ms include,ms data），腾出空间加了其他更有用的功能。数据验证就是其中之一。现在avalon2内置的验证指令是参考之前的[oniui验证框架][1]与[jquery validation][2]。 avalon内置验证规则有规则描述 require阅读全文 ...继续阅读 (37)

司徒正美
发表于
2016-06-26 07:54:00

avalon2学习教程11数据联动 - 司徒正美

【摘要】在许多表单应用，我们经常遇到点击一个复选框（或下拉框）会引发旁边的复选框（或下拉框）发生改变，这种联动效果用[avalon][1]来做是非常简单的。因为[avalon][2]拥有经典MVVM框架的一大利器，[双向绑定][3]！绝大部分的指令是从vm单向拍到页面，而双向绑定，则通过监听元素的value阅读全文 ...继续阅读 (53)

司徒正美
发表于
2016-06-26 07:51:00

avalon2学习教程09循环操作 - 司徒正美

【摘要】avalon2的循环指令的用法完全改变了。avalon最早期从knockout那样抄来ms each,ms with，分别用于数组循环与对象循环。它们都是针对元素内容进行循环。后来又从angular那里抄来了ms repeat，这是循环元素内部的。到avalon2，这三个指令合并成一个ms fo阅读全文 ...继续阅读 (39)

司徒正美
发表于
2016-06-26 06:45:00

avalon2学习教程08插入移除操作 - 司徒正美

【摘要】本节介绍的ms if指令与ms visible很相似，都是让某元素“看不见”，不同的是ms visible是通过CSS实现，ms if是通过移除插入节点实现。 ms if的用法与1.×时别无二致，只要值是真，就插入，为假时，就在原位置上替换为一个注释节点做占位符。注意1：在avalon1. 中，阅读全文 ...继续阅读 (28)

司徒正美
发表于
2016-06-23 04:02:00

现在算法是新锐前端框架成功的重要因素 - 司徒正美

【摘要】随着前端MVVM的流行，小型框架现在越来越难存活了！react, angular等打着大公司旗号的框架占了半壁江山，而avalon以其良好兼容性在国内份额不断上升。前端也与后端一样，遵循马太效应，强者愈强，弱者愈弱。最后只剩下两种框架，不断被人发现BUG的框架与没有人用的框架。MVVM本来就是一种阅读全文 ...继续阅读 (39)

司徒正美
发表于
2016-04-20 15:16:00

avalon2学习教程06样式操作 - 司徒正美

【摘要】avalon2的ms-css的变革思路与ms-attr一样，将多个操作合并成到一个对象里面处理，因此没有ms-css-name="value"，只有ms-css="Object"或ms-css="Array". 注意，当你用对象字面量的方式传参时，注意存在－号的键名要用“”号括起来。在avalon阅读全文 ...继续阅读 (26)

司徒正美
发表于
2016-04-20 14:17:00

avalon2学习教程05属性操作 - 司徒正美

【摘要】avalon2与avalon1的属性操作虽然都是使用ms-attr，但用法完全不一样。 avalon1是这样操作属性的有多少个属性就写多个ms-attr-。其中不能省略。此外，还存在ms-title, ms-alt，ms-src, ms-href, ms-selected, ms-checked等阅读全文 ...继续阅读 (60)

司徒正美
发表于
2016-04-15 06:12:00

avalon2学习教程04显示隐藏处理 - 司徒正美

【摘要】今天的主角是ms-visible，它的效果类拟于jQuery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。不过显示不是 display:none这么简单，众所周知，display拥有inline, inline-block, block, list-item, t阅读全文 ...继续阅读 (32)

司徒正美
发表于
2016-04-13 03:03:00

avalon2学习教程 03数据填充 - 司徒正美

【摘要】数据填充是一个模版最基础的功能，直接从JSON（vm）取出数据，放到适当的位置上。在静态模板中，不区分文本与HTML，只看你的字符串是否有< >来决定生成文本节点与元素节点。但MVVM中，这两种是严格区分的。一般来说，我们只要求填文本，不要填HTML。填HTML有点危险！在avalon1中，存在四阅读全文 ...继续阅读 (28)

司徒正美
发表于
2016-04-06 16:11:00

avalon2学习教程02之vm - 司徒正美

【摘要】avalon2的vm是一个非常重要的东西，其设计原型最初脱胎于knockout.js，但到avalon1.6中，终于寻得自己的方案，更精简，更易用，更魔幻。 vm是一种特殊的数据结构，看起来像普通对象，但它大部分属性都被重写了，从而实现“操作数据即操作视图”的效果。我们在定义vm时，一般需要定义$i阅读全文 ...继续阅读 (22)

司徒正美
发表于
2016-04-06 13:39:00

avalon2学习教程01 - 司徒正美

【摘要】经过难苦奋战，avalon2终于面世了。这花了大半年时间，其中1.6还胎死腹中。长达半年没有产出，我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致，当然也添加了一些1.5的功能，此外随着react的红红火火，对它的研究，也集成到此框架中。我们先来一个简单的例子 1 <!DOC阅读全文 ...继续阅读 (44)

司徒正美
发表于
2016-04-06 04:49:00

avalon1与avalon2的异同点 - 司徒正美

【摘要】avalon2并不向下兼容avalon1，但许多API与指令很相似，迁移成本比较低。此外，良好的性能与强大的功能是你迁移的动力。下面是一个列表，如有提问尽管提出。 avalon1与avalon2的异同一览表其中变量名前加上@，是一个很大的区别。虽然avalon也可以通过内部分析得到，但可能有缺失阅读全文 ...继续阅读 (41)

司徒正美
发表于
2016-01-28 03:24:00

表单元素之搭车系 - 司徒正美

【摘要】对于表单元素，除了reset元素，只要有name与value都能提交因为在我们印象中，只有能选择的，能填空的，就是我们要提交的。但浏览器还提供一种机制，让我们能让除了用户自己添加的东西外，还能偷偷地提交“额外”的东西。这些搭顺风车的东西，目前有三种，input[type=hidden],inpu阅读全文 ...继续阅读 (39)

司徒正美
发表于
2016-01-27 08:38:00

使用karma做多浏览器的UI测试 - 司徒正美

【摘要】avalon1.6开发得差不多，这次使用先进的开发理念进行开发，比如模块化，单元测试什么。。。 ui测试是重要的一环，之前用阿里的totoro，但打开浏览器不方便。于是从webdrieverio, nightwatch，一直找到karma！ karma的官网尤其烂，我搞了好久才能运行起来用到的np阅读全文 ...继续阅读 (42)

司徒正美
发表于
2016-01-25 14:29:00

webpack 自动发现 entry 的配置和引用方式 - 司徒正美

【摘要】假定我们的项目目录为如下的样子：- root/ - assets/ - app/ - global.js - index/ - index.js - auth/ ...阅读全文 ...继续阅读 (19)

司徒正美
发表于
2016-01-19 06:36:00

表单元素之下拉系 - 司徒正美

【摘要】这里特指下拉框，select。但select有两种形态，由multiple属性决定。在多选形态下，用户按住shift键就能实现多选，但用得不多，主要是占空间。那我们着重说说单选形态及其结构。下拉框是由多种元素组成，通常我们见过select套着option元素，这中间还能夹一层，optgroup就是对...阅读全文 ...继续阅读 (32)

司徒正美
发表于
2016-01-19 02:21:00

表单元素开篇 - 司徒正美

【摘要】今天开始讲述表单这个重要模块可以说,JS 最早是为表单而发明的, 因此在没有JS之前,所有操作都需要提交后端验证,发现有误再重定向回原页面,加上之前1,2KB的网速,这用户体验真是奇差无比.因此JS最初发明出来，就是做表单验证的．围绕表单，添加了各种语义化的元素，事件，属性．比如说label,在某个...阅读全文 ...继续阅读 (47)

司徒正美
发表于
2016-01-11 10:05:00

表单元素之选择系 - 司徒正美

【摘要】选择系特指input[type=radio]与input[type=checkbox]，俗话的单选框与复选框。它们都是通过checked属性决定是否能提交到后端，在传统框架中，都是将它们序列化成字符串进行提交，但新的MVVM框架，它们对应的是更语义化的东西。单选框为一个布尔，那么只要将它的na...阅读全文 ...继续阅读 (31)

司徒正美
发表于
2016-01-11 07:41:00

表单元素之输入系 - 司徒正美

【摘要】输入系的元素主要是说input[type=text],input[type=password],textarea这三种元素. 通常第一个输入用户名,第二个输入密码,第三个输入详细消息.它们都表现为一个凹入的框框,里面可以让用户输入内容,不同的是输入域只能输入一条, 输入区可以输入多行,密码域使用圆点...阅读全文 ...继续阅读 (21)

司徒正美
发表于
2016-01-07 03:52:00

搜狗浏览器下禁止浏览器自动填写用户名、密码 - 司徒正美

【摘要】搜狗浏览器下，会出现把用户设置记住密码的表单（用户名和密码）乱放在，网站中其他成对出现的用户名及密码框中.如何解决这种不负责任的可恨问题，网上有很多方案，但最终都未果。一、先把网上搜到的方案放下：1.在input上使用autocomplete="off"，但在有的浏览器上还是被记住了用户名跟密码。2...阅读全文 ...继续阅读 (108)

司徒正美
发表于
2015-12-27 09:36:00

能冒泡的事件 - 司徒正美

【摘要】每个 event 都有一个event.bubbles属性，可以知道它可否冒泡。(ref：W3定义的Event Interface)当然 W3 DOM Level 3 Events 的细则里已经附上这个表格了：Event TypeBubbling phaseabort✗beforeinput✔blur...阅读全文 ...继续阅读 (21)

司徒正美
发表于
2015-12-07 05:48:00

react native 中es6语法解析 - 司徒正美

【摘要】react native是直接使用es6来编写代码，许多新语法能提高我们的工作效率解构赋值var { StyleSheet, Text, View} = React;这句代码是ES6 中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量...阅读全文 ...继续阅读 (51)

司徒正美
发表于
2015-11-20 12:31:00

webpack异步加载业务模块 - 司徒正美

【摘要】虽然把我们用到的JS文件全部打包一个可以节省请求数，但如果打包后的JS文件过大，那么也容易出现白屏现象，许多操作失灵。而且一些区域是点到才出现，那么相关的JS其实可以剥离出这个大JS文件外。这就涉及到异步加载了。异步加载是SPA的重要构建方式之一。我们沿着上一篇的目录，这次学习webpack的req...阅读全文 ...继续阅读 (34)

司徒正美
发表于
2015-11-19 11:55:00

webpack打包avalon＋mmRouter - 司徒正美

【摘要】这是上一篇《webpack打包avalon＋oniui+jquery》的姐妹篇，avalon 的高级应用篇。大家要知道，现在最流行的网页架构就是SPA，SPA能提高用户体验。用户许多数据都在保存到本地，第二次跳回此子页时，不用重新远程请求数据与页面。avalon的mmRouter吸收了 backbo...阅读全文 ...继续阅读 (28)

司徒正美
发表于
2015-09-16 12:11:00

迷你MVVM框架 avalonjs1.5.2 发布 - 司徒正美

经过2个小版本的试水， avalon1.5这个全新的架构也终于成熟了。首先是组件的配置项，名字改了不少，让大家都满意。ms-duplex, ms-include, ms-if等指令的BUG修复。一些oniui组件也成功转换成新组件形式，总结一些套路。当然，最后我是想像react那样不使用 setTi...本文链接：迷你MVVM框架 avalonjs1.5.2 发布，转载请注明。 ...继续阅读 (42)