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
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
javaScript

是时候把 Promise 写成一般的函数调用了

懒是一个程序员的好习惯,没错就是这样。 问题 假设使用 JQuery 来写一个 Promise : 调用时需要传入参数,比如读取文件的文件名。 将生成的 Promise 的对象返回出去。 那么这个方法大概是这样的: var getFile = function (fileName){ var defer = $.Deferred(); //一些异步的操作,比如读取一个文件 readFile(fileName, function(file){ defer.resolve(file); }) return defer.promise(); } getFile(

  • aco
    aco
3 min read
ECMAScript6

ECMAScript 6 之函数

设置默认值 想必在写函数时,都会有一个困惑:要是在这个函数调用的时候,参数没有传入时,该怎么办?设置默认值。对,所以大部分的函数都会有一下的代码。 function f(a,b){ a = a || {/*...*/} /* ... */ } 以上代码相信绝大多数的 javascript 开发者都写过,乍一看是没啥大问题的,但是如果传入的值是 false 呢?那么 a 就会被替换成默认值。为了避免这个问题就应该将代码改一改: if( typeof a === 'undefined' ){ a = {/* ... */} } 这就大大增加了代码量,而且一个痛点莫名其妙的增加了:

  • aco
    aco
6 min read
jQuery

JQuery那点事 -- Deferred(Promise的实现)

注:由于 Deferred 需要用到 Callback 因此需要先了解 Callback 的实现以及用处后才能进一步了解 Deferred 的实现及其作用。 附:JQuery那点事 -- Callback Deferred (延迟对象)解决了什么 在写 javascript 代码时,难免的回写到异步回调。 当一个回调中含有另一个回调时,假设我们要获取一个坐标点,x 需要异步获取,而 y 轴坐标需要依赖 x 轴,z 轴需要依赖 y

  • aco
    aco
5 min read
javaScript

JQuery那点事 -- Callback

Callback(事件队列) 所谓的事件队列就是一个函数的集合对象,这个对象下有添加、删除、执行函数等等各种操作集合中函数的方法。 顺便说一下 在 JQuery 中 Promise 的实现也与事件队列密不可分,那么接下来从 jQuery 源码来看 Callback 是如何实现、应该如何去使用。 JQuery 中 Callback 的简单实现 以下代码为 jQuery 3.1.0 中,关于 Callbacks 源码中的一部分。经过我的一些修改,仅仅实现了主要的逻辑。

  • aco
    aco
3 min read
javaScript

@ 功能 JS 实现分析及其原理

最近为实现一个新功能弄的焦头烂额 @xxx 的实现,在实现后写下些心得,供以后会跳入这坑的同志们参考。 首先,当让是考虑使用范围,由于项目仅仅需要考虑在 WEBKIT 环境下使用,所以可以不用考虑 IE 这也使得代码少了很多的 if(){}else{} 判断。在Mozilla 开发者网络上发现 selection 和 range 这两个关于选区对象和光标对象,结合 Caret(一个用于判断当前光标位置的JS插件)后,一个大致的雏形就浮现出来。 大概就长这样: 先整理思路,捋一捋实现步骤。 大致思路如下: 键入 @ 后将选择框显示出来

  • aco
    aco
8 min read
ECMAScript6

ECMAScript 6之解构变量

标签: ECMAScript 6 javaScript 上一节讲到 ES6 中新增加的块级作用域,解决了一些不必要的闭包,让 js 代码的编写能更加的保险与便利,这里我不是很想说更加的安全,因为代码是人写的,好坏与否、安全与否都不是代码的问题,当然闭包在 js 中的应用不仅仅是使用在锁住块级作用域。块级作用域的出现也不能取代所有的闭包。 这一节来聊聊 ES6 中对于赋值的新玩法。 简单说说 有这样一个场景:你向你的服务器提交了一次请求,获取一些基本的参数来初始化页面。假设 config 就为后端传送回来的数据,而你需要去获取其中的配置项。当然先写正常的(因为 ES6

  • aco
    aco
12 min read
javaScript

ECMAScript 6起步

标签: ECMAScript 6 javaScript ECMAScript 6已经开始逐渐代替ECMAScript 5了,满载着好奇去看了看,毕竟要跟上时代潮流嘛。本以为以自己目前的javascript功底,还是可以驾驭,但是刚看了两章就不得不写点东西来加深记忆了和理解文章内容了。http://es6.ruanyifeng.com/ 由于ECMAScript 6有很多内容的更新,所以这一系列会持续很久,同时对这一系列做下说明:主要是对该教程所说内容的摘记同时加上一些自己的理解。ECMAScript 6的出现,并不是说完全取代了ECMAScript 5的内容,所以这个系列需要有良好的ECMAScript 5的基础,并且我也是一边看教程一边做的摘记,所以我更倾向与去记ECMAScript 6中一些有趣好玩的新特性,而不是对ECMAScript基础的巩固。 这个教学文档的作者是大触阮一峰,引用一下教程前言上的一句话:

  • aco
    aco
1 min read