ECMAScript6

ECMAScript 6 之箭头函数

简介 对于箭头函数的出现,我是这样理解的: function 在 javascript 中是一种类似与流程的一种存在,一个 function 代表一种处理数据的逻辑。在 ES6 中, function 的这一特性被进一步的认可和强调,因此就产生了箭头函数。 简单的箭头函数 var f = v => v; 上面的等同于以下函数 var f = function(v) { return v; }; 当然函数参数存在没有或者多个情况 var f = () =>

  • aco
    aco
5 min read
typescript

TS - 类型

类类型 与C#或Java里接口的基本作用一样,TypeScript也能够用它来明确的强制一个类去符合某种契约。 interface ClockInterface { currentTime: Date; } class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { } } 通过 implements 关键字,确定出类实例所拥有字段的类型。 同样的接口中也可以定义实例所拥有的方法,以及确定方法参数和返回值类型 interface ClockInterface { currentTime: Date; setTime(d: Date); } class

  • aco
    aco
2 min read
Vue

手撸一个 MVVM 不是梦

在实现 VUE 中 MVVM 的系列文章的最后一篇文章中说道:我觉得可响应的数据结构作用很大,在整理了一段时间后,这是我们的最终产出:RD - Reactive Data ok 回到整理,这篇文章我们不研究 Vue 了,而是根据我们现在的研究成果来手撸一个 MVVM。 简单介绍 RD 先看看下我们的研究成果:一个例子 let demo = new RD({ data(){ return { text: 'Hello', firstName: 'aco',

  • aco
    aco
13 min read
Vue

实现 VUE 中 MVVM - step3 - Watcher

看这篇之前,如果没看过之前的文章先移步看 实现 VUE 中 MVVM - step1 - defineProperty 实现 VUE 中 MVVM - step2 - Dep 在 step2 中,我们实现了一个管理依赖的 Dep ,但是仅仅使用这个类并不能完成我们想实现的功能,而且代码的解耦上也有点小问题。以下是在 step2 中最后说的几个问题: 解耦不完全,需要传递参数 没有地方可以移除依赖 考虑问题 第一个问题显示出来一个问题,

  • aco
    aco
4 min read
Vue

实现 VUE 中 MVVM - step2 - Dep

看这篇之前,如果没看过 step1 先移步看 实现 VUE 中 MVVM - step1 - defineProperty。 在上一篇我们大概实现了,Vue 中的依赖收集和触发,但我们仅仅是将依赖维护在一个内置数组中,这样做虽然容易理解,但毕竟不好维护,为了更容易的维护这些依赖,我们来实现一个维护依赖的类。 确定功能 首先我们可以先确定这个类下的属性,以及一些功能: 类下属性: target: 函数,用于存放需要添加的依赖 实例下属性及方法: subs/Array: 用于存放依赖 addSub/Function:

  • aco
    aco
3 min read
javaScript

实现 VUE 中 MVVM - step1 - defineProperty

在 VUE 中关于如何实现在网上可以搜出不少,在看了部分源码后,梳理一下内容。 首先,我们需要了解一下 js 中的一个 API : Object.defineProperty(obj, prop, descriptor) 一般情况下我们为一个对象添加一个属性一般都会这么写 let object = {} object.test = 'test' Object.defineProperty 也能做到同样的效果 let object = {}, test = 'test' Object.defineProperty(object, 'test', { configurable:

  • aco
    aco
3 min read
stylesheet

INLINE-BLOCK

常用的默认 display 值为 inline-block 的元素有 img 。应该没有别的常用的了。 inline-block 特点:被设定的对象的内容以 block 方式显示,但呈现形式以 inline 方式。换句话说,除了显示上在同一行,元素被当成 inline 来处理外, block 有的它全有。 inline-block 的一些特点以及一些特殊的点: 拥有完整的盒模型,但不会默认占一整行 当一个空元素设置成 inline-block 或是 img 元素时,默认的 baseline

  • aco
    aco
3 min read
stylesheet

CSS INLINE 的一些特点以及需要注意的点

支持样式: 这里仅仅讨论不会改变元素类型的属性 content : 内容的高度 font : 支持 line-height : 多行有效,但是上下会缺,用js获取元素高度会比显示少一点,也就是第一行文字的上面和最后一行文字的下边不计算在元素大小内,但显示上算进去了。 margin/padding : 显示上仅在左右有效,上下设置多少都没用,但用js获取或是设置背景时会包括 padding background : 会包括padding(这点应该是正常现象),但显示上由于 padding 的特殊性显示上感觉异常 border : 和background同理在padding外显示 (min-/max-)height/(min-/max-)width : 无效

  • aco
    aco
2 min read