amis源码解析——状态管理和渲染器通信
上篇文章分析了渲染器的注册和调用,那么渲染器在工作过程中免不了要处理数据持久化和相互之间通信的问题。这篇文章就谈谈amis在这方面的处理方式。
上篇文章分析了渲染器的注册和调用,那么渲染器在工作过程中免不了要处理数据持久化和相互之间通信的问题。这篇文章就谈谈amis在这方面的处理方式。
之前谈到了完全声明式编程的思想和用处,这篇文章就从一个百度开源的完全配置化框架amis源码入手,分析一下实现的关键点。
入职一星期,做了几个项目组的常规需求,顺便过了一下小组项目的整体代码,发现的一个比较明显的问题就是由于项目本身的特点,前端的重复业务逻辑比较多,导致有大量copy&paste出现,应该需要一个减少重复逻辑上投入人力的方案。就是本文想谈到的一个思想了——完全声明式编程。
最近发现了一组相当实用的API,专用于DOM的状态变化监听,由于兼容性的问题好像被社区提及不多,不过生产环境下做好特性检测还是很有实用价值的,有必要了解一下。
异步流程可以说是前端工作中每天都会打交道的场景,绝大部分情况下的业务场景都不复杂,简单的Promise就可以应付。不过现在既然有这么多异步控制的武器了,假想一些场景练习一下熟练度也是很不错的,于是就有了这样一篇对异步控制的回顾文章。
现代前端没人不知道React,但和React同期出现的一个强大工具了解的人却不多。这个工具可以和React完美配合,但不完全属于React生态圈,也可以独立使用,那就是Immutable.js。其强大之处在于补全了JS中难以实现不可变数据结构的问题,而不可变数据结构又是组件化的精髓之一。这篇文章就谈谈Immutable的应用。
受React Hooks的启发,我最近愈发的感觉到函数式编程的思想可能在前端会越来越重要,毕竟小到数组的map映射,Promise中的Monad思想,大到的React和RxJS的核心理念,函数式编程思想其实已经侵入到日常编程中太久,只是使用者没有明显感知,我认为和面向对象编程同为编程范式,两者也绝对不是对立关系,关键是学习到两者思想上的精髓,在日常编码组织上带来新的思路,所以从今天起打算学习一下相关知识。
最近Vue发布了在即将到来的新版本产生的变化,其中提到的很重要的一点就是将用Proxy
代替Object.defineProperty
实现数据的响应式。正巧mobx
从4升级到5的过程中也用Proxy
重写了自己的响应式系统,可以看到这个ES6特性确实称得上是响应式实现首选,好处甚至大过对兼容性的考虑。过去由于兼容性原因没有深入使用这个特性的机会,现在看来有必要再好好了解一下。
这是一道很经典的面试题,可以说考察了前端知识的各个方面,其中每个点都有很多可以展开的地方。网络上的解析也不少,但大多数也都是不那么全面,干脆自己总结一版也顺便回顾一下相关知识。当然说是全览也有些标题党了,本意是尽可能的在前端知识领域涉猎范围内记录完整。
mobx是继redux之后又一大放异彩的状态管理库,相比于redux,其通过函数响应式编程的理念使得状态管理变得更加简单自由可拓展,避免了redux中大量的样板代码书写。本文就记录一下其核心功能的实现思路。
最近刷题策略有些改变,从难度分类更改为题型分类,正好贪心算法类型的题刷完了,就在这里小结一下心得。之后每刷完一类题型也会记录,打算写成一个系列。
打开chrome控制台,输入0.2+0.4按下回车就会得到一个奇怪的结果。很多程序员知道这是浮点数计算的精度误差问题,但再具体深入到为什么就不知道了。本文就以此为契机探讨JS对数字存储和计算的原理。
前端发展这么多年来,由于babel,webpack等工程化工具的快速发展,JS的模块化管理能力已经远远强于CSS,另外也有很大一部分原因在于JS本身作为一门编程语言就有自己的作用域,而CSS本身的特性决定了其规则都是全局作用域。但如果要实现项目的工程化,这又是不得不解决的一个难点,下面针对CSS发展以来一些比较流行合理的模块化方案分别做一个思路梳理。
之前已经谈到过浏览器中的事件循环机制,可以简单概括为执行栈和任务队列共同实现异步队列的机制,但根据运行环境不同,这套机制也会存在差别。那么Node环境和浏览器环境的区别又是什么呢?
异步操作是JS的永不过时的话题,总是有人提出各种各样的方案去解决它,最初的回调地狱,到Promise,再有generator函数,直到现在的async函数。
在JS中对象拷贝的场景比较常见。由于对象属性中可能存在引用类型,一般分为浅拷贝和深拷贝两种。这里总结一下常见思路,可以根据具体需求复杂度进一步完善。
在JS中实现遍历的方法多种多样,比较常用的有标准的for循环,for in,数组的各种遍历方法等等。不同的方法有不同的优缺点,导致我们经常混合使用不同的遍历方法,不仅增加了自身出错的可能性,也使代码增加了额外的复杂度,于是ES6中新增了迭代器设计来专用于迭代对象。
在JS中只存在一种集合类型,就是数组类型。数组只可以使用数值型的索引,有时候我们需要非数值型的索引。在过去我们一般采用非数组对象的键值对来模拟,这种方法虽然可以近似实现,但也存在一些问题。为此ES6推出了Set和Map这两种集合类型来解决非数值型索引需求。
在符号诞生之前,我们的对象属性名都是字符串,这不仅容易造成属性名的冲突,而且属性可以被轻易的更改。所以我们需要一种'私有名称'来创建非字符串类型的属性名来防止常规的更改。这就是JS已有的基本类型(字符串,数值,布尔,null,undefined)之外,新增基本类型(Symbol)的目的之一。
最近看JQ源码时发现经常有等号连用的情况,虽然个人不是很喜欢这种写法,但有些时候确实能精简代码长度。这里做个小结,以后阅读他人代码时也方便理解。
我们先看这样一个例子:
var a = 'Hello';
(function(){
alert(a); //输出结果为undefined
var a = 'World';
})();
为什么a未定义实际上就是因为JavaScript的变量提升特性。这段代码实际上可以看作是这样:
var a = 'Hello';
(function(){
var a;
alert(a); //输出结果为undefined
a = 'World';
})();
这就好理解了。但是为什么会存在这样一种特性呢?我们就必须从JS中查找变量和函数的机制——变量对象说起。
在JavaScript中,我们通常将数据以对象字面量或数组的形式存储,当需要时我们通过一些方法来提取并存在同名的本地变量上。虽然语法简单,但当数据量增大时,或者数据结构比较复杂时,提取信息就会变得困难。ES6新增的结构语法就是为了解决这个问题。
之前我们说到,当通过回调函数执行多步异步操作时,会创造难以理解和调试的代码,而且也缺乏控制异步操作时机的手段。比如想让两个异步操作同时运行,或者同时启动多个异步操作只采用某个结果,都很难做到。在这些情况下,通过使用ES6的新特性——Promise将能大幅度改善这种情况。
今天设计妹子有个要求让某个元素出现在浏览器中视口时触发某个动效。感觉是个比较常见的需求,因为浏览器中获取位置的方法实在是又多又杂,索性做个总结以后自己查起来也方便~
首先需要知道一点,valueOf和toString函数通常不会显式调用,一般调用时机都是当语句执行时,如果数据类型不符合期待,解释器自动执行帮助我们完成类型转换(通常作用于object对象)。接下来首先根据不同情况分析隐式类型转换规则。
JS最有特点的一方面就在于它能轻易地处理异步编程。作为因互联网而生的语言,必须要求JS能响应用户的点击,按键,鼠标滚动之类的交互行为。但是JS引擎是单线程运行的,就是说浏览器无论在什么时候都只有一个线程在运行JS,那么如何配合浏览器内核处理这些异步事件呢?事实上除了处理JS的线程外,浏览器内核中还存在其他线程共同配合完成工作。我们就从头来说说JS的异步编程。
大家都知道,获取一个DOM元素的样式通过elem.style或者elem.getAttribute('style')都能实现。那么这两者有什么区别呢?
前端开发最初只需要使用JS实现一些基本的交互效果,所以早期一般在script标签中嵌入一些代码既可以达到要求。但随着各种WEB应用的兴起,JS的地位越来越重要,文件越来越复杂,一个项目里的文件势必要有良好的管理。模块化思想也就应运而生。
相信大家都或多或少在各种资料中看到JavaScript中的基本类型按值传参,对象按引用传参。但这句话真的是完全正确的吗?接下来我将逐步剖析其中的奥妙。