- 博客(139)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端项目搭建规范
前端项目搭建规范一. 代码规范1.1. 集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line =
2022-01-17 10:41:57
418
1
原创 JavaScript深入之继承的多种方式和优缺点
JavaScript深入之继承的多种方式和优缺点对象得原型JS当中每个对象都有一个特殊的内置属性[[prototype]],这个特殊的对象可以指向另外一个对象当我们通过引用对象的属性 key 来获取一个 value 时，它会触发 [[Get]]的操作这个操作会首先检查该属性是否有对应的属性，如果有的话就使用它如果对象中没有改属性，那么会访问对象的 [[prototype]] 内置属性指向的对象上的属性那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗？如果有，应该如何获取
2022-01-13 10:36:52
392
原创 微信小程序 node脚本 自动化 代码上传、预览
微信小程序 node脚本 自动化 代码上传、预览miniprogram-ciminiprogram-ci 从 1.0.28 开始支持第三方平台开发的上传和预览，调用方式与普通开发模式无异。查看详情密钥及 IP 白名单配置使用 miniprogram-ci 前应访问"微信公众平台-开发-开发设置"后下载代码上传密钥，并配置 IP白名单 开发者可选择打开 IP白名单，打开后只有白名单中的 IP 才能调用相关接口。我们建议所有开发者默认开启这个选项，降低风险 代码上传密钥拥有预览、上传代码的权限，密钥
2022-01-06 09:31:17
2309
原创 浏览器缓存机制
浏览器缓存机制缓存位置从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络Service WorkerMemory Cache内存缓存Disk Cache硬盘缓存Push Cache网络请求Memory Cache内存中的缓存，但是内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。Disk CacheDisk Cache 也就是存储在硬盘中的缓存，读取速度
2021-11-24 12:00:29
1475
原创 JS函数式编程
JS函数式编程实现 call第一版Function.prototype.mycall = function(){ // 1. 获取需要被执行的函数 foo.mycall 这里的 this 就是 foo 该函数 let fn = this console.log('Function=>',this) fn()}// 测试用例function foo(){ console.log('foo=>',this)}foo.mycall()
2021-10-28 17:21:49
614
原创 JS执行过程、词法作用域、执行上下文、深入变量对象、作用域链
JS执行过程、词法作用域、执行上下文、深入变量对象、作用域链JavaScript深入系列作用域作用域是指程序源代码中定义变量的区域作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限JS采用词法作用域(lexical scoping),也就是静态作用域静态作用域与动态作用域JS采用的是词法作用域，函数的作用域在定义函数定义的时候就决定了 --重点而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。var scope = "global scope";f
2021-10-23 17:26:23
200
原创 uniapp 运行多环境判断
uniapp 运行多环境判断配置baseURL不想看文档得就直接看最后示例开发环境和生产环境uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境cli模式下，是通行的编译环境处理方式。if(process.env.NODE_ENV === 'development'){ console.lo
2021-10-11 17:57:01
1556
原创 Vim tricks
左手：功能删除按键解释d（elete）删除，需指定范围c（hange）删除并进入insert模式，需指定范围s删除光标下的字符并进入insert模式（=dli=xi）S删除当前行的所有字符并进入insert模式（=0C=ddO=cc）C删除光标当前所在字符到行末并进入insert模式（=c$）D删除光标当前所在字符到行末（=d$）x删除光标下的字符（=dl）X删除光标左边的字符（=dh）复制按键解释
2021-04-27 11:21:51
98
原创 玩转Vim 从放弃到爱不释手（慕课网学习笔记）
Learn Vimvim 帮助移动命令:h motion.txt退出Vim:quit :q如果:以普通模式键入，则光标将移至屏幕底部，您可以在其中键入一些命令。如果处于插入模式，键入:将在屏幕上逐字产生字符“：”。在这种情况下，您需要切换回普通模式。命令式模式 ==><Esc> 返回正常模式保存文件保存更改：:write保存新文件:w new_file.txt保存并退出:wq退出但不保存任何更改:q!插入i inser
2021-04-07 23:52:18
386
原创 前端代码规范插件 vscode eslint stylelint
前端代码规范编辑器格式统一然后项目根目录添加文件 .editorconfig，编写以下配置：# http://editorconfig.orgroot = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true[*.md]insert_final_newline = f
2021-02-25 14:13:27
913
原创 精选 GitHub 值得收藏的100个前端项目
整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习。codepen 一个在线编辑前端项目的网站，其中有一些前端大神的作品，也有很多令人惊艳的前端效果，可以浏览和下载使用codrops 一系列具有相当具有创意且有趣的前端效果的集合，是非常棒的学习资料，可以欣赏和下载使用。并且有些项目，也托管到了github仓库中docschina 印记中文网收集了由社区翻译的比较流行的前端相关框架、工具的中文版文档。为学习一些新的框架扫平了语言障碍toby 超级赞的收集与协作管理书签的
2021-02-02 15:07:17
512
原创 JavaScript版数据结构与算法-链表
JavaScript版数据结构与算法-链表链表多个元素组成的列表元素存储不连续,用next指针连在一起链表 VS 数组**数组:**增删非首尾元素时往往需要移动元素**链表:**增删非首尾元素,不需要移动元素,只需要更改next的指向即可js的链表js中是没有链表可以用Object模拟链表const a = { val : 'a'}const b = { val : 'b'}const c = { val : 'c'}const d = { val : 'd'}a.
2021-01-09 15:25:17
272
原创 数据结构与算法之美-数组 vs 链表
数据结构与算法之美-数组 vs 链表数组（Array）是一种线性表数据结构。它用一组连续的内存空间，来存储一组具有相同类型的数据。线性表线性表就是数据排成像一条线一样的结构。每个线性表上的数据最多只有前和后俩个方向，其实除了数组、链表、队列、栈等也是线性表结构非线性表比如二叉树、堆、图等。之所以叫非线性，是因为，在非线性表中，数据之间并不是简单的前后关系。连续的内存控件和相同类型的数据随机访问数组和链表区别链表适合插入、删除，时间复杂度O(1)；数组适合查找，查
2021-01-08 17:09:57
138
原创 复杂度分析
复杂度分析复杂度分析：分析、统计算法得执行效率和资源消耗【注】：大 O 这种复杂度表示方法只是表示一种变化趋势时间复杂度分析【注】：它表示的是一个算法执行效率与数据规模增长的变化趋势，所以不管常量的执行时间多大，我们都可以忽略掉。因为它本身对增长趋势并没有影响。时间复杂度的全称是渐进时间复杂度，表示算法的执行时间与数据规模之间的增长关系。只关注循环执行次数最多的一段代码加法法则：总复杂度等于量级最大的那段代码的复杂度乘法法则：嵌套代码的复杂度等于嵌套内外代码复杂度的乘积几种常见时
2021-01-07 17:27:53
109
原创 Clean Code JavaScript 代码规范以及建议
Clean Code JavaScript 代码规范以及建议Clean Code JavaScript 英文原版代码整洁之道中文版代码整洁之道中文版默认实参通常比短路更简洁。请注意，如果您使用它们，您的函数将只为未定义的参数提供默认值。其他“假”值，如''、""、false、null、0和NaN，将不会被默认值替换。Bad:function createMicrobrewery(name) { const breweryName = name || "Hipster Brew Co.";
2020-12-16 13:58:22
420
原创 element scss mixin BEM 实现
element scss 学习element scss 文件源码目录 element/tree/dev/packages/theme-chalk在theme-chalk/src/mixins/config.scss中，有对 element-ui的基础命名$namespace: 'el'; //前缀名$element-separator: '__'; //子元素连接符$modifier-separator: '--'; //块样式状态连接符$state-prefix: 'is-';
2020-12-09 09:19:22
958
原创 Element-UI radio、radio-group、radio-button 单选框源码
Element-UI radio 单选框源码radio模板部分：<template> <label //label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 class="el-radio" :class="[ border && radioSize ? 'el-radio--' +
2020-11-06 23:54:58
1293
原创 Element-UI Container 布局容器源码
Element-UI Container 布局容器源码用于布局的容器组件，方便快速搭建页面的基本结构：<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。以上组件采用了
2020-11-04 00:27:58
1010
1
原创 ElementUI源码学习 - Layout布局(row 、col)
ElementUI源码学习 - Layout布局(row 、col)row.js该组件不同于 button组件，是一个js文件，使用的是render方法export default { name: 'ElRow', //组件名字，作用在 button 组件中，已经说明了 componentName: 'ElRow', //这个在 col 组件中判断 是否为 col 的父组件，从而给 gutter 间隔 props: { tag: { //自定义元素标签, tag 在 render
2020-10-30 23:42:46
1799
原创 ElementUI源码学习 - Button
ElementUI源码学习 - Button.vue文件学习button.vue<template> <button class="el-button" @click="handleClick" //向父级传递事件 :disabled="buttonDisabled || loading" //当disabled 和 loading 状态下，都无法点击 :autofocus="autofocus" // 自动focus :type="n
2020-10-29 22:22:23
623
原创 git stash 引发得事故
同事说把我代码冲突了，叫我拉取代码看下，还叫我把项目复制一下，我想着 复制项目？？什么年代了，还靠这招，上来就是 git stash，嗯，真香，一下子就将工作区和暂存区恢复到之前得样子，心想，不愧是我。然后，嘿嘿，不知道是 vscode 卡了 还是啥代码没拉取下来，我问同事，你确定你推送代码，给的回复是推了，肯定推了，然后我git stash pop 一次，在拉去一下代码，还是不行，脑袋一抽，又git stash pop ，然后就发现我找不到我之前得代码了，然后我又没在自己分支上面推送过自己得代码，没有版
2020-10-26 23:58:53
829
原创 `MD`语法技巧Typora
MD语法技巧生成菜单栏输入 [toc] + 回车键产生标题，自动更新标题标题 1~6开头#的个数表示，空格+文字。标题有1~6个级别，#表示开始，按换行键结束 # H1 ## H2 ###### H6 对应的快捷键： ctrl + 1/2/3/4/5/6引注> + 空格 + 文字 + 回车双回车或删除键跳出无序序列 * + - 后面添加文字，创建无序序列 换行键换行 双回车或删除键有序序列1. + 空格 + 文字，创建有序序列
2020-07-09 17:26:39
1179
原创 Node.js基础
Node.js基础服务端层我们更多把 Node 定位为 BFF 层实现，BFF 是 Backend For Frontend 的缩写，翻译成用户体验适配层。https://mp.weixin.qq.com/s/IYddaaw2ps1wR2VT1dZWPg 玉伯什么是Node.js官网描述：Node.js是一个基于Chrome V8引擎的javaScript运行环境Node.js使用了一个事件驱动、非阻塞I/O的模型，使其轻量又高效在Node.js 里运行javaScript跟在Chr
2020-06-17 23:59:10
647
原创 uni-app uniUI 官方组件源码分析（其实就是vue文件）
uni-app uniUI 组件数字角标<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size" :style="badgeStyle" class="uni-badge" @click="onClick()">{{
2020-06-16 00:01:10
1556
原创 HbuilderX 配置 夜神模拟器连接，模拟app
HbuilderX 配置 夜神模拟器连接，模拟appHbuilderX安装地址https://www.dcloud.io/夜神模拟器下载地址https://www.yeshen.com/建议都自定义安装到 D 盘HbuilderX找到自己安装的路径D:\HBuilderX\plugins\launcher\tools\adbs这里的 adb 有俩个版本，可能与下载夜神的版本不对，到时候自行更改，我这里是1.0.36版本找到HBuilderX的adbs.ex
2020-05-20 10:23:31
1761
1
原创 webpack常见面试题
webpack常见面试题前端代码为何要进行构建和打包体积更小(Tree-Shaking、压缩、合并)，加载更快编译高级语言或语法（TS,ES6+、模块化、scss）兼容性和错误检查（Polyfill postcss eslint）统一、高效得开发环境统一得构建流程和产出标准继承公司构建规范（提测、上线等）module chunk bundle分别什么意思，有何区别...
2020-05-05 15:59:53
1068
原创 Vue面试题总结
Vue面试题v-show 和v-if之间的区别v-show通过css display控制显示与隐藏v-if组件真正的渲染和销毁，而不是显示和隐藏频繁切换显示状态用v-show,否则用v-if为何 v-for中要用 key必须用key,而且不能是index和randomdiff算法中通过tag和key来判断，是否为sameNode减少渲染次数，提升渲染性能描述 V...
2020-05-04 18:01:43
140
原创 Vue 组件化 响应式 vdom 和 diff 模板编译 渲染过程 原理
Vue原理Vue响应式组件data的数据一旦变化，立刻触发视图的更新实现数据驱动视图的第一步核心 API-Object.defineProperty(Vue3.0启用Proxy,但是Proxy兼容性不好，且无法polyfill)Object.defineProperty(obj, prop, descriptor)obj:要定义属性的对象。prop:要定义...
2020-05-04 15:23:03
299
原创 `Vue `详细面试题
Vue详细面试题computed 和 watchcomputed 有缓存，data不变则不回重新计算set 不用加 returnwatch如何深度监听deep:truewatch监听引用类型，拿不到oldValv-for循环key视情况是否采用index,尽量避免对象Obj：(val,key,index)v-for与v-if尽量避免一起用（现在会报错）...
2020-05-03 13:33:55
124
原创 对象 字符串 实用30-seconds-of-code
对象 字符串 实用30-seconds-of-code原文：https://github.com/Chalarangelo/30-seconds-of-code作者：Chalarangelo翻译：http://caibaojian.com/30-seconds-of-code.html译者：蔡宝坚收集有用的 Javascript 片段, 你可以在30秒或更少的时间里理解。clea...
2020-04-28 23:27:33
227
原创 函数 功能 30-seconds-of-code
函数 功能原文：https://github.com/Chalarangelo/30-seconds-of-code作者：Chalarangelo翻译：http://caibaojian.com/30-seconds-of-code.html译者：蔡宝坚收集有用的 Javascript 片段, 你可以在30秒或更少的时间里理解。chainAsync:链异步函数循环遍历包含异步事件...
2020-04-27 23:24:29
1298
原创 浏览器 日期 30-seconds-of-code
浏览器 日期 30-seconds-of-code原文：https://github.com/Chalarangelo/30-seconds-of-code作者：Chalarangelo翻译：http://caibaojian.com/30-seconds-of-code.html译者：蔡宝坚收集有用的 Javascript 片段, 你可以在30秒或更少的时间里理解。bottomV...
2020-04-26 23:37:35
153
原创 30-seconds-of-code JavaScript 数组篇 持续更新
30-seconds-of-codearrMax:返回数组中得最大值将Math.max()与扩展运算符 (...) 结合使用以获取数组中的最大值。const arrMax = (arr)=>Math.max(...arr)arrMin:返回数组中的最小值将Math.min()与扩展运算符 (...) 结合使用以获取数组中的最小值。const arrMin = arr =>...
2020-04-22 23:49:38
212
原创 Vue风格指南(来自官方风格指南与vue-admin-element风格指南)
Vue风格指南组件名为多个单词组件名应该始终是多个单词的，根组件 App 以及 ``transition、component` 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。所有得Component文件都是以大写开头(PascalCase)但除了 index.vue例子：@/src/compon...
2020-04-21 12:50:42
341
原创 vue-element-admin 登录 / 注销 / 权限验证 篇
vue-element-admin登录 / 注销 / 权限验证 篇裤衩大佬：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。链接：https://juejin.im/post/591aa14f570c35006961acac下述所有的数据和操作都是通过vuex全局管理控制的。补充说明：刷新页面后 vuex的内容也会丢失，所以需要重复上述的那些操作登录：当用户填写完账...
2020-04-21 09:24:08
6046
10
原创 webpack构建速度和体积优化策略
webpack构建速度和体积优化策略初级分析：使用webpack内置的statsstats:构建的统计信息package.json中使用stats"scripts":{ "build:stats":"webpack --env production --json > stats.json"}速度分析：使用speed-measure-webpack-plugin代码示例co...
2020-04-12 18:59:51
536
原创 Git commit提交规范与`Changelog`生成
Git commit规范与Changelog生成良好的Git commit 规范优势加快Code Review的流程根据Git Commit的元数据生成Changelog后续维护者可以知道Feature被修改的原因技术方案：统一团队Git commit日志标准，便于后续代码review和版本发布使用Git commit日志作为基本规范提交类型限制为:feat,fix,docs...
2020-04-11 20:36:30
1835
原创 Webpack 进阶用法
Webpack 进阶用法当前构建时的问题每次构建的时候不会清理目录，造成构建的输出目录output文件越来越多通过npm script清理构建目录(并不优雅的处理方式)rm -rf ./dist && webpackrimraf ./dist && webpack自动清理构建目录避免构建前每次都需要手动删除dist使用clean-we...
2020-04-09 23:28:58
404
转载 `es6 JavaScript`编程风格
es6 JavaScript编程风格阮一峰大神ES6编程风格块级作用域（1）let 取代 varES6 提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。'use strict';if (true) { let x = 'hello';}for (let i = 0; i < 10; i++) {...
2020-03-31 17:44:27
143
原创 uni-app It's not allowed to load an initial chunk on demand. The chunk name "components/xxx/xxx"
uni-app It’s not allowed to load an initial chunk on demand. The chunk name “components/xxx/xxx”微信小程序运行的时候总是提示这个问题，不只是这一个组件，其他组件也有相同的问题。原因：当创建文件夹的时候 pages.json里面注册了这个组件的然而我们是不需要当一个页面的解决办法：将其删除即可...
2020-03-31 14:37:09
9684
2
tech-interview-handbook-master.zip
2020-04-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人