- 博客(133)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 温故而知新篇一
团队分享之设计模式[认知]写在前面的话单例模式工厂模式策略模式代理模式观察者模式模块模式构造函数模式混合模式总结写在前面的话在面向对象软件设计过程中，针对特定问题的简洁而优雅的解决方案。在不同的编程语言中，对设计模式的实现其实是可能会有区别的。（23种）单例模式是保证一个类只有一个实例，并且提供一个访问它的全局访问点。适用场景需要频繁实例化然后销毁的对象创建对象时耗时过多或者耗资源过多，但又经常用到的对象有状态的工具类对象频繁访问数据库或文件的对象资源共享的情况下，避免
2021-10-19 22:02:58
122
8
原创 Rollup 打包通用项目工程库[非TS]，工程化之路
Rollup 打包通用项目工程库[非TS]，工程化之路很长一短时间没有写博客啦！最近刚好有空写了一下，本文侧重于实践，文案描述不太多，总体实现效果如图效果图1效果图2Rollup 的基础概念就不说的，不知道请点击这里看官网在这里就不废话多说啦，直接上代码，下面就是通用的一些基础配置，我们所有的工具类，组件库等都是通过这一块实现的，形成通用的一些配置，形成工程化的模板！下面我以组件库图表为例子，项目工程结构如下：项目目录├─ packages
2021-09-03 08:26:17
168
1
原创 husky6.* 使用指南、标准化、效率化
husky6.* 使用指南、标准化、效率化前言husky6的版本更新好久啦，但是一些主流的框架都在使用新版的husky，但是好多都是使用的老版本的husky，新版的很少，文档也少。我们团队中正好，搭建新版的组件库，随便研究了一下husky 6.* 的api,并且应用到项目中，这篇文章记录了我加入的指南，避免各猿(媛)友,踩坑。现代原生git钩子变得容易;Husky 提高了提交质量，并提高了规范化！提交或推送时，可以使用它来整理提交消息，运行测试，整理代码等。赫斯基（Husky）支持所有Git钩子
2021-04-07 07:13:36
598
1
原创 搭建rollup的组件库,研究和实战
搭建rollup的组件库,研究和实战前言今年慢慢的发现大部分主流的前端框架vue和react都采用rollup来打包，但是好多UI组件库，基本没有用rollup来打包，接下来我就基于rollup搭建一个UI库，来发布组件，并且对rollup的一些实践，并记录下来。rollup 介绍官网上是这样说的Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaS
2021-03-29 09:22:02
511
2
原创 开启nginx 用户登录认证
前言最近在做前端工程化的一些东西，形成一种开发文档和组件化的demo,供前端成功可见，其他的部门或者用户通过密码访问，但是这个认证不想太复杂，想来想去，在nginx上配置把，做个拦截，相对来说，没有任何成本，新人入职，可以有个专门的学习和熟悉的过程，大大提高新人的效率和后面的追踪！安装yum -y install httpd-tools生成密码htpasswd -c pass.db idssfe默认在当前位置下会有一个pass.db的文件，我们可以查看该文件cat pass.db
2021-03-22 09:56:04
248
原创 基于md的UI组件文档库研究
写在前面的话自过年以来，由于时间的原因，一直没有更新博客，年前规划的事情，一直没有推动，一直想写个基于vue3的禅思UI库，迟迟为动手，各个方面的原因都有吧，一边工作，一边要忙着考试，心有余力而不足啊！前端组件化是我们前端圈子里最流行的一段话，也是我们前端在开发过程中面临的挑战。所以我们面临的问题很多，学习的有限，所以一边的学习，一边的去研究，把已有的消化为自己的，这才是技术人员的成长之道。我为了后面我自己的禅思UI库做准备，所以我根据已有的，慢慢去琢磨，看看别人的思想和设计，来完成属于禅思的组件
2021-03-15 09:59:58
222
原创 webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs‘
webpack升级5之后编译的问题 Cannot find module ‘webpack-cli/bin/config-yargs’遇到问题我们在在github项目的Issues看到Error: Cannot find module ‘webpack-cli/bin/config-yargs’ #1948this is the older folder structure i just created a few days ago:所以我们把 webpack-cli 降级到3*的版本 即可
2021-01-26 14:21:05
348
原创 定制团队的eslint rules(二)
@[TOC](定制团队的eslint rules(二))前言在上篇文章中定制团队的eslint rules(一)，已经介绍了eslint的各种参数说明，配置等等，对它有个大致的了解，接下来，我如何定义的一个自己的团队规则配置，以cicada-eslint-config为列。项工程搭建目录树我搭建我的一个cicada-eslint-config 的项目工程，具体目录树如下。cicada-eslint-config├─ index.js├─ package.json├─ README.md└
2021-01-04 11:24:30
194
原创 定制团队的eslint rules(一)
定制团队eslint前言ESLint介绍作用配置方式配置参数[主要针对第二种方式]Rules 说明结尾语前言我们都知道，javascript 是一门动态弱类型语言。现在平台、环境等各种因素，很复杂，造成团队之间的风格，各种各样，有时候也会出现不可避免的错误，造成的排查力度大，团队维护难，团队合作差等等。然而ESLint的出现，帮我们团队解决了代码统一，风格统一等的问题，让我们能在编译中发现代码错误的工具，在团队协作中，避免低级 Bug，产出风格统一的代码。从而提高团队的凝集力。对外让人感觉很正规的印象。
2020-12-27 14:01:47
5925
11
原创 我心中的前端工程化
我心中的前端工程化前言前端工程化四化一架前言最近好像流行一句话，“别更新啦！我学不动啦！”,由这句话不难看出，前端技术一直再不断的更新，技术的不断的都能新的目的，就是为了让页面渲染更快，承载的东西更多等等前端工程化“前端工程化”是什么？四化一架“四化一架”是什么？四化一架之开发规范化四化一架之模块化四化一架之组件化四化一架之自动化四化一架之脚手架...
2020-12-10 20:46:40
178
原创 vue-cli 打包之后的各种部署问题集中地
vue-cli 打包之后的各种部署问题集中地，这里总能找到你自己的方式。前端越来越多的人再使用vue,现在也越来越多的前后端的解耦，所以在这个时代种，前端的人员对于的自己的项目部署，要有充分的知道，也知道的一些各种配置和部署，以应对后面的变化，以下的部署方式都是自己通过实现的一些整理方式。第一种分离式部署部署到nginx上在nginx 上部署项目是前端比较常见的，也是比较大众的，市面上大部分都在这上面部署的！下面让我们看下如何在nginx 上配置。部署在根目录下面，比如你访问的是htpp:/
2020-12-02 13:37:54
922
原创 在前端里，谁的位置不可少！怎么提高中标率？
在前端里，谁的位置不可少！怎么提高中标率？前言最近一直在公司的事情，因为我们组的2个人请的长期假期，造成前端的资源一度紧张，又是临近年终，公司各个产线忙各种招标的事情，而招标的事情是要开发一个针对招标需求的一个系统，说白拉就是开发一个不需要后端的支持的一个前端系统，包括数据尽量真实，前端业务尽量完美！哎，压力山大…,默默吐糟产品经理…其实在我没来这家公司之前，我都会遇到一个场景，就是项目经理，总是追着前端问，开发的怎么样拉？今天做多少拉？能看吗？等等…，项目经理的各种炮弹，轰炸而来！这时，作为前
2020-11-23 19:56:17
216
原创 vuepress 热更新失效研究
vuepress 热更新失效研究问题开发时修改/docs目录下的.md文件后触发热更新本文提供2中方案修改第一种 安装依赖 watchpack$ npm install -D watchpack这种方法 不能更新config 的一些配置，如果修改拉，必须重新运行第二种 修改package.js 种的命令官网上是这样的$ "dev": "vuepress dev docs"改为这样的$ "dev": "vuepress dev docs --temp .temp"这种方法是通
2020-11-02 20:32:44
3780
10
原创 前端工程化研究之npm私服
前端工程化研究之npm私服前言由于公司内部项目开发，处于隐私保护的需要，不想将自己封的包推到npm社区，，但又急需要一套完整的包管理工具来管理越来越多的组件，模块，项目；还有经常下载一些npm包，有时候下载不下来，有时候下载，下来运行报错，各种坑，还有内部git 环境ci/cd 自动部署耗时过程，就把公司使用频繁的一些包弄到内部环境，有内部环境下载，会更快，也不会出现下载不下来的情况！经过多次调研，npm有各种各样的私服方式，因为我们对这一块看的也不是很重要，也没有必要花太多时间在这上面，就用一个简单
2020-09-09 18:23:53
2739
2
原创 前端工程化研究之数据mock化
前端工程化研究之数据mock化相信大家都知道，前后端分离最的好处就是各司其职，效率更高。我们都知道，在早些年，也就是”三剑客“时代，往往等待后端开发完成之后，前端才能完全介入开发工作，有冲淡测试数据的角色。前端的眼里越来越大，往往项目的延期，推到前端的角色上，大部分的项目开发，往往都是前期很轻松，等到快上测试的时候，就是各种加班，更有甚者通宵，这又是谁的过呢？前端、后端？各种责任的推卸。开发的周期后端和前端不是同步进行的，造成开发的周期扩大，成本的增加；前后端的分离开发，按照规范执行，事半功倍，效率、成本
2020-09-07 16:07:05
2024
2
原创 前端工程化研究
前端工程化研究前言随着互联网的迅速发展，这几年进化速度之快让人咂舌，很多前端工程师都不禁吐槽“学不动了”。如今前端可谓包罗万象，产品形态五花八门，涉猎极广，各种各样的框架和库，随着web业务日益复杂化和多元化，UI的要求变高，从WebPage模式为主转变为WebApp模式，也从有混合模式开发到分离式开发的转变，对前端工程师的能力越来越来高，能力和层次已经不是 HTML、CSS、JS 前端三剑客仗剑那个时代了，我记得在15年的时候我在上海，当时JS 框架以 jQuery 为主，less 基本都不用，而我
2020-08-25 17:51:11
1904
6
原创 前端微服务化研究(六)：沙盒实现
在写这个之前，我们先说下fetchfetch什么是fetch: 在msdn上是这样说的，提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与
2020-08-21 18:03:53
3279
4
原创 基于 TypeScript + Rollup 构建类库和发布npm
基于 TypeScript + Rollup 构建类库和发布npm建立项目工程$ mkdir virtual-list$ cd virtual-list$ npm init -y$ mkdir src$ cd src$ type nul>index.ts$ cat <<EOF >.gitignore > node_modules > EOF安装和配置 typescript安装依赖$ cd virtual-list$ npm inst
2020-08-14 15:51:47
6386
5
原创 elementUI之el-select多选tag数值问题，研究和改造
写在前面的话我们在使用官网的UI组件的时候，总会遇到这样活着那样的展示问题，这些虽然都是小小的问题，但是产品经理就是非要和你过不去，说这些不是我想要的样子，而我们就是因为这个小小展示问题，功能没问题，就是要花很大的时间，将官网上的组件进行一顿改造，其实我们也很欲哭无泪啊！毕竟组件不是我们开发的，开发一套组件也不是一朝一夕能完成的。所以我们只能默默的去改造，改造的过程，心里也不知道埋怨多久啦！下面我改造和研究的一些组件的问题，以select 多选tag 问题！使用过程我们用的是element-ui 的
2020-07-21 17:15:02
7998
6
原创 基于select下拉分页，查询，回显，默认值研究和以及实现
基于select下拉分页，查询，回显，默认值研究和以及实现前言随着vue的技术越来越成熟，前端圈子里涌现出很多UI库，正整用到自己项目中和业务中的聊聊无几，我们公司用了element UI 框架，真心不想吐槽，用别人的ui框架，只能默默的忍受啊，哈哈！在项目中我经常用到select选择框，在下拉数据比较多的情况下很容易造成浏览器的吃力，特别在表格中，会生成很多如下dmo,造成大量的dom树,如下图在一般情况下，表格中的列特别多，分页的话一般，也有20条吧，相当于20个dom,如果分页点击，生成的更
2020-06-15 20:57:14
2691
2
原创 高级工程师必学，AST实践和研究[一]
高级工程师必学，AST实践和研究[一]前言通过前面的文章(聊一聊 Javascript 中的 AST)，我们知道了什么是AST,以及AST在项目中的实践和应用的重要性，但是我们如何去写一个自己的模块和插件呢？这边文章教大家去写一个简单的demo,由简单入深，才能更好的去了解和研究AST一步一步的揭开面纱。背景随着互联网技术的不断进步，技术的不断更新和发展，我们之前老的项目往往无法去跟...
2020-02-06 17:55:28
2323
1
原创 webSocket封装，心跳检测+断线重连基于ES6 class
ES6 class 封装websocket 使用介绍在《菜鸟教程中》这样介绍WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的...
2020-01-16 12:13:39
7832
12
原创 基于vue-cli4.*开发的UI库（极光UI）《一》
前言aurora-ui 是一款基于 VUE-CLI4.* 的前端 UI组件库，是个人在工作中为了更好的学习和使用vue相关技术栈而实现的。本项目的源码和文档主要参考借鉴了 element-ui和 iView。分离了常用业务组件并封装，部分组件参考这两个开源库进行了简化实现。所有样式为方便开发已使用stylus进行了重写，现已实现扩展了约 47 个组件可供日常开发。添加了开源协议，编写本UI库的目...
2019-12-16 18:48:15
5098
10
原创 linux笔记
一、软件安装方法1）APT方式a.普通安装：apt-get install softname1 softname2 …;b.修复安装：apt-get -f install softname1 softname2… ????-f Atemp to correct broken dependencies)c.重新安装：apt-get --reinstall install softname1 softname2…;2）dpkg方式普通安装：dpkg -i package_name.deb3）源码安
2023-02-10 15:25:56
268
原创 Error: error:0308010C:digital envelope routines::unsupported
由于台式换成笔记本，之前的项目 基于版本运行，笔记本安装，vue相关项目报错。
2023-01-07 18:19:10
706
原创 温故而知新篇十一
HTTP缓存前言HTTP缓存强制缓存协商缓存对比优缺点前言当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取。常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力。http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到reques
2022-03-22 23:45:00
230
原创 2022年来啦，你有属于自己的库吗？来这里，让你新的一年一起虎虎生威，事半功倍。
@TOC)前言为了进一步的进行前端工程化的打下基础，也为了公司产品线的增多，开发维护的项目也越来越多等提到前端的开发效率，从而解放大量的劳动力。从零搭建一个工具库来给各个项目使用，也有人说啦，现在工具库市面上那么多，没有必要去单独去搞一个，这不是给自己增加额外的劳动力吗？一点都不划算，比如像市面上的lodash工具库等等，市面的拿过来用是很方便，单不利于我们去维护，也不利于自己的开发，包的体积也大，影响打包后整个项目的大小；不一定适用你的项目和公司，所以公司搭建一个工具库也是很有必要的。下面我这边一步
2022-01-24 00:00:00
266
原创 你所不知道的文件上传更安全的类型判断
你所不知道的文件上传更安全的类型判断前言在项目的实现过程中，大多数的前端在文件上传的的业务需求的实现过程中，就是简单的文件上传，也就是在表面上判断文件的后缀名来实现，例如：图片的校验，只需要判断后缀名为.jpeg、.jpg、.png等等，或者通过原生的html标签限制，如<input type="file" accept="image/*" />或者第三方的UI组件也是这个原理；其实我们都知道，这样的逻辑判断是没有什么问题，也没有任何逻辑问题，这只是在常规的情况下，如果一个黑客，当然不会用
2022-01-18 19:45:00
817
原创 温故而知新篇十
JavaScript的原型和原型链什么是原型原型对象、实例、构造函数的关系proto和prototype构造函数Object和Function原型链原型链的终点什么是原型原型是一种对象属性,允许对象在彼此之间继承通用功能。 所有JavaScript对象都可以从Object.prototype继承属性和方法。 甚至原型本身也具有继承更多属性的能力,即另一个原型,也称为prototype chaining可以让所有的对象实例共享它所包含的属性和方法。原型对象、实例、构造函数的关系每个构造函数
2022-01-17 06:30:00
179
原创 页面加载的那点事
页面加载的那点事一、加载原理二、模态与非模态三、加载规则四、加载策略一、加载原理加载出现的原因动态与静态资源加载处理当清楚加载形成的原因，接下来要做的就是在需要加载的地方对其进行处理。二、模态与非模态模态加载模态加载会中断用户其余操作，用户在这个期间只能等待加载而不能进行其他操作（可提供取消按钮）。非模态加载非模态加载通常只会出现在需要加载的部分，不会中断用户其他操作。三、加载规则页面拆解由于浏览器渲染顺序一般会根据代码的顺序进行渲染
2022-01-10 04:15:00
350
原创 温故而知新篇八
高级APIMutationObserverAPIdemoIntersectionObserverAPIIntersectionObserver场景demo 图片懒加载getComputedStyleAPIgetBoundingClientRectrequestAnimationFrameMutationObserverMutationObserver 是一个可以监听 DOM 结构变化的接口。当 DOM 对象树发生任何变动时MutationObserver 会得到通知。异步触发APIMutati
2021-12-14 10:20:21
1282
原创 温故而知新篇七
认识TypeScript什么是TypeScript？为什么选TypeScript？安装TypeScript Hello TypeScriptHello TypeScript什么是TypeScript？首先，我对TypeScript 的理解如下：TypeScript 是JavaScript 的一个超集，主要提供了类型系 统和对ES6 的支持，它由Microsoft 开发，代码开源于GitHub 上其次引用官网的定义：TypeScript is a typed superset of JavaSc
2021-12-01 23:45:00
42
原创 温故而知新篇六
Express框架实战Express简介如何搭建一个服务中间件介绍路由&过滤器模板引擎实际业务场景Express简介Node（正式名称 Node.js）是一个开源的、跨平台的运行时环境，有了它，开发人员可以使用 JavaScript 创建各种服务器端工具和应用程序。此运行时主要用于浏览器上下文之外（即可以直接运行于计算机或服务器操作系统上）。据此，该环境省略了一些浏览器专用的 JavaScript API，同时添加了对更传统的 OS API（比如 HTTP 库和文件系统库）的支持。nod
2021-11-26 21:48:10
953
原创 node-sass 安装失败，解决大全
node-sass是什么？node-sass是一个项目依赖，在一个项目中在使用sass语法的时候，必须通过sass-loader来解析sass，从而使sass语法变成浏览器能够识别的CSS语法，而node-sass模块就是对sass-loader的支持模块，所以不安装node-sass，sass-loader就不能正常工作node-sass 安装失败的原因npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长
2021-11-14 17:30:00
733
原创 温故而知新篇五
你可能不知道的CSS写在前面的话只是团队的一种分享模式，不在于技术的高低，只在于这次分享的意义，也是大家坐在一起创聊的一种方式，在于活跃气氛，不外乎工作之余的一种娱乐方式tips文本缩进，块级用text-indent，内联用margin-left文本缩进，块级用text-indent，内联用margin-leftCSS 计数器CSS 计数器通过一个变量来设置，根据规则递增变量。使用计数器自动编号：counter-reset： 创建或者重置计数器counter-increme
2021-11-07 22:00:00
80
原创 温故而知新篇四
设计原理之 心智模型三大模型万事万物的认知常识，通过经验或是习惯已经告知了用户认为产品是怎样工作的形成路径运作原理特征运用总结三大模型心智模型万事万物的认知常识，通过经验或是习惯已经告知了用户认为产品是怎样工作的形成路径心智模型的形成运作原理特征运用总结设计的目的是最大程度地满足用户需求，在以“用户为中心的设计”理念下，通过对用户心智模型的研究来理解产品的用户，设计出更加适宜用户使用的产品。最终将用户心智模型应用于产品设计中的理论与方法，旨在有效提升企业产品开发与创新
2021-11-02 22:00:00
39
原创 温故而知新篇二
团队分享之VUE模板编译原理VUE模板构建版本Vue提供了几个构建版本vue.js :完整版本，包含了模板编译的能力vue.runtime.js: 运行时版本，不提供模板编译能力，需要通过vue-loader 进行提前编译。简单来说，就是如果你用了 vue-loader ，就可以使用 vue.runtime.min.js，将模板编译的过程交过 vue-loader，如果你是在浏览器中直接通过 script 标签引入 Vue，需要使用 vue.min.js，运行的时候编译模板。编
2021-10-25 22:00:00
64
mvvm双向绑定原理和实现
2020-03-20
websocket封装使用心跳检测+断线重连
2020-01-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人