ES6语言特性的总结(3)

在ES5中,由于没有类的概念,所以如果要使用面向对象编程的方式,就需要利用原型继承的方式。通常是创建一个构造器,然后将方法指派到该构造器的原型上。
就像这样:

Mehr lesen

ES6语言特性的总结(2)

数组

ES6中对于数据做了进一步的增强,以便能够更加方便地创建数组以及操作数组。

创建数组

Array.of

该方法用于将一组值转换为数组。

Mehr lesen

ES6语言特性的总结(1)

虽然在编写项目的过程中,也会用到ES6的语法以及新特性。但感觉学习的不是特别系统,索性这两天重新刷了一下Understanding The ES6,也对ES6有了更深的理解。这里,针对感觉应用比较多,知识点比较重要的部分做了一下总结。内容有点多,因此预计将分为三个部分。

Mehr lesen

设计模式之状态模式

场景引出

假设你有这样一种需求:零售系统中的订单通常有多种状态,包括了从支付、出库、发货、签收等各种状态。而系统则需要根据这些不同的订单状态分别做对应的处理。一个比较符合直觉的解决方案可能就是用多重条件分支语句。就像下面这样:

Mehr lesen

IOS Input Disabled默认样式问题

最近在做项目的时候发现,将inputtextarea设置为disabled后,在iphone手机上样式将被覆写。解决方案就是:

1
2
3
4
5
input:disabled, textarea:diabled {
-webkit-text-fill-color: #000;
-webkit-opacity: 1;
color: #000;
}

Mehr lesen

一个垂直居中的方法

HTML结构如下

1
2
3
4
<div class="wrapper">
<div class="content">
</div>
</div>

Mehr lesen

正则表达式的学习

平常在做一些字符串匹配操作的时候,经常会使用到正则表达式。然而,正则表达式规则都不太好记,每次要编写相关代码的时候,都只能上搜索引擎。久而久之,效率必然受到影响。因此,还是要做一次系统的学习,并做好相关练习,尽量在编写一些常用的正则表达式的时候,能随手写出。

基础语法

在JS中,正则表达式(RegExp)是内置对象,通常使用在Stringmatch,replace,search等方法中。
创建一个正则对象采用如下语法:

1
2
3
/pattern/flags
或者
new RegExp(pattern, [flags])

Mehr lesen

Vuex简单入门

今天试了一下Vuex,感觉跟Redux的实现思想类似。再此,简单地总结一下。

什么是Vuex

在Vue中,多组件的开发给我们带来了很多的方便,但同时当项目规模变大的时候,多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来,应用统一的方式进行处理,在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。如下图所示:

Mehr lesen

CSS中的长度单位

CSS中有许多设置长度单位的属性,除了经常使用的px,em之外,还有一些不太经常使用的,但是作为一个前端工程师,也是很有必要了解的。

绝对长度单位

px

px(pixel)其实应该算是我们最熟悉的长度单位了,是相对屏幕分辨率而言,也是经常被作为其他单位的基准。这个px和物理设备的像素是有区别的,为了保证在不同设备上视觉效果基本相同,px是采用参考像素的,根据css的规范上来看,1px在电脑显示器上看,大概是1/97英寸长。

Mehr lesen

前端的异步解决方案之Promise和Await/Async

异步编程模式在前端开发过程中,显得越来越重要。从最开始的XHR到封装后的Ajax都在试图解决异步编程过程中的问题。随着ES6新标准的出来,处理异步数据流的解决方案又有了新的变化。Promise就是这其中的一个。我们都知道,在传统的ajax请求中,当异步请求之间的数据存在依赖关系的时候,就可能产生很难看的多层回调,俗称”回调地狱”(callback hell)。另一方面,往往错误处理的代码和正常的业务代码耦合在一起,造成代码会极其难看。为了让编程更美好,我们就需要引入promise来降低异步编程的复杂性。

Mehr lesen