前端系列周刊
每周精选一个主题进行研究,并通过文章的形式进行总结。
YaoDeBiAn
这个作者很懒,什么都没留下…
展开
-
原生 js 如何获取定位
foreword(前言)本篇文章作为前面一篇文章(原生js如何获取宽高)的后续,主要分析原生 javascript 获取元素定位的 api 以及一些优化。JS 定位都有哪些获取方式呢clientLeft & clientTopoffsetLeft & offsetTopscrollLeft & scrollTop以下则会针对 clientTop、offsetTop、scrollTop 作为讲解。clientLeft & clientTopThe widt原创 2020-11-01 20:15:52 · 1205 阅读 · 0 评论 -
有趣的 Destructuring
foreword(前言)最近,我的学弟他在我们的一个群里问了一个问题:“数组解构和对象解构在性能上有什么区别呢,哪种方式会更好?”。当时,我的第一反应是,当时是数组了,而且为什么会有这样的问题呢,一个是针对数组的解构,一个是针对对象的解构,这两个有可比性吗,对比他们有意义吗?当然,只是我的第一反应,为了验证它们是否是有比较的意义,我大致花了一天多的时间简单研究了一下。test(自我测试,直接 coding 测试不就行了)于是我写了以下的一些代码用于测试:arr_normal.js: 使用 es5原创 2020-10-31 11:46:16 · 274 阅读 · 0 评论 -
原生js如何获取宽高
foreword(前言)最近项目中需要获取 dom 元素的尺寸,所以借此对比分析一下 js 所有获取尺寸的方法,以及相关的 dom 定位方式。JS 尺寸、定位都有哪些获取方式呢JS 尺寸获取方法:clientWidth & clientHeightoffsetWidth & offsetHeightscrollWidth & scrollHeightgetComputedStyle...原创 2020-10-25 21:08:21 · 1406 阅读 · 1 评论 -
Typescript笔记之基础知识(3):TS数据类型
foreword(前言)就跟学习JS一样,学习TS首先需要掌握它具有哪些数据类型,本篇文章将记录TS基本的数据类型。在TS中,数据类型都有哪些?TS作为JS的超集,必然包含JS所有的数据类型,它们分别是:BooleanNumberStringArrayFunctionObjectSymbolundefinednull除此之外,TS还新增了以下的数据类型:voidanynever元组枚举其他高级类型玩法类型注解在对比分析每种数据类型之前,有必要先了解TS中的类原创 2020-05-10 16:30:05 · 1264 阅读 · 0 评论 -
精读express系列——实战篇(2)
foreword(前言)上一篇文章中,主要介绍了一个基本的项目环境搭建、express-generator的简单使用以及对其构建的项目结构的梳理。本篇文章是针对IM(InstantMessaging)聊天应用的项目预演篇,将会从以下几个角度进行展开:梳理应用所需的技术难点并找到合适的解决方案;技术选型梳理项目业务模块;梳理项目业务流程;基本的 UI 设计;技术难点与解决方案1...原创 2020-05-05 23:32:04 · 228 阅读 · 0 评论 -
精读express系列——实战篇(1)
foreword(前言)上一篇主要简单介绍了express的一些高阶玩法,本篇文章将主要围绕基于express的项目结构这个主题:梳理一个简单清晰的项目结构;express generator 以及它所构建的项目结构;express generator 构造器简单原理分析;手写一个简单的express项目1.首先,先把完整的目录结构构建好:├── config (基础配置目录)...原创 2020-04-27 01:06:47 · 312 阅读 · 0 评论 -
精读express系列——基础篇(2)
foreword(前言)上一篇文章中,我们已经大致介绍了express的基础语法,本篇文章将主要介绍express的一些进阶用法,大致为以下几点:express自定义模版引擎;简单介绍process manager;express如何预防安全漏洞;express的性能优化操作;express自定义模版引擎上一篇文章中我们简单演示了pug模版引擎的使用,我们发现pug其实是通过np...原创 2020-04-19 18:33:46 · 328 阅读 · 0 评论 -
精读express系列——基础篇(1)
foreword(前言)由于前三周搬家、身体、心理等方面的一些因素,导致文章更新中断了。目前已经明确了自己的一些规划,从本周开始,我将会以更加系统的视角深入各种知识,以更加稳定的节奏进行文章创作,希望能在这个过程中不断提高自己的技术水准、眼界视角、文章质量等。express作为nodejs中非常经典的框架之一,我认为从学习使用它开始,并深入阅读并理解它的源码,会是一个非常有意思的过程,而且我觉...原创 2020-04-12 18:17:18 · 554 阅读 · 0 评论 -
精读httpserver(一个简单的nodejs本地静态资源服务)源码
foreword(前言)最近在看极客时间的“nodejs开发实战”,里面简单介绍了一个npm包——httpserver(https://github.com/bahamas10/node-httpserver#readme),它可以为我们搭建一个本地静态资源服务器。通过js,它是怎么做的呢,本着好奇的心态,我点进github查看了它的源码,发现只有100多行代码而且,所以有了这篇文章。在这篇文...原创 2020-03-15 21:12:22 · 569 阅读 · 0 评论 -
从javascript的角度简单理解nodejs中commonjs模块规范的导入导出
foreword(前言)最近在看极客时间的“nodejs开发实战”,其中有个nodejs中commonjs模块规范的例子,例子中可以得出的结论是如果以module.exports作为导出,那么其优先级是最高的。我对此非常好奇,它的运行机制是怎样的?作者在最后给出了一个小引导,通过webpack将nodejs代码打包成js代码,并以js的角度来作为一个窗口。所以,本篇文章,我想要做的是将这打...原创 2020-03-08 21:56:46 · 1729 阅读 · 0 评论 -
SplitChunksPlugin(webpack内置插件——将共享代码块单独打包)
起初,基于webpack构建的图形关系体系,chunks(包括其内部引进的modules)通过父子关系进行链接。过去我们通过CommonsChunkPlugin来避免重复的依赖,但是却达不到更进一步的优化。webpack4.x中,CommonsChunkPlugin已经被optimization.splitChunks取代,以达到更好的优化体验。Defaults(默认)开箱即用SplitCh...原创 2020-02-02 21:55:59 · 1412 阅读 · 0 评论 -
webpack4之splitChunks.minChunks
概要这个配置表示split前单个非按需导入的module的并行数的最低下限。注:只对import或require直接引入的module有效。分析简单来讲,假如minChunks设置为n,那么某个module想要被拆分出去,那么它的共享次数(或者说并行请求次数必须 >= n):1. minChunks设置为n2. 假设有m个入口点,这m个入口点都直接引入了某个模块module(通过...原创 2020-02-02 21:23:16 · 1360 阅读 · 0 评论 -
webpack4之splitChunks.cacheGroups
概要cacheGroups即缓存组,其中的每一项缓存组都可以继承/覆盖之前提到的splitChunks参数值(如name、maxSize、minSize、maxInitialRequests、maxAsyncRequests等),除此之外还额外提供了三个配置,分别为:test, priority 和 reuseExistingChunk。test: 表示要过滤 modules,默认为所有的 ...原创 2020-02-02 20:37:33 · 2849 阅读 · 0 评论 -
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 · 3975 阅读 · 0 评论 -
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 · 1884 阅读 · 0 评论 -
webpack4之splitChunks.maxInitialRequests
概要同maxAsyncRequests配置类似,该配置表示入口点能被拆分的最大数量。准备工作目录root——dist(打包之后的文件夹)——node_modules(下载的包)——src(项目脚本目录)————entry(入口点脚本)————modules(入口点中引入的模块)——package.json(包管理文件)——webpack.config.js(webpack...原创 2020-01-26 21:17:07 · 832 阅读 · 0 评论 -
webpack4之splitChunks.maxAsyncRequests
这个配置用来控制按需引入的包中的直接引入的包的打包。准备工作目录root——dist(打包之后的文件夹)——node_modules(下载的包)——src(项目脚本目录)————entry(入口点脚本)————modules(入口点中引入的模块)——package.json(包管理文件)——webpack.config.js(webpack配置文件)webpack配置...原创 2020-01-26 15:14:41 · 794 阅读 · 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 · 5682 阅读 · 1 评论 -
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 · 754 阅读 · 0 评论 -
Webpack4.0基础教程七:tree shaking(前端系列周刊(3))
首先,在此声明一下,这篇文章之前写的时候也是有点模模糊糊,应该有很多错的地方(后半部分),或者逻辑比较乱的地方,各位小伙伴如果读这篇文章的话,感觉不清晰的地方就不要去深究了,以免浪费时间,同时把你们带偏,之后会抽空把文章纠正更新一下,在此对那些可能被我带偏的伙伴说声抱歉,同时也希望看我文章的哥们、小姐姐们能够指出我的一些问题,或者提供一些补充和一些小demo。foreword(前言)这里主要声...原创 2019-11-24 20:53:25 · 1167 阅读 · 0 评论 -
前端系列周刊(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 · 185 阅读 · 0 评论 -
前端系列周刊(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 · 139 阅读 · 0 评论