diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..1d39cec97 Binary files /dev/null and b/.DS_Store differ diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 000000000..595660d20 Binary files /dev/null and b/public/.DS_Store differ diff --git a/public/components/.DS_Store b/public/components/.DS_Store new file mode 100644 index 000000000..0b2730e0f Binary files /dev/null and b/public/components/.DS_Store differ diff --git a/public/components/pageFramePackage/body-top/bodyTop.html b/public/components/bodyTop/bodyTop.html similarity index 100% rename from public/components/pageFramePackage/body-top/bodyTop.html rename to public/components/bodyTop/bodyTop.html diff --git a/public/components/bodyTop/bodyTop.js b/public/components/bodyTop/bodyTop.js new file mode 100644 index 000000000..78acd8cda --- /dev/null +++ b/public/components/bodyTop/bodyTop.js @@ -0,0 +1,3 @@ +(function(){ + +})() \ No newline at end of file diff --git a/public/components/pageFramePackage/breadcrumb/breadcrumb.html b/public/components/breadcrumb/breadcrumb.html similarity index 100% rename from public/components/pageFramePackage/breadcrumb/breadcrumb.html rename to public/components/breadcrumb/breadcrumb.html diff --git a/public/components/pageFramePackage/breadcrumb/breadcrumb.js b/public/components/breadcrumb/breadcrumb.js similarity index 100% rename from public/components/pageFramePackage/breadcrumb/breadcrumb.js rename to public/components/breadcrumb/breadcrumb.js diff --git a/public/components/pageFramePackage/common/commonBottom.html b/public/components/commonBottom/commonBottom.html similarity index 100% rename from public/components/pageFramePackage/common/commonBottom.html rename to public/components/commonBottom/commonBottom.html diff --git a/public/components/commonBottom/commonBottom.js b/public/components/commonBottom/commonBottom.js new file mode 100644 index 000000000..97783f1b8 --- /dev/null +++ b/public/components/commonBottom/commonBottom.js @@ -0,0 +1,3 @@ +(function(){ + +})(); \ No newline at end of file diff --git a/public/components/pageFramePackage/common/commonTop.html b/public/components/commonTop/commonTop.html similarity index 100% rename from public/components/pageFramePackage/common/commonTop.html rename to public/components/commonTop/commonTop.html diff --git a/public/components/commonTop/commonTop.js b/public/components/commonTop/commonTop.js new file mode 100644 index 000000000..e69de29bb diff --git a/public/components/pageFramePackage/copyright/copyright.html b/public/components/copyright/copyright.html similarity index 100% rename from public/components/pageFramePackage/copyright/copyright.html rename to public/components/copyright/copyright.html diff --git a/public/components/pageFramePackage/copyright/copyright.js b/public/components/copyright/copyright.js similarity index 100% rename from public/components/pageFramePackage/copyright/copyright.js rename to public/components/copyright/copyright.js diff --git a/public/components/pageFramePackage/initData/initData.html b/public/components/initData/initData.html similarity index 100% rename from public/components/pageFramePackage/initData/initData.html rename to public/components/initData/initData.html diff --git a/public/components/pageFramePackage/initData/initData.js b/public/components/initData/initData.js similarity index 100% rename from public/components/pageFramePackage/initData/initData.js rename to public/components/initData/initData.js diff --git a/public/components/pageFramePackage/loading/loading.html b/public/components/loading/loading.html similarity index 100% rename from public/components/pageFramePackage/loading/loading.html rename to public/components/loading/loading.html diff --git a/public/components/pageFramePackage/loading/loading.js b/public/components/loading/loading.js similarity index 100% rename from public/components/pageFramePackage/loading/loading.js rename to public/components/loading/loading.js diff --git a/public/components/pageFramePackage/login/login.html b/public/components/login/login.html similarity index 100% rename from public/components/pageFramePackage/login/login.html rename to public/components/login/login.html diff --git a/public/components/pageFramePackage/login/login.js b/public/components/login/login.js similarity index 100% rename from public/components/pageFramePackage/login/login.js rename to public/components/login/login.js diff --git a/public/components/pageFramePackage/menu/menu.html b/public/components/menu/menu.html similarity index 100% rename from public/components/pageFramePackage/menu/menu.html rename to public/components/menu/menu.html diff --git a/public/components/pageFramePackage/menu/menu.js b/public/components/menu/menu.js similarity index 100% rename from public/components/pageFramePackage/menu/menu.js rename to public/components/menu/menu.js diff --git a/public/components/pageFramePackage/message/message.html b/public/components/message/message.html similarity index 100% rename from public/components/pageFramePackage/message/message.html rename to public/components/message/message.html diff --git a/public/components/pageFramePackage/message/message.js b/public/components/message/message.js similarity index 100% rename from public/components/pageFramePackage/message/message.js rename to public/components/message/message.js diff --git a/public/components/pageFramePackage/messageTips/messageTips.html b/public/components/messageTips/messageTips.html similarity index 100% rename from public/components/pageFramePackage/messageTips/messageTips.html rename to public/components/messageTips/messageTips.html diff --git a/public/components/pageFramePackage/messageTips/messageTips.js b/public/components/messageTips/messageTips.js similarity index 100% rename from public/components/pageFramePackage/messageTips/messageTips.js rename to public/components/messageTips/messageTips.js diff --git a/public/components/pageFramePackage/nav/nav.html b/public/components/nav/nav.html similarity index 100% rename from public/components/pageFramePackage/nav/nav.html rename to public/components/nav/nav.html diff --git a/public/components/pageFramePackage/nav/nav.js b/public/components/nav/nav.js similarity index 100% rename from public/components/pageFramePackage/nav/nav.js rename to public/components/nav/nav.js diff --git a/public/components/pageFramePackage/register/register.html b/public/components/register/register.html similarity index 100% rename from public/components/pageFramePackage/register/register.html rename to public/components/register/register.html diff --git a/public/components/pageFramePackage/register/register.js b/public/components/register/register.js similarity index 100% rename from public/components/pageFramePackage/register/register.js rename to public/components/register/register.js diff --git a/public/flow/login.html b/public/flow/login.html index 7d7991be3..d67a4ac42 100644 --- a/public/flow/login.html +++ b/public/flow/login.html @@ -23,7 +23,7 @@ - + diff --git a/public/vcCore/vcFramework.js b/public/vcCore/vcFramework.js index cca63eea2..ae618a2d8 100644 --- a/public/vcCore/vcFramework.js +++ b/public/vcCore/vcFramework.js @@ -7,26 +7,204 @@ * * @description 完成组件化编程思想 * + * @time 2020-03-04 + * + * @qq 928255095 + * + * @mail 928255095@qq.com + * */ (function(){ var vcFramework = window.vcFramework ||{}; + var componentCache={}; /** * 从当前 HTML中找是否存在 标签 */ - findVcLabel = function(_currentHtml){ + findVcLabel = function(_currentElement){ + //查看是否存在子 vc:create + var _componentName = _currentElement.getAttribute('name'); + + if(!vcFramework.notNull(_componentName)){ + throw '组件未包含name 属性'; + } + //开始加载组件 + loadComponent(_componentName,function(_componentElement){ + parseHtml(_componentElement); + }); + }; createElement = function(_html){ - - }; reader = function(){ }; -})(); \ No newline at end of file + _initComponent = function(){ + var vcElements = document.getElementsByTagName('vc:create'); + for(var _vcElementIndex = 0; _vcElementIndex < vcElements.length; _vcElementIndex ++){ + var _vcElement = vcElements[_vcElementIndex]; + findVcLabel(_vcElement); + } + + }; + + parseHtml= function(_childElement){ + var vcChildElements = _childElement.getElementsByTagName('vc:create'); + + //vcChildElements.forEach(function(_childElement){ + for(var _vcChildIndex = 0; _vcChildIndex < vcChildElements.length; _vcChildIndex ++){ + var _childElement = vcChildElements[_vcChildIndex]; + var _newChildElement = findVcLabel(_childElement); + var _parentElement = _childElement.parentNode; + _parentElement.replaceChild(_childElement,_newChildElement); + } + }; + /** + * 加载组件 + * 异步去服务端 拉去HTML 和 js + */ + loadComponent = function(_componentName,callBack){ + + //从缓存查询 + var _cacheComponent = vcFramework.getComponent(_componentName); + + if(vcFramework.notNull(_cacheComponent)){ + callBack(_cacheComponent); + return ; + } + + var filePath = '/components/'+_componentName+'/'+_componentName; + var htmlFilePath = filePath + ".html"; + var jsFilePath = filePath + ".js"; + //加载html 页面 + var _htmlBody = ""; + var _jsBody = ""; + vcFramework.httpGet(htmlFilePath,function(_hBody){ + _htmlBody = _hBody; + vcFramework.httpGet(jsFilePath,function(_jBody){ + _jsBody = ''; + var parser = new DOMParser(); + var htmlComponentDoc = parser.parseFromString(_htmlBody, '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); + callBack(vcDiv); + }); + }); + + }; + + vcFramework = { + version: "v0.0.1", + name: "vcFramework", + author: '吴学文', + email:'928255095@qq.com', + qq:'928255095', + description:'vcFramework 是自研的一套组件开发套件', + componentCache: componentCache, + initComponent:_initComponent + }; + + window.vcFramework = vcFramework; + +})(window); + +/** + * vc-util + */ +(function(vcFramework){ + + //空判断 true 为非空 false 为空 + vcFramework.notNull = function (_paramObj) { + if (_paramObj == null || _paramObj == undefined || _paramObj.trim() == '') { + return false; + } + return true; + }; + + + +})(window.vcFramework); + +/** + * 封装 后端请求 代码 + */ +(function(vcFramework){ + + vcFramework.httpGet=function(url, fn) { + // XMLHttpRequest对象用于在后台与服务器交换数据 + 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); + } + }; + 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(this, 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.initComponent(); +})(window.vcFramework) \ No newline at end of file