weixin_38405133的博客

原创 撸个插件给你word-to-html

最近遇到一个需求，需要将非常多内容的（文字/表格）word文档展示出来，这个需求出现在pc端就用插件好了或者直接下载文件？如果需求是在移动端呢？怎么办？转成html吧。。。几十页的word怎么搞？为了造福大家，花了几天时间撸了一个插件word-to-html,可以转嵌套的表格，合并单元格的表格，github地址.emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm!安利一波...

原创 react源码浅析

项目地址

原创 react-transition-group源码浅析(一)：Transition

Props of Transition目录1. Props介绍2. 源码工具函数3. 从生命周期分析组件源码阅读本文你会获得：一个相应的使用案例请看项目react-music-lhy，文档在blog中基于react-transition-group的react过渡动画找到：组件挂载与卸载动画的可以借助appear以及onExit回调函数实现。案例中onExit回调函数主要用于通过路...

原创 React Typescript音乐播放器项目笔记：3、滚动列表复用组件

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyListView.tsxmove事件better-scroll组件Scroll的propType的使用 import React,{ Component, TouchEvent } from 'react' import Loading from 'reuse/loading...

原创 React Typescript音乐播放器项目笔记：4、异步获取数据&保存组件状态

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy面包屑选择页面内容的时候，当推荐页面对应的组件有异步加载未完成的时候，切换到歌手页面，推荐页面组件被卸载，异步加载完成需要setState，此时将会报错：因为组件被卸载无法显示更新后的state。因此组件卸载的时候设置一个标志位unmoutedFlag，并且在setState的时候判断该标志位决...

原创 React Typescript音乐播放器项目笔记：5、除Link外控制路由跳转：withRouter & typescript

项目地址：https://github.com/BUPTlhuanyu/react-music-lhywithRouter在typescript下的使用利用react-router4官方提供的的withRouter进行路由跳转，在项目引入：import { Route, withRouter } from 'react-router'然后利用withRouter包裹组件：class ...

原创 React Typescript音乐播放器项目笔记：6、redux使用方法

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy构建store存储的state数据结构state的数据结构为：｛ singer:singer｝因此对应的reducers/index.ts为import { combineReducers } from "redux";import singer from './singer'...

原创 React Typescript音乐播放器项目笔记：2、歌曲信息页&typescript的用法

项目地址：https://github.com/BUPTlhuanyu/react-music-lhySinger.tsximport React,{ Component } from 'react'import './Singer.scss'import {getSingerList} from 'api/singer.js'import {ERR_OK} from 'api/conf...

原创 React Typescript音乐播放器项目笔记：1、图片懒加载组件优化

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy图片懒加载组件优化代码如下：往往一个项目不止一处需要图片懒加载，可能不同的页面不同的场景需要懒加载，对应的目标元素的className不能设置为同一个，因为在切换页面或者场景的时候，可能获取到了不同页面或者场景的元素，会出现bug，因此这里为每个场景都设置不一样的className标志。提高复...

原创 React Typescript音乐播放器项目笔记：8、图片懒加载

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyRecommend.tsximport LazyImage from 'reuse/lazyimg/Lazy-img'...<div className="recommend"> <Scroll scrollStyle="recom...

原创 React Typescript音乐播放器项目笔记：7、loading组件

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyloading组件选用纯函数组件实现：import React, {Component} from 'react'import './loading.scss'import loadingGif from './loading.gif';interface loadingProps{...

原创 React Typescript音乐播放器项目笔记：6、scroll组件：移动端滚动

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyscroll组件：移动端滚动import React, {Component} from 'react'import BScroll from 'better-scroll'interface scrollProps{ children:any, scrollStyle:...

原创 React Typescript音乐播放器项目笔记：5、create-react-app搭建代理（二）

项目地址：https://github.com/BUPTlhuanyu/react-music-lhycreate-react-app搭建代理（二）create-react-app搭建代理（一）介绍了如何通过devServer.before自定义路由从而搭建代理，本文给出另外一种方法。经过npm run eject之后配置代理，create-react-app用的是webpack-dev-se...

原创 React Typescript音乐播放器项目笔记：4、create-react-app搭建代理（一）

项目地址：https://github.com/BUPTlhuanyu/react-music-lhycreate-react-app搭建代理（一）经过npm run eject之后配置代理，create-react-app用的是webpack-dev-server实现一个简单的web服务器，webpack-dev-server是基于express实现的。webpack-dev-server相...

原创 React Typescript音乐播放器项目笔记：3、http-proxy-middleware

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyhttp-proxy-middleware本文翻译自Github http-proxy-middleware官方文档核心概念Proxy中间件配置.proxy([context,] config)var proxy = require('http-proxy-middleware')...

原创 React Typescript音乐播放器项目笔记：2、基于better-scroll的react轮播图组件

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy基于better-scroll的react轮播图组件由于beter-scroll官方给出的例子都是vue组件的实现没有react组件的实现，结合项目给出了react的轮播图组件的实现。vue组件代码：vue轮播图组件better-scroll版本以及react的版本分别是"@types/...

原创 React Typescript音乐播放器项目笔记：1、Tab组件与路由

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyIndex.js关键代码如下：import fastclick from 'fastclick'fastclick.attach(document.body);import { BrowserRouter } from 'react-router-dom'ReactDOM.rend...

原创 React Typescript音乐播放器项目笔记：1、搭建项目

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy搭建项目利用react官方提供的 create-react-app创建react+typescript的项目(create-react-app版本为2.1.3)npx create-react-app my-app --typescript这条命令会临时安装 create-react-a...

原创 React Typescript音乐播放器项目笔记：2、alias与tsconfig的配置

项目地址：https://github.com/BUPTlhuanyu/react-music-lhyalias配置首先在paths.js写好路径，如下module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic...

原创 React Typescript音乐播放器项目笔记：综述

项目地址https://github.com/BUPTlhuanyu/react-music-lhy项目运行npm installnpm start项目中用到的一些自定义types在common/js/typings目录下可以通过dts-gen为没有types的npm包自动生成d.ts声明文件项目笔记D11、搭建项目2、alias与tsconfig的配置D21、Tab...

原创 利用nvm管理node版本，并解决webstorm下node不是内部或外部命令的问题

如果你安装好nvm并且能成功管理node版本（任意目录下输入node -v和npm -v如果能获取版本那么说明已经成功），但是在webstorm下node和npm不是内部命令那么需要重启电脑，打开webstorm之后，会出现configuring nodejs support的弹窗，配置好之后就可以愉快的用npm了...

原创 两道题测试你是否理解js中的提升

原创 HTTP请求报文和响应报文

原创 MDN文档Polyfill解读之indexOf

// Production steps of ECMA-262, Edition 5, 15.4.4.14// Reference: http://es5.github.io/#x15.4.4.14if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(searchElement, fromIndex) { ...

原创 github在线预览无法动态加载外部css文件的问题（一）

在做js原生路由的时候出现一个问题，比如代码为： var lifeLink=document.createElement('link'); lifeLink.rel="stylesheet"; lifeLink.type="text/css"; lifeLink.href='../pages/life.css'; var...

原创 Range Sum Query - Immutable

Given an integer array nums, find the sum of the elements between indice

原创 不同的路径 II

 "不同的路径" 的跟进问题：  现在考虑网格中有障碍物，那样将会有多少条不同的路径？  网格中的障碍和空位置分别用 1 和 0 来表示。

原创 不同的路径

 有一个机器人的位于一个 m × n 个网格左上角。  机器人每一时刻只能向下或者向右移动一步。机器人试图达到网格的右下角。  问有多少条不同的路径？...

原创 爬楼梯

假设你正在爬楼梯，需要n步你才能到达顶部。但每次你只能爬一步或者两步，你能有多少种不同的方法爬到楼顶部？

原创 最小路径和

 给定一个只含非负整数的m*n网格，找到一条从左上角到右下角的可以使数字和最小的路径。

原创 JavaScript数字三角形

原创 32位w7系统下mongodb数据库安装配置

数据库下载：https://www.mongodb.org/dl/win32/i386数据库安装与配置：https://www.cnblogs.com/cnblogs-jcy/p/6734889.html数据库开启与关闭：需要以管理员身份开启与关闭或者删除MongoDB服务进程，并且在bin目录下运行启动MongoDB服务 命令：net start MongoDB关闭MongoDB服务：net s...

原创 腾讯笔试算法题

输入歌曲总长度以及第一类歌曲长度A以及数量X和第一类歌曲长度B以及数量Y。输出总共有多少种歌曲组合方法。var sum=5;var A=2;var X=3;var B=3;var Y=3;var rest,x,y,methods;for(var i=X;i>=0;i--){ rest=sum-i*A; if(rest>0&&rest%B==0...

原创 js数组总结

1、 indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。NaN!=NaN//ES5[NaN].indexOf(NaN)// -1//ES6[1, 2, NaN].includes(NaN) // true2、 fill方法还可以接受第二个和第三...

原创 arr=Array.prototype.slice.call(arrLikeObject)类数组对象转数组

arguments对象是什么样?arguments对象是具有length属性的对象，并且函数参数的键为自然数，这种对象称为类数组对象，arguments对象的length属性的值是可以重新赋值的。利用Array.prototype.slice.call(arguments)返回的是一个按arguments的length属性值为长度的数组，并且其数组元素分别是arguments键为自然数对应的值。...

原创 mongodb数据库基本操作

查询数据库列表>show dbs查看当前连接在哪个数据库下面>db  切换到名为dbName的数据库>use dbName查看dbName数据库下名字为site集合或者表>db.site.find()

原创 vue中的侦听属性

HTML：{{ fullName }}Vue：var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.f

原创 vue-router嵌套路由

js如下：// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 //Vue.use

原创 vue笔记——vue中的子组件引用

vue官网是这样描述$refs的在javascript中直接访问子组件，可以使用ref为子组件指定一个引用ID var parent = new Vue({ el: '#parent' })// 访问子组件实例var child = parent.$refs.profile$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避

原创 boot内核清理

查看现有内核 dpkg --get-selections|grep linux-image 查看当前使用内核 uname -a 清除未使用的内核 sudo apt-get purge 内核名称使用如下命令就可以清除干净那些deinstall的内核sudo dpkg -P deinstall的内核名称