【译】理解 CSS 布局和块级格式化上下文

原文链接:https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/ CSS布局中有一些概念是你一旦理解它那么就会极大的提升你的 CSS 技能的。这篇文章是关于块级格式化上下文的 BFC 。也许你从未听说过这个术语,但是如果你曾经用 CSS 做过布局,那么你也许知道它是什么。理解什么是 BFC ,它为什么会起作用以及如何创建一个有用的 BFC 可以帮助你理解 CSS 布局是怎样工作的。 在这篇文章中,我将通过一些你可能熟悉的例子解释什么是 BFC 。我将向你展示一个新的概念,当你明白什么是 BFC 以及你为什么需要它的时候,它才真正有意义。 什么是 BFC? 最容易明白一个 BFC 表现的是一个浮动的例子。在下面的例子中有一个盒模型,其中包含一张左浮动的图和一些文字。如果我们有大量的文字,它环绕在浮动的图像上,则边框会围绕着整个区域。

图1:文本环绕着浮动元素 如果删除了一些文本,那么文本就不足以环绕图像,并且因为图片浮动脱离了文档流,边框就会在图片下面并且上升到文本的高度。 图2:没有足够的文本,边框就不能到达浮动元素所期望的高度 这是因为当我们在浮动一个元素时,文本所在的盒模型仍然是固定的高度,而因浮动元素而缩短的空间是文本的行框。这就是为什么背景和边框会出现在浮动元素的后面。 这里有两种我们通常修复这种问题的方式。一种是使用清除浮动 clearfix hack[1],它是通过在文本和图片下面插入一个元素并且设置清除两侧浮动来起作用的。另一种方式是使用 overflow 属性,使用其他的值来代替默认的 visible 。

图3:使用 overflow:auto 使盒模型中包含浮动 overflow 属性起作用的原因是使用任何一个其他值来代替初始值 visible ,从而创建一个BFC。即 BFC 的一个特点就是它包含浮动。 BFC 布局是一个迷你布局 你可以认为 BFC 在网页中是一个迷你布局。一旦一个元素创建的 BFC ,所有东西都包含在里面了。正如我们所看到的,它包含浮动元素使其不再超出盒子底部。同时 BFC […]

微信小程序·云开发初体验

作者:甄玉磊 微信小程序·云开发初体验 简介:2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?想想还有点小激动了呢! 2018年9月份微信正式推出云开发平台,一石激起千层浪,什么是云开发?是不是以后就可以和后端研发说拜拜了?是不是未来前端研发就可以一统微信小程序了?啥?我膨胀了吗?我骄傲了吗?我嘴角流口水了吗?只是想想还有点小激动了呢! 好了,好了,后端童鞋可以放下手里的刀了,这个微信小程序的云开发暂时还无法全面取代你们在微信端的地位,但是!不得不说给前端开发带来了很大的便利,值得前端童鞋们一探究竟。 1.什么是云开发? 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。 也就是说,对于一些小程序,我们无需后端搭建服务器,提供数据库,整个项目完全可以由前端开发者来完成。这意味着前端开发者无需考虑如何构建服务器之类的工作,即可完成整个微信小程序了。 2.云开发功能简介 好了,叨叨了这么多,想必你已经迫不及待的要揭开它神秘的面纱了。 2.1 云开发基本步骤 (1)俗话说“巧妇难为无米之炊”,首先要做的就是下载微信提供的最新开发工具,网址为您奉上: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18101520 (2)在启动界面,选择”建立云开发快速启动模板”,就可以看到下面的开发平台了: 其中,系统默认会建立两个文件夹,分别为: – cloudfunctions 默认存放云函数的文件夹 – miniprogram 默认存放业务代码的文件夹 如果你觉得,这是神马名字,能不能起个高大上的名字。只有私人订制版的名字,才能衬托我无与伦比的高贵气质~ 比如说:李狗蛋和王钢柱… 敲黑板,注意了,当你修改名字后,一定要记得在 project.config.json 中对应修改云函数和程序的路径,否则小程序无法找到对应的入口文件而报错。 2.2 云开发切换环境 细心的童鞋可能发现,云函数的文件夹后面带有一个 cloud-demo 的小尾巴,这个是当前云函数使用的云环境。云环境有啥用处呢? 由于云开发是实时上线更新的,假如你已经上线了一版小程序,在本地开发的时候,实时修改该环境下的数据库和云函数逻辑,那么使用同一环境的线上小程序也会变来变去,再想想用户一脸茫然的看着自已动来动去的小程序界面,很调皮是不是? 好在,微信给每位开发者提供了两套环境: 环境之大, 一次用不下, 一个上线, 一个开发! 每套环境的数据库/云函数都是相互独立的,只有在测试环境检查的没有问题了,再部署到线上。那么问题又来了,如何切换使用的云环境呢? 右击云函数文件夹,如果之前切换过环境的话,会出现两个候选环境,如果之前没有切换过,则选择更多设置,如下图所示在新打开的界面中选择当前要使用的环境即可。 好了,环境准备好后,让我们开始愉快的(踩坑)开发之旅吧! 3.云开发的三大”拦路虎” 曾经有位名人“沃·滋基硕德” 这样教导我们:“你在奔向成功的路上总是会遇到困难,不要伤心,慢慢就习惯了!” 云开发包括三大主要内容:云函数,数据库,存储管理,相当于拦路虎一样,横跨在我们面前,在使用过程中需要注意哪些事项呢?让我娓娓道来: 3.1 大虎:云函数 何为云函数? 云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。 我们可以在代码区域的云函数文件夹,右击新建 node.js 函数,之后平台会提示我们是否安装依赖: 如需在云函数中操作数据库、管理云文件、调用其他云函数等操作,可使用官方提供的 […]

不依赖wifi热点的移动web真机测试解决方案Carefree

简介:从此我厂移动web真机测试告别 wifi 热点。 厂外的小伙伴看到这篇文章标题可能会感到莫名其妙,真机测试移动 web 与 wifi 热点有神马关系?的确,通常情况下真机测试移动端 web 确实用不到 wifi 热点。不过,我厂的前端开发和测试小伙伴对此一定不会感到陌生,我们受这个问题困扰太久太久了。 手机真机测试经常有需要访问开发电脑的场景,比如: 访问开发电脑本地的开发文件 使用电脑 hosts 在电脑上抓包、调试页面 …… 而我厂的手机和开发用电脑处于不同网络,无法直接互访。所以,不少小伙伴无奈使用电脑发射 wifi 热点给手机连接,使其处于同一局域网,以实现互访。这种方案的问题可归结为两大方面:一是政策方面,我厂信息安全规定明确禁止发射个人 wifi 热点;二是体验方面,发射 wifi 热点繁琐且不稳定,影响工作效率。 针对这个工作中的痛点,我们现提出一套不需要 wifi 热点的跨平台移动 web 真机测试解决方案,希望它能缓解小伙伴的些许困扰,像这个方案的名字 Carefree 一样,快乐舒畅的工作。 Carefree 解决方案由“服务端 whistle ”和“ webpack 插件 @nutui/carefree ”两部分组成。 服务端 whistle 现在主流的代理调试工具有 Fiddler 、 Charles 和这两年在前端流行起来的 whistle 。 whistle (读音[ˈwɪsəl],拼音[wēisǒu])是一个基于 Node 实现的跨平台 web 调试代理工具,主要用于查看、修改 […]

小程序实战总结

本文从小程序框架、 api 、组件、应用四个方面入手,说明在开发过程中遇到的问题,并给出处理方案。 小程序虽然具有相对完善的文档,但难免文档中会有解释不清晰,不易被人发现,甚至未曾提及的问题。本文从具体的业务场景出发,汇总笔者在原生小程序日常开发中遇到的常见问题,并给出相应的解决方案,希望能够将这些细节经验分享给需要的童鞋。 框架 运行机制与更新机制 运行机制: 小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。 假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。 小程序没有重启的概念。 当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁。 当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁。 更新机制: 小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。 虽然文档中有对这一部分进行说明,但是隐蔽比较深,还是需要重点说明一下,理解运行机制就可以解释为什么刚关闭的小程序打开之后还能保存之前的状态,理解更新机制就明白新发版的小程序为什么需要删除旧的版本再下载新的版本再能有新版的内容了。 如何清除小程序缓存呢? 通过太空囊’…’按钮—打开调试—console—wechat—wx.clearStorage()方法清除,此方法删除 storage 中的数据。 通过微信的”发现”tab签—小程序—长按或者右滑删除指定小程序,此方式彻底卸载该小程序,也就清除了所有内容,包括 storage 中缓存数据、场景值、页面堆栈等。 预览与远程调试的区别 小程序的调试方式有多种,可以通过预览亦可通过远程调试,这两者有何区别呢? 将两者生成的二维码转为url: 预览 URL 为:https://mp.weixin.qq.com/a/~~xxt10QprXmU~rsguk7Cm9P3v2MCXJdpacg~~ 远程调试 URL 为:https://mp.weixin.qq.com/a/~~Rot_QPKUIn8~mzI5kQoA3w4QN0H6nkejvQ~~ 由此可见工作方式都为将本地小程序打包上传至微信侧,扫码访问远程小程序服务。不同点总结如下: 可以有多台真机同时预览,只能有一台真机远程调试。 预览忽略断点,远程调试会有断点。 预览可以忽略部分报错,远程调试有报错将无法运行。 生命周期 生命周期又分页面的生命周期与组件的生命周期,以页面的生命周期为例,不同的生命周期会对应不同的生命周期方法。 onLoad: 页面加载,一个页面只会调用一次。 onShow: 页面显示,每次打开页面都会调用一次。 onReady: 页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 onHide: 页面隐藏,当 navigateTo 或底部 tab 切换时调用。 onUnload: 页面卸载。 进行页面编码之前需要考虑到哪些数据是只需要加载一次的(放到 onload […]

【译】使用React和HTML5表单验证API处理表单元素

作者: Dmitry Sheiko | 译:甄玉磊 原文地址:[http://dsheiko.com/weblog/handling-forms-with-react-and-html5-form-validation-api] 【译者注:链接序号对应下面扩展阅读,另外可以点击阅读原文查看详细的链接文章】 简介:React 没有内置的表单验证逻辑,但是我们可以使用第三方解决方案。这种方法可能是开发包、表单生成器,还可能是 HOC 或者是包含校验逻辑的任意表单容器组件。那么选择哪种方法呢?我们将在本文中一 一介绍。 每当我们提及应用程序中的用户输入框时,首先映入脑海的就是 HTML 的表单元素。最早的 HTML 版本就已经支持 Web 表单。众所周知,这一特性于 1991 年提出,且在 1995 年作为 RFC(征求评议文件) 1866[1] 号协议标准化。与此同时表单元素也得到了广泛应用,几乎每一个代码库和框架中都在使用。那么在 React 中如何使用呢? Facebook 在如何处理表单上提供了受控的输入框[2]。该输入框指的是受控表单,主要是通过交互事件和通过 value 属性传递 state 值实现对输入框的控制。因此,你可以决定表单的校验和提交逻辑。拥有好的用户体验的 UI ,意味着你应该考虑到诸如“提交”、“校验”的逻辑以及内联的错误提示信息,根据有效性、原始状态和提交状态来切换元素。难道我们不能提取这种逻辑,简单的插入到表单元素中吗?当然可以,唯一要考虑的问题是我们要采用何种方法和解决方案。 组件库中的表单 如果你习惯使用诸如 ReactBootstrap[3] 或者 AntDesign[4] 等 React 组件库,很可能已经对其中的表单组件感到满意。这两个组件库所提供的表单组件满足了多种需求。例如在 AntDesign 组件库中我们定义了一个表单元素 Form 以及带有表单域的 FormItem ,即包裹了任意输入控制的容器。你可以在 FormItem 设置校验规则:

举例来说,在处理表单提交时,你可以执行 this.props.form.validateFields() […]

© 2018 JDC. All Rights Reserved.