前端mvvm框架底层学习(一、我们来实现一个最简单的MVVM)

前言

前端mvvm框架好多,这个概念大家都知道是由后端开发那边传过来的。后端开发最开始是比较经典的MVC框架,当然前端也有MVC框架,比如比较经典的backbone.js就是比较经典的前端MVC框架(都好几年没更新了,估计没啥用户了),后面微软在其前端应用上首次提出了mvvm框架,再到后来我们当前最热的前端框架Vue.js。在这系统的文章中,我们不会由复杂的vue.js着手来学习,我们先由简单的概念开始,一步一个demo来学习前端mvvm到底是什么鬼? 继续阅读“前端mvvm框架底层学习(一、我们来实现一个最简单的MVVM)”

关于Virtual Dom的那些事(五)

前言

上一篇《关于Virtual Dom的那些事(四)》主要是介绍了Thunk概念,加上之前所有有的内容都只是snabbbom的前菜,本篇直接分析其200 SLOC(Source Lines of Code),大概200行的核心代码。并附上其它剩余所有代码的源码分析。 继续阅读“关于Virtual Dom的那些事(五)”

关于Virtual Dom的那些事(四)

前言

上一篇《关于Virtual Dom的那些事(三)》主要是介绍了生成VNode的几种方式。翻一翻snabbdom的源码,我看还可以看到一个概念-Thunk,Thunk是什么?在react全家桶中经常会看到Thunk这概念,在计算机语言中是传名调用的意思,但如果按我个人的理解就是中间件的概念,更通俗一点就是在某函数的每次输入与输出之间,预加一个自定义的拦截处理函数(thunk函数), 继续阅读“关于Virtual Dom的那些事(四)”

关于Virtual Dom的那些事(三)

前言

上一篇《关于Virtual Dom的那些事(二)》主要是介绍了VNode。其实生成VNode的方式在snabbdom中除了VNode自身的最基本的构造函数vnode()外,还有两种方式来生成。一种是toVNode(即把原生的Dom转化成为VNode),还有一种是非常有名的h函数(hyperscript最原始的定义是“Create HyperText with JavaScript.”)。本节主要是分析一下这两种函数在snabbdom中的源码。 继续阅读“关于Virtual Dom的那些事(三)”

关于Virtual Dom的那些事(二)

前言

上一篇《关于Virtual Dom的那些事(一)》在最后之处讲到Virtual Dom 主要涉及的概念。本篇将紧跟着并结合snabbdom的源码来讲讲其中的第一点“VNode”。既然是Virtual Dom,那当然其结构里面的Node节点相应也有VNode的概念。其组织形式按理来说应该与真实的Node节点类似才对。

真实Dom由些什么组成呢?

继续阅读“关于Virtual Dom的那些事(二)”

关于Virtual Dom的那些事(一)

前言

一直想写点关于Virtual Dom的东西。以前刚开始接触react的时候就已经接触到了Virtual Dom和diff算法的概念,但一直觉得这些都是很复杂,很高深的东西。后面使用react,使用Vue多了,逐渐觉得这些概念没那么陌生了。但还是觉得各种开源的Virtual Dom,React等对Virtual Dom的实现的源码不太容易读懂,源码的注释不全是一大障碍,直到遇到了snabbdom,才开始觉得有深究其源码的冲动。

为什么是snabbdom?

继续阅读“关于Virtual Dom的那些事(一)”

javascript函数式编程之 函子(functor)

一个最简单的容器,一个最简单的函子

函子functor 是实现了 map 函数并遵守一些特定规则的容器类型。什么是容器?如下是一个最简单的容器。函子则是Mappable的容器。下面的容器实现了map,所以它也是一个最简单的函子
引入数学概念范畴学中的函子是为了要处理一些比较复杂的情况。诸如:控制流(control flow)、异常处理(error handling)、异步操作(asynchronous actions)和状态(state),还有更棘手的副作用(effects)。
继续阅读“javascript函数式编程之 函子(functor)”

javascript函数式编程之 声明式编程(declarative programing)

定义

在计算机科学中,声明式编程是一种编程范式 – 构建计算机程序的结构和元素的一种风格 – 专注于表达计算逻辑,而不需要描述其控制流程。

应用这种风格的许多语言尝试通过描述程序在问题领域中必须完成的内容来最大限度地减少或消除副作用,而不是描述如何将其作为编程语言原函数的序列直到实现。这与命令式编程相反,命令式编程在显式步骤中实现算法。 继续阅读“javascript函数式编程之 声明式编程(declarative programing)”

javascript函数式编程之 无参风格(point-free style)

定义

无参风格是一种编程范例,其中函数定义不能识别它们所运行的参数(或“点”)。 相反,它只是组合(compose)其他函数,在其子函数中操纵参数的组合器。
因为严格使用组合可以很好地适应等式推理的程序,它也是某些编程语言的自然风格,包括APL和诸如Forth之类的连接语言。
例子如下: 继续阅读“javascript函数式编程之 无参风格(point-free style)”

javascript函数式编程之 柯里化(curry)

定义

柯里化(curry)的概念其实可以简单理解为这样,本来有个已存在的函数需要接收多个参数的,现我想要根据需求由此函数打造成一个只有一个或者指定数量参数的新的函数。这里我们引用lodash库来举例,如下:
<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script> 继续阅读“javascript函数式编程之 柯里化(curry)”