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. 在IIS上部署基于django WEB框架的python网站应用

    django是一款基于python语言的WEB开源框架,本文给出了如何将基于django写的python网站部署到window的IIS上. 笔者的运行环境: Window xp sp3 IIS 5.1 ...

  2. SpringMVC怎么获取前台传来的数组

    var tollerlist = new Array(); for(var k in objToller){ tollerlist.push(k); } $.ajax({ type:"pos ...

  3. Big Number------HDOJ杭电1212（大数运算）

    Problem Description As we know, Big Number is always troublesome. But it's really important in our A ...

  4. MVC借助MvcSiteMapProvider实现站点地图

    使用MvcSiteMapProvider可轻松实现站点地图,俗称"面包屑".如图: 通过NuGet,输入MvcSiteMapProvider搜索,并安装. 在Mvc.sitemap ...

  5. linux-修改时区时间

    所有笔记基于-CentOS release 6.8 (Final) ntpdate 202.120.2.101 同步上海时间 cp -f /usr/share/zoneinfo/Asia/Shangh ...

  6. DevExpress RichEditControl 上下翻页功能 z

    /// <summary> /// 翻页 /// </summary> /// <param name="isPre"></param&g ...

  7. Eclipse点不出方法了

    window→preferences→java→editor→Content Assist→Advanced 然后选中右上方的所有 右下方选中一个即可.

  8. #line 的作用是改变当前行数和文件名称

    #line 的作用是改变当前行数和文件名称,它们是在编译程序中预先定义的标识符命令的基本形式如下:   #line number["filename"]其中[]内的文件名可以省略. ...

  9. Android中怎样调用拨打电话？

    Android系统原本就为手机设计,所以,在android系统中的不论什么App中,仅仅要愿意,拨打指定电话很方便. 核心就是使用Intent跳转,指定请求Action为Intent.ACTION_C ...

  10. Objective-C:字符串的反转Reverse

    OC中字符串的反转方式可以用两种方式来处理: 第一种:从头到尾取出字符串的每一个字符,然后将其从尾到头添加到可变的字符串中,最后输出即可. 第二种:将OC内部的字符串转换为C语言中的字符串,然后动态分 ...