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

vue + fastclick + loadmore(mint-ui)下拉触发元素的点击事件问题

最近在使用 vue + mint-ui + fastclick 时,碰到了一个大问题,在一度搜索之后都说改源码,在改源码也无果后,自己想除了一个解决方法,当然是在不改源码的基础上。 问题 在使用 mint-ui 下的 loadMore 组件时,出现了一个了问题:在iOS使用 fastclick 的情况下,下拉刷新时会触发子元素的点击事件,而事件其实是不应该处理的,在看源码+搜索之后,确定了问题出现的原因:在下拉的时候触发了 'touch' 事件,而 fastclick 将 'touch' 处理成了

  • aco
    aco
3 min read
restful

restFul - 1

最近在看 Roy Thomas Fielding 博士的博士论文。本着看不懂还是看不懂都要看下去的原则,开始啃这篇长达70页的论文。相信等我看完应该会有所收获吧。 既然提了 Roy Thomas Fielding 这位大牛,那肯定是要吹一吹的,相信基本上所有的开发人员都听说过这个词 restFul ,这是一种基于接口的开发模式。而这位大牛就是该开发模式的缔造者。 然而大牛之所以被称为大牛,那就绝不可能只登顶一处,这位 Roy Thomas Fielding 博士不仅仅是 restFul 的缔造者,同时还是 HTTP URI 等一些 WEB 架构标准的设计者。

  • aco
    aco
2 min read
javaScript

axios -- 9:axios axios库对外暴露的函数

console.info 该系类文章旨在研究 axios 的实现。在研究源码的基础上,去理解 AXISO 是如何实现 AJAX 请求并更好的去使用这个库。 对外暴露的 axios 方法 对应文件为 lib/axios.js 终于写到了最后,这个文件主要是对外保留 axios 方法,主要内容包括实例化 Axios 对象,在此方法下绑定一些公用的方法。 实例化 Axios 对象 对应代码为: function createInstance(defaultConfig)

  • aco
    aco
3 min read
javaScript

axios -- 8:Axios axios的类

console.info 该系类文章旨在研究 axios 的实现。在研究源码的基础上,去理解 AXISO 是如何实现 AJAX 请求并更好的去使用这个库。 Axios axios 中的类 对应文件为 lib/core/Axios.js 根据前面的相关博文,该有的方法都有了,该有的配置也都已经规定好,在 Axios 这个类中,我们只需要绑定配置然后去调用相关的方法就可以了。 类下的属性 function Axios(instanceConfig) { this.defaults = instanceConfig;

  • aco
    aco
2 min read
javaScript

axios -- 7:InterceptorManager 管理注入函数的类

console.info 该系类文章旨在研究 axios 的实现。在研究源码的基础上,去理解 AXISO 是如何实现 AJAX 请求并更好的去使用这个库。 InterceptorManager axios 中管理注入函数的类 对应文件为 lib/core/InterceptorManager.js 这个类主要用于存放如下一个对象: { fulfilled: fulfilled, rejected: rejected } fulfilled:为 promise 执行 then 时的第一个参数; fulfilled:为 promise

  • aco
    aco
1 min read
javaScript

axios -- 6:dispatchRequest 请求发送函数

console.info 该系类文章旨在研究 axios 的实现。在研究源码的基础上,去理解 AXISO 是如何实现 AJAX 请求并更好的去使用这个库。 实现方式及代码 文件 lib/core/dispatchRequest.js 该模块主要实现接受传入的 config 对象并使用该对象下的 adapter 发送请求。 这里的 config 对象可以看作是 defalut + config 的合集。 获取请求头 根据自定义的配置,修改请求头信息 config.data

  • aco
    aco
2 min read
javaScript

axios -- 3:工具函数

console.info 该系类文章旨在研究 axios 的实现。在研究源码的基础上,去理解 AXISO 是如何实现 AJAX 请求并更好的去使用这个库。 工具函数 对应文件为 lib/utils.js 该文件主要定义了一些会在实现 axios 中用到的一些工具函数: 一些关于图片中出现的不常用的属性的解释如下,具体的内容点击即可查看: ArrayBuffer:二进制数据缓冲区 ArrayBufferView:二进制数据视图数组 Blob:二进制数据的基本对象,主要表示文件 FormData:表单数据 URLSearchParams:处理 URL

  • aco
    aco
2 min read
javaScript

axios -- 1:default 默认的配置

console.info 该系类文章旨在研究 axios 的实现。在研究源码的基础上,去理解 AXISO 是如何实现 AJAX 请求并更好的去使用这个库。 default 默认配置信息 对应文件为 lib/defaults.js 该文件主要定义了一个默认的对象:默认的请求内容 一个 js 对象,内容如下: { adapter: FUNCTION // 一个用于触发请求的函数 transformRequest: [FUN, FUN, FUN, FUN ...] // 用于处理请求的函数列表 transformResponse:

  • aco
    aco
1 min read