- 博客(60)
- 收藏
- 关注
RSS订阅原创 深入了解Vue 2响应式原理，并手写一个简单的Vue
1. Vue 2的响应式原理Vue.js 一个核心思想是数据驱动。所谓数据驱动是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。vue.js里面只需要改变数据，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种自然的映射。vue.js还会对View操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。
2022-04-13 20:31:04
2348
原创 JavaScript 原型与原型链
在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的，但是现在浏览器中都实现了 __proto__ 属性来访问这个属性，但是最好不要使用这个属性，因为它不是规范中规定的。ES5 中
2022-04-07 21:04:29
848
原创 http协议（四）Set-Cookie
响应首部 Set-Cookie 被用来由服务器端向客户端发送 cookie。1. 指令<cookie-name>=<cookie-value>一个 cookie 开始于一个名称/值对：<cookie-name> 可以是除了控制字符 (CTLs)、空格 (spaces) 或制表符 (tab)之外的任何 US-ASCII 字符。同时不能包含以下分隔字符： ( ) < > @ , ; : \ " / [ ] ? = { }.<cookie-v
2022-03-22 16:56:02
5907
原创 http协议（三）缓存头Cache-Control和缓存验证ETag、Last-Modified
Cache-Control 通用消息头字段，被用于在http请求和响应中，通过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不一定被包含在响应中。Cache-Control指令包含了多个指令，分别具有不同的用途，比如设置缓存权限和缓存时间。指令格式具有以下有效规则：不区分大小写，但建议使用小写。多个指令以逗号分隔。具有可选参数，可以用令牌或者带引号的字符串语法。1. 指令1.1 可缓存性public表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等
2022-03-22 15:03:41
5830
1
原创 http协议（二）CORS跨域限制以及预请求验证
1. Request.modeRequest 接口的 mode 只读属性包含请求的模式（例如：cors 、 no-cors 、 cors-with-forced-preflight 、 same-origin 或 navigate 。）这用于确定跨域请求是否能得到有效的响应，以及响应的哪些属性是可读的。属性值作用same-origin如果使用此模式向另外一个源发送请求，显而易见，结果会是一个错误。你可以设置该模式以确保请求总是向当前的源发起的。no-cors保证请求对应的
2022-03-18 16:18:40
3627
原创 http协议（一）CORS跨域请求的限制与解决
1. 什么是跨域？要了解什么是跨域，首先需要知道什么是同源策略。同源策略是由Netscape公司提出的一个注明的安全策略，所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面执行一个脚本时会检查访问的资源是否同源，如果非同源，那么在请求数据时，浏览器就会在控制台中抱一个异常，提示拒绝访问。同源策略一般又分为两种：DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的；XmlHttpReq
2022-03-17 20:53:04
2902
原创 传输层协议（一）——TCP和UDP
1. TCP和UDP的特点及应用TCP提供了面向连接的可靠的字节流服务，而UDP提供了不连接不可靠的数据报服务。UDP主要用在实时性要求高以及对质量相对较弱的地方，如流媒体；TCP既然是面向连接的，那么运行环境必然要求其保证可靠性，具有不可丢包、有良好的拥塞控制机制，如http ftp telnet。TCP容易阻塞；UDP容易丢包。TCP是保证质量不保证速度，UDP保证速度但不保证质量。TCP耗系统资源多，UDP耗系统资源少。2. TCP头部和UDP头部2.1 TCP头部
2022-03-17 16:16:50
4368
原创 Vue进阶（四）自定义指令，并使用自定义指令实现防抖节流
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。注意：这里官方对自定义指令有明确的说明，所以我们应该尽量去遵守，而不应该盲目的滥用自定义指令去完成一些任务1. 指令Vue为我们添加了很多内置指令，我们可以直接使用，例如v-on,v-bind,v-model，形如v-xx。2. 自定义指令假设我们现在需要在
2022-03-16 10:00:12
3468
2
原创 Vue进阶（三）插槽slot，并使用slot开发高级分页组件
如果对组件不太了解，可以先阅读笔者的这两篇文章，在对组件有了一定的了解之后，在查看本篇文章：vue进阶（一），深入了解组件，自定义组件Vue进阶（二）设计高级组件——自定义通知注意：本篇文章的重点是使用slot开发一个分页组件，如果希望详细了解Vue中slot的用法，可以查看官网文档，同时，如果您在阅读本文中发现错误或者使用不当的地方，还请您指出修正！1. 什么是插槽Vue实现了一套内容分发的API，而<slot>元素就是承载分发内容的出口。使用<slot>，我们可以这样
2022-03-07 22:06:25
2485
原创 Slam基础 三维空间运动
阅读笔者的这一篇文章需要读者具有一定的Vue组件知识基础，如果本篇文章存在设计不合理或者知识错误的情况，还恳请指出修正。1. 期望：当我们需要向客户端提示一些信息时，我们希望这个提示能在页面的右下角显出，如果同时存在多个通知的时候，这些通知会自动向上叠，并且每个通知可以在一定时间后自动消失。为了让这个通知组件可以在任意界面都能向用户提示一些内容，并且同时可以存在多个通知，那么，这个组件就不应该以标签的形式固定在某一个页面中（当然，如果你实在想这样做，也不是不能做到）。如果有用过jquery的经验，我
2022-03-07 11:31:19
875
原创 Vue进阶（二）设计高级组件——自定义通知
这篇文章主要是为了记录笔者长期以来对于 $on 和 $emit 存在的一个误区。看过一些博客上面将 $on 和 $emit 的使用称之为父组件监听子组件。当子组件对用户的行为做出响应时，可以向父组件 $emit 一个事件，当父组件监听到该事件时，父组件调用对应的方法来处理。比如存在一个comp组件，它的任务是this.$emit('test')。<template> <div>this is a son comp</div></template>
2022-03-05 14:19:53
1200
原创 Vue项目使用SSR服务器渲染
注意：这是笔者用于记录自己学习SSR的一篇文章，用于梳理将一个项目进行服务器渲染的过程，本文仅是读者根据demo得出的理解，如果您想通过本文来学习如何部署ssr，笔者建议您查阅其他更权威的资料进行学习；当然，如果您发现了本文中有任何描述不恰当的地方，还恳请您指出更正。...
2022-03-04 22:40:33
5283
5
原创 Vuex详解（二） 进阶——Vuex的模块化使用
随着项目越来越复杂，我们可能向store中添加的状态越来越多，这不便于我们对数据的管理，同时，既然vue是模块化开发，那么我们能否将Vuex中的状态也进行模块化管理呢？Vuex——ModuleVuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：const moduleA = { state: () => ({ ... }), mutations: { .
2022-03-02 17:04:16
1841
原创 Vuex详解（一） Vuex的使用详解
Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens newwindow))”而存在。这也意味着，每个应用将仅仅包含一个 store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
2022-03-02 13:25:15
674
原创 Vue Router详解，Vue Router钩子函数详解
想必来查看笔者的这篇Vue Router文章的人，应该了解什么是Vue Router，至少知道其的作用是路由映射，所以笔者在这里不再赘述。假设我们现在有一些简单的vue组件，MyHeader.vue:<template> <div class="container"> this is header of each page </div></template><script>export default { name
2022-03-01 09:50:06
1591
原创 vue 生命周期
每个Vue实例都会在创建时经历一系列的初始化过程——例如，需要设置数据监听，编译模板，将实例挂载到DOM上并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。从...
2022-02-26 19:55:38
681
原创 JavaScript 正则表达式
什么是正则表达式？正则表达式是描述字符模式的对象,正则表达式是由一个字符序列形成的搜索模式。正则表达式的语法：/正则表达式主体/修饰符(可选)例如：const exp = /abc/i/abc/i就是一个正则表达式，其中abc是一个正则表达式主体（用于正则匹配），i是一个修饰符，表示进行正则匹配是不区分大小写。这个表达式的意思匹配包含了abc的字符串，其中abc不区分大小写。const exp = /abc/iconsole.log(exp.test('abc')) //字符串中包含ab
2022-02-26 16:22:35
810
原创 webpack系统学习（十六）手写一个简单的打包工具
这篇文章分析了如何自己手写一个简单的打包工具。我们先查看当前项目结构：word.js://word.jsexport const word = 'hello'message.js:import {word} from "./word.js";const message = `say ${word}`export default messageindex.js://index.jsimport message from "./message.js";console.log(m
2022-02-24 22:09:26
515
原创 webpack系统学习（十五）如何编写一个plugin
Loader帮助我们去处理一类文件，Plugin又是什么呢？如果对webpack的基础知识不太熟悉，可以查看笔者的另一篇博客。plugin： 在我们打包的过程中，到了某一个特定节点，该插件生效。比如说，我们使用HtmlWebpackPlugin，这个插件会在打包完成之后，简单的创建html文件，可用于服务器的访问。webpack的plugin 采用的是发布订阅模式，在这个模式下，代码的执行是通过事件来驱动的。构建一个简单的plugin我们想在打包完成之后再向dist目录增加一个文件，里面包含了版权
2022-02-23 15:45:33
662
原创 webpack系统学习（十四）如何编写一个loader
创建一个简单的loader所谓 loader 只是一个导出为函数的 JavaScript 模块。loader runner 会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。函数的 this 上下文将由 webpack 填充。假设我们现在有一个index.js://index.jsconsole.log("hello world")在不对js文件进行额外处理时对其进行打包，得到/dist/main.js//main.js.../***
2022-02-23 11:49:02
1702
1
原创 webpack系统学习（十三）webpack性能优化
当我们在打包一个大型项目的时候，一次打包可能会耗费很多时间，所以我们需要使用一些方法来提升webpack的打包效率。1. 跟上技术的迭代即时更新webpack，node、npm、yarn，工具的每一次更新，都会对其进行性能优化，webpack运行在node上，node和webpack的性能提升都会减少打包时间，而npm和yarn可以对模块的引用时更快地分析包依赖，也能在一定程度上提升打包速度。2. 在尽可能少的模块上应用loader{ test: /\.m?js$/,
2022-02-22 18:48:29
824
原创 webpack系统学习（十二）DevServer实现请求转发
devServer: { contentBase: path.resolve(__dirname,'dist'), open: true, port: 8090, hot:true, proxy: { '/react/api': { target: 'https://www.tangziyao.site', //secure: false, pathRewrite: { 'header..
2022-02-22 14:55:07
794
原创 webpack系统学习（十一）Typescript的打包配置
存在这样的.tsx文件：//index.tsxclass Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; return _.join(["Hello",this.greeting],' '); }}let greeter = new Gree
2022-02-17 16:22:34
695
原创 webpack系统学习（十）打包一个Library
假设我们现在希望建立一个函数库，其具有math和string两个模块，每个模块包含一些对应的处理函数。math.js:export function add (a, b){ return a + b}export function minus (a, b){ return a - b}string.js:export function join(a, b){ return a + ' ' + b}index.jsimport * as math from './math
2022-02-17 14:59:01
610
原创 webpack系统学习（九）Shimming 预置依赖，ProvidePlugin
Shimming 预置依赖webpack compiler 能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些 third party(第三方库) 可能会引用一些全局依赖（例如 jQuery 中的 $）。因此这些 library 也可能会创建一些需要导出的全局变量。这些 “broken modules(不符合规范的模块)” 就是 shimming(预置依赖) 发挥作用的地方。Warning我们不推荐使用全局依赖！webpack 背后的整个理念是使前端开发更
2022-02-16 16:53:03
516
原创 webpack系统学习（八）contenthash 如何避免浏览器使用缓存文件
浏览器缓存（Catching）可以提升用户的浏览体验，降低服务器压力，但是缓存是不是百利而无一害的呢？可以思考这样的场景：用户首次访问下载了index.js到缓存中，在用户第二次访问同一页面之前，我们修改了index.js的源文件并且重新打包上线了index.js，如果此时用户的缓存中还存在之前留下的index.js，那么用户就会加载缓存中的index.js，而不是最新的修改后的index.js文件，如何来解决这个问题呢？修改webpack.prod.js：... output: { f
2022-02-16 15:38:18
405
原创 webpack系统学习（七）CSS的代码分割和代码压缩
不了解代码分割的朋友可以先阅读笔者的这一篇文章，根据这篇文章我们知道，我们可以使用SplitChunksPlugin来对js代码进行代码分割，如果需要对网页的css文件进行代码分割，应该怎么做呢？这时候我们可以使用MiniCssExtractPlugin，在webpack官网的相关说明中是这样描述MiniCssExtractPlugin：这个插件将CSS提取成单独的文件。它为每个包含CSS的JS文件创建一个CSS文件。它支持按需加载CSS和sourcemap。安装：npm install --save
2022-02-16 15:15:19
489
1
原创 webpack系统学习（六）打包分析，Preload和Prefetch
1. 打包分析我们需要在使用webpack的时候添加一些配置：webpack --profile --json > stats.json这个配置会在打包完成之后生成一个stats.json文件，这个文件中就包含了一些打包过程和打包结果的很多信息，我们可以借助下面的几个网站来上传该文件并分析：http://webpack.github.com/analyse/；http://alexkuz.github.io/webpack-chart/；这里我推荐使用Webpack Bundle Ana
2022-02-14 22:16:46
3170
原创 webpack系统学习（五）Lazy Loading 懒加载
什么是懒加载？当我们使用import异步导入一个模块的时候，其实就是懒加载，只有当我们执行到该import语句的时候，才会加载该模块。//index.jsfunction getComponent(){ return import(/* webpackChunkName:"lodash" */'lodash').then(({default: _ })=>{ var ele = document.createElement('div') ele.innerHTML = _.j
2022-02-14 19:59:28
627
原创 webpack系统学习（五）webpack和Code Solitting 代码分割
观察下面的代码：//index.jsimport _ from 'lodash';//大小为1mbconsole.log(_.join(['a', 'b', 'c'],'-'))//这一行的大小为1mb我们假设lodash包的大小为2mb，index.js中的console.log(_.join(['a', 'b', 'c'],'-')) 也需要1mb的大小。这样打包之后，我们发现：打包后生成的main.js文件较大（2mb左右），加载时间会很长；一般情况下，我们不会更改lodash包中的
2022-02-14 17:03:59
557
原创 webpack系统学习（四）不同开发环境的打包配置
为什么需要多种开发环境的打包配置呢？在项目的不同开发阶段，我们需要的打包文件也具有不同的要求。当我们在development模式（开发者模式）时，打包的文件可以具有全面的source-map以便于我们快速定位bug，并且不需要进行大麻压缩，我们需要的是尽可能多的代码信息；而在production模式，source-map就不是十分重要，但是代码文件应该尽量的小……所以，我们需要多个打包配置。webpack.dev.js//CommonJs的写法const path = require('path
2022-02-13 20:48:11
407
原创 webpack系统学习（三）Tree Shaking 概念详解
当项目达到一定体积的时候，将代码分成模块可以更加易于我们的管理，但是，当这样做时，我们可能引入了并不需要的代码，而Tree Shaking 就是一种通过消除文件中纹使用的代码来优化体积。注意：Tree Shaking 只支持对静态引入的模块进行体积优化。一般观察下面的代码：//math.jsexport const add = (a, b) => { console.log( a + b )}export const minus = (a, b) => { console
2022-02-13 20:08:58
500
原创 webpack系统学习（二） webpack基础配置项
webpack具有相当多的配置项，常见且基础的配置项如entry，output，mode，plugins等等，这篇博客是笔者关于这些基础配置的知识整理。1. entry起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。module.exports = { // entry: './src/js/hello.js', entry: { main: './src/js/hello.js' }}2. outputoutput
2022-02-12 17:23:38
2323
原创 webpack系统学习（一）webpack初探
1. webpack究竟是什么？在了解webpack是什么之前，我们首先需要明白没有webpack的时候，一个前端项目出现了什么难题需要解决。Ⅰ. 为什么需要webpack？要理解webpack是什么，解决了什么问题，我们需要明白的是，浏览器在解析js的时候，它有一个盲点就是，没有做到js的模块化。比如一个文件要想给另外一个文件暴露出去一部分数据或者一个变量，那只能将它定义在全局的作用域下，没有其他的办法。比如b依赖于c，a依赖于b：//index.html<body> &l
2022-02-11 15:09:19
424
原创 JavaScript call，apply，bind详解及实现
1.前言call，apply，bind这三个方法都是用来改变函数的this指向，如果有对this不熟悉的朋友，可以先看看笔者的这篇博客。call & applycall()语法：function.call(thisArg, arg1, arg2, ...)thisArg可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值
2022-01-27 10:48:16
1040
原创 JavaScript new运算符
1. 初识newnew运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。function Car(make, model, year) { this.make = make; this.model = model; this.year = year;}const car1 = new Car('Eagle', 'Talon TSi', 1993);console.log(car1.make);// "Eagle"2. new的实现new关键字会在这段代
2022-01-26 20:13:33
1231
原创 JavaScript 作用域与执行上下文
JavaScript的作用域（scope）和执行上下文（execution context）总是纠缠不清，以至于网上出现了大量文章来区分这两个概念。MDN中是这样描述scope的：ScopeThe current context of execution. The context in which values and expressions are “visible” or can be referenced. If a variable or other expression is not “i
2022-01-26 17:01:01
1022
原创 JavaScript不同情况下this的指向
1. this是什么？如果学过其他语言，那么可能会想到this是一个指向自己的指针，用于访问自己。但是，JavaScript函数中的this关键字和以上说法略有不同。在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。 window.name = 'Niall' let person = { name : 'Horan', sayName: function (){
2022-01-26 11:59:29
646
原创 JavaScript async / await详解
本文是笔者阅读MDN：async和await:让异步编程更简单和阮一峰老师的博客之后的学习笔记，如有疑问，欢迎讨论async functions 和 await 关键字是最近添加到JavaScript语言里面的。它们是ECMAScript 2017 JavaScript版的一部分（参见ECMAScript Next support in Mozilla）。简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。如.
2022-01-24 19:06:52
1273
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人