标签「JavaScript」(共 12 篇文章)

在 JavaScript 的开发中,经常会遇到在对象间进行属性复制的情况,比如说下面这个在服务器中对表单进行过滤的例子。

function createUserInfo(req, res, next) {
  const body = req.body;
  const data = {
    name: body.name,
    age: body.age,
    major: body.major,
    email: body.email
  }
  User.save(new User(data)).then(user => {
    res.send('创建用户成功');
  }
}

为了确保用户表单的数据不会对其它字段造成意料之外的影响,比如说恶意修改权限之外的字段之类的情况,一般都会需要对表单进行过滤操作。如果只是少数属性需要这样过滤的话还好,如果有十几个甚至几十个属性需要过滤的话,那么多重复的代码也会把人搞迷糊。那么,有什么好的方法能够减轻这样的负担呢?

当我一开始学习 React 的时候,记得我读了很多与它相关,却有着不同技术的文章。

我想特别指出,其中有一篇提到 React 的生态圈非常混乱,以至于让开发者觉得在使用 React 之前必须掌握其它所有与之相关的类库。

和一些有着 8 个月 React 使用经历的人一样,我仍然只是浮于整个生态圈的表面,甚至不知道这个庞大的系统是如何工作的。

但我花费在 React 中的时间已经足以让我明白,什么时候适合使用另外一个相关技术——Redux(一个 Flux 架构的实现),以及我为什么要使用它。

React 的好处很多,组件化简化了开发,虚拟 DOM 提升了页面性能,等等。当然,React 也有其缺点,其中影响最大的一点便是由于 React 是一个非常重型的框架,超过 2w 行的代码,即便是压缩后也超过 300k,导致了它的初始化加载非常费时。光是把这样的一个 JS 打包文件加载出来就要耗费一大笔时间,跟何况它的初始化执行过程也要达到百毫秒级,这样还是很影响用户体验的。

那么有没有什么方法能避免 React 这样的不足之处呢?

React 的渲染机制和其它类型的 MV * 框架有很大的区别。通过由数据构成的虚拟 DOM,React 便可在浏览器中一个根节点上渲染出一个完整的真实 DOM 树,从而完成整个页面的渲染。这是在浏览器客户端中完成的渲染操作。而在服务器(Node.js 环境)上,虽然没有 DOM,在客户端初次请求时,可以通过虚拟 DOM,将组件和数据渲染成真实 DOM 的 HTML 字符串,像其它后端语言如 PHP 那样把一个完整的 HTML 页面传输给浏览器,这就是服务端渲染。这同时也给了 React 一个很大的优势,让一个前端 View 层也有了 SEO 友好的展现方式。

近年来,React 已经成为开发者们建立从单页应用(SPA)到移动应用的一个新工具。但是自从我开始逐步深入 React 后,我发现所有看似非常酷的 Node 模块实际上对开发有非常不利的影响。它们不遵循任何规则,组件的体积巨大。它们为几乎所有的组件都使用了状态,也包括那些根本就不作输出的组件。任何有着足够经验的人都明白,维护这样的代码会有多麻烦,以及如果每次都渲染全部组件的时候,这在浏览器上加载会有多慢。在这篇文章中,我会带你探索 React 的最佳实践,包括如何设置 React 以及如何让它变得足够快。

在你开始阅读前请注意:React 是一个函数式编程(Functional Programming,FP)库,如果你不知道函数式编程是什么,请阅读其它相关文章。

这几年函数式编程逐渐火了起来。例如 Clojure、Scala 和 Haskell 这些编程语言已经吸引了很多对新技术着迷的程序员们的眼球,因为他们在某些方面有着巨大的优势。Immutable.js 的目标是把其中的一些优势通过简单直观的 API 带到 Javascript 中来。请跟着我们通过这篇文章来学习这些(benefits)并运用到你的项目中。

介绍:不可变(immutability)和 Immutable.js

尽管函数式编程的特变不仅仅在于其不可变,但很多的函数式语言都把不可变作为一个重点。例如 Clojure 和 Haskell,都对数据如何改变和何时能够改变做出了严格的编译时限制。正因这一点,许多开发者便放弃了这些语言。对于那些能够忍受住最初的煎熬的人们来说,解决问题的新方式开始变得多样起来。特别是对于初次接触的人来说,数据结构是函数式范式的主要的争议点。

Copyright © 2017 dremy.cn
皖ICP备16015002号