- 博客(545)
- 资源 (15)
- 收藏
- 关注
RSS订阅原创 组件的概念
文章目录组件？从UI层面看组件化组件？等下，你有没有留意到我说了一个很关键的词，叫组件。组件？直观的理解组件是一个什么东西？可拼接，可组合，搭积木，乐高积木? 对，组件就是这样一个神奇的东西，组件可以单独开发，单独使用，把一堆组件拼在一起就可以成为一个更大的组件，更多的组件在一起组合成一个页面，一个应用，一个系统。前几年前端技术更新迭代很快，AngularJS，React.js，Vue.js等类MVC框架横空出世，各领风骚小几年。在这波前端潮流中，带来了组件化这样一个重要的概念。从UI层面看组件
2022-12-29 15:10:19
483
原创 vue修改部分文件热更新失效
笔者最近遇到了vue修改文件热更新的失效的问题【并不是改所有的文件都失效，是改部分文件失效】每次更新完那个文件的代码之后页面并不会有反映，即使刷新页面也没有获取到刚刚更改的文件的最新效果。必须重启项目才可以看到最新的更新。最开始是以为有什么配置，比如某些文件的更改会触发热更新，某些文件的更改不会触发热更新。但是经过查看vite.config.ts文件并未发现有相关的配置，且hmr:true。然后笔者排查到此由于时间原因就放弃了【就每次更改完文件内容然后就重启一次服务，非常麻烦浪费精力】。最终在编译部署的时
2022-12-06 15:48:37
3714
4
原创 tinymce富文本编辑器做评论区
今天分享一下tinymce富文本编辑器做评论区的全过程。二、每个功能的实现1.自定义toolbar的功能区①对应的样式以及意义首先加了一个自定义的icon - 追加评论用的然后加了一个自定义的文字 - 显示隐藏评论区用的2.展示、收起评论区①对应的样式以及意义点击Show/Hide comment控制右侧评论区的显示隐藏【始终显示的话占用空间】首先自己做一个评论区的区域然后我们改一下刚才注册的tinymce的setup里面的showCommentArea的onAction3.选择文
2022-11-30 13:59:32
1095
1
原创 Jest API使用方法
如上面的知识图谱所示，一个常见的测试框架通常需要实现这些功能:● before/after 钩子函数: 如beforeEach，afterEach，● Mock方法： 函数Mock，时间mock等。● 断言: 判断一个描述是否正确，在Jest中常为 expect(xxx).toBe(xxx) 的形式● 测试覆盖率：提供多种形式的测试报告，如HTML，文本等形式这些基本的测试功能是每一个测试框架都需要考虑实现的，各个测试框架除了Api的设计方式可能有所不同之外，其核心功能是一致的，在使用新的测试框.
2022-11-27 13:44:25
890
原创 Jest单测实践篇
快照测试快照测试在你要确保你的UI没有发生改变的时候非常有用。jest的快照测试为文本测试，第一次执行时存储本次的快照，然后在之后的测试过程中进行文本比对。toMatchSnapshot() 方法import React from 'react';import Link from '../Link.react';import renderer from 'react-test-renderer';it('renders correctly', () => { const tree =
2022-11-17 20:43:24
1469
原创 Antd表格性能优化
国内React项目大多数人选择配套的UI库的时候都会选择Antd。如果是非常简单的页面用Antd的话其实是完全没问题的，性能感觉不到什么瓶颈，样式也还是非常好看的。但如果数据量大起来了的话，其实就会暴露出来问题了。如下图一个实际项目，下面的可编辑表格里面的数据量大概在四千左右，这个时候就出现了比较严重的性能问题是需要解决的。尤其是这个页面做了多人协同操作的功能，性能对于这个页面来讲是非常重要的，否则别人一个操作可能会导致我这边卡顿就是用户不可以接受的了。
2022-11-12 14:49:20
3513
4
原创 前端路由与历史
在做全栈支持的过程中发现很多后端同学对hashHistory和browserHistory的区别不清楚不理解，也不知道如何正确地配置browserHistory，在本文中我们希望回答大家的这些疑惑:React应用url中的?_k=xxx 是什么?history是什么？为什么我们需要和它打交道?hashHistory和browserHistory有什么区别? 什么情况下使用hashHistory，什么情况下使用browserHistory?如何在SOFA系统中配置browserHistory?前
2022-10-24 16:38:29
1740
原创 jsx进阶篇
文章目录前言一、什么是jsx?二、那么为什么是这三个参数呢?三、那么为什么不直接在js中写UI呢?四、那么生成的代码怎么变成真的DOM?五、那么为什么不把这玩意和react库封装在一起?六、那么为什么非要一层VDOM呢？七、等等教练，我还有几个个小问题八、为什么要用jsx?九、等下你这些代码里的{}是什么? 为什么不直接在{}里写循环套jsx十、props？属性? 为什么需要属性十一、咦，这个className是什么鬼，为什么不用class?十二、老司机求带啊，有没有其他React技巧前言我们假设你有一
2022-10-16 10:34:58
694
原创 6.HTML标签/元素学习
我们前面了解了很多软件开发的前置知识，以及编辑器的使用，包括HTML的结构，今天我们就来学习一下HTML的标签即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML： 这是一个段落 < p > 这是一个段落 这是一个段落 < p > 这是一个段落以上实例在浏览器中也能正常显示，因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
2022-09-22 21:21:06
567
原创 5.HTML结构及标签结构介绍
HTML对于前端来讲就是我们的身体里面的骨头，是项目非常核心的骨架内容。HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面下面是一个可视化的HTML页面结构：PS:
2022-09-19 16:55:52
531
原创 4.前端开发工具介绍以及下载使用
一个战士上战场之前肯定是要配好武器的，那对于我们前端开发来讲，我们的武器就是我们的编辑器，相当于战士的枪一样重要。在部队枪是不允许离身的【把枪放地上都不行，必须在人手上】。我们开发的全过程也基本上是一样的，所以选好一个编辑器是至关重要的。
2022-09-18 15:56:12
2230
原创 3.前端开发就业前景
在学习前端开发之前再来跟大家一起看下前端开发的就业前景。从事这个行业之后你大概的薪资是怎么样的【注意二八原则，这里只讨论八的这一部分，少数精英不适用，会比八的这一部分人高出很多】本文会带着大家一起看下一、二线城市的就业前景。以及实习生【1年以下】、初级【1-2年】、中级【3-5年】、高级【5年+】前端开发人员的就业薪资。
2022-09-18 12:17:06
1997
原创 1.了解网页的构成
想要学习开发，首先要了解这个行业的一些基础的东西，比如开发能做什么、都有哪些角色、行业前景、职业发展前景等等…今天我们就先了解一下网页的构成。此篇博客只是以web网页进行了举例，手机上的app、小程序、电脑的应用程序都是一个道理，大家需要举一反三进行理解~所有的技术都是想通的，大家搞精通一个再去换其他的就会游刃有余了。祝你在学习的路上一切顺利~如果不想看博客可以戳这里→→→视频讲解链接。
2022-09-18 00:39:05
576
原创 项目架构之 -- 提交代码时的ESLint校验
文章目录准备工作【生成项目】第一步 - 安装所需依赖第二步 - 配置规则2.1 配置ESLint规则2.2 配置prettier规则2.2 配置package.json第三步 - 测试对于一个项目的架构来讲代码格式的统一是必不可少的。如果一个项目里面各种语法杂乱无章，对于后续的维护工作也是很恼火的。代码写的不优雅会被别人吐槽死~我们在做架构的时候一定要尽量的将标准大众化，这样才能让更多的人接受。准备工作【生成项目】以react为例，用脚手架生成一个项目，目录结构如下【不需要一致，仅供参考】：【这里
2022-07-05 22:57:02
619
4
原创 React 单元测试入门
不知道大家有没有看到过，一些网上流传的关于程序员写bug的段子:今天我们来聊聊怎么跳出这个斐波那契循环，通过单元测试的方式减少程序中bug的数量。注意一下用词是减少，不是消除，单测不是银弹，过分信任单测而不做集成测试可能导致如下后果:很多同学不太理解为什么要做单元测试（上一个这样想的波音的外包同学已经把波音737搞坠毁了），在日常开发过程中，我们对待编写测试用例的态度大概是这样的：强调了一下单元测试的重要性，然后讲讲什么情况下要写单测，写单测要因情况而变:● 公用组件库，底层SDK，基础部分程序，更新不
2022-06-17 18:29:41
1365
1
原创 程序设计原则
设计原则是提高代码可维护性，帮助建立灵活、稳定的系统的基石。主要包括通用设计原则和S.O.L.I.D原则通用设计原则是要求我们在任何开发中都要坚持和遵守的基础原则。S.O.L.I.D原则更适用于支持面向对象的高级语言，有些原则可能不适用于目前的前端开发，但是了解它的思想对我们也是有益的。通用设计原则 (Common Design Principles)Keep It Simple and Stupid (KISS)● 代码要易读易维护。● 不要过度设计一个方案，满足需求的最简洁的方案即是最好的方
2022-06-08 20:36:50
401
原创 根本原因分析（RCA）
文章目录一、根本原因分析方法二、因果图三、如何绘制鱼骨图四、导致缺陷的原因分类（大骨）五、小思考六、五问法1.示例2.五问法要点3.五问法过程举例七、关联图1.案例分析2.使用关联图进行分析一、根本原因分析方法二、因果图三、如何绘制鱼骨图四、导致缺陷的原因分类（大骨）五、小思考导致客户认为我们常常不能达成commitment的原因是什么？六、五问法1.示例2.五问法要点3.五问法过程举例七、关联图1.案例分析2.使用关联图进行分析...
2022-05-17 17:21:49
2323
原创 软件开发工具大题
概念模式指人们在认识事物过程中，对于某一事物或某一系统形成的抽象的一般化的框架。框图是描述程序执行的逻辑过程的概念模式，把程序执行的基本步骤归纳为输入、输出、判断、处理、起始和终止几个基本功能。当程序模式比较大时，直接用框图表示会过于复杂，使人无法分层次地掌握程序的结构。针对这种情况，人们引入结构图。数据字典是一种描述数据内容的概念模式它用表格的形式列出数据的基本属性以及相互关系，作为人们对于数据的认识和了解，它的雏形是编写软件时的变量说明或标识符清单。时序网络是软件开发中常用的一种概念模式。
2022-05-03 17:46:56
2255
原创 项目的Commit 规范
根据 angular 规范提交 commit，这样 history 看起来更加清晰，还可以自动生成 changelog。<type>(<scope>): <subject><BLANK LINE><body><BLANK LINE><footer>（1）type提交 commit 的类型，包括以下几种feat: 新功能fix: 修复问题docs: 修改文档style: 修改代码格式，不影响代码逻辑r
2022-04-28 12:49:26
600
原创 软件开发工具【十四】 之 常用建模工具
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【十三】 之 Eclipse插件的使用与开发文章目录一、UML建模介绍1.面向对象方法的出现和发展2.面向对象的一些概念3.面向对象方法的基本过程4.组件思想二、RATIONAL ROSE建模工具介绍1.RATIONAL 公司简介2.面向对象的分析设计和Rational Rose3.Rational Rose可视化建模的特点三、使用RATIONAL ROSE 建模1.UML建模的三大部分2.需求分析之用例图与活动图3.系统分析与设计四、E.
2022-04-12 14:36:24
5882
原创 软件开发工具【十三】 之 Eclipse插件的使用与开发
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【十二】 之 CVS的安装及使用文章目录一、插件简介1.什么是插件2.插件的构成二、使用PDE进行插件开发1.PDE简介2.清单编辑器三、常用插件扩展点四、常用插件介绍与使用1.常用插件有哪些2.使用EMF插件能实现哪些功能一、插件简介1.什么是插件2.插件的构成extension标签是插件扩展点的信息。二、使用PDE进行插件开发1.PDE简介2.清单编辑器三、常用插件扩展点四、常用插件介绍与使用.
2022-04-04 16:36:52
4978
原创 一百行js代码手写薪手引导功能
文章目录前言：一、项目的html代码二、项目的css代码三、项目的js代码四、手写的intro的css代码五、手写的intro的js代码前言：此篇文章的初衷是为了与大家分享一下新手引导这类的开源组件的实现原理。目前由于时间原因没有进行代码的文字说明与介绍。后续会补进来。一、项目的html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht
2022-03-29 13:21:27
1623
原创 软件开发工具【十二】 之 CVS的安装及使用
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【十一】 之 Eclipse开发CDT常用功能文章目录一、CVS介绍1.CVS是什么2.利用版本控制软件的好处二、常用版本控制软件三、CVS的安装与配置1.CVS的安装2.CVS Control Panel的设置3.CVS访问权限的设置4.将软件载入CVS资源库5.CVS的日常使用a.提出（Check Out）b.代码同步（Synchronize）一、CVS介绍1.CVS是什么2.利用版本控制软件的好处管理文档。使用.
2022-03-28 11:46:37
7814
原创 软件开发工具【十一】 之 Eclipse开发CDT常用功能
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【十】 之 调试程序文章目录一、自定义编辑器1.C/C++ 首选项设置2.常规首选项设置3.设置编辑器布局二、定制工作台1.定制工具栏2.定制快捷键3.定制透视图4.复位透视图5.保存透视图6.删除透视图三、格式化代码1.设置代码格式2.格式化代码3.使用代码模板四、生成历史记录1.将文件替换为历史版本2.从历史记录中恢复已删除文件一、自定义编辑器1.C/C++ 首选项设置2.常规首选项设置3.设置编辑器布.
2022-03-21 17:50:29
6102
原创 软件开发工具【十】 之 调试程序
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【九】 之 使用Eclipse进行C/C++开发文章目录一、安装GDB1.安装GDB的步骤二、调试C程序1.CDT调试器2.设置行断点3.设置方法断点4.设置事件断点5.设置断点动作6.调试程序a. 调试相关配置b.调试透视图c.调试c程序一、安装GDB1.安装GDB的步骤二、调试C程序1.CDT调试器2.设置行断点3.设置方法断点4.设置事件断点5.设置断点动作6.调试程序a. 调试相关配置.
2022-03-14 23:19:35
3875
原创 软件开发工具【九】 之 使用Eclipse进行C/C++开发
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【八】 之 Eclipse工作台文章目录一、安装MINGW1.MinGW是什么，及其安装方法二、第一个C/C++项目1.新建C/C++项目2.新建Source Folder3.新建C++ Class4.编译C程序5.运行C程序6.使用浏览功能三、使用ECLIPSE重构功能1.重命名变量2.抽取方法3.抽取常量四、使用搜索功能1.使用查找/替换方法2.使用Search菜单进行搜索一、安装MINGW1.MinGW是什么，及其安装方法二.
2022-03-07 14:01:10
7078
原创 软件开发工具【八】 之 Eclipse工作台
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【七】 之 Eclipse入门文章目录一、初识Eclipse工作台1.什么是工作空间2.Eclipse工作台的组成部分二、透视图及视图介绍1.透视图包括哪些部分2.主要视图有哪些a.导航器视图b.大纲视图c.错误视图d.搜索视图e.任务视图f.控制台视图三、编辑器介绍1.常用的编辑器有哪些四、管理项目1.新建项目的步骤2.从外部导入项目五、常用快捷键介绍六、使用Eclipse帮助文档一、初识Eclipse工作台1.什么是工作空间.
2022-03-01 20:55:34
4660
原创 软件开发工具【七】 之 Eclipse入门
感谢内容提供者：金牛区吴迪软件开发工作室接上一篇：软件开发工具【六】 之 软件开发工具的现状与发展文章目录一、Eclipse简介1.Eclipse是啥2.Eclipse的体系结构二、Eclipse的获取与安装方法一、Eclipse简介1.Eclipse是啥2.Eclipse的体系结构二、Eclipse的获取与安装方法下一篇：软件开发工具【八】 之 Eclipse工作台...
2022-02-24 15:37:53
3815
2
canvas2image.js
2019-05-11
20190727153948chromecj.com.zip
2019-07-27
canvas2image.js
2020-06-04
lexograph.ttf
2020-03-24
前端mac配置视频（1）.rar
2019-05-15
前端mac系统配置（2）.rar
2019-05-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人