- 博客(77)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 温故知新——DOM节点增删查改替换复制
DOM节点增删查改替换复制这篇文章中总结的节点操作比较狭义，特指对 element 节点的操作，并没有包含其他内容，至于对文本内容和属性的操作就放在下一篇吧～节点的“查”操作已经在上一篇文章中总结过了，在本文中主要包括创建节点、修改节点、插入节点、删除节点、替换节点、查看节点和复制节点今天的通过下面这一段范例代码展开：<ul id="users"> <li cla...
2019-08-23 00:45:45
383
原创 温故知新——DOM操作之获取节点
浏览器读取 HTML 文件并进行解析之后，会生成一棵由 DOM 节点构成的树，我们可以对其中的节点进行操作基本的 DOM 节点操作包括节点的获取、创建、修改、插入和删除我们先写一段简单的 HTML 代码，<body> <header id="title" class="main-title"> <span class="text-heading"&g...
2019-08-17 22:48:59
297
原创 JS的柯里化与偏应用
在之前的文章中对函数式编程做了一个简单的概述，在这篇文章中对一个大家喜闻乐见的话题——函数的柯里化进行一个总结。** ⚠️注意： ** 柯里化和偏应用的概念经常被混用，在文中会有概念上的简单区分一些基本概念一元函数、多元函数以及变参函数这些概念还是很好理解的，我们的日常开发中总是伴随着这些函数：一元函数：只有一个参数的函数，形如let log = (msg) => {co...
2019-06-06 20:11:12
374
原创 怎么让 git 忽略 .DS_Store
怎么让 git 忽略 .DS_Store很多前端开发攻城狮都会将 Mac OSX 作为自己的开发环境，在这个环境下往往会出现一些奇妙的问题，比如这篇文章的主要内容——如何让你的 git 忽略 .DS_Store什么是 .DS_Store由于这个文件往往前面有一个 . 所以在 Finder 中是不可见的，但是它确确实实存在于每一个文件夹中，甚至包含外部设备这个文件存储了这个文件夹的元数据...
2019-06-04 21:40:35
1951
原创 你所不知道的HTML5——语音合成
你所不知道的HTML5——语音合成前端能力的增强很大程度上依赖于 HTML5 的新 API，从这篇文章开始我也会对平时做不常用的一些 API 做一下学习总结今天的文章就从语音合成开始为什么想到这个 API 呢？在写报告查资料的时候在 “人人都是产品经理”http://www.woshipm.com/ 上发现了一个有趣的功能（打了丑丑的马赛克）听一下就会发现，播放出来的声音并不是预先...
2019-05-15 21:49:50
937
1
原创 初见函数式编程
初见函数式编程在学习 JS 的过程中时常会听到一个名次——“函数式编程”，那么究竟什么是函数式编程，函数式编程又有什么优点，这就在这篇博客进行一个简单的总结吧～主要内容：函数式编程的概念函数式编程的优点与示例什么是函数式编程首先，我们放下编程的概念，我们来看函数。函数的概念来自于数学，数学中的函数 f(x) = y 有一个非常重要的特点对于一个给定的 x，有唯一的 y 与其对...
2019-05-08 20:25:11
164
原创 ES6计算属性名-代码优化利器
ES6计算属性名-代码优化利器虽然现在已经是2019年4月了（马上就是5月），ES10的草案也已经诞生很久了，但是 ES6 还是有很多没有研究到的地方，本文就是对 ES6 计算属性名的一个简单梳理本文主要内容：ES6 计算属性名计算属性名的应用场景闲话什么是计算属性名计算属性名是 ES6 的一个很大的增强，事实上可计算属性不是一个很新鲜的东西在 ES5 版本中我们也可以通过...
2019-04-30 18:48:00
1250
原创 Docker入门——用docker运行容器（一）
Docker入门——用docker运行容器（一）在我的上一篇文章 Docker——理解Docker中，我们已经进行了一些整理简述了一些 Docker 的基本概念在这篇文章中，我将对Docker的初步使用进行总结，同时进一步明确一些概念安装安装确实没有什么好说的，我相信对Docker有兴趣的你一定不会被这个问题难住（事实上，没有必要写安装步骤，因为即便是写了安装步骤，不久后就会过时的，...
2019-04-19 19:28:12
896
原创 # 浮动与清除浮动
浮动与清除浮动浮动布局是一种常见的布局方式，最初的使用目的是进行图文的混排这篇文章对浮动布局进行简单的总结，包括以下内容：浮动单个浮动元素多个浮动元素父子元素清除浮动浮动的使用场景浮动浮动通过css定义：#div1{ float:left;}浮动可以取的值：none（默认）|left|right当元素进行左浮动或者右浮动之后会脱离文档流，并且构成一个...
2019-04-17 21:40:19
165
原创 margin 重叠
margin 重叠只发生在block元素上(不包括float、absolute、inline-block元素)只发生在垂直方向上(不考虑writing-mode)margin的重叠发生可以发生在父子元素、兄弟元素和元素本身上兄弟元素表现为两个兄弟元素之间的margin会合并，并且按照较大margin宽度的计算布局div{ width:100px; height:1...
2019-04-01 23:56:20
154
原创 CSS盒模型
CSS 盒模型当我们面对一个页面的时候，我们可以将它抽象成一块块矩形区域，页面上的每一个文档元素都占据了这样的一个矩形，像是放在一个个矩形的盒子中，从而我们有了盒模型的概念这篇文章对CSS中的盒子模型进行一个简单的总结两种不同的盒模型盒模型有两种常见的形式，标准盒模型和IE盒模型：W3C的标准模型：容器的width和height仅仅表示内容区域（上图中的content）的宽度和高...
2019-04-01 22:45:28
186
原创 # Docker入门——理解Docker
Docker入门——理解Docker图片源：https://www.docker.com/Docker是什么什么是Docker，可以参考我之前第一次接触Docker写的文章 -> docker 初体验在这里也简单进行一个总结：首先我们要明确容器的概念，容器是一个运行在操作系统内核上的用户空间，可以让多个独立的用户空间运行在同一个宿主机上然而容器的安装、管理和自动化都很复杂，所以...
2019-04-01 19:42:03
2891
7
原创 XSS攻击了解一下
XSS攻击了解一下在准备春招实习的时候突然意识到自己对 web安全领域的知识几乎是空白，下面对在前端可能会遇到的web安全问题进行一个简单的总结，今天就从XSS开始～什么是XSS攻击XSS攻击的全称是 Cross-site script，也就是跨站脚本攻击，为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。XSS攻击是一种经常出现在 web应用的攻击，攻击者通过...
2019-04-01 10:28:49
370
原创 HTML文档头部与元数据
HTML文档头部与元数据在之前的文章中，我对 html 文档的内容做了简单的分割，这篇文章对其中的文档标题—— head 部分进行一个简单的总结～如果没有耐心看长篇大论，可以直接到本文末尾，将会有一个包含了本文大部分内容的 demo～文档头部的作用head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器。head 大部分内容是不可见的，除了 title 和 图标之外。...
2019-03-24 20:05:19
388
原创 初步理解Webpack原理
初步理解Webpack原理曾经在项目中使用过 webpack 进行打包，之后也使用过 vue-cli 这样的基于 webpack 的脚手架构建项目，那今天就来学习一下 webpack 的原理。webpack5已经也许今年就要发布正式版了，不同版本的配置方法都不尽相同，所以这篇文章不涉及任何具体的配置～注： 本文中所有代码仅有示意的作用，不一定是 Webpack 的真实运行结果～什么是W...
2019-03-24 20:04:01
2391
原创 超简单nodejs静态网页服务器
超简单的nodejs静态网页服务器使用 nodejs 进行后端开发有一个非常方便的地方是它可以不依赖于其他的服务器软件，比如 tomcat 之类的。这里对我使用 nodejs 写的一个静态网页服务器做一个简单的总结在这里使用到了以下模块：http：相应基本的 http 请求fs：读取文件并返回path：获取文件的路径url：解析 url第一步，创建一个最基本的服务器let ...
2019-03-24 19:58:59
2889
原创 macbook 无法加入网络
macbook 无法加入网络？在学校的某一栋教学楼中有这样一个传说，所有的 apple 在这个教学楼中都会失去网络连接，成为一个孤岛～在排除是路由器的问题后，在macbook上执行下面的操作也许会有效果～解决方法1关闭Wi-Fi，然后重新连接解决方法2在网络偏好设置中更改 ip解决方法3拔下连接在macbook上的外部设备（比如USB拓展坞）出现这个问题的原因是 macb...
2019-03-24 19:57:45
2660
原创 JS的异步加载
JS的异步加载自觉自己基础不扎实，不应该心猿意马，所以很久没有更新性能优化专栏，回顾总结了一段时间后再来一发吧～在学习前端开发的最开始，就可能有人告诉你，在 body 的末尾再引入 script 标签（收到依赖的jQuery更适合放在前面），书写js代码就提高效率，这到底是为什么呢？引入外部js带来的问题先看一个不好的例子：<body> <!-- body ...
2019-03-16 00:20:09
164
原创 HTML第一步-理解HTML文档
HTML第一步-理解HTML今天在这里整理前端体系中看似最简单，却又暗藏玄机的HTMLHTML的前世今生HTML 的全称是超文本标记语言（HyperText Markup Language），这并不是编程语言而是一种标记语言，通过各种标签来构成一个网页中的内容。到目前位置，比较有影响力的 HTML 的版本有：1991年：html1999年：html4.012000年：xhtml...
2019-03-15 17:48:29
216
原创 HTML基本语法
HTML基本语法不管是编程语言还是标记语言，都要遵循一定的语法，那么，这篇文章对语法进行总结，本文的绝大部分内容都可以在下面这段代码中找到：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title
2019-03-15 17:47:12
154
原创 二叉树
二叉树二叉树的定义，二叉树的链式存储结构，二叉树的顺序存储结构，二叉树的遍历方法注意： 本文不包含平衡树，排序树等特殊的二叉树，敬请期待～什么是二叉树首先我们要明确数据结构中树的概念，树是N个结点的有限集合，这些结点满足下列条件：有且仅有一个特定的结点作为根结点当N>1时，其余的节点构成m个集合，每个集合也构成一棵树树的根结点没有前驱结点树的所有结点有大于等于零个后继结点...
2019-03-12 21:10:59
149
原创 栈与队列
栈与队列栈栈是一种很常用的数据结构，是一个 只能在一端进行插入和删除操作 的线性表。栈的一些基本概念栈顶：线性表允许进行操作的一端栈底：线性表不允许操作的一段后进先出：栈中元素的入栈和出栈操作是符合后进先出规则的，如下图1栈的基本操作一般的栈都会用到如下操作，这里列出的操作也会在后面直接以简称的形式出现～初始化空栈: initStack()判断栈是否为空: isEmpt...
2019-03-12 21:08:52
278
原创 CSS 选择器
CSS 选择器CSS选择器是CSS规则的一部分，位于CSS声明块前，决定了定义的样式规则会被应用到哪些DOM元素上。本文内容建议配合demo食用：https://github.com/Raaabbit/MyNotes/tree/master/CSS%E9%80%89%E6%8B%A9%E5%99%A8这个例子展示了最基本的id选择器、class选择器和标签选择器：#app{ ...
2019-02-25 22:56:39
344
原创 前端知识点——Web Sockets
前端知识点——Web Sockets本系列文章是我在实习面试之前的对自己掌握的知识点的总结，就从一直不太熟悉的webSockets开始吧～WebSockets的第一印象：可以创建和服务器进行双向会话的高级技术，取代了曾经使用的轮询方法。APIWebSocket：用于连接WebSocket服务器的对象CloseEvent：关闭连接时WebSocket对象触发的事件MessageE...
2019-02-24 22:15:55
914
原创 项目总结-SLEEPED
项目总结-SLEEPED项目地址：https://github.com/Raaabbit/sleeped-front-end项目背景课程要求我们使用大数据相关技术来实现一个项目，完整体验一下数据挖掘-预处理-后处理-存储-数据导出-可视化的流程。前端当然是包揽了最终可视化的工作。需求分析我们在生活中有这样的使用场景：我计划在下周末出去玩，要提前预订酒店。昨天我在网上查价格的时候发现...
2018-12-25 13:39:44
673
原创 移动端Web不安分的小键盘
移动端Web不安分的小键盘在进行Webapp开发的过程中遇到了这样的问题——在chrome上模拟很完美的页面，在移动端就变了样子，罪魁祸首就是不安分的小键盘～Bug再现我们先看看PC端的表现：不错不错，这个日历的大小位置都还和符合人类的正常审美让我们上真机调试一下：这是一个非常实实在在的bug，对用户体验造成了毁灭性打击！！！诊断这个原因很简单，因为上面所用的日期选择器是一...
2018-12-12 22:08:44
473
原创 Vue监控路由变化以及应用
Vue监控路由的应用问题来源：我想要实现这样的一个功能，在同一个vue组件内，根据路由的不同分别呈现出首页banner或者是搜索功能错误的解决办法我最初希望单纯使用data(){ return { status:this.$route.query.status||0 //0表示在，1表示进行了初步的查询 } },当然了，这样只能在页面第一次刷新渲染时生成，随后...
2018-12-03 22:40:04
1781
原创 新系统体验Manjaro
新系统体验Manjaro（一）我又双叒叕换了一个linux发行版——Manjaro，年轻嘛，总是想要折腾一下的，事实证明这都是值得滴。之所以暂时不使用deepin是因为deepin的电量管理确实又不小的问题（deepin15.8+DDE桌面+大黄蜂显卡驱动+官方省电模式浏览网页写博客大概2小时断电），希望官方加油呀～官方介绍Manjaro基于Arch Linux，继承了Arch Lin...
2018-11-26 16:55:05
5262
2
原创 mongoDB之创建用户与认证模式启动
mongoDB初体验在使用了一段时间的mongoDB之后，在这里对一些基本操作做一个总结，话不多说，看文～创建用户创建用户有帮助增加数据库安全的作用，在mongoDB中需要下列步骤创建管理员授权认证给使用的数据库添加用户在shell中执行以下操作sudo service mongod start # 启动mongodmongo # 以非授权...
2018-11-15 17:03:50
3989
1
原创 相互依赖的异步操作
一些闲话：在18-19-1学期的项目中，由于想尝试一点没用过的东西，开始大力踩坑，特别感谢身在鹅厂的学长的远程强力支援（敬礼！）正文先简单描述一下我遇到的问题这一段的目的是创建一个myTypeNav，然后利用它的数据构架另外一个mySubNav但是在这里会发现数据并没有传入，这是为什么呢？问题原因由于在myTypeNav的创建过程中有发ajax请求这样的异步操作，所以实际上在re...
2018-11-14 22:28:03
1026
原创 前端性能优化第四篇-为什么在head中引入CSS
前端性能优化第四篇-为什么在head中引入CSS写在前面：有很长一段时间没有更新这个专栏，是因为在准备一些课程上的东西，不过这个专栏一定不会烂尾的~写这篇文章的原因是因为从我初学前端开始，就一直有人告诉我：“样式表文件在head中通过link引入，script文件在body的末尾引入，这样页面加载速度更快。”那么着一切究竟是为什么呢，下面我们来看一下~（如果真的不想看这些铺垫内容，不妨直...
2018-10-14 16:24:30
933
原创 浅谈SEO（一）搜索引擎与SEO
浅谈SEO（一）搜索引擎与SEO作为一个Web开发者，除了要能够写出可用的业务代码，还要在其他方面进行优化。所以我就开了这样一个系列的文章记录我的学习过程，主要内容参考了慕课网的袁三日老师的课程。有兴趣的读者也可以直接戳链接看视频～视频教程搜索引擎搜索引擎（Search Engine）是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用户提供检索...
2018-10-11 21:44:07
777
原创 docker 初体验
docker 初体验在参加RoboCup仿真组的时候遇到了一个很奇怪的问题，实验平台运行的环境是java9+，但是智能体代码的运行环境是java8（高版本不可以）。本来打算起一个虚拟机来运行两份不同的代码，不过室友告诉我一个更好的解决方案，使用docker——更轻量高效的解决方案。什么是docker摘自docker中文社区：Docker是一个开源的引擎，可以轻松的为任何应用创建一个轻量级...
2018-10-01 22:44:13
582
原创 技术总结——JS是怎么运行的
技术总结——JS的执行顺序最近做了一些大厂的面试题目，才发现对JS的运行机制掌握的还是很浅薄，看了不少文档、博客后在这里做一个简单的总结基础知识我们都知道，为了避免对DOM的操作产生冲突（JS诞生之初只是为了给页面赋予一些动态效果），JS只有一个线程。即便是现在有了webworker来实现多线程进行任务处理，但实际上，JS的多线程其实是单线程模拟出来的。所以，为了保证JS的执行效率，异...
2018-09-26 23:01:52
184
原创 deepin系统下mongoDB安装
其实linux下安装mongoDB有很多方法，在这里我介绍一种不不需要额外过多配置的做法 参考链接，官方文档Install MongoDB Community Edition on Linux本文写作于2018-8-20，deepin系统为15.6版本，基于Debian9定制 所以我们可以直接参考官网给出的Debian的安装方法正文我选择使用deb包来安装 导入公共秘钥...
2018-08-28 09:45:02
1449
原创 使用vue-cli3时怎么使用mock数据
使用vue-cli3时怎么使用mock数据在前后端分离的开发模式中，后端给前端提供一个接口，由前端向后端发请求，得到数据后前端进行渲染。由于前后端开发进度的不统一，前端往往使用本地的测试数据进行数据渲染的测试。正文开始在vue-cli构建的项目，我们可以借助devServer开启一个服务，然后我们可以通过路由模拟一个接口来进行测试。 在vue-cli2和vue-cli3中的配置方...
2018-08-20 21:25:55
9410
4
原创 Linux下配置node开发环境
Linux下配置node开发环境由于我们一般都会将服务部署到linux上，所以我个人觉得，使用windows学习node可能会不太好。慢慢的我也将自己的所有开发环境转移到node环境下，今天这篇文章记录了一下我在linux下的配置过程。为什么不用软件库中的node我们都知道，各个linux发行版都有自己的软件库，可以很方便的使用命令安装，比如apt-get(Debian,Ubuntu,...
2018-08-11 16:47:44
1811
原创 前端性能优化第三篇-documentFragment
前端性能优化第三篇-documentFragment 虽然说是第三篇，但是其实算作对第二篇的补充比较合适，没有看第二篇的小伙伴可以戳下面的链接～ 前端性能优化第二篇前戏在第二篇中提到了回流和重绘，一个重要的优化策略就是在创建dom节点的时候将创建多个节点的操作变为一次操作。下面我以我做的一个小项目——服务中心课表查询中的部分代码为例进行一下说明。栗子抱歉抱歉这是...
2018-06-14 21:31:20
1095
原创 前端性能优化第二篇-回流和重绘
前端性能优化第二篇-回流和重绘 先给自己持续更新的专栏打个广告，欢迎大家读一读专栏中的其他文章，戳一戳->前端性能优化浏览器渲染过程先请今天的主角“回流”和“重绘”在后台等一下，我们先来看看浏览器渲染页面的过程，不要跳过这个重要的部分啊～当浏览器得到页面的时候，就开始了它的渲染过程： 1. 解析HTML，构建DOM树（包括了发起http请求来获取链接的内容） 2...
2018-06-14 19:32:59
1155
原创 前端性能优化第一篇-http请求
前端性能优化第一篇-http请求 本系列文章是我在阅读《高性能网站架设指南》时的读书笔记，文章的顺序基本和书的顺序是相同的，同时由于这本书的出版时间比较早了，我会根据现代前端的发展变化做出备注。http请求是提升性能的一个重要方面，我们可以在打开一个网站的时候打开开发者工具的时候看看发生的请求（如果你正在看这篇文章，不妨打开开发者工具，然后看看network，刷新页面），这是就能发现...
2018-04-15 22:12:43
360
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人