- 博客(37)
- 收藏
- 关注
RSS订阅原创 记录一下对webpack打包，工程的优化
记录一下对webpack打包，工程的优化最近在整理之前自己做过的一个项目，项目存在几个问题路径问题，没有设置baseName，在Nginx上部署不好根据项目来区分项目体积过大(4M),首屏加载时间过长构建速度慢，接近90s每次构建完之后，都需要手动将内容copy到服务器页面的访问量，访问次数，异常情况webpack打包体积优化在做第二次优化之前，已经对项目体积进行过优化，具体可以参考 链接 的后半部分,大体上从这几方面入手。使用 uglifyJs 来压缩代码体积(在webpack4中
2021-05-20 13:26:15
285
原创 分享最近学习react源码的经历
分享最近学习react源码的经历写在前面：最近一段时间在学习React源码，写这篇文章的目的有二：分享自己学习的经历，希望之后有相关学习需求的同学有址可寻，少走弯路。将学习到的内容转化为文字输出，便于之后回顾（所以可能文中的文字大部分存在生搬硬套的问题，仅有少部分是自己的理解）我又将这段时间分成如下几个阶段：根据教程，手写一个简单的React对比React调用栈，了解React大体上的一个工作流程下载React源码，根据React源码分析教程，边学习，边调试再回顾一遍教程解读，结合其.
2021-05-07 18:17:39
555
原创 react ssr 服务端渲染入门
react ssr 服务端渲染入门前言前后端同构，作为针对单页应用 SEO 优化乏力、首屏速度瓶颈等问题而产出的解决方案，近来在 react、vue 等前端技术栈中都得到了支持。当我们正打算抛弃传统的纯服务端渲染模式，拥抱前后端分离的最佳实践时，有些人却已经从单页应用的格局里跳出，重新去思考和定义服务端渲染。为什么要用服务端渲染？加快首屏渲染，减少白屏时间与传统的web项目直接获取服务端渲染好的HTML不同，单页面应用使用JavaScript在脚本客户端生成HTML来呈现内容，用户需要等.
2021-03-05 17:12:42
499
2
原创 终于开始学习babel了
终于开始学习babel了Babel官方中文文档Babel官方英文文档什么是Babel？Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：语法转换通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)源码转换 (codemods)还是不太懂，编译器是什么？强烈建议通过the.
2021-02-24 13:23:47
474
原创 从 Redux 开始读源码
从 Redux 开始读源码前言虽为一名菜鸟程序员，但是也有读源码的心。由于最近在看 Redux，并且 Redux 的代码量也比较少，遂鼓起勇气，准备一试。Flux 的设计思想Redux 的设计思想很大程度上来源于 Flux 架构，我们可以认为 Redux 是 Flux 的一种实现形式。Flux 并不是一个具体的框架，是由 FaceBook 技术团队提出的应用架构，这套架构约束的是应用处理数据的模式。在 Flux 中，一个应用将被拆成一下 4 个部分。View（视图）:用户界面。 改用户界面是
2021-01-05 22:40:41
116
原创 Webpack学习笔记（三）
SourceMap在之前的几章里面，我们介绍了webpack的打包编译功能。能通过loader、plugin机制帮助我们构建代码。虽然构建代码很大程度上便利了我们的生产环境，但是我们实际的代码和我们开发的代码会有很大的差异，当出现错误的时候，我们很难直接定位到源代码中对应的位置。而Souce Map（源代码地图）就是一个映射转化后的代码与源代码之间的关系。我们可以看到很多第三方的库的dist文件中都会包含.map文件我们点开来看一下在浏览器中打开开发者工具后，会自动请求.map文件，然后根据这个
2020-11-23 20:05:21
245
原创 Webpack学习笔记（二）
提升开发体验webpack-dev-server 是 Webpack 官方推出的一款开发工具，根据它的名字我们就应该知道，它提供了一个开发服务器，并且将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起。可能大家都听说过’热更新’这个词，在使用Vue或React官方提供的脚手架时都无意中享受了热更新带给我们友好的开发体验。但是我在这里并不准备直接介绍webpack-dev-server插件的使用，而是手动去创建一个开发环境去达到webpack-dev-server的开发体验，看看webpa
2020-11-19 22:23:55
171
原创 Webpack学习笔记（一）
写在前面事情是这样的，之前做毕设的时候做了个项目。这个项目是用React的做的，但没有使用官方的cli工具，经过自己的一顿折腾搭建起来的。项目上线后，体积太大，导致首次加载需要8s之久！！成了我一块心病，于是准备重新学习一下webpack，找个机会把这个项目的打包做一个优化。之前也对webpack有过一些片面的了解，根据大佬写的一些博客，查阅官方文档，搭建了项目环境，并且打包部署，但是总感觉对webpack的了解很浅显，于是最近找了个视频学习了下，下面做一些简单的分享（我觉得视频比官方文档写的要好，官
2020-11-17 09:41:45
264
原创 一步一个脚印搭建简易React
一步一个脚印搭建简易React准备环境：node环境vscode编辑器初始化项目// 创建一个文件夹，当然你也可以手动创建mkdir my-react// 进入到项目目录cd my-react// 生成pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中npm init搭建项目环境由于我们的目的是实现一个简易的React,为了能把更多的重心花在React上，我们需要借助一些工具来帮助我
2020-10-23 15:20:55
232
原创 h5项目开发入门指北
h5项目开发入门指北最近刚接触公司的h5项目，踩了很多坑，问了很多问题，希望能记录下来帮助大家少走弯路。1.安装抓包工具-Charles（除了Charles还可以使用其他抓包工具这里以Charles举例）为什么要使用抓包工具呢？我们平时在开发PC端的时候，可以使用Chrome的NetWork调试工具来帮助我们查看网络请求，虽然h5项目在开发阶段同样也能通过Chrome来查看网络请求。但我们往往有这样的场景：拿到App端内跳转的h5页面地址查看App中返回的数据是否正确（查看数据还可以通过vco
2020-10-17 00:14:55
1625
原创 那些年那些跨域的事
那些年那些跨域的事1. 什么是跨域？出于浏览器的同源策略限制，浏览器会拒绝跨域请求。那什么样的请求才算是跨域请求呢？协议不相同域名不相同端口不相同2. 跨域请求举例假设我们现在浏览器中的地址是http://www.zaoren.comURL是否跨域原因http://www.zaoren.com/index否同源https://www.zaoren.com是协议不同https://www.zaorenll.com是域名不同https://
2020-09-23 19:44:13
165
原创 《JavaScript设计模式》读书笔记(五)
《JavaScript设计模式》----张荣铭（五）首先说一下什么是设计模式？以及我们为什么要学习设计模式？设计模式的定义是：设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案也可以通俗的理解为：设计模式在某个特定场景下都某种问题的解决方案。当然，这也就是为什么我们要学习设计模式的原因。本书将设计模式按照类型分成六大类创建型设计模式结构型设计模式行为型设计模式技巧型设计模式架构型设计模式5 架构型设计模式5.1 同步模块模式将复杂的系统分成高内聚、低耦合的模块，是
2020-08-25 23:39:34
94
原创 《JavaScript设计模式》读书笔记(四)
《JavaScript设计模式》----张荣铭（四）首先说一下什么是设计模式？以及我们为什么要学习设计模式？设计模式的定义是：设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案也可以通俗的理解为：设计模式在某个特定场景下都某种问题的解决方案。当然，这也就是为什么我们要学习设计模式的原因。本书将设计模式按照类型分成六大类创建型设计模式结构型设计模式行为型设计模式技巧型设计模式架构型设计模式4 技巧型设计模式4.1 链模式通过在对象方法中将当前对象返回，实现对同一个对
2020-08-25 23:39:11
179
原创 《JavaScript设计模式》读书笔记(三)
《JavaScript设计模式》----张荣铭（三）首先说一下什么是设计模式？以及我们为什么要学习设计模式？设计模式的定义是：设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案也可以通俗的理解为：设计模式在某个特定场景下都某种问题的解决方案。当然，这也就是为什么我们要学习设计模式的原因。本书将设计模式按照类型分成六大类创建型设计模式结构型设计模式行为型设计模式技巧型设计模式架构型设计模式3 行为型设计模式行为型设计模式用于不同对象之间职责划分或者算法抽象，行为型设计
2020-08-25 23:37:02
154
原创 《JavaScript设计模式》读书笔记(二)
《JavaScript设计模式》----张荣铭（二）首先说一下什么是设计模式？以及我们为什么要学习设计模式？设计模式的定义是：设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案也可以通俗的理解为：设计模式在某个特定场景下都某种问题的解决方案。当然，这也就是为什么我们要学习设计模式的原因。本书将设计模式按照类型分成六大类创建型设计模式结构型设计模式行为型设计模式技巧型设计模式架构型设计模式2 结构型设计模式2.1 外观模式外观模式就是将一些底层的操作封装起来，很多代
2020-08-25 23:36:03
137
原创 《JavaScript设计模式》读书笔记(一)
《JavaScript设计模式》----张荣铭首先说一下什么是设计模式？以及我们为什么要学习设计模式？设计模式的定义是：设计模式是在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案也可以通俗的理解为：设计模式在某个特定场景下都某种问题的解决方案。当然，这也就是为什么我们要学习设计模式的原因。本书将设计模式按照类型分成六大类创建型设计模式结构型设计模式行为型设计模式技巧型设计模式结构型设计模式1 创建型设计模式创造型设计模式是一类处理对象创建的设计模式，通过某种方式控制对象的创
2020-08-05 19:59:33
196
原创 Three.js 的初步学习和实践
Three.js 的初步学习和实践写在前面：作为一个前端小白菜，在校期间学习过一点点的Three.js，做过一些小demo，想在这里和大家做下分享，顺便记录一下学习的过程。Three官方文档WebGL相信大家已经耳熟能详，是OpenGL的一个衍生版本。能够使得我们不需要安装任何插件就可以构建Web 3D场景。但是WebGL本身的语法比较偏向底层，直接使用WebGL的GLSl语言构建3D场景开发难度比较大。于是乎，Three.js对WebGL做了一层封装，并向我们前端开发人员提供了非常友好的API，使得
2020-07-30 23:25:15
513
1
原创 夜来风雨声，Redux知多少？
随着Vue、React、Angular框架的盛行，基于前端路由的单页面应用已经成为主流。单页面应用是指只有一个主页面的应用，一开始只需加载一次 js,css 等相关资源。所有的内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，本质上是根据url挂载不同的组件，刷新局部资源实现页面跳转的假象。那么，既然单页面应用是将展示的内容分成一块块的组件，那么必然涉及到各个组件之间数据共享的问题，那么我们组件之间的数据是如何共享的呢？1 单页面应用中的数据共享方式1.1 父子组件之间的数据共享 // 父
2020-07-09 22:16:44
91
原创 面试官：除了call，apply你还了解其他JS实现继承的方式吗？
在之前的面试过程中，经常会被面试官问到JS实现继承的方式。由于在校期间修过Java，日常开发中常用的是ES6的extends所以一直没有对JS的继承深入了解，知道看了《JavaScript设计模式》这本书后，才发现JS中的继承，其实大有学问，接下来我就借花献佛，给大家简单分享一下JS的继承方式。在了解各种继承之前，需要大家了解创建一个类的实例var book1 = new classA()中发生了什么。创建一个空的新对象：var obj = {};设置新对象的__proto__属性指向类的p
2020-07-07 22:55:45
180
原创 记一次脚手架搭建过程（三）
在之前的（一），（二）中我们介绍了命令行工具的搭建，以及开发环境的搭建，包括模块热更新，集成react开发环境，webpack-dev-server的集成，等等，但是项目开发完了，总是要上线的，那么怎么将我们开发好的项目部署上线呢?没错，还是得需要使用webpackwebpack-dev-server解决开发阶段跨域问题:为什么将webpack配置拆分？在（二）中，我们特意将webpack.config.js拆分成了webpack.base.config.js，webpack.prod.config.
2020-05-27 10:19:11
208
原创 记一次脚手架搭建过程（二）
现在，命令行工具搭建好了，那么接下来的任务就是搞一个项目模板，奥力给！项目模板 由于我们要做的项目模板是一个单页面应用，所以首先要借助webapack和webpack-cli来帮我们构架项目。所谓单页面应用，可以理解为只有一个html文件第一步：创建文件夹，并初始化pakage.json文件$ mkdir zaoren-demo && cd zaoren-demo$ npm init -y接着，构建如下目录结构zaoren-demo |- package.json
2020-05-26 13:41:21
279
原创 记一次脚手架搭建过程（一）
前言 最近在做毕业设计，总感觉之前做项目的时候直接在github上拷下别人的代码这样的做法不太好。在平时的工作过程中，项目的创建，开发，打包上线的流程我最多只能参与到开发这样一个环节，说实话，不利于我们的成长。在时间还比较充裕的情况下，准备自己搭建一个脚手架感受一下。走你！准备环境 node npm webpack webpack-cli完整脚手架的组成 **项目模板：**为使用脚手架搭建项目的用户预先开发好项目的部分公共内容，节省开发时间 命令行工具： 在命令行中，
2020-05-26 13:38:29
361
原创 一句new的背后到底隐藏着什么秘密?
首先我们来看看new一个对象，发生了些什么事？function classA() { this.data = 'foo'; console.log('我是立即执行的');}var test = new classA();console.log(test.data);// 我是立即执行的// foonew一个对象的过程分为四步1、创建一个新对象：var obj ...
2020-04-10 11:36:12
149
原创 从前端的角度来感受设计模式（未完待续）
闲言碎语为什么要说设计模式呢？先来看看设计模式的定义:在面向对象软件设计过程中针对特定问题的简介而优雅的解决方案。emmm…其实我目前还没有这么优雅，作为一个前端小白菜，目前学习设计模式的目的就是为了多了解一些设计方法，好在以后读的源码的时候知道为什么要这样写一.工厂模式Java中常用的一种设计模式，这种类型的设计模式属于’创建型’，提供了一种创建对象的最佳方式， 在工厂模式中，我们不需要对...
2020-03-28 09:53:19
108
原创 10分钟带你了解防抖与节流，如果不懂就看20分钟
10分钟带你了解防抖与节流，如果不懂就看20分钟闲言碎语事情是这样的：昨天产品那边有一个需求，我们的搜索框需要在用户输入的时候，边搜索，变查询数据，我当时脑子一激灵，万一人家一秒中按了一万下呢？产品听我这么一说，嗯！有道理，我看看旁边已经工作了好几年的老哥，仿佛在说，小朋友，你是否有很多问号？其实，做一下防抖与节流就可以。 概念防抖： 任务频繁触发的情况下，只有任务触发的间隔超过指定间...
2020-03-27 16:45:40
95
原创 flex布局快速入门，以及几种垂直居中的比较
闲言碎语 最近在修改项目的时候，接触到了flex布局，想到之前在做uniapp的时候，都是使用的flex布局，当时因为着急，在网上找了几个组件就草草的把项目做完了，然后昨天晚上在biliili上看了40分钟的视频，感觉大概能理解了。所以我还是觉得，磨刀不误砍柴工吧，希望大家以后在碰到css，js这些基础问题的时候，花个几个小时去了解一下他，而不是直接百度一下，把活干完就完事儿了。 到这里，...
2020-03-24 15:03:40
212
原创 对闭包的一些理解
1.闭包的理解 之前面试的时候老是问到闭包，也经常答得差强人意，为什么呢？我觉得是因为没有看过权威的解释，面试完不会了，就去百度上随便找了一个答案，然后就认为自己懂了。其实，每个人在读完知识点的时候，都会加上一些自己的理解，可能第一个人理解了，但是写出来的东西只能表达到90%，第二个人读了第一个人的理解就只能了解到70%，而到我…就会让面试官感觉，我完全不理解，简直就是在瞎说一通。 所以，...
2020-03-23 18:28:06
106
原创 使用真机访问 本地开发的H5项目
使用真机访问 本地开发的H5项目最近我leader让我维护一下我们官网（这也是我第一次接触H5项目），哼哧哼哧Ctrl+C,Ctrl + V了几天，总算是搞完了，但是我想用真实的手机测试一下UI，看看效果啥的。一时间有些不知所措，遂百度（有人说，哎呀，你发布测试环境测试一下啊，那也太麻烦了把，下面我准备介绍一个更简单的办法）简单的说就是，在电脑上启一个服务，然后手机和电脑在同一局域网的情况下，...
2020-03-20 18:12:46
830
原创 记一次手写Promise
记第一次手写Promise之前做项目的时候，一般使用AJAX请求数据，相信大多数同学都会使用.then来处理一些异步任务，但是这样的话可能会发生回调地狱，脑子混乱… 直到有一天，我看到了这段代码function asyncFn1() { console.log('asyncFn1 run'); return new Promise(function (resolve, reject) ...
2020-03-20 17:14:20
91
原创 调试NodeJS代码的两种办法--菜鸟入门
方法一 使用官方推荐的inspect调试步骤1 node --inspect-brk 01_run.js 运行步骤2 在浏览器中打开 chorme://inspect方法二 直接在IDE中调试（这里演示VScode）步骤一 修改.vsCode中的 launch.json文件{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 ...
2020-02-04 17:24:38
363
原创 简单理解浏览器缓存
**简单理解浏览器缓存**写在前面： 前段时间公司同事分享了前端缓存有关的知识，作为一个还没毕业的实习生，听得我一头雾水，遂在闲暇之际，自己捋一捋。 缓存是性能优化中非常重要的一环，缓存的意义就在于减少请求，更多地使用本地的资源，给用户更好的体验的同时，也减轻服务器压力。接下里从三个部分来说明一下前端的缓存。1.强缓存2.协商缓存3.缓存位置强缓存 我们在请求...
2020-01-06 16:27:41
115
原创 面向过程，面向对象，面向函数三种编程思想的理解
面向过程，面向对象，面向函数编程的理解// 1. 面向过程// 面向过程将编程任务当作完成一件事情，这件事情需要按步骤完成。比如说，煮咖啡这件事：先拿一定量的咖啡豆，然后磨成粉末，再倒入咖啡机，等待几分钟，就煮好了咖啡。这就是面向过程。代码体现：console.log('取咖啡豆');console.log('磨成粉末');console.log('煮开水');console.log(...
2019-11-29 13:08:49
1966
原创 svg和canvas的区别你都知道嘛（不断完善中）
写在前面： svg，canvas无疑是当下前端同学的必备技术，比如自己实现一个复杂的组件，就会使用svg和canvas。另外，当下比较流行的WebGL最终都会渲染在canvas标签中，所以有必要了解一下svg和canvas的区别，下面列了一张表格属性canvassvg图形类型位图矢量图绘制图形纯脚本（js）使用xml格式（xml格式是对html的补充）...
2019-11-14 09:19:19
268
原创 2D中国地图开发小教程
中国地图开发1.首先，第一步，我们需要拿到中国各个省份的边界经纬度数据China.json地址：https://github.com/zaoren/learning-notes/blob/master/%E5%B0%8F%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91/chinaMap/json/china.json{ "type": "Feature", "...
2019-11-05 09:23:42
678
原创 对于cookie的一些理解
cookie的一些理解简单理解：cookie是一种浏览器中的技术。是由网景公司（NetScape）前雇员发明的，首先来讲讲为什么需要cookie这中技术？cookie的产生还要从http协议讲起。由于http是一种无状态协议（无状态简单理解成，上一次请求的数据，我下一次请求中是获取不到的），那么这时候就需要一种可以进行请求之间数据传递的技术，cookie就这么诞生了！cookie的存放又分为...
2019-10-27 14:27:35
220
转载 JS异步编程的理解
1.1什么叫异步？异步async是相对于同步sync来说的，顾名思义同步就是执行完一件事情后，再去执行下一件事情。而异步 ，比如以下例子setTimeout(function cbFn() { console.log('这是一个异步任务!');},1000);console.log('这是一个同步任务');setTimeout就是一个异步操作，当js的引擎顺序执行到setT...
2019-10-24 23:42:22
612
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人