原始类型:string
,number
,bigint
,boolean
,symbol
,null
和 undefined
。
机制:原始类型没有方法,只是临时生成对象包装器,并把原来的数据复制进去,并添加方法,一旦完成对象包装器就消除了。
疑惑:那是如何执行方法?执行完,显示打印,就消失。
原始类型:string
,number
,bigint
,boolean
,symbol
,null
和 undefined
。
机制:原始类型没有方法,只是临时生成对象包装器,并把原来的数据复制进去,并添加方法,一旦完成对象包装器就消除了。
疑惑:那是如何执行方法?执行完,显示打印,就消失。
require和import都是用于导入相关模块的语法只不过import来自Es6原生,而require来自CommonJs。
如果我们要批量导入一堆模块,单独一个一个require太慢了。所以用require.context函数。
函数传入三个值,要查找的入口地址,是否需要遍历子层级,正则匹配规则。然后会返回一个函数。
通过分析我们可以得知函数的keys属性可以获取我们要导入的模块的文件名
而函数可以通过传入文件路径来加载模块并返回模块。
第一次我们用函数的keys属性拿到了各个文件的名字。
第二次我们直接调用函数,依次传入路径,得到了模块组成的数组。
总之我们得到了想要导入的各个模块
解释:返回函数的.keys方法不是JavaScript的keys方法不要误会。
数组的map方法:map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
对象的keys方法:返回一个所有元素为字符串的数组,其元素来自于从给定的object
上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。
数组的foreach方法:对数组的每个元素执行一次给定的函数。
在翻看了一大堆知乎上的答案和推荐问题后,我彻底疯狂了,真假难辨,因为都是二手消息,而且基本上都没论证的。并且网络上的人良莠不齐,你根本无从得知这个人是谁,到底是真话,还是在吹逼,还是发泄一些恶趣味,散播焦虑,传播谣言。从这个角度来讲,网络上根本不存在任何有价值的信息,只有一堆垃圾。但这就是我获取大多数信息的办法。
如何去伪存真就是在看答案之前看看问题多问几句,提问的是jb谁啊?回答的又jb谁啊?看看他们的背景,看一看他们是不是伪造的经历或者是什么别有用心之人。动一动脑筋,在一些切实可信的消息前,思考下谁真谁假,识破那群试图混淆视听别有用心之人的险恶恶俗用意。最好把他们痛骂一顿。tmd伞兵玩意。
1.[collapse title="instancetype是什么"]再组件中默认导出的东西,在其他地方被调用,那么被调用的是这个组件中实际导出的对象吗?不是,实际导出的是一个类似于类的对象描述。实际使用需要根据这个对象描述去创建真实的对象。所以在使用ref过程中我们传递的是一个类似于类但不是类的对象描述,所以是不被接收的只能先通过typeof转换为类,然后再通过instance type将其转换为包含能够创建该类所对应的对象的构造器的实例对象[/collapse]
2.
[collapse title="记住密码实现"]记住密码通过调用登陆函数时传入从记住密码checkbox中获得的数据,然后根据这个数据再登陆函数中编写记住密码的功能块[/collapse]
[collapse title="记住密码具体实现"]实现,函数主要借助local storage提供的getitem,setitem等接口实现,统一封装为一个类,使用时创建实例调用其方法即可。[/collapse]
6.跨域登陆与返回数据
[collapse title="跨域"]跨域简单地说就是前端调用后端的api,但是后端api和前端不是部署在一个服务器上,导致跨域访问不允许。但是可以通过webpack反向代理,由webpack进行代理请求,测试阶段用webpack就好,运行时改用Nginx,道理都是也一样的。[/collapse]
[collapse title="规范返回数据"]
不同的接口返回的数据类型不一样,这个要根据具体的接口文档来说明,我们此处使用的接口返回是统一的。所以可以把返回的类型接口写死。
[block]
[/block]
由于具体data不一样所以在IloginData里写为any。对于特定的请求我们单独编写类型接口,对于登陆接口我们编写IloginResult。在进行网络请求时传入
[block]
[/block]
但是事实上返回的数据不止有这点
http://1.15.119.76/wp-content/uploads/2021/11/Snipaste_2021-11-07_17-36-31.png
之所以我们接收的对象数据只有code和data两个是因为我们在封装网络请求时,使用了响应拦截器,并单独取出返回数据中的data对象
[block]
[/block]
保存并本地缓存token,在请求拦截器中获取缓存token,并添加到头部认证字段。
当然对于请求返回的数据我们需要储存在单一状态树status中,使用mutations。
[/collapse]
1.登陆转跳直接用vuex的post即可。
2.拦截,作为单独的模块写在vuex中。注意是return 直接change token.path是不可行的。
[block]
[/block]
3.在store入口导出一个初始化函数,在vue的main入口调用,函数内容为一下
[block]
[/block]
调用的action方法如下
[block]
[/block]
3.
学习状态一般有两种,不知道自己不知道,知道自己知道,(知道不知道是自己广泛学习过程,不知道知道是缺乏线索问题)
不知道不知道,几乎是最糟糕的状态,不仅水平不行,心态也不行,没办法及时补救,泛泛而学,也就是散装学习最容易造成这种问题。实际上只不过是对几个热词熟悉,但对热词下的具体内容却不知道。而且这个热词看不到时也说不出。所仅有的知识唯能起到忽悠自己的作用。好比汤上的油膜毫无价值。
学习最终目的是运用。基础知识若不能脱离书本,独立地作为自己的知识,被独立讲述,也就不能称之为知识。离开一切笔记,资料之后,剩余的才是你的。
在表面不知道不知道学习的情况下,如果能深入热词,并达到离线独立的标准。相当于开启了一个封闭的罐头。但还是无法摆脱散装学习的实质。在罐头与罐头间强化若有若无的联系,把罐头垒叠成山。这样做成的就是体系。体系的好处在于,进行练习时,非常切合离线独立的标准,方便自己进行连续的检测。同时体系的建立,意味着,一大片的离线独立罐头。当被问及问题时,可以牵一发动全身。向上向下向对方展开。可以充分展示广度。罐头的存在又能展示深度。而离线独立地展示广度和深度就是我们学习的最终目的。在展示的前提下,运用只是顺手拈来的事情。
一般视频我需要花费三倍的时间来完成贺视频相似的进度,并且还无法运用其中的套路去灵活运用。但视频内容都不可能多复杂,比起高数,线代,这些东西。计算机简单得不可思议。那么问题主要在什么地方?
这时我从小的坏习惯,我算数据一算一个准,所有从来不对细节做什么要求。草稿是很随性的。但是这个习惯害得我在出bug浪费青春中大好的1到2个小时去找bug,还是低级的替换部分内容对比找bug,到头来发现仅仅是一个简单的拼写错误,或者是单纯写错了地方,这个时间往往是我正常做完内容的2到3倍时间。然而在这个愚蠢的找不同游戏中我没有任何收获和成长,多的只是怀疑人生式的郁闷和越来越大的鼻孔。是时候对单词拼写和他们的位置更严谨了。
我不是五柳先生,不是专研代码的写法,我不关心代码有哪些奇怪和生僻故意让人看不懂的奇怪写法。但是我不是复制器或者什么机器人。我要的写代码的思维和实现框架,而不是过分的关注具体的实现,亦或者哪个字母写在了皮鞋的侧面的细节。不是看别人写了什么字母然后劣质的转移一次。要看思想。
如果他准备造一辆坦克,那就看看,设计师对坦克的定义,和实现逻辑顺序,先是拆分为炮台底座还是制定装甲与火炮。而不是和焊接工人学习钢条是如何焊接的。更重要的是我们需要记录设计师的思想,而不是记录焊接过程。(虽然坦克不可能是焊接出来的)
所以我想我需要2倍数快速更进,理解思路,然后手动实现,具体不会地方再根据截图去补充。
撞破南墙不回头,我们不是来测速bug的。如果有什么问题超过十分钟都无法解决,哪怕搜索也无济于事,不妨先通过别的方法实现,然后记录下来。昨完当天项目后再处理,就和我们从前做难题一样的策略。长时间在一处徒劳无获,难免心态爆炸,心生退意,这样一天的大多数事情就做不完了。被小麻烦,拖慢了整体进度。
44.2[collapse title="typescript.config.json解析"]主要控制ts文件在转为js文件过程中的细节,由于架构设计主要是Babel负责ts文件的编译,所有此处并没有需要修改的地方。[/collapse]
44.3[collapse title="vue.config.js"]为导入的其他库中的内容和文件做声明,把ts无法识别的东西声明为一个单独的模块。可以理解为预处理ts中没有却要使用的任何内容[/collapse][collapse title="defaultComponent函数"]在vue库中有详细声明,这个函数的类型,包括传入,传出。而DefaultComponent类型就是该函数传出的类型(ps:传出的是一个对象实例)[/collapse]
44.4[collapse title="初始化各元素"]删除杂项,准备把个父级元素长高拉满,注册组件居中[/collapse][collapse title="问题"]HTML app body的css失效找错误无逻辑,写插入login框架子组件没逻辑。步骤混乱,缺乏完整思考逻辑,不知道正在做啥,为啥做,出了问题不知道无法倒退什么地方,全是打倒从来,极其浪费时间。要知道大的目标是什么,比如现在就是要做一个登陆的框架。那么就应该在view下创建login文件夹,文件夹下放细小组件,login。vue忘记放了没关系,先放入,然后思考,谁引用了login,router,去改router入口忘记。谁被login.vue引用了?3.jpg,去改3.jpg的引用。要引用login-panel.vue怎么办?导入,注册,使用。思考要提前,要有全局思考,要逻辑缜密,清晰。上线后bug,害于测速bug,测速bug害于编译bug,编译bug,编译bug害于提示bug,提示bug害于提前想到的bug,提前想到的bug消灭于,严谨的逻辑思维。逻辑条理是第一。速度是第二。无一则无二[/collapse][collapse title="login-panel外部框架"]1找ui框架中合适组件,2引入(打错字),3改造图标,宽度,名称,数量,隐藏配置参数等(slot具名插槽需要补习下),4css,title调整[/collapse]
44.5login-Panel-Account(内部框架)
[collapse title="1.分析内容要不要做成独立组件然后再分析具体内容"][/collapse]
[collapse title="2.抽离成为独立的两个输入组件并搭建内部表格框架"][/collapse]
[collapse title="3.创建data变量,并和输入双向绑定"][/collapse]
44.6login-Panel-Account(内部框架验证)
[collapse title="1.规则写法"]来自async[/collapse]
[collapse title="2.规则分配方式"]return传出后,在表单上和rules属性双向绑定,表达同时绑定传入数据acount。在需要验证的标签上prop=规则名[/collapse]
44.7完成立即登陆逻辑
[collapse title="抽离rules"][/collapse]
[collapse title="补充"][/collapse]
[collapse title="实现逻辑"]为了方便增加登陆方式,我们把验证过程放在登陆模块内部,通过外部的rel方式调用子组件的验证登陆函数,子组件的登陆函数同样通过rel方式拿到登陆验证对象的回调函数,回调函数会告诉我们是否成功[/collapse]