- 博客(102)
- 收藏
- 关注
RSS订阅
原创 深入了解JavaScript之面向对象（二）之 class
class是什么class是定义类的方法。ES6之前用构造函数的方式定义类，ES6引入了class。class是语法糖。class内部默认是严格模式。class不存在变量提升现象，必须要先声明后使用使用传统方式定义一个类function Point1(x,y){ this.x = x this.y = y}Point1.prototype.add = function...
2020-05-01 16:57:26
303
1
原创 深入了解JavaScript之面向对象（一）
一、什么是对象？对象就是一个封装了数据（属性）和方法的集合体。1、面向过程：注重解决问题的步骤，分析问题需要的每一步，实现函数依次调用。2、面向对象：是一种程序设计思想，将数据和处理数据的程序封装到对象中。3、面向对象的特性：抽象，继承，封装，多态。优点：提高代码的复用性及可维护性；...
2020-04-12 21:51:52
141
原创 css页面搭建案例
案例1:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
2024-03-28 18:56:15
787
转载 利用padding-top/padding-bottom百分比，进行占位和高度自适应
但是有一个问题，假如我们想要设置max-width的话，在上面样式的基础上，为.item添加max-width 是不起作用的，原因max-width只有在内容撑开高度的时候才起作用，而.item并不是被内容撑开的，为了解决这个问题，还可以使用伪类元素:after，:before，修改之后的样式如下。而且，对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处啦。这样就实现了我们想要的效果了。
2024-03-28 17:22:16
415
转载 JS中的“&&”与“&”和“||”“|”有什么区别？
31|2 结果为31 31的二进制为11111，2的二进制为10 11111|00010的结果为11111，即31。只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值；只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值；只要“||”前面为false，不管“||”后面是true还是false，都返回“||”后面的值。只要“||”前面为true，不管“||”后面是true还是false，都返回“||”前面的值。
2023-11-30 10:44:08
505
原创 css中重难点整理(vertical-align)
css最难懂部分就是属性值auto的理解、vertical-align和line-height的关系以及BFC是什么。
2023-03-02 19:24:18
2309
原创 外边距合并与塌陷
子元素的margin-top会作用再父元素上。结果：最终两者距离为margin的最大值。结果：导致父元素一起往下移动。，上下的margin会合并。
2022-11-05 19:22:05
242
原创 CSS中的BFC详解
第三条提供了布局的一种思路：左边盒子宽度固定，右边盒子宽度占满剩余的宽度，左边设置浮动，右边设置overflow：hidden即可实现。或者三栏布局，两边固定中间占满宽度，也是同样方法左右设置浮动，中间设置overflow:hidden;3、阻止元素被浮动元素覆盖。
2022-10-23 23:05:15
223
原创 基础知识补充（2022）
1、清除浮动本质是？清除浮动的本质是清除浮动元素脱离标准流造成的影响。2、清除浮动的策略是？闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。3、额外标签法？隔墙法，就是在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式。实际工作可能会遇到，但是不常用。......
2022-07-30 23:03:54
374
原创 JavaScript高级（2）——继承
1、原型继承function Person (name, age) { this.type = 'human' this.name = name this.age = age}Person.prototype.sayName = function () { console.log('hello ' + this.name)}function Student (name, age) { Person.call(this, name, age)}// 利用原型的特性实现继
2022-04-12 17:13:59
889
原创 JavaScript高级（1）——原型、原型链、constructor
一、创建对象的方法1、直接通过new Object()创建var person = new Object()person.name = 'Jack'person.age = 18person.sayName = function () { console.log(this.name)}2、对象字面量方式创建var person = { name: 'Jack', age: 18, sayName: function () { console.log(this.na
2022-04-10 14:19:59
293
转载 jQuery项目代码结构划分
一般使用jQuery结合js进行项目开发前，需要将项目的逻辑代码结构进行整理和划分，以此避免开发后期代码结构混乱。我一般的代码结构划分如下：整个js以对象的形式进行封装，数据和方法划分得很清晰，初始化应该做什么都很明白。而其他功能性的方法也可以定义在对象里面，在其他方法体里调用。这里对主要的三部分进行说明。1、获取页面DOM元素和初始化数据应该在项目初始化时讲用到的DOM都获取和定义好，为下面的调用做好准备。而数据也是一开始就应该请求和初始化好。var myTab = { initD
2022-03-25 10:06:52
297
转载 JS中的“&&”与“&”和“||”“|”有什么区别？
在JavaScript中“&&”和“||”是逻辑运算符；“&”和“|”是位运算符。四个运算符主要区别是运算方法不一样：1、JavaScript中的位运算符：“&”运算方法：两个数值的个位分别相与，同时为1才得1，只要一个为0就为0。举个例子：31&2 结果为2理由：31的二进制为11111，2的二进制为10 11111&00010的结果为00010，即2控制台运行结果：2、JavaScript中的位运算符：“|”运算方法：两个位只要有
2022-03-01 16:14:20
5467
原创 CSS深入理解之vertical-align
一、了解vertical-align支持的属性值以及组成vertical-align的各类属性值vertical-align的属性值可以归为以下4类：线类，如 baseline(默认值)、top、middle、bottom；文本类，如 text-top、text-bottom；上标下标类，如 sub、super；数值百分比类，如 10px、1em、5%；数值百分比类：其实属于两大类，数值类和百分比类。合在一起是因为它们有很多共性，都带数字；都支持负值；行为表现一致（在baseline对齐基
2022-02-13 19:26:07
1195
原创 CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。一、line-height的定义line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。定义三问：什么是基线？为何是基线？需要两行？如图红色线即为基线基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线）第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已
2022-02-12 21:34:40
15342
转载 IntersectionObserver root 不兼容导致lazyload失效
https://blog.csdn.net/weixin_30730053/article/details/97558142
2021-10-28 20:53:26
447
转载 [Web]动态插入的 script 脚本默认是 async 异步执行
此文转载自：传送门为了方便访问，所以加上自己的一些理解后转载。https://blog.csdn.net/qq_21265915/article/details/110677505
2021-10-26 10:03:59
139
转载 [前端开发]--分享个人习惯的命名方式
把一件平凡的事情做好，很平凡。把一件平凡的事情坚持的做好，很不平凡。1.前言如果说计算机科学只存在两个难题：缓存失效和命名。那么我就觉得命名的难点只有两个：词汇量和坚持贯彻执行制定的规范。最近在知乎上看到这个：作为程序员，有没有让你感到既无语又崩溃的程序命名？ 。顿时感慨万千，因为命名对于程序员来说是就是一个难题，有时候因为命名，可能会引起别人的误导，疑惑等，对开发效率，项目的质量影响可大可小。今天，也分享下最近自己在使用的命名习惯，当然只是个人习惯。更希望能在评论区看到大家推荐的命名方式，互相学.
2021-10-20 16:04:57
257
转载 WEB前端命名规范
一、规范目的1.1 概述为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档.二、文件规范2.1 文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排
2021-10-14 15:29:49
86
转载 CSS命名规范——BEM思想（非常赞的规范）
人们问我最多的问题之一是在CSS类名中“–”和“__”是什么意思？它们的出现是源于BEM和Nicolas Gallagher…BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。重要的是要注意，我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的。这篇
2021-10-14 14:40:21
315
转载 项目中那会用到单例模式_手把手教你项目中使用：JavaScript设计模式
https://blog.csdn.net/weixin_29016865/article/details/112736425
2021-08-13 09:34:14
77
转载 毕业后的五年拉开大家差距的原因在哪里？
有人工作，有人继续上学，大家千万不要错过这篇文章，能看到这篇文章也是一种幸运，真的受益匪浅，对我有很大启迪，这篇文章将会改变我的一生，真的太好了，希望与有缘人分享，也希望对有缘人有所帮助！看完之后有种“相见恨晚”的感觉，特别激动，希望大家好好的珍藏这篇文章，相信多年以后，再来看这篇文章，一定有不同的感觉。正如"打工皇帝"唐骏说：“我觉得有两种人不要跟别人争利益和价值回报。第一种人就是刚刚进入企业的人，头5年千万不要说你能不能多给我一点儿工资，最重要的是能在企业里学到什么，对发展是不是有利……”人总是从平
2021-08-09 14:22:37
293
转载 Javascript点击其他任意地方隐藏关闭DIV实例
代码如下，实现了点击input显示一个div层，当点击除input和div以外的地方的时候，隐藏div的功能。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>点击其它地方关闭DIV</title> </head> <body> <input type="text" value="" id="tf"/>
2021-07-26 11:14:49
1458
原创 关于工作日期格式的使用记录
统计页面使用的时间的数据对比function GetDateStr(days) { var dd = new Date(); dd.setDate(dd.getDate() - days + 1); var ret = []; if(days==1){ ret.push(dd.Format('WW, MM.dd')); dd.setDate(dd.getDate() - days);
2021-07-12 11:00:42
68
转载 CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content
前面的话一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为’fill-availabel’和’fit-content’。除此之外 ，还新增了更细粒度的’min-content’和’max-content’。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字[注意]IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀 fill-available width:fill-available表示撑满可用空间举例来说，页面中一
2021-06-30 11:09:22
754
原创 关于VUE的知识点记录
vue.js的两个核心是什么1、数据驱动：ViewModel，保证数据和视图的一致性在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据。2、组件系统：应用类UI可以看作全部是由组件树构成的。组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后（vue组件封装方法），就能高度的复用，提高代码的可重用性。一个页面/模块可以由多个组件所组成。声明式理解理解声明式（Declarative）渲染的最好方式，是对比命令
2021-06-29 14:59:55
115
转载 为什么.vue文件需要使用export default
因为项目要使用vue开发。学习了一段时间之后有几个问题一直困惑着我：（1）首先就是.vue结尾的文件为何需要export default，就像下面的代码一样？（2）为什么data需要return，我不用return，直接 data(){menu:MENU.data,poi:POILIST.data}不行吗？这两个问题问了几个人都不能给我合理的解释，求懂的兄弟们给个帮助，谢谢了。<script> import { POILIST, MENU } from '../config
2021-06-28 23:09:11
7510
2
原创 真正了解@font face里font-weight的作用
详细了解@font-face使用规则可以去看张鑫旭的文章真正了解CSS3背景下的@font face规则我们这里只重点强调@font-face里font-weight,font-style的用法，因为我在使用@font-face时对这一块的使用根本不清楚，感觉网上好多人忽略了这个非常重要的地方。@font face规则支持的CSS属性如下@font-face { font-family: 'example'; src: url(example.ttf); font-style: norma
2021-06-24 19:29:25
1891
转载 css设置overflow:hiden行内元素会发生偏移的现象
父级元素包含几个行内元素<div id="box"> <p> <span>按钮</span> <span>测试文字文字文字测试文字文字文字</span> <span>看这里</span> </p> </div> #box p{ width: 800px; font-size: 30px; } #box p span{
2021-06-17 09:21:58
887
转载 CSS等比例缩放的盒子
你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。可以看到把宽度设置为了原来的一半的同时，图片的高度并不是保持原来的大小，而是相应的也变成了原来的一半，使得图片仍能够保持原有的比例。同理把高度设成原来的一半也如此。作为对照，我们看看单独修改其他元素的宽和高会产生什么样的效果：上
2021-06-07 16:27:37
1191
原创 实际工作中插件使用记录
1、owl.carousel.js官网地址：owl.carousel.js启用触摸功能的jQuery插件，可让您创建漂亮的响应式轮播滑块。
2021-04-12 11:17:12
125
转载 “instanceof 的原理是什么“？大声告诉面试官，我知道！
在 JavaScript 中，我们通常用 typeof 判断类型，但是在判断引用类型的值时，常常会遇到一个问题：无论引用的是什么类型的对象，都会返回 "object"(当然还有 "function") 。有时候我们需要知道这个引用对象的类型是数组还是一个包装对象，这个时候 instanceof 就可以派上用场了。 废话不多说，先来几个例子热身一下，全部都知道同学，请点击右上角的关闭按钮；模模糊糊的同学，可以继续阅...
2021-04-09 09:16:29
152
原创 IntersectionObserver API 使用
IntersectionObserver APIIntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。...
2021-03-25 11:27:36
487
转载 常见浏览器内核以及相关面试题
ES6模块规范在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。浏览器默认模块化 script 里加入 “type=module”；export的用法在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取
2021-02-21 11:12:06
401
转载 JavaScript作用域详解
作用域 [[scope]]：每个javascript函数都是一个对象，对象中有些属性我们可以访问，比如name属性，但有些不可以，这些属性仅供javascript引擎存取，[[scope]]就是其中一个，指的就是我们所说的作用域，其中存储了执行期上下文的集合。作用域链：[[scope]]中所存储的执行期上下文的对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链查找变量：从作用域链的顶端依次向下查找function a(){ function b(){ var b = 234;
2021-02-14 19:10:01
609
转载 单线程JavaScript详解
以下文章转自笔者2年前写的一篇文章，重新学习了下，收获还是满满。若文章有误，烦请指出，积极改正，共同学习成长。原文最近在阅读《你不知道的JavaScript中卷》，当我看到第二部分介绍异步和回调函数的一些知识时，由于该书在第二部分1、2章对线程、事件循环的概念介绍的并非详细，因此引发了我的一系列思考。于是写下这篇小文章，记录自己对该知识点的学习和思考。javascript单线程由于JavaScript是单线程语言，因此，在一个进程上，只能运行一个线程，而不能多个线程同时运行。也就是说JavaScr
2021-02-14 17:36:12
449
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人