标签javascript下的文章

admin 发布于 04月03, 2017

React + Rx 模仿 Angular 模式

一、前言

其实对于软件开发模式来说,Angular 有着整套的一条龙服务,而 React 只是单纯的解决 View 层的问题,如果只是使用 React 开发项目会或多或少有点麻烦。下面主要讨论下数据层的东西,之前出了一个 mobx 来解决这个问题,但是这里想换个思路套用一下。其实 mobx 主要是声明了 @action, @computed, @observable 等元素来做到将 Store 作为一个可监控的源头,自动做到 VM 的效果,下面我也是,不过我采用 Rx 来做这个事情,简单利用下这种思想,能不能不污染我的原始数据(因为如果是双向的一种数据结构,那么就会被包装成监听类型的数据结构),这样我们调试的时候依然看到的是清晰的数据,并且还可以解决最初 Flux 库的一些麻烦,经过 Rx 改造的结果,可能比 mobx 的可测试性更好一些,具体就不说了,先谈 DEMO。

如果不想看文章的可以直接看代码 GitHub

阅读全文 »

admin 发布于 01月17, 2017

为什么需要 KeyMirror

前言

今天有朋友问了 “KeyMirror” 这个库有什么用的问题,其实这个问题并不难,这里扫一下盲区。

会按照下面这个逻辑来展开,彻底理解一下:

  1. KeyMirror 有什么用?
  2. Google Closure Compiler 是什么?
  3. KeyMirror 解决了什么问题,好处是什么?
  4. KeyMirror 的源码是什么样子?
  5. 用 Gulp 配置一个压缩任务,测试一下 Google Closure Compiler.

阅读全文 »

admin 发布于 12月10, 2016

Angular 组件交流方式

以下的测试例子都可以在 github 找到,但是最近好像不太稳定。 其实 ng2 在这方面做得挺好的,用起来也很简单,所以看完基本就可以动手写一写。强大并不止是这一方面,在写这些的过程中,通过一些配置,让开发很纯粹,有时间再录一个新手入门的开发教程。

(1) 父组件向子组件流入数据

这种方式是最简单的,在 ng2 中处理得非常完美,通过在子组件中标记 @Input() 输入接口的方式进行接收父组件的值,我下面的 demo 主要分了几种场景,尽可能的多覆盖不同情况吧。

基本上例子中覆盖了常见的情况:

  • 直接传入一个字符串的情况,不需要绑定父组件的一个变量
  • 绑定父组件变量的情况,然后可以在父组件中不断修改
  • 输入别名的情况,可以在子组件中对输入的变量名进行重新设置
  • ngOnChanges() 在子组件中监听属性的修改
  • 特殊情况下,我们需要对父组件传入的数据进行过滤
  • @ViewChild() 注解的跨多层子组件的观察方式

阅读全文 »

admin 发布于 12月01, 2016

二叉🌲🌲两三下

一、前言

树和图一样,是常用的数据结构模型,但是我的理解树是图的一个用于更具体的数据结构。今天温习的是树中比较简单、常用的二叉树。因为一个简单固定的结构更有利于查询,所以有了二叉查找树的概念。

简单介绍下🌲

研究依然以点-线模型的分析理解,不过树是从一个方向顺势的分支结构。这里可以是自上向下,也可以自下向上。

阅读全文 »

admin 发布于 11月17, 2016

无厘头 Graph

前言

今天晚上无意翻到一个图的文章,查了一下感觉网上实现和其他都好复杂,所以自己按理解搞了一下,不知道是我实现是不是错了...感觉还好~进入正题,先还是来点理论知识,不过大多是自己的想法,不一定都对,可以纠正。

图是一种数学模型,和数学挂勾一般都会比较复杂,所以形象的理解成最简单的模型,点-线 模型。其实最简单的是 1 个点的模型,涉及 2 个点还好,3 个点过后模型就会作出相应的改变。

这里用简单的语言来说图中的二元关系,不过还是先假设一点数学符号:

阅读全文 »

admin 发布于 11月04, 2016

JavaScript - EventEmitter 背后的秘密

什么是 Event Emitter?

Event emitter 听起来只是触发一个事件,这个事件任何东西都能监听。

想象一下这样的场景,在你的异步代码中,去“呼叫”一些事件的发生,以及让你其他部分都要听到你的“呼叫”并且注册他们的想法。

为了不同的目的,对于 Event Emitter 模式有大量不同的实现,但是基本的想法是为了给一个框架提供事件的管理以及能够去订阅他们。

在这里,我们的目标创建属于我们自己的 Event Emitter 去理解背后的秘密。所以,让我们看一下下面的代码是怎么工作的。

阅读全文 »

admin 发布于 10月16, 2016

如何存储 React 组件的数据

主要讲解这几个部分:state、store、static、this、module-global data

前言

随着 React 和 Redux 的到来,一个共同的问题被问到:

我应该将数据保存在 Redux Store 中呢?还是应该保存成本地 state?

其实这个问题是说的不完整( 或者原文说的太简单 ),因为你能在组件中存储数据的方式还有两种:static 和 this.(其实就是静态数据,还是类的实例数据)

让我们来依次讨论一下,你应该在什么时候使用它们。

阅读全文 »

admin 发布于 09月19, 2016

JavaScript 的内部字符编码是 UCS-2 还是 UTF-16

对于 JavaScript 使用的是 UCS-2 还是 UTF-16 这个问题,我找了很久,没有发现一个权威的回答,我决定自己研究一下它。这个回答来自于你对 JavaScript 引擎或者对 JavaScript 语言的理解。

一、著名的 BMP (Basic Multilingual Plane)

Unicode 标识符通过一个明确的名字和一个整数来作为它的码位(code point).比如,“©️” 字符的码位可以用“版权标志”和U+00A9(0xA9,也可以写作十进制 169)来表示。

Unicode 字符分为 17 组平面,每个平面拥有 2^16 (65,536)个码位.有一些码位没有分配字符,也有一些码位被保留,成为私有的,也有一些码位是永远被保留的,作为无字符的标志。每一个码位都可以用 16 进制 xy0000xyFFFF 来表示,这里的 xy 是表示一个 16 进制的值,从 0010

这第一个位置(当 xy00 的时候)被称为 BMP (基本多文种平面, Basic Multilingual Plane)。它包含了最常用的码位从 U+0000 到 U+FFFF。

这里需要补充一点额外的平面知识,以及术语的表格。

阅读全文 »

admin 发布于 07月26, 2016

React.js 模式

前言

我想找一个好的前端前端框架,找了很久。这个框架将能够帮助我写出具有可扩展性、可维护性 UI 的代码。通过对 React.js 优势的理解,我认为“我找到了它”。在我大量的使用过程中,我发现了一些模式性的东西。这些技术被一次又一次的用于编程开发之中。此时,我将它写下来、讨论和分享这些我发现的模式。

这些所有的代码都是可用的,能够在 https://github.com/krasimir/react-in-patterns 中下载。我可能不会更新我的博客,但是我将一直在 GitHub 中发布一些东西。我也将鼓励你在 GitHub 中讨论这些模式,通过 issue 或者直接 pull request 的方式。

阅读全文 »

admin 发布于 07月26, 2016

React 组件之间如何交流

前言

今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题。下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可能用中文的意思,来将作者要讲述的技术描述清楚。英文能力有限,如果有不对的地方请跟我留言,一定修改……^_^

原著序

处理 React 组件之间的交流方式,主要取决于组件之间的关系,然而这些关系的约定人就是你。

我不会讲太多关于 data-stores、data-adapters 或者 data-helpers 之类的话题。我下面只专注于 React 组件本身的交流方式的讲解。

React 组件之间交流的方式,可以分为以下 3 种:

  • 【父组件】向【子组件】传值;
  • 【子组件】向【父组件】传值;
  • 没有任何嵌套关系的组件之间传值(PS:比如:兄弟组件之间传值)

阅读全文 »