• Stars
    star
    263
  • Rank 155,584 (Top 4 %)
  • Language
    JavaScript
  • Created almost 10 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

fake-MVVM library

Q.js

Build Status

模仿Vuejs的伪MVVM库,下面是使用说明

#Q.js API

[TOC]

##Summary 概述 ####Qjs 构造函数 Qjs 的构造函数是 Qjs 的核心。它允许你创建 Qjs 实例。创建一个 Qjs 实例非常简单:

var Qjs = require("lib/Q");
//创建一个Qvm
var vm = new Qjs({ /* options */ });

当你初始化一个Q实例时,你需要传递一个选项对象。这个对象可以包括目标 DOM 元素,初始 data 对象,method 方法,过滤器filters函数等内容。完整的选项列表详见 组件选项(需要有一个跳转链接)。

  • 每个Qjs实例本质上就是一个ViewModel
  • 每个实例都有一个对应的 DOM 节点 vm.$el,它大致相当于 MVVM 中的 V
  • 每个实例也有一个 JavaScript 数据对象 vm.$data,相对应的就是 MVVM 中的 M

改变 M 会触发 V 的更新。对于双向绑定,用户在 V 当中触发的事件会导致 M 的状态变化。 Qjs 实例上暴露的全部属性详见 实例属性(需要有一个跳转链接)。

##Options 组件选项 ###小栗子 demo

var vm = new Q({
	el:"#id" //selector
    data: {},
    methods:{
	    method1:function(){}
    }
    filters:{}
    direcitves:{}
})

data

类型:Object Q实例的数据对象,可以通过vm.$options.data访问:

var data = {
    msg: 'hello'
};
var vm = new Q({
    data: data
})
vm.$options.data === data // -> true

大部分操作都和对象与数组的操作相同,只有当设置值的时候需要使用.$set方法,因为我们没有defineProperty的支持。

得到data中msg的值:

vm.msg // -> hello

设置msg的值

var obj = {
    msg: 'hello world!'
};
vm.$set('msg', obj.msg); // -> 'hello world!'

得到data相对于vm的namespace:

var data = {
    msgs: [
        {
            text: 'hello'
        },
        {
            text: 'tencent'
        }
    ]
};
var vm = new Q({
    data: data
})
vm.msgs[0].$namespace(); // -> 'msgs.0'

如果data是obj,得到其在父级的key:

vm.msgs[0].$key(); // -> 0

如果data是obj,得到其父级:

vm.msgs[0].$up(); // -> vm.msgs

对于数组可使用大部分数组方法,目前已经支持了:pushpopunshiftshiftindexOfspliceforEachfilter,其中pushsplicerepeat directive中做了适当的优化,使得使用这两个方法,只会导致repeat的局部渲染。

el

类型:String | HTMLElement

通过一个给定的DOM元素生成一个Q实例。可以是一个CSS选择器字符串,一个实际存在的HTML元素,最终会在q.$el中。

directive

类型:Object

告知libaray如何对节点进行操作,遵循Vuejs写法:

<element>
  prefix-directiveId="[argument:] expression [| filters...]">
</element>

简单例子:

<div id="myText" q-text="message"></div>

Q.js中,默认的prefix是q,directiveId是text,expression是message。这个directive的作用是,当Q实例中message这一属性的值发生变化时,告知Q.js去更新这个节点的文本内容。这里表示message(key)对应的数据(value),用text指令进行操作,text指令是在该节点塞入文字。例如:

var myText = Q.get('#myText'); // Q.get():获取一个Q实例,遵循restful风格,如果不存在则创建一个,并把节点的dom信息

自定义directive

举一个我们在todoMVC的例子:

<input q-todo-focus="editing" />

则表示editing对应的数据变化时执行todo-focus指令,看看我们todo-focus指令怎么写的:

directives: {
    'todo-focus': function (value) {
        // 如果editing的值为false,则不处理
        if (!value) {
            return;
        }
        // 为true则,对该节点focus()一下
        var el = this.el;
        setTimeout(function () {
            el.focus();
        }, 0);
    }
}

通用directive

目前只提供基本的通用directive,可拓展

######q-text

  • 更新元素的 textContent
  • 常用于文字节点上。
<span q-text="variableName"></span>

######q-html

  • 更新元素的 innerHTML
  • 将 q-html 绑定到用户提供的数据上会有 XSS 的风险,因此使用 v-html 时应确保数据的安全性,或通过自定义过滤器将不被信任的 HTML 内容进行预处理
<div q-html="variableName"></div>

######q-show

  • 根据绑定值决定是否显示元素。
<div q-show="isShow">show!<div>
<!-- 根据isShow绑定值决定是否显示 --->

Q实例的data中isShow的布尔值决定了这个节点是否显示

var vm = new Qjs({
	data:{
		isShow : isSHow
	}
})

######q-attr 设置节点属性(attribute & property)

<img q-attr="src: url">
data: {
    url: 'http://www.qxiu.com/2014/images/logo_qi.jpg'
}

######q-value - 改变值

用法与text类似,支持input等有value属性的标签

######q-class

  • 接受一个可选的参数 如果没有提供参数,则将绑定值作为 CSS 类命字符串添加到元素的 classList 中。 如果提供了参数,则会以参数为 CSS 类名,并根据绑定值的真伪进行增添去除。可以配合多重从句使用:
<span q-class="
  success : isWork,
  isOpen  : open,
  hidden  : isHidden
"></span>
data: {
    isWord : isW,
    isOpen : isO,
    isHidden : isH
}

######q-repeat - 重复节点

<li q-repeat="list"></li>
data: {
    list: [];
}

######q-on

  • 需要一个参数。
  • 绑定值应该是一个函数或者声明。
  • 为元素添加一个 DOM 事件监听器。事件的类型由参数指定。这也是唯一可以和 key 过滤器一起使用的指令。详细请见事件监听。
<div q-on="click: showMsg"></div>

######q-model

  • 双向绑定(只支持input、textarea)

######q-vm

  • 创建子VM(ViewModel, 一个Q对象的实例), 例如:
<b>
    <c q-vm="d"></c>
</b>

则c节点会绑定一个d component的实例,d component需要事先定义(Ques自动集成了该过程),例如:

Q.define('d', {
    data: {},
    methods: {},
    filters: {},
    directives: {}
});

######q-ref

  • 创建子VM在父级嵌套VM中的引用,例如:
<b>
    <c q-vm="c" q-ref="c"></c>
</b>

表示,如果b是b component的VM实例,则b.$.c可以引用到c component的VM实例

######q-with

  • 创建子VM在父级嵌套VM中对应的数据,例如:
<b>
    <c q-vm="c" q-with="xxx"></c>
</b>

表示c component的VM实例对应的data是b.xxx

######q-if

  • 是否使用模版
  • 对应值为false,模版将不被渲染,为true则渲染
<p q-if="need">hello world</p>
data: {
    need: true
}
#filter 过滤器

使用格式: target | filterName [args..]

  • 如果设置了filter,则绑定的数据会经过filter才执行对应的directive,这是我们可以在塞入数据前做输出处理,或事件触发前做数据处理,相当于shell脚步的管道。

q-on="xx: method" e q-on="xx: method(e, this3)"

模版:

<input id="demo" q-class="hide: isStart | ! " q-on="keyup: showMsg | key enter" />

该例子有两个过滤器,分别

  • 过滤器 !
  • 过滤器 key

是设置在vm实例上的filters,基本实现是:

var vm = new Qjs({
	filters:{
		'!' : function(v){   //这里的参数v即 isStart
		     return  !v;
		}
	}
})

key是其中一个通用filter,基本实现是:

var keyCodes = {
        enter    : 13,
        tab      : 9,
        'delete' : 46, // delete是关键字,需要用引号包起来
        up       : 38,
        left     : 37,
        right    : 39,
        down     : 40,
        esc      : 27
    };

/**
 * A special filter that takes a handler function,
 * wraps it so it only gets triggered on specific
 * keypresses. v-on only.
 *
 * @param {String} key
 */
function key(handler, key) {
    if (!handler || key === undefined) return;
    var code = keyCodes[key];
    if (!code) {
        code = parseInt(key, 10);
    }
    return function (e) {
        if (e.keyCode === code) {
            return handler.call(this, e);
        }
    };
}

则,当keyup发生,keyCode为13(即enter)时候,才会触发showMsg方法。

method

特制on指令会调用的方法,例如:上面讲到的showMsg。

<input id="demo" q-class="hide: isStart | ! " q-on="keyup: showMsg | key enter" />

设置methods方法:

var vm = new Q({
    el: '#demo',
    filters: {
        key: key
    },
    data: {
        msg: 'hello'
    },
    methods: {
        showMsg: function () {
            alert(this.msg);
        }
    }
});

则那个input框会在初始化时自动设值为hello,当改变时候msg值也会改变,当按下回车键,则会触发showMsg方法alert值。

Data 对象

在Qjs中,定义了一个Data对象 Data对象是其中一个十分重要的基础对象(类)(可以理解为父类或基类

###Data Prototype原型

####data.$key 获取KEYS ####data.$up 获取上一级对象

//如 存在 a.b.c这样的关系对象
 b.$up // a

####data.$set( key, value ) 设置属性key的值

##Q实例 (VM)

由于Q实例继承了Data对象

	 _.extend(Q.prototype, Data.prototype); //将Data的原型加入了Q的原型对象上

故其也有相应的 $set, $get, $change, $up, $namespace的方法

###实例属性: #####vm.$el 返回类型:[HtmlElemt] 返回当前Q 实例绑定的 DOM 元素。

#####vm.$options 返回类型:[obejct] 返回当前Qjs实例所使用的实例化选项。如果你想要调用自定义选项,就会需要用到这个

var Qjs = require("Q");
new Qjs({
  appType: 'ios',        //自定义的属性appType
  methods:{
	  getAppType:function () {
               console.log(this.$options.appType) // -> 'ios'
      }}
})

#####vm.data 返回类型:[obejct] 返回当前Qjs实例正在监视的数据对象 (data object)。你可以用新的对象去替换它。Qjs实例会代理其 data 对象上的所有属性。

#####vm.$parent 返回类型:[vm] 返回当前 vm 的父实例(如果存在的话)。

#####vm.children 返回类型:[Array[vm]] 返回当前实例的直接子实例数组。

#####vm.dataName / vm.methodName [data / method]

###实例方法:

#####vm.$set( key, value ) 继承Data对象的$set #####vm.$get 继承Data对象的$get

#####vm.$emit( event , [args...]) 参数event::[String] 参数arg::事件函数所需的额外参数 可选(optiional) 在当前 vm 上触发一个事件。

//目前支持两种事件emit调用方式:
//1、参数为事件名称--直接触发该VM事件event
vm.$emit("eventName",[args..]);
//2、参数为"data:XXX"  触发datachange事件
vm.$on("datachange", function(target, [args..]){
	console.log(target); //dataName [string]
	//返回的是字符串-数据名
});
vm.$emit("data:dataName", [args..]);

#####vm.$on( event, callback ) 参数event : [String] 参数callback: [Function] 在当前 vm 上监听一个事件。

vm.$on('applyFinished', function () {
     //do something;
});

#####vm.$once(event, callback) 参数event : [String] 参数callback: [Function] 在当前 vm 上监听一个一次性的事件。

vm.$off('onceEvent', function () {
     //do something;
});

#####vm.$off([event, callback]) 参数event : [String] 可选(optiional) 参数callback: [Function] 可选(optiional) 如果没有传递参数,那么将会将所有事件监听去除; 如果传递了一个事件,那么移除该事件的所有回调; 如果事件和回调都被传递,则只移除该回调。

vm.$off('touchApple',  callback1);
// callback1 是事件touchApple绑定的函数

#####vm.$watch

##自定义指令/过滤器 故下面讲解下如何创建Common DirectivePrivate Directive 故下面讲解下如何创建Common FilterPrivate Filter

入门教程

20个例子入门qjs

用户

腾讯课堂

齐齐互动视频

QQ群

家校群

License

(The MIT License)

Copyright (c) 2014-2015 Daniel Yang [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

More Repositories

1

FKB

WEB前端知识库,Frontend Knowledge Base
498
star
2

sheral

Focus in mobile UI
CSS
235
star
3

mobile

library for mobile develop
JavaScript
225
star
4

IMWeb-Conf-ppt

117
star
5

code-guide

web前端开发规范
101
star
6

Ques

An new architecture which deal with how to implement and use a component
JavaScript
62
star
7

redemo

react demo component
JavaScript
60
star
8

preload

Ajax预加载组件
JavaScript
56
star
9

generator-imweb-wxapp

微信小程序脚手架
JavaScript
54
star
10

ppts

ppts of imweb shared!
52
star
11

fis-parser-rem

fis px自动转化成rem插件
JavaScript
46
star
12

imweb.github.io

团队博客
JavaScript
42
star
13

RESTful

Imweb RESTful 规范
42
star
14

blog

IMWeb团队文章推荐
29
star
15

lan-settings

LAN Settings 设置操作系统局域网配置
JavaScript
24
star
16

eslint-config-imweb

IMWeb团队eslint配置规则
JavaScript
21
star
17

lego

lego command of http://lego.imweb.io
JavaScript
19
star
18

XDUcourse

西电高校联合课程资料和相关代码
JavaScript
18
star
19

iconfonts

iconfont management platform
CSS
16
star
20

tryjs

Wrap async function and catch the error
JavaScript
16
star
21

node-pac

Node版pac脚本解析器
JavaScript
12
star
22

generator-imweb-h5

imweb h5 项目脚手架
JavaScript
7
star
23

imweb-wxapp

微信小程序开发相关
JavaScript
6
star
24

fis3-hook-lego

lego 包管理器 fis3 模块查找。 http://lego.imweb.io/
JavaScript
4
star
25

fis3-packager-smart

fis3 智能打包
JavaScript
4
star
26

parallel-require

An expansion of require asynchronous model which using in Web APP
JavaScript
3
star
27

Components

Components used in project.
JavaScript
3
star
28

generator-imweb-react

react 项目脚手架
JavaScript
3
star
29

sublime-js-snippets

a plugin of sublime text with javascript snippets
JavaScript
3
star
30

fis3-prepackager-imweb-ques

fis3 prepackager plugin for ques
JavaScript
2
star
31

issue-Ideas

Ideas
2
star
32

stone-ui

react components
2
star
33

react-native-courseList

use react-native to render courseList
JavaScript
2
star
34

fis3-hook-sys_node_modules

JavaScript
2
star
35

fis3-hook-annotation

使用注解修改fis文件属性, 精简fis-conf.js
JavaScript
2
star
36

react-native-viewpager

图片轮播
JavaScript
2
star
37

ques-browser

JavaScript
1
star
38

fis3-deploy-offpack

fis3 offline package
JavaScript
1
star
39

fis3-preprocessor-imweb-ques

fis3 preprocessor plugin for ques
JavaScript
1
star
40

stylelint-config-imweb

IMWeb CSS 样式规范
JavaScript
1
star
41

imweb-tpl-loader

imweb-tpl-loader
JavaScript
1
star
42

grunt-imweb-tpl-complie

Just a Template Complier
JavaScript
1
star
43

fis3-hook-babel-imweb

a fis3 hook plugin for babel check and using fis3-parser-babel-imweb to transform code
JavaScript
1
star
44

fis3-postpackager-inline

fis3 postpackager inline资源插件
JavaScript
1
star
45

fis-postpackager-iconfont

iconfont
JavaScript
1
star