Wayne8016-CSDN博客

原创引入 css 的两种方式 -- link 和 @import 的区别？

（1）link 属于 HTML 标签，除了加载 CSS 外，还能用于定义 rel 连接属性等作用；而 @import 只能用于加载 CSS; （2）link 支持使用 js 控制 DOM 去改变样式，而 @import 不支持;（3）@import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 HTML 标签，无兼容问题;（4）@import 在同一个 css 文件里有引用个数限制，大概在 30 个左右，多余的直接忽略;另外，值得注意的是： 1，@i...

2020-10-29 11:55:25 555 2

原创回顾总结＜!DOCTYPE html＞

前篇已经介绍过 <!DOCTYPEhtml> 的用处，今天再来总结回顾下：关于加不加 a）加了表明这是 html5，要按照 w3c 的规范解析文档（css） b）不加的话，浏览器会按照自己的解析方式去解析文档（这样就有可能造成不同浏览器显示效果不同） 1，新一点的浏览器即使不写<!DOCTYPE html>会默认采用 w3c 规则 2，旧一点的浏览器因为兼容问题会采用怪异模式关于加在哪 a）必须加在 html...

2020-10-29 10:37:19 238 1

原创 chameleon 的 c-if 问题

template 结构：<text c-if="{{computedTrue}}">computedTrue</text><text c-if="{{computedFalse}}">computedFalse</text><text c-if="{{methodsTrue}}">methodsTrue</text><text c-if="{{methodsFalse}}">methodsFalse</te

2020-08-28 12:01:36 205

原创 CML 小程序开发环境配置流程

（当前时间：2020.08.17）安装 chameleon-tool依赖环境：node >= 8.10.0、npm >= 5.6.0建议使用nvm管理 Node 版本，暂不支持使用 yarn、cnpm 等进行安装。npm i -g chameleon-tool安装成功后，执行cml -v查看当前版本，cml -h查看帮助文档。创建项目与启动执行cml init project 输入项目名称等待自动执行npm install依赖 ...

2020-08-17 14:16:41 447

原创 onmouseover、onmouseenter 和 onmousemove 三者之间的区别？

onmouseover其支持冒泡，所以当鼠标移入或鼠标移入其子元素的时候都会触发相关事件其对应的移出事件是 onmouseoutonmouseenter其不支持冒泡，所以当鼠标移入这个元素本身的时候会触发相关事件其对应的移出事件是 onmouseleaveonmousemoveonmousemove也不支持冒泡事件，当鼠标在元素上移动的时候会触发相关事件...

2020-07-02 15:56:35 662

原创 Vue 的渐进式是什么意思？

Vue 可以写简单页面，也可以写中大型项目；总的来说，它给你提供足够的 optional，但并不主张很多 required；这就是我对渐进式框架的理解。

2020-07-01 08:55:36 857

转载 HTTPS 详解二：SSL / TLS 工作原理和详细握手过程

HTTPS 详解系列：HTTPS 详解一：附带最精美详尽的 HTTPS 原理图HTTPS 详解二：SSL / TLS 工作原理和详细握手过程前言在上篇文章HTTPS详解一中，我已经为大家介绍了 HTTPS 的详细原理和通信流程，但总感觉少了点什么，应该是少了对安全层的针对性介绍，那么这篇文章就算是对HTTPS 详解一的补充吧。还记得这张图吧。HTTPS 和 HTTP的区别显然，HTTPS 相比 HTTP最大的不同就是多了一层 SSL (Secure Sockets Layer 安全套接层

2020-06-27 11:44:59 1104 2

转载 HTTPS 详解一：附带最精美详尽的 HTTPS 原理图

HTTPS 详解系列：HTTPS 详解一：附带最精美详尽的 HTTPS 原理图HTTPS 详解二：SSL / TLS 工作原理和详细握手过程前言作为一个有追求的程序员，了解行业发展趋势和扩充自己的计算机知识储备都是很有必要的，特别是一些计算机基础方面的内容，就比如本篇文章要讲的计算机网络方面的知识。本文将为大家详细梳理一下 HTTPS 的实现原理。近年来，随着用户和互联网企业安全意识的提高和 HTTPS 成本的下降，HTTPS 已经越来越普及。很多互联网巨头也在力推 HTTPS，比如谷歌的 Ch

2020-06-27 11:43:14 464

原创 MVC、MVP 和 MVVM 框架模式的区别？

MVC前端的 MVC 和后端类似，具有 View、Controller 和 Model。Model：负责保存应用数据，与后端数据进行同步。Controller：负责业务逻辑。View：负责视图展示，将 Model 中的数据可视化出来。这样的模型，在理论上是可行的。但往往在实际开发中，并不会这样操作。因为开发过程并不灵活。例如，一个小小的事件操作，都必须经过这样一个过程，那么开发就不再便捷了。MVP既然有缺陷，就会有变革。在前端框架模式的演进中，似乎少了 MVP 这种模型，

2020-06-23 12:11:19 339

原创聊聊 iframe 的优缺点以及使用场景

一，使用 iframe 的优缺点1，优点实现了页面的“模块化”。比如一个网站的多个页面有统一的导航栏，这样就可以写成一个页面，用 iframe 来嵌套，增加代码的重用性。2，缺点滥用 iframe 会增加页面的性能开销二，为什么的 iframe 会影响页面性能？1，iframe阻塞页面加载，影响网页加载速度window 的 onload 事件需要在所有 iframe 加载完毕后才会触发，因此，滥用 iframe 就会影响主页面加载速度。2，唯一的连接池浏览器只能开少量的.

2020-06-18 18:48:02 930

原创 location.href 和 location.replace() 的区别？

首先，这两个方式都可以实现页面跳转：location.href = 'https://www.baidu.com'location.replace('https://www.baidu.com')那么，它们的区别是什么呢？location.href location.replace() 跳转后，URL 会被写入 history 对象中替换当前 URL，被替换掉的 URL 不会被写入 history 对象中也就是说，如果使用 location.href 的方式实现的.

2020-06-16 21:47:04 718

原创 CommonJS、AMD、CMD 和 ES6 Model 的区别

一、CommonJSCommonJS 是一种同步的模块化规范，所以主要用于服务器端，Node.js 采用的就是这个规范。特点：对于基本数据类型，属于复制。对于复杂数据类型，属于浅拷贝。所以由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。当使用 require 命令加载某个模块时，就会运行整个模块的代码。当使用 require 命令加载同一个模块时，不会再执行该模块，而是会取缓存中的值。也就是说，CommonJS 模块无论加载多少次，都只会在第一

2020-06-09 17:33:54 274

原创 script 标签中的 async、defer 属性

2020-06-08 16:03:15 162

原创关于 JS setTimeout 立即调用，没有延迟效果的解决办法？

今天在学习的时候遇到了setTimeout 立即调用的问题，很费解，于是就研究了一下。这是我原来的代码：function getAge(value) { console.log(value)}setTimeout(getAge(18), 2000)后来发现setTimeout的第一个参数必须是需要编译的代码或者是一个函数方法，而如果直接传入一行可执行代码，那么抱歉，这里会立即执行，没有延迟效果。解决办法如下：（1）让第一个参数成为函数setTimeout(funct...

2020-05-28 15:44:50 2907

原创 ES6 Proxy 与 Object.defineProperty 的优劣对比？

Proxy 的优势如下：Proxy 可以直接监听数组的变化 Proxy 可以直接监听对象而非属性 Proxy 有13 种拦截方法，比 Object.defineProperty 要更加丰富的多Object.defineProperty的优势如下：兼容性好Object.defineProperty (obj, prop, descriptor) 的问题主要有三个：无法监听数组的变化必须遍历对象的每个属性必须深层遍历嵌套的对象（1）无法监听数组的变化Vue 把会修改原...

2020-05-26 15:55:32 1430

原创 Javascript 中 ?. 运算符和 ?? 运算符

一、链判断运算符（?. 运算符）实际开发中，如果要读取对象内部的某个属性，往往需要先判断一下该对象是否存在。比如，要读取user.firstName，安全的写法应该是下面这样的：const firstName = (user && user.firstName) || 'default'这样的层层判断非常麻烦，因此ES2020引入了“链判断运算符”（optional chaining operator）?. 来简化上面的写法const firstName = ...

2020-05-25 11:09:01 11637 2

原创 HTTP 有哪些方法？

HTTP 方法HTTP1.0 定义了三种请求方法：GET，POST 和 HEAD 方法HTTP1.1 新增了六种请求方法：OPTIONS，PUT，PATCH，DELETE，TRACE 和 CONNECT这些方法的具体作用是什么？方法描述 GET 通常用于请求服务器发送某些资源 POST 发送数据...

2020-04-08 18:26:30 399

原创 CSS | 替换元素（可置换元素）

替换元素定义：可替换元素是指元素内容的展现不是由 CSS 来控制的，而是外观渲染独立于 CSS 的外部对象。详见：MDN典型的可替换元素有：<img>、<iframe>、<video>、<embed>有些元素仅在特定情况下被作为可替换元素处理，例如：<audio>、<canvas>、<option&gt...

2020-04-08 11:53:32 727

原创对 MVVM 模式的理解

MVVM 模式即 Model-View-ViewModel 模式Model 层数据层。它仅仅关注数据本身，不关心任何行为View 层视图层。view 层可以说是一个动态模板，它定义了页面的结构和布局，展示了 viewModel 层提供的数据viewModel层MVVM 模式的核心，用于同步 View 层和 Model 层的一个对象。View 层和 Mod...

2020-04-04 18:22:40 243

原创 Vue 的响应式原理

其实好多人都对 Vue 的双向绑定和响应式原理的认知存在误区，认为它俩是一样的，但实际上并不是如此。Vue 的响应式是通过数据劫持的方式来实现的。数据劫持是通过 ES5 的 Object.defineProperty() 方法来实现的Vue 的响应式可以实现通过改变数据而使视图层更新Vue 的双向绑定原理是基于数据劫持 & 发布-订阅模式而实现的。双向绑定既实现了...

2020-04-04 18:07:18 321

原创 Vue 异步请求适合放在哪个生命周期里调用?

得看实际情况；一般在created里面就可以，如果涉及到需要页面加载完成之后的操作话就用mounted；created 阶段的优势是：请求时间比较早，页面 loading 时间相对较短；mounted 阶段的优势是：页面已经渲染完成，如果想请求之后进行 DOM 操作的话，必须在 mounted 阶段发起请求；...

2020-03-30 16:26:30 5145 1

原创对 Vue 生命周期的理解

生命周期描述 beforeCreate Vue 实例刚刚被创建，只拥有默认的一些生命周期函数和事件 created 已完成 data 和 methods 中的数据初始化 beforeMount Vue 模板代码已经在内存中编译完成，但还尚未渲...

2020-03-30 16:17:33 173

原创 CSS 居中方案

1，水平居中a）父级 text-align + 子级 inline-block 或 inline.parent { text-align: center;}.child { display: inline-block;}b）将元素块状化 + margin/* display: table 也可以 */.element { display: block; ...

2020-02-21 11:06:06 119

原创什么是属性选择器？

属性选择器往往是我们所忽略的一个选择器。但它其实很强大，下面我们来认识一下<form> <input type="text"> <div> <input type="password"> </div></form>用法[type] { width: 300px;}这样，我们就选中...

2020-02-04 16:31:04 2285

原创什么是多类选择器？

作为高级选择器，多类选择器在开发中其实并不太常见，但它还是值得我们来学习一下的，下面我们来认识一下。写法.a.b { color: #000;}注意：类名 .a 和类名 .b 紧挨着；用法<div class="a b"></div>多类选择器：只有 .a 和 .b 同时存在时，样式才有效，缺一不可；注意区分群组选择器/...

2020-02-04 16:00:50 1438

原创为什么大多数编程语言中，数组要从0开始编号，而不是从1开始呢？

从数组存储的内存模型上来看，“下标”最确切的定义应该是“偏移（offset）”。如果用 a 来表示数组的首地址，a[0]就是偏移为 0 的位置，也就是首地址，a[k] 就表示偏移 k 个 type_size 的位置，所以计算 a[k] 的内存地址只需要用这个公式：a[k]_address = base_address + k * type_size但是，如果数组从 1 开始计数，那...

2020-02-03 21:34:28 662

原创 Vue eventBus 踩坑记录

需求是这样的：当我点击 test 页面中的跳转按钮要跳转到 home 页面的时候，我希望 test 页面中的某些数据会传递到 home 页面；但是 eventBus 有一些问题：问题 1：第一次点击跳转的时候，home 页面接收不到数据；问题 2：第二次点击跳转的时候，home 页面接收到 1 遍数据，第三次点击跳转的时候，home 页面接收了 2 遍数据，第四次点击跳转的时候，...

2019-11-26 20:27:39 615

原创 Vue事件总线 eventBus

如果项目不够大，没有引入 Vuex 的情况下，组件还不是父子组件的关系，也不适合使用 params、query 等路由传参方式进行传参的话，那组件之间应该如何通信呢？公共事件总线 eventBus 的实质就是创建一个 vue 实例，通过一个空的 vue 实例作为桥梁实现 vue 组件间的通信。它是实现非父子组件通信的一种解决方案。引入方式方式一：新建一个文件，比如叫 eve...

2019-11-25 21:31:06 275

原创 Vue 父子组件互相通信

为了保证单项数据流，在 Vue 中，父子组件的关系可以总结为props向下传递，事件向上传递。即父组件通过props给子组件下发数据，子组件通过事件的方式给父组件发送信息。一，父传子1，父组件传值给子组件在父组件中，用 v-bind 动态绑定一个自定义属性，用于给子组件传递数据<template> <div class="parent"&...

2019-11-25 18:40:36 217

原创 Vue路由传参 query 和 params 方式详解

query方式：直白的来说 query 相当于 get 请求，页面跳转的时候，可以在地址栏看到请求参数；使用方式：使用 path 来匹配路由，然后通过 query 来传递参数；（也可以用 name 匹配路由）父组件： this.$router.push({ path: "/home", query: { id: 2333 ...

2019-11-25 16:51:39 655 2

原创 JavaScript 中 Object.getOwnPropertyNames() 与 Object.keys() 的区别？

大部分情况下，Object.getOwnPropertyNames() 和Object.keys() 的功能是一样的，我们一般用他们来获取对象中所有的属性，或者是获取对象中属性的个数：const obj = { aa: 1, bb: 2,};console.log(Object.keys(obj));console.log(Object.getOwnProperty...

2019-11-11 16:27:22 431

原创 JS 中，onclick 和 addEventListener 的区别？

onclick：优点简单；处理事件的 this 关键字指向当前元素；缺点只能使用冒泡事件；同一个事件，一次只能对一个元素设置一个，多了后者会覆盖前者；let cxk = document.getElementById('cxk')cxk.onclick = () => { console.log('sing')}cxk.onclick = () => ...

2019-11-10 16:50:47 667

原创 Vue，watch、computed 和 methods 的区别

在 Vue 里，computed 和 methods 很像。methods 主要是用来写函数的，多次调用多次执行。而 computed 主要是用来计算属性的，带有缓存功能，只有在第一次调用时执行，之后的调用会直接取第一次执行结果的缓存值，除非属性值发生变化。同时适用 methods 和 computed 的场景下，尽量使用 computed；任何复杂的运算也都应该放在 comput...

2019-11-10 16:36:59 185

原创 JS 继承

JS 没有类的概念，那 JS 中的继承是怎么实现的呢？其实在 JS 中，继承全靠原型链。如果大家对原型链不是很了解，可以看下我之前写的一篇文章。一，原型链继承function Person() { this.name = 'person' this.cxk = ['sing', 'dance']}Person.prototype.getName = function...

2019-11-09 23:51:40 120

原创 JS 原型链

我们每学习一个概念，不仅要知道它是什么，还要知道它是用来解决什么问题的。先说总结：JavaScript 没有类，继承全靠原型链。（即__proto__和 prototype 之间的关系）所以原型链是用来解决 JS 中的继承问题的。（指 ES6 之前，ES6以后有了 class 和 extends 语法糖）以下正式开始。在 Javascript 中，一直都有这么一种说法，万物皆...

2019-11-08 15:46:31 120

原创 JS 构造函数

1，什么是构造函数？在 JavaScript 中，用 new 关键字调用的函数，被称为构造函数。2，构造函数有什么特征？首字母大写（非强制，业界规范）；构造函数里的方法和属性由 this 来定义；3，为什么要使用构造函数？我们每学习一个新概念，不仅要知道它是什么，还要知道它解决了什么问题。先说总结：使用构造函数的目的之一是，为实现代码复用。举个例子，比如我们要为每一位同学...

2019-11-08 14:25:29 197

原创 JS 日期格式变成时间戳

方法一：一元运算符 + 的另一个常见用途是将日期（Date）对象强制类型转换为数字，返回结果为unix时间戳，以毫秒为单位；let a = +new Date()方法二：let a = new Date().getTime()方法三：最好还是用ES5中新加入的静态方法let a = Date.now()ok完结，撒花????✨????????????...

2019-10-16 18:52:17 144

原创 !DOCTYPE html 的作用是什么？

关于加不加 <!DOCTYPE html>，我总结了下： a）加了表明这是 html5，要按照 w3c 的规范解析文档（css） b）不加的话，浏览器会按照自己的解析方式去解析文档（这样就有可能造成不同浏览器显示效果不同） 1，新一点的浏览器即使不写<!DOCTYPE html>会默认采用 w3c 规则 2，旧一点的浏...

2019-10-08 10:33:06 1211

原创 a 标签的 href 属性

<a href =" "></a><a href ="#"></a>不知道大家在学习 html 的时候有没有注意过以上两种写法他们之间的区别呢？上面两种写法的“效果”是一样的，看起来都是“哗”的一下跳转到页面顶部了，但其实。。点击 <a href =" "></a>默认打开的还是当前页面，会刷新一下重新...

2019-10-08 10:18:52 830

原创将多行文本最后一行的超出部分变成省略号

aaa，很早以前学 css 的时候只会把单行超出部分变成省略号，当时也没多想，最近遇到了一个问题需要将多行文本最后一行的超出部分变成省略号，比如这样：然后在网上查了相关资料最后找到了解决问题的方法，我就直接贴代码了：overflow: hidden; //超出隐藏text-overflow: ellipsis; //超出部分变成省略号display: -w...

2019-10-07 21:14:58 467

空空如也

空空如也