Skip to content

Commit

Permalink
Add:baseFiles
Browse files Browse the repository at this point in the history
  • Loading branch information
付鑫 committed Apr 27, 2018
1 parent c74ae36 commit fcd6190
Show file tree
Hide file tree
Showing 19 changed files with 815 additions and 1 deletion.
13 changes: 13 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"presets": [
["env", {
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
},
"debug": true
}]
]
}
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules

package-lock.json
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
# Feact
# Feact

参考自[snabbdom](https://github.com/snabbdom/snabbdom/tree/8079ba78685b0f0e0e67891782c3e8fb9d54d5b8)的实现
158 changes: 158 additions & 0 deletions dist/main.js

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<div id="container"></div>
<script src="./dist/main.js"></script>
</body>

</html>
32 changes: 32 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"name": "myreact",
"version": "1.0.0",
"description": "mvvm frameWork",
"main": "index.js",
"scripts": {
"init": "npm install --no-options -s --registry=https://registry.npm.taobao.org",
"dev": "npm run clean && webpack --mode development --progress --profile --colors",
"build": "npm run clean && webpack --mode production --progress --profile --colors",
"clean": "rimraf -rf ./lib"
},
"author": "fx",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14"
},
"dependencies": {
"body-parser": "^1.18.2",
"connect": "^3.6.6",
"connect-multiparty": "^2.1.0",
"morgan": "^1.9.0",
"rimraf": "^2.6.2",
"server-static": "^2.0.5",
"up": "^1.0.2"
}
}
31 changes: 31 additions & 0 deletions src/d2V.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/*
* dom转vnode
*/
import Vnode from './vnode'
export default function (tag, b, c) {
let data = {}, children, text;
if (c !== undefined) {
data = b
if (Array.isArray(c)) {
children = c
} else if (['number', 'string'].includes(typeof c)) {
text = c
}
} else if (b !== undefined) {
if(Array.isArray(c)) {
children = b
} else if (['number', 'string'].includes(typeof b)) {
text = b
} else {
data = b
}
}
if(Array.isArray(children)) {
for(let i = 0; i < children.length; i++) {
if(['number', 'string'].includes(typeof children[i])) {
children[i] = Vnode(undefined, undefined, undefined, children[i])
}
}
}
return Vnode(tag, data, children, text, undefined)
}
52 changes: 52 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
console.log("start----");

import { init } from './patch'
import h from './d2V'

import nClass from './modules/class'
import props from './modules/props'
import style from './modules/style'

const patch = init([
nClass, // makes it easy to toggle classes
props, // for setting properties on DOM elements
style, // handles styling on elements with support for animations
])

var someFn = function () {
console.log('someFn', arguments);
}

var anotherEventHandler = function () {
console.log('anotherEventHandler', arguments);
}

var vnode = h('div#container.two.classes', { on: { click: someFn } }, [
h('p', { style: { fontWeight: 'bold' } }, 'This is bold'),
' and this is just normal text',
h('a', { props: { href: '/foo' } }, 'I\'ll take you places!')
]);

console.log('vnode', vnode);

var newVnode = h('div#container.two.classes', { on: { click: anotherEventHandler } }, [
h('span', { style: { fontWeight: 'normal', fontStyle: 'italic' } }, 'This is now italic type'),
' and this is still just normal text',
h('a', { props: { href: '/bar' } }, 'I\'ll take you places!')
]);

console.log('newVnode', newVnode);

function patchNew(vnode, newVnode) {
// Second `patch` invocation
let n = patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state
console.log(n)
}

window.addEventListener('DOMContentLoaded', () => {
var container = document.getElementById('container');

vnode = patch(container, vnode);

setTimeout(function () { patchNew(vnode, newVnode) }, 2000);
});
22 changes: 22 additions & 0 deletions src/modules/attributes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
function updateAttributes(oldVnode, vnode) {
let elm = vnode.elm, oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs;
if(!oldAttrs && !attrs) return;
oldAttrs = oldAttrs || {}
attrs = attrs || {}
for(let key of Object.keys(attrs)) {
let cur = attrs[key], old = oldAttrs[key];
if(old !== cur) {
elm.setAttribute(key, cur)
}
}
for(let key of Object.keys(oldAttrs)) {
if(!elm.hasAttribute(key)) {
elm.removeAttribute(key)
}
}
}

export default {
create: updateAttributes,
update: updateAttributes
}
10 changes: 10 additions & 0 deletions src/modules/class.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
function updateClasses(oldVnode, vnode) {
let elm = vnode.elm, oldClass = oldVnode.data.class, nclass = vnode.data.class;
if(!oldClass && !nclass) return;
elm.className = nclass.join(' ')
}

export default {
create: updateClasses,
update: updateClasses
}
Empty file added src/modules/eventlistener.js
Empty file.
22 changes: 22 additions & 0 deletions src/modules/props.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
function updateProps(oldVnode, vnode) {
let elm = vnode.elm, oldProps = oldVnode.data.props, props = vnode.data.props;
if(!oldProps && !props) return;
oldProps = oldProps || {}
props = props || {}
for(let key of Object.keys(oldProps)) {
if(!props[key]) {
delete elm[key]
}
}
for(let key of Object.keys(props)) {
let cur = props[key], old = oldProps[key];
if(old !== cur && (key !== 'value' || elm[key] !== cur)) {
elm[key] = cur
}
}
}

export default {
create: updateProps,
update: updateProps
}
19 changes: 19 additions & 0 deletions src/modules/style.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
function updateStyle(oldVnode, vnode) {
let elm = vnode.elm, oldStyle = oldVnode.data.style, style = vnode.data.style;
if(!oldStyle && !style) return;
oldStyle = oldStyle || {}
style = style || {}
for(let key of Object.keys(oldStyle)) {
if(!style[name]) {
elm.style[name] = ''
}
}
for(let key of Object.keys(style)) {
elm.style[key] = style[key]
}
}

export default {
create: updateStyle,
update: updateStyle
}
Loading

0 comments on commit fcd6190

Please sign in to comment.