- 博客(46)
- 收藏
- 关注
原创 使用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 5282 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 5294
转载 Mock服务
1,定义:mock是在测试过程中,对于一些不容易构造/获取的对象,创建一个mock对象来模拟对象的行为2:使用:当单元测试/接口测试中测试对象依赖其他对象,这些对象的构造复杂、耗时或者根本无法构造(未交付),而我们只测试对象内部逻辑的质量,不关心依赖对象的逻辑正确性和稳定性时,我们使用mock3,原则: 不需要对所有的依赖对象/服务进行mock,只对那些构造步骤复杂、构造耗时较长、不...
2019-01-05 12:26:54 4681
原创 使用websocket实现“你画我猜”
1,环境配置(nodejs)文件结构:package.json:{ "name": "websocket", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test"
2018-11-22 11:11:36 2901 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 640 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 1534
转载 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 1652
原创 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 11734 1
转载 关于并发/并行,阻塞/非阻塞,同步/异步及进程/线程的理解
1. 阻塞,非阻塞 一个线程/进程经历的5个状态,创建,就绪,运行,阻塞,终止。各个状态的转换条件如上图,其中有个阻塞状态,就是说当线程中调用某个函数,需要IO请求,或者暂时得不到竞争资源的,操作系统会把该线程阻塞起来,避免浪费CPU资源,等到得到了资源,再变成就绪状态,等待CPU调度运行。 阻塞调用是指调用结果返回之前,调用者会进入阻塞状态等待。只有...
2018-08-06 11:15:12 219
原创 基于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 5075
原创 图片轮播的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 6219
原创 数据流和数据流框架
1,数据流是行为与响应的抽象。用户在页面上输入表单、按下按钮、拖拽等行为,页面会根据用户的行为给出一些响应,如刷新、跳转、局部刷新、Ajax局部刷新、数据更新等。以对象、方法来把它们抽象出来,这就是数据流。使用数据流可以帮助我们明确行为以及行为对应的响应。 2、React与数据流的关系React是纯V的框架,只负责视图,把视图做成了组件化,不涉及任何的数据和控制,需要数据流进行支撑...
2018-07-29 15:39:38 7633
原创 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 170
原创 模拟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 1592
转载 前端基础总结之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 200
原创 前端基础总结之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 3357 1
原创 DOM的相关知识
DOM节点Node类型节点的属性:(node只能获取当前节点的东西,不能获取里面的东西)(文本节点不等于文本内容)nodeName 节点元素的标签名,和tagName等价nodeType 元素节点的类型值,nodeValue 元素节点的值,元素节点本身没有内容,输出null node本身把节点指针放在元素中,本身没有value层次节...
2018-06-22 11:42:27 133
原创 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关注的人