- 博客(54)
- 收藏
- 关注
RSS订阅原创 多人协作项目代码规范统一约定（完整全面）
强制代码校验:eslint强制代码formate:prettier统一提交信息格式:commitizengit钩子监听：husky代码自动修复工具：lint-staged
2023-12-18 10:40:21
1309
原创 团队管理之高效开发基础认知
程序员的工作特点不断挑战各种难题，每天都在bug和需求之间挣扎与成长。必须不能停止学习，躺平即淘汰。对我的代码，产品负责。工作意识觉醒的第一步，就是我的代码，产品就像我的孩子，希望他茁壮成长，不被诟病。永远没有通用的管理方法，所有所谓的理论都是不断借鉴，摸索，实践，总结而来，包括我今天所分享的内容，或许只适合我。但希望对诸位有点滴参考价值作为管理者，我不轻言放弃任何一个项目，任何一个bug，任何一个人。为的是打造更好的项目，培养更好的人才，更重要的，是建立我们之间的信任。...
2022-08-16 18:40:09
577
原创 订阅发布和观察者模式
发布订阅模式把多个方法暂存起来，最后一次触发执行作用: 解偶使用场景: 如，多个类或者函数内，可以分散订阅某个操作，最后统一发布。分散的好处就是不做代码侵入，各自为政，实现代码低耦合。几乎所有的库，都会有基于该设计模式的功能案例事件调度中心// 事件中心,做事件调度 const fs = require("fs"); let events = { _events: [], on(fn) { this._events.push(fn); }, e
2021-09-15 20:31:53
142
原创 js函数柯里化
函数柯里化: 把多个参数的传入转成n个函数，可以暂存变量柯里化，要求参数一个个传,通常参数长度确定（定参）如果多个参数严格意义讲，就不算柯里化，成为偏函数不定参可以吗？可以…成本太高，得不偿失典型柯里化函数的体现function fn(a) { return function a(b) { return function b(c) { return function c() { // ... }; }; };}let.
2021-09-15 18:21:24
170
原创 js高阶函数
高阶函数？两种应用方式可称之为高阶函数函数内部返回一个函数，外层函数可以叫做高阶函数function A() { return function () {}; }函数的参数是一个函数，也是高阶函数 function A(B) { B(); }举一个应用场景 (AOP)AOP:即面向切面编程，可以理解为不动原有业务逻辑，额外增量扩展功能// DEMOfunction core(...args) { // 这是原有业务，我们希望不动这个原有业务，.
2021-09-15 18:10:41
271
原创 一图说明带团队（实践中）
怎么带团队？先推荐一本书吧《管人先管己，带人先带心》下面这张图是我实践得出的经验，纯粹的实践凝练的干货，或有不合理地方我也在持续优化我自己的管理策略，欢迎斧正，指点，唯有出错，识错，方能成长。带团队呢，其实说难很难，说简单也简单，说难呢那就说不清道不明了。那就简而言之吧，不变的原则“挣钱”，公司的存在其实99.99%都是为了搞钱，为了公司能挣钱，那么就要有好的创意和产品（此处只谈产品），好的产品想占有市场，那就要产出的质量更高，版本迭代更快。这背后就需要有一个高素质，产能卓著的团队做支撑。有一
2021-09-14 18:48:55
145
原创 eventbus-免手动解绑方案
为什么会写这个包？跨层级组件传值，平级组件传值方案众多，五花八门，维护起来很费劲（如eventbus，inject-provider等等）vuex？redux？注意了，这两个技术产生的应用场景是全局数据管理，而不是用来处理大量业务数据监听，如果坚持用，那么最后随着项目庞大，store也会庞大，维护成本不言而喻。嗯～modules可以分模块维护，但是，依旧不建议，做技术的严谨性还是要有的eventbus不是可以解决以上问题嘛？没错的，但是会有一个问题，很多同学协作开发过程代码不规范，那就是只监听，不解
2021-09-06 17:57:36
329
原创 判断windows系统类型和IE浏览器版本
判断系统类型，IE版本 function detectOS() { var sUserAgent = navigator.userAgent var isWin = navigator.platform == 'Win32' || navigator.platform == 'Windows' var isMac = navigator.platform == 'Mac68K' || naviga
2021-07-16 19:09:43
402
原创 网站导航部分-鼠标跟随滑动效果
htm部分<div class="header"> <div class="logo" id="toIndex"> <img src="../imgs/pc/common/header/logo.png" alt="" /> </div> <ul class="menu" id="menu"> <li id="menu_know" class="menu-item">了解OKR</li> .
2021-07-06 15:57:40
316
原创 0-1实现CI/CD [ 第一章 ]
什么是CICI 的意思是 持续构建 。负责拉取代码库中的代码后，执行用户预置定义好的操作脚本，通过一系列编译操作构建出一个 制品 ，并将制品推送至到制品库里面。常用工具有 Gitlab CI，Github CI，Jenkins 等。这个环节不参与部署，只负责构建代码，然后保存构建物。构建物被称为 制品，保存制品的地方被称为 制品库什么是CDCD 则有2层含持续部署（Continuous Deployment）持续交付（Continuous Delivery） 。持续交付 的概
2021-06-27 21:49:44
349
2
原创 富文本编辑器-tinymce的各种应用
为什么用这个编辑器？pc和H5皆可，纯粹的html？vue？angular？react？皆可简单，直接，输出dom功能强大，你想要的几乎都有了安装这里建议下载源码到本地使用下载地址然后引入js你的路径+/tinymce/js/tinymce/tinymce.min.js初始化tinymce.init({各种配置})配置项随心所欲吧自定义配置选择H5H5的基本配置框架中使用？vue，react，anular以及其他框架怎么用？Java，python等等也行哟汉化包也给你
2021-05-26 15:54:15
1617
原创 vue.config.js常用基础配置留档
1.分享一个vue.config.js的基本配置，至少能让你的代码体积缩小2/3，嗯，就这样，复制急用const CompressionPlugin = require('compression-webpack-plugin') // 代码压缩const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去掉打印，注释等多余代码const { HashedModuleIdsPlugin } = require('webpack') // 只打
2021-03-26 16:12:59
207
原创 vue组件库和组件文档生成
公司现役组件库项目，公共资源或者新老项目切换仓库调整 src 目录结构|--src|-- App.vue|-- main.js|-- packages // 新建此文件夹用来存放组件 |-- index.js // 组件入口 |-- button.vue // 新增一个button组件，记得带上name |-- icon // 新增一个icon组件，记得带上namepackages/index.js// 所有组件的入口import
2021-03-09 20:52:18
3243
1
原创 部署npm私服-verdaccio 基于nginx
服务器：linux系统环境：centos 7软件环境：node安装nodejssudo yum install epel-releasesudo yum install nodejsnode --versionnode版本问题版本管理工具:nnpm install -g n安装指定版本：n 版本关于node版本n 会列出所有安装的版本供你切换n latest 安装最新版本n stable 安装最新稳定版n lts 安装最新长期支持版本n rm [版本号] 删除某一版本
2021-03-05 13:44:15
1250
原创 30分钟包你入门D3
D32d 数据展示渲染库，本质通过 js 操作 svg,css,在数据可视化自定义图表领域大放异彩特征可链式调用语法神似 jquery学习方式也类似 jquery使用方式vue 或者 react 等框架引用cnpm i d3 --serve-dev按需加载import {} from 'd3'接下来就想用 jquery 一样用 api不过是操作 dom以 vue 为例;<div ref="base">index</div>im
2021-02-19 20:25:12
280
原创 js常用函数封装和vue开发小技巧（持续添加）
移动端适配方案viewport插件选择 postcss-px-to-viewport配置 //安装插件 npm i postcss-px-to-viewport -D //根目录新建 .postcssrc.js // 文件内容 const path = require('path')module.exports = ({ file }) => { // 记住这里：设计搞多大就给多大，然后剩下的就按照设计稿实际宽高，写就好了 let designWidth =
2021-01-12 14:26:16
460
原创 vue怎么支持seo？
前言：首先明确一个知识点，为什么vue对seo支持不友好？其次仅仅vue对seo 的支持不好吗？react呢？angular呢？答：凡是spa项目对seo都非常不友好，为什么？这个跟网络爬虫有关跟spa的特性有关。第一，网络爬虫喜欢收录原创内容，于是乎我们很常用的手段就是发文章，原创或者伪原创去勾搭爬虫引起爬虫的重视，以此增长网站的权重对吧？但是spa呢偏偏收录不了，为什么？因为spa是单文件内容，意思是项目打包后，只有一个index.html对吧，此时你写一个文章页面如：article/1.html 这个
2021-01-11 18:29:26
835
1
原创 前端性能优化记录
渲染优化渲染优化是前端优化中一个很重要的部分，一个好的首屏时间能给用户带来很好的体验，这里要说的一点是关于首屏时间的定义，不同的团队对首屏时间定义不一样，有的团队认为首屏时间就是白屏时间，是从页面加载到第一个画面出现的时间。但是当我们说到用户体验的时候，仅仅是这样还达不到效果，所以有的前端团队认为，首屏时间应该是从页面加载到用户可以进行正常的页面操作时间，那么我们就依照后者来进行说明js css 加载顺序说渲染优化之前，我们还需要说一个小插曲，就是比较经典的一道问题浏览器地址栏输入url发生了什么
2020-11-27 15:25:33
387
1
原创 part04~开发通用前端UI框架（主题，国际化，高效打包，单测，组件文档)
定制主题所谓定制呢，就是将封装一些跟页面整体设计色值或者特殊设计相关的通用的颜色或者圆角等信息封装成变量然后存储成一个文件，这样我们就可以直接引用文件，使用变量，从而降低代码冗余度https://www.antdv.com/docs/vue/customize-theme-cn/这是Antd已经封装好的所有的变量，可以直接使用https://github.com/vueCo...
2020-04-08 01:13:18
430
原创 part03~开发通用前端UI框架（图表封装,高效mock，请求封装，表单校验，图标管理)
封装图表组件我们选择免费的，功能比较多的 Echart,当然了你也可以选择 AntV,也有 highChart安装 echart: npm install echarts --save新建 chart 组件库：components->chart->Chart.vue但是此时有些问题，就是这个组件的数据渲染的一些功能，有很多异步的操作，所以你想针对这个 dom 去操作时...
2020-04-02 09:58:00
874
1
原创 part02~开发通用前端UI框架之权限设计（路由，组件，指令）
设计左侧菜单和路由的关系注意了:左侧菜单往往跟当前 登陆者的权限有关系，这一类数据可能是后端返回的，可能是多级的关系，那么就要用到递归的方式，所以我们用 Antd 中‘单文件递归菜单’layouts->SiderMenu.vue递归当前 Antd 版本-1.5.0-rc.5 版本你会发现你复制过来的代码有点乱，还报错，还可能看不大懂对吗?因为这个代码中包含了左侧菜单的样式，还有一...
2020-03-31 02:30:33
551
原创 part01~开发通用前端UI框架
通用企业级前端 UI 框架项目介绍此项目一套开箱即用的中后台前端框架，这个项目就从 0 到 1 实现该项目优点：功能齐全从零搭建前端架构，提高你的单兵作战的能力技术点应用全面，综合查缺补漏关于权限管理是个大亮点哟template 和 jsx 的区别templateHTML 扩展的语法数据使用 Mustache（双括号）优点：学习成本低，大量指令，组件作用域...
2020-03-25 10:02:52
2804
原创 call() bind() apply() 一看就懂
// 安啦，看似懵懂，其实简单的一比// 废话少说直接扯代码// 举个栗子var name = '哪吒', age = 13;var obj = { name: '松岛老师', objAge: this.age, fun: function () { console.log('name:', this.name + ',Age:' + this.age); }}...
2019-09-04 18:13:44
242
原创 vue中使用eslint的格式化工具
ESlint：是用来统一JavaScript代码风格的工具，不包含css、html等。目前网络上绝大部分的格式化eslint标准的代码方法都比较坑。目前没有一个可以格式化html、css、符合ESlint的js、vue的插件经过反复尝试拼凑出来在vue项目中使用eslint时快速解决代码格式问题的方法解决方案：第一步：安装插件1）ESlint：javascript代码检测工具，可以配...
2019-08-17 01:01:36
5521
2
原创 浏览器解析js的机制
浏览器解析JS机制浏览器解析JS机制一、浏览器的运行机制 浏览器是多进程的，其中包含了： 1）GPU进程 2）第三方插件进程 3）浏览器渲染进程 4）Browser进程 这里面的进程很好理解，浏览器本身，第三方插件扩容，浏览器渲染，GPU。其中，浏览器渲染JS就是通过浏览器渲染进程进行的。 浏览器渲染引擎是多线程的，其中包括以下线程： 1）GUI渲染线程 --...
2019-07-31 13:35:20
584
转载 CentOS7.0部署gitLab服务
读此文章：你需要具备最基本的linux认识，否则可能懵逼这里使用的是centos 7 64bit,我试过centos 6也是可以的!安装依赖软件yum -y install policycoreutils openssh-server openssh-clients postfix2.设置postfix开机自启，并启动，postfix支持gitlab发信功能systemctl enab...
2019-03-28 12:08:53
218
原创 koa
简介：express原班人马打造的，更小，更有表现力，更健壮的web开发框架，对异步处理更简洁，通过组合generator的使用，避免繁琐的函数嵌套，koa不在内核打包任何中间件，仅仅是一套优雅的函数库，可以基于这套函数库做外层封装，发展个性化的开发框架如node企业级开发框架egg.js就是基于koa做的二次封装演化而成。...
2019-03-28 12:01:18
159
原创 node(02)-核心moudle
node并不是js全集，比如bom，dom…就不是node具备的，而node其实是：ecmascript+moudle的合集观察上图，会发现其实node所谓的异步，其实事件环也是通过WorkerThreads多线程来实现node.js中的队列nodejs队列与浏览器不同的是浏览器的队列有两种宏任务和微任务，而nodejs，有计时器队列，网络处理队列，node核心工作模块队列，IO队列，...
2019-03-22 15:29:45
209
原创 node(01)-基础概念
基础概念:Node能够解决什么问题?Node的首要目标是提供一种简单的，用于创建高性能服务器的开发工具Web服务器的瓶颈在于并发的用户量，对比Java和Php的实现方式Node是什么?Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,让JavaScript的执行效率与低端的C语言的相近的执行效率。。Node.js 使用了一个事件驱动、非阻塞式 ...
2019-03-21 01:49:31
936
原创 egg.js基础（1）
阿里开发的企业级开发的基于mvc架构的node框架，底层基于koa，性能优异提供基于 Egg 定制上层框架的能力高度可扩展的插件机制内置多进程管理基于 Koa 开发，性能优异框架稳定，测试覆盖率高渐进式开发这里有个梗：对于前端来说MVC是个啥？拿图说话1.1 目录结构├── package.json├── app.js (app.js 和 agent.js 用于自定义启...
2019-03-20 17:17:23
269
原创 web性能优化系列(5)react-ssr
vue渲染面临的问题：1、脚本依赖，加载耗时蓝色(Loading)：网络通信和HTML解析黄色(Scripting)：JavaScript执行紫色(Rendering)：样式计算和布局，即重排绿色(Painting)：重绘灰色(other)：其它事件花费的时间白色(Idle)：空闲时间事件总结：Loading事件事件描述Parse HTML浏览器执行HTML解析Fini...
2019-03-12 01:29:14
502
原创 网络分层架构（七/四层协议）
网络分层架构业内普遍的分层方式有两种。OSI七层模型 和TCP/IP四层模型。OSI七层模型：物、数、网、传、会、表、应TCP/IP四层模型：链、网、传、应1) 物理层：主要定义物理设备标准，如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流（就是由1、0转化为电流强弱来进行传输，到达目的地后再转化为1、0，也就是我们常说的数模转换与模数转换）。这一层的...
2019-03-11 17:02:12
59504
7
原创 git常用命令集合(拿去即用)
其实呢，关于git使用，你可以用第三方的软件比如git extensions或tortoiseGIT和SourceTree等等，方便简洁，你只需要点点点就行了，我们为什么要学习用命令操作代码库？出于我个人角度来看：1、当前几乎所有的开发IED都可以集成git,你只要懂了git命令，随时调出git终端，灵活操作。不必再费神的进入代码目录->右击鼠标打开软件>点出命令。很明显，命令提高...
2019-03-04 10:53:27
274
原创 web页面性能优化系列（4）缓存优化
自动化缓存策略-处理大规模缓存的方案http-Header（协议头部）:基于http-Request（请求头部）和http-Response（响应头）来实现的缓存策略缓存策略（一）cache-control属性：max-age:指定缓存的有效时间s-maxage:只能指定Public类型的缓存，优先级高于max-ageprivate:私有缓存，如果个人计算机上的缓存public:...
2019-02-27 00:31:03
557
原创 typescript 快速上手
假如翻到了此文章，如果你写过类似java,c#等强类型面向对象语言，就可以阅读此文，迅速入手TS，否则就移步到此：https://ts.xcatliu.com/introduction/what-is-typescript.htmlts:优点：1，增加了代码的可读性和可维护性（编译阶段就发现大部分错误，优越于运行时发现错误）2，TypeScript 最大的优势便是增强了编辑器和 IDE 的功...
2019-02-20 10:01:31
501
原创 web页面性能优化系列（3）浏览器存储-包含PWA基础方案
客户端浏览器存储技术涉及到几个点分别是localstorage、cookie、sessionstorage、indexdb，service worker ，PWAcookie：1，存储数据4KB左右2，需要设置过期时间3，httponly应用场景1，用于与服务器发生交互场景cookie解决最重要的一个问题就是HTTP的无状态请求，即通过cookie让服务器识别访问者是谁以此...
2018-12-20 01:20:09
539
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人