調用方法javascript
import {createElement, render} from './self-jsx';
let objJSX = createElement(
'div',
{id: 'box', className: 'box', style: {color: 'red'}},
createElement(
'h2',
{className: 'title'},
'\u7CFB\u7EDF\u63D0\u793A'
),
createElement(
'div',
{className: 'content'},
'\u6E29\u99A8\u63D0\u793A\uFF1A\u8BED\u6CD5\u9519\u8BEF\uFF01'
),
'\u672C\u64CD\u4F5C\u5C31\u662F\u4E00\u4E2A\u6D4B\u8BD5\uFF01'
);
render(objJSX, root);
複製代碼
createElement
方法java
/*
* CREATE-ELEMENT:建立JSX對象
* 參數:至少兩個 TYPE/PROPS,CHILDREN這個部分可能沒有可能有多個
*/
function createElement(type, props, ...childrens) {
props = props || {} // 下面要用in方法
let ref, key;
if ('ref' in props) {
ref = props['ref'];
props['ref'] = undefined;
}
if ('key' in props) {
key = props['key'];
props['key'] = undefined;
}
return {
type,
props: {
...props,
children: childrens.length <= 1 ? (childrens[0] || '') : childrens
},
ref,
key
};
}
複製代碼
render
方法數組
function render(objJSX, container, callBack) {
let {type, props} = objJSX,
{children} = props;
let newElement = document.createElement(type);
for (let attr in props) {
if (!props.hasOwnProperty(attr)) break;
let value = props[attr];
if (value == undefined) continue;//=>NULL OR UNDEFINED
// 當是事件屬性的時候
let regEvent = /^on/;
if(regEvent.test(attr)){
newElement.addEventListener(attr.toUpperCase().substr(2)
,value.bind(undefined));
continue;
}
switch (attr.toUpperCase()) {
case 'CLASSNAME':
newElement.setAttribute('class', value);
break;
case 'STYLE':
for (let styleAttr in value) {
if (value.hasOwnProperty(styleAttr)) {
newElement['style'][styleAttr] = value[styleAttr];
}
}
break;
case 'CHILDREN':
/*
* 多是一個值:多是字符串也多是一個JSX對象
* 多是一個數組:數組中的每一項多是字符串也多是JSX對象
*/
//->首先把一個值也變爲數組,這樣後期統一操做數組便可
!(value instanceof Array) ? value = [value] : null;
value.forEach((item, index) => {
//->驗證ITEM是什麼類型的:若是是字符串就是建立文本節點,若是是對象,咱們須要再次執行RENDER方法,把建立的元素放到最開始建立的大盒子中
if (typeof item === 'string') {
let text = document.createTextNode(item);
newElement.appendChild(text);
} else {
render(item, newElement);
}
});
break;
default:
newElement.setAttribute(attr, value);
}
}
container.appendChild(newElement);
callBack && callBack();
}
export {
createElement,
render
};
複製代碼