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高阶函数解析的更多相关文章

  1. vue源码实现的整体流程解析

    一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. ...

  2. 【Vuejs】350- 学习 Vue 源码的必要知识储备

    前言 我最近在写 Vue 进阶的内容.在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章. 当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基 ...

  3. 学习Vue源码前的几项必要储备（二）

    7项重要储备 Flow 基本语法 发布/订阅模式 ES6+ 语法 原型链.闭包 函数柯里化 event loop 接上讲 聊到了ES6的几个重要语法,加下来到第四点继续开始. 4.原型链.闭包 原型链 ...

  4. Vue源码详细解析:transclude,compile,link,依赖,批处理...一网打尽，全解析!

    用了Vue很久了,最近决定系统性的看看Vue的源码,相信看源码的同学不在少数,但是看的时候却发现挺有难度,Vue虽然足够精简,但是怎么说现在也有10k行的代码量了,深入进去逐行查看的时候感觉内容庞杂并 ...

  5. 大白话Vue源码系列(03)：生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  6. 大白话Vue源码系列(04)：生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  7. 【vuejs深入二】vue源码解析之一，基础源码结构和htmlParse解析器

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...

  8. Vue源码解析（一）：入口文件

    在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...

  9. Vue 源码解读（8）—— 编译器 之 解析（上）

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

随机推荐

  1. ThinkPHP空操作和空控制器的处理

    所谓的空操作和空控制器,简而言之就是系统中不存在该方法或控制器,导致系统报错(本文版本3.2.3). 正确URL(测试环境):  http://oa.com/index.php/admin/publi ...

  2. css3实现卷页效果http://jingyan.baidu.com/article/73c3ce2806aef9e50343d93a.html

    css3实现卷页效果 | 浏览:31 | 更新:2015-01-08 13:30 1 2 3 4 5 6 7 分步阅读 百度经验:jingyan.baidu.com 页面上经常会看到鼠标移动上去,对象 ...

  3. ANSI、GBK、GB2312、UTF-8、GB18030和 UNICODE

    http://www.chinaz.com/web/2012/1119/282540.shtml 编码一直是让新手头疼的问题,特别是 GBK.GB2312.UTF-8 这三个比较常见的网页编码的区别, ...

  4. git diff 打补丁

    [root@workstation2017 demo]# git diff old new >cc.diff[root@workstation2017 demo]# cat cc.diffdif ...

  5. Linux gcc编译参数

    最近编译一份开源代码,一编译就直接报错.我看了下报错信息,有点诧异.这些信息,放平常顶多就是个warnning而已啊,他这里怎么变成了error呢?我看了下Makefile,发现编译参数多了个-Wer ...

  6. [android]ShareSDK——内容分享和短信验证

    前言 新版本号ShareSDK的分享和短信验证,按官网的文档,都须要加入一个<Activity></Activity>标签,而分享和短息验证的这个标签内容都一样.会冲突. 解决 ...

  7. c++中两个类相互包含引用的相关问题

    在构造自己的类时,可能会遇到两个类相互引用的问题. 例如: class A { int i; B b; }; class B { int i; A a; }; 在这种情况下,这样就会出现一个死循环a. ...

  8. 判断一个请求是否为Ajax请求

    这几天在写一个网站的登录判断拦截器,需要对请求进行拦截,在拦截器中我需要判断HttpServletRequest是否为Ajax异步请求.我们可以通过X-Requested-With="XML ...

  9. 解决sqoop 导入oracle表时 --split-by参数为日期类型时的报错：ORA-01861: literal does not match format string

    报错栈: -- ::, INFO [main] org.apache.sqoop.mapreduce.db.DBRecordReader: Executing query: select " ...

  10. 【BZOJ】【2730】【HNOI2012】矿场搭建

    Tarjan求BCC/割点 然而似乎我一开始抄的白书的板子哪里抄错了?还是本身哪里不对……(可能是不适用于这道题?因为这题要求求出每个BCC的大小..? 膜拜了ydc的写法= = 其实两次dfs也并没 ...