From 37c3c67ca51109cc6a167d3299504ac4c015e166 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=AD=A6=E6=96=87?= Date: Wed, 4 Mar 2020 01:34:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E6=AE=B5=E6=A1=86=E6=9E=B6=E6=9C=AA?= =?UTF-8?q?=E5=A4=84=E7=90=86=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes public/.DS_Store | Bin 0 -> 6148 bytes public/components/.DS_Store | Bin 0 -> 10244 bytes .../body-top => bodyTop}/bodyTop.html | 0 public/components/bodyTop/bodyTop.js | 3 + .../breadcrumb/breadcrumb.html | 0 .../breadcrumb/breadcrumb.js | 0 .../common => commonBottom}/commonBottom.html | 0 .../components/commonBottom/commonBottom.js | 3 + .../common => commonTop}/commonTop.html | 0 public/components/commonTop/commonTop.js | 0 .../copyright/copyright.html | 0 .../copyright/copyright.js | 0 .../initData/initData.html | 0 .../initData/initData.js | 0 .../loading/loading.html | 0 .../{pageFramePackage => }/loading/loading.js | 0 .../{pageFramePackage => }/login/login.html | 0 .../{pageFramePackage => }/login/login.js | 0 .../{pageFramePackage => }/menu/menu.html | 0 .../{pageFramePackage => }/menu/menu.js | 0 .../message/message.html | 0 .../{pageFramePackage => }/message/message.js | 0 .../messageTips/messageTips.html | 0 .../messageTips/messageTips.js | 0 .../{pageFramePackage => }/nav/nav.html | 0 .../{pageFramePackage => }/nav/nav.js | 0 .../register/register.html | 0 .../register/register.js | 0 public/flow/login.html | 2 +- public/vcCore/vcFramework.js | 186 +++++++++++++++++- 31 files changed, 189 insertions(+), 5 deletions(-) create mode 100644 .DS_Store create mode 100644 public/.DS_Store create mode 100644 public/components/.DS_Store rename public/components/{pageFramePackage/body-top => bodyTop}/bodyTop.html (100%) create mode 100644 public/components/bodyTop/bodyTop.js rename public/components/{pageFramePackage => }/breadcrumb/breadcrumb.html (100%) rename public/components/{pageFramePackage => }/breadcrumb/breadcrumb.js (100%) rename public/components/{pageFramePackage/common => commonBottom}/commonBottom.html (100%) create mode 100644 public/components/commonBottom/commonBottom.js rename public/components/{pageFramePackage/common => commonTop}/commonTop.html (100%) create mode 100644 public/components/commonTop/commonTop.js rename public/components/{pageFramePackage => }/copyright/copyright.html (100%) rename public/components/{pageFramePackage => }/copyright/copyright.js (100%) rename public/components/{pageFramePackage => }/initData/initData.html (100%) rename public/components/{pageFramePackage => }/initData/initData.js (100%) rename public/components/{pageFramePackage => }/loading/loading.html (100%) rename public/components/{pageFramePackage => }/loading/loading.js (100%) rename public/components/{pageFramePackage => }/login/login.html (100%) rename public/components/{pageFramePackage => }/login/login.js (100%) rename public/components/{pageFramePackage => }/menu/menu.html (100%) rename public/components/{pageFramePackage => }/menu/menu.js (100%) rename public/components/{pageFramePackage => }/message/message.html (100%) rename public/components/{pageFramePackage => }/message/message.js (100%) rename public/components/{pageFramePackage => }/messageTips/messageTips.html (100%) rename public/components/{pageFramePackage => }/messageTips/messageTips.js (100%) rename public/components/{pageFramePackage => }/nav/nav.html (100%) rename public/components/{pageFramePackage => }/nav/nav.js (100%) rename public/components/{pageFramePackage => }/register/register.html (100%) rename public/components/{pageFramePackage => }/register/register.js (100%) diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1d39cec970aa83db2282e43b0506d46048acb2bb GIT binary patch literal 6148 zcmeHKO>fgM7=GP$U0Q}H64G|e1&KpJ3(_N&S8NIokZygKCLg^`0mYOq zz2ze6QzL4NQsNX+L}NOWUO@>;%ew=3Y`ej`j;HWxLa&jZApSO3T$bgt!EcPr-Zy&K zYV>d!?^}b{1+T!|63lK=pIyuUQ*2OXQ@!7P4yH+*<-5CIS*zXI=x$n8-|AoOzw}Od z>E(W2WFvp}T$CRB`Dvj2C!8n0d_Q;^N9A~M;~`ITKTe~WB*$TdkQdM5H00%o7ipNu zemvD+Sv{*a9_-BL`+Gy%*}K0O+H=Rb>kRFE=iXw`v$k(K2S>+e7jNco7w6_ z=_>|Pbky5A&ed2cRCHqc^1<}TOy5wL93B1JGMt#J(Bwt|qd;AOwki(9`Tywh`+uEe zN=5;rz<;Fx>l}KABTPx3tt*ogXRVENj3i9NRSG2qnLduCBaY%7Bxz`~g#&aoRtixA PGamv{29p^D)~dh{)bqSX literal 0 HcmV?d00001 diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..595660d20bfead8b2b5c3d8faa076f3410a6a85e GIT binary patch literal 6148 zcmeHKL2uJA6n<{Ik#-<@K-!MEAaN+tf;0^@O{%(a*bS)&4uG~~4Qo&qS53NTl%ibt z55Pa*r*PuP58(&E_iR(O?sh{6AwTK)d$Hf=#Gey8CL+plK%x4Olu-;XC|}8T6;1)Cz`v#df4eO@B}wNrLOK6_k5YLWr7}W0FAjU~dq0&S zx`q>#`N(j-Mx!*zi|y_2qE>ILt>5sxme;z~detAwvR{P7B=3de7ku?3EQXPZpGuj| z<1l)b#N~1O&VkH|Fv;SvA}50wDKDQV*+7;(ImrgO>Zh+8Jg@0BkK0?*>F!R)4|X2S zI{q{W9t0hKH+VRkHNDNd!T!<7`Q_W`yV?6sYB(gYfGN9e@Hc!$aHT*O{c)Dc>P*tGI)B9AAdp!*b3iA6P6Qxsdg4;F82&a<9G{ID|X zlwiuwmiw!PR#uJP*kh`FvvM}@Yz19nT>O+nlre7r%RSfkE!H|+K(PaiYE0Is)XVm9 z;bjBW*`HUyyz(Be0nVHPP64ODq5`}=_;ALq!AhfAI#8%10I-2-Wr+EAfjPdxuE9zp zT3|v`fto7J5kqJ?>V1>fHCSoXbQ0$9ASu5=1G1(p@4>&rIp z|BtUf|1Xo=l~cee@Lwq)8i)PE9)@K0)|J8WUhBh8;B1^%X;c&xW;<2^Z^c`1WoYv` X0Co*l8c_ptKLSbyS2zX!ssg_N<2c0G literal 0 HcmV?d00001 diff --git a/public/components/.DS_Store b/public/components/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..0b2730e0f8ce2e4c1a3caa0d52ebe14498bbfce7 GIT binary patch literal 10244 zcmeHMO>bL86ur+e#Mn;awn-5?FT1G(YlP%RK`26~RRe-0PU0G?j-O@6q1}0d`WN~a z5PyUne}g?g0M5DdV(yIHYmh2bp?TJO<2=u~cjnx4=PM#o94{_E5$TFZ12@Y~8;=ba zf9Jh+)v7l=lm+l2H!_lI+yj}f)y^+61DS!$KxQB_kQsOv7{Hv(tI-N&er5(T1DSyp z0~{Z^xLNk9av4e;I`Ggf0LnUE>xJ*w2PmdnmA$H5hEk!h8Fmjv1ud#AMiJonz02w- zdsVp%Wq?Z&;8Ikci)x2bsCVGHT3w1>DDyKjkQrEKpodp?q%Rk`Z@2sRC;Ij|oW2QWpZ()P+beSxuIcw*jvU3W*CHmv) zp`iLKx(W0cIO^{)c)LWIWSVNvV%`U)L{G2qoFp8-N;uxLbv=csQmvQH3b{bf$cvkc zs#J^Lukcfih>N8t#6JAebtA{sz4JF{sZ+rMT?muL&P=7XVtfDZA+OaqfRzc zLy@1RJVU&;>LtRofnmfs%6Pt@lmy2-p*~)CII1PWHIzTb?*v?4OFvNzv(hqgr1j^T zhhhHUSo}mI!7}8^h76;EBG32VV5!viZbYf3e_-n=SY*bz5m0r#FzVWae`2mM-n%_g zU0LM*3i)_zrc)~xdjJMU$n$GC!_DXqM8IG=0!7zy-v);z=J*_=t z-MA)oAMv`cBPK^r+I4y4*cG)YU^#PZn_O*Bm6nY<{0`u85x0+XMAW{{Z9Vw{j4|3% z*AF#l{j^qiN4csti`rEbXQU0Wse|pPjlsvNHfFIAS~-t1#YlpL2WT&D0F(Mqb*48DO2Ue?xT7M2L z1n&bg(m8SDSQq(i!4BugD=%^!jUv>(_H?Ez;w|x_aw6=}8kQ~K+M4sN({}17vUESO z#B4AOdbX&d$W~iGBYrh)xw7`E@u{kYg?nkHt^tZ2b)TQR1+i%s1_1RIj zxR&QGYJwK~D=Eg@;xU2c>#Z=b6RdQ3{{Q)#|NsA1d}SkEc;?7x(wLd9mIylnTK^kK - + 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