qq_43031907的博客

原创 fetch 请求封装

let formatUrl = obj => { let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?'); return params.substring(0, params.length - 1);};** * ...

原创 前端面试

手写callFunction.prototype.myCall = function( context = window ){ context.fn = this const args = [...arguments].slice(1) let result = context.fn(...args) delete context.fn return result}...

原创 node获取本机IP地址

// 获取本机IP地址function getIPAdress() { var interfaces = os.networkInterfaces(); for (var devName in interfaces) { var iface = interfaces[devName]; for (var i = 0; i < iface.length; i++) {...

原创 localStroage,cookie操作

export default { get: function (key) { var value = localStorage.getItem(key); if (value) { try { var value_json = JSON.parse(unescape(value)); ...

原创 git常用操作

码云git大全1.远程仓库相关命令检出仓库：$ git clone git://github.com/jquery/jquery.git查看远程仓库：$ git remote -v添加远程仓库：$ git remote add [name] [url]删除远程仓库：$ git remote rm [name]修改远程仓库：$ git remote set-url --push[name...

原创 vue 省市区三级联动组件

<template> <div class="area-linkage"> <template v-for="(option, key) in options" > <span v-if="showLabel">{{option.label}}:</span> <el-select class="select-ch...

原创 vscode自用扩展

beautifyauto rename tagbracket pair colorizereslintlive serverveturvscode-iconsgitLens

原创 前端解析js题目

后端返回的题目数据为：#{“type”:“para_begin”,“style”:“math_text”}#计算49+499+4999=，下面哪一种计算方法最简便( )。#{“type”:“para_end”}#/** * 题目的题干字段解析 * @param stem * @returns {any[]} */function getParagraph(stem) { ...

原创 fastflex.scss

针对flex布局的快速写法，自己用起来感觉挺方便的。.fp { display: -webkit-box; display: -ms-flexbox; display: flex;}.fc { @extend .fp; flex-direction: column; &amp;_c { @extend .fc; align-items: center...

原创 手写一个发布订阅

var Event = { // 通过on接口监听事件eventName // 如果事件eventName被触发，则执行callback回调函数 on: function (eventName, callback) { //你的代码 if(!this.handles){ //this.handles={}; ...

原创 react中遇到的问题

在react开发中，我们经常会遇到这种问题，原因是当我们切换组件的时候，组件已经销毁，而ajax请求还在继续，而该组件已经销毁了，react就是报错，认为内存存在泄漏。...

原创 详解React生命周期及钩子函数

父组件import React , {Component} from 'react'import Son from './Son'class Father extends Component { constructor(props){ // 可以绑定this 设置props 根据属性设置状态 给方法绑定this super(props) ...

原创 Vue中$nextTick,created和mounted的官方解释

原创 详解Vue生命周期及钩子函数

只需要将引入的vue.js改了就可以了&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;g

原创 虚拟dom和diff算法

虚拟DOM ( virtual dom )用一个简单的对象去替代复杂的dom对象，存储了对应dom的一些重要参数，在改变dom之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上。Diff算法 ( 差异算法 )可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把他们应用在真正的DOM树上，页面就变更...

原创 仿淘宝放大镜

可以直接复制代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;放大镜&lt;/title&gt; &lt;link rel="stylesheet" href=&quo

转载 推荐一下大神的前端进阶基础合集

不多说，直接上链接点击这里

原创 排序演示

只需添加一个Jquery文件就可以使用了&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style typ

原创 Javascript设计模式

设计模式它不是一个类库 它不是一个框架 它也不是一段代码 它是解决问题的一种思路和方法1.单例模式 定义：保证一个类仅有一个实例 本质：控制实例数目 单例模式思想在于保证一个特定类仅有一个实例，意味着当你第二次使用同一个类创建信对象时应得到和第一次创建对象完全相同。 //外面包一层自运行函数 var Popup = (fun...

原创 简单模仿行星运动

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt; &lt;/title&gt; &lt;style type="text/css"&gt; * {

原创 元素拖拽及回放

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;完美拖拽&lt;/title&gt; &lt;style type="text/css"&gt; html,body{overflow:h

原创 图片切换(淡入淡出效果)

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;点击表格切换图片 &lt;/title&gt; &lt;/head&gt; &lt;style&gt; .td-c

原创 元素定时器移动（move.js）

//ele——要移动的元素//cssprop——要改变的css样式//targetval——目标值//totaltime——耗时时间(单位是毫秒)//示例：move(box,"left",window.innerWidth,3000);function move(ele,cssprop,targetval,totaltime){ //获取元素当前的属性值 var cur...

原创 透明过渡

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt; &lt;/title&gt; &lt;script&gt; window.onload=function(){ va

原创 数组replace的终极用法

var str=&quot;2018&amp;amp;08&amp;amp;08&quot;; var num=0; var res=str.replace(/\D/g,function(mathed,index,str){ if(num==0){ num++ return &quot;-&quot;; } ...

原创 元素拖动(外部封装函数)

//调用该函数时传的参数是对象// 如 :dragable({// down:p, //点击的元素// target : div, //移动的目标元素// ranger: div, //其有定位的父元素// moving : function(x,y){ //移动时要执行的函数// // },...

原创 表格的动态编辑——含Cookie

HTML&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link href="https://cdn.bootcss.com/bootstrap/3.3.7/

原创 日期处理封装函数（更新中）

//判断某年份是否为闰年 function isLeapYear(year){ return year%4==0 &amp;&amp; year%100!=0 || year%400==0; } //将日期格式化输出 “2015-08-24” function date2string(date, sep){ var sep...

原创 滑动条拖拽（用户评分练习）——js

&lt;!DOCTYPE html&gt;&lt;html charset="UTF-8"&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;!-- 新 Bootstrap 核心 CSS 文件 --&gt;&lt;link rel="stylesheet" href="http://cdn.bootcss

原创 div元素的拖拽及回放效果

本例采用的是js事件捕获&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style&gt;