自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(71)
  • 资源 (1)

原创 设计模式——JavaScript实现单例模式

单例模式的定义保证一个类仅有一个实例,并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。适用场景一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。js代码class CreateUser { constructor(name) { this.name = name; this.getName(); } getName() {

2020-08-12 11:02:26 43

原创 刷题——二叉树的镜像(翻转二叉树)

题目描述请完成一个函数,输入一个二叉树,该函数输出它的镜像。例如输入:镜像输出:js代码/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root * @return {TreeNode} */var mirro

2020-08-03 08:36:48 27

原创 刷题——Leetcode98 验证二叉搜索树

题目描述给定一个二叉树,判断其是否是一个有效的二叉搜索树。假设一个二叉搜索树具有如下特征:节点的左子树只包含小于当前节点的数。节点的右子树只包含大于当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。分析可以用二叉树的中序遍历解这道题,由于中序遍历顺序刚好是左-根-右,因此只要中序遍历的结果是升序的,就是二叉搜索树,否则不是二叉搜索树。js代码/** * Definition for a binary tree node. * function TreeNode(val) {

2020-07-25 11:56:26 33

原创 刷题——LeetCode94 二叉树的中序遍历

题目描述给定一个二叉树,返回它的中序遍历。思路分析中序遍历即以左-根-右的顺序访问节点。经典的方法是使用递归,直截了当。我们可以定义一个辅助函数来实现递归。js代码/** * Definition for a binary tree node. * function TreeNode(val) { * this.val = val; * this.left = this.right = null; * } *//** * @param {TreeNode} root

2020-07-23 14:30:43 18 1

原创 刷题——元素计数

题目描述给定一个整数数组arr,计数元素x,使x + 1也在arr。如果在arr中有重复的,分开计数。例1:Input: arr = [1, 2, 3]Output: 2例2:Input: [1, 1, 3, 3, 5, 5, 7, 7]Output: 0例3:Input: [1, 3, 2, 3, 5, 0]Output: 3例4:Input: arr = [1, 1, 2, 2]Output: 2思路分析首先使用字典将数组中的值及其出现的次数按照键值对的形式存储起来,

2020-07-04 08:58:53 47

原创 刷题——字母异位词分组

题目描述给定一个字符串数组,将字母异位词组合在一起。字母异位词指字母相同,但排列不同的字符串。示例:输入:[“eat”, “tea”, “tan”, “ate”, “nat”, “bat”]输出:[[“eat”, “tea”, “ate”],[“tan”, “nat”],[“bat”]]说明:所有输入均为小写字母。不考虑答案输出的顺序。思路分析此题主要考察对字典操作的应用。ES6中引入了MAP数据解构,我们用它来解这道题目。算法流程:确定单词所包含字母组合——搜索是否已在字

2020-06-27 10:51:52 50

原创 刷题——买卖股票的最佳时机

题目描述给定一个数组,它的第i个元素是一支给定股票第i天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易(多次买卖一支股票)。注意:你不能同时参与多比交易(你必须在再次购买前出售掉之前的股票)。Example:输入:[7, 1, 5, 3, 6, 4]输出: 7解释:在第2天(股票价格 = 1)的时候买入,在第3天(股票价格 = 5)的时候卖出,这笔交易所能获得利润 = 5 - 1 = 4。随后,在第4天(股票价格 = 3)的时候买入,在第5天(股票价格 = 6

2020-06-26 11:19:48 73

原创 刷题——移动零

题目描述给定一个数组nums,编写一个函数将所有0移动到数组的末尾,同时保持非零元素的相对顺序。Example:Input: [0, 1, 0, 3, 12]Output: [1, 3, 12, 0, 0]要求:不能创建一个新的数组来做操作尽量少的操作次数思路分析我们用js来编写这个函数。要求在原数组上操作,可能我们最先想到的是交换元素位置,但是js的数组提供了很多好用的方法,可以直接拿来用;尽量少的操作次数,要求我们在寻0的时候倒序遍历。简单来说,就是从后往前找0,每当找到一个0

2020-06-25 10:42:24 57

原创 js使用reduce实现组合函数

题目描述/** * 函数组合运行 * 说明:实现一个方法,可将多个函数方法按从左到右的方式组合运行。 * 如`composeFunctions(fn1,fn2,fn3,fn4)`等价于`fn4(fn3(fn2(fn1))`。 * 示例: * const add = x => x + 1; * const multiply = (x, y) => x * y; * const multiplyAdd = composeFunctions(multiply, add);

2020-06-21 11:31:21 143

原创 ES5和ES6实现每隔一秒打印一个数字

要求隔一秒打印出一个1,再隔一秒打印出个2,再隔1秒打印出个3…废话不多说,直接上代码:ES6for(let i = 1; i <= 10; i++){ setTimeout(function () { console.log(i); }, 1000 * i);}ES5for(var i = 1; i <= 10; i++){ (function (i) { setTimeout(function () {

2020-06-20 12:30:39 317

原创 移动App-什么是原生开发和混合开发

原生开发(NativeApp)指的是使用IOS、Android官方提供的工具、开发平台、配套语言进行手机App开发的方式。混合开发(HybirdApp)指的是使用前端已有的技术(HTML+CSS+JS),然后再搭配一些相关的打包编译技术,就能够开发出一个手机App,安装到手机中进行使用。...

2020-05-06 08:30:11 139

原创 移动App-什么是前端混合移动App

什么是混合移动App开发苹果上的软件是如何开发出来的?使用的是OC或者Swift语言安卓平台上的软件是如何开发出来的?使用安卓相关的语言开发的:Java,安卓的控件苹果和安卓平台上共有的软件是如何开发出来的?企业招两套开发人员(开发组)前端移动App开发技术提供了开发手机端应用程序的体验。通俗的理解,就是把开发Web网站的技术(HTML+CSS+JS),通过某种方式,移植到移动A...

2020-05-05 08:50:04 101

原创 实现AntDesign组件的按需导入

昨天我们演示了如何为React项目启用AntDesign组件,现在回顾一下,引入方法为:import {DatePicker} from "antd";import "antd/dist/antd.css"虽然我们只用到了DatePicker组件的样式表,但是该方法却全局引入了所有AntDesign组件的样式表。这样做的结果就是将来会打包大量没用的代码。因此我们需要真正地实现按需导入Ant...

2020-05-04 08:05:45 844

原创 为React项目启用AntDesign组件

AntDesign是蚂蚁金服开发的一个UI框架,为开发人员提供了丰富易用的各种组件。下面我们演示在React中使用AntDesign渲染一个时间选择器组件:首先装包:npm i antd -S按需导入组件:import {DatePicker} from "antd";全局导入css:import "antd/dist/antd.css"使用:像使用一般组件那样使用<DatePick...

2020-05-03 06:23:01 105

原创 React中匹配路由参数的方式

模糊匹配默认情况下,路由中的规则是模糊匹配的,如果路由可以部分匹配成功,就会展示这个路由对应的组件。看下面的例子:<Link to="/movie/top250/10">电影</Link><Route path="/movie" component={Movie}></Route>虽然Link标签的to属性与Route标签的path不完全相...

2020-05-02 11:26:55 630

原创 react-router-dom路由的基本使用

在react中启用路由模块,首先要装包:npm i react-router-dom -S,装完之后在根组件中导入:import {HashRouter, Route, Link} from "react-router-dom"。HashRouter:表示一个路由的根容器,将来,所有路由相关的东西,都要包裹在HashRouter里面,而且,一个网站中,只需要使用一次HashRouter就好了。...

2020-05-01 09:37:36 155

原创 实现js中的new

在实现new方法之前首先我们需要知道在使用new操作符创建对象时发生了什么:创建一个空对象将空对象的隐式原型指向构造函数的显式原型改变构造函数中的this指向并执行构造函数返回这个新对象上面这个过程是针对一般情况的,即构造函数中没有返回值。有时候构造函数中会return一个对象,这个时候我们返回的应该是这个return的对象而不是我们创建的对象。下面给出create()方法的实现:...

2020-04-30 11:30:51 70

原创 实现js中的instanceof

js中的instanceof操作符用来判断某个对象是否是某个构造函数的实例,使用方法为obj instanceof fun,左侧是一个对象,右侧是一个构造函数,如果该对象是构造函数的实例(含继承),则返回true,否则返回false。下面我们来实现一下instanceof:function instance_of(l, r){ // l代表操作符左侧的对象,r代表操作符右侧的构造函数 wh...

2020-04-29 13:41:53 71

原创 TCP拥塞控制

TCP的拥塞控制在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络性能就要变坏。这种情况就叫做拥塞。若出现拥塞而不进行控制,整个网络的吞吐量将随输入负荷的增大而下降。TCP有四种拥塞控制算法,分别是慢开始、拥塞避免、快重传和快恢复。下面介绍这四种拥塞控制算法的基本原理,假定如下条件:数据是单方向传送,而另一个方向只传送确认。接收方总是有足够大的缓存空间,因而...

2020-04-28 18:26:10 84

原创 在项目中为scss或less文件启用模块化

在项目当中我们会用到很多第三方样式表,比如bootstrap,可以发现大多数第三方样式表都是.css文件。而之前我们为.css文件启用了模块化,这就导致我们在使用第三方样式表的时候非常不方便。我们希望不为第三方样式表启用模块化,只对自己写的样式表启用模块化。解决思路是:自己写的样式表都要以.scss结尾,只为.scss结尾的样式表启用模块化。安装bootstrap运行npm i bootstr...

2020-04-26 14:25:54 214

原创 通过local和global设置类名是否被模块化

使用:local()和:global():local()包裹的类名,是被模块化的类名,只能通过className={cssobj.类名}来使用;同时,:local()默认可以不写,在样式表中定义的类名,都是被模块化的类名。:global()包裹的类名,是全局生效的,不会被css-modules控制,使用定义的类名className="类名"举个例子::global(.title){ ...

2020-04-25 10:35:43 115

原创 使用localIdentName来自定义模块化的类名

从本质上理解CSS模块化怎么来理解CSS模块化?是为CSS添加了作用域吗?不是的!你可以这么理解CSS模块化:CSS模块化其实就是将类名变成键,通过随机生成的值作为真正的类名,从而避免CSS作用域冲突的问题。如果你将系统随机生成的类名赋给引入该CSS文件以外的部分依然是可以生效的。下面来验证这一点:我们首先在控制台打印一下导入的cssobj:{title: "_1_SjtDCiFqhB0kv...

2020-04-24 10:26:20 437

原创 为普通样式表通过modules参数启用模块化

CSS样式表作用域冲突问题由于CSS没有作用域的概念,因此昨天那种在组件中引入样式表的方法会使得该样式表在整个项目中都生效。如果我们想只让导入的样式表在当前作用域内有效,需要为其启用模块化。CSS启用模块化在webpack.config.js中的css-loader后面追加参数:{ test: /\.css$/, use: ["style-loader", "css-loa...

2020-04-23 10:01:31 76

原创 使用css样式表美化组件

在React中,虽然能够将样式写成js的形式,但这种方法不太方便,写样式最好的方法还是使用css样式表。安装配置css-loader安装cnpm i style-loader css-loader -D配置在webpack.config.js中的module节点下新增rule:{ test: /\.css$/, use: ["style-loader", "css-lo...

2020-04-22 17:51:15 78

原创 配置webpack设置根目录

在项目当中,我们可能正在大量使用相对路径,但是相对路径存在一个明显的问题:当文件目录发生变化时,需要频频修改相对路径。一个比较常见的情形是:在React开发中,我们经常需要导入组件,而组件一般都是放在components目录下。组件的位置一般不会改变,但是需要导入组件的文件的位置可能经常变化。这个时候如果我们使用相对路径,则需要对导入路径进行修改;而如果使用绝对路径,不管当前文件放到哪里都可以正确...

2020-04-21 18:35:31 467

原创 配置webpack从而在导入组件的时候省略.jsx后缀名

昨天介绍过在index.js中导入组件Hello的方式:import Hello from "./components/Hello.jsx"。如果我们想在导入组件的时候省略.jsx后缀名,可以通过配置webpack实现:在webpack.config.js中增加resolve节点:resolve: { extensions: [".js", ".jsx", ".json"]}...

2020-04-20 10:59:36 262

原创 将组件抽离为单独的jsx文件

为了对项目中创建的组件更好地管理,我们在src目录下新建components目录,用于存放将来要创建的组件。下面以一个简单的Hello组件为例,演示组件的导出与导入:components目录下的Hello.jsx:import React from "react"function Hello(props){ return <div>Hello,{props.name}&...

2020-04-19 20:42:03 143

原创 React Developer Tools安装使用

当项目中使用到了React时,在Chrome浏览器运行时控制台会打印:Download the React DevTools for a better development experience: https://fb.me/react-devtools。如下图所示:安装React DevTools点击Chrome浏览器的扩展程序(菜单→更多工具→扩展程序),打开Chrome网上应用店。...

2020-04-18 16:36:14 641

原创 DevTools failed to parse SourceMap 警告解决方法

最近在用webpack-dev-server进行开发的过程中,控制台一直报一个警告:DevTools failed to parse SourceMap: webpack:///node_modules/_sockjs-client@1.4.0@sockjs-client/dist/sockjs.js.map。下面给出消去这个警告的方法:SourceMap技术在处理该警告之前,有必要了解下什么...

2020-04-16 20:22:52 8326 2

原创 安装配置babel

要想在React项目中启用JSX语法,需要配置babel。babel是一个JavaScript编译器。安装配置babel装包cnpm i babel-core babel-loader babel-plugin-transform-runtime -Dcnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D这里...

2020-04-15 16:51:26 93

原创 在node与webpack环境下使用react

前面基本的基于node的webpack项目已经搭建完毕了,接下来我们在该环境中引入react:在项目中使用react装包在终端输入:cnpm i react react-dom -S安装react和react-dom两个包,注意-S代表该包不仅在开发过程中要用到,产品发布上线后也需要用到;-D代表装的包只在开发过程中用到,比如webpack。导入包在index.js中导入安装的两个...

2020-04-14 17:50:57 45

原创 webpack-dev-server与html-webpack-plugin的基本使用

在项目开发过程中,如果每次改动代码之后都要刷新浏览器才能获得最新的表现,体验不是很好。这个时候我们就需要用到实时打包编译的功能,webpack-dev-server可以帮助我们:安装webpack-dev-server调出终端输入命令cnpm i webpack-dev-server -D,安装过程如下:为了在node开发环境下快速启动webpack-dev-server,我们在packa...

2020-04-13 17:28:50 468

原创 创建基本的webpack4.x项目

webpack是一个现代JavaScript应用程序的静态模块打包器,下面演示如何创建一个最基本的webpack4.x的项目:新建一个webpack-base文件夹作为项目的根目录。右键用Pycharm(当然你也可以用VSCode)打开,调出终端,输入命令:npm init -y该命令用于初始化项目,执行完该命令之后会在根目录下生成package.json文件。3. 在项目根目录下...

2020-04-12 21:02:20 46

原创 安装配置nodejs

直接在html页面中通过script标签引入react的方式只能供学习使用,更广泛的使用react的方式是在node环境下。下面我们就来安装配置nodejs:安装node下载地址:https://nodejs.org/en/download/选择对应系统的资源下载即可,下面在windows操作系统下演示:下载完成之后双击安装包按照提示一直next就行,推荐将其安装到C盘以外的目录,这里我...

2020-04-11 19:00:34 72

原创 React学习——Day10

这篇文章讲解了React中的各个生命周期函数。通过生命周期函数图可以快速理解组件生命周期的概念。

2020-04-10 17:17:20 42

原创 React学习——Day9

这篇文章介绍了以下内容:1.在React中如何绑定事件2.this.setState()用法3.手动实现文本框与state的双向绑定

2020-04-09 10:47:01 86

原创 React学习——Day8

案例:评论列表组件下面演示使用React创建一个简单的静态评论列表组件,在这个案例中,你将看到父组件如何向子组件传递数据以及如何在组件中书写样式。React08.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Rea...

2020-04-08 20:20:16 54

原创 React学习——Day7

这篇文章介绍了React中基于class关键字创建组件的方式;对比了通过function构造函数创建的组件与使用class关键字创建的组件的区别;对比了组件中props与state之间的区别

2020-04-07 10:47:32 49

原创 React学习——Day6

这篇文章详细讲解了ES6中class关键字的用法。包括如何使用class创建类以及类的静态/实例属性和静态/实例方法;使用extends实现类之间的继承;使用super函数在子类中调用父类中的构造器。

2020-04-06 11:47:53 53

原创 React学习——Day5

React中使用构造函数来创建组件:1.使用ES6展开运算符传递参数2.将组件抽离为一个单独的jsx文件

2020-04-05 09:43:01 53

简易计算器.html

百度2020春季实习生笔试题的最后一题——利用原生JavaScript实现一个简易计算器。在一个大的框架下按照提示补全代码:获取DOM元素、索取元素属性内容、事件目标、实现加减乘除...

2020-03-30

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除