- 博客(71)
- 收藏
- 关注
RSS订阅原创 css布局面试题
三栏布局float布局浮动的缺点是造成元素脱离文档流，如果处理不好，后边的元素会塌陷，但是浮动的兼容性比较好，并且容易实现，在处理好与周边元素的关系的情况下，浮动还是很好的选择，也是大部分情况下采用的方案。// html <div className="box"> <div className="left">left</div> <div className="right">right</div> // center
2021-07-22 14:10:31
239
原创 实现环形进度条
css3方式const Circle = () => { const [step, setStep] = React.useState(0) const handleAdd = () => { let num = (step + 10) * 3.6 const leftEl = document.getElementsByClassName('left') const rightEl = document.getElement
2021-07-17 18:58:49
219
原创 webpack
什么是webpackwebpack可以看做是模块打包机，它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（less, typsscript等），并将其打包为合适的格式以供浏览器使用。可以做的事情代码转换（将less转换为css，将es6转换为es5等）文件优化（压缩代码体积、合并文件等）代码分割（公共代码抽离、路由懒加载等）模块合并 （按照功能将多个模块合并成一个模块）自动刷新（本地起服务，进行热更新）代码校验（校验代码是否符合规范，e
2021-07-11 22:29:50
144
原创 ts组件库总结
React.isValidElement(element)： 判断是否不是React组件，可以用在增强代码的健壮性，比如使用HOC时，确定传入的是不是一个React Element，防止渲染的时候出错。Omit<T, K extends keyof T>：从T对象中剔除K属性，K属性继续于T（即保证剔除的属性必须在T中）并创建一个新的对象类型Exclude<T, U> – 从T中剔除可以赋值给U的类型。Extract<T, U> – 提取T中可以赋值给U的类型。.
2021-07-09 13:52:58
452
原创 typescript初级
tsconfig.json（ts配置）“strictNullChecks”: truets有undefined和null两个空类型的设计 ，使用上不方便，开启此项进行严格校验空值类型，让代码更安全。“moduleResolution”: “node/classic”node: 引用模块时，会从node_modules文件中检查模块是否存在classic: 引用模块时先从项目中查找模块是否存在，若不存在再查找node_modules文件。“jsx”: “preserve | react
2021-07-06 21:57:59
265
4
原创 基于dumi+father-build 的组件库开发和文档模板
组件开发脚手架// 安装脚手架npx @umijs/create-dumi-lib// 下载依赖npm i// 启动npm start文档构建// 构建文档$ npm run docs:build// 查看构建后的文档$ cd docs-dist// 全局安装http-server$ npm i -g http-server$ http-server -p 3030// 访问127.0.0.1:3030，进入dist/index.html即可源码构建// 构建本地
2021-06-23 16:06:37
1212
原创 实现 n 重循环的算法，n 是变量，且每重循环的循环次数也是变量
实现 n 重循环的算法，n 是变量，且每重循环的循环次数也是变量。例如:传入参数是 [1, 2]，那么意味着外层循环数是 1，内层循环数数是 2。如果传入参数是 [2, 2, 1]，那么意味着最外层循环数是 2，次层循环数数是 2，最内层循环数是 1，依此类推。要求打印出每一次循环的维度索引, 且不允许使用递归。用 javascript 伪码表示为：var dims = [2, 2]loopGen = require('your-generator')(dims)for indexes of
2021-03-17 14:28:35
1233
原创 非递归实现n重循环
function print_trv(arr){ let queue = [[]]; while(arr.length){ let n = arr.shift(); let len = queue.length; while(len--){ let cur = queue.shift(); for(let j = 0 ; j < n; j++){ queue.
2021-03-17 14:19:29
176
原创 根据根结点查询所有父结点
findParentNodes = (id, list, result=[]) => { for(var i = 0; i < list.length; i++) { var tmpResult = result.concat() tmpResult.push(list[i].id) if(id == list[i].id) { return tmpResult } if(list[i]
2021-03-16 17:53:14
157
原创 css水平垂直居中
水平垂直居中// 结构 <div className='wrap'> <span></span> <img src={item.src} /> </div> // css .wrap { width: 750px; height: 100%; span { display: inline-block; height: 100%; vertical-align:.
2021-01-04 15:45:49
89
原创 吸顶操作
<div class='head-wrap'></div><div class='head'></div>export default class head { constructor() { this.init(); } throttle (func, delay) { var pre...
2020-01-19 17:34:28
205
原创 随笔
搭建私有npm : 1、sinopia 2、verdaccio（https://www.jianshu.com/p/1d0e85d14234） 3、nexus(https://www.jianshu.com/p/9085f47726a2)搭建私有npm的三种方法：https://xbl.github.io/2018/03/15/npm-private/node创建自定义命令行：c...
2019-12-11 21:19:27
120
原创 fetch封装
import CONSTANT from './CONSTANT'import { Toast } from 'antd-mobile'import {getAppLogin, isNetworkConnected, showNoNetPage} from '../utils/getAppApi'import { history } from '../utils/history'impor...
2019-12-09 22:47:58
243
原创 面试题（高级篇）
React组件销毁中清理异步操作和取消请求通常是 react 组件已经从 DOM 中移除，但是我们在组件中做的一些异步操作还未结束，如：接口调用等，当其完成时，执行setState操作，而此时我们已经将改组件dom移除，从而报错。componentWillUnmount() { this.setState = (state, callback) => { return...
2019-12-05 23:57:02
212
原创 redux
redux是什么redux专注于状态管理的库，解藕react(即不依赖于react，vue或者angular等也可以使用）单一状态，单向数据流核心概念：store、action、state、reducer通过reducer新建store（store中记录所有的state，store有三个方法，getState, dispatch, subscribe），随时通过store.getS...
2019-12-05 22:21:47
226
原创 面试题（综合概念篇）
语义：语义化就是让计算机能理解的内容爬虫程序：爬虫程序是一种自动访问互联网页面并收集信息，以供人们检索的程序。网站：位于服务器上的一个文件夹，文件夹中放置着网站中的所有的资源。URL（统一资源定位符）：使用统一的格式定位网络上的资源格式： 协议://IP或域名:端口号/URI协议：http, ftp, mailtoIP或域名：用来定位服务器端口号：用来确定通信端...
2019-12-05 16:36:28
134
原创 排序
直接选择排序：用数据的第一个元素与后面的每一个元素比较，如果第一个元素比后面的某个元素大那么两个元素做交换，然后再用第二个元素与后面的第一个元素做比较，如果第二个元素比后面的某个元素大那么两个元素做交换，以此类推。var arr = new Array(12,24,35,21,14,17,19,20,32); for (i = 0; i<arr.length; i++) { ...
2019-12-04 22:21:02
93
原创 面试题（CSS篇）
高度自适应布局固定200px自适应固定200px<body> <div class='top'>200px</div> <div class='main'>自适应</div> <div class='bottom'>200px</div></body>.to...
2019-12-03 20:09:14
167
原创 面试题（javascript篇）
使用call,apply来实现继承// call(obj, arg1, arg2)：将参数1为调用对象的上下文，使调用的方法当做自己的方法来使用。// 相同点：这两个方法的作用是一样的，都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域//一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指...
2019-12-03 15:58:42
289
原创 面试题（nodeJS篇）
CommonJS是一套规范，来约定javascript应该如何组织如何编写。什么是同步，异步？同步： 执行一个任务，后一个任务等待前一个任务结束再执行，程序的执行顺序与任务的执行顺序是一样的，JS是单线程。异步：每一个任务都有一个或多个回调函数，前一个任务结束后不是执行后一个任务而是执行回调函数，后一个任务也不是等待前一个任务结束就执行，程序的执行顺序与任务的排列顺序是不一致的。如：se...
2019-11-30 16:11:20
208
原创 面试题（react篇）
JSX: Javascript xml是facebook为react开发的语法糖。语法糖：糖衣语法，指计算机语言中添加的某种语法，这种语法对语言功能没有任何影响，但方便程序员的使用，主要目的增加程序的可读性，从而减少代码出错的机会。（js语法糖有JSX、typeScript，最终都会被解析为js)React components 从创建至消失的生命周期及在生命周期内状态与属性的变化...
2019-11-30 14:34:04
259
原创 面试题（http协议篇）
http协议流程？http客户端发起请求，创建到服务器的端口，默认为8080http服务器在端口端监听客户端请求收到请求后服务器向客户端返回状态（如：200等）和内容（如：错误信息等）输入网址回车或者F5刷新时，计算机与浏览器的交互过程？域名解析：chrome浏览器搜索自身的DNS缓存，查看自身的DNS缓存是否存在，若有缓存，则查看是否过期，若未过期则结束；若浏览...
2019-11-30 14:31:04
259
原创 解决iOS的H5页面卡顿以及键盘回落后留白问题
最近做的一个H5刚开开心心提测就被QA一顿怼????，当input输入完成后页面简直卡成翔????，当我接过手机亲自测试时慌的一批????，顿时开始怀疑人生????，马上开始进入紧张的排查中????，经过两天不断的调试优化????，最终完美解决所有问题❤️，此文可以彻底解决iOS的H5页面卡顿以及键盘回落后留白问题????。#1.定位问题当QA和我反映页面卡顿只在iOS上出现时，第一反应肯定不是代码的问题，我也很纳闷iOS性能普遍要比...
2019-11-15 20:22:38
1273
原创 微信拍照和选择相册照片功能chooseImage
这个需求做下来参考了不少文章，其实大多都是一知半解，每个人遇到的问题不同，这篇文章可以说彻底解决wx.chooseImage的各种疑难杂症，一步到位,因此趁着今天休息把整个过程记录下来，分享给之后有需要的各位同行！最近在做一个复杂的跨五端（PC、H5、小程序、iOS、android）的需求，历时将近两个多月，其中酸甜苦辣冷暖自知，近日终于可以封板上线，回忆整个开发过程，深坑不断，收获颇多，今天先...
2019-11-15 20:10:35
4683
2
原创 前端性能优化的9大问题
1、请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，...
2019-11-15 16:31:08
430
原创 单页web应用javascript从前端到后端（第二、三部分）
第三章 开发Shell单页应用使用锚来驱动应用状态（即路由）URI的锚组件指示浏览器显示页面的哪个部分。锚的其他常见名字是书签组件或者哈希片段。锚总是以‘#’符号开头，如：http://localhost:3008/spa.html#!chat=open（之前是用于较长文章的章节跳转）锚组件的一个独特功能是，在它改变的时候，浏览器不会重新加载页面。锚组件是只给客户端使用的组件，它是保存应用...
2019-04-26 17:59:53
435
原创 单页web应用javascript从前端到后端（第一部分）
第一章 第一个单页应用1.1.3(page8) 下图展示了业务逻辑和HTML的生成是如何从服务端迁移到客户端的。
2019-04-19 10:50:24
324
原创 react虚拟dom解读
react虚拟dom解读什么是虚拟dom？一、DOM是什么？二、浏览器呈现页面机制虚拟dom有什么好处功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowch...
2019-04-16 16:09:51
196
原创 react兼容IE11
cop-web-ui 兼容IE11方案1.增加垫片polyfills.js (具体可参考npm包react-app-polyfill)2.webpack打包入口修改appIndexJsProd: { api: resolveApp (‘src/apiEntry.js’),main: [require.resolve(‘./polyfills’), resolveApp (‘src/inde...
2019-03-19 09:50:24
1607
原创 面试题（二）
回忆总结了一下面试题：一、react diff算法二、react 虚拟dom 原理三、react setState 异步实现原理，为什么要涉及成异步？四、react 新版本的新特性五、react优化方案、具体规范六、es6 常用方法？ 箭头函数、class继承、数组方法、块级作用域七、防抖、节流八、class语法糖怎么实现九、store按模块拆分、hash路由越到锚点怎么处理十...
2019-03-07 17:03:32
121
翻译 H5项目常见问题及注意事项
Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构&amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&amp;
2018-09-02 15:32:29
402
翻译 浅谈搜索引擎_SEO
SEO（Search Engine Optimization搜索引擎优化）：是免费提高网站流量与缩小排名的一种手段 SEM（Search Engine Marketing 搜索引擎营销）：是以收费的方式提高网站流量与缩小排名；根据用户使用搜索引擎的方式，利用用户检索信息，尽可能的将搜索引擎的一些搜索信息传递给目标用户，即搜索结果页面中的广告位（广告位是按用户的点击量收费，固可能会出现竞...
2018-07-28 23:49:17
651
翻译 面试（一）
浅拷贝function extend(sub, sup) { for(var i in sup) { sub[i] = sup[i] }}var a = {};var b = {c:1, d:2}extend(a, b);继承var people = function() { this.name = 'lmh';}people...
2018-07-28 14:23:17
171
翻译 电商前端架构
前端知识储备：性能优化：http cache / local cache /compress(代码压缩）/ Dom render自动化（grunt/nodejs)：如何提升开发效率如何把代码更有效的发布如何提升团队...
2018-07-28 13:58:29
2460
翻译 react + redux Router + node实践总结(react性能优化）
React性能优化 在浏览器的地址栏中添加react_perf后缀，可进行react的性能测试React组件性能优化 单组件性能优化：尽可能减少数据的复杂性， 属性传递优化 尽可能不反复定义数据 定义事件时，使用在constructor中进行bind(this),尽量不要在render时进行bind或者使用箭头函数，因为每一次render时，都会执行下bind，或者重新定义...
2018-07-19 12:17:39
449
翻译 react + redux Router + node实践总结(react模拟redux）
// 上面find的写法性能会更高些，因为$是由右至左查找元素$('#test').find('img')$('#test img')React原理虚拟DOM生命周期setState 组件更新的三种方式： setState: setState更新后依次执行（shouldComponentUpdate-&amp;gt; componentWillUpdate -&amp;gt; render(...
2018-07-13 12:00:07
247
翻译 react + redux Router + node实践总结(Socket）
Socket.io是什么基于事件的实时双向通信库基于websocket协议前后端通过事件进行双向通信配合express，快速开发实时应用Socket.io和ajax区别基于不同的网络协议Ajax基于http协议，单向，实时获取数据只能轮询socket.io基于websocket双向通信协议，后端可以主动推送数据现代浏览器均支持websocket协议 ...
2018-07-11 22:08:16
260
翻译 react + redux Router + node实践总结(前后端联调）
前后端联调：在react中使用node使用axios发送异步请求 npm install axios –save端口不一致(跨域，ajax不支持），如何发送，使用proxy配置转发 在package.json数据中添加”proxy”: “转发到的地址”axios拦截器，统一loading处理redux里使用异步数据，渲染页面// config.js， 在此文件中配置axios...
2018-06-25 23:09:50
584
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人