小结巴巴_个人页

基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

react 服务器端渲染 ssr 中 localstorage/history/window is not defined 解决方案

1、原因 　　  　ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期     也就是说 ssr 阶段是不会执行 componentDidMount 方法的   　当你在 componentWillMount 之前当生命周期里面调用 window / localstorage 全局对象的时候， 　它其实是在服务器上面执行等，因为 window / localstorage 是浏览器的属性对象。

我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。

我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。

中高级前端应该必会，js实现事件委托代理、切换样式、元素获取相对于文档位置等

1、介绍 　　随着组件开发大流行，现在三大框架已经基本占领了整个前端。 　　这时候，我们要是引入一个 jq 是不是先得你的项目非常臃肿，jq 也很不适合。 　　这个时候，你就需要来增加你 js 的功底。

js 计算获取鼠标相对某个点的移动旋转角度

// 旋转角度 function getAngle(cen, first, second) { 　　　　 // cen : 中心点 [0,0]　　　　 // first : 开始点 [1,3]　　　　 // second : 结束位置 [3,4] var ...

Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法

1、为什么会报错 ？ 　　这里抱着错误是因为 babel 的版本冲突。 　　多是因为你的 babel 依赖包不兼容。   　　可以查看你的 package.json 的依赖列表 　　即有 babel 7.

babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...

Babel   官方介绍：将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的  javascript 代码。 简而言之，就是把不兼容的 JavaScript 代码转为可兼容，可以执行的 JavaScript 代码。

前端开发数据mock神器 -- xl_mock

1、为什么要实现数据 mock    　　要理解为什么要实现数据 mock，我们可以提供几个场景来解释， 　　1、现在的开发很多都是前后端分离的模式，前后端的工作是不同的，当我们前端界面已经完成，但是后端的接口迟迟不能提供 　　　 前端很多时候都会等接口。

fetch各种报跨域错误,数据无法获取的解决方案

1、介绍     fetch 提供了一个获取资源的接口 (包括跨域)。     fetch 的核心主要包括：Request , Response , Header , Body     利用了请求的异步特性 --- 它是基于 promise 的   2、用法 var request = new Request('/users.

node使用npm一句命令停止某个端口号 xl_close_port

一命令停止某一个端口号，再也不怕端口号被占用了..   1、插件背景     开启项目的时候，跑不起来了？     很多时候的原因就是，依赖版本，依赖的包未安装，再就是端口号被占用     例如：       这时候，我们做法就是：     1、到命令行去找到端口对应到进程号，然后停止这个进程     2、然后就是打开进程监控，在监控中找到对应端口的应用，关闭它。

react实现ssr服务器端渲染总结和案例(实例)

1、什么是 SSR     SSR 是 server side render 的缩写，从字面上就可以理解     在服务器端渲染，那渲染什么呢，很显然渲染现在框架中的前后端分离所创建的虚拟 DOM   2、为什么要实现服务器端渲染     传统的 SPA 应用 (如 react )，存在不利于优化，首屏加载慢等。

js 最简单的实现复制到剪切板 xl_copy

使用   npm install xl_copy // 项目中安装 import clipboard form 'xl_copy' // 引用 element.onclick = ()=>{     clipboard('test')  // 复制 test }   1、介绍     利用原生...

css3 transform对其他样式影响,(尤其是position:flixed)

1、transform 会为当前元素添加 position ： relative 特性； 当 magin 为负值的时候，就会覆盖到前面的 元素， 然而如果给前面元素添加了transform 属性后，前面的元素就会在上面   2、transform 会限制 position：flxed   当一个元素 有 postion ：flxed 属性当时候，应该是相对于文档定位 然而，当父元素中有 transform 属性的时候，该元素的 postion：flxed 属性就会变成 absolute 。

css3的高级而有用且很少人知道的属性和样式

1、-webkit-mask 概属性可以给一个元素添加蒙层，蒙层可以是一个渐变或者半透明的png图片，这张png图片的 alpha 为 0 的位置会不显示元素这部分，alpha 为 1 的位置会显示元素这部分。

vue-alioss-组件封装

import axios from 'axios' export default { name: 'upload', props:['url'], data() { retur...

3deye-demo-8-14-26-51

源码

闭包/原型/原型链

1.闭包：函数内部的函数 2.优点： 　　1.隔离作用域，防止污染全局 　　2.有自己的独立变量 　　3.缓存 3.缺点 　　1.不容易垃圾回收 　　2.消耗内存     4.原型 ：  　　1.函数有一个prototype对象，可以通过函数的原型对象来实现继承 　　2.原型prototype对象上有一个constructor属性。

js部分基础

1.js的基本类型有哪些？引用类型有哪些？null和undefined的区别。 　　基础类型：number，null，regex，string，boolean 　　引用类型 ： object，function，array 　　null是数据类型，undefined未定义 　　 2.

js-柯里化

1.定义： 　　把一个接受多个参数的函数变成一个以原函数首参数为参数并且返回一个函数来参数其他参数。 　　简单就是把一个含有多个参数的函数，变成分步来完成传参来并且返回函数的函数 2.例子：//将多个参数的函数转为单一参数的函数 function fn(a,b,c){ return a+...

移动端，input输入获得焦点被键盘遮住简单解决方案

(function (window,document) { document.querySelector('input[type="text"]').addEventListener('focus',function (e) { setTimeout(function () { var docHeight = window.

js的jsonp

window.ajaxJsonp=function(params) { params = params || {}; params.data = params.data || {}; var json = params.

复习es6-解构赋值+字符串的扩展

1. 数组的解构赋值 　　从数组中获得变量的值，给对应的声明变量赋值,，有次序和对应位置赋值 　　解构赋值的时候右边必须可以遍历 　　解构赋值可以使用默认值 　　惰性求值，当赋值时候为undefined时候，默认是个函数就会执行函数   2.

复习es6-let和const

1、声明变量的方法 　　es5 : var   function 　　es6 : var   function   let    const   class      2、let（const）与var 不同 　　let不能变量提升 　　let不能多次声明统一变量 　　let不能声明在window...

react-浏览后的想法

源码分析-react3-创建dom

React.createElement class Welcome extends React.Component { constructor(){ super() this.state={ test:1} } render() { return Hello, {this.

源码分析-react1-根节点渲染

源码分析-react2-根节点渲染

//FiberNode{ alternate : '通过该属性和后面的切片进行比较', child : '改切片的子切片', firstEffect : '当前要加入的切片', stateNode : '当前切片的基本信息' }   // Fiber对象 ...

css基础

0. 浏览器读取选择器是从右向左依次选择 div.test p a.son{} 1.选择所有的a.son 返回结果列表 2.检查结果列表中父元素是否有p,返回结果列表 3.返回结果列表中是否有div.

url处理函数

function UrlOption(url) { this.url = url || ''; this.init(); this.change = function (url) { this.

原型继承中对象的问题

function Parent() { this.data={a1:'a1'} this.show=function () { console.

各种排序方法(冒泡,快速,插入,选择)，二分查找

var list = [25,15,60,24,30,70,10,9,8]; //冒泡排序 function bubble(list) { var len = list.

js二叉树,前序/中序/后序(最大最小值，排序)

function Node(data,left,right) { this.left=left this.right=right this.

奇妙的滚动css+html

GetUserMedia实例 #test {height: 60px;width: 40px;margin: 0 0 0 150px;overflow: hidden;background-color: #32db64;position:...

Animations动画和Keyframes关键帧

Title body { display: flex; /* 使用Flex布局 */ justify-content: center; /* 水平居中 */ } .

检测浏览器是否离线

1.属性 navigator.onLine  在线返回true/离线返回false 2.事件 //在线回调函数 window.addEventListener('online', function(e){console.

类的继承

//父类 function Person(){ this.money=1000 } 　　 1.原型链继承 function Sam(){} Sam.prototype = new Person(); Sam.

函数操作(this操作)

1.apply/call函数：会改变this关键字，并且第一个参数作为this关键字。 /*apply与call区别*/ console.log(Array.prototype.join.call(['Hello', 'world'], ' ')); //接受一列参数 console.log(Math.max.apply(null, [1,2,3])); //接受一个数组参数 　　 2.bing：会改变this关键字，并且第一个参数作为this关键字。

html缓存机制，http头部控制

1.缓存分类：服务器缓存(协商缓存)，第三方缓存，浏览器缓存(强制缓存) 2.浏览器缓存(添加 meta)，设置请求指定的http头部信息。（状态码200，from cache , from dist）  2.服务器缓存 （状态码 304 ） 3.http头部属性   　　Expires:设置缓存时间(某一个时间点)，时间过了就重新发送请求 　　   　　Cache-Control（缓存控制）： Cache-Control会覆盖Expires 　　 　　　　Max-age=s　　（请求：当同一个请求再s秒内不会再去取发送请求，直接取缓存。

只用html和css画出不等分圆盘，不用canvas

  .box{height: 200px;width: 200px;border-radius: 100%; overflow: hidden; margin: 200px; position: relative; } .

一个简单的堆栈，逻辑很清晰

function Stack(type) { function QueueConst() {} QueueConst.execute_ing=[], QueueConst.

一个简单的js队列，逻辑很清晰

function Queue(type) { //type 是否是一个接着一个执行 function QueueConst() {} QueueConst.execute_ing=[], QueueConst.

java 反射机制

1.先得到 class (获取类) Class1 = Class.forName('name') Class2 = name.class Class3 = object.getClass() 　　 2.

vue2的简单Popup (Confirm,Alert)组件

                 github:  https://github.com/longfei59418888/vui   （记得给一个 start,以后有一起讨论，各种好组件） 　　　　demo : http://60.205.209.185/#/popup

vue2的简单时间选择组件

  　　github:  https://github.com/longfei59418888/vui   （记得给一个 start,以后有一起讨论，各种好组件） 　　demo : http://60.205.209.185/#/time

时间插件,js格式化,js某月天数,js某月最后一天日期

//时间格式化 Date.prototype.format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.

简单的事件处理类Event

class Event{ constructor(){ this.handlers=[] } on(type,fn){ //订阅事件 if(!this.

浏览器前缀

function getVendorPrefix() { var body = document.body || document.documentElement, style=body.

扩展和深扩展

const _ARRAY_NAME = "[object Array]" const _OBJECT_NAME = "[object Object]" //扩展 export function extend(target) { var targets, arg = Array.

判断是否是空对象

function isEmptyObject(e){ //是否是空对象 var t; for(var t in e){ retrun false; } retrun true; } 　　

js事件捕获和冒泡解析

test document.getElementById('box').addEventListener('click',function () { console.