Web—第二阶段
文章平均质量分 89
CSS进阶+JS高级
Kong_十六
慢慢来,才是快。
展开
-
webpack 复习(六)常用扩展
常用插件clean-webpack-plugin:清楚输出目录(output 目录)html-webpack-plugin:自动生成 html 文件copy-webpack-plugin:复制静态资源(图片、svg 等静态资源)普通文件处理file-loader:生成依赖的文件到输出目录,然后将模块文件设置为:导出一个路径;file-loader//file-loaderfunction loader(source){ // source:文件内容(图片内容 buffer) //原创 2022-04-10 18:55:10 · 1072 阅读 · 0 评论 -
webpack 复习(五)webpack plugins
plugins上篇笔记中,介绍了webpack loader 相关知识。本篇笔记续接上文,webpack 另外一个重点知识 —— plugins(插件)。作用同样的,需要先明确 plugins 的作用。loader 的功能定位是转换代码,而一些其他操作 loader 是无法完成的。故插件目的在于解决 loader 无法实现的其他事。比如:当 webpack 生成文件时,自动添加一个 README 文件;当 webpack 编译开始时,终端输出一些日志等;…换句话说就是,在 webpack原创 2022-04-07 18:58:36 · 635 阅读 · 0 评论 -
webpack 复习(四)webpack loader
1. loader 配置;2. loader 处理流程原创 2022-04-04 16:25:11 · 1438 阅读 · 0 评论 -
webpack 复习(二)配置文件
配置文件上一篇文章中有提到 webpack 的配置文件,其中有简单介绍一些。这篇文章来详细谈谈。webpack 的配置文件是一个 JavaScript 文件,名为 webpack.config.js,该 js 文件导出一个对象,该对象即是 webpack 配置的对象。webpack 是一个打包工具,它的作用是根据配置文件中的入口模块,进行模块的依赖分析,并不会运行源代码。如果要自定义 webpack 配置文件,需自行创建 webpack.config.js 文件进行配置。webpack 遵循原创 2022-03-27 18:35:19 · 1780 阅读 · 0 评论 -
webpack 复习(一)webpack编译结果分析
写在前面工作刚满一年,也停更了一年多。时间总是不等人的,一年的时间收获颇多,感想也颇多。怎么说呢,人大概就是这样吧,总是在当下幻想未来、怀念过去。走走停停,最后发现,现在就是最好的时刻。写写最近的感受吧,先提前提醒一下欧,有些感概(但是也不是特别伤感,是反省~~~~)。自己确实不是很自律,现在回头看,很后悔当初没有在合适的时间做合适的事情,虚度了不少光影。没办法啊,因为人总是懒惰的,惰性感很强啊。但是,不是还有句话叫:开始就不算晚,一切都还来得及。是的,一切都还来得及。2020 年疫情开始,现在已经原创 2022-03-21 22:43:26 · 730 阅读 · 0 评论 -
JS运动集合,封装便捷的功能函数
动画的原理匀速运动 // 1. 匀速运动 s = vt v不变 let btn = document.querySelector("button"); let div = document.querySelector(".box"); btn.onclick = function () { starMove(div, 300) }; // 运动的元素 运动到的位置 向后+ 还是向前原创 2020-07-20 11:18:11 · 160 阅读 · 0 评论 -
异步编程的实现 —— Promise
需要明白JavaScript是一门单线程语言,不支持多线程,是从上往下一行一行执行的同步任务,这就意味着没法使用多线程来同时处理多个任务,但是js中存在任务队列,当主程序执行完之后,会轮训任务队列依次执行,这也是我们学习的异步任务,使用Promise实现异步操作。同步:同一时间只能做一个任务;异步:同一时间做多个任务。比如:定时器就是异步任务,当程序解读到定时器时,不管定时的时间有多短,它都会被系统抛到任务队列中等侯,等到主程序任务执行完毕,任务队列会依次把定时器再抛回主程序执行。原创 2020-07-05 22:26:17 · 696 阅读 · 0 评论 -
JavaScript的语法糖 —— 类的实现
类的语法类的内部实现原理在类中设置对象的属性和方法定义类的静态属性和方法静态方法的使用案例:课程类批量操作 const lesson = [{ name: "js", price: 198 }, { name: "css", price: 82 }, { name: "html", price: 100原创 2020-07-03 19:35:33 · 551 阅读 · 0 评论 -
JavaScript 中继承合集
圣杯模式我的这篇文章——圣杯模式详细的写了整个过程,再次学习Object对象时,发现一个问题,就是子类继承了父类之后,实例化出来的对象的原型中constructor属性是可遍历的,假如我们使用 for of语句遍历对象,则会把 constructor 属性遍历出来,这样就不好了,这里更改一下 constructor 属性的设置。采取Object.defineProperty() 方法定义属性。Object.defineProperty(obj,atrr,cfigObj)obj :参数是设置属性的对原创 2020-07-01 15:46:10 · 192 阅读 · 2 评论 -
JavaScript 中特别的类型 —— RegExp类型 正则表达式
第一次接触正则表达是在上学期编译原理的课上,这个课里有讲正则表达的。当时就是随便听听,也了解一些,这几天学习了JavaScript中的正则表达,大概的内容都是一样的,具体有什么不同,暂时不知道哎,因为课上学的都忘记的差不多了(尴尬),目前记得的都是重新输入的知识,咯咯咯咯咯。正则表达在很多语言中都有,它是一个独立的存在。正则表达这个名字听起来很高级的样子,其他它简单来说就是匹配字符串,按照自定义的匹配模式去匹配符合匹配模式的字符。那什么叫匹配模式呢,就是检测字符的标准,比如检测字符串中是否含有abc字符串原创 2020-05-28 16:44:47 · 326 阅读 · 0 评论 -
JavaScript —— 理解深拷贝,封装深拷贝方法
深拷贝:一个变量复制另一个变量的内容,但两个变量之间相互不影响。用通俗的话说就是两个变量只是长的一样,但是不是同一个人。有深拷贝当然也就会有浅拷贝,浅拷贝比较简单,一个变量复制另一个变量的内容,这个变量是另一个变量的副本。其实俩变量都是同一个人,只是名字不同,有两个名字。深拷贝的主要应用在引用值的数据类型,像数组、对象的等。这里还牵扯到一个知识点,就是如何区分变量是数组对象还是对象。换句话需要判断变量是[ ]还是{ }。因为在JavaScript中的Array和Object都是对象。区分Array和O原创 2020-05-24 17:14:51 · 611 阅读 · 0 评论 -
JavaScript 之 继承 ,封装一个最佳的继承函数 —— 圣杯模式
今天的内容,与之前原型和原型链的知识有联系,可以看我的上一篇文章原型、原先链。文章里有详细的介绍。因为继承的学习是建立在这些知识的基础之上的。首先来说下为什么要用继承吧。当我们自定义构造函数并且实例化对象时,总会重复的书写相同的属性或者方法,这就让我们的代码高耦合了,简单来说就是简化程序优化代码。当对象用到相同的属性和方法时,只要继承过来就行了,若需要自己特有的属性方法再追加即可。这是我个人对为什么用继承的理解。也许是比较片面的,欢迎大家指正。原型链实现继承利用原型链来实现继承是传统方式的继承,主要原创 2020-05-21 11:16:40 · 294 阅读 · 0 评论 -
JavaScript中的原型、原型链、构造函数以及实例对象
其实原型我看了有一段时间了,也没有看很长时间,就是找一个下午的时间听听课,然后就感觉很懵,似懂非懂的,接着就自己想想,然后就还是懵。平时翻翻技术类的公众号或者CSDN上的文章也会涉及到原型的内容,加上前天我又看一一遍讲解,看的多了慢慢的就更熟悉更了解了。今天,下定决心要总结总结写写原型了。内容多少会有点问题,谅解谅解,毕竟是菜鸟的小白为了记录自己的学习过程。构造函数和实例对象构造函数也是一个函数,它与普通函数的区别就在于构造函数名首字母要大写。通过构造函数创建对象的过程叫对象的实例化,创建的对象是实例原创 2020-05-12 16:25:55 · 348 阅读 · 0 评论 -
jQuery案例 —— todoList待办事项列表
案例时间这个案例前几天就看了,一直没时间做,今天就把它做出来。这个案例是一个待办事项列表,可以记录自己当天需要做的事情,完成一件就画勾,要是不想要了就删除,可以很好的督促自己完成每天的学习任务啊。看下效果吧。当我第一次看到这个效果时,从局部出发,我的第一反应就是点击事件的删除和添加操作。但是看视频的时候老师做了需求分析,很仔细的分析了案例的效果,事实证明并没有我想的那么简单。确实是添加删除元素的操作,只是对象变了,不是父元素创造元素再添加元素的步骤,而是对存储的操作,最后把存储中的数据渲染到页面。第一原创 2020-05-10 16:51:41 · 1088 阅读 · 4 评论 -
JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程。今天就用js中的类实现一个小的功能,动态添加、删除标签页。emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能。案例说明js动态实现标签页的创建和删除。这个案例呢,要用类来实现,Tab就是本次案例的类。但在写之前需要来分析并抽象类的特征和行为,也就是对应的类的属性和方法。这里呢,我把元素的ID作为属性,增删改查的四...原创 2020-05-04 16:34:42 · 3705 阅读 · 1 评论 -
jquery之操作元素
前面学习了jQuery选择器以及jQuery动态效果的方法,今天来学习jQuery操作元素的一些知识,主要包括三个内容:属性操作、内容文本值操作以及元素的增删改查和遍历的操作。同样是学习一些方法的使用。 属性操作 固有属性 prop() 方法 —— 获取属性值prop(“属性名”); 更改属性值prop(“ 属性名 ”," 值")自定义属性 attr() 方法 ——获...原创 2020-04-12 13:35:31 · 199 阅读 · 0 评论 -
JavaScript中的构造函数的内部原理
我们JavaScript中创建对象的方法有三种方式,第一使用对象字面量创建对象;第二使用 new Object() 创建对象;第三我们自定义一个对象,使用new关键字创建对象。其实第二种方法和第三种方法本质上是相似,都是使用new关键字来创建对象,也就是对象实例化。但是,第二种方式是系统自带的构造函数,第三种就是自己可以定义一个构造器,实现自己的对象。内部原理构造函数的内部原理,...原创 2020-04-05 21:42:07 · 724 阅读 · 0 评论 -
浅析JS闭包 —— 与闭包的初次邂逅
写在前面第一次听闭包的时候,还是在刚决定学习前端的时候我同学加学习好伙伴告诉我的,那个时候感觉好高级啊,听不懂,懵懵的。在学习html和css时也会看到一些技术文章。在看的过程中也会碰到一些比较深入的文章,关于js的内容,我也浏览过写js闭包的文章,也是很认真的硬着头皮看了看。但是呢,发现还是一头雾水,读不懂它的含义,依然是感觉闭包到底是个什么东西,什么叫外部函数可以访问其他函数内部的变量。现...原创 2020-04-02 18:40:47 · 244 阅读 · 0 评论 -
今天明白了立即执行函数不是唯一的
立即执行函数立即执行函数是代码执行读到就立即执行,并且只执行一次,执行完毕后,立即销毁。所以,立即执行函数的一种初始化功能的函数。立即执行函数有两种形式,第一种是W3C推荐的写法。(function (){}())(function (){})()当代码执行到下面的语句时,会在控制台立即输出aaa、bbb,执行后会立即销毁。这就是立即执行函数。 (func...原创 2020-04-01 21:57:44 · 420 阅读 · 2 评论 -
深度解析JS中的作用域和作用域链的问题
写在前面当一个人开始认真过自己的生活时,就是最美好最幸福的时刻,要一直记得这种美好。今天呢,再来掰扯掰扯js中作用域和作用域链的问题,就是我偶然之间发现的一个宝藏老师,看了他对作用域和作用域链的解释,我又了解到了很多我之前不知道的知识。这个宝藏老师呢就是渡一教育的姬成老师,叫成哥吧。哈哈哈哈哈哈哈,就是在哔哩哔哩上面找到的,个人感觉成哥讲的知识点是很好理解的,讲授的知识对刚接触js语言的同...原创 2020-04-01 16:47:54 · 339 阅读 · 0 评论 -
如何解决图片在移动端清晰显示的问题
写在前面天气不错,风景不错,人也不错。日常生活的情趣则是人间烟火。安心在家呆着,不再焦虑、惆怅,静候佳音。该有的仪式感还是要有的。PC端中的图片直接放到移动端显示不清晰图片在PC端显示正常,同样的图片,直接放到移动端页面时,会出现模糊的状态,图片显示不清楚。为什么同样尺寸的图片在PC端和移动端清晰度不同,这里涉及的问题的是物理像素比,物理像素比就涉及到多倍图了。...原创 2020-03-24 21:15:42 · 3904 阅读 · 1 评论