自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(47)
  • 收藏
  • 关注

原创 IOS开发学习路线~

1. 学习视频地址:https://www.bilibili.com/video/BV1NJ411T78u?t=12 2. 大佬教程 :https://github.com/iOS-Swift-Developers/Swift 3.练手项目:https://github.com/jiachenmu/Swift-BanTang 2.

2021-05-12 11:13:29 291

原创 学习一下引用数据类型拷贝

对于引用数据类型,细分可以分为以下三个方面 赋值 浅拷贝 深拷贝 目录 赋值: 浅拷贝 Object.assign() 展开运算符... Array.prototype.slice() 深拷贝 总结 赋值: 只是改变指针的指向,例如,引用数据类型的赋值是对象保存在栈种的赋值,这样的化两个变量就都指向同一个对象,因此彼此之间的操作互有影响。 举个例子: var a = {}; var b = a; a.name = "ls"; console.log(a.name); ..

2020-12-18 19:28:13 429 1

原创 有关闭包问题的个人见解

闭包简单来说就是两个函数嵌套,函数a的内部有个函数b,函数b可以访问函数a内的变量,那么函数b就是闭包。 举个例子: function A(){ let a = 0; window.B = function (){ console.log(a) } } A(); B(); //0 闭包存在的意义就是让我们能够间接的访问函数内部变量。 之前面试遇到的一个问题,循环中用闭包解决var 定义函数问题 for (var i = 0 ; i < 10.

2020-12-18 17:34:55 245 1

原创 Webpack静态模块打包工具(介绍及简单打包)

webpack中文文档:https://www.webpackjs.com/ 1.概念

2020-12-15 15:44:57 523

原创 JS模块化开发

JS模块化开发总结 文章目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。 Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。 但是,ES6以前不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module

2020-11-24 13:39:06 211 1

原创 组件化开发中的常用的插槽(slot)元素

插槽官方文档

2020-10-11 15:43:59 584 4

原创 面试题:不知宽高的元素居中方法集合

  方法1:反向移动 position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);   方法2:flex布局 display:flex; align-items:center; justify-content:center;   方法3:四向定位   positi...

2020-08-05 22:56:33 207

转载 面试题:有关js内存泄漏问题总汇~

内存泄漏? 官方解释:内存泄漏(Memory Leak)是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。 通俗点就是指由于疏忽或者错误造成程序未能释放已经不再使用的内存,不再用到的内存却没有及时释放,从而造成内存上的浪费。 避免内存泄漏? 在局部作用域中,等函数执行完毕,变量就没有存在的必要了,垃圾回收机制很亏地做出判断并且回收,但是对于全局变量,很难判断什么时候不用这些变量,无法正常回收;所以,尽量少使用全局变量。在使用闭包的

2020-08-05 22:38:56 581

原创 面试官:怎样实现左右元素固定,中间元素自适应的三栏布局?总结8种~

常见的布局方式有: 浮动布局、Position定位、弹性(flex)布局、table布局、网格(grid)布局。 前提是左右宽度(假如左右宽度为100px),整个高度已知(假如高度为500px),中间宽度自适应。 1.浮动布局 float的实际初衷 仅仅使为了实现文字环绕问题。 float的感性认知: 包裹性: 收缩:元素应用了float后,宽度收缩,紧紧地包裹住内容(即元素的宽度收缩到元素内的内容的宽度大小 坚挺:原来没有高度,但元素应用了float后,元素的高度突然扩展到内容的高度.

2020-07-28 14:58:14 332

原创 Vue入门教程之Vue语法

1.Vue语法 <div id="#app"> {{msg}} </div> <script src = "vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ msg:"vue", }, methods:{ } }) &

2020-06-30 00:41:35 239 2

原创 Javascript 复习内容——运算符

++ -- a++ 先返回a的值 再执行a=a+1 ++a 先执行a=a+1 再返回a的值 --同理 && || && 如果两个操作数都不是布尔类型 如果两个值转换成布尔类型都是true 则返回第二个操作数 如果有一个操作数转换成布尔类型是false 则返回这个操作数 var b= "qwe" &&"asd" console.log(b) // asd...

2020-06-14 16:28:56 205

转载 CSS3改变滚动条样式

自定义滚动条实现 此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动) 3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) 4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。

2020-06-13 20:40:59 164

原创 CSS复习——选择器

派生选择器 也叫上下文选择器(CSS1),派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。 比如,我想规定li标签中的img图像大小 li img{ width: 20px; height: 10px; } id选择器 比如我要将div元素背景定位红色 <div id = "box", name = "aBox">我是一个盒子</div> #div{ backgr.

2020-06-12 15:15:53 212

原创 JavaScript实现鼠标滚轮事件——onmousewheel

通过滚轮改变div height bind()请点击参考之前文章 /*** * 滚轮调整div高度 */ var box = document.getElementById("box"); //为box绑定鼠标滚轮滚动事件 /** * 火狐中不适用 需要用DOMMouseScroll绑定滚动事件 * 该事件需要通道addElementListener()事件来绑定 * */ box.onmousewheel = function (event) { event = e.

2020-06-10 14:10:36 722

原创 javascript 定时器自定义函数,实现动画——移动元素位置

拿走直接用,兼容IE8及以下 getStyle请参考之前文章 function move(obj,target,speed,attr,callback) { clearInterval(obj.timer) //判断speed正负 //0-800移动 speed为正 // 800-0 speed为负] //当前位置 var current = parseInt(getStyle(obj, attr)); if (current &g

2020-06-10 14:06:47 274

原创 JavaScript定时器——setInterval()

介绍 * 如果希望程程序间隔一段事件执行 可以使用定时调用 * 定时器 * setInterval() * 定时调用 * 参数: * 1. 回调函数,该函数每隔一段时间被调用一次 * 2.每次调用间隔的时间 单位毫秒 * 返回值 * 返回一个number类型的数据 * 用来作为定时器的唯一标识 详细介绍请参考w3c手册 var count = document.getElementsByTagName("h1"); var numbe...

2020-06-10 14:02:26 256

原创 JavaScript 常用Browser BOM总结

BOM * BOM 浏览器对象模型 * 通过js操作浏览器 * 在BOM中为我们提供了一组对象,用来完成对浏览器的操作 * BOM对象 * window * 代表的使整个浏览器的窗口,同时window也是网页中的全局对象 * Navigator * 代表当前浏览器的信息,通过该对象能识别不同浏览器 * Location * 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页...

2020-06-10 13:55:45 424 1

原创 JavaScript自定义函数——bind()事件绑定

直接拿走,兼容IE8 /*** * 指定元素绑定响应函数 * @param obj 绑定事件的对象 * @param eventStr 事件字符串(不要on) * @param callBack 回调函数 */ function bind(obj, eventStr, callBack) { if (obj.addEventListener){ //大部分浏览器 obj.addEventListener(eventStr, call

2020-06-10 13:43:31 417

原创 JavaScript(十八)——HTML DOM ——拖拽

用鼠标拖动两方块 思路: 1. 获取两个div 2.将onmousedown onmousemove onmouse事件绑定在div上 /** * 拖拽 * onmouseup 鼠标按键被松开 * onmousedown 鼠标按钮被按下。 * onmousemove 鼠标被移动。 * */ var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); drag(bo...

2020-06-10 13:41:46 274

原创 跟我一起学JavaScript(十七)——自定义函数 改变元素CSS样式

代码直接拿走,复制粘贴都能用方便 /*** * 定义函数获取样式 * obj:要获取样式的元素 * name 要获取的样式名 String */ function getStyle(obj, name) { /* 单写getComputedStyle是属性,属性没找到返回undefined 但window.getComputedStyle是变量,浏览器没找到返回false */ if(window.getComputedSt

2020-06-10 11:28:30 291

原创 JavaScript(十六)——HTML DOM对象知识点(二)——键盘事件

键盘事件基础 * onkeydown 按键被按下 * 如果一直按一个按键不松手则事件连续触发 * onkeydown连续触发时,第一次和第二次之间间隔长一点 * 防止误操作发生 * * onkeyup 按键被松开 * * * 键盘事件一般会绑定到 能获取到焦点的按键 如,input 或document Internet Explorer 使用 event.keyCode 取回被按下的字符,而 Nets

2020-06-10 11:14:55 208

原创 JavaScript(十五)——HTML DOM 对象知识点(一)____div跟随鼠标移动

Event 想要实现div跟随鼠标移动 我们应该知道有关鼠标的event事件 onmousedown 当鼠标按下时发生 onmouseup 当鼠标松开时发生 onmousumove 当鼠标移动时时发生 onmouseout 当鼠标移出某元素时发生 onmouseover 当鼠标移动到某元素时发生 这里用的时onmousemove 当鼠标移动时div跟着动 首先我们需要一个div 需要绝对定位,代码如下(div id 为box) ...

2020-06-10 09:52:59 203

原创 JavaScript浅显易懂(十四)——包装类

* 基本数据类型 * Number null undefined String Boolean * 引用数据类型 * Object * * 三个包装类,通过包装类可以将基本数据类型的数据转化为对象 * String() 将基本数据类型字符串转换成String对象 * Number() 将基本数据类型数值转换成Number对象 * Boolean() 将基本数据类型布尔值转换成Boolean对象 var num = new Number(3); var str = new String("Hell..

2020-06-08 00:13:02 158 1

原创 苦肝JavaScript第三天 浅显易懂(十三)——Array数组去重

slice() 从数组中提取想要的元素 splice() 删除数组中指定元素 splice(start , deleteCount, items); 可以这么简单记参数 start:数组中的第几位 deleteCount:删除几个元素 items:需要添加的元素 short() 括号里面是个函数,函数返回值小于0则a排在b前面,即a与b的位置不变 大于0将a排在b的后面,即a...

2020-06-08 00:11:18 170

原创 记录学习JavaScript的第三天 浅显易懂(十二)——正则表达式——电子邮件

正则表达式之电子邮件合法性 思路和上一篇一样:上一篇文章 正则表达式之手机号合法性 我想到的电子邮件的规则如下,欢迎补充: * hello.javascript@abc.com.cn * * 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母 2-5位 .任意字母 2-5位 对应正则表达式:(不会的看我之前文章 点我点我!) \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[

2020-06-07 23:53:56 288

原创 记录学习JavaScript的第三天 浅显易懂(十二)——正则表达式——手机号是否合法测试

创建正则表达式检查手机号的合法性 思路:首先要想的是手机号的规则是什么,根据规则设计正则表达式。 * 手机号规则 * 1. 手机号总共11 位数字组成 * 2. 手机号以1开头 * 3. 手机号第二位为 3-9 任意数字 * 4. 手机号第三位以后为任意数字9个 正则表达式为:^1 [3-9] [0-9]{9}$ var phoneStr = "13567890123"; var phoneReg = /^1[3-9][0-

2020-06-07 23:46:27 243

原创 JavaScript浅显易懂(十一)——正则表达式

正则表达式 正则表达式 - 用于定义一些字符串的规则 计算机可以用正则表达式,来检查一个字符串是否符合规则 获取字符串中符合规则的内容提取出来 创建正则表达式 var 变量 = new RegExp("正则表达式", "匹配模式") var 变量 = /正则表达式/匹配模式 匹配模式可以是:i 忽略字母大小写 g 全局匹配模式 //这个正则表达式可以检查一个字符...

2020-06-07 23:38:54 185

原创 JavaScript浅显易懂(十)——onclick练习

不多说先上代码 很简单 适合新手练习 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ //清除默认样式 margin: 0; padding: 0; ..

2020-06-07 23:13:42 236

原创 JavaScript浅显易懂(九)——原型对象 prototype

JavaScript——prototype 我们所创建的每一个函数,解析器都会向函数中添加一个属性 prototype,这个属性对应着一个对象,这个对象就是我们所谓的原型对象。 如果函数作为普通函数调用prototype没有任何作用,当函数以构造函数调用时,他所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象 ,可以通过_proto_访问该属性。 原型对象就相当于一个公共区域,所有同一个类的实例都能访问这个原型对象 我们可以将对象中共有的内容同一设置到原型对象中,当我们访问对象的一个属

2020-06-07 09:45:51 222

原创 JavaScript浅显易懂(八)——在文档中创建并插入新的节点 createElement /querySelector/ insertBefore

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ColdPlay</title> </head> <body> <h1 id = "page-title">ColePlay</h1> <ul class="artist-list"> &.

2020-06-06 19:08:46 413

原创 JavaScript浅显易懂(七)——选择元素的方法(二) querySelector、queySelectorAll

querySelector querySelector()方法会返回找到的第一个元素 querySelectorAll querySelectorAll()方法会返回找到的所有元素 /* * var artistList = document.querySelector('.artist-list') * artistList.childNodes 获取所有artistList的子节点 * artistList,childElementCount 查看所有元素类型的子节点个数 * art

2020-06-06 18:59:58 431

原创 JavaScript浅显易懂(六)——选择元素的方法(一) getElementById、getElementsByTagName

getElementById getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。查找文档中的一个特定的元素最有效的方法。 getElementsByTagName getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就

2020-06-06 18:49:47 868

原创 努力学习JavaScript的第8个小时!浅显易懂(五)——文档树 DOM tree

DOM操作文档的接口 使用JavaScript可以更改网页文档的结构、样式和内容,不过我们并不能直接的使用JavaScript来做这件事,而是通过一些接口,这些接口就是DOM(Document Object Model).DOM不是一种语言,而是众多浏览器必须遵循的一种规则,一个网页就是一个文档,这个文档可能显示在浏览器的窗口里面或者是文档的源代码。 DOM其实提供了另一种方法来表示存储和操纵这个文档的方法——用对象来表示文档,DOM定义的所有的用来操作文档的属性、方法、事件都组织在对象里面。文档里面所

2020-06-06 15:46:18 288

原创 跟我一起学JavaScript!!!浅显易懂(四)——Object

目录 Object对象 创建对象 对象里的数组 更新和删除对象的属性 为对象添加新方法 循环输出对象的属性 Object对象 JavaScript除了五种基本数据类型,其他的都是对象。 简单来说,一个对象就像一个东西,比如苹果、汽车等都是一个对象。 每一个对象都有它的特性,苹果的颜色、味道、大小等。 颜色有红的、绿的;味道有甜的、酸的;大小有大的、小的;这些特性在Javascript中叫做对象的属性(property),对象里的属性就相当于对象里面的变量。 对象中也有一...

2020-06-06 15:20:51 189

原创 JavaScript浅显易懂(三)——function函数

function函数 声明方式定义函数:function functionName (parameter1, parameter2...) {...} 函数表达式:var functionName = function (parameter1, parameter2...){. . .} 一个函数就是一块带名字的代码,可以在应用里面重复的调用和执行定义好的函数去做一些事情 定义一个函数 定义一个函数可以用函数声明的方式也可以用函数表达的方式 函数声明 function alertMe.

2020-06-06 14:35:36 403

原创 JavaScript浅显易懂(二)——控制流程

JavaScript控制流程 if...else... switch while for 用法跟java差不多 if...else... 使用if语句我们可以判断指定的条件是真的还是假的,然后去执行指定的代码块(声名块)。格式如下 var weather = '雷雨', temperature = 1100; if ((weather == '晴天') && (temperature <= 26)) { alert("心情不错"); }else if (.

2020-06-06 14:23:16 167

原创 JavaScript浅显易懂(一)——数据类型

目录 JavaScript五种基本数据类型 在进行计算的时候出现的问题 用Typeof()来查看当前变量的数据类型 String——文本字符串的处理 JavaScript一种复杂数据类型 (Object)(一)——Array JavaScript五种基本数据类型 Number Boolean String Null Undefined Number、Boolean、Null、Undefined(没有编译的值) 很简单这里就不具体说了 下边会有涉及。 在进行计算的时候出现..

2020-06-05 21:10:55 263

原创 抽象工厂模式——工厂的工厂

抽象工厂模式: 围绕一个超级工厂创建其他工厂,该超级工厂又称为其他工厂的工厂。 定义: 抽象工厂模式提供了一个创建一系列相关或者依赖对象的接口,无需指定他们具体的类。 同一产品族的东西都是由同一个工厂生产的,但同一产品族位于不同等级结构 产品等级数量相对固定的一些产品族 可以考虑使用抽象模式 先写两个产品:手机、路由器。 再写两个产品的实现:小米、华为手机...

2019-11-07 23:35:50 198

原创 工厂模式之工厂方法模式简单方法实现

工厂方法模式: 用来生产同一等级结构中的固定产品(支持增加任意产品) 上一博客的 Car、Consumer、Wuling、Tesla代码 都要 上文连接:https://blog.youkuaiyun.com/qq_43799743/article/details/102945806 创建工厂方法模式 建立车工厂CarFactory接口 public interface CarFa...

2019-11-07 00:24:32 218

原创 工厂模式之简单工厂模式简单实现

作用: 实现了创建者和调用者的分离 详细分类:简单工厂模式 工厂方法模式 抽象工厂模式 OOP七大原则 开闭原则:一个软件的实现应当对扩展开放,对修改关闭 依赖倒转原则:面向接口编程,不要针对实现编程 迪米特法则:只与你直接的朋友通信,而避免和陌生人...

2019-11-07 00:17:56 221

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除