之前遇到了这样一个问题,下滑滚动,到底加载数据,可是判断到底好判断,但是有时候在底向上滚动还是会触发条件,这时候就需要判断滚动的方向了,只有向下滚动才会触发数据请求。
这个代码的精髓就是利用了宏任务和微任务的特点而实现的。
1 | function scrollDirect() { |
之前遇到了这样一个问题,下滑滚动,到底加载数据,可是判断到底好判断,但是有时候在底向上滚动还是会触发条件,这时候就需要判断滚动的方向了,只有向下滚动才会触发数据请求。
这个代码的精髓就是利用了宏任务和微任务的特点而实现的。
1 | function scrollDirect() { |
原文 https://segmentfault.com/a/1190000020233387?utm_source=tag-newest
精简:
1 | ((modules) => { |
我们在 index 入口文件中,采用 import语法动态导入文件
1 | const button = document.createElement('button'); |
再回头看编译的结果,貌似好像打包出来的结果有些复杂啦,没关系!其实核心很简单就是个 jsonp 加载文件。
打包出来的结果多了个src_a_js.main.js
1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([ |
最终会通过 script 标签加载这个文件,加载后默认会调用 window 下的 > webpackJsonp的 push 方法
我们来看看 main.js 发生了哪些变化,话说有代码些小复杂,分段来看
先来看index 模块做了那些事,为了看着方便我来把代码整理一下
1 | "./src/index.js": |
这里出现了两个方法 __webpack_require__.e
和__webpack_require__.t
__webpack_require__.e
方法看似是用来加载文件的,咱们来找一找
1 | __webpack_require__.f = {}; |
虽然代码量比较多,其实核心就干了一件事 :> 创建 script 标签,文件加载回来那肯定就会调用 push 方法咯!
先跳过这段看下面的
1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([ |
1 | function webpackJsonpCallback(data) { // 3) 文件加载后会调用此方法 |
加载的文件会调用 webpackJsonpCallback方法,内部就是将新增的模块合并到modules上,并且让__webpack_require__.e
完成
1 | __webpack_require__.t = function(value, mode) { // t方法其实很简单就是 |
这样用户就可以拿到新增的模块结果啦,源码虽难,但是多看几遍总会有收获!,不过不得不说 webpack5 打包出来的代码更加简洁啦! 期待 webpack5 正式发版!!
到此我们就将 webpack5 的懒加载功能整个过了一遍,其实思路和 webpack4 的懒加载一样呢
世界上根本不存在纯正的全栈工程师,为什么就是有那么一拨人被我们奉为全栈工程师而努力向他们学习?其实是因为如下的特点:
你会发现这些特质你在专家工程师身上也可以找得到,只是少了一个“全面”。因为全面是以上特点导出的结果,而不是原因。具有以上特点的人不可能不全面。你认为一个专家不全面,是因为这个专家某一方面特别牛,但是并不代表别的方面就什么都不会。
写到这里我们才发现我们崇拜的不是全栈工程师,我们(可能)不看好的专家身上具有一模一样的品质。我们崇拜的原来是那些聪明的人。对应到上面的 5 个特点:
我们来到这个世界,是为了创造本来没有的东西,而不是为了学写代码。
别废话,用就完了
GitHub:https://github.com/microsoft/winget-cli
推荐安装:https://www.microsoft.com/en-us/p/app-installer/9nblggh4nns1(2020-05-26)并不能,得开测试版
所以:https://github.com/microsoft/winget-cli/releases 下载,手动安装
问题: 不能自动更新。
别废话那么多,用就完了。
GitHub:https://github.com/microsoft/terminal
推荐安装方式:https://aka.ms/terminal
修改 defaultProfile 为 cmd 的数值。
done, enjoy
choco:
1 | Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) |
nvm:
1 | choco install nvm |
yarn:
1 | choco install yarn |
地址放这了剩下的等我有心情在写: https://github.com/LeetCode-OpenSource/rxjs-hooks
npm i react-use
useBattery
— 跟踪设备电池状态。 useGeolocation
— 跟踪用户设备的地理位置状态。 useHover
and useHoverDirty
— 跟踪鼠标悬停某个元素的状态。 useIdle
— 跟踪用户是否处于非活动状态。useKey
, useKeyPress
, useKeyboardJs
, 和 useKeyPressEvent
— 追踪按键。 useLocation
— 跟踪页面导航栏的位置状态。useMedia
— 跟踪 CSS 媒体查询的状态。 useMediaDevices
— 跟踪连接的硬件设备的状态。useMotion
— 跟踪设备的运动传感器的状态。useMouse
and useMouseHovered
— 跟踪鼠标位置的状态。 useNetwork
— 跟踪用户的互联网连接状态。useOrientation
— 跟踪设备屏幕方向的状态。usePageLeave
— 当鼠标离开页面边界时触发。useScroll
— 跟踪 HTML 元素的滚动位置。 useSize
— 跟踪 HTML 元素的维度。useStartTyping
— 检测用户何时开始输入。useWindowScroll
— 跟踪 窗口
滚动位置。 useWindowSize
— 跟踪 窗口
尺寸。 useAudio
— 播放音频并公开其控件。 useClickAway
— 当用户点击目标区域外时触发回调。useCss
— 动态调整 CSS。useDrop
and useDropArea
— 跟踪文件,链接和复制粘贴。useFullscreen
— 全屏显示元素或视频。 useSpeech
— 从文本字符串合成语音。 useVideo
— 播放视频,跟踪其状态,以及公开播放控件。 useWait
— UI 的复杂等待管理。useRaf
— 在每个 requestAnimationFrame
上重新呈现组件。useSpring
— 根据弹簧动力学随时间插入数字。useTimeout
— 超时后返回 true。useTween
— 重新渲染组件,同时补间 0 到 1 之间的数字。 useUpdate
— 返回一个回调,在调用时重新呈现组件。useAsync
— 解析一个 async
函数。useAsyncFn
— 异步函数的状态管理。useAsyncRetry
— useAsync
带有 retry()
方法。useBeforeUnload
— 当用户尝试重新加载或关闭页面时显示浏览器警报。useCopyToClipboard
— 将文本复制到剪贴板。useDebounce
— 防抖函数。 useFavicon
— 设置页面的 favicon。useLocalStorage
— 管理localStorage
中的值。useLockBodyScroll
— 锁定 body 元素的滚动。useSessionStorage
— 管理sessionStorage
中的值。useThrottle
and useThrottleFn
— 节流一个函数。useTitle
— 设置页面标题。useEffectOnce
— 仅运行一次的修改后的useEffect
。useEvent
— 订阅事件。useLifecycles
— 调用mount
和unmount
回调。useRefMounted
— 跟踪组件是否已挂载。usePromise
— 仅在安装组件时解析 promise。useLogger
— 在组件经历生命周期时登录控制台。useMount
— 调用mount
回调。useUnmount
— 调用unmount
回调。useUpdateEffect
— 仅在更新时运行一个effect
。useDeepCompareEffect
— 运行一个effect
通过深度比较其依赖项。createMemo
— memoized hooks 的工厂钩子。useGetSet
— 返回状态 getter get()
而不是原始状态。useGetSetState
— 就像 useGetSet
和 useSetState
有个孩子。useObservable
— 跟踪Observable
的最新值。useSetState
— 创建类似this.setState
的setState
方法。useToggle
and useBoolean
— 跟踪布尔值的状态。useCounter
and useNumber
— 跟踪数字的状态。useList
— 跟踪数组的状态。useMap
— 跟踪对象的状态。你需要安装 React 16.8.0
或更高版本才能使用 Hooks API。你可以分别导入每个钩子
import useToggle from ‘react-use/lib/useToggle’
或使用 ES6 命名导入
import {useToggle} from ‘react-use’
根据绑定器的不同,你可能会在 ES6 命名导入语句中遇到缺少依赖项的错误。有些钩子要求安装对等依赖项,因此我们建议单独导入。如果你希望同时使用这两种方法,你可以通过将以下配置添加到.babelrc
文件中,将命名的导入语句转换为使用babel-plugin-import
的单个导入语句。
[
“import”, {
“libraryName”: “react-use”,
“libraryDirectory”: “lib”,
“camel2DashComponentName”: false
}
]
Javascript 程序本来很小——在早期,它们大多被用来执行独立的脚本任务,在你的 web 页面需要的地方提供一定交互,所以一般不需要多大的脚本。过了几年,我们现在有了运行大量 Javascript 脚本的复杂程序,还有一些被用在其他环境(例如 Node.js)。
因此,近年来,有必要开始考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制。Node.js 已经提供这个能力很长时间了,还有很多的 Javascript 库和框架 已经开始了模块的使用(例如, CommonJS 和基于 AMD 的其他模块系统 如 RequireJS, 以及最新的 Webpack 和 Babel)。
好消息是,最新的浏览器开始原生支持模块功能了,这是本文要重点讲述的。这会是一个好事情 — 浏览器能够最优化加载模块,使它比使用库更有效率:使用库通常需要做额外的客户端处理。
在 es6 以前,还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的 javascript 模块规范有两种:CommonJS 和 AMD
而常说的 CMD 和 AMD 其实并不准确,CMD 就是Common Module Definition的缩写,而 AMD 是 Asynchronous Module Definition 的缩写。
最有意思的是 CMD 和 AMD 其实都是异步加载的。。。。。。。。。他们都是为了客户端服务的
只有 CommonJS 不是异步加载的。。。。。。。。。他是为了服务器端服务的。