想做技术博客,但却更喜欢分享生活。

前端标签

关于列表布局的样式分析

列表布局的方式有很多,我目前在项目中大量使用的方式有2种。
一种是使用display: inline-block;来达到列表布局的目的。
还有一种是使用float: left / right;来做到列表布局。

更早些的全局<table/>的方式目前见的比较少,而当下使用最新的CSS3display: flex在一些主流网站上也可以看见其身影。
今天我来说说前两种方式。

flex引起的子元素无法设置height: 100%的问题(safari & chrome)

flex布局无疑在移动端、PC端(ie10+)大大简化了前端的代码量,但是其存在的兼容性问题也不能被忽略,不同的浏览器解析flex的方式可能有所不同。用flex布局经常会发生一些奇怪的现象,而且flex套flex总是会觉得代码被污染…就很烦很难受。
这里着重分析了一种在safari和chrome两个浏览器下,对height: 100%的flex兼容性问题。

理解Javascript中的作用域与作用域链

任何程序设计语言都有作用域,简单的说,作用域就是变量或函数的可访问范围。作用域控制着变量与函数的可访问性与生命周期。
在绝大部分程序设计语言中,作用域的范围有全局作用域、函数作用域、块级作用域。
* 全局作用域:属于全局作用域的代码在任何地方都能访问到;
* 函数作用域:在定义该变量/函数的函数体内可以访问到;
* 块级作用域:在定义该变量/函数的语句块中可以访问到。

然而对于Javascript(ES5)来说,不存在块级作用域。

理一理Javascript的原型链

在Javascript中,大致存在两种对象:普通对象和函数对象。
一般而言,通过new Function()创建的对象是函数对象,其他的是函数对象。每当创建函数对象时,该对象中都会内置一些属性,其中包括prototype__proto__prototype即为原型对象
其内记录着函数对象的一些属性和方法。
prototype的主要作用是继承。prototype内定义的属性和方法都是留给自己的后代使用的。
说到后代,就必须说说js中的原型链。此时,另一个属性__proto__就登场了。

React组件构造方法createClass(ES5)和class(ES6)的研究

在使用React的时候,根据官方文档,发现了两种创建组件的方式。一种是使用React.createClass({})的方式来创建,还有一种是使用ES6的class并继承React.Component来创建。 刚开始学的时候自己觉得有点迷,并且一直都是使用ES6语法来创建组件(毕竟先进嘛)。这段时间稍稍有空,来钻研一下两者之间的区别。

使用Webpack+React建立基于Ant Design的页面

本文所用到的代码已上传githubclone下来之后进入项目根目录,控制台输入

npm install

等待包安装完成后,输入

npm start

查看效果

Ant Design 是蚂蚁金服体验技术中心出品的一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE 设计和 UI 设计人员统称为『设计者』,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率。其提供了完整的设计资源,也提供了一套完整的基于React的前端组件。

移动端弹出浮动层内部滚动的解决方案

在移动端开发的时候,未免会遇到这样的情况:
有一个弹出的浮动层,这个层有滚动条,可以上下滚动。
此时就会发现,当用户在操作这个浮层的时候,整个页面也可能会随之滚动。
ScrollPrevent.js就是为了解决这种情况而被制作的!