- 博客(114)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 原生 js 如何获取定位
foreword（前言）本篇文章作为前面一篇文章（原生js如何获取宽高）的后续，主要分析原生 javascript 获取元素定位的 api 以及一些优化。JS 定位都有哪些获取方式呢clientLeft & clientTopoffsetLeft & offsetTopscrollLeft & scrollTop以下则会针对 clientTop、offsetTop、scrollTop 作为讲解。clientLeft & clientTopThe widt
2020-11-01 20:15:52
1137
原创 有趣的 Destructuring
foreword（前言）最近，我的学弟他在我们的一个群里问了一个问题：“数组解构和对象解构在性能上有什么区别呢，哪种方式会更好？”。当时，我的第一反应是，当时是数组了，而且为什么会有这样的问题呢，一个是针对数组的解构，一个是针对对象的解构，这两个有可比性吗，对比他们有意义吗？当然，只是我的第一反应，为了验证它们是否是有比较的意义，我大致花了一天多的时间简单研究了一下。test（自我测试，直接 coding 测试不就行了）于是我写了以下的一些代码用于测试：arr_normal.js: 使用 es5
2020-10-31 11:46:16
236
原创 原生js如何获取宽高
foreword（前言）最近项目中需要获取 dom 元素的尺寸，所以借此对比分析一下 js 所有获取尺寸的方法，以及相关的 dom 定位方式。JS 尺寸、定位都有哪些获取方式呢JS 尺寸获取方法：clientWidth & clientHeightoffsetWidth & offsetHeightscrollWidth & scrollHeightgetComputedStyle...
2020-10-25 21:08:21
1340
1
原创 Typescript笔记之基础知识（3）：TS数据类型
foreword（前言）就跟学习JS一样，学习TS首先需要掌握它具有哪些数据类型，本篇文章将记录TS基本的数据类型。在TS中，数据类型都有哪些？TS作为JS的超集，必然包含JS所有的数据类型，它们分别是：BooleanNumberStringArrayFunctionObjectSymbolundefinednull除此之外，TS还新增了以下的数据类型：voidanynever元组枚举其他高级类型玩法类型注解在对比分析每种数据类型之前，有必要先了解TS中的类
2020-05-10 16:30:05
1054
原创 精读express系列——实战篇(2)
foreword（前言）上一篇文章中，主要介绍了一个基本的项目环境搭建、express-generator的简单使用以及对其构建的项目结构的梳理。本篇文章是针对IM(InstantMessaging)聊天应用的项目预演篇，将会从以下几个角度进行展开：梳理应用所需的技术难点并找到合适的解决方案；技术选型梳理项目业务模块；梳理项目业务流程；基本的 UI 设计；技术难点与解决方案1...
2020-05-05 23:32:04
198
原创 精读express系列——实战篇(1)
foreword（前言）上一篇主要简单介绍了express的一些高阶玩法，本篇文章将主要围绕基于express的项目结构这个主题：梳理一个简单清晰的项目结构；express generator 以及它所构建的项目结构；express generator 构造器简单原理分析；手写一个简单的express项目1.首先，先把完整的目录结构构建好：├── config （基础配置目录）...
2020-04-27 01:06:47
279
原创 精读express系列——基础篇(2)
foreword（前言）上一篇文章中，我们已经大致介绍了express的基础语法，本篇文章将主要介绍express的一些进阶用法，大致为以下几点：express自定义模版引擎；简单介绍process manager;express如何预防安全漏洞；express的性能优化操作；express自定义模版引擎上一篇文章中我们简单演示了pug模版引擎的使用，我们发现pug其实是通过np...
2020-04-19 18:33:46
290
原创 精读express系列——基础篇(1)
foreword（前言）由于前三周搬家、身体、心理等方面的一些因素，导致文章更新中断了。目前已经明确了自己的一些规划，从本周开始，我将会以更加系统的视角深入各种知识，以更加稳定的节奏进行文章创作，希望能在这个过程中不断提高自己的技术水准、眼界视角、文章质量等。express作为nodejs中非常经典的框架之一，我认为从学习使用它开始，并深入阅读并理解它的源码，会是一个非常有意思的过程，而且我觉...
2020-04-12 18:17:18
511
原创 精读httpserver（一个简单的nodejs本地静态资源服务）源码
foreword（前言）最近在看极客时间的“nodejs开发实战”，里面简单介绍了一个npm包——httpserver（https://github.com/bahamas10/node-httpserver#readme），它可以为我们搭建一个本地静态资源服务器。通过js，它是怎么做的呢，本着好奇的心态，我点进github查看了它的源码，发现只有100多行代码而且，所以有了这篇文章。在这篇文...
2020-03-15 21:12:22
527
原创 从javascript的角度简单理解nodejs中commonjs模块规范的导入导出
foreword（前言）最近在看极客时间的“nodejs开发实战”，其中有个nodejs中commonjs模块规范的例子，例子中可以得出的结论是如果以module.exports作为导出，那么其优先级是最高的。我对此非常好奇，它的运行机制是怎样的？作者在最后给出了一个小引导，通过webpack将nodejs代码打包成js代码，并以js的角度来作为一个窗口。所以，本篇文章，我想要做的是将这打...
2020-03-08 21:56:46
1690
原创 Typescript笔记之基础知识（2）：环境搭建
foreword（前言）学习方式，最理想的状态或许是有足够的时间能让你渐进式从基础到深入地掌握某个知识或技能，这会让你掌握系统全面的结构体系，并且能发现很多细节问题。所以，从环境搭建开始，希望能记录下Typescript每一个层级、每一个阶段下的知识领域，进而系统全方位地掌握这个工具或者也可以说是一门“语言”。编写环境编辑器：Vscode代码环境：安装nodejs初步使用Typescr...
2020-03-01 19:51:59
329
原创 Typescript笔记之基础知识（1）：强类型语言和弱类型语言、静态语言和动态语言
foreword（前言）这是本人关于Typescript的第一篇笔记，之所以选择将“强类型语言和弱类型语言、静态语言和动态语言”作为第一个想要去总结的主题，是因为个人觉得它很重要。如今这个年代，可以供我们选择的编程语言非常之多，我们也不能在我们的编程生涯中仅仅只使用一门语言（除非你能够不断钻研一门语言并达到业界先驱者的层次），所以当我们在使用不同的编程语言时，如果我们连各种语言的性质、区别都不...
2020-02-17 19:16:05
3778
原创 SplitChunksPlugin（webpack内置插件——将共享代码块单独打包）
起初，基于webpack构建的图形关系体系，chunks（包括其内部引进的modules）通过父子关系进行链接。过去我们通过CommonsChunkPlugin来避免重复的依赖，但是却达不到更进一步的优化。webpack4.x中，CommonsChunkPlugin已经被optimization.splitChunks取代，以达到更好的优化体验。Defaults（默认）开箱即用SplitCh...
2020-02-02 21:55:59
1315
原创 webpack4之splitChunks.minChunks
概要这个配置表示split前单个非按需导入的module的并行数的最低下限。注：只对import或require直接引入的module有效。分析简单来讲，假如minChunks设置为n，那么某个module想要被拆分出去，那么它的共享次数（或者说并行请求次数必须 >= n）:1. minChunks设置为n2. 假设有m个入口点，这m个入口点都直接引入了某个模块module（通过...
2020-02-02 21:23:16
1288
原创 webpack4之splitChunks.cacheGroups
概要cacheGroups即缓存组，其中的每一项缓存组都可以继承/覆盖之前提到的splitChunks参数值（如name、maxSize、minSize、maxInitialRequests、maxAsyncRequests等），除此之外还额外提供了三个配置，分别为：test, priority 和 reuseExistingChunk。test: 表示要过滤 modules，默认为所有的 ...
2020-02-02 20:37:33
2725
原创 webpack4之splitChunks.minSize和splitChunks.maxSize
概要minSize和maxSize分别表示chunk在被拆分之前的最小体积和最大体积。（maxSize可以小于minSize）准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webp...
2020-02-01 11:50:59
3621
原创 webpack4之splitChunks.name
概要这个配置用于控制webpack打包时被拆分出来的bundle的名称。我们来看下官方文档上是怎样描述的：boolean = true 、function (module, chunks, cacheGroupKey) => string、stringAlso available for each cacheGroup:splitChunks.cacheGroups.{cache...
2020-01-27 22:25:16
1783
原创 webpack4之splitChunks.maxInitialRequests
概要同maxAsyncRequests配置类似，该配置表示入口点能被拆分的最大数量。准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webpack.config.js（webpack...
2020-01-26 21:17:07
780
原创 webpack4之splitChunks.maxAsyncRequests
这个配置用来控制按需引入的包中的直接引入的包的打包。准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webpack.config.js（webpack配置文件）webpack配置...
2020-01-26 15:14:41
711
3
原创 webpack4之简单分析splitChunk.chunks几种情况：initial、async、all，以及function (chunk)
webpack的这个属性被用来指定项目中哪些部分将会被优化。准备工作目录root——dist（打包之后的文件夹）——node_modules（下载的包）——src（项目脚本目录）————entry（入口点脚本）————modules（入口点中引入的模块）——package.json（包管理文件）——webpack.config.js（webpack配置文件）webpa...
2020-01-01 20:45:52
5550
原创 What are module, chunk and bundle in webpack?（在webpack中，module、chunk和bundle到底是什么样的存在？）
词汇表以下，罗列了整个webpack生态系统中常用的术语。AAsset: 这个术语主要是用来描述我们通常在web应用或者其他应用中用到的图片、字体文件、音视频，以及其他类型的一些文件。这些资源通常为一个个单独的文件，但在webpack中，我们借助style-loader或者css-loader也能进行适当的管理。BBundle: bundle通常是由多个不同的模块产生，它是已经加载...
2019-12-21 19:32:33
694
原创 replaced element and non-replaced element（可替换元素和非可替换元素）
Q&Aquestion: img元素属于行内还是块级元素？answer: 行内元素question: 那为什么img标签能够设置高宽呢？首先，分析一下行内元素的某些特点：不可设置高宽；不占满一行，可平铺；对行内元素设置margin时，垂直方向上将会失效；回到开头的问题：为什么img标签能够设置高宽呢？img确实是行内元素，但它同时也是“可替换元素(replaced...
2019-12-01 16:18:38
279
原创 Webpack4.0基础教程七：tree shaking（前端系列周刊（3））
首先，在此声明一下，这篇文章之前写的时候也是有点模模糊糊，应该有很多错的地方（后半部分），或者逻辑比较乱的地方，各位小伙伴如果读这篇文章的话，感觉不清晰的地方就不要去深究了，以免浪费时间，同时把你们带偏，之后会抽空把文章纠正更新一下，在此对那些可能被我带偏的伙伴说声抱歉，同时也希望看我文章的哥们、小姐姐们能够指出我的一些问题，或者提供一些补充和一些小demo。foreword（前言）这里主要声...
2019-11-24 20:53:25
1037
原创 前端系列周刊（2）：How to debug front end code?（如何debug前端代码）
前端系列周刊（2）：How to debug front end code?（如何debug前端代码）文章地址：https://www.kancloud.cn/yaodebian/debug_front_endlast（最后）非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。最后，附上个人常逛的社交平台：知乎：http...
2019-11-24 10:52:35
163
原创 前端系列周刊（1）：从前端的视角谈谈“代码格式规范的那些事”
前端系列周刊（1）：从前端的视角谈谈“代码格式规范的那些事”（Talk about the “code format specification” from the front-end perspective）文章地址：https://www.kancloud.cn/yaodebian/code_specificationlast（最后）非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动...
2019-11-24 10:47:20
118
原创 如何在垂直方向上均匀展示高度相等的栏目
如何在垂直方向上均匀展示高度相等的栏目？场景：手机屏幕上需要垂直展示两个栏目块，并保证栏目块与顶部底部的距离、栏目块之间的距离相等（当然要满足不同的屏幕宽度）。具体效果大致如下：要求保持上面的三块高度相等。Now let’s try several methods below:方法一：基于flex实现<!DOCTYPE html><html lang="e...
2019-11-22 18:01:53
449
转载 mac上通过nvm管理nodejs版本时，如何统一配置yarn
Install NVM, NodeJS, Yarn via Homebrewhttps://github.com/nijicha/install_nodejs_and_yarn_homebrew
2019-11-16 15:50:13
473
原创 如何在mac中安装HomeBrew
如何在mac中安装HomeBrew首先直接查看HomeBrew官网(https://brew.sh/)直接输入这条命令，会发现报错如下：fatal: unable to access 'https://github.com/Homebrew/brew/': Could not resolve host: github.comFailed during: git fetch origi...
2019-11-16 15:41:27
359
原创 如何在mac上卸载nvm并重新安装
如何卸载原有nvm并重新安装直接删除nvm文件夹，因为当我们输入nvm命令时，显示如下：所以我们可以执行以下的语句：cd ~rm -rf .nvm移除掉~/.profile, ~/.bash_profile, ~/.zshrc, ~/.bashrc文件中关于nvm的配置，比如：(以.bash_profile为例)vim .bash_profile -> 打开Path配...
2019-11-16 15:39:09
4633
1
原创 数据结构之——链表一（链表结构）【更新中】
概况与数组类似，链表是一种线性结构，如图所示：链表结构与数组结构有什么区别呢？数组：连续固定的内存空间，对内存要求较高；链表：零散的一系列内存通过指针的形式串接在一起；现在假设有这样一个场景：目前系统拥有的剩余内存空间充足，现在如果需要申请100MB的数组或者链表，系统中虽然剩余空间大于100MB，但没有大于或等于100MB的连续内存块，那么数组将声明成功，链表因为不受内存连续影响...
2019-09-21 23:52:32
372
原创 前端布局之——水平垂直居中
前端垂直居中布局前端页面的居中是平常开发中比较常见的布局，以下将从水平居中、垂直居中、水平垂直居中三个角度分析不同的布局方法。水平居中法一：行内元素水平居中html:<div class="container"> <div class="box"></div></div>css:.container { text-align...
2019-09-17 00:32:49
1302
1
原创 数据结构之——数组
概况数组是最基础的数据结构之一，它是是一种线性结构（线性表就是数据排成像一条线一样的结构，每个线性表上的数据最多只有前和后两个方向），通过固定连续的内存块存储相同类型的数据（javascript除外，可以存储多种类型数据），常见的线性结构还有链表（包括单向链表、双向链表、循环链表）。有线性结构，自然也有非线性结构，比如：二叉树、堆和图等。。。特性数组最大的特点是根据下标随机访问数据，数组寻...
2019-09-15 17:49:22
274
原创 leetcode04-寻找两个有序数组的中位数
问题描述给定两个大小为 m 和 n 的有序数组 nums1 和 nums2。请你找出这两个有序数组的中位数，并且要求算法的时间复杂度为 O(log(m + n))。你可以假设 nums1 和 nums2 不会同时为空。示例 1:nums1 = [1, 3]nums2 = [2]则中位数是 2.0示例 2:nums1 = [1, 2]nums2 = [3, 4]则中位数是 ...
2019-09-07 23:54:04
173
原创 记一次户外拓展感想与收获
公司组织了一次入职的户外拓展，感觉收获很多，便记录下来。。。（文笔太垃圾了。。。）公司这次组织的户外拓展活动确实很有意义，它算不上华丽，因为在其间我们也并不轻松，不过我们也并不痛苦，和小伙伴们也是玩的比较愉快的，更重要的是它让我收获颇丰。首先从第一个项目开始讲起吧，我们需要以自己的方式来展示我们团队的队名、口号，还有我们的logo和队歌。一开始大家都比较陌生，多多少少默契不怎样，我们在喊队名、...
2019-03-16 15:08:21
702
原创 leetcode02-两数相加
问题描述给出两个 非空 的链表用来表示两个非负的整数。其中，它们各自的位数是按照 逆序 的方式存储的，并且它们的每个节点只能存储一位数字。如果，我们将这两个数相加起来，则会返回一个新的链表来表示它们的和。您可以假设除了数字 0 之外，这两个数都不会以 0 开头。示例：输入：(2 -> 4 -> 3) + (5 -> 6 -> 4)输出：7 -> 0 -&...
2019-03-09 15:19:30
246
原创 公司入职培训中学到的几种EXCEL技能，简单记录下
1.通过VLOOKUP来查询数据首先我们看下这张图：当前我们的需求是这样的：我想获取到表中每个人所属的一个省份信息。我们首先找到一张信息表，如图：我们想根据上面这张表获取每个人的省份信息，这时我们便用到了我们的VLOOKUP函数：我们先将第一张图中的所属省份字段改成区域，因为两张表的字段名称要一致：接着我们选中第一个人所对应的区域单元格，并在office的函数栏中输入函数：...
2019-03-08 21:40:47
379
原创 leetcode01-两数之和
问题描述给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]接着，给...
2019-03-07 22:55:35
177
原创 css3系列之css动画
github文章地址：https://github.com/yaodebian/blog/issues/1css3系列之css动画css动画是css3中新添加的特性，为我们提供了很多很方便的css特效，以前很多需要借助js(或者gif动效图)来完成的动画效果，简单通过css就能完成。一.动画规则css的动画的实现分两步：通过@keyframes设置动画过渡规则将动画规则部署到html...
2019-02-03 22:02:54
256
原创 代码调试系列之前端代码调试的几种基本方法
github文章地址：https://github.com/yaodebian/blog/issues/2知乎文章地址：https://zhuanlan.zhihu.com/p/56231646针对前端代码的调试，我们更多的是对javascript代码的调试，我们常用的可能就是向alert、console等方式，同样的对于DOM元素变化的js脚本也可以进行监听调试，然后就是简单的HTML元...
2019-02-03 21:59:40
5049
1
原创 总结一份自己写购物车的思考
知乎文章地址：https://zhuanlan.zhihu.com/p/53707400最近在继续完善自己之前写的一个demo:yaodebian/taobaoAppgithub.com之前并没有对购物车进行特别的设计，仅仅是将一个个商品添加到购物车列表，也没有做一些处理，比如：列表是按照商家来分类呈现的等等。。。以下是我目前为了学习写的一个demo:接下来，记录下我的一...
2018-12-31 17:04:19
227
空空如也
win10控制面板一闪就关闭，但单独打开其中的功能快又没问题
2017-07-04
Java关于在catch中抛出一个异常给外围函数却捕获不到的问题
2017-03-11
每个用户每访问一个网站运营商就要想网站所有者支付0.1元是否事实
2017-02-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人