草庐IT

高级前端进阶(七)

一曲风流唯少年 2023-03-28 原文
最近行程码下线了,核酸检测也取消了,但是新冠病毒仍然存在,加上也是流感爆发时期,大家注意防护!!!

阳性无症状,你可能并没有真的感染新冠,新冠病毒是比普通流感病毒要厉害的,会导致发烧的,而且传染性极强。

新冠病毒一旦入侵你的免疫系统,会疯狂繁殖,免疫系统会杀不过来的,那咋办?摆烂,启动终极保护系统(发烧),大家一起GG。长期发热,会对器官有些损伤的。

药物只能缓解症状,真正有效的是你的免疫系统。

一、页面变灰(CSS中滤镜的使用)

全局变灰很简单

filter: grayscale(1);
一行代码即可

部分内容变灰

1、在全局的基础上,给部分内容添加 filter: grayscale(0); 是没有效果的,因为它是滤镜。
2、在部分内容上再添加一层滤镜,逆转全局滤镜效果,方案可行,但暂时好像没有这方面现成的属性来用。里面涉及到图像算法,想逆转不是那么好实现的。
3、取消全局滤镜,遍历,然后给部分内容添加滤镜。虽然是笨方法,但方案可行。

二、Vue文件中为啥this既可以访问data里面的属性,也可以调用methods里面的方法?

其实呢,非常简单。
Vue里面的data是个函数,返回的是一个数据对象,为了组件复用,不共享数据。
Vue里面的methods是个对象,里面包含的全是方法。
所以需要分两类:(当然,还有其他的,prop、computed等等)
举个例子:我写的应该非常非常简化了,还看不懂,自己反思去

function Person(options) {
    const self = this;
    // 重写data,源码中对data还做了响应式处理,更复杂
    for (let key in options.data()) {
        self[key] = options.data()[key];
    }
    // 重写方法
    for (let key in options.methods) {
        self[key] = options.methods[key].bind(self);
    }
}
let p1 = new Person({
    data() {
        return {
            x: '123456'
        }
    },
    methods: {
        test(val) {
            console.log('test', val);
        }
    }
});
console.log(p1.x); // 123456
console.log(p1.test('456')); // test 456

你可能会疑问:我在Vue文件里面不是这样写的
添加生命周期的话,大家应该能更轻易地明白

function Person(options) {
    const self = this;
    // 重写data,源码中对data还做了响应式处理,更复杂
    for (let key in options.data()) {
        self[key] = options.data()[key];
    }
    // 重写方法
    for (let key in options.methods) {
        self[key] = options.methods[key].bind(self);
    }
    // 生命周期处理
    options.created.call(self);
}
new Person({
    data() {
        return {
            x: '123456'
        }
    },
    methods: {
        test(val) {
            console.log('test', val);
        }
    },
    created(){
        console.log(p1.x); // 123456
        console.log(p1.test('456')); // test 456
    }
});

选项式写法的原理
以及
this可以访问对象里面的各种属性及方法,大家应该明白了。

三、Vue的更新

setup方法

我们经常会遇到Vue组件中methods太多时,找方法比较累,难以维护,难以往下拓展,这也就导致了Vue框架无法胜任大型前端项目。
这种情况,可能有人会拆分组件,或者使用Minxin解决。但是呢,还是有着很多麻烦的地方。
1、拆分组件,必定会涉及到组件通信的问题,如果拆分得过多,反而等于是给自己添堵。
2、使用Minxin的话,而Minxin的本质是对象合并,如果名称重复的话,会覆盖,容易出现问题。

吸收了React中Hook的优点,setup诞生,主要就是解决这方面的问题,逻辑复用解决了,接着自然而然诞生了组合式写法。从而让Vue框架整体进了一大步,不再局限于只能建立小型网站了,完全可以胜任大型项目。

说句比较现实的话,很多人知道它,但不太会用这玩意儿或者滥用。。。

Suspense组件

我们知道Vue中的生命周期,是不会阻塞组件执行顺序的,它们只是钩子函数。
而Suspense跟setup搭配使用,可以阻塞组件的渲染的。
现在前端中大量存在异步,虽然Suspense还在试验阶段,但这个还是很值得看好的。
很适合组装异步组件以及一些逻辑问题。

能很多人都不知道这玩意儿,压根儿并不知道页面阻塞问题。。。

Teleport组件

在此出现之前,所有的元素都是在app元素容器里面的,想把某些元素放在这个容器之外,有点麻烦,有了Teleport这个组件,会解决很多这方面问题。

四、最后

最近一段时间可以说是极其极其地危险。流感病毒、新冠病毒,好像又出来了个骆驼病毒等。大家注意防护!
但还是不小心感染了,那只能凉拌了。。。但也别灰心,大概一周,就能康复,而且会几个月内不会再此感染。

有关高级前端进阶(七)的更多相关文章

  1. ruby - 高级语言是否使用数据结构? - 2

    我目前还在上学,正在上一门关于用C++实现数据结构的类(class)。在业余时间,我喜欢使用“高级”语言(主要是Ruby和一些c#)进行编程。既然这些高级语言为你管理内存,你会用数据结构做什么?我可以理解对队列和堆栈的需求,但是您需要在Ruby中使用二叉树吗?还是2-3-4树?为什么?谢谢。 最佳答案 Sosincethesehigherlevellanguagesmanagethememoryforyou,whatwouldyouusedatastructuresfor?使用数据结构的主要原因与垃圾收集无关。但它是以某种方式有效的

  2. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中,我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如,如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  3. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件,需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法,似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗? 最佳答案 基于Jekyll源代码,无法在转换器中检索YAML前端内容。根据您的情况,我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性,以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项,您可以更改Convert

  4. 前端实现文件上传(点击+拖拽) - 2

    一、简介之前在Vue项目中使用过element的上传组件,实现了点击上传+拖拽上传的两种上传功能。然后我就在想是否可以通过原生的html+js来实现文件的点击上传和拖拽上传,说干就干。首先是点击获取上传文件自然没的说,只需要借助input标签即可,但原生的点击上传按钮,实在是过于简陋,所以我的想法是通过一个div,模拟成上传按钮,然后监听其点击事件,通过input.click()去模拟点击真正的上传元素。然后是拖拽获取上传文件,这个稍有难度,我的想法是通过HTML5新增的drag拖放API+dataTransfer来实现文件的拖拽获取,但是由于是html5新增的,所以可能在某些低版本IE浏览器

  5. 教你如何使用vercel服务免费部署前端项目和serverless api - 2

    一、介绍一下vercelvercel是一个站点托管平台,提供CDN加速,同类的平台有Netlify和GithubPages,相比之下,vercel国内的访问速度更快,并且提供Production环境和development环境,对于项目开发非常的有用的,并且支持持续集成,一次push或者一次PR会自动化构建发布,发布在development环境,都会生成不一样的链接可供预览。但是vercel只是针对个人用户免费,teams是收费的首先vercel零配置部署,第二访问速度比github-page好很多,并且构建很快,还是免费使用的,对于部署个人前端项目路、接口服务非常方便vercel类似于git

  6. 前端基于DOM或者Canvas实现页面水印 - 2

    🐱个人主页:不叫猫先生🙋‍♂️作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!💫系列专栏:vue3从入门到精通、TypeScript从入门到实践📢资料领取:前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流:博主建立了一个前端交流群,汇集了各路大神,一起交流学习,期待你的加入!(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引

  7. 「前端代码简洁之路」后台系统之详情页设计 - 2

    一、乱花迷人眼我就是被迷的那双眼。有时候需求来了,用熟悉的套路进行开发,确实很节省时间也能保证功能的稳定,但是这些开发的惯性无形中阻碍了我对技术的探索。我一直想改造详情页,解放重复功能开发的劳动力,但是详情页一眼望都是内容平铺,好像并没有什么可做的代码设计。后来我拨开繁花,发现详情页的组件化不必想的过于复杂,后台系统风格统一即可。因为大部分的详情页面是内容的展示,偶尔会出现少量的操作功能。将风格统一的部分进行组件化处理,操作功能使用回调函数放回当前页面,避免组件里做过多的业务逻辑。看,这不就成了。项目基于React框架开发的,所以代码写法是JSX语法,组件开发使用的hooks函数式组件,UI框

  8. ruby-on-rails - 在哪里可以找到高级 Ruby on Rails 教程? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。我正在创建Rails应用程序,想知道在哪里可以找到好的有关如何使用Rails的教程。我使用了这个我认为非常适合开始学习Rails的博客:http://fairleads.blogspot.com/2007/12/rails-20-and-scaffolding-step-by-step.html我刚刚开始使用Rails,现在想学习更高级的Rails。

  9. Elasticsearch7.8.0版本入门—— 分页查询文档(高级查询) - 2

    目录一、初始化文档数据二、分页查询文档2.1、概述2.2、示例一、初始化文档数据在Postman中,向ES服务器发POST请求:http://localhost:9200/user/_doc/1,请求体内容为:{"name":"zhangsan","age":20,"sex":"男"}在Postman中,向ES服务器发POST请求:http://localhost:9200/user/_doc/2,请求体内容为:{"name":"zhangsan1","age":21,"sex":"男"}在Postman中,向ES服务器发POST请求:http://localhost:9200/user/_d

  10. 《MySQL高级篇》九、数据库的设计规范 - 2

    文章目录1.为什么需要数据库设计2.范式2.1范式简介2.2范式都包括哪些2.3键和相关属性的概念2.4第一范式(1stNF)2.5第二范式(2ndNF)2.6第三范式(3rdNF)2.7小结3.反范式化3.1概述3.2应用举例3.3反范式的新问题3.4反范式的适用场景4.BCNF(巴斯范式)5.第四范式6.第五范式、域键范式7.实战案例7.1迭代1次:考虑1NF7.2迭代2次:考虑2NF7.3迭代3次:考虑3NF7.4反范式化:业务优先的原则8.ER模型8.1ER模型包括哪些要素?8.2关系的类型8.3建模分析8.4ER模型的细化8.5ER模型图转换成数据表9.数据表的设计原则10.数据库对

随机推荐