分类目录归档:写写代码

浏览器下载 PDF 文件

用浏览器访问一个指向 PDF 文件的链接,具体表现出来的行为会有所区别,最主要的区别就是在浏览器中打开(记作预览)或触发下载(记作下载)。

这些行为与请求响应结果中的 Content-Type 以及 Content-Disposition 这两个 header 有关。

Content-Typeapplication/pdfapplication/octet-stream 以及 application/custom-unknown 和无 Content-Disposition、取 inline 以及 attachment 来做组合实验,得到结果如下:

header Chrome Firefox Safari
Content-Type: application/pdf 预览 预览 预览
Content-Type: application/pdf
Content-Disposition: inline
预览 预览 预览
Content-Type: application/pdf
Content-Disposition: attachment
下载 下载 下载
Content-Type: application/octet-stream 下载 下载 下载
Content-Type: application/octet-stream
Content-Disposition: inline
下载 下载 下载
Content-Type: application/octet-stream
Content-Disposition: attachment
下载 下载 下载
Content-Type: application/custom-unknown 下载 下载 下载
Content-Type: application/custom-unknown
Content-Disposition: inline
下载 下载 下载
Content-Type: application/custom-unknown
Content-Disposition: attachment
下载 下载 下载

Content-Typeapplication/octet-stream 表示浏览器应当把这个文件作为二进制数据来对待。但实际上浏览器可能会自己根据 Content-Disposition 甚至文件内容来做些文件格式探测,从而使用浏览器内置的功能或插件功能来处理。上面用的 application/custom-unknown 就是特意设计一个不是通用的 type 来避免已有场景。

下载时,如果没通过 Content-Disposition 指定文件名(如 Content-Disposition:inline;filename=attach.pdf),那么下载后的文件的名称通过 url 来获取,如 /download.php 得到的是 download.php

Firefox 在触发下载时,如果 Content-Dispositioninline,那么会静默下载,而不会像 attachment 或无该 header 时那样弹出浏览器的保存弹框。

Safari 下载后,如果是 pdf 文件(通过 Content-TypeContent-Disposition 或其它方式识别出来),那么会自动打开该文件。

此处使用 pdf 来作为示例,对于其它类型的文件,浏览器和系统的规则推测应类似。

  • 操作系统:macOS Mojave 10.14.2
  • Chrome: 72.0.3626.121(正式版本) (64 位)
  • Firefox: 65.0.1 (64 位)
  • Safari: 12.0.2 (14606.3.4)

参考

包含块

一个元素的占用面积大小以及布局定位通常受到包含块(Containing Block)的影响,比如 topleft 取百分比时相对的长度是什么长度,widthheight 取百分比时相对的长度是什么长度?
包含块一般情况下是当前元素的最近的祖先块元素1内容区域,但具体还需要分情况来确定。

布局区域

浏览器渲染文档时,对于每一个元素,都会有一个布局盒子,该盒子又被划分为四个区域。

  • 内容区域——Content Area
  • 内边距区域——Padding Area
  • 边框区域——Border Area
  • 外边距区域——Margin Area

box-sizing 设为 border-box,会影响 width 和 height 的计算,但不影响布局区域的划分。

继续阅读

视窗百分比长度

视窗百分比长度是指相对于视窗1的尺寸,包含了 vwvhvminvmax

  • vw:视窗宽度的 1%
  • vh:视窗高度的 1%
  • vminmin(vw, vh)
  • vmaxmax(vh, vh)

其中,视窗一般是指浏览器文档渲染窗口,但对于 iframe 里的文档而言,它们的视窗是 iframe 元素的 内容区域(content area) 的大小。

参考资料

NBSP

  ,全称是 non-breaking space,除了表示空白,还含有告诉渲染引擎不要在此换行的意义。

可用于空间足够时和别的文本在同一行内展示,空间不够时,整串字符串(如 0800 3000 9974 这样的通过空白符来让电话号码等更易读的情况)不会在在空白符处换行,而是整串换行(需要把空白符替换为  )。当然,也可以通过设置这个串为不折行来解决:white-space: nowrap;

此为示例代码

参考

React Context

Context 的目的是对于全局的需要多处使用的数据,不希望通过 prop 一层层传递下去,而是可以直接使用。

childContextTypes & getChildContext

该方案在 16.3 后不再是推荐方案。

React 最初提供的 context 方案是提供 context 数据的组件通过静态的 childContextType 来定义 context 中各字段的数据类型,通过 getChildContext 成员方法来提供实际的 context 数据,其中,返回的数据可以搭配 prop 和 state 来提供响应式的数据。而消费 context 数据的组件通过静态的 contextTypes 来指定需要消费的 context 字段的类型集合,然后即可通过 this.context[fieldName] 来使用。

注意,消费 context 的组件只需要定义需要的字段的类型即可,不需要是全部。同时,也不需要是提供 context 的组件的直接子组件。

import PropTypes from 'prop-types';

class Button extends React.Component {
  static contextTypes = {
    color: PropTypes.string
  };

  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  static childContextTypes = {
    color: PropTypes.string
  };

  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

继续阅读

c君不在

2018/10/07

React 的行内条件渲染(inline conditional rendering)能够在无 else 分支的情况下简化条件渲染,这是由子元素定义及渲染决定的。

const ele = (
  <div>
    <p>{true}</p>
    <p>{true && 1}</p>

    <p>{false}</p>
    <p>{false && 2}</p>
  </div>
);

对应的 JavaScript 代码是

const ele = React.createElement(
  "div",
  null,
  React.createElement("p", null, true),
  React.createElement("p", null, true && 1),
  React.createElement("p", null, false),
  React.createElement("p", null, false && 2)
);

true && 1 等的表达式结果作为子元素去渲染时,使用  ChildReconciler#createChild ,其中仅当子元素类型(typeof)是 stringnumberobject 且不为 null 时才渲染,所以 true / false 则不会渲染。

继续阅读

《高性能网站建设进阶指南》读书笔记

《高性能网站建设进阶指南》

无阻塞加载脚本

无阻塞加载外链脚本的方法有:

  • XHR Eval,xhr 加载后 eval。
  • XHR 注入,xhr 加载后,创建 script 元素 scriptEle,然后把加载到的内容写进 scriptEle 的 text 属性来运行。
  • Script in Iframe,通过 frames/contentWindow 以及 parent/top 等来在父子窗口间相互调用。
  • Script DOM Element,动态创建 script 元素,然后设置 src 属性来加载外部脚本。
  • Script Defer,延迟执行,但执行顺序和声明 defer 的顺序一致,阻塞 DOMContentLoaded 事件。
  • document.write Script Tag,多个脚本并行下载,但依然阻塞其它类型资源,document.write("<script src='a.js'><\/script>")

继续阅读

单 Store 单页应用的状态重置

如果是基于 Redux 等单 Store 形式来构建单页应用,那么需要注意,大多数时候,切换页面时(如前进、后退或直接访问),需要注意状态的重置。

如果用的是 react-router-redux,那么需要在切换后做 reset 的页面的 reducer 中,在 actionLOCATION_CHANGE1 时,返回该 reducer 的 initState。如:

// reducers/page1.js
import { LOCATION_CHANGE } from 'react-router-redux';
import * as actions from '../../actions/page1';

const initialState = {
  list: ['默认文本'],
};

export default function index(state = initialState, action) {
  switch (action.type) {
    case LOCATION_CHANGE:
      return initialState;

    case actions.ADD_TEXT:

      return Object.assign({}, state, {
        list: [action.data, ...state.list],
      });

    default:
      return state;
  }
}

如果用的是 connected-react-router,也类似。

// reducers/counter.js
import { LOCATION_CHANGE } from 'connected-react-router';

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case LOCATION_CHANGE:
      return 0;
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

export default counterReducer

继续阅读