写给初中级前端的高级进阶指南
大家好,我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12
,拉你进群学习。
前言
我曾经一度很迷茫,在学了 Vue、React 的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题,这篇文章,笔者想结合自己的一些成长经历整理出一些路线,帮助各位初中级前端工程师少走一些弯路。
这篇文章会提到非常非常多的学习路线和链接,如果你还在初中级的阶段,不必太焦虑,可以把这篇文章作为一个进阶的路线图
,在未来的时日里朝着这个方向努力就好。
我也并不是说这篇文章是进阶高级工程师的唯一一条路线,如果你在业务上做的精进,亦或是能在沟通上八面玲珑,配合各方面力量把项目做的漂漂亮亮,那你也一样可以拥有这个头衔。本文只是我自己的一个成长路线总结。
本篇文章面对的人群是开发经验1到3年的初中级前端工程师
,希望能和你们交个心。
已经晋升高级前端的同学,欢迎你在评论区留下你的心得,补充我的一些缺失和不足。
笔者本人 17 年毕业于一所普通的本科学校,20 年 6 月在三年经验的时候顺利通过面试进入大厂,职级是高级前端开发。
我的 github 地址[1],欢迎 follow,我会持续更新一些值得你关注的项目。
我的 blog 地址[2],这里会持续更新,点个 star 不失联!✨
基础能力
我整理了一篇中级前端的必备技术栈能力,写给女朋友的中级前端面试秘籍[3] 。这篇文章里的技术栈当然都是需要扎实掌握的,(其实我自己也有一些漏缺,偷偷补一下)。
当然了,上进心十足的你不会一直满足于做中级前端,我们要继续向上,升职加薪,迎娶白富美!
JavaScript
原生 js 系列
冴羽大佬的这篇博客里,除了 undescore 的部分,你需要全部都能掌握。并且灵活的运用到开发中去。
JavaScript 深入系列、JavaScript 专题系列、ES6 系列[4]
完全熟练掌握 eventLoop。
tasks-microtasks-queues-and-schedules[5]
Promise
你需要阅读 Promise A+规范,注意其中的细节,并且灵活的运用到开发当中去。
Promise A+ 英文文档[6]你需要跟着精品教程手写一遍 Promise,对里面的细节深入思考,并且把其中异步等待、错误处理等等细节融会贯通到你的开发思想里去。
剖析 Promise 内部结构,一步一步实现一个完整的、能通过所有 Test case 的 Promise 类[7]最后,对于 promise 的核心,异步的链式调用,你必须能写出来简化版的代码。
最简实现 Promise,支持异步链式调用(20 行)[8]
题外话,当时精炼这 20 行真的绕了我好久 ????,但是搞明白了会有种恍然大悟的感觉。这种异步队列的技巧要融会贯通。
async await
对于 Promise 我们非常熟悉了,进一步延伸到 async await,这是目前开发中非常非常常用的异步处理方式,我们最好是熟悉它的 babel 编译后的源码。
手写 async await 的最简实现(20 行搞定)[9]
babel 对于 async await 配合 generator 函数,做的非常巧妙,这里面的思想我们也要去学习,如何递归的处理一个串行的 promise 链?
这个技巧在axios 的源码[10]里也有应用。平常经常用的拦截器,本质上就是一串 promise 的串行执行。
当然,如果你还有余力的话,也可以继续深入的去看 generator 函数的 babel 编译源码。不强制要求,毕竟 generator 函数在开发中已经用的非常少了。
ES6 系列之 Babel 将 Generator 编译成了什么样子[11]
异常处理
你必须精通异步场景下的错误处理,这是高级工程师必备的技能,如果开发中的异常被你写的库给吞掉了,那岂不是可笑。
Callback Promise Generator Async-Await 和异常处理的演进[12]
插件机制
你需要大概理解前端各个库中的插件
机制是如何实现的,在你自己开发一些库的时候也能融入自己适合的插件机制。
Koa 的洋葱中间件,Redux 的中间件,Axios 的拦截器让你迷惑吗?实现一个精简版的就彻底搞懂了。[13]
设计模式
对于一些复杂场景,你的开发不能再是if else
嵌套一把梭了,你需要把设计模式好好看一遍,在合适的场景下选择合适的设计模式。这里就推荐掘金小册吧,相信这篇小册会让你的工程能力
得到质的飞跃,举例来说,在 Vue 的源码中就用到了观察者模式
、发布订阅模式
、策略模式
、适配器模式
、发布订阅模式
、工厂模式
、组合模式
、代理模式
、门面模式
等等。
而这些设计模式如果你没学习过可能很难想到如何应用在工程之中,但是如果你学习过,它就变成了你内在的工程能力
,往大了说,也可以是架构能力
的一部分。
在《设计模式》这本小册中我们提到过,即使是在瞬息万变的前端领域,也存在一些具备“一次学习,终生受用”特性的知识。从工程的角度看,我推荐大家着重学习的是设计模式。-修言
这里推荐掘金修言的设计模式小册[14]。
基础算法
算法这里推荐慕课网 bobo 老师的 LeetCode 真题课程[15],在这个课程里算法大牛 bobo 老师会非常细心的给你讲解各种分类的 LeetCode 真题。
由于这门课程是 C++ 为主要语言的(不影响理解课程),我也针对此课程维护了一个对应的 JavaScript 版题解仓库[16],在 Issue 里也根据标签分类整理了各个题型的讲解,欢迎 Star ✨。
算法对于前端来说重要吗?也许你觉得做题没用,但是我个人在做题后并且分门别类的整理好各个题型的思路和解法后,是能真切的感觉到自己的代码能力在飞速提高的。
对于很多觉得自己不够聪明,不敢去学习算法的同学来说,推荐 bobo 老师的这篇《天生不聪明》,也正是这篇文章激励我开始了算法学习的旅程。
开发思想
有时候组合是优于继承的,不光是面向对象编程可以实现复用,在某些场景下,组合的思想可能会更加简洁优雅。
https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9
“…the problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong — “Coders at Work”
面向对象语言的问题在于它们带来了所有这些隐含的环境。你想要一个香蕉,但你得到的是拿着香蕉和整个丛林的大猩猩。
代码规范
你需要熟读 clean-code-javascript,并且深入结合到日常开发中,结合你们小组的场景制定自己的规范。
clean-code-javascript[17]
框架篇
对于高级工程师来说,你必须要有一个你趁手的框架,它就像你手中的一把利剑,能够让你披荆斩棘,斩杀各种项目于马下。
下面我会分为Vue
和React
两个方面深入去讲。
Vue
Vue 方面的话,我主要是师从黄轶老师,跟着他认真走,基本上在 Vue 这方面你可以做到基本无敌。
熟练运用
对于 Vue 你必须非常熟练的运用,官网的 api 你基本上要全部过一遍。并且你要利用一些高级的 api 去实现巧妙的封装。举几个简单的例子。
你要知道怎么用
slot-scope
去做一些数据和 ui 分离的封装。以vue-promised[18]这个库为例。Promised 组件并不关注你的视图展示成什么样,它只是帮你管理异步流程,并且通过你传入的slot-scope
,在合适的时机把数据回抛给你,并且帮你去展示你传入的视图。
<template><Promised :promise="usersPromise"><!-- Use the "pending" slot to display a loading message --><template v-slot:pending><p>Loading...</p></template><!-- The default scoped slot will be used as the result --><template v-slot="data"><ul><li v-for="user in data">{{ user.name }}</li></ul></template><!-- The "rejected" scoped slot will be used if there is an error --><template v-slot:rejected="error"><p>Error: {{ error.message }}</p></template></Promised>
</template>
你需要熟练的使用
Vue.extends
,配合项目做一些命令式api
的封装。并且知道它为什么可以这样用。(需要具备源码知识)confirm 组件[19]
export const confirm = function (text, title, onConfirm = () => {}) {if (typeof title === "function") {onConfirm = title;title = undefined;}const ConfirmCtor = Vue.extend(Confirm);const getInstance = () => {if (!instanceCache) {instanceCache = new ConfirmCtor({propsData: {text,title,onConfirm,},});// 生成dominstanceCache.$mount();document.body.appendChild(instanceCache.$el);} else {// 更新属性instanceCache.text = text;instanceCache.title = title;instanceCache.onConfirm = onConfirm;}return instanceCache;};const instance = getInstance();// 确保更新的prop渲染到dom// 确保动画效果Vue.nextTick(() => {instance.visible = true;});
};
你要开始使用
JSX
来编写你项目中的复杂组件了,比如在我的网易云音乐项目中,我遇到了一个复杂的音乐表格需求[20],支持搜索文字高亮、动态隐藏列等等。
当然对于现在版本的 Vue,JSX 还是不太好用,有很多属性需要写嵌套对象,这会造成很多不必要的麻烦,比如没办法像 React 一样直接把外层组件传入的 props 透传下去,Vue3 的 rfc 中提到会把 vnode 节点的属性进一步扁平化,我们期待得到接近于 React 的完美 JSX 开发体验吧。你要深入了解 Vue 中 nextTick 的原理,并且知道为什么要用微任务队列优于宏任务队列,结合你的 eventloop 知识深度思考。最后融入到你的
异步合并优化
的知识体系中去。
Vue 源码详解之 nextTick:MutationObserver 只是浮云,microtask 才是核心![21]你要能理解 Vue 中的高阶组件。关于这篇文章中为什么 slot-scope 不生效的问题,你不能看他的文章讲解都一头雾水。(需要你具备源码知识)
探索 Vue 高阶组件 | HcySunYang[22]推荐一下我自己总结的 Vue 高阶组件文章,里面涉及到了一些进阶的用法。
Vue 进阶必学之高阶组件 HOC[23]对于 Vuex 的使用必须非常熟练,知道什么时候该用 Vuex,知道怎么根据需求去编写 Vuex 的 plugin,合理的去使用 Vuex 的 subscribe 功能完成一些全局维度的封装,比如我对于 Vuex 中 action 的错误处理懒得一个个去
try catch
,就封装了一个vuex-error-plugin[24]。代码很简单,重要的是去理解为什么能这样做。这里用了monkey patch
的做法,并不是很好的实践,仅以此作为引子。对于 vue-router 的使用必须非常熟练,知道什么需求需要利用什么样的 router 钩子,这样才能 hold 住一个大型的项目,这个我觉得官方仓库里的进阶中文文档其实很好,不知道为什么好像没放在官网。
vue-router-advanced[25]理解虚拟 DOM 的本质,虚拟 DOM 一定比真实 DOM 更快吗?这篇是尤雨溪的回答,看完这个答案,相信你会对虚拟 DOM 有更进一步的认识和理解。
网上都说操作真实 DOM 慢,但测试结果却比 React 更快,为什么?[26]
源码深入
你不光要熟练运用 Vue,由于 Vue 的源码写的非常精美,而且阅读难度不是非常大,很多人也选择去阅读 Vue 的源码。视频课这里推荐黄轶老师的 Vue 源码课程。这里也包括了 Vuex 和 vue-router 的源码。
Vue.js 源码全方位深入解析 (含 Vue3.0 源码分析)[27]推荐 HcySunYang 大佬的 Vue 逐行分析,需要下载 git 仓库,切到 elegant 分支自己本地启动。
Vue 逐行级别的源码分析[28]当然,这个仓库的 master 分支也是宝藏,是这个作者的渲染器系列文章,脱离框架讲解了 vnode 和 diff 算法的本质
组件的本质[29]
Vue3 展望
Vue3 已经发布了 Beta 版本,你可以提前学习
Hook
相关的开发模式了。这里推荐一下我写的这篇 Vue3 相关介绍:
Vue3 究竟好在哪里?(和 React Hook 的详细对比)[30]
Vue3 源码
对于响应式部分,如果你已经非常熟悉 Vue2 的响应式原理了,那么 Vue3 的响应式原理对你来说应该没有太大的难度。甚至在学习之中你会相互比较,知道 Vue3 为什么这样做更好,Vue2 还有哪部分需要改进等等。
Vue3 其实就是把实现换成了更加强大的 Proxy,并且把响应式部分做的更加的抽象,甚至可以,不得不说,Vue3 的响应式模型更加接近响应式类库
的核心了,甚至react-easy-state
等 React 的响应式状态管理库,也是用这套类似的核心做出来的。
再次强调,非常非常推荐学习 Vue3 的@vue/reactivity
这个分包。
推一波自己的文章吧,细致了讲解了 Vue3 响应式的核心流程。
带你彻底搞懂 Vue3 的 Proxy 响应式原理!TypeScript 从零实现基于 Proxy 的响应式库。[31]
带你彻底搞懂 Vue3 的 Proxy 响应式原理!基于函数劫持实现 Map 和 Set 的响应式[32]
深度解析:Vue3 如何巧妙的实现强大的 computed[33]
在学习之后,我把@vue/reactivity
包轻松的集成到了 React 中,做了一个状态管理的库,这也另一方面佐证了这个包的抽象程度:
40 行代码把 Vue3 的响应式集成进 React 做状态管理[34]
React
React 已经进入了 Hook 为主的阶段,社区的各个库也都在积极拥抱 Hook,虽然它还有很多陷阱和不足,但是这基本上是未来的方向没跑了。这篇文章里我会减少 class 组件的开发技巧的提及,毕竟好多不错的公司也已经全面拥抱 Hook 了。
熟练应用
你必须掌握官网中提到的所有技巧,就算没有使用过,你也要大概知道该在什么场景使用。
推荐 React 小书,虽然书中的很多 api 已经更新了,但是核心的设计思想还是没有变
React.js 小书[35]关于熟练应用,其实掘金的小册里有几个宝藏
诚身大佬(悄悄告诉你,他的职级非常高)的企业级管理系统小册,这个项目里的代码非常深入,而且在抽象和优化方面也做的无可挑剔,自己抽象了
acl
权限管理系统和router
路由管理,并且引入了reselect
做性能优化,一年前我初次读的时候,很多地方懵懵懂懂,这一年下来我也从无到有经手了一套带acl
和权限路由
的管理系统后,才知道他的抽象能力有多强。真的是初闻不知曲中意,再闻已是曲中人。
React 组合式开发实践:打造企业管理系统五大核心模块[36]
三元大佬的 React Hooks 与 Immutable 数据流实战,深入浅出的带你实现一个音乐播放器。三元大家都认识吧?那是神,神带你们写应用项目,不学能说得过去吗?React Hooks 与 Immutable 数据流实战[37]
深入理解 React 中的
key
understanding-reacts-key-prop[38]react 中为何推荐设置 key[39]
React 官方团队成员对于
派生状态
的思考:
you-probably-dont-need-derived-state[40]
React Hook
你必须熟练掌握 Hook 的技巧,除了官网文档熟读以外:
推荐 Dan 的博客,他就是 Hook 的代码实际编写者之一,看他怎么说够权威了吧?这里贴心的送上汉化版。
useEffect 完整指南[41]
看完这篇以后,进入dan 的博客主页[42],找出所有和 Hook 有关的,全部精读!推荐黄子毅大佬的精读周刊系列
096.精读《useEffect 完全指南》.md[43]
注意!不是只看这一篇,而是这个仓库里所有有关于 React Hook 的文章都去看一遍,结合自己的思想分析。Hook 陷阱系列 还是 Dan 老哥的文章,详细的讲清楚了所谓
闭包陷阱
产生的原因和设计中的权衡。
函数式组件与类组件有何不同?[44]去找一些社区的精品自定义 hook,看看他们的开发和设计思路,有没有能融入自己的日常开发中去的。
精读《Hooks 取数 - swr 源码》[45]
Umi Hooks - 助力拥抱 React Hooks[46]
React Hooks 的体系设计之一 - 分层[47]
React 性能优化
React 中优化组件重渲染,这里有几个隐含的知识点。
optimize-react-re-renders[48]
如何对 React 函数式组件进行性能优化?这篇文章讲的很详细,值得仔细阅读一遍。如何对 React 函数式组件进行优化[49]
React 单元测试
使用
@testing-library/react
测试组件,这个库相比起 enzyme 更好的原因在于,它更注重于站在用户的角度去测试一个组件,而不是测试这个组件的实现细节。
Introducing The React Testing Library[50]
Testing Implementation Details[51]使用
@testing-library/react-hooks
测试自定义 Hook
how-to-test-custom-react-hooks[52]
React 和 TypeScript 结合使用
这个仓库非常详细的介绍了如何把 React 和 TypeScript 结合,并且给出了一些进阶用法的示例,非常值得过一遍!
react-typescript-cheatsheet[53]这篇文章是蚂蚁金服数据体验技术部的同学带来的,其实除了这里面的技术文章以外,蚂蚁金服的同学也由非常生动给我们讲解了一个高级前端同学是如何去社区寻找方案,如何思考和落地到项目中的,由衷的佩服。
React + Typescript 工程化治理实践[54]微软的大佬带你写一个类型安全的组件,非常深入,非常过瘾...
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)[55]React + TypeScript 10 个需要避免的错误模式。
10-typescript-pro-tips-patterns-with-or-without-react[56]
React 代码抽象思考
何时应该把代码拆分为组件?
when-to-break-up-a-component-into-multiple-components[57]仔细思考你的 React 应用中,状态应该放在什么位置,是组件自身,提升到父组件,亦或是局部 context 和 redux,这会有益于提升应用的性能和可维护性。
state-colocation-will-make-your-react-app-faster[58]仔细思考 React 组件中的状态应该如何管理,优先使用派生状态,并且在适当的时候利用 useMemo、reselect 等库去优化他们。
dont-sync-state-derive-it[59]React Hooks 的自定义 hook 中,如何利用 reducer 的模式提供更加灵活的数据管理,让用户拥有数据的控制权。
the-state-reducer-pattern-with-react-hooks[60]
TypeScript
自从 Vue3 横空出世以来,TypeScript 好像突然就火了。这是一件好事,推动前端去学习强类型语言,开发更加严谨。并且第三方包的 ts 类型支持的加入,让我们甚至很多时候都不再需要打开文档对着 api 撸了。
关于 TypeScript 学习,其实几个月前我还对于这门 JavaScript 的超集一窍不通,经过两三个月的静心学习,我能够去理解一些相对复杂的类型了,
可以说 TypeScript 的学习和学一个库或者学一个框架是完全不同的,
入门
除了官方文档以外,还有一些比较好的中文入门教程。
TypeScript Handbook 入门教程 [61]TypeScript Deep Dive 非常高质量的英文入门教学。
TypeScript Deep Dive[62]工具泛型在日常开发中都非常的常用,必须熟练掌握。
TS 一些工具泛型的使用及其实现[63]视频课程,还是黄轶大佬的,并且这个课程对于单元测试、前端手写框架、以及网络请求原理都非常有帮助。
基于 TypeScript 从零重构 axios[64]
进阶
这五篇文章里借助非常多的案例,为我们讲解了 ts 的一些高级用法,请务必反复在 ide 里尝试,理解,不懂的概念及时回到文档中补习。
巧用 TypeScript 系列 一共五篇[65]TS 进阶非常重要的一点,条件类型,很多泛型推导都需要借助它的力量。
conditional-types-in-typescript[66]以及上面那个大佬博客中的所有 TS 文章。
https://mariusschulz.com
实战
一个参数简化的实战,涉及到的高级知识点非常多。
????TypeScript 的高级类型(Advanced Type)
????Conditional Types (条件类型)
????Distributive conditional types (分布条件类型)
????Mapped types(映射类型)
???? 函数重载
TypeScript 参数简化实战[67]
实现一个简化版的 Vuex,同样知识点结合满满。
????TypeScript 的高级类型(Advanced Type[68])
????TypeScript 中利用泛型进行反向类型推导。(Generics[69])
????Mapped types(映射类型)
????Distributive Conditional Types(条件类型分配)
????TypeScript 中 Infer 的实战应用(Vue3 源码里 infer 的一个很重要的使用[70])
TS 实现智能类型推导的简化版 Vuex[71]
刻意训练
它几乎是一门新的语言(在类型世界里来说),需要你花费很大的精力去学好它。
我对于 TypeScript 的学习建议其实就是一个关键词:刻意训练
,在过基础概念的时候,不厌其烦的在vscode
中敲击,理解,思考。在基础概念过完以后去寻找实践文章,比如我上面进阶
和实战
部分推荐的几篇,继续刻意训练
,一定要堆积代码量,学习一门新的语言是不可能靠看文档获得成功的。
我会建立一个仓库,专门记录我遇到的TypeScript 的有趣代码[72],自己动手敲一遍,并且深入理解。
能力分级
其实 TypeScript 的能力也是两级分化的,日常写业务来说,你定义一些 interface,配合 React.FC 这种官方内置的类型也就跑通了,没什么特别难的点。
但是如果是造轮子呢?如果你自己写了一个工具库,并且类型比较复杂,你能保证推导出来吗?亦或者就拿 Vue3 来说,ref 是一个很复杂的嵌套类型,
假如我们这样定义一个值const value = ref(ref(2))
,对于嵌套的 ref,Vue3 会做一层拆包
,也就是说其实ref.value
会是 2,
那么它是如何让 ts 提示出 value 的类型是 number 的呢?
如果你看到源码里的这段代码,你只有基础的话,保证懵逼。
Vue3 跟着尤雨溪学 TypeScript 之 Ref 类型从零实现[73]
// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : Tref: T extends Ref<infer V> ? UnwrapRef<V> : Tarray: Tobject: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>? 'cRef': T extends Array<any>? 'array': T extends Ref | Function | CollectionTypes | BaseTypes? 'ref' // bail out on types that shouldn't be unwrapped: T extends object ? 'object' : 'ref']
业务开发人员
如果短期内你对自己的要求是能上手业务,那么你理解 TypeScript 基础的interface
和type
编写和泛型的普通使用(可以理解为类型系统里的函数传参)也已经足够。
框架开发人员
但是长期来看,如果你的目的是能够自己编写一些类型完善的库或框架,或者说你在公司扮演前端架构师
、轮子专家
等等角色,经常需要写一些偏底层的库给你的小伙伴们使用,那么你必须深入学习,这样才能做到给你的框架使用用户完美的类型体验。
面试题
TypeScript 相关的面试题我见得不多,不过力扣中国
的面试题算是难度偏高的,其中有一道 TS 的面试题,可以说是实用性和难度都有所兼顾,简单来说就是解包。
// 解开参数和返回值中的Promise
asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>↓
asyncMethod<T, U>(input: T): Action<U>// 解开参数中的Action
syncMethod<T, U>(action: Action<T>): Action<U>↓
syncMethod<T, U>(action: T): Action<U>
我在高强度学习了两三个月 TS 的情况下,已经能把这道题目相对轻松的解出来,相信这也是说明我的学习路线没有走偏(题解就不放了,尊重面试题,其实就是考察了映射类型
和infer
的使用)。
力扣面试题[74]
代码质量
代码风格
在项目中集成 Prettier + ESLint + Airbnb Style Guideintegrating-prettier-eslint-airbnb-style-guide-in-vscode[75]
在项目中集成 ESLint with Prettier, TypeScript[76]
高质量架构
如何重构一个过万 Star 开源项—BetterScroll,是由滴滴的大佬嵇智[77]所带来的,无独有偶的是,这篇文章除了详细的介绍一个合格的开源项目应该做到的代码质量保证,测试流程,持续集成流程以外,也体现了他的一些思考深度,非常值得学习。
如何重构一个过万 Star 开源项目—BetterScroll[78]
Git 提交信息
很多新手在提交 Git 信息的时候会写的很随意,比如
fix
、test
、修复
,这么糊弄的话是会被 leader 揍的![译]如何撰写 Git 提交信息[79]
Git-Commit-Log 规范(Angular 规范)[80]
commitizen[81]规范流程的 commit 工具,规范的 commit 格式也会让工具帮你生成友好的
changelog
构建工具
webpack 基础和优化
深入浅出 webpack[82]滴滴前端工程师的 webpack 深入源码分析系列,非常的优秀。
webpack 系列之一总览[83]
性能优化
推荐修言大佬的性能优化小册[84],这个真的是讲的深入浅出,从
webpack
到网络
到dom操作
,全方位的带你做一些性能优化实战。这本小册我当时看的时候真的是完全停不下来,修言大佬的风格既轻松又幽默。但是讲解的东西却能让你受益匪浅。谷歌开发者性能优化章节,不用多说了吧?很权威了。左侧菜单栏里还有更多相关内容,可以按需选择学习。
user-centric-performance-metrics[85]详谈合成层,合成层这个东西离我们忽远忽近,可能你的一个不小心的操作就造成
层爆炸
,当然需要仔细关注啦。起码,在性能遇到瓶颈的时候,你可以打开 chrome 的layer
面板,看看你的页面到底是怎么样的一个层分布。
详谈层合成(composite)[86]刘博文大佬的性能优化指南,非常清晰的讲解了网页优化的几个重要的注意点。
让你的网页更丝滑[87]
社区讨论
作为一个合格的前端工程师,一定要积极的深入社区去了解最新的动向,比如在twitter
上关注你喜欢的技术开发人员,如 Dan、尤雨溪。
另外 Github 上的很多 issue 也是宝藏讨论,我就以最近我对于 Vue3 的学习简单的举几个例子。
为什么 Vue3 不需要时间切片?
尤雨溪解释关于为什么在 Vue3 中不加入 React 时间切片功能?并且详细的分析了 React 和 Vue3 之间的一些细节差别,狠狠的吹了一波 Vue3(爱了爱了)。
Why remove time slicing from vue3?[88]
Vue3 的composition-api
到底好在哪?
Vue3 的 functional-api 相关的 rfc,尤大舌战群儒,深入浅出的为大家讲解了 Vue3 的设计思路等等。
Amendment proposal to Function-based Component API[89]
Vue3composition-api
的第一手文档
vue-composition-api 的 rfc 文档,在国内资料还不齐全的情况下,我去阅读了
vue-composition-api-rfc[90] 英文版文档,对于里面的设计思路叹为观止,学到了非常非常多尤大的思想。
总之,对于你喜欢的仓库,都可以去看看它的 issue 有没有看起来感兴趣的讨论,你也会学到非常多的东西。并且你可以和作者保持思路上的同步,这是非常难得的一件事情。
关于 Hook 的一些收获
我在狠狠的吸收了一波尤大对于 Vue3 composition-api
的设计思路的讲解,新旧模式的对比以后,这篇文章就是我对 Vue3 新模式的一些见解。
Vue3 Composition-Api + TypeScript + 新型状态管理模式探索。[91]
在 Vue2 里,可以通过plugin
先体验composition-api
,截取这篇文章对应的实战项目中的一小部分代码吧:
<template><Books :books="booksAvaluable" :loading="loading" />
</template><script lang="ts">
import { createComponent } from '@vue/composition-api';
import Books from '@/components/Books.vue';
import { useAsync } from '@/hooks';
import { getBooks } from '@/hacks/fetch';
import { useBookListInject } from '@/context';
export default createComponent({name: 'books',setup() {const { books, setBooks, booksAvaluable } = useBookListInject();const loading = useAsync(async () => {const requestBooks = await getBooks();setBooks(requestBooks);});return { booksAvaluable, loading };},components: {Books,},
});
</script><style>
.content {max-width: 700px;margin: auto;
}
</style>
本实战对应仓库:
vue-bookshelf[92]
并且由于它和React Hook
在很多方面的思想也非常相近,这甚至对于我在React Hook
上的使用也大有裨益,比如代码组织的思路上,
在第一次使用Hook
开发的时候,大部分人可能还是会保留着以前的思想,把state
集中起来定义在代码的前一大段,把computed
集中定义在第二段,把mutation
定义在第三段,如果不看尤大对于设计思想的讲解,我也一直是在这样做。
但是为什么 Logical Concerns 优于 Vue2 和 React Class Component 的 Option Types?看完detailed-design[93]这个章节你就全部明白了,并且这会融入到你日常开发中去。
总之,看完这篇以后,我果断的把公司里的首屏组件的一坨代码直接抽成了 n 个自定义 hook,维护效率提升简直像是坐火箭。
当然,社区里的宝藏 issue 肯定不止这些,我只是简单的列出了几个,但就是这几个都让我的技术视野开阔了很多,并且是真正的融入到公司的业务实战中去,是具有业务价值
的。希望你养成看 issue,紧跟英文社区的习惯,Github issue 里单纯的技术探讨氛围,真的是国内很少有社区可以媲美的。
function AppInner({ children }) {const [menus, setMenus] = useState({});// 用户信息const user = useUser();// 主题能力useTheme();// 权限获取useAuth({setMenus,});// 动态菜单也需要用到菜单的能力useDynamicMenus({menus,setMenus,});return (<Context.Provider value={user}><Layout routers={backgrounds}>{children}</Layout></Context.Provider>);
}
可以看到,Hook
在代码组织的方面有着得天独厚的优势,甚至各个模块
之间值的传递都是那么的自然,仅仅是函数传参而已。
总之,社区推出一些新的东西,它总归是解决了之前的一些痛点。我们跟着大佬的思路走,一定有肉吃。
Tree Shaking 的 Issue
相学长的文章你的 Tree-Shaking 并没什么卵用[94]中,也详细的描述了他对于副作用
的一些探寻过程,在UglifyJS 的 Issue[95]中找到了最终的答案,然后贡献给中文社区,这些内容最开始不会在任何中文社区里出现,只有靠你去探寻和发现。
学习方法的转变
从初中级前端开始往高级前端进阶,有一个很重要的点,就是很多情况下国内社区能找到的资料已经不够用了,而且有很多优质资料也是从国外社区二手、三手翻译过来的,翻译质量也不能保证。
这就引申出我们进阶的第一个点,开始接受英文资料。
这里很多同学说,我的英文能力不行啊,看不懂。其实我想说,笔者的英语能力也很一般,从去年开始我立了个目标,就是带着划词翻译插件也要开始艰难的看英文文章和资料,遇到不懂的单词就划出来看两眼(没有刻意去背),第五六次遇见这个单词的时候,就差不多记得它是什么意思了。
半年左右的时间下来,(大概保持每周 3 篇以上的阅读量)能肉眼可见的感觉自己的英语能力在进步,很多时候不用划词翻译插件,也可以完整的阅读下来一段文章。
这里是我当时阅读英文优质文章的一些记录,
英文技术文章阅读[96]
后面英文阅读慢慢成了一件比较自然的事情,也就没有再刻意去记录,前期可以用这种方式激励自己。
推荐两个英文站点吧,有很多高质量的前端文章。
dev.to[97]
medium[98]
medium 可能需要借助一些科学工具才能查看,但是里面的会员付费以及作者激励机制使得文章非常的优质。登录自己的谷歌账号即可成为会员,前期可能首页不会推荐一些前端相关的文章,你可以自己去搜索关键字如Vue
、React
、Webpack
,任何你兴趣的前端技术栈,不需要过多久你的首页就会出现前端的推荐内容。好好享受这个高质量的英文社区吧。
关于实践
社区有很多大佬实力很强,但是对新手写的代码嗤之以鼻,认为有 any
的就不叫 TypeScript
、认为没有单元测试
就没资格丢到 Github 上去。这种言论其实也不怪他们,他们也只是对开源软件的要求高到偏执而已。但是对于新手学习来说,这种言论很容易对大家造成打击,导致不敢写 ts,写的东西不敢放出来。其实大可不必,工业聚
对于这些观点就发表了一篇很好的看法,让我觉得深受打动,也就是这篇文章开始,我慢慢的把旧项目用 ts 改造起来,慢慢的进步。
Vue 3.0 公开代码之后……
总结
本篇文章是我在这一年多的学习经历抽象中总结出来,还有很多东西我会陆续加入到这篇文章中去。
希望作为初中级前端工程师的你,能够有所收获。如果能够帮助到你就是我最大的满足。
未完待续... 持续更新中。
参考资料
[1]
由于微信不支持外链,参考资料可点击 阅读原文查看。
最近组建了一个湖南人的前端交流群,如果你是湖南人可以加我微信 ruochuan12 私信 湖南 拉你进群。
推荐阅读
我在阿里招前端,该怎么帮你(可进面试群)
我读源码的经历
面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的
老姚浅谈:怎么学JavaScript?
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。
识别上方二维码加我微信、拉你进源码共读群
今日话题
略。欢迎分享、收藏、点赞、在看我的公众号文章~
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 写给初中级前端的高级进阶指南(万字路线)
前言 我曾经一度很迷茫,在学了 Vue、React 的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题,这篇文章,笔者结合自己的一些成长经历整理出一些…...
2024/4/21 7:29:45 - 写给初中级前端的高级进阶指南(万字长文,建议收藏)
前言由于公众号文章不允许外链,需要跳转文中链接的同学可以在脚注里找到各个的资源链接,也可以通过点击阅读原文更加方便的跳转链接。我曾经一度很迷茫,在学了 Vue、React 的实战开发和应用以后,好像遇到了一些瓶颈,不…...
2024/4/21 7:29:46 - 文章目录(三周年)
2020年5月719 05.14 12个前端必会 H5 问题及解决方法718 05.13 前端缓存最佳实践717 05.12 深圳腾讯前端面经分享2020年3月716 03.26 厚颜无耻!国内竟有人把 JSON 注册成自有商标!715 03.25 微信iOS版本推出深色模式,网友ÿ…...
2024/5/7 0:36:39 - 眼睛凸出做割完双眼皮休息几天
...
2024/5/7 0:16:42 - 前端大佬进阶之路(你就是下一个大佬)
前言 在我学习完前端到工作的时候,发现我缺少的东西太多了,现在开始从头开始总结,加油我会成功的 ES6,ES7和ES8 JS思维导图promise和async,await介绍1async和await介绍2reduce,async,filter,map使用promise原理JS异步实现方式JS常…...
2024/4/21 7:29:42 - 2018是2017的延续
有些东西的存在,不会是无缘无故的,他都是有一个引子,一种趋势的形成,也是在很久前,通过各种现象,行为的积累,然后由稚嫩到成熟的变化。 2018今年不是新的开始,而是2017定好的计划一…...
2024/4/21 7:29:41 - 双眼皮有那几种可爱
...
2024/4/21 7:29:40 - 割完双眼皮大小不同
...
2024/4/24 21:41:51 - 双眼皮割的前窄后宽
...
2024/4/24 23:14:01 - angular 创建service-worker项目报错:Unknown option: '--service-worker'
angular 创建service-worker项目报错:Unknown option: --service-worker 错误原因: The --service-worker option is only available for the ng build command. // --service-worker只支持 ng build 命令。--service-worker is deprecated for ng add …...
2024/4/30 20:28:52 - 割双眼皮被议论怎么办
...
2024/4/21 7:29:36 - 割双眼皮可以选择相应眼皮吗
...
2024/4/21 7:29:35 - angular中使用ng-options第一个选择项为空白的问题。
一个angular的项目中使用ng-options,但是页面上显示时渲染出来的第一个option为空,审查元素,如图: 页面上的效果也是为空; 检查自己的代码,如下图: 按照教程上的写法没问题啊,但是这…...
2024/4/21 7:29:34 - 双眼皮切口痒
...
2024/4/21 7:29:33 - 合肥韩式三点双眼皮多久不能提重物
...
2024/4/20 18:49:16 - 缙云割韩式双眼皮和切开双眼皮哪个好
...
2024/4/20 18:49:16 - Vue组件之props,$emit与$on以及slot分发
组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式 props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id"app"><my-component message"hello"></my-component>…...
2024/4/20 18:49:14 - AngularJS的$emit和$broadcast实例
$emit和$broadcast使得event、data在controller与view之间的传递变的简单。 $emit只能向parent controller传递event与data$broadcast只能向child controller传递event与data实例代码:AngularEvent.html <!DOCTYPE html> <html> <head><script…...
2024/4/20 18:49:15 - 做韩式三点双眼皮眼皮里面有根线
...
2024/4/21 7:29:32 - Vue的基础入门及使用
Vue的基础入门及使用 第一章 Vue核心 1.1 Vue的基本认识 1.1.1 官网 英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/ 1.1.2 介绍描述 渐进式JavaScript框架作者:尤雨溪(一位华裔前Google工程师)作用…...
2024/4/21 7:29:31
最新文章
- vue中的async
📕:来源于chatgpt的回答 1.async是什么 async 是 JavaScript 中的一个关键字,用于定义一个异步函数。异步函数是一种特殊类型的函数,它可以让你更方便地使用异步操作,如异步请求、定时器等。 在使用 async 关键字声明…...
2024/5/7 6:06:02 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/5/6 9:38:23 - 数据挖掘中的PCA和KMeans:Airbnb房源案例研究
目录 一、PCA简介 二、数据集概览 三、数据预处理步骤 四、PCA申请 五、KMeans 聚类 六、PCA成分分析 七、逆变换 八、质心分析 九、结论 十、深入探究 10.1 第 1 步:确定 PCA 组件的最佳数量 10.2 第 2 步:使用 9 个组件重做 PCA 10.3 解释 PCA 加载和特…...
2024/5/5 8:53:00 - Python语法总结:not(常出现错误)
0、not是什么 在python中not是逻辑判断词,用于布尔型True和False之前 a not Ture # a False b not False # b True1、not的用法 (1)判断语句 if not a:# 如果a是False,执行的语句(2)判断元素是否在…...
2024/5/2 5:16:56 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/7 5:50:09 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/4 23:54:56 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/5/4 23:54:56 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/6 9:21:00 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/5/4 23:54:56 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/5/4 23:55:05 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/5/4 23:54:56 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/5/4 23:55:16 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/5/4 23:54:56 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/6 1:40:42 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/5/4 23:54:56 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/5/4 23:55:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/5/4 23:55:06 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/5/4 23:54:56 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/4 23:55:06 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/5 8:13:33 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/5/4 23:55:16 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/5/4 23:54:58 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/6 21:42:42 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/5/4 23:54:56 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57