2.0.61 • Published 9 years ago

mcoreapp v2.0.61

Weekly downloads
2
License
BSD-2-Clause
Repository
github
Last release
9 years ago

基于 virtual-dom 的前端框架

框架分为两部分

  • mcore 模板引擎(Core), 无依赖,支持(IE6+)
  • mcoreApp SPA(单页应用)框架,依赖 jQuery , mcore 支持(IE6+)

注:开发时,依赖 webpack 及 h2svd-loader

webpack 配置

//webpack.config.js
var webpack = require('webpack');

// h2svd-loader
require('h2svd-loader');

module.exports = {
    ...
    module: {
        loaders: [
            {// 引入 html 转 mcore virtual-dom 的 loader
  				test: /\/tpl\/.*(\.html)$/, 
                loader: 'h2svd-loader' 
			}
        ]
    }
};

mcore 模板引擎

原理

渲染流程
template=>start: Template: 模板引擎

render=>operation: @render Html, scope

virtualDomDefine=>operation: Html -> Virtual Dom define 依赖:h2svd-loader(开发时,通过 webpack 实现)

newVirtualDomDefine=>operation: new virtual dom = (Virtual Dom define)(scope)

checkOldVirtualDom=>condition: 是否存在 old virtual dom

diffVirtualDom=>operation: diff VirtualDom

changeNode=>end: 应用变更到 dom

buildNode=>end: 生成 dom

template->render->virtualDomDefine->newVirtualDomDefine->checkOldVirtualDom
checkOldVirtualDom(no)->buildNode
checkOldVirtualDom(yes)->diffVirtualDom->changeNode
component 实现流程
virtualDomDefine=>start: Virtual Dom define
build=>operation: build Virtual Dom
findNodeTagName=>condition: find Template.components[Node.tagName]
buildNode=>end: 生成 dom
buildComponent=>end: new Template.components[Node.tagName]

virtualDomDefine->build->findNodeTagName
findNodeTagName(yes)->buildComponent
findNodeTagName(no)->buildNode

diff VirtualDom 时,component 当成没有子树的 Node (只 diff 属性), component 的 dom 变更,由 component 自身维护

DEMO

模板中,变量都在 scope 名字空间下 (事件除外)

<!-- ./tpl/test.html -->
<ul>
  <li mc-for="v , k in scope.list" mc-on-click="showIx(v)">
    <span mc-data-ix="k + 1">{v.name}</span>
  </li>
</ul>
# demo.coffee
{Template} = require 'mcore'

# init tpl
tpl = new Template()

# bind click event
tpl.showIx = (v, el, event)->
	console.log v, el, event
    
 # render
tpl.render require('./tpl/test.html'),
	list: [
       {name : 'ok1'}
       {name : 'ok2'}
	]
 , -> # rendered
    document.body.appendChild tpl.refs

binders 自定义属性

{Template} = require 'mcore'

Template.binders.color = (el, value)->
	el.style.color = value
<button mc-color="scope.color">Apply</button>

components 自定义组件

{Template, Component} = require 'mcore'

class Time extends Component
    init: ->
        @on 'rendered', =>
            setTimeout =>
                @set 'time', new Date()
            , 1000
            
        @render require('./tpl/tagTime.html'),
            time: new Date()

Template.components.time = Time
<!-- ./tpl/tagTime.html -->
{scope.time}
<time></time>

formatters 过滤函数

{Template} = require 'mcore'

Temaplat.formatters.formNow = (value)->
	moment(value).formNow()
    
Template.formatters.toString = (value)->
	String value or ''
<span>{scope.date | formNow | toString }</span>
2.0.61

9 years ago

2.0.60

9 years ago

2.0.59

9 years ago

2.0.58

9 years ago

2.0.57

9 years ago

2.0.56

9 years ago

2.0.55

9 years ago

2.0.54

9 years ago

2.0.53

9 years ago

2.0.52

9 years ago

2.0.51

9 years ago

2.0.50

9 years ago

2.0.49

9 years ago

2.0.48

9 years ago

2.0.47

9 years ago

2.0.46

9 years ago

2.0.45

9 years ago

2.0.43

9 years ago

2.0.42

9 years ago

2.0.41

9 years ago

2.0.40

9 years ago

2.0.39

9 years ago

2.0.38

9 years ago

2.0.37

9 years ago

2.0.36

9 years ago

2.0.35

9 years ago

2.0.34

9 years ago

2.0.33

9 years ago

2.0.32

9 years ago

2.0.31

9 years ago

2.0.30

9 years ago

2.0.29

9 years ago

2.0.28

9 years ago

2.0.27

9 years ago

2.0.26

9 years ago

2.0.25

9 years ago

2.0.24

9 years ago

2.0.23

9 years ago

2.0.22

9 years ago

2.0.21

9 years ago

2.0.20

9 years ago

2.0.18

9 years ago

2.0.17

9 years ago

2.0.16

9 years ago

2.0.15

9 years ago

2.0.14

9 years ago

2.0.13

9 years ago

2.0.12

9 years ago

2.0.11

9 years ago

2.0.10

9 years ago

2.0.9

9 years ago

2.0.8

10 years ago

2.0.7

10 years ago

2.0.6

10 years ago

2.0.5

10 years ago

2.0.4

10 years ago

2.0.3

10 years ago

2.0.2

10 years ago

2.0.1

10 years ago

2.0.0

10 years ago