vue源码cached高阶函数解析
1、源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue源码cached高阶函数</title>
</head>
<body>
<script type="text/javascript">
function cached(fn) {
console.log(fn,'fn')
const cache = Object.create(null)
// 返回函数 函数中使用了外部的cache ----闭包
return (function cachedFn(str) {
console.log(str,'str');
const hit = cache[str]
console.log(hit, 'hit')
return hit || (cache[str] = fn(str))
})
}
var capitalize = cached(function(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
});
console.log(capitalize,'capitalize')
console.log(capitalize('abc'), '第一次')
console.log(capitalize('abc'), '第二次')
</script>
</body>
</html>
2、cached函数，输入参数为函数，返回值为函数。同时使用了闭包。
vue源码cached高阶函数解析的更多相关文章
- vue源码实现的整体流程解析
一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. ...
- 【Vuejs】350- 学习 Vue 源码的必要知识储备
前言 我最近在写 Vue 进阶的内容.在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章. 当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基 ...
- 学习Vue源码前的几项必要储备（二）
7项重要储备 Flow 基本语法 发布/订阅模式 ES6+ 语法 原型链.闭包 函数柯里化 event loop 接上讲 聊到了ES6的几个重要语法,加下来到第四点继续开始. 4.原型链.闭包 原型链 ...
- Vue源码详细解析:transclude,compile,link,依赖,批处理...一网打尽，全解析!
用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并 ...
- 大白话Vue源码系列(03)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- 大白话Vue源码系列(04)：生成render函数
阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...
- 【vuejs深入二】vue源码解析之一，基础源码结构和htmlParse解析器
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...
- Vue源码解析（一）：入口文件
在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...
- Vue 源码解读（8）—— 编译器 之 解析（上）
特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...
随机推荐
- 使用Chrome快速实现数据的抓取（二）——协议
在前面的文章简单的介绍了一下Chrome调试模式的启动方式,但前面的API只能做到简单的打开,关闭标签操作,当我们需要对某个标签页进行详细的操作时,则需要用到页面管理API.首先我们还是来回顾下获取页 ...
- EasyUI相同的Tab只打开一个（即EasyUI方法的调用方法）
function addTabA(title){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else ...
- 【BZOJ】【3170】【TJOI2103】松鼠聚会
切比雪夫距离+曼哈顿距离 题解:http://www.cnblogs.com/zyfzyf/p/4105456.html 其实应该先做这题再做[BZOJ][3210]花神的浇花集会的吧…… 我们发现d ...
- 用java解析在OpenStreetMap上下载的地图数据（SAX版，适合比较大的xml文件）
java程序如下: package gao.map.preprocess; import java.io.BufferedWriter; import java.io.File; import jav ...
- GUI程序设计3
16. 树(JTree)使用示例 例16.1 创建JTree示例. package GUI1; import java.awt.BorderLayout; import java.awt.Contai ...
- C++用iconv进行页面字符转换
在对HTML页面进行爬取时,总会遇到一些不同的编码,而我们通常都不会一一对这些编码进行处理,而是集体转换成相同的编码,也易于装入数据库.此时,iconv便成为一个很方便的工具. iconv 头文件&q ...
- vue项目ide（vue项目环境搭建）
一.先介绍一下我接下来要做的项目 项目:ide可视化工具 技术应用: Vue2.0(js框架):https://cn.vuejs.org/ ElementUi(饿了吗ui框架基于vue的):http: ...
- Spring 事务模板
最近项目开发中需要用到单机事务,因为项目中使用了Spring和Mybatis框架,所以通过Spring来进行事务的管理,并且记录一下事务配置的过程 第一步:配置DataSource <!-- 发 ...
- 检测 USB 设备拨插的 C# 类库：USBClassLibrary
这是采用C#开发的一个USB库,使您可以管理USB设备的连接和分离事件,探测自己的设备.可以运行在Windows XP和Windows7 64位系统下. 01 private void USBPort ...
- RichTextBox 清空
this.tbContent.Document.Blocks.Clear();