1 Unstar Star 0 Fork 0

飞道学院 / fd-web-eventTypeScriptMIT

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

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

事件

事件分类

现事件分为三类: 1、用户事件 2、调用事件 3、系统事件

事件 说明
用户事件 所有用户触发的事件称之为用户事件
调用事件 组件A中事件001被组件B调用,则事件001在组件A中称为调用事件
系统事件 系统自动触发的事件成为系统事件

因端点不同有事件有区别现以端点来说明

WEB+H5

用户事件

用户触发的事件,需在html中进行绑定

<div data-feidao-actions="click:a001,mouseover:a002"></div>

使用自定义属性data-feidao-actions绑定事件,多个事件使用','分割;一个事件写法为'事件名:响应名'事件名符合各自端点的事件命名;响应名则为响应文件的名称。

响应文件需在对应的n.ts|b.ts中引入,需要符合下列规范

import a000 from './a000';

const actions = { a000 };

调用事件

调用事件无需绑定

组件A的事件被组件B调用,则在组件B响应中调用原子操作调用组件A的事件

import { IFeidaoAiBrowserComponent } from '@feidao/web/interfaces';
import fire from '@feidao/web/atom/browser/msg/fire';

export default async function a001(fd: IFeidaoAiBrowserComponent, ...args: any[]) {
	// 使用原子操作 fire 进行调用组件事件
	const res = await fire('zj-000001', 'a001', 2);
	// 第一个参数:组件编号
	// 第二个参数:被调用组件的响应名称
	// 第...参数:传给被调用组件响应的参数

	// 可以接收被调用组件响应返回的结果
}

被调用组件的响应文件需在b.ts中引入,需要符合下列规范

import a000 from './a000';

const actions = { a000 };

系统事件

页面

服务端

服务端系统事件在ns.ts中绑定。 系统事件有两个:fd-events-server-check、fd-events-init

事件 说明
fd-events-server-check 页面权限验证
fd-events-init 页面服务端初始化
客户端

客户端系统事件在s.ts中绑定。 系统事件:fd-events-init

事件 说明
fd-events-init 页面客户端初始化

组件

服务端

服务端系统事件在ns.ts中绑定。 系统事件:fd-events-init

事件 说明
fd-events-init 页面服务端初始化
客户端

客户端系统事件在s.ts中绑定。 系统事件:fd-events-init

事件 说明
fd-events-init 页面客户端初始化

微信小程序

微信小程序只有客户端,没有服务端 小程序分为app和页面

用户事件

用户触发的事件,需在wxml中进行绑定

<button type="primary" bindtap="eu-001" style="width: 20em;height: 5em;">去支付</button>

使用小程序绑定事件属性来绑定事件,属性值为用户事件事件名eu-***;并且绑定的用户事件需在s.ts文件中对事件和响应绑定对应关系

export default {
	'eu-001': 'a002',
	'fd-events-init': 'a001'
};

响应文件需在对应的p.ts中引入,需要符合下列规范

import a000 from './a000';

const actions = { a000 };

系统事件

app

事件 描述
fd-events-init app初始化,在生命周期回调—监听小程序初始化之前执行
fd-events-wx-app-launch 生命周期回调—监听小程序初始化-小程序初始化完成时(全局只触发一次)
fd-events-wx-app-show 生命周期回调—监听小程序显示-小程序启动,或从后台进入前台显示时
fd-events-wx-app-hide 生命周期回调—监听小程序隐藏-小程序从前台进入后台时
fd-events-wx-app-error 错误监听函数-小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息

页面

事件 描述
fd-events-init page初始化,在生命周期回调—监听页面加载之前执行
fd-events-wx-page-load 生命周期回调—监听页面加载
fd-events-wx-page-ready 生命周期回调—监听页面初次渲染完成
fd-events-wx-page-show 生命周期回调—监听页面显示
fd-events-wx-page-hide 生命周期回调—监听页面隐藏
fd-events-wx-page-unload 生命周期回调—监听页面卸载
fd-events-wx-page-pulldown_refresh 监听用户下拉动作
fd-events-wx-page-reach-bottom 页面上拉触底事件的处理函数
fd-events-wx-page-share-app-message 用户点击右上角转发
fd-events-wx-page-page-scroll 页面滚动触发事件的处理函数

支付宝小程序

用户事件

用户触发的事件,需在axml中进行绑定

<button type="primary" onTap="eu-001" style="width: 20em;height: 5em;">去支付</button>

使用小程序绑定事件属性来绑定事件,属性值为用户事件事件名eu-***;并且绑定的用户事件需在s.ts文件中对事件和响应绑定对应关系

export default {
	'eu-001': 'a002',
	'fd-events-init': 'a001'
};

响应文件需在对应的p.ts中引入,需要符合下列规范

import a000 from './a000';

const actions = { a000 };

系统事件

支付宝小程序只有客户端,没有服务端 小程序分为app和页面

app

事件 描述
fd-events-init app初始化,在生命周期回调—监听小程序初始化之前执行
fd-events-ali-app-launch 生命周期回调—监听小程序初始化-小程序初始化完成时(全局只触发一次)
fd-events-ali-app-show 生命周期回调—监听小程序显示-小程序启动,或从后台进入前台显示时
fd-events-ali-app-hide 生命周期回调—监听小程序隐藏-小程序从前台进入后台时
fd-events-ali-app-error 错误监听函数-小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息

页面

事件 描述
fd-events-init page初始化,在生命周期回调—监听页面加载之前执行
fd-events-ali-page-launch 生命周期回调—监听页面加载
fd-events-ali-page-ready 生命周期回调—监听页面初次渲染完成
fd-events-ali-page-show 生命周期回调—监听页面显示
fd-events-ali-page-hide 生命周期回调—监听页面隐藏
fd-events-ali-page-unload 生命周期回调—监听页面卸载
fd-events-ali-page-title-click 标题被点击
fd-events-ali-page-reach-bottom 页面上拉触底事件的处理函数
fd-events-ali-page-share-app-message 用户点击右上角转发
fd-events-ali-page-page-pulldown_refresh 页面被下拉

开发

页面逻辑

左侧菜单

  • 菜单数据来源于数据库,并涉及用户权限;需要在组件服务端进行渲染
  • 左侧菜单使用的a标签

头部

  • 显示当前登录用户的用户名

列表

  • 点击新增时段显示新增时段弹出框
  • 列表下方为分页控件
  • 切换显示每页显示的数据,则会重新刷新当前页面的数据

新增时段弹出框

  • 标*的为必填项
  • 点击保存按钮进行保存数据
  • 取消按钮和上侧×为关闭当前的弹出框

编辑时段弹出框

  • 标*的为必填项
  • 点击保存按钮进行保存数据
  • 取消按钮和上侧×为关闭当前的弹出框

事件绑定

  • 事件分为页面事件和组件事件

页面事件

  • 页面事件为window事件,无需手动绑定

组件事件

  • 组件事件为用户事件,所有用户事件都在组件中进行绑定
  • 在html中绑定事件,使用自定义属性data-feidao-actions
  • 绑定事件的方式例如:data-feidao-actions="click:eu-001,mouseenter: eu-002"
  • 可以在同一个节点上依次绑定多个事件,但必须存在一个自定义属性data-feidao-actions
  • 多个事件绑定使用,分隔,事件绑定形式为event-name:fd-event-nameevent-name为原生事件,例如鼠标事件、form事件;fd-event-name为此框架定义的事件名,同一个组件中事件名不能重复

特殊事件

  • 页面还有组件都有特殊事件,此事件不需要手动绑定
  • 特殊事件不是必须存在的事件

页面

  • 特殊事件有两个,分别是:fd-events-server-check、fd-events-init
  • fd-events-server-check,页面验证事件,此事件只存在页面服务端,若此事件对应的响应返回的值为false则页面就不再进行渲染
  • fd-events-init,页面初始化事件,若此事件有对应的响应,则页面首先执行此事件对应的响应;服务端和客户端都有此事件

组件

  • 特殊事件fd-events-init
  • fd-events-init,组件初始化事件,若此事件有对应的响应,则组件首先执行此事件对应的响应;服务端和客户端都有此事件

组件列表

组件编号 描述
zj-000001 左侧
zj-000002 上部
zj-000003 列表
zj-000004 新增
zj-000005 编辑

左侧组件

  • 逻辑为需要在组件服务端进行渲染数据,则需要添加特殊事件;组件服务端对应的事件在文件ns中进行绑定
  • 服务端
    • 所有的逻辑处理都需要在响应文件中实现
export default {
	'fd-events-init': 'na001'
};
  • ns文件中数据为JS对象,key此框架定义的事件名,值则为响应文件名
  • ns文件中所有响应文件引入到n
  • 客户端
    • 此组件没有客户端逻辑

上部组件

  • 逻辑:显示当前登录用户名,点击退出登录按钮退出当前系统,跳转到首页
  • 服务端
  • 服务端无逻辑处理,则不需要任何事件
  • 客户端
  • 显示当前登录用户名,即是此组件默认显示的内容,放到特殊事件中
  • s文件
export default {
	'fd-events-init': 'a000'
};
  • 有一个用户点击事件,需要在html中添加事件绑定;在退出登录的节点上绑定事件data-feidao-actions="click:eu-001"
<div class="bg-e border-b-1" style="height:50px;line-height:50px;">
	<div class="display-ib pos-a vertical-a-t text-r font14" style="width:200px;right:0;">
		<a href="javascript:void(0)" class="a-color-1b" style="margin-right:10px;">黄继承</a>
		<a href="javascript:void(0)" class="a-color-1b" style="margin-right:10px;">修改密码</a>
		<a href="javascript:void(0)" class="a-color-1b" data-feidao-actions="click:eu-001" style="margin-right:10px;">退出登录</a>
	</div>
	<h1 class="display-ib vertical-a-t font16" style="padding-left:20px; margin-right:200px;">考场时段调整</h1>
</div>
  • 需要将绑定的用户事件在s文件中建立事件和响应的对应关系,则s文件内容为
export default {
	'fd-events-init': 'a000',
	'eu-001': 'a001'
};

列表组件

  • 逻辑:默认显示考试、考试时段信息,列表信息,分页信息;点击查询按钮重新渲染列表;点击新增时段显示新增时段弹出框;点击操作按钮显示相应操作。
  • 服务端
  • 显示考试、考试时段、列表、分页
  • 逻辑实现需要放到组件服务端的特殊事件(初始化事件)中
  • ns文件内容为
export default {
	'fd-events-init': 'na001'
};
  • 客户端
  • 点击查询按钮重新渲染列表;点击新增时段显示新增时段弹出框;点击操作按钮显示相应操作
  • 用户点击事件,需要在html中添加事件绑定;在相应的节点上绑定事件data-feidao-actions="click:eu-***"
<div class="pos-r" style="padding:20px;">
	<div class="vertical-a-t" style="padding-right:10px;margin-right:10px;">
		<div style="height:40px;margin-top:10px;">
			<div class="display-ib">
				<span class="vertical-a-t color-6" style="line-height:30px;">考试:</span>
				<span class="color-6 vertical-a-t" style="width:150px;height:30px; line-height:30px;">2018年中医药大学(龙子湖)期末考试</span>
			</div>
			<div class="display-ib">
				<span class="display-ib vertical-a-t color-6 text-r" style="line-height:30px;width:100px;">考试时段:</span>
				<select class="border-1 radius-4 vertical-a-t" style="width:150px;height:30px; line-height:30px; margin-right:10px;">
					<option value="">请选择</option>
				</select>
			</div>
			<div class="display-ib">
				<span class="display-ib vertical-a-t color-6 text-r" style="line-height:30px;width:100px;">考场:</span>
				<input class="border-1 radius-4 vertical-a-t" style="width:150px;height:30px; line-height:30px;padding: 0 5px;margin-right:10px;">
			</div>
			<input type="button" value="查询" data-feidao-actions="click:eu-001" class="border-none radius-4 vertical-a-t bg-1b color-f cursor-p" style="height:30px; line-height:30px;"
			/>
			<input type="button" value="新增时段" data-feidao-actions="click:eu-002" class="border-none radius-4 vertical-a-t bg-1b color-f cursor-p fr" style="height:30px; line-height:30px;"
			/>
		</div>
		<div class="bg-f4 border-t-1 border-l-1 border-b-1" style="height:40px;line-height:40px;width:px;">
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">考场号
			</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">考试时段</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">最大人数</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">分配院部</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">考场状态
			</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">教学楼</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">区域</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">楼层</span>
			<span class="display-ib border-r-1 vertical-a-t text-c" style="width:200px;">操作</span>
		</div>
		<div data-feidao-presentation="P02" class="border-b-1 border-l-1 t_body" style="width: px;">
			<div style="height:40px;line-height:40px;">
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">考场号
				</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">考试时段</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">最大人数</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">分配院部</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">考场状态
				</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">教学楼</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">区域</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:150px;">楼层</span>
				<span class="display-ib border-r-1 vertical-a-t text-c" style="width:200px;">
					<span data-feidao-actions="click:eu-003" class="display-ib cursor-p color-ff" style="margin:0 10px">编辑</span>
					<span data-feidao-actions="click:eu-004" class="display-ib cursor-p color-ff" style="margin:0 10px">删除</span>
					<span data-feidao-actions="click:eu-005" class="display-ib cursor-p color-ff" style="margin:0 10px">锁定</span>
					<span data-feidao-actions="click:eu-006" class="display-ib cursor-p color-ff" style="margin:0 10px">解锁</span>
				</span>
			</div>
		</div>
		<!-- 筛选为空的模板 start -->
		<div class="text-c cursor-p color-9 displayn" style="padding:100px 0;">
			<i class="iconfont icon-wushuju text-c vertical-a-t" style="font-size: 60px;"></i>
			<div class="font24" style="line-height:50px;">没有符合当前筛选条件的数据</div>
		</div>
		<!-- 筛选为空的模板 end -->
	</div>
	<!--分页 start-->
	<div class="text-r" style="margin: 10px 0;">
		<div class="text-r display-ib font14 ht30 l-ht30" style="margin-top:10px;">分页
		</div>
	</div>
	<!--分页 end-->
</div>
  • 需要将绑定的用户事件在s文件中建立事件和响应的对应关系,则s文件内容为
export default {
	'fd-events-init': '',
	'eu-001': 'a001',
	'eu-002': 'a002',
	'eu-003': 'a003',
	'eu-004': 'a004',
	'eu-005': 'a005',
	'eu-006': 'a006'
};

新增时段组件

  • 逻辑:默认显示考试时段;点击确定按钮保存数据;点击×关闭弹框;让其他组件调用的事件让弹框显示
  • 服务端
  • 显示考试时段
  • 逻辑实现需要放到组件服务端的特殊事件(初始化事件)中
  • ns文件内容为
export default {
	'fd-events-init': 'na001'
};
  • 客户端
  • 点击确定按钮保存数据;点击×关闭弹框;让其他组件调用的事件让弹框显示
  • 用户点击事件,需要在html中添加事件绑定;在相应的节点上绑定事件data-feidao-actions="click:eu-***"
  • 让其他组件调用的事件无需在html上绑定,只需在s中定应事件名和响应即可
<div class="pos-f bg-f radius-4 overflow-h" style="margin-left:-200px;width:400px;top:10%;left:50%;">
	<div class="bg-1b font14 color-f" style="height:40px;line-height:40px;padding-left:10px;">
		<i data-feidao-actions="click:eu-002" class="iconfont icon-close fr text-c cursor-p font16" style="width:40px;height:40px;" title="close"></i>新增时段
	</div>
	<div style="padding:20px;">
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				<span class="font18 pos-r" style="color:red;top:5px;padding-right:4px;">*</span>考场号:
			</span>
			<input class="border-1 radius-4 vertical-a-t" style="width:200px;height:30px; line-height:30px;padding: 0 5px;">
		</div>
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				<span class="font18 pos-r" style="color:red;top:5px;padding-right:4px;">*</span>分配考试时段:
			</span>
			<select class="border-1 radius-4 vertical-a-t" style="width:200px;height:30px; line-height:30px; margin-right:10px;">
				<option value="">请选择</option>
			</select>
		</div>
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				时间段类型:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;">上午</span>
		</div>
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				考试日期:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;">上午</span>
		</div>
		<div class="text-c" style="margin-top: 20px;">
			<input data-feidao-actions="click:eu-003" type="button" value="确定" class="border-none radius-4 vertical-a-t bg-1b color-f cursor-p " style="height:30px; line-height:30px;width: 100px"
			/>
		</div>
	</div>
</div>
  • 需要将绑定的用户事件在s文件中建立事件和响应的对应关系,则s文件内容为
export default {
	'fd-events-init': '',
	'eu-001': 'a001',
	'eu-002': 'a002',
	'eu-003': 'a003'
};

编辑时段组件

  • 逻辑:默认显示考试时段;点击确定按钮修改数据;点击×关闭弹框;让其他组件调用的事件让弹框显示并渲染数据
  • 服务端
  • 显示考试时段
  • 逻辑实现需要放到组件服务端的特殊事件(初始化事件)中
  • ns文件内容为
export default {
	'fd-events-init': 'na001'
};
  • 客户端
  • 点击确定按钮保存数据;点击×关闭弹框;让其他组件调用的事件让弹框显示
  • 用户点击事件,需要在html中添加事件绑定;在相应的节点上绑定事件data-feidao-actions="click:eu-***"
  • 让其他组件调用的事件无需在html上绑定,只需在s中定应事件名和响应即可
<div class="pos-f bg-f radius-4 overflow-h" style="margin-left:-200px;width:700px;top:10%;left:50%;">
	<div class="bg-1b font14 color-f" style="height:40px;line-height:40px;padding-left:10px;">
		<i data-feidao-actions="click:eu-002" class="iconfont icon-close fr text-c cursor-p font16" style="width:40px;height:40px;" title="close"></i>编辑
	</div>
	<div style="padding:20px;">
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				考场号:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;width: 200px;">上午</span>
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				<span class="font18 pos-r" style="color:red;top:5px;padding-right:4px;">*</span>院部:
			</span>
			<select class="border-1 radius-4 vertical-a-t" style="width:200px;height:30px; line-height:30px; margin-right:10px;">
				<option value="">请选择</option>
			</select>
		</div>
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				房间号:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;width: 200px;">上午</span>
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				教学楼:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;width: 200px;">上午</span>
		</div>
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				房间名:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;width: 200px;">上午</span>
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				区域:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;width: 200px;">上午</span>
		</div>
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				<span class="font18 pos-r" style="color:red;top:5px;padding-right:4px;">*</span>可容纳考生数:
			</span>
			<input type="number" class="border-1 radius-4 vertical-a-t" style="width:200px;height:30px; line-height:30px; margin-right:10px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				楼层:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;width: 200px;">上午</span>
		</div>
		<div style="margin-top: 20px;">
			<span class="display-ib vertical-a-t color-6 text-r" style="width:100px;line-height:30px;">
				教室类型:
			</span>
			<span class="display-ib vertical-a-t color-6" style="line-height:30px;width: 200px;">上午</span>
		</div>
		<div class="text-c" style="margin-top: 20px;">
			<input data-feidao-actions="click:eu-003" type="button" value="保存" class="border-none radius-4 vertical-a-t bg-1b color-f cursor-p " style="height:30px; line-height:30px;width: 100px"
			/>
		</div>
	</div>
</div>
  • 需要将绑定的用户事件在s文件中建立事件和响应的对应关系,则s文件内容为
export default {
	'fd-events-init': '',
	'eu-001': 'a001',
	'eu-002': 'a002',
	'eu-003': 'a003'
};

Comments ( 0 )

Sign in for post a comment

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

Search

132457 8cb2edc1 1899542 131848 70c8d3a4 1899542