JS 分类

6月
30
更新于
6月30
2020

发表于 | 热度 ℃
| 字数统计： 1,472 (字) | 阅读时长： 6 (分钟)

随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 的 import() 语法 ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensure 已被 import 取代）。

React.lazy 是什么

在 React 16.6 版本中，新增了 React.lazy 函数，它能让你像渲染常规组件一样处理动态引入的组件，配合 webpack 的 Code Splitting ，只有当组件被加载，对应的资源才会导入 ，从而达到懒加载的效果。

使用 React.lazy

1
2
3
4
// 不使用 React.lazy
import OtherComponent from './OtherComponent';
// 使用 React.lazy
const OtherComponent = React.lazy(() => import('./OtherComponent'))

React.lazy 接受一个函数作为参数，这个函数需要调用 import() 。它需要返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

在控制台打印可以看到，React.lazy 方法返回的是一个 lazy 组件的对象，类型是 react.lazy，并且 lazy 组件具有 _status 属性，与 Promise 类似它具有 Pending、Resolved、Rejected 三个状态，分别代表组件的加载中、已加载、和加载失败三种状态。

需要注意的一点是，React.lazy 需要配合 Suspense 组件一起使用，在 Suspense 组件中渲染 React.lazy 异步加载的组件。如果单独使用 React.lazy，React 会给出错误提示。其中在 Suspense 组件中， fallback 是一个必需的占位属性，如果没有这个属性的话也是会报错的。

1
2
3
4
5
6
7
8
9
10
11
// 延迟加载回调 不需要加载效果设置为null maxDuration可以设置最大持续时间 最新版本中已移除了这个属性
const SuspenseComponent = (Component) => (props) => {
  return (
    <Suspense fallback={Math.random() >= 0.5 ? <Loading /> : <SkeletonView />}>
      <Component {...props}></Component>
    </Suspense>
  );
};
...
...
component: SuspenseComponent(OtherComponent),
阅读全文 »
4月
11
更新于
4月11
2019

发表于 | 热度 ℃
| 字数统计： 532 (字) | 阅读时长： 2 (分钟)

ES6模块主要有两个功能：export和import

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

阅读全文 »
6月
28
更新于
6月28
2020

发表于 | 热度 ℃
| 字数统计： 682 (字) | 阅读时长： 3 (分钟)

React是一个状态机，由开始的初始状态，通过与用户的互动，导致状态变化，从而重新渲染UI。

React 提供了优化UI渲染的机制， 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。

MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。

redux缓存机制 时间回溯适用于撤销操作 操作状态

  1. 安装
    1
    npm install --save mobx mobx-react
  2. 核心概念
  • state(状态) 状态是驱动应用的数据。
  • observable(value) && @observable Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。其修饰的state会暴露出来供观察者使用。
  • observer(观察者) 被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染。
  • action(动作) 只有在 actions 中，才可以修改 Mobx 中 state 的值。 action–>state–>view
  • computed 计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值。(可以看成公式) getter：获得计算得到的新state并返回。 setter：不能用来直接改变计算属性的值，但是它们可以用来作”逆向”衍生。
  • autorun 这通常是当你需要从反应式代码桥接到命令式代码的情况，例如打印日志、持久化或者更新UI的代码。
  • 如果你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。 其余情况都应该使用 computed。
  • reactions Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。 简而言之，reactions 在 响应式编程和命令式编程之间建立沟通的桥梁。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// component
import {inject, observer} from "mobx-react";

// 观察者 注入store添加到属性上
@inject("store") @observer

this.props.store.xxStore.num
this.props.store.xxStore.plus() // num+=1
this.props.store.xxStore.total

// homeStore

@observable num;
construtor(){
    this.name=''
    this.items=[]
}

@computed get total() {
    return this.items.length;
 }
  
@action plus=()=>{
    this.num+=1
}

autorun((e)=>{})

const homeStore =new HomeStore()
export {homeStore}
1
2
3
4
5
6
7
8
9
switch
router render={(props)=><Item {...props}/>}
router component={Index}
react-route-dom
withRouter
Linking
// Provider 传递stores
Privider store={stores}
create-react-app react-scripts

基本就这两种方法:immutable/observable mobx: oop redux: 函数式

ssr:流模式、字符串

demo地址

3月
15
更新于
3月15
2020

发表于 | 热度 ℃
| 字数统计： 793 (字) | 阅读时长： 3 (分钟)

场景：事件频繁被触发，频繁执行DOM操作、资源加载等重复行为，导致UI停顿甚至浏览器崩溃。如 input 实时搜索、scrollview 滚动更新。

函数防抖和节流用于限制函数的执行。是优化高频率执行js代码的一种手段。

阅读全文 »
9月
13
更新于
9月13
2020

发表于 | 热度 ℃
| 字数统计： 1,755 (字) | 阅读时长： 7 (分钟)

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage(属于浏览器对象模型BOM的对象window)

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

缺点：

  1. 存储容量限制，大部分浏览器应该最多5M。
  2. 仅支持字符串，如果是存对象还需要将使用JSON.stringify和JSON.parse方法互相转换，有些啰嗦。
  3. 读取都是同步的。大多数情况下，还挺好使的。但如果存储数据比较大，例如一张重要图片base64格式存储了，读取可能会有可感知的延迟时间。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

阅读全文 »
9月
08
更新于
9月08
2020

发表于 | 热度 ℃
| 字数统计： 11,290 (字) | 阅读时长： 51 (分钟)

JS的相关知识点比较繁杂，特此开篇整理一波，方便回顾总结查阅。

  • 运行在宿主环境环境中，比如浏览器或node环境
  • 不用预编译，直接解释执行代码
  • 是弱类型语言，较为灵活
  • 与操作系统无关，跨平台的语言
  • 脚本语言，解释性语言
阅读全文 »
6月
02
更新于
6月02
2020

发表于 | 热度 ℃
| 字数统计： 1,168 (字) | 阅读时长： 5 (分钟)

Redux三大概念

Redux 是JavaScript状态容器，提供可预测化的状态管理

action 普通的JS对象描述发生什么

reducer 只是一个接收 state 和 action，并返回新的 state 的函数

Store — 数据存储中心，同时连接着Actions和Views（React Components）。

  1. Store需要负责接收Views传来的Action
  2. 然后，根据Action.type和Action.payload对Store里的数据进行修改
  3. 最后，Store还需要通知Views，数据有改变，Views便去获取最新的Store数据，通过setState进行重新渲染组件（re-render）。

三大原则

  1. 单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。和根级的reducer,拆成多个reducer而不是多个store。

  1. State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

  1. 使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。传递数据 payload规范。

当 state 变化时需要返回全新的对象，而不是修改传入的参数。

阅读全文 »
11月
17
更新于
11月17
2019

发表于 | 热度 ℃
| 字数统计： 1,443 (字) | 阅读时长： 8 (分钟)

谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档：

格式说明符 描述
%s 将值格式化为字符串。
%d?or?%i 将值格式化为整数。
%f 将值格式化为浮点值。
%o 将值格式化为可扩展的DOM元素（如在元素面板中）。
%O 将值格式化为可扩展的JavaScript对象。
%c 根据您提供的CSS样式格式化输出字符串。

\n是换行，可以将一个字符串设置成多行 %c标记之后的内容使用对应样式，格式如 console.log(‘%c第一个样式%c第二个样式’,’css1′,’css2′); 如此对应 样式和普通的css效果基本一致，可以设置文字颜色，背景颜色，字体大小，间距，边距等等。还支持部分css3高级效果。

阅读全文 »