我也要用- 博客(173)
- 收藏
- 关注
RSS订阅原创 leecode03: 无重复的最长子串
无重复字符的最长子串题解：1.设置一个零时数组存储字符串元素。2.遍历字符串，每一次都将元素 push 进数组，同时通过 indexOf 检查push进去的元素是否重复3.重复的话，绝对是0，index，所以从数组中删除 0,index + 1,同时记录数组的长度4.依次直到遍历到最后一个字符let lengthOfLongestSubstring = function (str) { let maxArr = []; let maxLen = 0; let len = str..
2021-01-21 21:18:11
原创 前端进阶：（符合 promise A+规范）手写Promise
很多小伙伴应该像我一样，promise用了很久了，什么promise.all, promise.race, 甚至是 async， await 都玩的头头是道，但是，，但是面试碰到 手写promise 就拉垮了。痛心疾首，于是乎下定决定抽出来时间（上班摸????），分析了一波手写promise，然后分享一下。第一步：先写一个 promise 的基本结构我们先想一下promise最重要的是什么？三种状态，两个参数，以及 then 的链式调用。于是乎，一个简单的 promise 结构就出来了。clas
2021-01-21 17:29:30
5
原创 leecode01: 两数之和
解题思路：1.创建一个map2.for循环渲染nums数组3.用target - i，计算哪个数可以和当前数字想家得到target4.检查map里面有没有这个数，如果有则返回结果，如果没有则将num[i]当作key，i当作value（方便map.has()查找）function Sum(nums, target) { let map = new Map(); for (let i = 0; i < nums.length; i++) { const complement .
2021-01-18 21:08:48
11
原创 javascript处理树形结构数据（级联选择器，省市县联动）
后端返回给我们数据：const dataList = [ { id: 1, pid: 0, name: '服装类', }, { id: 2, pid: 0, name: '手机类', }, { id: 3, pid: 0, name: '食品类', }, { id: 4, pid: 1, name: '连衣裙', }, { id: 5, pid: 2,
2021-01-18 17:03:41
20
原创 JavaScript 设计模式 - 002：单例模式
JavaScript 常用设计模式002: 单例模式***单例模式介绍：***单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式，可以直接访问，不需要实例化该类的对象。为什么我们要使用单例子模式呢？先来看一个需求： 校长安排王老师和康老师，想要给全校的同学根据性别选择他们的体育课
2020-12-31 17:51:11
11
原创 JavaScript 设计模式 - 001工厂模式
JavaScript 常用设计模式001: 工厂模式工厂模式介绍：工厂模式（Factory Pattern）是 JavaScript 中最常用的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。为什么我们要使用工厂模式呢？先来看一个需求： 我们想要将同学们根据文理课来规划同学们所要学习的subject。先看第一种普通方法： function Student(n
2020-12-31 16:39:39
19
原创 Flutter -＞ dart 结束 （抽象类和接口）
dart 类 -> 抽象类dart 抽象类主要用于定义标准，子类可以继承抽象类，也可以实现抽象类接口。抽象类通过abstract 关键字来定义。抽象类不可以被实例化，只有继承他的子类可以。子类继承抽象类必须实现里面的抽象方法。抽象类作为接口，必须实现抽象类里面的所有属性和方法。多态就是父类定义一个属性或者方法，父类不去实现，让子类去实现，这就叫多态。举个例子(抽象类/多态)/** 定义一个Animal 类要求它的子类必须包含eat方法 */abstr
2020-12-17 19:43:11
29
原创 Flutter -＞dart 02 函数和类
dart 函数dart 函数的基本演示main(){ //dart 函数 //系统内置方法 print('内置方法'); //调用我写的自定义方法 printInfo(); //定义返回值为int的方法 (局部方法) int myNum(){ int a = 123; return a; } print(myNum());}//定义自定义无返回值方法 (全局方法)void printInfo() { print('我是一个自定义
2020-12-17 11:12:43
16
原创 Flutter - ＞dart基础01
安装 dart sdk略。dart 初试//dart 中所有代码都以main函数为基础main() { print('hello dart');}//没有返回值的main函数void main(){ print('hello dart!');}一：dart 数据类型string 类型//定义字符串 String first_name = 'kang'; var last_name = 'jiahao'; // var 在定义字符串的时候会有一个自动类型推断的
2020-12-16 12:10:35
30
原创 【快手一面二面实习offer面试总结】
写在前面：就其实自己是没有写面试总结这个习惯的，暑假去百度实习的时候，就有朋友让我写一下面试总结呀之类的，但是面试时间真的挺久（视频面试），好多东西都忘了，一直到实习回来就把学的新的技术挣了12篇博客发了，没有我预期中的爆炸访问量，demo特没有很多访问量，我就好奇是不是因为我么有设置付费（哈哈哈哈，调皮一下）。其实从暑假开始实习，自己就规划好了，开学了在11月份左右找实习，再去北京（对了，北京真的挺好的，除了房租贵，车堵云云）。然后从国庆开始，review了一下react知识，学了Typescript
2020-10-30 10:38:13
3655
17
原创 跨域问题处理（JSONP，CORS,webpack-dev-server,nginx）
本文主要讲解一些跨域的处理，附有部分源码。JSONP跨域方式JSONP跨域原理**JSONP **是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。当GET请求从后台页面返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用后台页面中的一个callback函.
2020-10-07 16:06:37
343
2
原创 从0到1手动配置Webpack（webpack优化配置）
前面我们讲解了webpack的进阶配置等。接下来我们讲解webpack的简单优化。1：noParse在webpack配置中添加 noParse选项： module:{ noParse:/jquery/, },如上表示，webpack在打包的时候，不去加载jquery中的依赖库。也是第一个我们对webpack的优化方法。2：ignorePlugin需要使用webpack内置插件：let webpack = require("webpack");webpac.
2020-10-03 22:19:05
235
原创 从0到1手动配置Webpack（webpack进阶配置）
上一篇文章，我们讲解了webpack的基本配置，这一篇文章，我们将讲解webpack进阶常用配置。1 webpack打包多页应用新建一个webpack应用：在src文件夹下创建 index.js , home.js;之后配置如下webpack；let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode:'development.
2020-10-03 20:48:52
283
原创 从0到1手动配置Webpack（webpack基本配置）
1.认识webpack（grunt/gulp的区别和联系）webpack是一个现代的javascript应用的静态模块打包工具。webpack的功能：代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布webpack中前端模块化介绍前端模块化方案： AMD, CMD,CommonJS, ES6.项目通过模块化开发完成了之后，还需要处理模块间的各种依赖，并且将其进行整合打包。webpack其中的一个核心就是让我们进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是
2020-10-02 18:18:33
169
原创 React开发中的一些问题(待补充）
1.redux修改数据引起的性能问题上一篇redux文章中讲到了，我们在reducer中重新修改数据的时候，需要复制一份state（浅拷贝），防止我们原本的数据被修改，之后进行数据修改。我们在文件中的代码如下所示：function reducer(state = defaultState, action) { switch(action.type) { case actionTypes.CHANGE_TOP_BANNERS: return {...sta
2020-09-23 01:14:20
98
原创 记一次愉快项目开发中详细使用redux的过程（配置 + 数据请求）
写在前面在现在我对于redux的了解基本就属于会做一些简单操作，但是真正在开发中去做一写请求什么的，绝壁狗die，所以我来重新整理一次开发中redux的使用过程，理理思路。虽然现在我不会，maybe，写完这个文章我就豁然开朗了。------------------------------------------------------------------------------------------------------------------------------------第一部分首先说
2020-09-21 21:42:08
181
3
原创 React项目开发准备流程
1.云音乐项目规范1.项目介绍。。。。。。2.项目规范项目开发规范以及代码风格1.文件夹和文件名称统一使用小写，多个单词以连接符（-）连接。2.JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰。3.CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS，局部采用styled-component）4.整个项目不在使用class组件，统一使用函数式组件，并且全面拥抱Hooks5.所有的函数式组件，为了避免不必要的渲染，全部是同
2020-09-19 17:38:12
147
原创 React-Hooks从0到1
1:为什么需要react-HooksHook 时react 16.8的新增特性，它可以让我们在不编写class的情况下使用state以及其他的react特性（比如生命周期）class组件相对于函数式组件的优势（1）√√√ class组件可以定义自己的state，用来保存组件内部的状态。xxx 函数式组件不可以，因为函数每次调用都会产生新的临时变量。（2）√√√ class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑。比如在componentDIdMount种发
2020-09-17 20:18:07
97
原创 react-router深入浅出
1.改变页面路由的两种方式监听hash的改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo
2020-09-15 21:56:49
118
原创 React中过渡动画以及纯函数的使用
在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件react-addons-css-transition-group，后由社区维护，形成了现在的react-transition-gro这个库可以帮助我们方便的实现组件的入场和离场动画，使用时需要进行额外的安装:1.学习使用 react-tra.
2020-09-08 22:05:13
111
原创 React中axios的封装和使用
1.axios库的使用axios: ajax i/o system.主要作用于发送请求的等。axios是目前前端使用非常广泛的网络请求库，包括Vue作者也是推荐在vue中使用axios ;响应、转换请求和响应数据等等;主要特点包括︰在浏览器中发送XMLHttpRequests请求、在node.js中发送 http请求、支持Promise API、拦截请求和响应数据等。2.axios的基本使用(promise)第一步： 安装axios npm install axios==第二步：
2020-09-08 21:08:45
686
原创 React AntDesign库的使用以及其他补充
1.react中动态添加class1.react原生添加classReact在jsx语法中给了我们开发者足够多的灵活性，你可以想编写javascript代码一样，通过一些逻辑来决定是否添加某些class。{/* 需求：当isActive为true的时候就是增加active的类名，否则不增加 */}<h3 className={"title " + (isActive ? "active" : "")}></h3><h1 className={["title",(is
2020-09-07 22:59:48
102
原创 React中的四种样式使用优缺点比较
1.组件化天下下的CSScss的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方式。组件化中选择合适的CSS解决方案应该符合以下条件：1.可以编写局部的css：css具备自己的局部作用域，不会随意污染其他组件内部的样式。2.可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式。3.支持所有的css特性：伪类，动画，媒体查询等。4.编写起来简单方便，最好符合一贯的css风格特点，2.React中的CSS3.react中常见
2020-08-31 13:14:52
242
原创 React知识点补充
1.setState不可变的数据首先明确一点为了保证PureComponent以及我们为了实现项目优化自己写的shouldComponent能够正确渲染页面，setState不允许直接修改state中的数据，我们最好是将其备份一份，然后进行修改。shouldComponentUpdate()传过来了两个参数nextProps, nextStatenextProps ： 最新的propsnextState ： 最新的state每一次在内部进行浅层比较，props以及state是否发生了变化，
2020-08-29 14:24:59
70
原创 React setState一些解析以及 react性能优化
详解setState1.开发中我们并不能直接通过修改state的值来让界面发生更新：因为我们修改了state之后,希望React根据最新的State来重新渲染界面,但是这种方式的修改React并不知道数据发生了变化;React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化;我们必须通过setState来告知React数据E经发生了变化;2.setState函数是我们继承的Component原型中定义的。3.setStat
2020-08-23 16:40:15
125
原创 Mxgraph 实战教程（12）：使用mxgraph实现一个流程图
前面我们讲解了mxgraph的基础操作和进阶操作，从这一节其，我们将开始两个实战项目。第一个mxgraph实现流程图实现效果：如果对大家有用的话，记得帮我github点个star，谢谢大家！git地址：小康的流程图...
2020-08-08 00:17:38
159
原创 Mxgraph 使用教程（11）：mxgraph手动添加节点和边（节点和边点击事件）,并按照要求格式导出数据
上文我们介绍了，mxgraph如何在页面不刷新的情况下，通过请求不同文件生成不同的mxgraph图，本文我们将讲述mxgraph手动添加节点和边，并且按照原本数据格式导出数据。1.准备工作准备工作代码<template> <div> <div class="Oinput"> <input type="text" placeholder="请输入对应的城市名称......" /> <button>生.
2020-08-08 00:17:25
510
原创 Mxgraph 使用教程（10）：mxgraph单页面请求数据实现图形热更新
上文我们讲解了如何根据数据生成对应的mxgraph图，本文我们讲解单页面请求多个文件，生成mxgraph图。这也是我的项目需求之一。1.准备工作：原始数据：mxgraphData: [ { nodesList: [ [0, "Hello"], [1, "Mxgraph"], ], edgesList: [[0, "label", 1]], }, .
2020-08-07 20:43:30
112
原创 Mxgraph 使用教程（9）：mxgraph根据需求数据生成对应mxgraph图
本文将讲解如何按照对应的数据生成mxgraph图形1.准备工作2.模拟数据 mxgraphData: [ { nodesList: [ [0, "宝鸡市"], [1, "渭南市"], [2, "西安市"], [3, "汉中市"], [4, "安康市"], ], edgesList: [ .
2020-08-07 20:43:21
165
原创 Mxgraph 使用教程（8）：mxgraph进行查看xml 和 xml回显
上文我们讲述了mxgraph布局算法，本文讲述mxgraph进行xml回显和图片保存1.xml回显 准备工作还是上文的教程查看mxgraph图形的xml //查看图形的xml document.body.appendChild(mxUtils.button('View XML', function() { var encoder = new mxCodec(); var node = encoder.enco.
2020-08-07 20:43:12
442
原创 Mxgraph 使用教程（7）：给mxgraph图添加默认布局
上文我们讲解了添加工具操作，这一节我们讲解给生成图形添加默认布局1.准备工作多添加几个几点：生成如下所示的图形代码： try { var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, 'nodeStyle' ); .
2020-08-07 20:42:54
269
原创 Mxgraph 使用教程（6）：给mxgraph图添加操作工具按钮
上文我们讲解了mxgraph图如何设置样式，接下来我们给我们的mxgraph图添加一些操作工具吧1.准备工作2.添加操作按钮 <!-- 创建操作按钮放置容器 --> <div id="methods"> <div ref="buttons"></div> </div>refs选中的元素为生成的button所在的父级//定义操作按钮 //放大节点 this.$refs.
2020-08-07 20:42:36
232
原创 Mxgraph 使用教程（5）：mxgraph图设置样式的两种方式
上文我们了解了基本的mxgraph内容，这节我们来给节点和边设置样式1.第一种方式（行内式）上文的图形最终效果：添加样式： var v1 = graph.insertVertex( parent, null, "Hello,", 20, 200, 100, 50, "fillColor=#3CAEA3;strokeColor=white.
2020-08-07 20:42:21
312
原创 Mxgraph 使用教程（4）：详解mxgraph示例demo - Hello World
提示：接下来所有演示均以vue为主1.在vue中实现一个hello -world<template> <div> <div id="graphContainer" ></div> </div></template><script>import mxgraph from "./mxgraph";const { mxGraph, mxClient, .
2020-08-07 20:42:12
318
1
原创 Mxgraph 使用教程（3）：本地引入mxgraph和 vue中引入mxgraph
1.本地引入mxgraph第一步：下载mxgraph库github地址：https://github.com/jgraph/mxgraph第二步：clone项目打开项目-》进入javascript第三步：本地使用mxgraph一个官方示例demo:<html><head> <title>Hello, World! example for mxGraph</title> <!-- Sets the basepath for the
2020-08-07 20:42:00
291
原创 Mxgraph 使用教程（2）：mxgraph常用方法介绍
1.mxgraph常用包（这个js类库被分成了8个包。）1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa
2020-08-07 20:41:43
337
原创 Mxgraph 使用教程（1）：介绍mxgraph
1.mxgraph邂逅(×) 折磨（√）楼主暑假实习，项目组需要开发一款标注系统，mentor要求使用nuxt+mxgraph来实现标注系统，所以就开始学习mxgraph，然而百度一下，我就蒙蔽了，这个框架国内确实很少用，并且查询了许多人的摆弄可，感觉都是一些基本的教学，自己摸索了很久，大概花了一个多月把项目搞定了，现在将自己的遇到的问题以及解放方法分享给大家。2.mxgraphs介绍官方文档：mxGraph是一系列以不同技术开发的工具库，旨在提供显示交互式的 图表和图形的应用程序的功能。 请
2020-08-07 20:40:59
179
原创 React 父子组件传值 && React生命周期
1.react生命周期react生命周期：很多的事物从创建到销毁的整个过程，这个过程被称之为声明周期React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能;生命周期和生命周期函数的关系:生命周期是一个抽象的概念 ，在生命周期的整个过程，分成了很多个阶段;1.比如装载阶段( Mount)， 组件第一次在DOM树中被渲染的过程 ;2.比如更新过程( Update )， 组件状态发生变化，重新更新渲染的过程;3.比如卸载过程( Unmount) , 组件从D
2020-08-04 18:57:23
116
空空如也
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝