codereview-s8

当元素间存在父子关系时,留意事件冒泡机制所引发的连锁反应

<tr style="cursor: pointer;" ng-repeat="row in $ctrl.efficiencyTable.bodyData" ng-click="$ctrl.stepView(row)">
    ...
    <td class="text-left">
        <a ng-click="$ctrl.efficiencyView(row)" class="hover-link">查看流程</a>
    </td>
</tr>

a元素的点击事件会efficiencyView方法,但因为事件冒泡机制,也会间接的调用stepView方法

最佳实践

angular中可以使用内置的 $event 对象来解决相应问题

首先声明使用$event对象并传参

<a ng-click="$ctrl.efficiencyView(row, $event)" class="hover-link">查看流程</a>

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

efficiencyView (workflow, $event) {
    ...
    $event.stopPropagation()
  }

也可以对比$event对象中的targetcurrentTarget属性是否相同,因为这两个属性分别代表触发事件的dom节点与响应事件的当前节点

if($event.target === $event.currentTarget) ...

扩展

z-index 常见问题

关于z-index本身用法我是了解的,但是最近在做下拉框组件和datepicker时,踩了一些坑,如下:

  • 只有设置了position属性的元素的z-index才会生效
  • 当父容器的z-index小于元素A时,其子容器的z-index无论多大都无法覆盖元素A

最佳实践

实现具有下拉菜单展开特效的组件时,一般会套用一下结构

<div class="dropdown-wrapper">
    <div class="dropdown-toggle">
        ...
    </div>
    <div class="dropdown-list">
        ...
    </div>
</div>

当两个下拉菜单处于垂直布局时,如果没有设置z-index属性,因为dropdown-toggledropdown-list先出现,因此默认的图层顺序是前者高于后者,所以当上面的下拉菜单出现的时候,并不会覆盖下面的toggle,为了解决这个问题,必须做如下处理

.dropdown-list{
    ...
    z-index: 1000;
    ...
}

最后附上DEMO

扩展

对表格中的单元格增加一个hover高亮效果

对于表格中td增加hover高亮时可能会遇到一个问题,就是当你使用常规的border属性对边框进行设置时,可能会发现,每个单元格的上边框和左边框都没有达到理想的效果,但是下边框和右边框却是正常的。 这种问题会出现在对table增加border-collapse: collapse属性或是引用一些第三方的css库,比如bootstrap,具体现象参考DEMO

最佳实践

解决方法其实很简单,就是将td边框的样式从solid改为double,如下:

table tr td {
    border-style: double;
}

原因如下:

Since double is “more distinct” then solid, its colour takes precedence over cells around it, and looks identical to solid anyway ;)

扩展

angular中遭遇的一个奇葩问题

这个问题是我在本期开发排班器组件时遇到的一个很奇葩的问题,大体描述就是如上面github链接中描述的一样,就是当父组件的一个数据采用双向绑定时,并且需要已事件回调的方法更新其内部的某个属性值,然后使用签名为onChangescope属性传给子组件,比如:

scope:{
    ...
    onChange: '&
    ...
}

那么这个onChange的调用在父组件进行更新某条以双向绑定方式进行绑定的属性时,会先于子组件的更新前自动调用,这么说有点抽象,大体的问题我简单描述下。

本来onChange的调用时机应当是自下而上的,也就是当子组件发生更新时,调用父组件通过onChange属性传递的事件回调方法,这个方法会更具子组件的当前状态来对父组件进行更新,这就是理想中的单向数据流子组件通知父组件进行更新的机制。但是在angular中遇到的奇葩现象现象就是,在父组件进行更新时,不知道是因为签名的缘故还是双向绑定的缘故,这个onChange都会先于子组件运行一次,那么问题来了,这个方法本来的调用时机是子组件更新后需要通知父组件进行相应更新时调用的,然而现在子组件还未更新则先调用了该方法,那么回调函数中的参数必为空,除非onChange中加入了空校验代码,不然就会报错,其实加了空校验也没有什么意义,因为这个方法都会调用的,但是却不会进行任何的改变,相当于浪费了一部分性能。

最佳实践

解决方法在这里,这种解决方法算是一种workaround,即在组件中使用另一个对象来储存父组件需要更新的那个值,算是做了一种类似中间件的处理,之后因为双向绑定自动更新机制对于对象的更新时更具reference来进行的,那么在父组件或子组件中对于这一个数据的引用均是相同的,而不会像基本数据类型存在一个新旧值的差异,不过这终究是一个workaround

限制上传文件的类型

现在通过type为文件类型的input上传文件已经很普遍了,并且对于表单的校验,通常我们会在提交时进行,文件类型的表单也不例外,一般校验的内容有文件大小、文件类型(扩展名)等等。今天遇到一个需求很有意思,大体意思是想在用户进行文件上传时,就有偏向性的屏蔽掉一些不支持的文件格式,比如上传图片,那么在文件选择对话框就不要出现文本类型的文件。

这个问题我一开始是不知道怎么解决的,因为浏览器对于操作系统是一个沙盒,因此对于文件显示的控制应当没有权限控制,去网上google了下,答案也是这样的,没有方式可以实现百分之百屏蔽某种文件类型的方式。但是却发现了另一个很有意思的属性,也可以达到类型的效果。

这个属性就是input标签的accept属性:

If the value of the type attribute is file, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers:

它可以接受的值的描述:

  • A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
  • A valid MIME type with no extensions.
  • audio/* representing sound files. HTML5
  • video/* representing video files. HTML5
  • image/* representing image files. HTML5

最佳实践

比如我们想要限制上传文件类型为excel文件类型,只需要创建如下标签:

<input type="file" accept=".xls,.xlsx"/>

这样这个文件表单对话框被激活时,默认会选取以.xls和.xlsx结尾的文件。

虽然这个属性可以达到类似的效果,但是是无法完全替代对于文件扩展名的校验的。因为只要用户想要上传别的类型的文件,通过切换文件对话框中的选取文件类型选项(比如显示全部文件类型),就可以选取别的类型的文件了,因此在提交时,也别忘了添加校验逻辑,防止因为上传了一些不支持的类型造成服务器内部错误。

扩展

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏macOS 开发学习

Mac OSX 开发基础控件学习之 NSOutlineView

在开发基于osx的Application的过程中,当我们需要显示一组列表结构的数据时,比较容易想到的控件是NSTableView;但如果你显示的数据有层级结构...

1872
来自专栏彭湖湾的编程世界

【javascript】原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1;css表达式...

2198
来自专栏祝威廉

React问题三则

这两天在用 Blueprint+React+ServiceFramework+MySQL 为主要组件开发一个小玩具,由衷的喜欢React了。为啥呢?非常后端,其...

771
来自专栏张戈的专栏

根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

自从中国联盟成员导航采用响应式布局之后,不少朋友反馈该页面在 IE8、IE7 浏览器会错排,经测试发现确实存在这个问题,但我一直也没去深究解决。这几天博客折腾得...

4348
来自专栏移动开发之家

GSYVideoPlayer项目说明

项目目前UI层大部分方法和变量都是protect,虽然就封装性而言这并不是很好,但你可以继承后快捷实现你的自定义。

1013
来自专栏程序员的诗和远方

TypeScript 中使用 CSS Modules

CSS 的全局性 相当长一段时间 CSS 总是在页面上作为一个全局的存在,以前这个『特性』影响还不算很大,命名上注意一点,比如使用 BEM 也能一定程度上解决问...

5417
来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

8557
来自专栏技术小讲堂

ASP.NET AJAX(3)__UpdatePanel

今天也不知道写不写的完了,最近闲下来了,却感冒了,早上起来都不会说话了,不过幸亏咱不是靠嘴皮子过活了,哎~~~~窃喜吧 上一篇简单写到UpdatePanel的一...

3535
来自专栏每日一篇技术文章

go - os包 彻头彻尾用法使用

os包提供了操作系统函数的不依赖平台的接口。设计为Unix风格的,虽然错误处理是go风格的;失败的调用会返回错误值而非错误码。通常错误值里包含更多信息。例如,如...

2836
来自专栏北京马哥教育

Linux cat命令

豌豆贴心提醒,本文阅读时间3分钟,文末有秘密! ? 文 | 豌豆 图 | 来源网络 ? Linux cat命令 命令:cat cat 命令用...

3894

扫码关注云+社区

领取腾讯云代金券