译者声明：

　　1、代码库发布在http://pablovallejo.github.io/gillie/

　　2、查看API介绍直接戳这里看整理。

Gillie是一个轻型MVC框架，受Backbone的启发实现。它提供了一些方法，可以实现RESTful HTTP请求，同时允许使用models，views和handlers来分离功能点。另外提供了事件API，从而views可以监听模型事件并采取适当行为，最终以这种方式实现了监听者设计模式。

获取代码

开发者版本 16 k

应用版本 4 K

CDN版本：

　　<script src="//cdnjs.cloudflare.com/ajax/libs/gillie/0.2.1/gillie.min.js"></script>

历史沿革：

作者曾在某具有大型代码库的javascript项目中工作，在了解backbone之后决定创建这个小型库来实现backbone的一些特性及其架构。最终我们将足够的功能添加到这个库里。

译者：这个库提供了Mvvm框架下的基本功能，同时因其体积和灵活性，可以很好的适配到手机端

构建app

Gillie 遵循MVC设计，其中控制器（controller）称为处理器（handler）。处理器是用于监听DOM事件，获取数据，并且将数据传递给模型存储。一旦模型完成了存储数据的行为，将触发一个事件，通常是与监听模型的视图（view）有关，从而重绘DOM

小知识：repaint /  reflow

理念：

Gillie目的是使开发者更简单的使用javascript开发模式，理解基本的MV*(MVVM,MVC)模型，从而更易于使用其他类似于backbone,angularJS,emberJS之类的框架。

小知识： MVVM ： 英文原版 （中文翻译）

示例一：hello world!

定义处理器：

var MainHandler = Gillie.Handler.extend({

    initialize: function() {
        alert( ‘Hello world!‘ );
    }

});

//创建handler实例
var mainHandler = new MainHandler();

定义dom处理器：

var AppHandler = Gillie.Handler.extend({

        events: {
            ‘click a‘: ‘turnRed‘
        }

    ,   turnRed: function( e ) {
            e.preventDefault();

            var target = e.currentTarget;
            $( target ).css( ‘color‘, ‘red‘ );

        }
});

// 创建处理器实例
var appHandler = new AppHandler();

示例二：todo 应用（在服务器保存数据）

模型（model）定义

当post请求完成后，将会触发模型中的事件，将实例和服务器响应返回给监听者

var TodoModel = Gillie.Model.extend({

        url: ‘http://localhost/api/‘

    ,   create: function( event ) {
            this.Post( ‘todo/‘, event );
        }

});

// 创建模型实例
var todoModel = new TodoModel();

视图（View）定义

var TodoView = Gillie.View.extend({

        initialize: function() {

            // 绑定’todo.create’事件
            todoModel.on( ‘todo.create‘, this.onCreate );
        }

    ,   onCreate: function( instance, response ) {
            alert( instance.get( ‘title‘ ) + ‘. Has been saved‘ );
        }

});

// 创建视图实例
var todoView = new TodoView();

处理器（Handler）定义

var TodoHandler = Gillie.Handler.extend({

        events: {
            ‘keypress #new-todo‘: ‘createOnEnter‘
        }

    ,   createOnEnter: function( e ) {

            var enterKey = 13
            ,   currentTarget = e.currentTarget;

            if ( e.which != enterKey ) return;

            var title = $( target ).val();
            todoModel.set( ‘title‘, title )
                .create( ‘todo.create‘ );

        }
});

// 创建处理器实例
var todoHandler = new TodoHandler();

使用方式

包含脚本时，模型定义在先，视图和处理器定义在后。这样视图和处理器可以使用模型。

<script src="js/jquery.js"></script>
<script src="js/gillie.js"></script>
<script src="js/yourapp.js"></script>

正确示例：

<script src="js/models/post.js"></script>
<!-- 视图会需要访问模型，并且监听它的事件 -->
<script src="js/views/post.js"></script>
<!— 模型定义在先，从而处理器可以创建模型 -->
<script src="js/handler/post.js"></script>

错误示例：

<!— 处理器定义无法访问post模型 -->
<script src="js/handler/post.js"></script>
<!— 由于未定义模型，使得视图无法监听post模型-->
<script src="js/views/post.js"></script>
<!— 虽然在视图及处理器之后加入模型，但前者已经无法访问模型了-->
<script src="js/models/post.js"></script>

处理器（Handler）API参考

Handlers属于应用程序，关注DOM事件监听，例如点击，提交表单，按键弹起，以及类似的动作，进而获取到他们的数据，传递给模型来存储到数据库中，并通知视图改动事件。

initialize: function()

//初始化API：初始化处理器，在模型和视图中有类似的方法，每次实例创建时均被调用
//使用方法：
var Posts = Gillie.Handler.extend({

    initialize: function() {

        // 从所有的posts中获取信息并触发’posts.get’事件
    // 监听者获知事件，从而重新渲染
        model.sync( ‘posts.get‘ );
    }
});
// Posts 实例
var posts = new Post();

Element  el: string

//el属性值为定义事件的容器，当指定该值到.post-box时，所有在事件属性中定义的事件，都将仅绑定到.post-box的内部元素
//如果el没有指定，事件将绑定到document上
//使用方法
var Posts = Gillie.Handler.extend({

        // 绑定容器
        el: ‘.posts-container‘

    ,   events: {
            ‘click .post-title‘: ‘showPost‘
        }

        // Show post 方法
    ,   showPost: function( e ) {
            e.preventDefault();

            //做点什么吧...
        }

});

// 创建实例，启动监听
var posts = new Posts();

Events events: {}

//Events值为对象类型，用于绑定dom事件，并且将其部署到处理器回调方法中
//在回调中，上下文环境为处理器自身。也就是说，处理器中定义的方法可以在处理器其他方法的事件回调中调用。
//使用方法
var Posts = Gillie.Handler.extend({

        events: {
                ‘click .post-title‘: ‘showPost‘
            ,   ‘submit .update-post‘: ‘updatePost‘
            ,   ‘keyup .posts-search-field‘: ‘findPosts‘
        }

    ,   showPost: function( e ) {

            // 例如此处，可以调用该处理器的其他成员方法
            var title = this.cleanTitle(
                $( e.currentTarget ).data( ‘title‘ );
            );

            //做点什么吧...
        }

    ,   cleanTitle: function( title ) {
            //做点什么吧...
        }

    ,   updatePost: function( e ) {
            //做点什么吧...
        }

    ,   searchPosts: function( e ) {
            //做点什么吧...
        }

});

// 创建视图实例
var posts = new Posts();

模型（Model） API 参考

initialize: function() {}

参数：无；返回值：无

//该方法没有参数,也没有返回值，每次视图、模型和处理器被实例化时均会被调用
//使用方法：
var Person = Gillie.Model.extend({

    //实例化时执行
    initialize: function() {
        console.log( ‘Person model has been instantiated‘ );
    }
});

// 创建实例，将输出" Person model has been instantiated "
var john = new Person();

defaults: {}

//实例化时的初始默认属性。若在模型中设定则会覆盖默认值，也可以使用实例化后模型变量的get(),set()方法设置新值。
//使用方法
var Person = Gillie.Model.extend({

    // 默认属性
    defaults: {
            ‘alias‘: ‘none‘
        ,   ‘picture‘: ‘default.jpg‘
    }

});

// 实例化Person
var john = new Person();
// 默认情况下，John的picture属性对应default.jpg
john.get( ‘picture‘ ); // default.jpg

// 通过一下方式修改John的picture属性
john.set( ‘picture‘, ‘john-pic.jpg‘ );

url: {}

//该属性定义了所有请求方法的基础url 地址
//使用方法：
var Person = Gillie.Model.extend({

        defaults: {
            ‘picture‘: ‘default.jpg‘
        }

        // 请求的默认URL地址
    ,   url: ‘http://localhost/api/v1/‘

        // 存储
    ,   save: function() {

            this.Post( ‘person/‘, ‘person.create‘ );
        }

});

var john = new Person({
        ‘name‘: ‘John‘
    ,   ‘picture‘: ‘john.jpg‘
});

// 模型存储将会发送POST请求到‘http://localhost/api/v1/person/‘
john.save();

http请求方法，提供get .post ,put ,delete方法

model.Post( path, event, options )

Post model的post方法，参数为path,event,options，返回值XHR

//Post model的post方法，参数为path,event,options
//使用基础URL（base URL）组合path属性成一个完整URL，然后发送post请求。当请求完成后，触发带有这个key值的event事件。因此如果传递了resource.event作为event事件，将会由模型触发，同时监听者将获取到模型实例，并可将服务器响应的值作为参数传递过去。
//使用方法：
var Person = Gillie.Model.extend({

    // 创建person
    create: function( event ) {
        this.Post( ‘person/‘, event, {} );
    }

});

var david = new Person({
        ‘location‘: ‘Nevada‘
    ,   ‘picture‘: ‘david.jpg‘
});

// 创建person，成功后触发’person.create’事件，从而视图可获知该事件然后基于新的模型数据渲染
david.create( ‘person.create‘ );

model.Get( path, event, options )

//参数及返回值同Post
//使用方法
var Person = Gillie.Model.extend({

    // 从服务器端获取数据
    sync: function( event ) {
        this.Get( ‘person/:_id‘, event );
    }

});

// 创建person对象，并获取其信息
var maria = new Person({
    _id: 10
});

// 获取maria的信息，请求完成后触发’person.get’事件
maria.get( ‘person.get‘ );

model.Put( path, event, options )

//参数及返回值同post
//使用方法
var Person = Gillie.Model.extend({

    // 更新person
    update: function( event ) {
        this.Put( ‘person/:_id‘, event );
    }

});

var jordan = new Person({
        ‘_id‘: 11
    ,   ‘localtion‘: ‘New York‘
});

// 更新Jordan的数据，请求完成后触发’person.update’事件
jordan.update( ‘person.update‘ );

model.Delete( path, event, options )

//参数及返回值同Post
//使用方法
var Person = Gillie.Model.extend({

   // 删除person
   delete: function( event ) {
        this.Delete( ‘person/:_id‘, event );
   }

});

var jenny = new Person({
        _id: 13
})

// 删除服务器上的person信息，完成后触发’person.delete’事件，监听者可据此改变dom以及类似的行为
jenny.delete( ‘person.delete‘ );

get、set、unset

用于获取、设置和移除model属性

model.get( key ),返回值类型自定

//获取model的某个属性
//使用方法
var Car = Gillie.Model.extend({});

// 创建一个新的car对象
var camaro = new Car({
        year: 2014
    ,   cubic_inches: 378
    ,   manufacturer: ‘Chevrolet‘
});

// 获取并打印car 对象的 manufacturer属性
var manufacturer = camaro.get( ‘manufacturer‘ );
console.log( manufacturer ); // Chevrolet

model.set( key, val ), model.set( object )，返回值：Objectmodel实例

//设置模型的某个属性或一组属性
//使用方法
var Car = Gillie.Model.extend({});

var camaro = new Car();

// 传递key-value值对
camaro.set( ‘year‘, 2014 );

// 传递多个key-value组成的对象
camaro.set({
        manufacturer: ‘Chevrolet‘
    ,   cubic_inches: 378
});

// 获取属性值
console.log( camaro.get( ‘year‘ ) ); // 2014

unset model.unset( key )

//移除模型属性
//使用方法
var Car = Gillie.Model.extend({});

var camaro = new Car({
        year: 2014
    ,   cubic_inches: 378
    ,   color: ‘black‘
});

// 移除car对象的color属性
camaro.unset( ‘color‘ );

console.log( camaro.get( ‘color‘ ) ); // null

model.toJSON()，返回值json对象

//以json对象格式返回模型中定义的属性
//使用方法
var Car = Gillie.Model.extend({});

var camaro = new Car({
        year: 2014
    ,   manufacturer: ‘Chevrolet‘
});

// 模型属性组合成对象
var attributes = camaro.toJSON();
console.log( attributes ); // { year: 2014, manufacturer: ‘Chevrolet‘ }

events：

同view和model中的使用方法，用于触发和监听事件

视图API参考

gillie基于监听者设计模式，视图尝试监听模型事件，并在DOM上采取动作

initialize: function()

//初始化：创建视图实例时调用该初始化方法，用于声明该视图将监听哪些事件
//使用方法
var Post = Gillie.View.extend({

        initialize: function() {

            // 监听模型’post.create’事件
            model.on( ‘post.create‘, this.onCreate );
        }

        // post请求完成后调用
    ,   onCreate: function( modelInstance, response ) {

            // 渲染dom
        }

});

// 创建post实例，同时运行初始化方法
var postView = new Post();

事件API参考

事件API提供了三种方法用于触发在view和Model中的事件。

on( event, fn )，返回当前实例，

//On()方法，用于监听事件，和触发回掉。
//使用方法
// 模型定义
var PostModel = Gillie.Model.extend({

        url: ‘http://localhost/api/v1/‘

    ,   create: function() {
            this.Post( ‘post/‘, ‘post.create‘ );
        }
});

// 创建模型实例
postModel = new PostModel({
        title: ‘New post title‘
    ,   description: ‘Lorem ipsum dolor sit amet‘
});

// 视图定义
var PostsView = Gillie.View.extend({

        initialize: function() {

            // 监听模型的’post.create’事件
            postModel.on( ‘posts.create‘, this.onCreate );
        }

        // 当’posts.create’事件触发后回调用该方法
    ,   this.onCreate: function( postInstance ) {

            console.log( postInstance.get( ‘title‘ ) +
                ‘. Has been created.‘
            );
        }
});
postView = new PostView();

// 使用模型方法’create’来存储post请求。
//当post执行完成后，视图将会影响该事件，即打印‘New post title. Has been created’.
postModel.create(); 

trigger( event, data )

触发事件，同时传递一些特定的值给监听者，返回值当前实例

//使用方法
// 创建模型定义和模型实例
var PostModel = Gillie.Model.extend({});
var postModel = new PostModel();

// 视图定义
var PostView = Gillie.View.extend({

        initialize: function() {
            postModel.on( ‘post.custom_event‘, this.onCustomEvent );
        }

    ,   onCustomEvent: function( str, obj ) {

            console.log( str ); // 附加数据
            console.log( obj ); // { one: 1, two: 2 }
        }
});

// 创建视图实例
var postView = new PostView();

postModel.trigger(
        ‘post.custom_event‘
    ,   ‘Additional data‘
    ,   { one: 1, two: 2 }
);

object.listenTo( object, event, fn )

设置某个对象监听其他对象的事件，并且事件触发时调用回掉

//使用方法
var PostModel = Gillie.Model.extend({});
var postModel = new PostModel();

// 视图定义
var PostView = Gillie.View.extend({

    onEdit: function( attributes ) {
        console.log( attributes ); // { title: ‘New title‘ }
    }
});
var postView = new PostView();

// 监听模型’post.change’事件
postView.listenTo( postModel, ‘post.change‘, postView.onEdit );

// 触发模型事件
postModel.set( ‘title‘, ‘New title‘ )
    .trigger( ‘post.change‘, postModel.toJSON() )

整理如下：

手机端MVVM-js框架-Gillie-中文版本,布布扣,bubuko.com