mirror of
https://gitee.com/java110/MicroCommunityWeb.git
synced 2026-02-25 22:27:55 +08:00
324 lines
11 KiB
JavaScript
324 lines
11 KiB
JavaScript
/**
|
||
* vcFramework
|
||
*
|
||
* @author 吴学文
|
||
*
|
||
* @version 0.0.1
|
||
*
|
||
* @description 完成组件化编程思想
|
||
*
|
||
* @time 2020-03-04
|
||
*
|
||
* @qq 928255095
|
||
*
|
||
* @mail 928255095@qq.com
|
||
*
|
||
*/
|
||
(function () {
|
||
|
||
var vcFramework = window.vcFramework || {};
|
||
var componentCache = {};
|
||
/**
|
||
* 树
|
||
* @param {*} _vcCreate 自定义组件
|
||
* @param {*} _html 组件内容
|
||
* @param {*} _nodeLocation 组件位置 1 开始节点 -1 结束节点
|
||
*/
|
||
var VcTree = function (_vcCreate, _html, _nodeLocation) {
|
||
var o = new Object();
|
||
o.treeId = vcFramework.uuid();
|
||
o.vcCreate = _vcCreate;
|
||
o.html = _html;
|
||
o.js = "";
|
||
o.vcSubTree = [];
|
||
o.nodeLocation = _nodeLocation;
|
||
o.putSubTree = function (_vcSubTree) {
|
||
o.vcSubTree.push(_vcSubTree);
|
||
};
|
||
o.setHtml = function (_html) {
|
||
o.html = _html;
|
||
};
|
||
o.setJs = function (_js) {
|
||
o.js = _js;
|
||
};
|
||
o.setLocation = function (_location) {
|
||
o.nodeLocation = _location;
|
||
};
|
||
return o;
|
||
};
|
||
|
||
/**
|
||
* 构建 树
|
||
*/
|
||
builderVcTree = async function () {
|
||
let vcElements = document.getElementsByTagName('vc:create');
|
||
var treeList = [];
|
||
for (let _vcElementIndex = 0; _vcElementIndex < vcElements.length; _vcElementIndex++) {
|
||
let _vcElement = vcElements[_vcElementIndex];
|
||
let _tree = new VcTree(_vcElement, '', 1);
|
||
let _vcCreateAttr = document.createAttribute('id');
|
||
_vcCreateAttr.value = _tree.treeId;
|
||
_vcElement.setAttributeNode(_vcCreateAttr);
|
||
treeList.push(_tree);
|
||
//创建div
|
||
await findVcLabel(_tree, _vcElement);
|
||
let _res = _tree.html;
|
||
}
|
||
|
||
reader(treeList);
|
||
};
|
||
|
||
/**
|
||
* 从当前 HTML中找是否存在 <vc:create name="xxxx"></vc:create> 标签
|
||
*/
|
||
findVcLabel = async function (_tree) {
|
||
//查看是否存在子 vc:create
|
||
var _componentName = _tree.vcCreate.getAttribute('name');
|
||
console.log('_componentName', _componentName, _tree);
|
||
if (!vcFramework.notEmpty(_componentName)) {
|
||
throw '组件未包含name 属性';
|
||
}
|
||
//开始加载组件
|
||
let _componentElement = await loadComponent(_componentName,_tree);
|
||
//_tree.setHtml(_componentElement);
|
||
|
||
console.log('_componentElement>>', _componentElement)
|
||
|
||
if (vcFramework.notNull(_componentElement)) {
|
||
var vcChildElements = _componentElement.getElementsByTagName('vc:create');
|
||
if (vcChildElements.length > 0) {
|
||
var _vcDiv = document.createElement('div');
|
||
for (var _vcChildIndex = 0; _vcChildIndex < vcChildElements.length; _vcChildIndex++) {
|
||
console.log('vcChildElements', vcChildElements);
|
||
var _tmpChildElement = vcChildElements[_vcChildIndex];
|
||
var _subtree = new VcTree(_tmpChildElement, '', 2);
|
||
let _vcCreateAttr = document.createAttribute('id');
|
||
_vcCreateAttr.value = _subtree.treeId;
|
||
_tmpChildElement.setAttributeNode(_vcCreateAttr);
|
||
_tree.putSubTree(_subtree);
|
||
await findVcLabel(_subtree);
|
||
}
|
||
}
|
||
|
||
}
|
||
};
|
||
|
||
|
||
|
||
reader = function (_treeList) {
|
||
console.log('_treeList', _treeList);
|
||
let _header = document.getElementsByTagName('head');
|
||
let _scripts = [];
|
||
for (let _treeIndex = 0; _treeIndex < _treeList.length; _treeIndex++) {
|
||
let _tree = _treeList[_treeIndex];
|
||
let _vcCreateEl = document.getElementById(_tree.treeId);
|
||
let _componentHeader = _tree.html.getElementsByTagName('head');
|
||
let _componentBody = _tree.html.getElementsByTagName('body');
|
||
|
||
if (_vcCreateEl.hasAttribute("location") && 'head' == _vcCreateEl.getAttribute('location')) {
|
||
let _componentHs = _componentHeader[0].childNodes;
|
||
for(let _hsIndex = 0; _hsIndex < _componentHs.length;_hsIndex ++ ){
|
||
console.log('_xxx',_componentHs[_hsIndex]);
|
||
//_header[0].appendChild(_componentHeader[0]);
|
||
let _componentScript = _componentHs[_hsIndex];
|
||
_header[0].appendChild(_componentHs[_hsIndex]);
|
||
}
|
||
//_header[0].appendChild(_componentHeader[0]);
|
||
|
||
} else if (_vcCreateEl.hasAttribute("location") && 'body' == _vcCreateEl.getAttribute('location')) {
|
||
_vcCreateEl.parentNode.replaceChild(_componentHeader[0].childNodes[0], _vcCreateEl);
|
||
} else {
|
||
//_vcCreateEl.parentNode.replaceChild(_componentBody[0].childNodes[0], _vcCreateEl);
|
||
|
||
_vcCreateEl.innerHTML = _componentBody[0].childNodes[0].innerHTML;
|
||
}
|
||
|
||
_scripts.push(_tree.js);
|
||
|
||
}
|
||
|
||
//let _scripts = document.body.getElementsByTagName("script");
|
||
for(let i=0;i<_scripts.length;i++){
|
||
//一段一段执行script
|
||
eval(_scripts[i]);
|
||
}
|
||
|
||
|
||
};
|
||
|
||
readerSubTree = function (_tree) {
|
||
|
||
}
|
||
|
||
/**
|
||
* 加载组件
|
||
* 异步去服务端 拉去HTML 和 js
|
||
*/
|
||
loadComponent = async function (_componentName,_tree) {
|
||
//从缓存查询
|
||
var _cacheComponent = vcFramework.getComponent(_componentName);
|
||
console.log('加载组件名称', _componentName);
|
||
if (vcFramework.notNull(_cacheComponent)) {
|
||
return _cacheComponent;
|
||
}
|
||
|
||
var filePath = '/components/' + _componentName + '/' + _componentName;
|
||
var htmlFilePath = filePath + ".html";
|
||
var jsFilePath = filePath + ".js";
|
||
//加载html 页面
|
||
let [_htmlBody, _jsBody] = await Promise.all([vcFramework.httpGet(htmlFilePath), vcFramework.httpGet(jsFilePath)]);
|
||
|
||
_tmpJsBody = '<script type="text/javascript">//<![CDATA[\n' + _jsBody + '//]]>\n</script>';
|
||
let parser = new DOMParser();
|
||
console.log('htmlBody', _htmlBody);
|
||
console.log('jsBody', _tmpJsBody);
|
||
let htmlComponentDoc = parser.parseFromString(_htmlBody+_tmpJsBody, 'text/html').documentElement;
|
||
//var jsComponentDoc = parser.parseFromString(_jsBody, 'text/html').documentElement;
|
||
|
||
// var _htmlComponentAttr = document.createAttribute('data-component');
|
||
// _htmlComponentAttr.value = _componentName;
|
||
// htmlComponentDoc.setAttributeNode(_htmlComponentAttr);
|
||
// var _jsComponentAttr = document.createAttribute('data-component');
|
||
// _jsComponentAttr.value = _componentName;
|
||
// jsComponentDoc.setAttributeNode(_jsComponentAttr);
|
||
|
||
//创建div
|
||
var vcDiv = document.createElement('div');
|
||
var _divComponentAttr = document.createAttribute('data-component');
|
||
_divComponentAttr.value = _componentName;
|
||
vcDiv.setAttributeNode(_divComponentAttr);
|
||
vcDiv.appendChild(htmlComponentDoc);
|
||
//vcDiv.appendChild(jsComponentDoc);
|
||
vcFramework.putComponent(_componentName, vcDiv);
|
||
_tree.setHtml(vcDiv);
|
||
_tree.setJs(_jsBody);
|
||
return vcDiv;
|
||
};
|
||
|
||
vcFramework = {
|
||
version: "v0.0.1",
|
||
name: "vcFramework",
|
||
author: '吴学文',
|
||
email: '928255095@qq.com',
|
||
qq: '928255095',
|
||
description: 'vcFramework 是自研的一套组件开发套件',
|
||
componentCache: componentCache,
|
||
builderVcTree: builderVcTree
|
||
};
|
||
|
||
window.vcFramework = vcFramework;
|
||
|
||
})(window);
|
||
|
||
/**
|
||
* vc-util
|
||
*/
|
||
(function (vcFramework) {
|
||
|
||
//空判断 true 为非空 false 为空
|
||
vcFramework.notNull = function (_paramObj) {
|
||
if (_paramObj == null || _paramObj == undefined) {
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
//空判断 true 为非空 false 为空
|
||
vcFramework.notEmpty = function (_paramObj) {
|
||
if (_paramObj == null || _paramObj == undefined || _paramObj.trim() == '') {
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
vcFramework.uuid = function () {
|
||
var s = [];
|
||
var hexDigits = "0123456789abcdef";
|
||
for (var i = 0; i < 36; i++) {
|
||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||
}
|
||
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
||
s[8] = s[13] = s[18] = s[23] = "-";
|
||
|
||
var uuid = s.join("");
|
||
return uuid;
|
||
};
|
||
|
||
/**
|
||
* 深度拷贝对象
|
||
*/
|
||
vcFramework.deepClone = function (obj) {
|
||
return JSON.stringify(JSON.stringify(obj));
|
||
}
|
||
|
||
|
||
|
||
})(window.vcFramework);
|
||
|
||
/**
|
||
* 封装 后端请求 代码
|
||
*/
|
||
(function (vcFramework) {
|
||
|
||
vcFramework.httpGet = function (url) {
|
||
// XMLHttpRequest对象用于在后台与服务器交换数据
|
||
return new Promise((resolve, reject) => {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('GET', url, true);
|
||
xhr.onreadystatechange = function () {
|
||
// readyState == 4说明请求已完成
|
||
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
|
||
// 从服务器获得数据
|
||
// fn.call(this, xhr.responseText);
|
||
resolve(xhr.responseText);
|
||
}
|
||
};
|
||
xhr.send();
|
||
});
|
||
};
|
||
vcFramework.httpPost = function (url, data, fn) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open("POST", url, true);
|
||
// 添加http头，发送信息至服务器时内容编码类型
|
||
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
|
||
fn.call(xhr.responseText);
|
||
}
|
||
};
|
||
xhr.send(data);
|
||
};
|
||
})(window.vcFramework);
|
||
|
||
/**
|
||
* vc-cache
|
||
*/
|
||
(function (vcFramework) {
|
||
|
||
/**
|
||
* 组件缓存
|
||
*/
|
||
vcFramework.putComponent = function (_componentName, _component) {
|
||
var _componentCache = vcFramework.componentCache;
|
||
_componentCache[_componentName] = component;
|
||
};
|
||
/**
|
||
* 组件提取
|
||
*/
|
||
vcFramework.getComponent = function (_componentName) {
|
||
var _componentCache = vcFramework.componentCache;
|
||
return _componentCache[_componentName];
|
||
}
|
||
|
||
})(window.vcFramework);
|
||
|
||
|
||
/**
|
||
* vcFramwork init
|
||
* 框架开始初始化
|
||
*/
|
||
(function (vcFramework) {
|
||
//启动 框架
|
||
vcFramework.builderVcTree();
|
||
})(window.vcFramework) |