知识共享许可协议

前端MVC变形记

背景:

MVC是一种架构设计模式,它通过关注点分离鼓励改进应用程序组织。在过去,MVC被大量用于构建桌面和服务器端应用程序,如今Web应用程序的开发已经越来越向传统应用软件开发靠拢,Web和应用之间的界限也进一步模糊。传统编程语言中的设计模式也在慢慢地融入Web前端开发。由于前端开发的环境特性,在经典MVC模式上也引申出了诸多MV*模式,被实现到各个Javascript框架中都有多少的衍变。在研究MV*模式和各框架的过程中,却是“剪不断、理还乱”:

  1. 为什么每个地方讲的MVC都不太一样?
  2. MVP、MVVM的出现是要解决什么问题?
  3. 为什么有人义正言辞的说“MVC在Web前端开发中根本无法使用”?

带着十万个为什么去翻阅很多资料,但是看起来像view、model、controller、解耦、监听、通知、主动、被动、注册、绑定、渲染等各种术语的排列组合,像汪峰的歌词似的。本篇希望用通俗易懂的方式阐述清楚一些关系,由于接触时间有限,英文阅读能力有限,可能会存在误解,欢迎讨论和纠正。

阅读全部

回归CSS标准之Float

最近因为遇到一个float相关的bug,又跑去撸了一遍css标准。然后发现,它确实比其他属性复杂好多,既不像inline-block那样单纯的完成并排显示,又不像绝对定位那样彻底的脱离文档流而不影响别的元素。它唯一单纯的就是,真的是唯一可以实现文字环绕显示的属性。

但是唯一单纯的特点却并不是很招人待见,相反,大家更习惯使用float去完成其他的功能,比如横排展示和自适应分栏布局。

很多人这样用着,只是因为一堆现成的文章告诉他们可以这样用,但是到底为什么可以,以及用的时候要注意什么问题却并不是所有人都知道,结果就是,一时的“便利”,为日后的维护埋了一堆的坑。

这篇文章打算通过将目前一些成文的浮动元素的特点与CSS规范中的具体描述对应,来加深大家对float属性原理的理解。并在后面通过一个bug实例,说明使用这个属性时要注意的问题。

浮动元素的业界公认特点

float属性被设置为非none的元素:

  1. 元素被视作块级元素,相当于display设置为“block”;
  2. 元素具备包裹性,会根据它所包含的元素实现宽度、高度自适应;
  3. 浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置,并且元素会处在浮动元素的下层(并且无法通过z-index属性改变他们的层叠位置),但它的内部文字和其他行内元素都会环绕浮动元素;
  4. 浮动元素前后的行内元素环绕浮动元素排列;
  5. 浮动元素之前的元素如果也是浮动元素,且方向相同,它会紧跟在它们后面;父元素宽度不够,换行展示;
  6. 浮动元素之间的水平间距不会重叠;
  7. 当包含元素中只有浮动元素时,包含元素将会高度塌陷;
  8. 浮动元素的父元素的非浮动兄弟元素,忽视浮动元素存在,覆盖浮动元素;
  9. 浮动元素的父元素的浮动兄弟元素,会跟随浮动元素布局,仿佛处在同一父元素中。

目前实现的很多应用都是直接对应上述特点实现的。但是很多人在看过这些描述以后,并不知道它的结论从何而来,无据可循,怎会安心?为了解决大家的疑虑,下面我会将上面的九条与CSS规范做一一的对应。

阅读全部

在 JavaScript 中实现私有成员的语法特性

前言

在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使出了各种奇技淫巧去实现 JS 中的私有成员,以下将介绍下目前实现 JS 私有成员特性的几个方案以及它们之间的优缺点对比。

阅读全部

设计易用的RESTFul API

早期互联网很大一部分是静态文件的堆积。因此,我们上网访问的其实都是一个个静态的资源。通过 URL 的定义,可以很方便地找到资源。

随着互联网应用规模的扩大,以及应用复杂度的提高,之前的静态资源已经不能满足需求,网站返回给访问者的内容需要通过动态的方式生成(例如通过获取数据库的内容),同时还支持由访问者控制希望看到的内容。 传统的用于定位资源位置的 URL 的定义变得复杂起来。

本篇内容偏向于 Web API 设计中,有关 URL 部分的讨论。

阅读全部

LineUp:多属性排序的可视分析

译自:LineUp: Visual Analysis of Multi-Attribute Rankings

前言

在我们的日常生活中经常会遇到各种各样的排序列表,排序是将无序的数据项集合重组的普遍方式,它基于数据项的单个或多个属性值为数据项计算一个排名。多属性排序是普遍存在的,在多属性排序中,我们无法直观理解单个属性对排序所作得贡献以及单个或多个属性的变动是如何影响排序的。

具体来说多属性排序可视化工具需要解决的问题为:

  1. 当诠释一组排序时,我们想知道为什么一个数据项的排名比其他项要低(高),是因为它的所有属性值都低(高)还是因为它的某个属性值较低(高)。
  2. 如何使得不同类型的属性之间具有可比性,并且组合在一起产生一个排名。
  3. 如何比较同一个数据项的不同排名,如修改一个数据项的属性,它的排名会相应变化,我们希望比较这些变化的排名。
  4. 如果可以修改排序中单个或多个数据项的属性,我们希望探究属性值改变所产生的效果。

在这篇文章中将介绍对多属性排序可视化的需求所作的全面分析,以及全新的多属性组合排序可视分析技术LineUp的设计与实现。

阅读全部

全息机器人项目的技术方案选型过程

前段时间上线了全息机器人项目,线上访问可直接在手机百度 APP 中语音搜索 百度神灯 即可(请在wifi环境下访问)。项目部分截图如下:

通过部分截图可以看出,这个项目主要是两部分,一部分正常的动画引导页面(前四个截图所示),另外一部分是全息播放页面(最后一个截图所示)。其中动画引导页面共有十一个,全息播放页面有四个,进入每个全息页面前都会一些动画引导的页面。

这篇文章主要从 方案制定遇到的问题以及应对方法 等方面来对项目中这两部分做一个介绍。

正常动画部分

方案制定

在没有老旧 IE 的情况下,做动画的选择是比较多的,SVGCSS3CANVAS 等等。最开始拿到这个项目的时候,结合这三种各自的特点,最终选择了主要动画由 CANVAS 来实现,具体原因如下:

阅读全部