1 Unstar Star 0 Fork 1

飞道学院 / fd-web-cptTypeScriptMIT

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
飞道Web前端开发-组件拆分 spread retract

Clone or download
gexiaodan authored 注释
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

组件划分

  • 页面排版
  • 业务逻辑

组件

  • 以WEB端页面demo为例;示例页面demo.html中页面内容
  • 简单可以看到大致分为:左侧,上部,中间内容,两个弹出框
  • 从页面上可以看出,中间内容和两个弹出框有逻辑关联
  • 暂可以将左侧、上部划分为单独组件
  • 同时一个组件不建议划分很多内容,避免开发困难
  • 中间内容列表和新增编辑弹框没有很强的逻辑关联,可以划分为两个组件
  • 最终该页面划分为了左侧、上部、修改弹框、列表、新增弹框5个组件

公共组件

两个以上的页面含有的公共部分都可以划分成为公共组件,公共组件放在文件夹common中。

开发文件目录说明

  • 将不同端点的开发文件放在src-**目录下
  • 每一个开发目录src-**目录中都有atom-**固定目录
  • 将组件文件夹放在页面文件夹内部

页面[demo]

  • 文件以页面的名称命名,例如此页面为demo.html,则页面文件名为demo
  • 文件n,ns,b,s,html,na001为必须存在的文件
  • n文件与ns文件成对存在
  • b文件与s文件成对存在
  • html为页面body内容

组件[zj-000***]

  • ***为组件顺序编码
  • 将划分的5个组件名称依次命名
  • 创建组件文件
  • 文件n,ns,b,s,tpl为必须存在的文件
  • n文件与ns文件成对存在
  • b文件与s文件成对存在
编号 名称
zj-000001 左侧
zj-000002 上部
zj-000003 列表
zj-000004 新增弹框
zj-000005 修改弹框

内容修改

页面

  • html文件
    • html中将划分的组件内容使用组件标签<zj-000001></zj-000001>替换,此组件标签上可以添加html属性或自定义属性
	    <div><zj-000001></zj-000001></div>
	    <div id="right" class="overflow-x-a display-" style="margin-left:200px;min-width:800px;">
		   <zj-000002></zj-000002>
		   <zj-000003></zj-000003>
		</div>
		<!--新增时段-start-->
		<zj-000004 class="bg-black-rgba3 pos-f display-n" style="z-index:99; height:100%;width:100%;top:0;left:0;"></zj-000004>
		<!--新增时段-end-->

		<!--编辑-start-->
		<zj-000005 class="bg-black-rgba3 pos-f display-n" style="z-index:99; height:100%;width:100%;top:0;left:0;"></zj-000005>
		<!--编辑-end-->
  • n文件
    • 引入组件n文件
    import { ICommonParams, IHeaders } from '@feidao/service/interfaces';
    import html from './html';
    import s from './ns';
    
    import init from '@feidao/web/framework/nodejs/d/page';
    
    
    import c0 from './zj-000001/n';
    import c1 from './zj-000002/n';
    import c2 from './zj-000003/n';
    import c3 from './zj-000004/n';
    import c4 from './zj-000005/n';// import components
    
    
    import na001 from './na001'; // import actions
    
    export default async function main(url: string, msg: ICommonParams, headers: IHeaders) {
    	const actions = { na001 };
    
    	//将引入的组件n放入初始化中
    
    	const res = await init(html, url, msg, headers, s, actions, c0 c1 c2 c3 c4);
    
    	const html_str = `<!DOCTYPE html>
    	<html>
    
    	<head>
    		<meta charset="UTF-8">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    		<meta name="apple-mobile-web-app-capable" content="yes" />
    		<meta name="renderer" content="webkit">
    		<title>demo</title>
    		<link inline rel="stylesheet" type="text/css" href="./css/iconfont-web.css">
    		<link inline href="https://cdn.jsdelivr.net/npm/feidao-css/feidao.css" type="text/css" rel="stylesheet">
    		<link inline rel="stylesheet" type="text/css" href="./css/daokes-web.css">
    		<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    		<script src="./js/feidao.js"></script>
    		<script type="text/javascript">
    			window.addEventListener('WebComponentsReady', function () {
    				var t = document.createElement('script');
    				t.src = './js/demo.js';
    				document.head.appendChild(t);
    			});
    		</script>
    	</head>
    	<body>
    	${html.toString()}
    	</body>
    </html>
    `;
    const html_obj = { data: html_str };
    if (typeof res === 'object' && Object.keys(res).length > 0) {
    	const result = Object.assign({}, html_obj, res);
    	return result;
    }
    return html_obj;
    }
    • 修改页面<head>中的<title>信息
    <title>demo</title>
    • 修改引入的页面文件
    var t = document.createElement('script');
    t.src = './js/demo.js';
    document.head.appendChild(t);
  • ns文件
    • 内容为,na001为页面验证响应。
    'fd-events-server-check': 'na001',
    'fd-events-init': ''
  • b文件
    • 引入组件的b文件
    import init from '@feidao/web/framework/browser/d/demo';
    
    import s from './s';
    
    import c001 from './zj-000001/b';
    import c002 from './zj-000002/b';
    import c003 from './zj-000003/b';
    import c004 from './zj-000004/b';
    import c005 from './zj-000005/b';// import components
    
    (() => {
    	const actions = {};
    	//将引入的组件b放入初始化中
    
    	init(s, actions, c001, c002, c003, c004, c005);
    })();
    
  • s文件
    • 内容为初始状态
    'fd-events-init': ''

组件[zj-000001]

  • 以组件zj-000001为例
  • n文件
    • 组件初始化。
import { ICommonParams, IHeaders } from '@feidao/service/interfaces';
import { HTMLElement } from 'node-html-parser';
import s from './ns';

import init from '@feidao/web/framework/nodejs/d/component';
import { id, spaceid, systemid, refsystemid } from './config';

import tpl from './tpl';

export default function main(html: HTMLElement, url: string, msg: ICommonParams, headers: IHeaders, query: any) {
	const actions = {};

	return init(id, tpl, s, actions, html, url, msg, headers, query, { spaceid, systemid, refsystemid });
}
  • ns文件
    • 保持初始内容
'fd-events-init': ''
  • b文件
    • 组件初始化。
import init from '@feidao/web/framework/browser/d/component';

import s from './s';

import { id } from './config';
import * as params from './config';

////////////////////////////////////////////////////////////////////////////////
// import actions
import a002 from './a002';
import a004 from './a004';
////////////////////////////////////////////////////////////////////////////////

const actions = { a002, a004 };

export default function main(url: string, query: any) {
   return init(id, s, actions, url, query, params);
}
  • s文件
    • 保持初始内容
'fd-events-init': ''
  • tpl文件
    • 将组件的html内容复制到tpl中
<div id="left_open" style="display: block;">
 	<div class="text-c" style="height:80px;">
 		<img src="./images/M-logo.png" style="margin-top:8px;padding-top:15px;" alt="logo">
 	</div>
 	<ul data-feidao-presentation="P01" class="nav_list color-fff font14" style="line-height:50px;">
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;" href="index_media.html">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-home"></i>
 				<span class="font14">首页-媒介</span>
 			</a>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-base_data"></i>
 				<span class="font14">基础数据</span>
 			</a>
 			<ul>
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="customer.html">客户</a>
 				</li>
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;">基础设置</a>
 					<ul>
 						<li>
 							<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="channel_level.html">渠道级别</a>
 						</li>
 					</ul>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-duomeit"></i>
 				<span class="font14">媒体资源</span>
 			</a>
 			<ul>
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="picture.html">图片</a>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-iconset0225"></i>
 				<span class="font14">投放管理</span>
 			</a>
 			<ul>
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;">广告投放</a>
 					<ul>
 						<li>
 							<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="execute.html">新建</a>
 						</li>
 					</ul>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-report"></i>
 				<span class="font14">报表统计</span>
 			</a>
 			<ul>
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="media_summary.html">影音广告执行单汇总</a>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;" href="wifi_probe.html">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-signal3xinhao"></i>
 				<span class="font14">数据采集</span>
 			</a>
 		</li>
 	</ul>
 	<div class="pos-a text-c" style="left:0;bottom:0;width:100%;height:40px;">
 		<div id="close" class="pos-r bg-f cursor-p display-ib" style="height:20px;width:40px; border-radius:10px;">
 			<div class="pos-r bg-1b fr" style="height:18px;width:18px;top:1px; border-radius:10px;"></div>
 		</div>
 	</div>
 </div>
 <div id="left_close" style="display: none;">
 	<div class="text-c" style="height:80px;">
 		<img src="./images/M=logo.png" style="margin-top:8px;padding-top:15px;" alt="摩炫logo">
 	</div>
 	<ul data-feidao-presentation="P02" class="nav_list color-fff font14" style="line-height:50px;">
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;" href="index_media.html">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-home"></i>
 			</a>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;" href="index_audit.html">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-home"></i>
 			</a>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-base_data"></i>
 			</a>
 			<ul class="left_69">
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="channel.html">渠道</a>
 				</li>
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;">基础设置</a>
 					<ul class="left_69">
 						<li>
 							<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="channel_level.html">渠道级别</a>
 						</li>
 					</ul>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-duomeit"></i>
 			</a>
 			<ul class="left_69">
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="picture.html">图片</a>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-iconset0225"></i>
 			</a>
 			<ul class="left_69">
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;">广告投放</a>
 					<ul class="left_69">
 						<li>
 							<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="execute.html">新建</a>
 						</li>
 					</ul>
 				</li>
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;">H5插播</a>
 					<ul class="left_69">
 						<li>
 							<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="h5execute.html">新建</a>
 						</li>
 					</ul>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-report"></i>
 			</a>
 			<ul class="left_69">
 				<li>
 					<a class="display-b font12" style="padding-left:25px;height:50px;line-height:50px;" href="media_summary.html">影音广告执行单汇总</a>
 				</li>
 			</ul>
 		</li>
 		<li>
 			<a class="display-b" style="padding-left:25px;height:50px;line-height:50px;" href="wifi_probe.html">
 				<i style="padding-right:10px;" class="iconfont font20 vertical-a-m icon-signal3xinhao"></i>
 			</a>
 		</li>
 	</ul>
 	<div class="pos-a pos-l0 pos-b0 w100-per ht40 text-c">
 		<div id="open" data-feidao-actions="click:open_animation" class="pos-r bg-1890ff radius-10 cursor-p display-ib" style="height:20px;width:40px;">
 			<div class="pos-r radius-10 bg-fff fl" style="height:18px;width:18px;top:1px;"></div>
 		</div>
 	</div>
 </div>

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/feidao-edu/fd-web-cpt.git
git@gitee.com:feidao-edu/fd-web-cpt.git
feidao-edu
fd-web-cpt
fd-web-cpt
master

Search

132457 8cb2edc1 1899542 131848 70c8d3a4 1899542