- 博客(46)
- 收藏
- 关注
RSS订阅原创 使用docker部署Prometheus的Alertmanager工具，并配置邮件报警
下载运行Alertmanagerdocker run -d -p 9093:9093 -v /root/alertmanager/:/etc/alertmanager/ docker.io/prom/alertmanager:latest --config.file=/etc/alertmanager/config.yml如果没有配置config.file会启动失败，具体原因不明。co...
2020-01-09 14:55:29
5277
1
原创 虚拟机使用docker搭建Prometheus
首先使用docker拉取镜像包docker pull prom/node-exporterdocker pull prom/prometheusdocker pull grafana/grafana启动node-exporterdocker run -d -p 9100:9100 \-v "/proc:/host/proc:ro" \-v "/sys:/ho...
2020-01-09 14:44:22
689
转载 关于构建项目的理解
1，什么是构建项目？ 前端项目中，项目的构建可以理解为编译，是要将源代码转化成宿主浏览器可以执行的代码，核心是对资源的管理，产出包括JS,CSS,HTML等资源。 项目构建过程一般在脚手架创建初始项目文件之后，程序员编写完主要功能，需要进一步对项目文件进行处理。2，构建需要解决的问题 a,面向语言 ECMASc...
2019-01-06 17:45:47
5292
转载 Mock服务
1，定义：mock是在测试过程中，对于一些不容易构造/获取的对象，创建一个mock对象来模拟对象的行为2：使用：当单元测试/接口测试中测试对象依赖其他对象，这些对象的构造复杂、耗时或者根本无法构造(未交付)，而我们只测试对象内部逻辑的质量，不关心依赖对象的逻辑正确性和稳定性时，我们使用mock3，原则： 不需要对所有的依赖对象/服务进行mock，只对那些构造步骤复杂、构造耗时较长、不...
2019-01-05 12:26:54
4648
原创 使用websocket实现“你画我猜”
1，环境配置（nodejs）文件结构：package.json：{ "name": "websocket", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test"
2018-11-22 11:11:36
2900
1
原创 星星评分的实现和改进
1，首先下载星星的图片下载logo的网址 https://icomoon.io/2，使用雪碧图雪碧图合成地址 https://www.toptal.com/developers/css/sprite-generator.bg-star_o { width: 26px; height: 28px; background: url('css_sprites.png') -10px...
2018-11-21 16:50:14
353
原创 Jquery时间插件
使用一个闭包自执行函数编写插件，传入JQuery对象。(function($){ $.fn.extend({ clock:function(options){ var defaults = {height:'50px',width:'130px',fontSize:'16px', backgro...
2018-10-26 20:19:18
899
原创 jQuery源码解读之init函数
jQuery的构造方法：// 直接new了一个对象。同时根据jQuery.fn = jQuery.prototype，jQuery.fn相当于jQuery.prototype。jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context );},jQue...
2018-10-26 13:00:59
638
1
原创 webpack.config.js的loaders和配置
1，loaders1, babel-loader:npm install --save-dev babel-loader@7.1.5 babel-core babel-preset-env{ test: /\.js$/, exclude: path.resolve(__dirname,"./node_modules"), include:path....
2018-10-15 16:16:16
1533
转载 Nodejs实现静态服务器
文件结构：assets文件夹存放请求的文件app.js文件实现服务器，运行时执行node app浏览器在3000端口请求url为http://localhost:3000/app.html//nodejs实现一个静态文件系统var url = require('url');var http = require('http');var fs = require('fs')...
2018-09-07 16:09:16
1649
原创 JS实现五笔编码查找对应index（nodejs实现）
题目：假定一种编码的编码范围是a ~ y的25个字母，从1位到4位的编码，如果我们把该编码按字典序排序，形成一个数组如下： a, aa, aaa, aaaa, aaab, aaac, … …, b, ba, baa, baaa, baab, baac … …, yyyw, yyyx, yyyy 其中a的Index为0，aa的Index为1，aaa的Index为2，以此类推。 编写一个函数，输入...
2018-08-22 11:09:24
732
原创 nodejs模块和方法
1，模块加载规范 ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。 Nodejs 有一个简单的模块加载系统。在 Nodejs 中，文件和模块是一一对应的（每个文件...
2018-08-12 21:44:48
1134
转载 正则表达式
RegExp实例对象有五个属性 1.global：是否全局搜索，默认是false 2.ignoreCase：是否大小写敏感，默认是false 3.multiline：多行搜索，默认值是false 4.lastIndex：是当前表达式模式首次匹配内容中最后一个字符的下一个位置，每次正则表达式成功匹配时，lastIndex属性值都...
2018-08-11 13:06:33
106
原创 ajax的实现和方法
原始方法实现ajax方法：//函数赋给一个元素的click事件function ajax() { //先声明一个异步请求对象 var xmlHttpReg = null; if (window.ActiveXObject) {//如果是IE xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP"); } e...
2018-08-09 19:07:57
226
转载 Gulpfile.js任务分析
//引入gulpconst gulp = require('gulp'); //自动加载配置文件中的已安装插件，不需要一个一个require（package.json中声明的依赖）const gulpLoadPlugins = require('gulp-load-plugins'); //浏览器同步，快速响应文件更改并自动刷新页面const browserSync = requ...
2018-08-09 17:50:13
376
转载 JS异步编程的四种方法
一、回调函数，这是异步编程最基本的方法假定有两个函数f1和f2，后者等待前者的执行结果，如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000);} 采用这种方...
2018-08-06 11:19:59
11732
1
转载 关于并发/并行，阻塞/非阻塞，同步/异步及进程/线程的理解
1. 阻塞，非阻塞 一个线程/进程经历的5个状态，创建，就绪，运行，阻塞，终止。各个状态的转换条件如上图，其中有个阻塞状态，就是说当线程中调用某个函数，需要IO请求，或者暂时得不到竞争资源的，操作系统会把该线程阻塞起来，避免浪费CPU资源，等到得到了资源，再变成就绪状态，等待CPU调度运行。 阻塞调用是指调用结果返回之前，调用者会进入阻塞状态等待。只有...
2018-08-06 11:15:12
218
原创 基于webpack构建一个React应用
1，创建一个空白文件 React-music-player2，使用npm init 创建一个package.json文件，并安装相关依赖"dependencies": { "autoprefixer": "^9.0.2", "pubsub-js": "^1.6.0", "react": "^16.4.1", "reac
2018-08-01 12:34:58
360
原创 文字跑马灯的CSS实现
使用 transform:perspective(300px) rotateY(-67.3deg); perspective 属性定义 3D 元素距视图的距离，与 perspective-origin 属性一同使用该属性，就能够改变 3D 元素的底部位置。transform-origin 设置旋转元素的基点animation: marquee 5s linear infinite; ...
2018-07-30 10:52:03
5073
原创 图片轮播的JS和CSS实现
JS实现方法：//实现自动轮播function autoMove() { if (n >= (count - 1)) { n = 0; } else { ++n; } $(".body1 .adver ul li").eq(n).trigger("click"); //触发点击事件}function picRoll() { //为不同图片设置不同背景色...
2018-07-30 10:43:19
381
转载 强缓存和协商缓存
浏览器缓存包含两种类型，即强缓存（也叫本地缓存）和协商缓存，浏览器在第一次请求发生后，再次请求时：浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信； 如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返...
2018-07-29 16:38:19
6217
原创 数据流和数据流框架
1，数据流是行为与响应的抽象。用户在页面上输入表单、按下按钮、拖拽等行为，页面会根据用户的行为给出一些响应，如刷新、跳转、局部刷新、Ajax局部刷新、数据更新等。以对象、方法来把它们抽象出来，这就是数据流。使用数据流可以帮助我们明确行为以及行为对应的响应。 2、React与数据流的关系React是纯V的框架，只负责视图，把视图做成了组件化，不涉及任何的数据和控制，需要数据流进行支撑...
2018-07-29 15:39:38
7632
原创 JS一般算法
回文算法（去除标点和空格，看字符串是否正反相同）function palindrome(str) { var strno = str.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]|\s+/g,"")...
2018-07-23 19:59:39
871
原创 根据table的不同列排序
function sort(type, order) { var table_tbody=document.getElementsByTagName("tbody")[0]; var table_tr = table_tbody.getElementsByTagName("tr"); var tempArr = []; var temp_tr_ar...
2018-07-23 19:58:05
512
转载 Git一般操作
Git上传代码一般步骤：1). touch README.md创建说明文档，2). git init初始化本地仓库3). git add .添加全部已经修改的文件，准备commit 提交该命令效果等同于 git add -A4). git commit -m ‘提交说明’将修改后的文件提交到本地仓库，如：git commit -m ‘增加README.md说明文...
2018-07-23 19:51:02
290
转载 常用排序算法
一、冒泡排序 主要思路是：通过交换相邻的两个数变成小数在前大数在后，这样每次遍历后，最大的数就“沉”到最后面了。重复N次即可以使数组有序。1、比较相邻的元素。如果第一个比第二个大，就交换他们两个。2、对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。3、针对所有的元素重复以上的步骤，除了最后一个。4、持续每次对越来越少...
2018-07-19 16:05:18
86
原创 统计01串在另一个01串的匹配可能性
<!-- 方法一 --><script> function count(str1, str2){ var reg1 = str2.replace(/\?/g, '(0|1)'), reg = new RegExp(reg1,'g'), len =str1.length - str2.length + 1, array = []; consol...
2018-07-19 15:45:21
169
原创 模拟CSS选择器程序
点击浏览器元素，弹出该元素的id、class或元素名function cssSelector(element){ var parents=[]; var classes=[]; var ids=[]; var string=[]; var finalString = "html body"; parents.push(element.nodeName); classes.pus...
2018-07-19 15:42:31
309
原创 前端自动化构建工具
为什么要使用前端构建工具？ 自动化！！！！ 对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。 当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。 Gruntgrunt需要package.js...
2018-07-19 11:10:31
1591
转载 前端基础总结之JS（中）
JS类的实现及实例化在JavaScript中可以使用function关键字来定义一个“类”，在函数内通过this指针引用的变量或者方法都会成为类的成员。1，构造函数一个指明了对象类型的函数，构造函数来创建对象(class),然后通过new这个关键字来实例化一个对象（1）当解释器遇到new操作符时便创建一个空对象；（2）开始运行class这个函数，并将其中的this指针都指向这个...
2018-07-09 17:00:14
149
转载 前端基础总结之JS（上）
数据类型： 基本数据类型：Number、String 、Boolean、Null和Undefined 按值访问，可以操作保存在变量中实际的值，存放在栈(stack)内存中的简单数据段，数据大小确定，内存空间大小可以分配。引用数据类型：对象，包括函数，数组，日期等存放在堆(heap)内存中的对象，变量实际保存的是一个指针，这个指针指向另一个位置。创建一个引用数据了类型时，...
2018-07-09 16:58:04
102
转载 浏览器存储技术
请描述一下 cookies，sessionStorage 和 localStorage 的区别？cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。第一：每个特定的域名下最多生成20个cookie1.IE6或更低版本最多20个cookie 2.IE7和之后的版本最后可以有50个cookie。 3.Firefox最多50个cookie 4.chrome和Sa...
2018-07-09 16:41:28
269
转载 关于跨域
1、同源策略:同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同。不受同源策略限制的：1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。2、跨域资源的引入是可以的。但是js不能读写加载的...
2018-07-09 16:12:55
196
原创 前端基础总结之CSS
display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
2018-06-26 19:56:55
268
转载 前端基础总结之HTML
HTML语义化 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。内核（渲染引擎）1、Trident内核：代表...
2018-06-26 19:01:18
135
原创 前端基础总结之HTTP
HTTP 是浏览器和服务器通信时所采用的协议，它的特点有： 1，基于TCP/IP通信协议, 2，工作过程： 浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求 Web服务器根据接收到的请求后，向客户端发送响应信息。 3，无连接/无状态：（节省传输时间） 无连接的含义是限制每次连接只处理一个请求 服务...
2018-06-26 16:36:13
136
转载 HTML5与ES6
HTML5增加标签：1、结构标签（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；（2）article：特殊独立区块，表示这篇页眉中的核心内容；（3）aside：标签内容之外与标签内容相关的辅助信息；（4）header：某个区块的头部信息/标题；（5）hgroup：头部信息/标题的补充内容；（6）footer：底部信息；（7）na...
2018-06-22 11:50:27
3356
1
原创 DOM的相关知识
DOM节点Node类型节点的属性：（node只能获取当前节点的东西，不能获取里面的东西）（文本节点不等于文本内容）nodeName 节点元素的标签名，和tagName等价nodeType 元素节点的类型值，nodeValue 元素节点的值，元素节点本身没有内容，输出null node本身把节点指针放在元素中，本身没有value层次节...
2018-06-22 11:42:27
132
原创 grunt sass失败
错误1：显示sass/copy not found（任务没有载入） 出现这个错误是因为没有在项目中安装"load-grunt-tasks"错误2：grunt-sass失败但是grunt-copy可以成功，是因为没有安装grunt-sass3，安装grunt-sass ，最后可成功 成功运行grunt sass任务...
2018-06-22 11:38:10
213
转载 nodejs笔试编程（单行多行输入）
单行输入const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});//单行输入rl.on('line',function(line){ var tokens = line...
2018-06-21 20:16:50
4143
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人