avatar 奔跑的Q丶

主题凑合用,样式即将改版...

多栏布局

现在很少接触到太多的 CSS 问题了,多数情况下 flex 都是最佳的选择,慢慢也就对基础生疏了,今天来总结下常见的布局问题。示例中关于 flex 的布局都比较简单,不理解的需要重新补习 flex 基础。本文中的示例和代码都在 codepen 上,如果加载异常请先科学上网。

具有固定宽高的布局方式在实际需求中其实很少见,一般都会有自适应的区域,接下来就来看看常用的几种布局。

2016 年终总结

又到了新的一年,总结一下过去的 2016 。翻看年初所定的目标,虽说有些没有很好的完成,然而还是觉得能给这一年打 80 分。此时我刚刚踏入前端一年半,真正参加工程化的项目不足一年,但恰恰是今年让我系统的理解了前端,对工作也更加游刃有余。

理解 JavaScipt new 操作符

在《JavaScript 高级程序设计》中提到使用 new 操作符会经历 4 个步骤:

(1) 创建一个新对象;

(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);

(3) 执行构造函数中的代码(为这个新对象添加属性);

(4) 返回新对象。

jQuery FormData 的 Ajax 提交

前些天恰好遇到用 jQuery 提交一个上传的文件一直出错,这里记录一下原因。

我们的项目本身是使用了 vue 的,但是历史原因同时也保留了 jQuery ,然后项目中用 Promise 重新封装了 jQuery 的 Ajax 方法。之前有一个共用的 upload 的上传组件,里面使用了原生 XHR ,没有遇到上传文件的问题,但是我在使用 jQuery 的 Ajax 时却怎么都办法上传,检查发现是 content-type 导致的问题。

HTML5 图片预览

在没有 HTML5 之前,前端的图片预览都是在用户选择图片后就发 Ajax 到服务端,然后由服务端再把图片的 URL 返还给前端来完成的。有了 HTML5 后,在 IE10 以上及代浏览器的版本中我们便无须发请求获得 URL 来完成预览了。这些将依靠 FileReader 来实现。

JavaScript 的复制操作

对于点击按钮就能复制一个链接或其他内容的操作,在很多网站都会有用到。使用原生的js方法 document.execCommand 即可实现,它能够对可以编辑的文档对象(设置contentEditable等)进行操作。

语法

它的基本语法如下:

1
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

jQuery插件写法

在当前的前端时代,react,vue等框架配合ES6满足了日常的多数开发需求,但是了解jQuery的插件开发在我们开发一些小型项目中还是很有用处。我们可以打造自己的插件达到复用的效果。

Flex布局

Flexible Box Layout

CSS 弹性框布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 框模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。