2020年04月_IT 哈

转载单枪匹马撸个聊天室, 支持Web/Android/iOS三端

单枪匹马撸个聊天室, 支持Web/Android/iOS三端原文地址:github.com/yinxin630/b…前排提醒, 阅读本文需要对JavaScript较为熟悉, 本文将讲解核心功能点的设计思路源码地址: github.com/yinxin630/f…在线地址: fiora.suisuijiang.com/前言该项目起始于2015年底, 也是我刚开始学习...

2020-04-30 16:16:27 960

转载面试中常考的字符串操作方法大全，包含ES6

concat()连接字符串。 var a = "abc"; var b = "def"; var c = a.concat(b); console.log(c);//abcdef四、indexOf()检索字符串。indexOf() 方法对大小写敏感！var str="Hello world!"console.log(str.indexOf("Hello"...

2020-04-28 10:07:06 280

转载我写了一份操作系统词典送给你！

1. 操作系统（Operating System，OS）：是管理计算机硬件与软件资源的系统软件，同时也是计算机系统的内核与基石。操作系统需要处理管理与配置内存、决定系统资源供需的优先次序、控制输入与输出设备、操作网络与管理文件系统等基本事务。操作系统也提供一个让用户与系统交互的操作界面。2. shell：它是一个程序，可从键盘获取命令并将其提供给操作系统以执行。在过去，它是类...

2020-04-28 09:10:14 1093 1

转载物理挖洞！涂抹地形! 小鳄鱼爱洗澡！百战天虫！Cocos Creator !

效果预览实现步骤整体思路是先使用PolyBool计算多边形，接着使用cc.PhysicsChainCollider将多边形围起来，最后使用cc.Graphics将整个地形绘制出来。引入PolyBoolPolyBool是什么？对多边形（并集，交集，差，异或）进行运算。(Boolean operations on polygons (union, intersecti...

2020-04-27 12:07:13 613

转载深度：手写一个WebSocket协议 [7000字]

写在开头：为什么要使用websocket协议（以下简称ws协议），什么场景会使用？我之前是做IM相关桌面端软件的开发，基于TCP长链接自己封装的一套私有协议，目前公司也有项目用到了ws协议，好像无论什么行业，都会遇到这个ws协议。想自己造轮子，可以参考我之前的代码和文章:原创：从零实现一个简单版React （附源码）原创：如何自己实现一个简单的...

2020-04-27 11:58:17 846

转载从 React 历史的长河里聊虚拟 DOM 及其价值

最近我发现很多面试题里面都有「如何理解虚拟 DOM」这个题，我觉得这个题应该没有想象中那么好答，因为很多人没有真正理解虚拟 DOM 它的价值所在，我这篇从虚拟 DOM 的诞生过程来引出它的价值以及历史地位，帮助你深入的理解它。什么是虚拟 DOM本质上是 JavaScript 对象，这个对象就是更加轻量级的对 DOM 的描述。对，就是这么简单！就是一个复杂一点的对象而已，没什么好说的...

2020-04-27 09:09:12 219

转载 css实现居中布局的解决方案

html示例代码如下：<div class="parent"> <div class="child">Demo</div></div>上面的parent元素是居中元素的外部div元素，里面的child元素就是要去做居中的元素，这两个元素的大小都是不固定的水平居中上面html示例代码水平布局效果示意图如下所示：为了能让大家...

2020-04-26 16:44:05 216

转载纯CSS实现点击展开全文功能

纯CSS实现点击展开全文功能2020-04-11CSS787View看标题大家不难猜到我今天要实现的功能，正如你打开我的博客文章，在正文下面看到的按钮，点击展开全文。以前我写过类似的代码，可以去看看：纯CSS3制作TAB选项卡的两种方式CSS:checked伪类选择器思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSSTab使用radio来实现是差不...

2020-04-26 08:57:10 4400

转载 Vue.js 源码构建

Vue.js 源码构建Vue.js 源码是基于Rollup构建的，它的构建相关配置都在 scripts 目录下。#构建脚本通常一个基于 NPM 托管的项目都会有一个 package.json 文件，它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象。我们通常会配置script字段作为 NPM 的执行脚本，Vue.js 源码构建的脚本如下：{ "scr...

2020-04-26 08:54:16 135

转载 Vue 构造函数

Vue 构造函数我们知道，我们在使用Vue的时候，要使用new操作符进行调用，这说明Vue应该是一个构造函数，所以我们要做的第一件事就是：把Vue构造函数搞清楚。#Vue 构造函数的原型在了解 Vue 这个项目一节中，我们在最后提到这套文章将会以npm run dev为切入点："dev": "rollup -w -c scripts/config.js -...

2020-04-26 08:52:59 6060

转载 export default 被认为是有害的

export default被认为是有害的假如你有一个包含以下内容的foo.ts文件：class Foo {}export default Foo;你可能会使用 ES6 语法导入它（在bar.ts里）：import Foo from './foo';这存在一些可维护性的问题：如果你在foo.ts里重构Foo，在bar.ts文件中，它将不会被重...

2020-04-26 08:51:11 545

转载 Babylon自定义相机输入

如何自定义相机输入一旦您调用相机的attachControl功能，每个Babylon.js相机都会自动为你处理输入。您可以使用detachControl函数撤消控件。大多数Babylon.js开发者使用两步过程来激活和连接相机：1. scene.activeCamera = myCamera;2. scene.activeCamera.attachControl(canvas, true...

2020-04-24 17:22:02 528

转载 Vue模仿Mac版本QQ开源啦 | 掘金优秀开源推荐

前言曾几何时，大多数使用QQ的人，脑子里都想过这样一件事：这东西好厉害，啥时候我也能实现一个就好了。昔日，腾讯彻底关闭了web版本的QQ。今日，我决定用Vue来实现它，当然这是一个很庞大的项目，目前我只完成了一个雏形，实现了群聊功能和移动端的适配(简陋适配)。我决定写这个项目的主要原因是想巩固下Vue的语法，挑战下将客户端才能实现的功能，搬到浏览器端来实现。项目目录dist 编译后...

2020-04-24 09:25:36 441

转载多维度分析 Express、Koa 之间的区别

Express 历史悠久相比 Koa 学习资料多一些，其自带 Router、路由规则、View 等功能，更接近于 Web FrameWork 的概念。Koa 则相对轻量级，更像是对 HTTP 的封装，自由度更多一些，官方koajs/koa/wiki提供了一些 Koa 的中间件，可以自行组合。本文重点从Handler 处理方式、中间件执行机制、响应机制多个维度来看待 Express、Koa...

2020-04-24 09:04:54 442

转载 WebGL physics-based car using Babylon.js and Oimo.js

WebGL physics-based car using Babylon.js and Oimo.jsImplementing a simple WebGL physics-based car demo using Oimo.js and Babylon.js' new physics engine architecture.06 SEPTEMBER 2016| Tagged in :...

2020-04-22 17:02:10 802

转载 css flex布局详解

1，flex布局是个什么东西？官方说法：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。民间说法：flex 就是一种布局方式，类似于 block，inline-block等。2，flex涉及的概念Flex的基本作用就是让布局变的更简单，比如“垂直居中”等，当然不止这个，要说清楚flex有什么作用首先要...

2020-04-21 21:43:07 455

转载云风coroutine库源码分析

coroutine库是云风大佬以前写的一个协程库，短小精悍，源码分析在这（https://github.com/theanarkh/read-coroutine-code）。今天就分析一下这个库的原理。话不多说，直接开始。首先了解一下数据结构。//记录协程公共数据的结构体structschedule{//协程的公共栈charstack[STACK_SIZE]...

2020-04-21 14:35:43 319

转载在vue中引入多个script标签

注意：vue是单文件，只能直接引入一个script标签，其他的需要去创建。1.可以在index.html中引入，在HTML文件中可以引入多个script标签。 <head> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lOOL1od96eckPqsk...

2020-04-21 09:27:26 14921

转载从浏览器缓存淘汰策略和Vue的keep-alive学习LRU算法

引言这个标题已经很明显的告诉我们：前端需要了解 LRU 算法！这也是前端技能的亮点，当面试官在问到你前端开发中遇到过哪些算法，你也可以把这部分丢过去！本节按以下步骤切入：由浏览器缓存策略引出 LRU 算法原理然后走进vue中keep-alive的应用接着，透过vue中keep-alive源码看LRU算法的实现最后，来一道 ...

2020-04-21 09:19:46 886

转载 vue如何写组件（script标签引入的方式）

vue如何写组件（script标签引入的方式）很多人知道.vue结构的单文件组件形式，不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了，那如果我们又想用vue来写模板，又不想引入vue-cli管理，那该怎么来写组件呢？别着急往下看！1.首先在正常使用cdn引入jquery的项目中，也用script标签引入Vue.js文件。 <script src=...

2020-04-20 17:52:46 8479

转载入门操作系统知识，这一篇就够啦！

弱弱的问一问: 要操作系统干嘛？这里先不讲操作系统的概念了，因为文字太生硬了，我们只需要看一个简单的例子：在我们的JS代码里，只需要输入console.log(1+1); 就可以在浏览器面板中看到2，这其中发生了什么事情呢?(简单扫一眼) 首先键盘输入代码1+1到显示器输出2, 需要CPU控制键盘（输入设备），将获取的1+1指令放入内存然后CPU的控制器从...

2020-04-19 17:19:00 1784

转载解决【display：flex布局】遇上【position: absolute / fixed 】的失效问题

问题描述：有个这样的页面，页面是通过flex布局的，现在想将头部( 我的订单栏 )固定，那么我们第一反应就是添加定位呀，position : fixed。但是问题来了，position可以添加，但是添加之后，页面变成这样了（如下所示），也就是设置的display:flex 失效了，不起作用。position 一般常用的属性值有三种： relative 、 absolute 、...

2020-04-17 09:18:43 8184

转载理解vue中的插槽------slot与slot-scope

vue当中的插槽，指的即是slot，是组件当中的一块HTML模板。该模板是否显示，以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定，你将slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块！单个插槽单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性，也可以称其为匿名插槽。先来看一个例子。父组件：&l...

2020-04-15 17:49:58 185 1

大家好，我是练习时长一年半的前端练习生，喜欢唱、跳、rap、敲代码。转眼又到了金三银四的时节，相信很多小伙伴已经在为自己心仪的公司做准备，本文是笔者一年多来对前端基础知识的总结和思考，这些题目对自己是总结，对大家也是一点微薄的资料，希望能给大家带来一些帮助和启发。成文过程中得到了许多大佬的帮助，在此感谢恺哥的小册[1]、神三元同学的前端每日一问[2]以及许多素未谋面的朋友们，让我等萌新也有机会在前...

2020-04-15 13:35:08 2719

转载 CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘3.浮动的生成：使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）4.浮动的影...

2020-04-14 09:32:28 210

转载 CSS布局指南

在过去几年中，CSS布局已经发生了巨大的变化，现在我们开发网站的方式也发生了巨大变化。现在我们有需要可选的CSS布局方式来开发我们的网站，这也就要求我们对这些方式能作出正确而双合适的选择。在这篇文章中，将会介绍各种CSS布局的基本使用方式以及使用的目的。如果你还是CSS方面的新手并且又想了解什么才是最好的布局方式，那么这篇文章正是你所需要的。如果你是一位比较有经验的开发者，想要了解一些关于CS...

2020-04-13 13:43:46 223

转载深入理解css之float

div> <img src="./card.jpg" alt="" class="float"> <p class="content">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p></div>float的特性一个元素设置了float属性，会表现出如下特性：包裹性块...

2020-04-13 12:45:54 222

转载垂直居中(总结)

垂直居中(总结)在工作中我们经常会遇到垂直居中的情况这里我对自己常用的垂直居中进行了总结1、line-height　　仅限单行文本且高度已知的标签使用, 所有样式先清除 * {maigin:0; padding: 0})　　HTML模版代码:<!DOCTYPE html><html lang="en"><head> <...

2020-04-13 12:02:45 396

转载 CSS实现三栏布局(5种)

CSS实现三栏布局(5种)常见的布局方式: float布局、Position定位、table布局、弹性(flex)布局、网格(grid)布局那么我们就是用以上5种方式完成三栏布局，不过前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px)，中间宽度自适应1、float布局: float最初的设计的初衷是为了解决文字环绕的问题，即给一个图片设置flo...

2020-04-13 12:01:11 660

转载 CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及<a>标签的:link、visited等，伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰...

2020-04-13 11:48:48 236

转载 CSS的伪类和伪元素

之前介绍了8种选择器,基本上可以应对大部分的开发需求，但是如果不会使用伪类和伪元素，就跟下面的图差不多，后面会摔的。伪元素和伪类虽然不是特别常用，但是，很好用，可以帮你省掉很多无用功，效果还好。下面直接进入正题，尽量用最小的篇幅让人明白如何使用它们。...1.伪元素和伪类的区别伪元素和伪类都是为了给一些特殊需求加样式，定义上基本一致。伪类像类选择器一样给已存在某个元素添加...

2020-04-13 11:43:48 688

转载 CSS 浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。CSS 浮动请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流...

2020-04-13 11:29:34 136

转载这可能是史上最全的css布局教程

标题严格遵守了新广告法，你再不爽，我也没犯法呀！话不多说，直入正题。所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可以看到浮动布局，inline-block布局，弹性盒布局这几个...

2020-04-13 10:52:16 1156

转载 Egg.js（一）

Egg 继承于 Koa 想要深入学习的小伙伴需要撸一遍Koa的基础。这里说一下编辑器选择博主使用的事VSCODE，安装 eggjs 插件，如图：一、Egg 快速入门及项目搭建二、启动项目三、了解项目目录结构如上，由框架约定的目录：app/router.js用于配置 URL 路由规则，具体参见Router。app/controller/*...

2020-04-13 09:10:40 802

转载 (实战总结)我用EggJS开发了一个日增量过亿的数据可视化平台

编者荐语：这篇文章中的干货蛮多的，用 node 写 BFF 或者后端的小伙伴可以对比一下自己项目，学习下。以下文章来源于较真的前端，作者英俊潇洒你冲哥较真的前端前端开发者交流与呵护平台本文首发于知乎，大家可以通过文章底部的阅读原文来访问原文地址。文末有视频。项目背景小编我在国内某知名互联网（非一线）做前端开发，平时做NodeJS比较多，所以负责BFF和服...

2020-04-13 08:59:00 3941

转载关于css的float

什么是浮动？CSS中的一些元素是块级元素，表示它们会自动另起一行。举个例子，如果你创建了两个段落，每个段落都只有一个单词。这两个单词不会靠在一起，而是会各自占据一行。另一些元素是行内元素，表示它们和前面的内容位于相同的一行。举个例子，<a>可以出现在另一个元素中，比如<p>，这不会产生多余的空格或者出现换行。欺骗这种布局模型的一种方式是使用浮动，浮动可...

2020-04-10 17:30:05 185

转载如何提升你的CSS技能，掌握这20个css技巧即可[完整版]

前言随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。如果您对CSS比较陌生，看看这篇文章《CSS选择器如此之多，你了解多少？》1...

2020-04-10 16:55:22 451

转载 CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面

前言日子总是像从指尖流过的细沙，在不经意间悄然的滑落。转眼2019年第一季度已经过去了，提前祝大家愚人节快乐，当心被人愚弄哦（就算被愚弄也不要生气啦）。先来看看今天要实现的效果原图：玩过王者的应该都熟悉，这个页面的效果。为什么要实现这个效果了？第一：王者这么火，电竞这么火。第二：主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。图形解析1、背景（径向渐变）...

2020-04-10 16:53:26 678

转载使用font-size:0解决设置inline-block引起的空白间隙问题

使用font-size:0解决设置inline-block引起的空白间隙问题一、空白间隙问题在进行页面布局的时候为了页面代码所谓整洁刻度，往往会设置缩进或是换行，但是元素display为inline-block或是inline时，行内元素虽然没有设置 margin值，这些换行或是缩进。还是会出现空白间隙。如下所示：HTML部分<div id="box1">1&l...

2020-04-10 15:43:43 750

转载 CSS before和after伪元素

CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，它们是以CSS选择器的形式出现的，具有标签的表现效果，但是呢又不是真正的标签元素，所以叫做“伪元素”。下面就说一下常见的两个伪元素before和after。一、伪元素基本用法在CSS选择器中加上相应伪类选择符就可以了，像这样：#example: before或者#example: after，这里是使用...

2020-04-10 11:20:33 593

空空如也

空空如也