- 博客(56)
- 收藏
- 关注
RSS订阅
原创 **JavaScript实现栈结构**
栈的面试题？题目：有6个元素6，5，4，3，2，1按顺序进栈，问下列哪一个不是合法的出栈顺序？A：5 4 3 6 1 2 （√）B：4 5 3 2 1 6 （√）C：3 4 6 5 2 1 （×）D：2 3 4 1 5 6 （√）A答案：65进栈，5出栈，4进栈出栈，3进栈出栈，6出栈，21进栈，1出栈，2出栈（整体入栈顺序符合654321）;B答案：654进栈，4出栈，5出栈，3进栈出栈，2进栈出栈，1进栈出栈，6出栈（整体的入栈顺序符合654321）;C答案：6543进栈，3出栈，4出栈
2021-01-30 11:23:26
99
1
原创 面试题React
受控组件（Controlled Components）是指表单元素的值由 React 组件管理并控制的组件。数据变了页面也变了。受控组件更合适，数据驱动是react核心。非受控组件不是通过数据控制页面内容。
2023-04-10 20:35:18
637
原创 前端手写综合考题
例如：给定 nums1 = [1, 2, 2, 1]，nums2 = [2, 2]，返回 [2, 2]。并发限制指的是，每个时刻并发执行的promise数量是固定的，最终的执行结果还是保持与原来的。中新增的方法，允许将空字符串或其他字符串添加到原始字符串的开头或结尾。题目描述:JS 实现一个带并发限制的异步调度器。现在需要对其进行排序，排序的结果为。，保证同时运行的任务最多有两个。题目描述:有一组版本号如下。
2023-04-10 15:52:40
694
原创 前端手写(正则、字符串、函数)
用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)请使用最基本的遍历来实现判断字符串 a 是否被包含在字符串 b 中，并返回第一次出现的位置（找不到返回 -1）。柯里化的定义：接收一部分参数，返回一个函数接收剩余参数，接收足够参数后，执行原函数。思路：深度比较两个对象，就是要深度比较对象的每一个元素。表示完整的匹配子字符串，而第二个参数 $1。函数柯里化的主要作用和特点就是。在此函数中，第一个参数 $0。
2023-04-10 12:51:55
691
原创 正则表达式
含义：以数字或者字母开头，数字字母下划线为主体，一个 @符号，后面跟上数字字母下划线和小数点，可以为多个，以 com 或 cn 或 org 结尾。验证邮箱表达式：/^[\da-z][\w.]+@(\w+.)+(com|cn|org)$/i。<=href=(['"])) 前面是 href = 单引号或者双引号的字段。y 模式表示匹配到不符合的就停掉，不会继续往后匹配，必须连续的符合条件的。: 表示不记录该原子组，但是原子组的功能仍然生效。[0-9] 匹配 0-9 之间的数字，包含 0 和 9。
2023-04-07 21:45:31
594
原创 数组相关方法实现
循环是比较笨拙的方法，它实现的原理很简单：先定义一个包含原始数组第一个元素的数组，然后遍历原始数组，将原始数组中的每个元素与新数组中的每个元素进行比对，如果不重复则添加到新数组中，最后返回新数组；方法将原数组中的每个元素映射到一个新数组中，并返回新数组。思想: ES6 提供了新的数据结构 Set，Set 结构的一个特性就是成员值都是唯一的，没有重复的值。检测元素在数组中第一次出现的位置是否和元素现在的位置相等，如果不等则说明该元素是重复元素。方法的参数为空时，它会返回一个新数组，其中包含原数组的所有元素。
2023-04-06 20:12:50
350
原创 框架相关手写题
函数，该函数判断传入的值是不是一个对象，如果是对象，就遍历对象的所有属性，给每个属性添加 getter 和 setter，从而实现数据劫持。如果是一个数组，就对数组的原型对象进行克隆，并重写了数组对象的。我们可以把它理解为一个事件中心，我们所有事件的订阅/发布都不能由订阅方和发布方“私下沟通”，必须要委托这个事件中心帮我们实现。这种情况下除了求助于。函数，如果新的值也是一个对象，那么会给它的属性添加 getter 和 setter，实现递归的数据劫持。方法中，如果新的值与旧的值不同，则先调用。
2023-04-06 15:32:29
260
原创 前端手写篇
假如我们有一块内存，专门用来缓存我们最近发访问的网页，访问一个新网页，我们就会往内存中添加一个网页地址，随着网页的不断增加，内存存满了，这个时候我们就需要考虑删除一些网页了。这一整个过程就可以称之为。函数，这个意思是将多个函数合并成一个函数，这个合并后的函数会依次执行传入的每个函数，并将前一个函数的执行结果作为后一个函数的输入参数，直到最后一个函数执行完毕并返回结果。像dom的拖拽，如果用防抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多。
2023-04-05 16:52:07
596
原创 前端常见设计模式
外观模式（Facade Pattern）是一种结构型设计模式，其主要目的是简化复杂系统的接口并提供一个更高级别的接口以供外部使用。可以将外观模式想象成一个门面或者外观，类似于房子的门面，它把整个系统隐藏在其背后。对于外部使用者而言，只需要通过门面提供的接口来操作系统，而不需要关心背后的实现细节。外观模式的一个生动的例子是手机的操作界面。手机的操作界面为用户提供了一个简单易用的接口，可以通过点击屏幕上的图标、按钮来进行操作，但实际上在背后有许多不同的系统组件在协作工作。
2023-04-04 15:29:52
896
原创 HTTP知识点
HTTPS (Hyper Text Transfer Protocol Secure) 是在 HTTP 基础上加入了安全性保障的协议，它通过 SSL/TLS 加密传输数据，从而提供了身份认证和数据传输的保护。HTTP 和 HTTPS 最主要的区别在于数据传输的安全性。那么区别有哪些呢👇HTTP 是明文传输协议，HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。
2023-04-03 23:45:34
1298
原创 前端知识点
getElementById() 方法返回的是具有指定 ID 的元素对象，如果没有找到对应的元素，则返回 null。getElementsByTagName() 方法返回的是具有指定标签名的元素对象的集合，返回的是一个类数组对象，如果没有找到对应的元素，则返回空集合（空数组）。getElementsByName() 方法返回的是具有指定名称的元素对象的集合，返回的是一个类数组对象，如果没有找到对应的元素，则返回空集合（空数组）。
2023-03-31 15:51:27
132
原创 git学习记录
Git可以跟踪代码的修改、保存历史版本，并且支持多个开发者协同开发。Git具有很多优点，例如支持离线工作、方便的版本控制、易于协作等在Git中，工作目录是指本地代码库在计算机文件系统中的副本，其中包含着实际的项目文件。当你在Git仓库中进行代码修改、提交等操作时，实际上是在工作目录中进行的。然而，Git裸存储库是一个没有工作目录的Git仓库。这意味着，裸存储库中只有Git版本控制所需的文件和元数据，而没有实际的项目文件。因此，在裸存储库中无法直接查看、编辑或运行代码。
2023-03-29 22:04:06
337
原创 前端面试题
解析入口文件：Webpack 从入口文件开始分析，根据入口文件中的依赖关系来确定需要打包的模块。入口文件可以是一个或多个，Webpack 会自动处理它们之间的依赖关系。加载模块：Webpack 根据模块的路径和类型，使用合适的 loader 来加载模块。例如，如果模块是一个 CSS 文件，Webpack 会使用 CSS loader 来加载它。转换模块：一旦模块被加载进来，Webpack 会根据配置中的规则（rules）来对模块进行转换。
2023-03-28 21:04:13
458
原创 使用canvas 图片加载异步变成同步代码
function loadImg(_url, _this) { var img = new Image(); img.src = _url; img.onload = function () { cxt.drawImage(img, 0, 0) //把canvas作为纹理 var texture = new THREE.Texture(ca.
2022-02-21 21:23:46
2295
原创 搞懂Cookie Session Token 是什么
一.起源18世纪： 浏览文档和产品的展示，静态页面，每次请求多是一个http请求 。19-20世纪： 交互式web系统 ，需要登录，面临一个问题，那些热在自己的购物车里面加入了商品，需要把每个人做的动作区分，因为http请求是无状态的 。1.Cookiecookie是缓存吗？ No什么是cookie ?cookie 是服务器产生的，保存在客户端的。cookie的本质是保存在客户端的一个文本信息，格式是字典，键值对。cookie的名称是由开发自定义的 。cookie 的分类会话级coo
2021-08-10 17:02:50
191
原创 node.js fs模块练习
//判断服务器上面有没有upload目录，如果没有创建这个目录，有就不做操作let fs =require('fs');let path = './upload';fs.stat(path,(err,data)=>{ if(err){ //执行创建目录 mkdir(path); return; } if(!data.isDirectory()){//如果是文件 fs.unlink(path,()=>{//删除方法 if(!err).
2021-08-09 11:12:47
99
原创 node.js HTTP模块 URL模块 supervisor工具
在vscode 上安装一个插件 Node Snippets创建一个js文件 直接输入node 就能创建一个服务器node-http-servervar http = require('http'); //表示引入一个HTTP模块/*request 表示获取url传过来的信息 response 表示给浏览器 响应信息*/http.createServer(function (request, response) {//创建一个WEB服务//设置响应头,第一个参数表示 状态码 res
2021-08-08 22:31:13
135
1
原创 React管理后台退出功能
使用Dropdown 组件进行页面调整首先我们在Frame里的index.js 里面引入Dropdownimport { Layout, Menu, Breadcrumb, Icon ,Dropdown} from 'antd';引入好之后放入<Header> 里面 ，然后做一个样式Dropdown有一个 overlay是一个类似于menu,然后我们定义一个Menu<Dropdown overlay={popMenu} > <
2021-08-07 20:53:04
658
原创 React管理后台登录判断
在登录页面里，当用户点击登录的时候我们肯定要调用服务器端的接口 ，判断用户是否登录成功，如果登录成功会把对应的（Token值）存在本地，接着我们会根据 （Token）值来判断用户是否登录接着我们创建一个文件utils这里面会封装一些我们常用的方法，比如 auth.js他的作用是存取用户的一些授权信息的export function getToken(){ //会在localStorage里面存放Token ,服务器会给我们一个类似令牌，也会保存下来 return localStora
2021-08-07 20:10:38
1288
原创 React 项目 列表页面的搭建
首先我们进入 商品列表页面List.js 里面这里我们使用了 antd 最终的列表页面效果如下，根据这个展示情况进行组件的添加先绑定表格的数据 和列columns 是一个数组，每一个列都有一个标题columns = [{title:‘序号’，key:‘id’,width:80,align:‘center’},{title:‘名字’，dataIndex:‘name’//表示名字对应的一个数据里面的，某一个属性名对应的}]table 的显示边框属性 bordered接着有一个d
2021-08-07 12:22:15
853
原创 React项目 管理后台页面框架搭建
使用 antd 这个框架搭建使用 Layout 进行页面布局在文件夹 component 创建一个新的组件 叫做Frame ,然后里面在创建一个叫做index.js ,这是我们管理后台的一个大的布局结构在index.js 里添加代码 ，首先在antd 找到合适的布局，然后把代码粘贴过啦，这里我使用的是把Layout 里面的内容引入import { Layout, Menu, Breadcrumb, Icon } from 'antd';const { SubMenu } = Menu;
2021-08-07 10:53:40
1468
原创 React 项目实战 路由和页面组件创建
1.项目创建和组件安装创建项目 npx create-react-app myapp#antdnpm i antd指定安装固定antd版本： npm i antd@2.10.4 —save (在 node_modules同级目录下)#路由npm i react-router-dom搭建目录结构首先建立两个文件 一个pages 保存页面信息 一个components 存放组件信息在pages 里面创建一个登录页面 Login.js ,在创建一个所有管理后台的页面叫做admin 。
2021-08-06 16:56:31
516
原创 React 查找表格数据例子
假设我们已经有了一个返回 JSON 的 API[ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false, nam
2021-07-29 15:09:17
688
2
原创 React 状态提升 温度转换项目
使用 create-react-app 快速构建 React 开发环境create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6温度和类型是数据源npm install -g create-react-appcreate-react-app reactcd react npm startimport React, { Component
2021-07-29 11:47:44
166
原创 表格 时间类控件
时间类组件的 value 类型为 moment 对象，所以在提交服务器前需要预处理。表格 时间类控件DatePicker日期选择框输入或选择日期的控件何时使用#当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。const { MonthPicker, RangePicker } = DatePicker;API#日期类组件包括以下四种形式。DatePickerMonthPickerRangePickerWeekPicker<DatePicker sh
2021-07-23 16:39:02
431
原创 弹出层中的新建表单
当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。、Modal对话框何时使用#需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。API参数说明类型默认值visible对话框是否可见boolean无title标题s
2021-07-23 15:49:24
1315
1
原创 Ang 表单 注册新用户
用户填写必须的信息以注册新用户。import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,} from 'antd';const { Option } = Select;const AutoCompleteOption = AutoComplete.Option;const residences = [ { .
2021-07-23 14:40:40
390
原创 antd Grid栅格
24 栅格系统。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。概述布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：通过 row 在水平方向建立一组 column（简写 col）你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素栅
2021-07-23 14:32:27
11952
原创 Ant Design Form表单
内联登录栏，常用在顶部导航栏中。import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css';import './index.css';import { Form, Icon, Input, Button } from 'antd';function hasErrors(fieldsError) {//getFieldsError() return Object.keys(
2021-07-22 14:51:29
1040
原创 Dva入门课
React 没有解决的问题React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。如果开发大应用，还需要解决一个问题。通信：组件之间如何通信？数据流：数据如何和视图串联起来？路由和数据如何绑定？如何编写异步逻辑？等等通信问题组件会发生三种通信。向子组件发消息向父组件发消息向其他组件发消息React 只提供了一种通信手段：传参。对于大应用，很不方便。数据流问题目前流行的数据流方案有：Flux，单向数据流方案，以 Redux 为代表Reactive，响应式数据
2021-07-21 16:31:08
546
原创 Dva 概念
数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）。ModelsState State 表示 Model 的状态数据，通常表现为一个 ja
2021-07-21 13:56:38
429
原创 React 元素渲染
元素是构成 React 应用的最小砖块元素描述了你在屏幕上想看到的内容。const element = <h1>Hello, world</h1>;与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象，React DOM 会负责更新 DOM 来与 React 元素保持一致。你可能会将元素与另一个被熟知的概念——“组件”混淆起来。我们会在下一个章节介绍组件。组件是由元素构成的。将一个元素渲染为 DOM假设你的 HTML 文件某处有一个 <div&g
2021-07-19 10:42:56
49
原创 React 哲学
我们认为，React 是**用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。**它在这里插入代码片在 Facebook 和 Instagram 上表现优秀。从设计稿开始假设我们已经有了一个返回 JSON 的 API，以及设计师提供的组件设计稿。如下所示：该 JSON API 会返回以下数据：[ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {catego
2021-07-17 16:46:00
82
原创 React 组合 vs 继承
React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。包含关系我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中：function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> );}这使得
2021-07-16 17:47:17
276
原创 React 状态提升
状态提升通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。创建一个用于计算水在给定温度下是否会沸腾的温度计算器。我们将从一个名为 BoilingVerdict 的组件开始，它接受 celsius 温度作为一个 prop，并据此打印出该温度是否足以将水煮沸的结果。function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The
2021-07-16 17:02:40
420
1
原创 React 表单
表单在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称受控组件在 HTML 中，表单元素（如、 和 ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新.我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的
2021-07-16 15:25:42
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人