grootjs 简明教程

浏览数：27 / 时间：2015年06月09日

grootJs简明教程

不要迷信开发模式，任何技术都有应用的场景，没有放之四海皆准的框架。mvvm框架也是解决的一类问题，在某些时候会提高生产效率；

经过接近一个月的努力，grootJs测试版终于发布了

grootJs是一个mvvm的框架，名字取 grass 和root 两个单词的组合，既“草根”之意。在创作的中，本着尽量简单实用的原则构思完成的

grootJs不同于其他mvvm的三大亮点：

1.model模型自动回收。在框架中加入了垃圾回收机制，程序员不回再为了因不断创建大量modle不能回收，或不便于回收造成内存占用太高而烦恼

2.全新的变量值变化监模型，改善其他mvvm框架对一些动态数组中得变量变化不便于监控的问题

3.全新的ui控件开发接口，是控件的值和页面页面模型的值实现同步，操作开发的控件时就像操作html内置控件一样

还有更多的新的东西等待你的发觉....

项目地址 https://github.com/time-go/grootJs

作者联系方式:qq289880020，官方技术支持QQ群330603020 如有bug 疑问或问题请联系作者:-)

Hello word(index1.html)

<html>
<head>
    <title>hello word</title>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="groot.js"></script>
</head>
<body>
<div gt-view="myview">
    <input type="text" gt-value-change="say"><span gt-text="say"></span>

</div>
</body>
</html>
<script>
    groot.view("myview", function (vm, ve) {
        vm.say = "hello word!";
    })
    groot.sweep();
</script>

说明:程序中首先引jquery，框架的docment操作都是基于jquery的。

gt-view="myview" 是定义一个作用于为myview的范围，对应的在js里也有一个 groot.view("myview"...,这个两个是相对应得；

vm是数据模型，它有个属性为say，gt-value-change=“say”为绑定这个say属性 change 表示输入框的值变化 vm中say的值就变化；

相应 change该为blur，就是输入框失去焦点的时候 vm.say得值变化；gt-text="say"得意义找个标签的内容绑定vm.say的值；

大家可以看到随着输入框的值变化，右边标签的值也在变化

绑定事件

绑定对象

绑定数组

$self $index $first $last parent() outerParent()

grootJs的属性绑定指令

变量监控指令 gt-wach

内置模块加载器(commonjs规范)的使用