- 博客(100)
- 收藏
- 关注
RSS订阅原创 TCP和UDP区别
1.TCP面向连接（如打电话要先拨bai号建立连接）。UDP是无连接的，即发送du数据zhi之前不需要建立连接。2.TCP提供可靠的服务，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达。UDP尽最大努力交付，即不保证可靠交付。3.TCP传输效率相对较低。UDP传输效率高，适用于对高速传输和实时性有较高的通信或广播通信。4.TCP连接只能是点到点、一对一的。UDP支持一对一，一对多，多对一和多对多的交互通信。TCP对应的协议：（1） FTP...
2020-09-14 10:40:26
267
原创 实现{{}}语法
const textReg = /\{\{\s*\w+\s*\}\}/gi; // 检测{{name}}语法若含有{{}}语法，我们则可以对其处理，由于一个文本节点可能出现多个{{}}语法，因此编译含有{{}}语法的文本节点主要有以下两步：找出该文本节点中所有依赖的属性，并且保留原始文本信息，根据原始文本信息还有属性值，生成最终的文本信息。比如说，原始文本信息是"test {{test}} {{name}}",那么该文本信息依赖的属性有this.data.test和this.data.name,那么
2020-09-14 09:43:17
851
原创 meta标签属性有哪些
简介: 常用于定义页面的说明，关键 字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页 面），搜索引擎和其它网络服务。charset属性<!-- 定义网页文档的字符集 --><meta charset="utf-8" />name + content属性<!-- 网页作者 --><meta name="author" content="开源技术团队"/><!-- 网页地址 --><meta
2020-09-14 08:31:18
876
原创 圆？半圆？椭圆？
div { width: 100px; height: 100px; background-color: red; margin-top: 20px;}.box1 { /* 圆 */ /* border-radius: 50%; */ border-radius: 50px;}.box2 { /* 半圆 */ height: 50px; border-radius: 50px 50px 0 0;}.box3 { /* 椭圆 */ height: 50px;.
2020-09-14 07:46:52
161
原创 如何画三角形？
.triangle { width: 0; height: 0; border: 100px solid red; border-color: red transparent transparent transparent;}/*或者*/.triangle { width: 100px; height: 100px; border: 100px solid transparent; border-top-color: red; box-sizing: border.
2020-09-14 07:45:48
954
原创 CSS中可继承的属性
可继承的只有：颜色、文字、字体间距、行高对齐方式，列表样式。所有元素可继承：visibility和cursor。内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。块状：text-indent和text-alig
2020-09-14 07:44:40
904
原创 文字超出显示省略号
文字单超出显示省略号div { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}文字多行超出显示省略号div { width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}该方法适用于WebKit浏览器及移
2020-09-14 07:43:09
175
原创 CSS3新特性
transition：过渡 transform: 旋转、缩放、移动或倾斜 animation: 动画 gradient: 渐变 box-shadow: 阴影 border-radius: 圆角 word-break: normal|break-all|keep-all; 文字换行(默认规则|单词也可以换行|只在半角空格或连字符换行) text-overflow: 文字超出部分处理 text-shadow: 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。 box-sizing: conte
2020-09-14 07:42:16
117
原创 HTTP options
主要用途有两个： 1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。 2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。该请求方法的响应不能缓存。在正式跨域之前，浏览器会根据需要发起一次预检（也就是option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源或者域），还有是否需要Credentials(认证信息)等。浏览器将C
2020-09-13 22:33:26
182
原创 Web端即时通讯的方法
实现即时通讯主要有四种方式，它们分别是轮询、长轮询(comet)、长连接(SSE)、WebSocket。它们大体可以分为两类，一种是在HTTP基础上实现的，包括短轮询、comet和SSE；另一种不是在HTTP基础上实现是，即WebSocket。一、轮询 短轮询的基本思路就是浏览器每隔一段时间向浏览器发送http请求，服务器端在收到请求后，不论是否有数据更新，都直接进行响应。这种方式实现的即时通信，本质上还是浏览器发送请求，服务器接受请求的一个过程，通过让客户端不断的进行请求，使得客户端能够..
2020-09-06 13:34:34
312
原创 查找DOM的方式
1. document.getElementById2. document.getElementsByTagName3. document.getElementsByName4. document.getElementsByClassName5. document.querySelector6. document.querySelectorAll
2020-09-06 11:04:44
899
原创 怎么判断数组类型
1. Object.prototype.toString.call(obj)2. obj instanceof array3. Array.isArray(obj)
2020-09-06 10:46:17
269
原创 二叉树两结点间的最短路径
let root = { val: 1, left: { val: 2, left: { val: 4, left: null, right: { val: 7, left: null, right: null } }, right: n.
2020-09-06 10:27:05
361
原创 实现每隔1秒，两秒，3秒输出1，2，3
let print = new Print()print.task(1000, () => { console.log(1)}).task(2000, () => { console.log(2)}).task(3000, () => { console.log(3)}).start()function Print() { this.list = [] this.task = (time, fn) => { thi.
2020-09-03 16:42:21
1172
原创 让if (a === 1 && a === 2 && a === 3)条件成立
一、利用Object.defineProperty()方法var value = 1;Object.defineProperty(window, "a", { get () { return this.value++; }})if (a === 1 && a === 2 && a === 3) { console.log('成立')}二、数组var arr = [1, 2, 3];Object.defineProperty(window,...
2020-09-03 14:49:55
219
原创 让if(a == 1 && a == 2 && a == 3)条件成立的办法
一、重写valueOf()// 1var a = { value: 0, valueOf () { return ++this.value }}if (a == 1 && a == 2 && a == 3) { console.log('成立')}二、重写valueOf()和toString()var a = { value: 0, toString () { return ++this.value }}if (...
2020-09-03 14:49:20
1059
原创 实现sum(1)、sum(1)(2)
function f () { /* 代码 */}console.log(f(1) == 1)console.log(f(1)(2) == 3)console.log(f(1)(2)(3) == 6)在函数f内用一个变量数组来存放参数集合，然后返回一个函数(我命名为inner)，这个inner函数的作用是收集传递进来的参数将它添加到参数集合中。function f () { let args = [...arguments] var add = function () { ...
2020-09-03 14:48:46
1481
原创 bind方法实现
Function.prototype.mybind = function (context, ...args) { var _this = this function F() { args = args ? [...args, ...arguments] : [...arguments] F.prototype.__proto__ = new _this(...args) _this.apply(context, args) } return F}
2020-08-28 16:59:55
135
原创 Promise.settled实现
let allSettled = (funcArr) => { return new Promise((resolve) => { let sttled = 0 let result = [] for(let index = 0;index<funcArr.length;index++){ const element = funcArr[index] element .then(res => { re.
2020-08-28 15:03:19
830
1
原创 sleep方法实现
<!DOCTYPE html><html lang="zh"> <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" /&g...
2020-08-28 10:50:27
191
原创 实现倒计时
<!DOCTYPE html><html lang="zh"> <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" /&g...
2020-08-28 10:47:36
134
原创 同域和跨域页面通信方法
一、同域下页面之间的通信该条件下实现的方式比较多，先列举几种典型的方法，然后举例说明其中几种。1、iframe标签可以嵌套另一个标签，并且可以通过js去访问被包含的页面的window对象，从而操作该页面下documentElement；2、使用H5中的webstorage来实现，利用localeStorage和sessionStorage存储进行数据通信；3、使用cookie，读取相同域名下的cookie值来进行通信；4、Window.name通信。（有专门的文章进行讲解）例子1：有一个源窗口
2020-08-28 10:45:02
1837
原创 获得页面的所有节点数
// 递归函数function countNodes(node) { // 计算自身 var count = 1; // 判断是否存在子节点 if(node.hasChildNodes()) { // 获取子节点 var cnodes = node.childNodes; // 对子节点进行递归统计 for(var i=0; i<cnodes.length; i++) { .
2020-08-28 10:15:24
586
原创 Vue中hash模式和history模式的区别
1 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。2 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖
2020-08-28 10:08:06
612
原创 new操作符原理
new操作符实现原理： function news(func) { var target = {};//生成新对象 target.__proto__ = func.prototype;//实例的__proto__指向原型，构造函数的prototype也指向原型（链接到原型） var res = func.call(target);//绑定新对象的this到func上面 if (typeof (res) == ...
2020-08-28 08:46:41
151
原创 二叉树中任意两个节点之间的最短路径
思路：两个节点之间的最短路径一定会经过两个节点的最小公共祖先，所以我们可以用LCA（最低公共祖先）的解法。不同于LCA的是，我们返回不只是标记，而要返回从目标结点递归回当前节点的路径。当遇到最小公共祖先的时候便合并路径。需要注意的是，我们要单独处理目标节点自身是最小公共祖先的情况。Java代码实现如下：public LinkedList<TreeNode> helper(TreeNode n, TreeNode p, TreeNode q){ if(n == null){.
2020-08-28 08:19:28
2974
原创 instanceof实现
function myInstanceof (left, right) { let proto = left.__proto__ let protoType = right.prototype while (true) { if (proto === null) { return false } if (proto === protoType) { return true } proto = proto.__proto__ }}
2020-08-28 08:12:40
65
原创 实现气泡效果的聊天框
1.css3中通过border-radius实现圆角效果.radius{ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}2.通过实现一个三角形充当气泡的尾巴，将容器的宽度以及高度设置为0，然后给盒容器设置一个较粗的边框，浏览器会在边框的交界处绘制结合线.triangle{ height:0px; width:0px; border-width:20px;...
2020-08-27 18:25:13
622
原创 版本号排序
arr.sort((a, b) => { let i = 0 const arr1 = a.split('.') const arr2 = b.split('.') while (true) { const s1 = arr1[i] const s2 = arr2[i++] if (s1 === undefined || s2 === undefined) { return arr2.leng.
2020-08-27 17:09:44
425
原创 实现一个搜索框，按钮宽度固定，input的宽度自适应
1. 利用flex-grow让input填充剩余空间<div> <input> <button type="button">搜索</button></div>div{ display: flex;}button{ width:100px;}input{ flex-grow: 1;}2.同样使用flex布局，给input设置width:100%；给button设置固定宽度同样可以让Input填充剩余空...
2020-08-27 16:16:02
998
原创 实现get函数，对于异常情况做处理返回值
const a = { b: { c: { d: [ {val: 2} ] } }}function get (obj, property, defaultValue) { let p = property.split('.') let len = p.length let cur = obj for (let i = 0; i < len; i++) { if (p[i].indexOf('[') === -1) { if (cur[p[i]) { .
2020-08-27 14:52:57
470
原创 栈 API push pop min实现
class Stack { constructor() { this.dataStack = [] this.miniStack = [] } push(num) { if(this.dataStack.length === 0) { this.dataStack.push(num) this.miniStack.push(num)...
2020-08-27 14:24:00
112
原创 VUE EventEmit实现
Vue里面用过eventBus作为通信方式，实现方式是用Vue函数的$on/$emit方法。这种方式可以叫做发布订阅模式class Event { constructor() { // 创建一个事件对象 this.events = Object.create(null); } // 绑定事件 on(name, fn) { // 没有该事件? 初始化处理函数数组为空 if (!this.eve
2020-08-27 14:23:52
675
1
原创 script标签属性defer和async的作用
在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoad时间触发前执行，因此最好只包含一个延迟脚本。async只适用于外部脚本文件，并告诉浏览器立即下载文件。并不保证按照它们的先后顺序执行。第二个脚本文件可能会在第一个脚本文件之
2020-08-27 09:09:06
397
原创 浏览器渲染过程
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。2.构建渲染树（Render Tree）。3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。...
2020-08-24 16:10:59
163
原创 async
首先，await 只能出现在 async 函数中。1、async 的作用async 函数负责返回一个 Promise 对象如果在async函数中 return 一个直接量，async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象;如果 async 函数没有返回值,它会返回 Promise.resolve(undefined)2、await 在等待什么一般我们都用await去等带一个async函数完成，不过按语法说明，await 等待的是一个表
2020-08-23 07:54:05
947
原创 对称加密和非对称加密的区别
对称加密: 加密和解密的秘钥使用的是同一个. 非对称加密:与对称加密算法不同，非对称加密算法需要两个密钥：公开密钥（publickey）和私有密钥（privatekey）。对称加密算法:密钥较短，破译困难，除了数据加密标准（DES），另一个对称密钥加密系统是国际数据加密算法（IDEA），它比DES的加密性好，且对计算机性能要求也没有那么高.优点: 算法公开、计算量小、加密速度快、加密效率高缺点: 在数据传送前，发送方和接收方必须商定好秘钥，然后 使双方都能保存好秘钥。其次...
2020-08-23 07:52:44
2496
原创 TCP三次握手四次挥手
三次握手过程理解第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进
2020-08-23 00:02:25
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人