使用avalon MVVM框架打造整一套jquery ui

最新推荐文章于 2021-04-22 17:29:31 发布
最新推荐文章于 2021-04-22 17:29:31 发布
阅读量240 收藏 1
点赞数
文章标签： JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cheng19840218/article/details/84429865
版权

    为了验证avalon的可用性与高效性，我用它重新实现jQuery ui。打造过程如下，直接到jQuery ui官网，查看它们的运行效果，不看其JS源码，然后取其HTML结构修改。使用了MVVM编写代码，能保证你思维清晰畅顺，不用总在DOM逻辑与数据处理中跳过来蹦过去。仅用一天，实现8成以上的功能，而且JS代码量非常少，都是原来的百分之几至十之间。基本上，现在avalon的源码挑不出什么毛病。以后从mass分离出ajax，effect等模块来，构建成avalon的一个组件，这些UI组件的可用性就更高了。

      即时可运行的例子链接

     avalon MVVM框架的官网



 

 

 

 

 

cheng19840218
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
pandyle：用于jQuery的MVVM库
02-04
潘迪 pandyle秉承jquery-少写，多做的设计理念，主要关注点即在于简单，它的大小只有7kb（压缩后），易学易用，努力减少你书写的代码量，并且更贴合合传统的jquery的书写方式。 特色 简单：非常简单易上手，无需学习webpack，es6等尖端知识，基本看一遍文档即可进行开发 兼容性良好：pandyle的兼容性可以兼容jquery版本，因此使用1.X版本的jquery可兼容至ie8浏览器 输入与视图模型分离：pandyle使用输入类来独立的处理用户输入，根据表单元素的名称属性自动生成数据模型，无需预先定义 同步操作：pandyle的所有操作都是同步的，代码逻辑清晰的同时保证了同其他j
avalon框架系列
天暮雨的博客
10-08 1825
之前找工作面试的时候,第一次听说avalon框架,说是可以兼容到IE8,当时就觉得相当厉害. 在入职之后,入职培训就是学习这个框架的内容,初次了解,感觉和Vue框架的语法很像,但是具体之处又有不同. 指令方面很像Vue,比如:ms-for ms-if ms-visible ms-class.... 还有过滤器,avalon框架自定义了很多过滤器方法,写法和Vue一样: xx.xxx | tr...
前端 MVVM 框架 Avalon
前端栈开发
07-25 342
Avalon 详细介绍 avalon是一个功能强大，体积小巧的MVVM框架。它遵循“操作数据即操作DOM”的理念，让你在代码里基本见不到一点DOM操作代码。DOM操作全部在绑定后，交给框架处理。相当后端有了ORM一样，不用你手写SQL，提高生产力！ 与其它js框架相比，同样实现著名的todos功能,（参见todomvc官网），在所有MV*的实现中aval...
轻量级前端MVVM框架avalon：整体架构
jhidwenkal
07-14 745
单看这个图呢,还木有说明,感觉有点蛋疼,作者的将夜 www.jiangyea.com抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面，绑定事件，切换类名，什么脏活都揽 右边是ViewModel 视图模式,就是开发者通过avalon.define("xxx", function(vm){vm.
MVVM框架 avalon2.0-mmRouter-webpack2 脚手架
个人新博客: https://cbbfcd.github.io/
09-15 1098
框架采用了类Mobx-React框架 wukong的结构。轻量级mvvm框架。地址:https://github.com/cbbfcd/avalon2-mmRouter-starter.git欢迎star
avalon：小而美，轻量级前端MVVM框架
02-26
摘要：迷你易用MVVM框架avalon，凭借其出色的性能表现，已成为国内举足轻重的框架。框架作者司徒正美将在本文深度剖析avalon，带你领略avalon出奇制胜之处。这几年，国内在造轮子上非常狂热，几乎每个大公司都有自己...
vue,angular,avalon这三种MVVM框架优缺点
11-22
Avalon.js是司徒正美老师开发的一个迷你MVVM框架，最早在2012年发布，专注于简化视图模型和视图之间的绑定。Avalon.js的优点包括： 1. **简单易用**：在HTML中添加绑定，通过JavaScript定义ViewModel并扫描即可运行...
迷你MVVM框架---avalonjs.html
09-04
一个迷你框架
基于司徒大神的轻量级MVVM框架avalon20搭建的一个简易的脚手架
08-10
本文将深入探讨基于司徒大神创建的轻量级MVVM框架——Avalon2.0，如何搭建一个简易的脚手架。Avalon2.0是一个成熟的JavaScript框架，它为开发者提供了构建复杂前端应用的能力，尤其适用于单页应用程序（SPA）的开发...
前端框架Avalon：简介
热门推荐
南城叁蜀
09-19 1万+
avalon 2 迷你 、 易用 、 高性能 的前端MVVM框架 测试页面avalon仓库perf目录下的index.html, index.*.html文件 简介 avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用
jeact：JQuery中使用虚拟DOM开发组件
02-03
杰特 在JQuery环境下用MVVM开发复杂组件，仅几kb超小体积。 定义一个开关组件，挂载到jquery后， $('#el').switch()就可以将#el变成一个开关组件，和$('#el').val()可以获取值（ js也能取），放进form也能直接提交，专门解决老旧jquery项目维护难的问题。 支持环境 边缘 火狐浏览器 Chrome 最近2个版本 最近2个版本 最近2个版本 安装 npm npm i jeact --save 纱 yarn add jeact 或者直接约会 < script src =" https://qqabcv520.github.io/jeact/js/
avalon与layui、easyui融合日志
zone
07-21 3181
select  动态增加option 需要执行 avalon.scan,  form.render();
jQuery的MVP模式和Vue的MVVM模式
心生的小鱼专栏
04-22 708
MVP设计模式。M指数据层，V指视图层，P指控制层。 M：数据层，用于请求数据； V：视图层，用于DOM展示数据； P：控制器，控制数据层去请求数据，以及控制视图层展示数据。 例如，点击视图层的按钮，触发控制器里面的方法。控制器可以直接改变视图，比如操作DOM、增添样式；控制器也可以触发数据层去请求数据，然后再用返回的数据来填充DOM，改变视图。这就是上图展示的含义，可见控制层是MVP模式的关键。 在MVP设计模式里，有很大一部分精力用在了操作DOM上。在大型项目中这一问题更为明显，大概有30
MVVM
xiamoziqian的博客
05-06 367
jquery实现to-do-list <div> <input type="text" name="" id="txt-title" /> <button id="btn-submit">submit</button> </div> <div> <ul id="ul-list"></ul> &lt...
avalon学习笔记ui篇-datepicker篇
Lee_Lei0213的博客
04-28 168
一、介绍 　　首先avalon是我接触的第一个mvvm框架，angularjs也能实现基本同样的功能，但是老外的产物都是比较先进的，他们早已放弃在IE下摸爬滚打，作为大天朝的我们，还是必须要矜矜业业的伺候着IE6，这就是我为什么选择avalon，没用angularjs的原因。官方文档都是老写法，这让我忍不住深深的吐槽正美，好吧，维护一个框架是艰难的，正美加油吧。 二、日历插件篇dat...
AvalonJs入门二 复选框全选反选+layui分页
Oracion_wj的博客
07-13 1493
今天给大家带来初识Avalon的第二篇文章，复选框的全选操作和Avalon+layUI的分页。
jquery框架和mvvm框架的类名操作性对比
weixin_30480075的博客
12-08 198
操作元素选取的是img元素 mvvm选取的是avalon框架 操作类名上感觉还是jquery有着很强的优势，毕竟有着toggle方法 mvvm上实现相同效果还得做逻辑判断，比较麻烦，代码行数就多了几行。 点击看效果demo <!DOCTYPE html> <html lang="en"> <head> <meta charset...
jquery框架和mvvm框架的元素插入对比
weixin_30587927的博客
12-06 299
这里的mvvm框架选用的是avalon. 元素插入用的是img做例子。 点击看效果demo 核心代码： 　　 //jq way var picHref = $("<a></a>").attr("class","zxx_image_list"); var picSrc = $("<img</img>").attr("src",$img[c...
MVVM框架和jQuery的区别
WarrenLee的博客
09-29 4960
1 一个MVVM框架和jQuery操作DOM节点有什么区别？ JQ操作DOM节点是要用$符号对dom节点进行属性改变，事件注册，事件触发，例如， Hello, BatMan! var name = 'Homer'; $('#name').text(name); 而，MVVM框架来实现同样的功能，我们首先并不关心DOM的结构，而是关心数据如何存储。最简单的数据存储方式是使用JavaScript对象：...
Avalon JS入门指南：MVVM框架深度解析
Avalon入门指南是一份针对有一定编程经验的程序员的宝贵资源，它深入介绍了AvalonJS，一个轻量级且易于使用的MVVM（Model-View-ViewModel）框架。AvalonJS最初由开发者为解决前端代码中的视图过多且业务逻辑复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值