谁诉离殇~-CSDN博客

原创 -浏览器渲染

这个实际上只需要掌握reflow和repaint就好了浏览器如何渲染页面浏览器解析1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。2、HTML 文件加载后，开始构建 DOM Tree3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree4、Javascript 脚本文件加载后，通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tr..

2022-02-14 10:48:53 376

原创 -表格和表单

一、表格(1)定义表格(2)标签:<table> 定义 HTML 表格<thead> 标签定义表格的表头<tbody> 标签表格主体（正文）<tfoot> 标签定义表格的页脚（脚注或表注）// 代码中需要在之前<tr> 元素定义表格行<th> 元素定义表头<td> 元素定义表格单元<caption> 元素定义表格标题，必须紧随 table 标签之后。只能对每个表格定义一个标题，.

2022-02-14 10:48:22 368

原创 -背景图片设置

一、背景图片设置1、设置方式有下载需求的图片采用 img 标签实现（方便用户下载），无下载需求的图片采用 CSS 背景图实现下载需求：比如产品 logo、用户头像、用户产生的图片等无下载需求：比如icon、背景、代码使用的图片2、图片的srcimg 的 src必须要有个值。延迟加载的图片也要增加默认的 src。src 取值为空，会导致部分浏览器重新加载一次当前页面3、图片的alt为重要图片添加 alt 属性，提高图片加载失败时的用户体验4、图片的width 和 he.

2022-02-14 10:47:29 555

原创 -百分比设置margin和padding,line-height,height

用百分数设置margin和padding用百分数设置margin和paddding的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算,如 .demo1{ width:980px;height:500px; } .demo1 div{margin:10% 5%; } // 相当于margin:98 49;为什么都是以宽度为标准1、高度持续增加第一种说法是，padding-top如果以容器高度为参照，那么子元素应用padding值将会继续加高容器的高度，容器.

2022-02-14 10:46:58 941 1

原创 -css杂

(1)设置logo: 用一个<a href="#"><img src="" alt=""></a> 对于可能有下载需求的图片，都用img来实现(2)css中颜色命名方法：命名颜色：color:gray; RGB颜色：color:rgb(0,125,246); 十六进制颜色：color:#cccccc; 短十六进制颜色：color:#fff;(3)子元素选择器：> 选择元素的直接的目标子元素，不是选择所有的子元素 &...

2022-02-14 10:46:25 78

原创 -css实现一些效果(d)

一、伸缩相册[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G00oc7sM-1644806740585)(F:/markdown专用/伸缩相册.jpg)]效果描述：点击图片2，然后图片2变大，把后面的图片往后面挤，图片6变小；再点击图片3，图片3往左移变大，图片2变小。实现描述：用label来绑定input，然后点击label之后，改变它后面所有label的位置。.box label{ width:300px; height:400px; border:

2022-02-14 10:45:51 157

原创 -Border属性制作三角&&斜线

注2: 做三角一般就用下面第一个方法就好了，四条边都加上border用border属性制造图形（三角、梯形等）和斜线(1)四条边都加上border，来画三角(最常用)：这样画的三角，是四个完全一样的三角；实际操作如下首先把这个元素的width和height都设置为0,overflow设置为hidden，图像就不会被拉伸变形，中间也就不会出现空白，也不会显示元素里面的任何内容；简单说就是让元素只显示border然后给四个方向的border都加上一个宽度,让四个方向都由border填充最..

2022-02-14 10:45:17 942

原创 VS Code插件和快捷键

vs code已经不需要打印调试，而可以使用终端工具，在vs code中进行调试，vscode中调试也不好，还是要用chrome dev tool去调试VS Code 配置vscode的配置分为两部分全局配置(用户配置) 和局部配置(工作空间配置，仅针对单个project)全局配置: User Settings是全局配置，应用到打开的任何一个VS Code实例。在Windows环境中，打开 File > Preferences > Settings ，可以看到VS Co..

2022-02-14 10:39:23 965

原创 webpack

打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。接着在页面上引入该 bundle，整个应用即可一次性加载一、了解webpackwebpack是一个模块打包器。是在开发阶段使用，开发完了之后上线这些就和webpack一点关系都没有了浏览器现在还是不支持es6的import这些语法的，所以要把它去交给webpack来处理安装webpack的依赖：npm i // 如果在package.json中写了一些依赖的版本，运行这个命令会自动帮我们添加那些版本.

2022-02-13 13:32:57 219

原创 yarn命令

Yarn 和npm一样，也是一个包管理器一、简介“Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，Yarn 是为了弥补 npm 的一些缺陷而出现的npm缺点：npm5.0之后下面这些问题就少很多了<1>npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。<2>同一个项目，安装的时候无法保持安装的版本一致性。由于pack.

2022-02-13 13:31:53 252

原创 git、github与SVN操作说明(p m)

layout: posttitle: “左中右三栏布局”categories: 工具说明tags: gitexcerpt: 这篇是讲解git指令的文章。git pull报错：Please, commit your changes or stash them before you can merge.,解决1: 放弃本地修改，直接覆盖之,git reset --hard git pull解决2：首先使用 git stash ,这个命令即把当前工作区的修改藏起来(放到另外一个区域)，.

2022-02-13 13:31:08 587

原创 nodeJS安装与npm命令

npm就是node的包管理工具。node package manage一、下载安装node与npm1、下载简介：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。下载：直接去官网下载，安装的时候选择Add to PATH验证：安装完了之后，node和npm就一起安装了，验证的命令为node -v和npm -v。2、修改 node保存位置注：如果只像上面这样子安装的话，接下来安装的所有模块都会自动安装到C盘的node_modules里面，所以.

2022-02-13 13:30:41 1591

原创 react源码解析

React 或者说框架的意义是为了提高代码的可维护性，而不是为了提高性能的，现在所做的提升性能的操作，只是在可维护性的基础上对性能的优化react中的vdom实际上就是通过 property来进行一个attributes的一个判断，来看它是否有变化一、导学react非常纯粹，核心 api 就是 setState，其它所有的内容都围绕组件化来设计，一切基于组件，没有directive 双向绑定和其它API，如果要改变一个ui，就只能通过 setState来进行修改思想超前：react在1.

2022-02-13 13:26:37 2460

原创一、dva基础

^2.4.1。简单说这东西就是用来定义model，然后把model中的数据和页面进行交互的。model的功能主要有两个，第一个是维护一个全局的state，第二个是发送异步请求。model的state里面存放的数据应该是所有组件全局共享的数据，组件局部的数据还是要放在组件自己的state里面。要使用dispatch，connect是必要的，使用了connect才可以使用dispath，但是connect的return可以不返回值。如果需要发送异步请求之后，改变自己组件里面局部的state值.

2022-02-13 13:24:18 541

原创四、umi配置

这里主要是umi和webpack系列的配置。这些都是在config/config.js里面配置的一、基本配置(1)plugins: 配置插件列表类型Array,默认值[]介绍：数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。如果插件有参数，则通过数组的形式进行配置，第一项是路径，第二项是参数export default { plugins: [ // 有参数 [ 'umi-plugin-r.

2022-02-13 13:20:29 5256

原创三、mock与umi-plugin-react插件

一、Mock 数据umi 里约定 mock 文件夹下的文件或者 page(s) 文件夹下的 _mock 文件即 mock 文件。这个mock数据，默认导出的结果，前面为请求方式和请求的url，后面的为返回前端的结果。结果可以是函数，也可以是对象关闭mock：直接返回mock：false，就可以关闭mock了。如果是用的ant design pro那么直接运行命令的时候就可以关闭mock注：返回值为函数的时候就很灵活，函数里面就相当于在写java代码一样(只不过还是js语法)，可以设置

2022-02-13 13:16:38 1255

原创二、umi路由

一、路由路由有三种方式，分别是，约定式路由(即文件路由，根据文件名自动配置)、编译时配置式路由(config/config.js中配置)和运行时配置式路由(src/app.js中配置)1、约定式路由注意：若 .umirc.(ts|js) 或 config/config.(ts|js) 文件中对 router 进行了配置，约定式路由将失效、新添的页面不会自动被 umi 编译，umi 将使用编译时配置式路由约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出

2022-02-13 13:16:12 6493 1

原创一、umi介绍与文件结构

简单说umi就是提供一个脚手架和路由，相当于vue-router的加强版。v^2.8.7一、介绍umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的。内置 react、react-router 等(所以用umi是不用再引入这两个东西了)，umi-plugin-react插件也内置了react-dom，与 dva 数据流的深入融合umi等于roadhog(基于 webpack 的封装工具，目的是简化 webpack 的配置) + 路由 + HTML 生成.

2022-02-13 13:15:21 3679

原创 Ant Design Pro使用备注

1、react踩坑(1)ant table组件的对齐。刚开始以为是自己配置的问题。结果是改变了右边的进度条的样式，然后出的问题。(2)dva的model使用。项目重构的时候，刚开始把所有数据都放在model里面，觉得所有东西都要用connect来弄在props上，结果发现不行。后来只把全局的数据放在model里面，把局部的数据放在自己组件里面，改变自己组件的数据，就在dispatch里面传一个callback(),在callback()里面用this.setState()来改变。(3)高德地图修

2021-11-16 09:27:46 980

原创开发各种功能具体实现

本例为各种功能的具体实现(1)实现table里面的那个，点击左边的加号，展开子菜单。遍历拼接dataSource。这个是所有数据直接返回这里面用了两个递归。具体思路就是：有一个存放所有数据的数组dataArr；数组里面的数据如果插入到了dataSource里面，就把这一条从dataArr里面删除，直到dataArr为空，就遍历完了this.renderDataSource(dataArr); // dataArr为后台返回的数据 renderDataSource(dataAr.

2021-11-16 09:26:53 421

原创三、Ant Design Pro 进阶

一、图表v4 中删除了组件库，如果你还要使用可以跳转到低版本查看二、业务图标如果在Ant Design 官网中没有找到合适的图标，可以到 iconfont.cn 上采集并生成自己的业务图标库三、国际化(i18n, Internationalization)(1)引入国际化插件并开启：这个实际上就是给适配各种语言，可以做网站的语言切换引入插件：pro 通过 umi 插件 umi-plugin-locale 来实现国际的功能，并且默认开启。 umi-plugin-locale 约定在

2021-11-16 09:25:54 390

原创二、Ant Design Pro 布局、菜单、新增页面、CSS Modules和services

一、开发1、区块(block)区块是研发资产的一种，它是一系列快速搭建页面的代码片段，它可以帮助你快速的在项目中初始化好一个页面，帮助你更快速的开发代码。当前的区块都是页面级别的区块，你可以理解为它是一些项目中经常会用到的典型页面的模板，使用区块其实相当于从已有的项目中复制一些页面的代码到你当前的项目中以前开发一个页面：创建 JS -> 创建 CSS -> 创建 Model -> 创建 service -> 写页面组件。现在开发一个页面：下载区块 -> 基于区块初

2021-11-16 09:25:03 2685

原创一、Ant Design Pro介绍与文件结构

版本v4一、入门Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观。基于上述目标和提供了以下的典型模板，并据此构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antdnpm相关命令升级依赖包：npm update: 这个是npm自带的，只能按照 package.js 中标注的版本号进行更新对应的依.

2021-11-16 08:56:14 2165

原创 React Router

这东西好像和vue里面的路由确实不一样;react-router非常复杂整体，比vue-router强大很多React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步React Router 知道如何为我们搭建嵌套的 UI，因此我们不用手动找出需要渲染哪些组件，即,向页面返回了一个路由组件(即默认导出路由，然后放在ReactDOM里面)，当路由组件检测到地址栏与Route的path匹配时，就会自动渲染对应的.

2021-11-16 08:55:03 142

原创三、Hook

简单说，hook就是一些函数，不能在Class组件中使用，只能在函数组件中使用。不使用class组件，而全部使用函数组件是一个趋势一、Hook 简介Hook 是 React 16.8 的新增特性。要启用 Hook，所有 React 相关的 package 都必须升级到 16.8.0 或更高版本。如果你忘记更新诸如 React DOM 之类的 package，Hook 将无法运行。它可以在使用函数组件的时候使用this(state就在this里面)和生命周期等，其它的类组件才用的特性。如.

2021-11-16 08:54:22 244

原创二、React进阶

一、代码分割为什么要使用代码分割：在用webpack进行打包的时候，每个模块被导入合并在一个文件，这个文件叫做 bundle，这些 bundle 在一张页面上包括了整个APP。然而，当 APP 增长的时候，这些 bundle 尺寸开始变得越来越大，因此影响了页面加载时间使用ant design pro的时候，打包出来的不是一个bundle文件，而是把每个模块打包成了一个async.js。如果用了代码拆分中的import(),就会把对应的js模块单独进行打包，打包出来的js模块名字实例如56.ffe

2021-11-16 08:53:55 170

空空如也

空空如也