之前遇到了这样一个问题,下滑滚动,到底加载数据,可是判断到底好判断,但是有时候在底向上滚动还是会触发条件,这时候就需要判断滚动的方向了,只有向下滚动才会触发数据请求。
这个代码的精髓就是利用了宏任务和微任务的特点而实现的。
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 不是异步加载的。。。。。。。。。他是为了服务器端服务的。