移动端minimvvm框架qvm实现

gitHub地址

1,移动端minimvvm框架qvm实现

qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路,并进行简化封装,目前使用的zepto基本依赖库,使用最少的代码实现了基础功能版。

2,为什么要做它

PC浏览器时代,实现mvvm有着麻烦的兼容性问题。而在移动浏览器时代,浏览器原生的支持可以让我们用最少的代码来实现一个mvvm框架库,来最大程度的减少移动端业务代码的开发工作。预计对于中大型的移动前端应用项目,使用mvvm能减少至少30%的业务量,让项目更容易维护。 (不过目前仍有很多不完善的地方后面需要持续改进)

3,及其简单的API介绍

directive: 以q-开始的属性为我们定义的元素动作指令

vm模型结构介绍:
    {
    $id: 823832887973495, //qvm对象的全局id,每个qvm对象对应一个
    $elem: #div, //对应的view
    $model: {  //viewModel,通过directive关联view和model的操作
        text:{
            ns: ns, //获取对象data或指令的namespace
            accessor: accessor, //同一的外部访问器,vm通过修改它来改变
            key: text, //指令名称
            directive: [directive], //指令集
            setter: function, //对象设置方法
            getter: function, //对象获取值方法
            tpl: #div //模板字符串,部分指令需要使用,如repeat
            //后续可能还要增加
        }
    },
    data: {      //对应的model,即数据层
        }
    }
3.1 q-text 改变节
    <div id="demo" q-text='text'></div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var vm = qvm.get({
        selector: '#demo',
        data:{
            text: '<h2>Hello World!</h2>'
        }
    });
    setTimeout(function(){
        vm.text.accessor = '<h2>Fuck World!</h2>';    //渲染html,通过改变accessor改。
    },4000)
    </script>
3.2 q-class 改变节点class属性
    <style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    </style>
    <div id="demo" q-text='text' q-class="color"></div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var vm = qvm.get({
        selector: '#demo',
        data:{
            text: '<h2>Hello World!</h2>',
            color: 'red'
        }
    });
    setTimeout(function(){
        vm.text.accessor = '<h2>Fuck World!</h2>';
        vm.class.accessor = 'green';
    },4000)
    </script>
3.3 q-attr数据属性赋值
    <div><a><img id="demo" q-attr-src="img" width="50" height="30"></a></div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var vm = qvm.get({
        selector: '#demo',
        data: {
            img: 'http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg'
        }
    });
    setTimeout(function(){
        vm.attr_src.accessor = 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg';
    },4000);
    </script>

vm.class.accessor = 'green'; 改变元素的class类,从red改为green。 这里注意一下使用attr- 和data-指令使用attr_src和data_src来读取访问器,后面需要统一接口。

3.4 q-data数据属性赋值
    <div id="demo" q-data-title="text"><a><img q-attr-src="img" width="50" height="30"></a></div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var vm = qvm.get({
        selector: '#demo',
        data: {
            text: 'PS 大神教程',
            img: 'http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg'
        }
    });
    setTimeout(function(){
        vm.data_title.accessor = '艺术人生';
    },4000);
    </script>

此方法用于改变data属性。

3.5 q-repeat 嵌套使用
    <style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    </style>
    <div id="demo" q-class="color" q-repeat="list">
        <div>
        <img q-attr-src="img" width="50" height="30"><span q-text="title" q-class="color"></span>
        </div>
    </div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var list =[{
                img: 'http://9.url.cn/edu/banner/img/10b0af94_760_300.jpg',
                title: '音乐改变世界'
            },{
                img: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg',
                title: 'PS 大神教程'
            },{
                img: 'http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg',
                title: '艺术人生'
            }];
    var vm = qvm.get({
        selector: '#demo',
        data:{
            text: '<h2>Hello World!</h2>',
            color: 'red',
            list: list
        }
    });
    setTimeout(function(){
        delete list[2];
        list[0].title='music change the world';
        list[1].title='PS master learning';
        vm.class.accessor = 'green';
        vm.repeat.accessor = list;
    },4000);
    </script>
delete list[2];
list[0].title='music change the world';
list[1].title='PS master learning';
改变repeat渲染数组的内容,只对数组进行修改和删除长度。
3.6 q-对象内部渲染
    <style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    </style>
    <div id="demo" q-repeat="list">
        <div>
            <span q-class="color" q-text="title"></span>
            <span>
                <img q-attr-src="img.src" width="50" height="30">
            </span>
        <div>
    </div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var data = {
        title: '<h2>Hello World!</h2>',
        color: 'red',
        img: {
            src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg'
        }
    };
    var vm = qvm.get({
        selector: '#demo',
        data: {
            list: data
        }
    });
    setTimeout(function(){
        data.color = 'green';
        data.title = '<h2>Fuck World!</h2>';
        data.img.src = 'http://9.url.cn/edu/banner/img/10b0af94_760_300.jpg';
        vm.repeat.accessor = data;
    },4000);
    </script>

qvm支持嵌套渲染,但是viewModel以定义的最外层数据为准。

3.7 q-on简单事件绑定

定义的动作和事件名,目前子节点上的on代理在根元素上,避免了重复绑定,如果根节点和根节点同时含有on方法,则按照冒泡的原则进行事件处理。实现时使用了根节点循环向下传递的方式。

示例
    <style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    </style>
    <div id="demo" q-repeat="list" q-on="click|action">
        <div>
            <span q-class="color" q-text="title"></span>
            <span>
                <img q-attr-src="img.src" width="50" height="30">
            </span>
        <div>
    </div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var data = {
        title: '<h2>点我!</h2>',
        color: 'red',
        img: {
            src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg'
        }
    };
    var vm = qvm.get({
        selector: '#demo',
        data: {
            list: data
        },
        action: function(){
            alert('点击事件!');
        }
    });
    </script>

目前实现了节点事件代理到最外层的qmv对象元素上。不对内部元素做绑定。

3.8 q-*自定义directive
    <style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    </style>
    <div id="demo" q-repeat="list" q-on="click|action" q-self='selfProcess'>
        <div>
            <span q-class="color" q-text="title"></span>
            <span>
                <img q-attr-src="img.src" width="50" height="30">
            </span>
        <div>
    </div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <script type="text/javascript" src="js/qvm.js"></script>
    <script>
    var data = {
        title: '<h2>点我!</h2>',
        color: 'red',
        img: {
            src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg'
        }
    };
    var vm = qvm.get({
        selector: '#demo',
        data: {
            list: data
        },
        action: function(){
            alert('点击事件!');
        },
        selfProcess: function(key, vm){
            console.log(key, vm);
            alert('我是一个自定义处理指令!嘿嘿嘿~')
        }
    });
    </script>

子定义的指令需要遵守一定的规则,例如下面q-self对应的指令为selfProcess的函数,则节点扫描时会自动执行self指令的selfProcess函数。

TODO: 更好的dirtycheck实现,类似virtual dom的方式~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

PHP的一句话木马代码和函数eval的简介

其实这段代码属于基础类的一句话,功能仅限于验证漏洞了,实际中太容易被查出来了,也就是早上雨落直接带图说检测到木马文件

2596
来自专栏十月梦想

ES6语法基础之let用法

简单讲解一些ES6语法基础!了解一些es6新特性!当然下一步需要学习的vue框架也是基于es6的,因此很有必要学习下es6语法,接下来几次简单讲解es6语法!

753
来自专栏PHP在线

了解这些PHP小技巧吗?

1. $_POST并非是HTTP POST过来的数据, 如json格式的数据就没法接受,这是因为由于历史原因,php只能解析Content-Type为 appl...

2585
来自专栏破晓之歌

vuex入门,详细的讲解(小知识积累) 原

1.vuex入门,详细的讲解:https://segmentfault.com/a/1190000011716027

652
来自专栏魏琼东

一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-演示ORM的基本操作

系统回顾           前面的四篇文章我详细的介绍了AgileEAS.NET平台中统一数据访问(UDA)组件的用法,分析了两种数据处理流程的优缺点,以及基...

2015
来自专栏一“技”之长

Swift讲解专题六——流程控制 原

        一种编程语言的强大与否,很大程度上取决于其提供的程序流程控制方案,就如使用汇编语言实现复杂的程序流程是一件痛苦的事情。Swift中提供了许多强大...

604
来自专栏云飞学编程

Python学习,字符串格式化方法不止%和farmat,还有f-string

一说起字符串格式化,我们脑海里最先出现的必然是%和format,但是在python3.6之后,又更新了一种更快更便捷的方法,那就是f-string!它是由PEP...

1062
来自专栏C/C++基础

C/C++头文件的作用和用法

示例代码编译运行环境:Windows 64bits+VS2017+Debug+Win32。

921
来自专栏河湾欢儿的专栏

第五节正则

632
来自专栏玄魂工作室

如何学python-第六课 流程控制-IF,ELSE,条件语句

在上一篇文章里,我们介绍了流程控制的概念,并介绍了布尔类型。今天,我们会把上节课学到的东西与 if、else结合起来使用。 条件判断语句 条件判断语句会根据语句...

3328

扫码关注云+社区