{"posts":[{"title":"将语雀文档导入Sapper站点","slug":"ny150b","description":"本文的实际效果请参见: https://qutang.dev/blog/ny150b。阅读建议了解Javascript和Node.js，基本的前端开发概念，使用过至少一种前端框架知道静态网站是怎么回事了解过Svelte框架知道基本的HTTP请求原理Sapper站点初始化这里仅粗略介绍怎样快速初...","update_date":"2020-12-04T16:42:04.000Z","create_date":"2020-08-28T02:59:48.000Z","cover":"https://cdn.nlark.com/yuque/0/2020/png/2440115/1598650197961-a16c1bf1-70be-400b-b2a7-e2ddc5b114f9.png","series":"programming","src":"https://www.yuque.com/qutang/blog-programming/ny150b","html":"

本文的实际效果请参见: https://qutang.dev/blog/ny150b。\n

阅读建议

了解Javascript和Node.js，基本的前端开发概念，使用过至少一种前端框架
知道静态网站是怎么回事
了解过Svelte框架
知道基本的HTTP请求原理

Sapper站点初始化

这里仅粗略介绍怎样快速初始化基于Sapper的站点。Sapper是类似Next.js的框架，由svelte驱动。svelte是和Vue.js和React类似的前端框架，不同在于svelte采用预编译并且绕过使用Virtual DOM，所以编译后的代码量更少，运行速度也更快。具体请戳Svelte官网和Sapper官网。
\n
如果你装好了nodejs, 两分钟应该就能速度初始化一个站点。Sapper支持Code splitting，所以可以实现前后端使用同一套代码，并且支持静态站点导出。

npx degit "sveltejs/sapper-template#rollup" my-app\ncd my-app\nnpm install\nnpm run dev\n# you could open browser at http://localhost:3000 to see the site in dev mode\n

在Sapper中载入第三方数据

存储在 src/routes 目录下的 .svelte 文件会被自动编译为 .html 文件。具体操作见官方教程。

通过Preload机制载入外部数据

Preload机制可以同时在服务器端和浏览器端运行。下面的设置在 npm run dev 或者 npm run build & npm start 初始化时会先在服务端fetch相应的数据然后实时载入页面，但是完成载入后，当该页面被用户通过内部链接重新动态载入时（前往站点其他页面后再通过站内链接回来时）会在浏览器端fetch相应数据实时载入页面。在 npm run export 下Sapper会先fetch相应的数据然后据此生成静态页面。
\n
假设我们想从语雀通过异步调用外部数据读取你的用户昵称到当前页面，标准操作如下。这种方式的问题在于在页面动态载入时代码会在浏览器端运行，这时会有CORS错误，因为调用的api域名跟网站运行的域名不一致。这个问题可以通过下一节的方法来解决。
\n
另一个缺陷在于假如第三方API需要token授权，这种方式会导致token被暴露在服务器端，十分不安全。

// src/routes/index.svelte\n\n<script context="module">\n  export async function preload({ params, query }) {\n    // fetch from yuque api\n    console.log('Start fetching username');\n    const res = await this.fetch(`https://www.yuque.com/api/v2/users/your-username`, {\n\t\tcredentials: 'include',\n\t\tmode: 'no-cors',\n\t\theaders: {\n'Content-Type': 'application/json',\n'X-Auth-Token': 'your-yuque-private-token'\n\t\t},\n\t});\n\tif (res.status === 200) {\n\t\tconst user = await res.json();\n    console.log('Stop fetching username');\n\t\treturn  { user };\n\t} else {\n\t\tconsole.log(res.err);\n\t}\n  }\n</script>\n\n<script>\n\texport let user; //必须通过该语句来载入preload的user\n</script>\n\n<style>\n\th1, figure, p {\n\t\ttext-align: center;\n\t\tmargin: 0 auto;\n\t}\n\n\th1 {\n\t\tfont-size: 2.8em;\n\t\ttext-transform: uppercase;\n\t\tfont-weight: 700;\n\t\tmargin: 0 0 0.5em 0;\n\t}\n\n\tfigure {\n\t\tmargin: 0 0 1em 0;\n\t}\n\n\timg {\n\t\twidth: 100%;\n\t\tmax-width: 400px;\n\t\tmargin: 0 0 1em 0;\n\t}\n\n\tp {\n\t\tmargin: 1em auto;\n\t}\n\n\t@media (min-width: 480px) {\n\t\th1 {\nfont-size: 4em;\n\t\t}\n\t}\n</style>\n\n<svelte:head>\n\t<title>Sapper project template</title>\n</svelte:head>\n\n<h1>Great success!</h1>\n\n<figure>\n\t<img alt='Success Kid' src='successkid.jpg'>\n\t<figcaption>Have fun with Sapper!</figcaption>\n</figure>\n\n<div style='text-align: center;'>\n\tYuque username: {user.data.name}\n</div>\n\n<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>\n\n

通过 `json.js` 来载入外部数据建立本地JSON API

这种方法的基本思路如下。

在服务器端通过http请求载入外部数据然后把结果保存到一个json文件里，这个json文件会放在跟站点其他文件同一根目录下（相同域名）。
通过上节的Preload机制在svelte文件里通过异步请求载入这个json文件的内容。

这种方法的好处是只需要在站点编译阶段调用第三方API获取数据（很多第三方API都有调用次数限制），之后站点通过本地的json文件来载入数据，并且因为只在服务器端运行，私人token不会暴露在浏览器端。这个本地的json文件类似于自己网站的API。这种方法的坏处就是不能实时更新第三方数据的变化，因为这要求重新编译网站。对于静态网站来说，可以通过连续部署(continuous integration)服务，比如免费的Github Actions，Circle CI等来实现周期性编译，达到更新第三方数据的效果。
\n
对于Sapper来说，所有在 src/routes/ 目录下的 .json.js 文件都会自动编译为json文件并且生成一个可以通过http请求的endpoint，这些代码仅编译时在服务器端运行。下面我们在 about 页面里来实现。
\n
首先，我们先安装一下 node-fetch 这个外部依赖，这是一个模拟浏览器端 fetch API的库，支持async/await语法。

npm install node-fetch\n

通过 node-fetch 在 about.json.js 里实现http请求。

// src/routes/about.json.js\n\nconst fetch = require("node-fetch");\nconst token = 'your-private-yuque-token';\n\nasync function fetchUserNickName() {\n  let response = await fetch(`https://www.yuque.com/api/v2/users/your-username`, {\n    method: "GET",\n    headers: {\n      "Content-Type": "application/json",\n      "X-Auth-Token": token,\n    },\n  });\n  const data = await response.json();\n  const user = data.data;\n  console.log(user);\n  return user.name;\n}\n\n//这个get函数实际上就把这个about.json.js文件变成了一个可以请求的http endpoint。对应的地址就是about.json。\nexport async function get(req, res) {\n  res.writeHead(200, {\n    "Content-Type": "application/json",\n  });\n  const nickName = await fetchUserNickName();\n  res.end(JSON.stringify(nickName));\n}\n

运行 npm dev 后，在浏览器输入 https://localhost:3000/about.json 就能看到从语雀返回的昵称了。
\n
接下来我们通过Preload在 about.svelte 里调用 about.json 来获得昵称。

// src/routes/about.svelte\n\n<script context='module'>\n\texport async function preload({ params, query }) {\n\t// fetch from local json api\n\t  console.log('Start fetching nickname');\n    const res = await this.fetch(`about.json`);\n\tif (res.status === 200) {\n\t\tconst nickName = await res.json();\n\t\tconsole.log('Stop fetching nickname');\n\t\treturn  { nickName };\n\t} else {\n\t\tconsole.log(res.err);\n\t}\n  }\n</script>\n\n<script>\n\texport let nickName;\n</script>\n\n<svelte:head>\n\t<title>About</title>\n</svelte:head>\n\n<h1>About this site</h1>\n\n<div>Yuque nick name: {nickName}</div>\n\n<p>This is the 'about' page. There's not much here.</p>\n

运行 npm dev 后，在 https://localhost:3000/about 页面，可以看到以下效果。
$\"Screenshot$
当动态在 about 和 blog 页面切换时，能在Chrome的调试窗口里，看到下面的信息。
$\"preload.gif\"$
聪明的小朋友们可能已经想到了，通过这种方式，可以为任何外部数据建立本地的API。这些数据可以是第三方网站提供，可以是任何类型的本地文件，比如Markdown, Jupyter notebook, Word等等，也可以是任何远程或者本地的数据库。你要做的就是用相应的代码读取或者拉取这些数据然后转换成json对象。
**\n

用语雀的Node SDK建立文档和知识库的JSON API

这个SDK其实就是一个容易使用的封装。首先通过 npm 安装语雀Node SDK.

npm i @yuque/sdk --save\n

这里我们把语雀的SDK调用封装成一个不依赖sapper的单独的js文件。在sapper里，这样的文件可以放到根目录下的任何位置。为了方便调用，这里把它放到 src/_plugins 目录下，创建一个 yuque.js 的文件。

初始化语雀SDK

// src/_plugins/yuque.js\n\nclass YuQue {\n  constructor(token) {\n    const SDK = require('@yuque/sdk');\n    this._client = new SDK({\n    \ttoken: token || process.env.YUQUE_TOKEN, //如果不提供token,就检查环境变量里有没有YUQUE_TOKEN, 这里建议把token放到环境变量里，YUQUE_TOKEN是我自己定义的，你可以用任何你喜欢的变量名。\n    });\n  }\n}\n\nexport { YuQue };\n

拉取知识库列表

// src/_plugins/yuque.js\n\nclass YuQue {\n  constructor(token) {\n    ...见上节\n  }\n  \n  async getRepos() {\n    let repos = await this._client.repos.list({ user: "your-user-id" }); //replace with your user id\n    return repos;\n  }\n}\n

这个结果的json格式如下，这里需要重点关注的是 namespace 和 id ，我们需要通过它们之一来拉取文档列表和内容。\n

拉取文档列表

// src/_plugins/yuque.js\n\nclass YuQue {\n  constructor(token) {\n    ...见上节\n  }\n  \n  async getRepos() {\n    ...见上节\n  }\n  \n  async getPosts(repo) {\n    let posts = await this._client.docs.list({\n      namespace: repo.namespace,\n    });\n    return posts;\n  }\n}\n

这个结果的json格式如下，这里需要关注的是 slug 值，我们需要通过它和上面的 namespace 来获取文档内容。\n

拉取文档内容

// src/_plugins/yuque.js\n\nclass YuQue {\n  constructor(token) {\n    ...见上节\n  }\n  \n  async getRepos() {\n    ...见上节\n  }\n  \n  async getPosts(repo) {\n    ...见上节\n  }\n  \n  async getPost(namespace, slug) {\n    let post = await this._client.docs.get({\n      namespace: namespace,\n      slug: slug,\n      data: {\n        raw: 1, //注意这里要设为1，这样可以拉取Markdown格式的博文内容\n      },\n    });\n    return post;\n  }\n}\n

这个结果的json格式如下，这里重点关注 body 值，我们可以通过它得到Markdown源代码的字符串值，然后可以通过其他Markdown parser（比如Marked.js）来将它转换成html载入页面。这里 body_html 的值是yuque上的显示效果，不适用于自己的静态站点。\n

完整的yuque.js

// src/_plugins/yuque.js\n\nclass YuQue {\n  constructor(token) {\n    const SDK = require("@yuque/sdk");\n    this._client = new SDK({\n      token: token || process.env.YUQUE_TOKEN, //如果不提供token,就检查环境变量里有没有YUQUE_TOKEN, 这里建议把token放到环境变量里，YUQUE_TOKEN是我自己定义的，你可以用任何你喜欢的变量名。\n    });\n  }\n\n  async getAllPosts(userId) {\n    const repos = await this.getRepos(userId);\n    let posts = await Promise.all(\n      repos.map(async (repo) => {\n        console.log(`fetch posts for ${repo.namespace}`);\n        let repoPosts = await this.getPosts(repo);\n        repoPosts = await Promise.all(\n          repoPosts.map(async (post) => {\n            return await this.getPost(repo.namespace, post.slug);\n          })\n        );\n        return repoPosts;\n      })\n    );\n    posts = await [].concat(...posts);\n    return posts;\n  }\n\n  async getRepos(userId) {\n    //replace with your user id\n    let repos = await this._client.repos.list({ user: userId });\n    return repos;\n  }\n\n  async getPosts(repo) {\n    let posts = await this._client.docs.list({\n      namespace: repo.namespace,\n    });\n    return posts;\n  }\n\n  async getPost(namespace, slug) {\n    let post = await this._client.docs.get({\n      namespace: namespace,\n      slug: slug,\n      data: {\n        raw: 1, //注意这里要设为1，这样可以拉取Markdown格式的博文内容\n      },\n    });\n    return post;\n  }\n}\n\nexport { YuQue };\n

在`src/routes/blog/index.json.js`引用 `yuque.js` 来拉取文档列表

// src/routes/blog/index.json.js\n\nimport { YuQue } from "../../_plugins/yuque";\n\nconst token = process.env.YUQUE_TOKEN;\n\nconst yuque = new YuQue(token);\n\nasync function getPosts() {\n  let repos = await yuque.getRepos("qutang");\n  let posts = await Promise.all(\n    repos.map(async (repo) => yuque.getPosts(repo))\n  );\n  posts = await [].concat(...posts);\n  return posts;\n}\n\nexport async function get(req, res) {\n  res.writeHead(200, {\n    "Content-Type": "application/json",\n  });\n\n  let posts = await getPosts();\n\n  res.end(JSON.stringify(posts));\n}\n\n

相应的在 src/routes/blog/index.svelte 调用这个对应的API显示文档列表。

// src/routes/blog/index.svelte\n\n<script context="module">\n\texport function preload({ params, query }) {\n\t\treturn this.fetch(`blog.json`).then(r => r.json()).then(posts => {\nreturn { posts };\n\t\t});\n\t}\n</script>\n\n<script>\n\texport let posts;\n</script>\n\n<style>\n\tul {\n\t\tmargin: 0 0 1em 0;\n\t\tline-height: 1.5;\n\t}\n</style>\n\n<svelte:head>\n\t<title>Blog</title>\n</svelte:head>\n\n<h1>Recent posts</h1>\n\n\n\n<ul>\n\t{#each posts as post}\n\t\t<!-- we're using the non-standard `rel=prefetch` attribute to\n\ttell Sapper to load the data for the page as soon as\n\tthe user hovers over the link or taps it, instead of\n\twaiting for the 'click' event -->\n   <!-- 这里我们把知识库的id也放到地址里，这样对应的[...slug].svelte和[...slug].json.js才能得到相应的信息来拉取博文内容 -->\n\t\t<li><a rel='prefetch' href='blog/{post.book_id}/{post.slug}'>{post.title}</a></li>\n\t{/each}\n</ul>\n

运行 npm dev 后， https://localhost:3000/blog 的显示效果如下，
$\"Screenshot$ \n

在 `src/routes/blog/[...slug].json.js` 里引用 `yuque.js` 来拉取文档内容

import { YuQue } from "../../_plugins/yuque";\n\nasync function getPost(namespaceId, slug) {\n  const post = await new YuQue().getPost(namespaceId, slug);\n  return post;\n}\n\nexport async function get(req, res, next) {\n  // the `slug` parameter is available because\n  // this file is called [slug].json.js\n  const [namespaceId, slug] = req.params.slug;\n  const post = await getPost(namespaceId, slug);\n\n  res.writeHead(200, {\n    "Content-Type": "application/json",\n  });\n\n  res.end(JSON.stringify(post));\n}\n

相应的 src/routes/blog/[...slug].svelte 文件调用这个本地JSON API来载入文档内容。

<script context="module">\n\texport async function preload({ params, query }) {\n\t\t// the `slug` parameter is available because\n\t\t// this file is called [...slug].svelte\n\t\tconsole.log(params);\n\t\tconst [namespaceId, slug] = params.slug;\n\t\tconst res = await this.fetch(`blog/${namespaceId}/${slug}.json`);\n\t\tconst data = await res.json();\n\n\t\tif (res.status === 200) {\nreturn { post: data };\n\t\t} else {\nthis.error(res.status, data.message);\n\t\t}\n\t}\n</script>\n\n<script>\n\texport let post;\n</script>\n\n<style>\n\t/*\n\t\tBy default, CSS is locally scoped to the component,\n\t\tand any unused styles are dead-code-eliminated.\n\t\tIn this page, Svelte can't know which elements are\n\t\tgoing to appear inside the {{{post.html}}} block,\n\t\tso we have to use the :global(...) modifier to target\n\t\tall elements inside .content\n\t*/\n\t.content :global(h2) {\n\t\tfont-size: 1.4em;\n\t\tfont-weight: 500;\n\t}\n\n\t.content :global(pre) {\n\t\tbackground-color: #f9f9f9;\n\t\tbox-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);\n\t\tpadding: 0.5em;\n\t\tborder-radius: 2px;\n\t\toverflow-x: auto;\n\t}\n\n\t.content :global(pre) :global(code) {\n\t\tbackground-color: transparent;\n\t\tpadding: 0;\n\t}\n\n\t.content :global(ul) {\n\t\tline-height: 1.5;\n\t}\n\n\t.content :global(li) {\n\t\tmargin: 0 0 0.5em 0;\n\t}\n</style>\n\n<svelte:head>\n\t<title>{post.title}</title>\n</svelte:head>\n\n<h1>{post.title}</h1>\n\n<div class='content'>\n  <!-- 这里我们使用body_html来直接显示跟语雀上效果类似的内容，要想自定显示效果，请使用markdown库来解析body的内容把它转换为html然后再通过css来自定义显示效果。 -->\n\t{@html post.body_html}\n</div>\n\n

运行 npm dev 后， http://localhost:3000/blog/1687847/ny150b 的显示效果如下，
$\"Screenshot$ \n

扩展与思考

由于语雀的知识库和文档类型不只是 book ，怎样改良 yuque.js 让它只拉取一部分想要的文档？
怎样利用本地缓存来减少开发过程中由于热重载而频繁出现的调用语雀API的情况？
试一试静态导出后的效果，还能通过http访问对应的json地址吗？还需要每次进入页面都从json载入这些数据吗？
怎样用环境变量来存储语雀的token来提高安全性？千万不要把token直接嵌入代码，然后放到公共的代码托管库里！
怎么使用 marked.js 来解析拉取的 post.body 文档的markdown源代码，并把它转化为html然后显示在网页里?

\n","page":"1"},{"title":"Understand 𝜆-calculus with Python","update_date":"2019-08-30T16:59:00","create_date":"2019-08-30T16:59:00","series":"programming","excerpt":"Lambda (𝜆)-calculus is known as the world's tiniest universal programming language that adopts the functional programming paradigm. Let's think about Arithmetic, or more basically numbers. How can we define a number as function in 𝜆-calculus?","type":"post","slug":"understand-lambda-calculus-with-python","src":"https://colab.research.google.com/github/qutang/jupyter_notebook_articles/blob/main/understand-lambda-calculus-with-python.ipynb","html":"

$\\lambda$ -calculus is known as the world’s tiniest universal programming language that adopts the functional programming paradigm.

When I first learned its concepts, I was frustrated about the formulas and iterative variable substitutions. I also felt hard to understand how some fundamental functions (such as successor, logical) were derived.

After digging more into it, I realized $\\lambda$ -calcus shared the same spirit with many other languages (in fact, $\\lambda$ served as the foundation for many other languages) that support functional programming paradigm, such as Python. It used a minimal subset of concepts from the other modern languages while it was ensured to be Turing complete.

Let’s first review some basic concepts of $\\lambda$ -calculus.

Basic concepts of $\\lambda$ -calculus

In short, $\\lambda$ -calculus is all about operations (a.k.a functions). All other concepts in a programming languages (such as numbers, conditional logics, and bools) are built upon functions. I somehow tasted a flavor of minimalism for the inventor of this language.

The core idea of $\\lambda$ -calculus is that by defining several fundamental operations (a.k.a functions) properly, we can gradually build the whole world layer by layer using these fundamental functions*. This is exactly the spirit of functional programming that is applied to an extreme extent.

Please review the introductory material to understand the following examples.

\n
variable or name: a representation of function, or application. It usually is a mathmatical symbol, such as $\\theta$ .
\n
\n
function: the implementation of function using variables. It follows a formula pattern as below.
\n

\\lambda <variables>.<variables>|<applications>

application: the calling of function on some other variables. It follows a formula pattern as below.

<variable><variable>

Some classic examples

\n
numbers as functions
\n
$0 \\equiv \\lambda sz.z$
\n
$1 \\equiv \\lambda sz.s(z)$
\n
$n \\equiv \\lambda sz.s(s(..(s(z))..))$
\n
\n
bools as functions
\n
$T \\equiv \\lambda xy.x$
\n
$F \\equiv \\lambda xy.y$
\n
\n
conditional logic as functions
\n
$ifelse \\equiv \\lambda cxy.cxy$
\n

These functions look like magics at the first glance. To reveal the insight, this tutorial will walk you through their underlying meanings, and the perceptual process to derive these formulas, and ultimately provide their Python implementations to help you understand.

Python implementation of $\\lambda$ -calculus

We have to now change our mindsets to discard any unnecessary concepts in python, such as operators, strings, bool, numbers, if, while and etc. The only keyword we can use is basically lambda. And this is exactly where the name of lambda function originates from.

Arithmetic

Let’s think about Numbers first. How can we define a number as function? Numbers are just symbols with an order, therefore it certainly can be functions, as long as the functions have some sort of order.

With the concept of order in mind, we now can treat a number as the transformation of another number. In formula, it becomes,

n = f(m)

Where $n, m$ are different numbers.

Let’s try more, what if we want to get a third number from $m$ by using $n$ as an intermediator.

l = g(n) = g(f(m))

Hooray, now number $l$ is a second-order function of $m$ . One can think of a more convenient way, what if $g=f$ ? Now we have a more elegant definition of numbers.

Given the origin of numbers $0$ (think it as a variable), and a consistent transformer function $S$ that transforms a number to its adjacent counterpart, the next number $1$ (think it as a variable) may be defined as,

1 = S(0)

Then

2 = S(1)

\nAnd so on,

Substitute them only using $S$ and $0$ , we can get a $n$ th-order function for number $n$ ,

n = S(S..S(0)))

Now the format becomes closer to the formula we’ve seen before in previous section, writing as a function in pseudocode,

function n (S, 0):\n    return S(S(..S(0)))\n

This is exactly the same with the formula in the previous section.

number functions $0, 1, ..., n$ in Python

Input code

# a function representing the fundamental operation: number zero.\n# The real meaning of this function is it always return the second parameter.\nzero = lambda s: lambda zero: zero\n\n# The real meaning of function one is it applies function s to the second parameter __once__.\none = lambda s: lambda zero: s(zero)\n\n# The real meaning of function two is it applies function s to the second parameter __twice__.\ntwo = lambda s: lambda zero: s(s(zero))\n\nthree = lambda s: lambda zero: s(s(s(zero)))\n

It is important to also understand the real meanings of number functions zero, one, two. In the above derivation, we assumed function s is a transformer function between two numbers. But in reality, s could be any function. Here we use a function plus_one for test purpose, meaning it will add 1 to an input number.\nInput code

plus_one = lambda x: x + 1\n

Applying function zero to any other functions would result in an identity function $\\lambda x.x$ .\nInput code

identity = zero(plus_one)\nidentity(0), identity(1)\n

Output results

(0, 1)\n

Applying function one to another function x would result in a function that will apply function x once to the input.\nInput code

plus_one_once = one(plus_one)\nplus_one_once(0), plus_one_once(1)\n

Output results

(1, 2)\n

Applying function two to another function x would result in a function that will apply function x twice to the input.\nInput code

plus_one_twice = two(plus_one)\nplus_one_twice(0), plus_one_twice(1)\n

Output results

(2, 3)\n

Similarly, applying function n to another function x would result in a function that will apply function x n times to the input.

successor function $S$ in Python

We’ve used the $S$ without defining it in the number functions, because we don’t have to transform a number to another in the examples above. Now, we will explore to define $S$ .\nLet’s first analyze the role of successor $S$ in terms of the functionality it represents. Literally, it means transforming a number function n so that n applies function s one more time than n to the input m.\nLet’s first define a function that applies s n times, which according to the meaning of number function, would be,

n(s)

Let’s then apply this function to another input m,

n(s)(m)

Now we need to apply s one more time,

s(n(s)(m))

n(s)(s(m))

\nHooray, we’ve got the successor function

S

now, writing as a function formula,

S(n, s, m): s(n(s)(m))

In Python, we can easily define this function with lambda,\nInput code

successor = lambda n: (lambda s: lambda m: s(n(s)(m)))\n

Now, let’s test the successor function using number functions and plus_one.\nInput code

# the successor of function one should be function two named as `new_two`\nnew_two = successor(one)\n

Input code

new_plus_one_twice = new_two(plus_one)\noriginal_plus_one_twice = two(plus_one)\n# The new function `two` and the original function `two` are the same\nnew_plus_one_twice(100) == original_plus_one_twice(100)\n

Output results

True\n

Input code

new_three = successor(two)\nnew_plus_one_triple_times = new_three(plus_one)\nnew_plus_one_triple_times(100)\n

Output results

103\n

We can also chain the function successor to get later number functions.\nInput code

# applying successor three times on number function `zero` to get number function `three`\nnew_three = successor(successor(successor(zero)))\nnew_plus_one_triple_times = new_three(plus_one)\nnew_plus_one_triple_times(100)\n

Output results

103\n

Based on functions zero and successor, more complex arithmetic functions such as add, mimus, predecessor, multiple, divide may be defined.

predecessor function $P$ in Python

Predecessor function can be derived using only functions successor and zero (Note that it is impossible to define all number functions from zero to infinite numbers n, we have to rely on successor and predecessor given an arbitrary number function n).

The predecessor of number function $n = \\lambda sz.s(...s(z))$ may be literally described as,

\n
Transform function n so that it applies function s one less time to variable z.
\n

Because we only have access to function zero, n and successor function, we cannot go back from function n to n-1. But instead, going forward from zero using successor to n, while preserving the status of previous number n-1 in the process.

To achieve that, we can consider using two variables, as a pair, one stores the current number function n and the previous stores the previous number function n-1.

(n, n-1)

We start from the pair of zero function and its predecessor, which is assumed to be also zero.

(0, 0)

And apply the successor function $S$ to the first variable in the pair,

S(0)

Create a new pair using this new variable and the original variable,

(S(0), 0) = (1, 0)

Apply this repeatatively,

(S(S(0)), S(0)) = (S(1), 1) = (2, 1)

For n times,

(S(S(..S(0)))), S(..S(0))) = (n, n-1)

Then get the second variable as the predecessor of function n.

We can divide the process into three fundamental functions.

Pair function $p$ : that accepts two variables and apply a function to the two variables.
Selector function $T$ and $F$ : $T$ accepts two variables and returns the first one and $F$ accepts two variables and returns the second one.
Pair successor function $\\theta$ : that accepts a pair function with variables $a$ and $b$ and transforms it into a new pair where the first element is the successor of a and the second element is a.

Then we will use the three fundamental functions to form the predecessor function.

Pair function $p$

Literally, pair function means applying function z to two variables a and b.

p = \\lambda z.zab

In Python, it becomes,\nInput code

pair = lambda a: lambda b: lambda z: z(a)(b)\n

Input code

# this means applying successor to one and two sequentially\n\none_and_plus_one_pair = pair(one)(plus_one)\nzero_and_plus_one_pair = pair(zero)(plus_one)\n\nplus_one_twice = one_and_plus_one_pair(successor)\nplus_one_once = zero_and_plus_one_pair(successor)\nplus_one_twice(0), plus_one_once(0)\n

Output results

(2, 1)\n

Selector functions: $T$ and $F$

Selector functions mean that the function can select the first or second element between two variables.

T = \\lambda xy.x

F = \\lambda xy.y

In Python, they become,\nInput code

first = lambda x: lambda y: x\nsecond = lambda x: lambda y: y\n

Input code

plus_one_once = first(one)(two)(plus_one)\n\n# or\nplus_one_twice = second(one)(two)(plus_one)\n\nplus_one_once(0), plus_one_twice(0)\n

Output results

(1, 2)\n

Combining selector and pair function, we can have functions to extract the first or second element in a pair.\nInput code

one_two_pair = pair(one)(two)\nnew_one = one_two_pair(first)\nnew_two = one_two_pair(second)\nplus_one_once = new_one(plus_one)\nplus_one_twice = new_two(plus_one)\n\nplus_one_once(0), plus_one_twice(0)\n

Output results

(1, 2)\n

Pair successor function $\\theta$

$\\theta$ function transforms a pair to a new pair where the first element is the successor of the first element of the original pair, and second pair is the first element of the original pair.

\\theta = \\lambda pz.z(S(pT))(pT)

The result function would also be a pair function.

In Python,\nInput code

theta = lambda p: lambda z: pair(successor(p(first)))(p(first))(z)\n

Input code

successor_of_first_and_original_first_pair = theta(pair(zero)(zero))\nnew_one = successor_of_first_and_original_first_pair(first)\nnew_zero = successor_of_first_and_original_first_pair(second)\nnew_one(plus_one)(0), new_zero(plus_one)(0)\n

Output results

(1, 0)\n

Predecessor

Now we have all building blocks theta, pair, first and second functions. We may define the predecessor function as following according to the iterative derivation before,

P = \\lambda n.n(\\theta)(p00)F

We first apply $\\theta$ $n$ times,

n(\\theta)

Then apply this function to the pair of zero and zero,

n(\\theta)(p00)

Now we get $(n, n-1)$ , to select $n-1$ , we apply this pair function to selector function $F$ to get the second element,

n(\\theta)(p00)F

Or in Python as,\nInput code

predecessor = lambda n: n(theta)(pair(zero)(zero))(second)\n

Input code

new_zero = predecessor(zero)\nnew_zero_from_one = predecessor(one)\nnew_one = predecessor(two)\nnew_two = predecessor(three)\n\nnew_zero(plus_one)(1), new_zero_from_one(plus_one)(1), new_one(plus_one)(1), new_two(plus_one)(1)\n

Output results

(1, 1, 2, 3)\n

Addition $A$ and subtraction $M$ functions in Python

Addition function $A$

Given two number functions $n$ and $m$ , the addition function $A$ might be interpreted as applying successor function $S$ $n$ times to $m$ .

Therefore, we can have,

n + m := nSm

As an additional function,

A := \\lambda nm.nSm

In Python, we can have,\nInput code

add = lambda n: lambda m: n(successor)(m)\n

Similarly, we use function plus_one for testing.\nInput code

five = add(two)(three)\nplus_one_five_times = five(plus_one)\nplus_one_five_times(0)\n

Output results

5\n

Subtraction function $M$

In similar way, given two number functions $n$ and $m$ , the subtraction function $M$ might be interpreted as applying predecessor function $P$ $m$ times to $n$ .

Therefore, we can have,

n - m := mPn

As an additional function,

M := \\lambda nm.mPn

In Python, we can have,\nInput code

subtract = lambda n: lambda m: m(predecessor)(n)\n

Similarly, we use function plus_one for testing.\nInput code

# 3 - 2\none = subtract(three)(two)\nplus_one_once = one(plus_one)\nplus_one_once(0)\n

Output results

1\n

Input code

# 2 - 3, because we didn't define negative numbers, this will result in zero function, \n# which voids the applied function.\nzero = subtract(two)(three)\ndo_nothing = zero(plus_one)\ndo_nothing(3) == 3\n

Output results

True\n

Multiplication function $T$ in Python

We will defer the discussion of division function $D$ to the next post (about conditional), because we need to use conditional functions.

For multiplication function, assume two number functions $n$ and $m$ , $n \\times m$ might be interpreted as applying function $P$ $m$ times first to get a function that can be applied again $n$ times, and then applying this function to successor function $S$ on number function $0$ to get the final number function $m \\times n$ .

In equation,

m \\times n := n(m(S))(0)

In a compact way,

T := \\lambda nm.n(mS)0

In Python,\nInput code

multiply = lambda n: lambda m: n(m(successor))(zero)\n

Use function plus_one for testing.\nInput code

# 2 x 3\nsix = multiply(two)(three)\nplus_one_six_times = six(plus_one)\nplus_one_six_times(0)\n

Output results

6\n

Input code

# 0 x 3\nzero_new = multiply(zero)(three)\ndo_nothing = zero_new(plus_one)\ndo_nothing(2) == 2\n

Output results

True\n

\n","sha":"0ae63f0185fa85cead1700562603c26b759b706a","page":"3"}]}

阅读建议

Sapper站点初始化

在Sapper中载入第三方数据

通过Preload机制载入外部数据

通过 json.js 来载入外部数据建立本地JSON API

用语雀的Node SDK建立文档和知识库的JSON API

初始化语雀SDK

拉取知识库列表

拉取文档列表

拉取文档内容

完整的yuque.js

在src/routes/blog/index.json.js引用 yuque.js 来拉取文档列表

在 src/routes/blog/[...slug].json.js 里引用 yuque.js 来拉取文档内容

扩展与思考

Basic concepts of λ\\lambdaλ-calculus

Some classic examples

Python implementation of λ\\lambdaλ-calculus

Arithmetic

number functions 0,1,...,n0, 1, ..., n0,1,...,n in Python

successor function SSS in Python

predecessor function PPP in Python

Pair function ppp

Selector functions: TTT and FFF

Pair successor function θ\\thetaθ

Predecessor

Addition AAA and subtraction MMM functions in Python

Addition function AAA

Subtraction function MMM

Multiplication function TTT in Python

通过 `json.js` 来载入外部数据建立本地JSON API

在`src/routes/blog/index.json.js`引用 `yuque.js` 来拉取文档列表

在 `src/routes/blog/[...slug].json.js` 里引用 `yuque.js` 来拉取文档内容

Basic concepts of $\\lambda$ -calculus

Python implementation of $\\lambda$ -calculus

number functions $0, 1, ..., n$ in Python

successor function $S$ in Python

predecessor function $P$ in Python

Pair function $p$

Selector functions: $T$ and $F$

Pair successor function $\\theta$

Addition $A$ and subtraction $M$ functions in Python

Addition function $A$

Subtraction function $M$

Multiplication function $T$ in Python

undefined

将语雀文档导入Sapper站点

Understand 𝜆-calculus with Python