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

9 years ago

2.0.7

9 years ago

2.0.6

9 years ago

2.0.5

9 years ago

2.0.4

9 years ago

2.0.3

9 years ago

2.0.2

9 years ago

2.0.1

9 years ago

2.0.0

9 years ago