kevin zou
kevin zou
关于楼主提出的端到端组件第二个问题,即页面上的不同组件同步数据问题。 1.当前页面设计时,是如何看待这两个组件是否需要同步。 大部分时候是不会要求同步的。企业应用是多人协作,多人在不同地点操作同一数据。 可能系统管理员在维护职业列表,而开单的人用一个下拉列表框读取职业列表,这个时候就是两个完全不同的上下文,没有谁会要求这时候要同步数据,就算做得到,代价太大,发生的机率太小,也没必要。 如果删除了一个职业,用户选了提交会怎样,那是业务逻辑层管控的问题,它必然会检查某个职业是否还存在资料表中。 如果用户要选取管理员刚刚新增的那个职业(那一定是它刚才有联系管理员,要求他加的),这个时候最简单的方式(程式没有负担),用户关掉程式在打开。 或者程式准备一个刷新按钮,用户单击刷新一下(不过这个对于当前这个下拉框场景可能不实用)。 我们是将这个下拉框组件的每次下拉刷新属性设为true,这样用户再次单击一下下拉框,程式就会重新读取数据库,用户就可以选取到那个新职业了。 如果有人说用户修改了职业名称了,比如说警察修改成了护士,那用户明明看到的是警察,怎么提交后就变成了护士。这种情况确实奇葩,问题本质上是那位管理员的作法,一般会将警察修改成警察(Police),但很少会将警察变成护士这种业务上有问题的东西,因为这个table作为外键关联表,很多现在存在的数据的意义都会改变,所以还要具体场景具体分析(例如将id和名称同时带入,在服务端一起验证) 先写这些,起床了~~
2.有的时候确实要同步 例如我们导航菜单组件里的菜单项有个star的图标,用户单击后就会将这个菜单项加成快捷方式。 另一个显示快捷方式的组件在导航菜单下的页面主要区域。 当然在导航组件中单击某个菜单项加入快捷方式后,快捷方式组件能够立刻响应,看到刚刚加的快捷方式已新增进来了。 这个时候涉及到的就是同步问题,首先找到导航菜单组件和快捷方式组件的共同父组件,由那个父组件(就是拼装两个组件)来实现同步。导航菜单组件在加入快捷方式成功后,发送事件给父组件,父组件调用快捷方式组件的刷新方法重新载入数据。 这是最简单的方式,避免了复杂的数据同步问题。 那还有一种是重复取数据导致的浪费问题,导航菜单组件实际上也是由多个子菜单组件组成,每个子菜单组件都要一份相同的【我的快捷方式数据】,以便在某个菜单项上显示star图标,表示这个菜单已加入快捷方式。像这样的子菜单组件,每一个都是动态载入,也不知道谁会先载入,谁会后载入,但是每个子菜单组件在自己内部都会去请求【我的快捷方式数据】,这样不仅浪费网络,也浪费内存,所以需要想办法来共用。 这种问题涉及到了组件的本质问题,到底要怎样封装一个组件? 端到端组件的本质又是什么? UI组件本质上只包含两个部分:view,data 比如那个菜单组件的view就是一行行的div(菜单项)根据MENU数据(用于显示菜单名称在div里)以及我的快捷方式数据(用于某个div是否加上s-fav-menu的class) 这就够了,这就是业务组件 那我们请求MENU数据的逻辑和请求我的快捷方式数据的逻辑就不需要在那个组件里了吗? 如果不加入这部分逻辑,显然这个组件离封装差太远了,如果加上,又会造成请求逻辑和数据浪费的问题,两难。 其实请求逻辑是业务组件的外围,能够自己在组件内部就去完成所有数据的请求逻辑最好,但本质上它们是两个互相独立的概念。业务组件只要数据就可以完成组件渲染,数据如何来,从何处来是进一步封装的问题。默认情况下当然封装在一起,这也利于我们分而治之独立开发调试。但我们因为认识到它是外围概念,所以知道它和组件本质实际上可以分离。 在需要控制它的业务数据请求逻辑时,就可以控制(例如提供一个disableGetFavMenuData属性,如果为true,则自己不去请求),父组件停用子组件的请求后,自己去抓取相关的业务数据,并把它直接赋值给各个需要的子组件。 最近在网上看到楼主很多文章,和楼主一样,做这些事情好多年了,有空可以多多交流~~
@xufei 没错,如果确实要同步,就只能通过这种推送作业。 像一些面向个人的产品,如todo-list这种,在一个终端改了数据,在另一个终端如果立刻显示出来,那带给用户的体验肯定是满满幸福感的。像支付宝付钱,网页显示二维码,手机扫后,网页就知道了,马上显示付款成功。这种感觉真是太棒了,赞一个支付宝团队。