- 博客(62)
- 收藏
- 关注
RSS订阅原创 如何使用docker发布项目
如何使用docker发布项目本文将从docker的简单介绍，以及如何在docker上运行一个前端项目，讲到我曾经接触过的如何利用docker实现前端的自动化部署。我对docker的了解也不深，只是基于自己的一丁点经验做一个前端发布的流程整理，同时帮助其他小白同学入门，如有错误，欢迎指正。什么是dockerDocker 属于 Linux 容器的一种封装，提供简单易用的容器使用接口。背景知识详细版传送门：Docker 入门教程-阮一峰简化版：大家都是开发者，知道配置环境的麻烦和难处，操作
2021-06-29 11:29:23
2910
1
原创 写一个Babel插件
写一个Babel插件什么是Babel？来看一下官方解释：Babel 是一个 JavaScript 编译器。Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。作为一种语言，JavaScript 在不断发展，新的标准／提案和新的特性层出不穷。 在得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。Babel的原理是什么？一图胜千言可以看到B
2021-06-21 16:32:56
413
原创 源码阅读vuex
源码阅读vuexVue.use在vue项目中使用路由时，需要通过Vue.use(Vuex)注册状态管理。在vue源码文件vue/src/core/index.js中，调用了initGlobalAPI(Vue)方法，在vue/src/core/global-api/index.js中，定义并导出了initGlobalAPI方法，在initGlobalAPI方法中调用了initUse(Vue)，在vue/src/core/global-api/use.js中，找到initUse，在这里定义了Vue.
2021-05-10 16:00:54
355
原创 浏览器渲染机制
浏览器渲染机制浏览器进程浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。GPU 进程：其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D C
2021-04-11 21:52:25
249
原创 首屏加载优化
首屏加载优化preload（提高优先级，优先加载本页资源）、prefetch（降低优先级，提前加载可能用到的资源）利用LocalStorage缓存资源图片资源压缩，icon资源使用雪碧图对于vue项目：分离打包，对于第三方js库的打包优化。生产环境是内网的话，把资源放内网，通过静态文件引入，如果有外网的话，通过CDN方式引入，不用占用访问外网的带宽，可以节省流量，通过CDN加速。利用webpack的externals设置，分离打包第三方资源，这样可以直接通过全局变量
2021-04-11 21:50:45
767
原创 web 安全
web 安全笔记整理XSSXSS(Cross Site Script)，跨站脚本攻击，因为缩写和CSS(Cascading Style Sheets)重叠，所以只能叫XSS。XSS的原理是恶意攻击者往Web页面里插入恶意可执行网页脚本代码，浏览器无法分辨哪些是可信脚本，当用户浏览页面时恶意代码被执行，读取 cookie，session tokens，或者其它敏感的网站信息，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。反射型XSS（非持久型XSS）通过URL传递参数功能，当
2021-04-10 02:08:07
180
原创 跨域
跨域什么是跨域URI格式：scheme://+user:passwd@+host:port+path+?query+#fragment浏览器遵循同源策略：scheme(协议)、host(主机)和port(端口)都相同则为同源。非同源限制：不能读取和修改对方的 DOM不读访问对方的 Cookie、IndexDB 和 LocalStorage限制 XMLHttpRequest 请求有三个标签允许跨域加载资源：<img>、<link>、<script>
2021-04-10 00:36:21
168
原创 http、https
http、https这是一篇各种摘录的笔记整理，有些内容来源较散未在内容部分特地列出，详见参考列表。http请求方法GET 方法请求指定的资源，使用GET的请求应该只被用于获取数据HEAD 方法请求一个与GET请求的响应相同的响应，但没有响应体POST 方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用PUT 方法用请求有效载荷替换目标资源的所有当前表示DELETE 方法删除指定的资源CONNECT 方法建立一个到由目标资源标识的服务器的隧道
2021-04-09 00:28:55
1039
原创 浏览器缓存
浏览器缓存什么是浏览器缓存浏览器缓存保存着用户通过 HTTP 获取的所有资源，再下一次请求时可以避免重复向服务器发出多余的请求。浏览器缓存也就http缓存，分为强制缓存和协商缓存，两类缓存可同时存在，但强制缓存优先级更高。为什么使用缓存：避免数据重复传递，节省宽带流量减少服务器的负担，提高网站性能加快网页加载速度强制缓存当本地缓存中有所请求的数据时，客户端直接从缓存中获取数据，当缓存中没有所请求的数据时，客户端从服务端获取新的数据，并更新缓存。通过服务器响应header中的Exp
2021-04-09 00:17:02
166
原创 源码阅读vue-router
源码阅读vue-routerVue.use在vue项目中使用路由时，需要通过Vue.use(VueRouter)注册路由。在vue源码文件vue/src/core/index.js中，调用了initGlobalAPI(Vue)方法，在vue/src/core/global-api/index.js中，定义并导出了initGlobalAPI方法，在initGlobalAPI方法中调用了initUse(Vue)，在vue/src/core/global-api/use.js中，找到initUse，在
2021-04-06 21:15:46
284
原创 源码阅读vue VirtualDOM 和 diff
源码阅读vue VirtualDOM 和 diff是什么VirtualDOM 是根据真实的DOM节点树，抽象出来的一棵用 JavaScript 对象描述节点的抽象树。通过 VirtualDOM ，可以对比前后节点变化了哪些变化，做到局部更新视图，减少 DOM 操作。Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如
2021-04-06 21:14:42
148
原创 源码分析vue computed
源码分析vue computed在阅读本文之前，建议先了解vue响应式原理和watch侦听器相关原理，可以看一下源码分析vue响应式原理和源码分析vue watch侦听器，将有助理解computed。用法示例var vm = new Vue({ el: '#app', data: { message: 'Hello' }, computed: { reversedMessage: function () {
2021-04-05 00:37:19
333
原创 CSS3 动画
CSS3 动画transition过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。transition 是 transition-property / transition-duration / transition-timing-function / transition-delay 的简写属性。transition-propertytransition-prope
2021-04-02 00:44:05
124
原创 柯里化
柯里化什么是柯里化柯里化指这样的一种函数，它接受一个函数A为参数，返回一个新的函数，新函数能够接受函数A的剩余参数。举例实现柯里化var add = (a,b,c) => a+b+cvar _add = curry(add)假设我们有一个函数curry，有一个函数add，通过curry返回新函数_add。柯里化使得我们可以这样传参：_add(1)(2)(3)_add(1)(2,3)_add(1,2)(3)来实现一下这个curry函数：function createCurry
2021-04-02 00:32:21
194
原创 grid 网格布局
grid 网格布局基本概念采用栅格布局display:grid 或 inline-grid的元素称为容器，其直接子元素称为项目。设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。容器属性grid-template-columns grid-template-rowsgrid-template-columns 定义列宽， grid-template
2021-03-28 18:40:23
270
原创 源码分析vue watch侦听器
源码分析vue watch侦听器在阅读侦听器源码之前，建议先看一下响应式相关的源码源码分析vue响应式原理，有助理解。侦听器的几种用法<div id="app"> <input v-model="text1"> <input v-model="text2"> <input v-model="text3.val"> <input v-model="text4.val"></div>var v
2021-03-27 01:32:01
267
原创 源码分析vue响应式原理
源码分析vue响应式原理经过上篇简单实现vue响应式原理之后，我们已经简略地了解了响应式是怎么通过发布-订阅模式来实现的，这篇主要从源码分析Vue对响应式原理的实现。找到initData在vue源码入口文件vue/src/core/index.js中，可以看到import Vue from './instance/index'，导入了Vue这个对象。在vue/src/core/instance/index.js中，import { initMixin } from './init'//..
2021-03-25 23:58:30
332
原创 简单实现vue响应式原理
简单实现vue响应式原理本篇只是简单的实现一个vue响应式demo，并未对源码做解读。想要的效果<div id="app"> <input type="text" v-model="text"> {{text}}</div>var vm = new Vue({ el: 'app', data: { text: 'hello world', }});右侧的文本内容会随着输入框的内容及时改变。实现思路
2021-03-25 23:57:49
210
原创 水平居中、垂直居中
水平居中、垂直居中<div class="center_block parent"> <div class="block">块级元素div</div></div><div class="center_inline parent"> <span>行内元素span</span></div><div class="middle_block parent"> <div
2021-03-24 15:40:33
123
原创 let、const和块级作用域
let、const和块级作用域letES6 新增了let命令，用来声明变量。所声明的变量，只在let命令所在的代码块内有效。不存在变量提升console.log(a) // undefinedvar a = 1;console.log(b) // Uncaught ReferenceError: b is not definedlet b = 2;var命令会发生“变量提升”的现象，即在声明变量之前，这个变量可以使用但是值为undefined。而let声明的变量，在声明语句之前使用
2021-03-24 15:38:38
582
原创 手写 apply 和 call
手写 apply 和 call关于apply和call的实现可以看大佬的这篇文章面试官问：能否模拟实现JS的call和apply方法，非常详细，本篇只是以自己的理解再写一遍，加强印象，做一个自己的总结。apply 和 callFunction.prototype.apply()-MDNapply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。func.apply(thisArg, [argsArray])thisArg必选的。在 func 函
2021-03-21 15:08:43
133
原创 手写 bind
手写 bindbind 方法Function.prototype.bind()Function.length先看一看bind方法的返回结果：console.log(typeof Function.prototype.bind()); // functionconsole.log(Function.prototype.bind().name); // "bound "console.log(Function.prototype.bind.length); // 1console.log(Fun
2021-03-20 00:13:11
186
原创 手写 new 操作符
手写 new 操作符前置知识：原型、原型链（可参考理解js原型、原型链和继承）new 操作符function MyConstructor () { this.data = "some data";}MyConstructor.prototype.getData = function(){ console.log(this) return this.data}var instance1 = new MyConstructor()console.log(instance
2021-03-19 00:38:38
251
原创 理解js原型、原型链和继承
理解js原型、原型链和继承原型什么是原型对象？我们创建的每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，即原型对象。function Person(){}Person.prototype.name="Jiuto";Person.prototype.age=25;Person.prototype.sayName=function(){ console.log(this.name)};console.log(Person.prototype)
2021-03-18 21:02:14
211
原创 理解js闭包
理解js闭包闭包和作用域链闭包是指有权访问另一个函数作用域中的变量的函数。（《JavaScript高级程序设计》7.2闭包）所有的JavaScript函数都是闭包：它们都是对象，它们都关联到作用域链。（《JavaScript权威指南》8.6闭包）和其他大多数现代编程语言一样，JavaScript也采用词法作用域（lexical scoping），也就是说，函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是函数调用时决定的。（《JavaScript权威指南》8.6闭包）每一段
2021-03-17 00:22:20
104
原创 层叠上下文、层叠层级、层叠顺序
层叠上下文、层叠层级、层叠顺序层叠上下文 stacking context我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。如何创建层叠上下文文档根元素（<html>）；position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；positio
2021-03-16 00:42:48
524
原创 模板引擎原理
模板引擎原理概念什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定，通过模板引擎函数把数据塞进去，例如：var TemplateEngine = function(tpl, data) { // 模板引擎函数}var template = 'Hello, my name is <%name%>. I\\'m <%age%> years old.';console.log(TemplateEngine(template, { name: "Jiu
2021-03-15 00:04:58
230
原创 手写一个Promise
手写一个PromisePromise三种状态一个Promise对象有三种状态：pending（进行中）fulfilled（已成功）rejected（已失败）状态只有两种转变可能，从pending到fulfilled，或者从pending到rejected。基本用法var promise = new Promise((resolve,reject)=>{ let flag = true; if (flag) { // return resolve('no
2021-03-15 00:04:44
105
原创 ES6 Module
ES6 Module概述历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖
2021-03-15 00:04:27
137
原创 用Map写一个EventBus事件总线
用Map写一个EventBus事件总线本文所写的EventBus类代码可在dc-utils中查看前置知识Map文档设计模式EventBusclass EventBus { constructor () { this.events = new Map() } // 监听事件 addListener (type, cb) { if (!type || !cb) return; // 必传事件名与回调，此处未作处理直接return，可做
2021-03-15 00:04:08
212
原创 防抖与节流
防抖与节流防抖事件触发后经过规定时间再执行，规定时间内，多次触发，每次触发导致重新计时，以最后一次触发为准，规定时间内都没有再次触发就执行。实现function debounce(fn, delay) { let timer = null; return function (...args) { let context = this; if(timer) clearTimeout(timer); timer = setTimeout(f
2021-03-15 00:03:51
89
原创 浅拷贝和深拷贝
浅拷贝和深拷贝浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。方法：Object.assign()、展开语法{...obj}Object.assign()函数会触发setters，而展开语法不会。Array.prototype.slice()、Array.prototype.concat()深拷贝深拷贝会拷贝所有的属性，并拷
2021-03-15 00:03:36
138
原创 冒泡与捕获
冒泡与捕获事件流冒泡型事件例：div -> body -> html -> documentIE5.5及以前版本，会跳过 html 直接 body -> documentIE9、Firefox、Safari、Chrome将事件一直冒泡到 window不是所有事件都能冒泡如：blur、focus、load、unload捕获型事件例：document -> html -> body -> divIE9、Firefox、Safari、Chrome、Ope
2021-03-15 00:03:17
1731
原创 flex布局
flex布局flex基本介绍先贴一个简单的示例代码，后续讲解各属性时，均在此基础上更改。<div class="flex-box"> <div class="flex-item item1">1</div> <div class="flex-item item2">2</div> <div class="flex-item item3">3</div></div>.flex-b
2021-03-15 00:02:46
225
原创 BFC 块格式化上下文
BFC 块格式化上下文概念块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。(MDN)一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。(CSS中重要
2021-03-14 19:34:23
135
原创 常见布局
常见布局左列定宽，右列自适应效果示例基础代码<div class="content"> <div class="left"></div> <div class="right"></div></div>.content { height: 80px;}.left { width: 200px; height: 100%; background-color: teal;}
2021-03-14 19:31:33
134
原创 webpack多页面打包方法工具和模板
webpack多页面打包方法工具和模板本文介绍一个多页面打包方法工具的封装和使用，项目代码见webpack_template打包前后目录结构效果打包目标为src目录，src目录下又分两类：第一类如api这类文件夹，属于直接复制即可，此外还有一些静态资源如images等；第二类是pages，即业务文件夹，下分为对应的personalCenter、shoppingMall等二级目录，即个人中心模块/商城模块，每个模块目录下的index文件即该模块主页，子目录如productDetails文件
2021-03-14 19:28:12
401
原创 手写webpack plugin 和 loader
手写webpack plugin 和 loader本文将简单写一个具有删除console语句功能的webpack的plugin和loader，示例代码参见delConsolePlugin、delConsoleLoader写一个loadervar loaderUtils = require('loader-utils');module.exports = function(source) { var options = loaderUtils.getOptions(this) || {
2021-03-14 19:27:14
171
原创 通过babel手撸超简化版webpack
通过babel手撸超简化版webpack本文讲述如何通过babel对文件及其依赖进行解析编译打包，示例代码参见babeltry目录结构src：用于测试的打包项目dist：用于存放打包生成的文件，test.html用于测试生成文件效果babeltry.config.js：配置文件index.js：打包工具入口lib：打包工具的依赖方法打包效果源文件src/index.jsimport { greeting } from "./greeting.js";document.writ
2021-03-14 19:25:56
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人