- 博客(187)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 丁鹿学堂：前端学习路线核心骨架
前端自学战线不宜拉的太长，内容不要贪多，迅速建立起自己的知识体系，在实战中不断完善，是快速有效的好方法。删繁就简三秋木，领异标新二月花！学习路线概况起来，就是三大基础，一个框架。防杠精：不是其它没提到的不用学，而是可以先学这些形成自己的骨干，再不断丰富自己的前端体系！三大基础，html，css ，javascript一个框架：vueHtml标签（排名分先后！！） div，ul, li ,a , p，input。这几个够了！（不信的话随便打开网上的静态页，看看是不是就用的这几个）css
2022-05-27 15:07:23
202
2
原创 丁鹿学堂：typescript是什么？为什么前端要学他？
在js语法中，不同的类型有属于自己的专门的属性和方法，如果数字类型的用了数组的api，就有可能会报错。也就是说他是在js的基础上，进行了一些"增强"，可以让js的语言更规范，更容易维护。所以，类型其实是非常重要的，确定的类型可让编译器和我们的ide更好的提示代码，发现错误，提升代码的质量和写代码的效率。比如，我们说的number类型，就是数字类型，1，2,456，这些都是一个类型，他们的特征就是可以参与数学运算。如果是比较小的，个人的项目，不建议使用ts，除非是为了学习ts而写的小demo。
2023-08-25 09:44:25
213
原创 丁鹿学堂：前端学习进阶指南之react入门（react在html中使用数据绑定和修改）
在vue，react，angular之前，jquery是被使用最多的js库。声明式的特点是只需要维护自己的状态，当状态发生改变的时候，react可以根据最新的状态自动去渲染UI界面。vue框架，很多灵感来自于angular和react，包括vue3的很多新特性，也是借鉴了react。声明式编程是前端开发目前的趋势，包括vue，react，flutter，都是声明式的。需要注意的是，一个react优秀开发的特点是可以合理的进行组件的划分和设计。很多人想着跳过js的学习，直接上手框架，是不可行的。
2023-07-31 21:11:04
900
原创 丁鹿学堂：前端学习进阶指南之react入门
在vue，react，angular之前，jquery是被使用最多的js库。声明式的特点是只需要维护自己的状态，当状态发生改变的时候，react可以根据最新的状态自动去渲染UI界面。vue框架，很多灵感来自于angular和react，包括vue3的很多新特性，也是借鉴了react。声明式编程是前端开发目前的趋势，包括vue，react，flutter，都是声明式的。需要注意的是，一个react优秀开发的特点是可以合理的进行组件的划分和设计。很多人想着跳过js的学习，直接上手框架，是不可行的。
2023-05-25 18:20:39
739
原创 丁鹿学堂：2023前端培训学习，vue3中data详解
在vue3中，data返回的对象会被vue3代理，所以data中的数据都是响应式的。需要注意的是，数据要在data函数中作为对象返回才可以。
2023-05-19 11:36:44
536
原创 丁鹿学堂：2023前端学习指南之vue3的数据响应式原理总结
get方法有4个参数，第一个是target，是被代理的对象obj，第二个是修改的属性名，第三个是修改指定的属性值。vue代理以后，当我们通过代理去读取属性时，在返回值之前，vue会进行一些跟踪操作，在vue中是track函数，它会记录使用数据的元素。get方法有3个参数，第一个是target，是被代理的对象obj，第二个是读取的属性名，第三个是proxy代理对象。如果不设置get和set，不会做任何操作，如果设置了get和set，读取和设置属性的时候，会调用这些方法。在vue3中，使用的是代理模式。
2023-05-16 18:56:12
332
原创 丁鹿学堂：vue的脚手架项目基础入门和单文件代码分析
在实际开发中，我们都是通过脚手架创建vue项目的。默认安装了node，yarn，为了学习，我们选择最简单的培训，一路下来都选no2 创建项目以后，只是搭起了架子，需要再安装依赖，直接yarn即可安装依赖。yarn dev。
2023-05-13 12:21:36
368
原创 丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中，template模版中的html代码，并不能直接在网页中执行，而是会在项目运行时，在浏览器中被编译为js 的函数去执行。问题：在template模版中写html，体验很差，智能提示都不能用。解决：使用vue的单文件组件。vue中的单文件组件，后缀是.vue。
2023-05-10 13:45:03
334
原创 丁鹿学堂：前端vue3入门学习之组件化思想理解和实战demo
有人说了，用vite了还手动配置，不是脱裤子放屁吗？我们手动配置，式为了更好的理解vite脚手架的原理。注意，这里script引入的js ，要加上type=“module”默认安装了nodeJS环境，使用yarn，比npm更好用。最后，运行yarn dev 即可运行成功项目。我们熟悉一下这个过程，可以更了解。配置package.json。使用yarn按钻过vite。创建index.html。使用yarn初始化项目。
2023-05-01 18:02:12
91
原创 丁鹿学堂：使用vite手动构建vue项目的注意事项和步骤总结
有人说了，用vite了还手动配置，不是脱裤子放屁吗？我们手动配置，式为了更好的理解vite脚手架的原理。注意，这里script引入的js ，要加上type=“module”默认安装了nodeJS环境，使用yarn，比npm更好用。最后，运行yarn dev 即可运行成功项目。我们熟悉一下这个过程，可以更了解。配置package.json。使用yarn按钻过vite。创建index.html。使用yarn初始化项目。
2023-04-27 11:59:20
444
原创 丁鹿学堂：2023前端开发vue3入门指南（vu3视图自动绑定案例解析）
传统的实现这个需求，我们需要获取button和span，通过事件去记录点击次数，并且修改span的innerHTML。vue3中data中的数据，会自动和使用它的视图绑定，数据发生变化时视图会自动更细，无需我们手动操作dom。1如果在 在组件对象中通过templeate属性去指定了内容，则根元素中的所有内容都会被替换。2 虽然定义模板的方法有三种，但是我们通常使用在组件中的template属性去指定。3 通过组件的render() 直接渲染，此方法只在一些特殊情况下使用，了解即可。
2023-04-25 18:27:54
403
原创 丁鹿学堂：2023最新vue3学习指南（vue3最简单demo）
1 我们没有在html中直接写代码，而是通过vue自动生成组件，挂载到页面上显示。2双花括号是vue提供的语法，注意和我们js中的模板字符串区分，他们是不一样的。2 总结步骤：创建组件→组件生成实例→虚拟dom（vue自动完成）→挂载页面。3 组件生成实例 ，vue的createApp方法。data是一个方法，需要一个对象作为返回值。在模板中，可以直接使用访问data返回的数据。在vue3中，组件可以理解为js对象。组件化的思想要始终贯穿vue的开发。返回对象的属性，会自动添加到实例。
2023-04-23 13:53:51
459
原创 丁鹿学堂：2023最新vue3学习指南（cdn方式引入vue3的使用详解）
1 我们没有在html中直接写代码，而是通过vue自动生成组件，挂载到页面上显示。2双花括号是vue提供的语法，注意和我们js中的模板字符串区分，他们是不一样的。2 总结步骤：创建组件→组件生成实例→虚拟dom（vue自动完成）→挂载页面。3 组件生成实例 ，vue的createApp方法。data是一个方法，需要一个对象作为返回值。在模板中，可以直接使用访问data返回的数据。在vue3中，组件可以理解为js对象。组件化的思想要始终贯穿vue的开发。返回对象的属性，会自动添加到实例。
2023-04-22 18:42:57
1865
原创 丁鹿学堂：2023前端开发最新vue3学习教程总结分享（vue3简介）
1 获取文本，2 创建h1标签，3 给h1标签设置innerHTML插入内容，4 获取body，并且把创建的h1放入body。比如，有的老项目是用jquery，新的功能也可以局部引入vue去实现。通俗易懂的话，就是在前后端分离的开发场景下，服务器只提供数据（json数据），前端负责获取数据以后渲染成各种页面。老项目可以用，新项目可以用，大项目可以用，小项目也可以用，灵活多变。组件化的好处是把网页进行了细分，不同的功能组成一个一个组件，再组合成网页。传统的web开发，划分的标准就是一个一个的页面。
2023-04-19 20:59:36
408
原创 丁鹿学堂：前端面试指南之网络传输加密内容总结
1 DES加密 1970年，IBM提出的对称加密算法，但是它可以暴力破解2 AES 2001年美国国家标准与技术研究院发布的对称加密算法3 RSA非对称加密，1977年发布的非对称加密。
2023-04-18 18:30:24
310
原创 丁鹿学堂：前端开发必会http知识总结之http头信息详解
Accept-Encoding是建议服务端发送哪种压缩的算法，最常见的就是 deflat，gzip。需要注意的是，如果是通过node或者其他非浏览器发送的请求，是没有user-Agent信息的。它的最大作用是用户行为分析。origin头一般是不能去修改的，浏览器基于安全考虑会自动带上。可以用它来进行反爬虫，因为一些爬虫程序是不太维护refer的。他是一种协商性质的类型，建议服务端返回什么类型的类体。如果你返回的是word类型，浏览器就会直接帮你下载。如果你返回的是pdf的类型，浏览器可能就会直接预览。
2023-04-12 14:22:31
544
原创 丁鹿学堂：前端http面试总结，状态码详解
get： 从服务器获取资源post：在服务器创建资源put：在服务器修改资源delete：在服务器删除资源注意：post和put的最大区别，在于put具有幂等性。比如你调用post10次，他会创造10个资源，在服务器产生的影响是不一样的。而put，调用10次，只要请求是一样的，那么他在服务器产生的影响是一样的。
2023-04-07 20:01:27
245
原创 丁鹿学堂：前端要学习的http知识总结汇总（一）
http协议的内容已经成为前端必须要掌握的理论知识，也是我们面试的重点和工作中需要经常接触的的东西。http协议，全称超文本传输协议（Hyper Text Transfer Protocol）它是用来处理客户端和服务端之间的通信它的核心设计思想非常简单，就是http请求和http返回一开始设计出来就是用于网页，json，xml，提交表单这些功能的支持。
2023-03-30 09:11:08
212
原创 丁鹿学堂：前端进阶学习基础夯实之DNS和CDN了解
CDN (全称 Content Delivery Network)，即内容分发网络CDN 就是一个基于地理位置的分布式代理服务器/数据中心。它会根据用户位置分配最近的资源。cdn的实现过程，当用户输入一个网址，浏览器会检查这个网址上所有资源的请求，会有很多，比如css，js。以js请求为例，首先会做dns查询，查询这个js文件所在的ip地址。通常一个cdn会返回一个cname记录，类似于一个别名。浏览器拿到这个别名之后，再去找一个cdn智能服务ip地址。
2023-03-23 09:17:47
157
原创 丁鹿学堂：前端开发要掌握的计算机基础之OSI七层模型总结
6 数据在一个个设备之间传输（不同的基站之间，网关，路由这些节点） （数据链路层）会话层提供的是管理会话的方法。5 数据微观层面，被封成一个一个的小包从主机（手机）传输到服务器（网络层）1小明发送微信，输入的内容被微信存储成自己定义的协议格式（应用层）3 微信客户端（手机里的微信app）建立到服务器的链接（ 会话层）2 数据在微信内部转换成传输的格式（加密，压缩等等）（展示层）实际上，现在流行的TCP/IP协议，都是受到OSI的影响的。提供流控制，保证速率的控制，同步发送者和接收者的同步速率。
2023-03-10 07:42:28
91
原创 丁鹿学堂：前端学习进阶设计模式学习之桥接模式
思想方法类似于前面说过的建造者模式。都是提取，拆分再组合。但是建造者模式关注的是对象的创建，而桥接模式更关注的是代码的优化。通过把代码中变化部分和不变的部分分离开，然后再桥接在一起。后续如果有多维度的改变，也可以非常方便的添加功能或者重构。享元模式，就是当我们观察到我们的对象或者代码块，存在多个比较类似的重复的代码。我们把相同的部分抽取出来，封装成一个类或者方法，再把它桥接回去。创建一组按钮菜单，根据不同的选中显示不同的颜色（移入和移出）
2023-02-23 14:50:33
73
原创 丁鹿学堂：前端设计模式学习之单例模式和享元模式
第二次再new调用的时候，store.install 已经存在（就是第一次new调用的实例化对象），则直接返回的就是这个对象的指向。享元模式就是当我们总结出我们的对象或者代码块，存在多个比较相近的内容，我们可以把相同的部分保留在类中，不同的部分提取出来作为公用的一个数据。假设我们有很多种不同提示文字的弹窗，但是他们的样式和行为都是相同的，那么我们就没有必要针对不同的文字提示新建那么多弹窗的对象。需求：项目中有一个全局的数据存储，这个存储只能有一个，否则会造成数据不同步的问题。
2023-02-01 17:10:37
249
原创 丁鹿学堂：前端设计模式之建造者模式详解
我们通过按照不同的功能拆分成不同的模块，然后再组合再一起，保持模块之间的低耦合，方便我们进行高效的编程。2 不同的类有不同的方法，比如html的样式设置，字体的颜色大小，状态的保存，都分别在不同的类上实现。一个比较复杂的功能经过拆分成独立的小模块再重新组合起来。所以适合使用建造者模式。需求：我们写一个编辑器，这个编辑器初始化的时候，需要配置大量的参数，而且内部功能很多。1 不同的功能创建不同的类：初始化html的类，字体设置的类，修改状态的类。建造者模式，就是把复杂的功能拆分成独立的类，最后再组合起来。
2023-01-13 19:22:00
535
原创 丁鹿学堂：代码示例详解设计模式（工厂模式）
如果是new调用的，那么this 的instanceof是pop，我们就手动new 调用对应的构造函数。这样，外部只需要调用我的工厂函数即可，而不用关心我要具体用哪个构造函数去new实例化一个对象。不够健壮，如果用户不是直接调用pop，而是通过new 的方法调用pop，就会出现问题。需求：弹窗需求,弹窗类型有多种，有不同的样式和内容。如果不是通过new调用的，我们转为new调用该函数。1我们先判断用户是否是new调用的，做相应的处理。常规做法，根据不同的需求，创建不同的实例。
2023-01-11 18:17:25
294
原创 丁鹿学堂：前端封装对象常用3种设计模式介绍
工厂模式的使用场景就是当某一个对象需要经常创建的时候，我们就考虑使用工厂模式了。当要创建单个，比较复杂庞大的对象的时候，考虑使用建造者模式。比如前段开发中如果要创建一个复杂的轮播图，有各种交互效果，这个时候就可以考虑使用建造者模式去创建。或者项目中的弹窗有很多，就可以使用工厂模式。套路：通过定义一个方法，使用时，只能通过定义的这个方法获取到存在内部的同一实例化对象。套路：把一个复杂的类的各个部分，拆分成独立的类，然后再最终的一个类去再次组合。套路：写一个方法，只需要调用这个方法，就能拿到我们想要的对象。
2023-01-09 11:50:16
237
原创 丁鹿学堂：前端设计模式分享之设计模式的分类介绍
1 工厂模式构建一个创建对象的工厂，告诉这个工厂我们要什么对象，这个工厂就会把对应的对象返回给我们。工厂模式适用于大量的创建对象的场景。2 单例模式怎么去设计我们的代码，保证我们全局某个特定的实例化对象只能有一个。3 建造者模式适用于创造复杂的对象，精细化的去组合一个对象出来4 原型模式这个大家应该比较熟悉，其实就是js中的原型链。他的意义就是通过定义一个原型，后面创建的对象都依赖于这个原型，共用它上面的属性和方法。上面的4种设计模式，都是去指导帮助我们更好的创建对象的。1 外观模式。
2022-12-31 15:36:16
546
9
原创 丁鹿学堂：重学js的设计模式，彻底掌握（一）
这六大设计原则，完全可以作为我们写代码和开发过程中的指导原则。如果能了解熟悉这六大设计原则，在学习设计模式的时候，也更能体会到不同设计模式的产生原因和解决什么问题。
2022-11-19 19:11:43
475
原创 丁鹿学堂：前端异步进阶之Rxjs的使用
这个数据集合是一个统称，在代码中可以表现为数组，也可以是一个树形结构，也可以是一个单向的链表。迭代器的作用就是提供一个通用的接口，让使用者不用去关心这个数据集合的具体实现方式。简单跟常规的异步操作的情况下，我们使用promise或者async 和await就足够了，而且相对来说更普及，大家更熟悉，利于代码的维护。如果有大量的异步数据的更新，而且这些的异步更新之间还有相互依赖的关系的情况下，我们可以使用RxJS结合promise。最早是微软的c#，我们前端关注的是js余元，就是RxJS。
2022-11-15 19:31:14
461
原创 丁鹿学堂：前端进阶分享之webworker知识总结
我们需要注意的几点，一个是worker的js环境也支持xmlHttpRequest，可以独立发送网络请求。在2009年的时候，火狐浏览器第一个支持了webworker，在2012年的ie10也实现了webworker，2012年，所有的主流浏览器都已经支持了webworker。这样，一些高延时的任务，就可以交给webworker去执行，主线程负责UI交互，这样主线程就不会被阻塞。但是，随着计算机计算能力的增强，尤其是多核心的CPU的普及，单线程的弊端，就是没有办法充分发挥计算机的能力。
2022-11-11 18:51:00
530
原创 丁鹿学堂：css预处理器之less学习（一）
less是比较好用的css预处理语言。less增加了很多好用的新特性。常用的有变量，混入，嵌套，计算等我们要注意的是，less不管是在服务器还是在浏览器中，都不能直接被使用，而是要编译成css才能运行。less文件是以.less结尾的。
2022-11-05 18:39:43
360
原创 丁鹿学堂：前端开发基础知识之像素详解
css作为一种样式语言，如果项目比较大的话，会有很多冗余，也不利于维护。为了解决这个问题，发明了css预处理器css预处理器是有自己独特的一套语法，它更高级，并且写完以后可以编译成css语言。市面上有很多css预处理器，都有自己独特的一套语法，会增加一些css不具备的好用的特性。但是所有的css预处理器语言，最终都会转化成css语言，因为浏览器对于样式来说，只识别css语言。
2022-11-04 22:48:13
388
原创 丁鹿学堂：移动端开发之css常用单位总结
比如在不同的屏幕尺寸下，只需要修改html的font-size，所有使用rem的单位都会相应改变。我们使用css的长度单位，最常用的是px。在实际生活中，这样的单位有很多，比如m，cm等，但是在前端代码中，我们只有一个绝对长度单位，就是px（像素）em相对的是本身的font-size，如果自己没有设置font-size，会相当于父元素的font-size。使用相对单位的好处是，就在不同的页面上都有相对一样的布局。绝对长度单位不受其他任何东西的影响，在不同的分辨率下，它也会保持不同的大小。
2022-11-04 00:44:31
273
2
原创 丁鹿学堂：前端面试总结分享之手写promise（完结）
第一步应该检测then方法传过来的参数是不是一个函数，如果是函数，我们就把他添加到chain里面, 成功和失败的里面去添加一个回调。相当于说我们有两个容器，一个是成功的，一个是失败的。注意，我们的fn不是说添加到成功的回调，而是在成功的回调里去调用。第二步是自定义的Promise，借助container的一些方法去实现了js中的Promise。这里的fn其实就是then方法里面的参数函数，所以我们要把参数传递给fn去执行。但是代码也要做相应的改造处理，即如果返回的是一个promise，我们应该怎么做。
2022-11-03 16:12:04
156
原创 丁鹿学堂：从零开始手写promise（二）
我们遍历这个数组，去获取container这个函数容器，得到的是两个外形一样的对象，但是其实他们是完全不一样的两个功能，一个是处理成功的，一个是处理失败的。list.add 就是一个语法糖，我们通过done或者fail的调用，去向容器中添加成功或者失败的回调函数，这里下标写死是没问题的，因为这个二维数组是我们定义的。protect 是绑定状态，成功和失败的回调才可以改变，所以不能直接绑定到返回的对象chain上。如果有状态，不管是成功还是失败，我们都往容器里去添加一个回调。我们定义一个Promise函数。
2022-11-02 18:13:24
247
原创 丁鹿学堂：前端面试手写系列之promise（一）
上次总结了promise A+ 规范，其实js中的promise只是实现了这个规范。就像js这个语言实现了es的规范一个道理。一个是add方法，可以添加函数到队列里，一个是statrup方法，它从工具函数里面拿到函数去依次执行。stopOnFalse：如果有一个回调函数返回false，则后续的函数不执行。带着大家一起手写promise，让我们可以更透彻的理解promise。今天分享第一步，实现一个工具函数，为后面手写promise服务。因为resove本身也是从函数队列里去拿出来函数执行。
2022-11-01 00:22:57
147
原创 丁鹿学堂：前端面试之promise A + 规范
在编程中，用更简练的语言表达复杂的含义。在得到大家默认的广泛的认可的时候，就是约定俗成的时候，可以提升交流的效率。
2022-10-29 20:43:47
441
原创 丁鹿学堂：js进阶之异步解决方案：generator迭代器
协程是一种基于线程之上，但又比线程更加轻量级的存在。对内核来说具有不可见性。一个进程可以有多个线程。一个线程可以有多个协程。generator就是生成器函数。是协程在es6中的一个实现。它最大的特征就是可以交出函数的执行权。generator函数的执行和传统的不一样，它的返回值是一个迭代器对象。简单理解就是返回值是一个对象，有两个属性，一个是value，一个是done，vlaue就是返回的值，done就是是不是可以继续迭代。generator的写法：1.generator相对于普通函数在function后面
2022-10-28 22:20:43
676
原创 丁鹿学堂：promise深入解读（一）
promise解决了回调地狱难维护的问题，也解决了控制转移的问题。如果没有promise，我们就必须要很谨慎去使用涉及到异步的第三方库的代码，必须要想办法解决状态跟踪的问题。有了promise之后，他能使得我们重新获取代码的控制权。我们在遵循promise机制的代码中不需要担心可靠性问题。
2022-10-28 10:27:14
163
原创 丁鹿学堂：前端异步解决方案之观察者模式
在观察者模式里面就是被观察者，它只需要维护一套观察者的集合，将有关状态的任何变更，自动通知给他们的watcher（观察者），这个设计是松耦合的。当对象之间存在一对多的依赖关系时，其中一个对象的状态发生改变，所有依赖它的对象都会收到通知，这就是观察者模式。上次分享了发布订阅模式，简单来说就是有一个对象，往里面push一个类型a和一个回调，就是订阅a。在发布订阅模式中，发布者和订阅者之间没有关系，他们通过消息中心去发布和订阅。观察者模式中有两个类，一个是目标对象，一个是观察者。s1:定义添加观察者的方法。
2022-10-27 14:33:09
497
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人