- 博客(56)
- 收藏
- 关注
RSS订阅原创 NOde之通信
通信一、网络通信基本原理二、网络通信方式一、网络通信基本原理通信必要条件主机之间需要有传输介质主机上必须有网卡设备主机之间需要协商网络速率二、网络通信方式常见通讯方式交换机通讯路由器通讯如何建立多台主机互连如何定位局域网中的其他主机通过Mac地址来唯一标识一台主机...
2021-08-16 17:32:41
619
原创 Node核心模块
核心模块一、核心模块-path-1二、核心模块-path-2三、全部变量之Buffer一、核心模块-path-1内置模块，require之后直接使用用于处理文件/目录的路径掌握path模块中的常见APIbasename()获取路径中基础名称dirname()获取路径中目录名称extname()获取路径中扩展名称isAbsolute()获取路径是否为绝对路径join()拼接多个路径片段resolve()返回绝对路径parse()解析路径format()序列化路径normalize(
2021-08-08 14:30:53
754
原创 node基础
一、概述1、可以做什么轻量级、高性能的Web服务前后端JavaScript同构开发便捷高效的前端工程化2、Nodejs的架构和运行过程3、Nodejs异步IO和事件驱动4、Nodejs单线程5、Nodejs实现API服务6、Nodejs核心模块及API使用二、Nodejs架构Native Modules当前层内容由JS实现提供应用程序可直接调用库，例如fs、path、http等JS语言无法直接操作底层硬件设置Builtin module “胶水层”底层V8:执行js代码
2021-07-13 23:24:31
205
2
原创 Vite 实现原理
Vite 实现原理注：https://www.yuque.com/u1694620/danl0o/eg2xnx了解 Vite 的核心实现原理Vite 概念• Vite 是一个面向现代浏览器的一个 更轻、更快的 Web 应用开发工具• 它基于 ECMAScript 标准原生模块系统（ES Module）实现• 它的出现是为了解决 webpack 在开发阶段，使用 webpack-dev-server 冷启动时间过长、webpack HMR 热更新响应慢的问题• 使用 Vite 创建的项目，就是一
2021-05-23 10:59:39
5778
3
原创 Vue.js 3.0响应式系统原理
一、响应式系统原理 - 介绍Proxy对象实现属性监听默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和 length属性可以作为单独的模块使用多层属性嵌套，在访问属性过程中处理下一级属性核心方法reactive/ref/toRefs/computedeffect（watch和watchEffect是vue的runtime.core中实现的。watch函数内部其实使用了就是这个effect底层函数）track(vue3中收集依赖的函数)trigger（vue3中触发更
2021-05-23 10:59:11
214
1
原创 Vue3.0介绍
参考：https://blog.youkuaiyun.com/qq_30033213一、Vue3.0 源码组织方式源码组织方式的变化源码全部用TS重写。使用monorepo的方式来组织项目的结构，把独立的功能模块都提取到不同的包中Composition API虽然代码重写，但是90%以上的代码兼容2.x。根据社区的反馈增加了组合API,用来解决vue2.x在开发大型项目时遇到超大组件使用options API不好拆分和重用的问题性能提升用proxy也就是代理对象重写了响应式的代码，并且对编译器
2021-05-23 10:58:59
997
原创 Composition API
一、Composition APIComposition API仅仅是vue3中新增的API,我们仍然可以使用options API参考：https://v3.cn.vuejs.org/guide/composition-api-introduction.htmlsetup 是composition API的入口setup需要返回一个对象，返回的对象可以使用在模板、methods、computed以及生命周期的钩子函数中setup是在props被解析完毕，但是在组件实例被创建之前执行的，所以set
2021-05-02 22:49:46
642
原创 封装Vue.js组件库
文章目录一、介绍二、处理组件边界问题二、attrs-listeners三、快速原型开发四、快速原型开发-ElementUI五、组件开发-步骤条组件六、组件开发-表单组件七、Monorepo一、介绍处理组件的边界情况：关于组件的知识点vue-cli 中提供的快速原型开发：作用是方便我们进行组件开发，并能单独运行单文件组件组件开发：步骤条、表单组件开发组件的最佳方式 Storybook：隔离开发组件，方便管理组件和组件测试Monorepo：项目的一种组织方式，有利于管理组件库的项目结构Plop：
2021-04-25 15:25:53
647
原创 静态站点生成
一、Gridsome 是什么一个免费、开源、基于Vue.js技术栈的静态网站生成器GitHub 仓库：https://github.com/gridsome/gridsome官网：https://gridsome.org/什么是静态网站生成器什么是静态网站生成器：静态网站生成器是使用一系列配置、模板、以及数据，生成静态 HTML 文件以及相关资源的工具这个功能也叫预渲染生成的网站不需要类似 PHP 这样的服务器只需要放到支持静态资源的 Web Server 或 CND 上即可静态网站有什
2021-04-18 10:24:39
1414
原创 搭建自己的SSR
一、渲染一个Vue实例mkdir vue-ssrcd vue-ssrnpm init -ynpm i vue vue-server-renderer新建server.jsconst Vue = require('vue')const app = new Vue({ template:` `})Vue SSR 介绍是什么官方文档：https://ssr.vuejs.org/Vue SSR（Vue.js Server-Side Rendering） 是 Vue.js 官方
2021-04-12 23:26:54
2977
原创 NuxtJS综合案例
1、介绍案例名称：RealWorld一个开源的学习项目，目的就是帮助开发者快速学习新技能GitHub仓库：https://github.com/gothinkster/realworld在线示例：https://demo.realworld.io/#/接口文档：https://github.com/gothinkster/realworld/tree/master/api页面模板：https://github.com/gothinkster/realworld-starter-kit/blob
2021-04-07 23:16:14
1123
1
原创 nuxtjs基础
1、Nuxt.js 介绍Nuxt.js是什么官网：https://zh.nuxtjs.org/GitHub 仓库：https://github.com/nuxt/nuxt.jsNuxt.js是一个基于 Vue.js生态 的第三方开源服务端渲染应用框架，它可以帮我们轻松的使用Vue.js技术栈实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有Node.js 项目中
2021-03-27 21:37:59
213
原创 Vuex状态管理
一、组件内状态管理流程组件内的状态管理流程Vue 最核心的两个功能：数据驱动和组件化。组件化开发给我们带来了：更快的开发效率、更好的可维护性每个组件都有自己的状态、视图和行为等组成部分。newVue({ // state data () { return {count: 0 } }, // view template: `<div>{{ count }}</div>`, // actions methods: { increment () {
2021-03-24 19:40:42
166
原创 Vue 源码剖析-模板编译和组件化
1、模板编译模板编译的主要目的是将模板 (template) 转换为渲染函数 (render)<div> <h1@click="handler">title</h1> <p>some content</p></div>渲染函数 renderrender (h) { return h('div', [ h('h1', { on: { click: this.handler} }, 'title'), h(
2021-03-13 23:46:59
190
2
原创 Vue.js 源码剖析-虚拟 DOM
什么是虚拟 DOM虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 DOM 的本质就是 JavaScript 对 象，使用 JavaScript 对象来描述 DOM 的结构。应用的各种状态变化首先作用于虚拟 DOM，最终映射 到 DOM。Vue.js 中的虚拟 DOM 借鉴了 Snabbdom，并添加了一些 Vue.js 中的特性，例如:指令和组 件机制。Vue 1.x 中细粒度监测数据的变化，每一个属性对应一个 watcher，开销太大Vue 2.x 中每
2021-03-10 22:36:51
173
原创 Vue.js源码剖析-响应式原理
文章目录一、源码目录结构二、准备工作-调试三、准备工作-Vue的不同构建版本四、寻找入口文件五、从入口开始六、Vue初始化1、两个问题2、静态成员3、实例成员4、实例成员-init5、实例成员-initState6、调试七、首次渲染过程到目前为止 Vue 3.0 的正式版还没有发布新版本发布后，现有项目不会升级到 3.0，2.x 还有很长的一段过渡期3.0 项目地址：https://github.com/vuejs/vue-next一、源码目录结构src├─compiler 编译相关├─co
2021-03-09 20:42:59
231
原创 Virtual DOM 的实现原理
Virtual DOM 的实现原理1、什么是虚拟DOM2、为什么使用虚拟DOM3、虚拟DOM的作用和虚拟DOM库4、Snabbdom 基本使用1、创建项目2、导入 Snabbdom3、案例5、Snabbdom中的模块1、模块的作用2、官方提供的模块3、模块的使用步骤6、Snabbdom 源码解析1、h函数2、常用快捷键3、VNode4、patch整体过程分析5、init6、patch7、调试 patch 函数8、createElm9、调试createElm10、removeVnodes和addVnodes1
2021-03-06 12:29:23
227
1
原创 Vue.js响应式原理
Vue.js响应式原理1、数据驱动数据响应式、双向绑定、数据驱动数据响应式：a.数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率双向绑定：a. 数据改变，视图改变；视图改变，数据也随之改变b. 我们可以使用 v-model 在表单元素上创建双向数据绑定数据驱动是 Vue 最独特的特性之一：a. 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图2、数据响应式的核心原理-Vue2Vue 2.xVue
2021-03-01 23:24:44
338
原创 Vue-Router原理实现
一、Vue Router 基础回顾1、使用vuecli创建项目时选择上Router会自动安装vue-router插件并且生成vue-router的基础代码结构router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Index from '../views/Index.vue'// 1. 注册路由插件 // 参数如果是函数Vue.use直接调用这个函数来注册组件// 参数如果是对象Vue.use会
2021-02-28 01:00:41
277
原创 Vue.js基础
一、vue基础结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>render</title></head><body> <d
2021-02-23 23:38:40
135
原创 Webpack打包简要说明
// index.jslet name = require('./login.js')console.log('index.js内容执行了')console.log(name)// login.jsmodule.exports = '学习教育'// 打包代码(function (modules) { // webpackBootstrap // The module cache // 定义对象用于缓存已加载过的模块 var installedModules = {};
2021-02-09 10:45:43
161
原创 规范化标准
规范化标准1、规范化介绍1、为什么要有规范标准2、哪里需要规范标准3、实施规范化的方法2、EsLin介绍3、EsLin安装4、EsLin 快速上手5、EsLin 配置文件解析1、规范化介绍1、为什么要有规范标准开发需要多人协同、喜好与编码习惯不一致增加项目维护成本、项目/团队需要统一标准2、哪里需要规范标准代码、文档、提交日志开发过程中人为编写的内容代码标准规范最为重要3、实施规范化的方法编码前人为的标准约定通过工具实现Lint常见的规范化实现方式ESLint工具使用定制ESLin
2021-02-03 11:21:50
359
原创 Rollup&Parcel
Rollup1、概述2、快速上手3、配置文件4、使用插件5、加载npm模块6、加载CommonJS模块7、代码拆分8、多入口打包8、Rollup/Webpack选用原则9、Parcel1、概述Rollup也是一款ES Modules的打包器，也可以将项目中散落的细角模块打包成整块的代码，从而使这些划分的模块可以更好地运行在浏览器环境或者是NodeJS环境。Rollup与Webpack作业类似。Rollup更为小巧，仅仅是一款ESM打包器，没有其它额外的功能。Rollup中并不支持类似HMR这种高级特
2021-01-31 23:01:13
215
原创 Webpack
WebPack打包1、模块打包工具-由来2、模块打包工具-概要3、webpack-快速上手1、模块打包工具-由来模块化解决了代码组织问题，但是也会带来一些问题1、ES Modules存在环境兼容问题2、模块文件过多，网络请求频繁3、所有的前端资源都需要模块化开发阶段ES6 —》编译—》生产阶段ES5S开发阶段ES6 —》打包—》生产阶段Bundle.js开发阶段ES6 —》打包—》生产阶段Bundle.js、.css、.png新特性代码编译模块化JavaScript打包支持不同类型的资
2021-01-30 23:32:10
1239
原创 模块化开发
模块化开发1、模块化开发概述1、模块化开发概述当下最重要的前端开发范式之一前端日益复杂，项目代码需要管理而模块化是一种最主流的代码组织方式。将复杂代码按照功能的不同划分成不同模块单独维护，提高开发效率，降低维护成本。模块化只是思想内容概要：1、模块化演变过程2、模块化规范3、常用的模块化打包工具4、基于模块化工具构建现代Web应用5、打包工具的优化技巧...
2021-01-24 23:33:40
510
原创 Gulp
Gulp1、基本使用2、组合任务3、Gulp的异步任务4、Gulp构建过程核心工作原理5、Gulp文件操作API6、Gulp案例1、样式编译2、脚本编译3、页面模板编译4、图片和字体文件转换5、其它文件及文件清除6、自动化加载插件7、热更新开发服务器 自动加载全部的pluginconst
2021-01-20 21:10:30
309
原创 fis小用
yarn global add fis3fis3 release 默认的构建任务 自动将项目所有需要构建的文件构建到i个临时目录（user/./data/local/fis-tmp）fis3 release -d output 指定到根目录下的文件夹。但没有做转换。只是把资源引入相对路径转成绝对路径，方便资源定位fis-conf.js// $0当前文件原始的目录结构fis.match('*.{js,scss,png}', { release: '/assets/$0'})编译与压缩ya
2021-01-19 16:43:20
95
原创 工程化概述
工程化概述一、工程化的定义与主要解决的问题二、工程化表现三、工程化≠某个工具四、工程化与Node.js一、工程化的定义与主要解决的问题定义：遵循一定的标准与规范，通过工具提高效率降低成本的一种手段。面临的问题：1、使用ES6+新特性，有兼容问题2、使用Less、Sass、PostCSS增强CSS的编程性，运行环境不能直接支持3、模块化或者组件化方式提高项目的可维护性，运行环境不能直接支持4、部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器5、多人协作开发，无法硬性统一
2021-01-18 19:50:53
2991
原创 Grunt简介
Grunt1、Grunt的基本使用2、Grunt标记任务失败3、Grunt的配置方法4、Grunt多目标任务5、Grunt插件的使用6、Grunt插件及总结1、Grunt的基本使用1、yarn init2、yarn add grunt3、code gruntfile.js 根目录下添加此文件// Grunt 的入口文件// 用于定义一些需要 Grunt 自动执行的任务// 需要导出一个函数// 此函数接收一个 grunt 的对象类型的形参// grunt 对象中提供一些创建任务时会用到的
2021-01-17 16:40:44
789
2
原创 自动化构建初体验
自动化构建1、自动化构建简介2、自动化构建初体验3、常用的自动化构建工具1、自动化构建简介重复工作本应自动化。自动化：通过机器代替手工完成一些工作。构建：理解成转换。源代码----自动化构建----生产代码。这个抓换的过程称作自动化构建工作流。作用：脱离运行环境兼容带来的问题，开发阶段使用提高效率的语法、规范和标准。如：ECMAScript Next提高编码效率和质量、Sass增强css的可编程性、模板引擎抽象页面中重复的html。这些用法大都不被浏览器直接支持。自动化构建工具 构建转换那些不被支持的
2021-01-17 11:49:05
225
原创 脚手架工具Yeoman
脚手架工具一、概要二、常用的脚手架工具三、Yeoman简介四、Yeoman基础使用一、概要脚手架的本质作用：创建项目基础结构、提供项目规范和约定。相同的组织结构、开发范式、模块依赖、工具配置、基础代码。可以通过脚手架快速搭建特定类型的项目骨架，基于这个骨架进行后续开发工作。二、常用的脚手架工具特定项目类型的脚手架工具：React项目：create-react-appVue.js项目： vue-cliAngular项目：angular-cli根据信息创建对应的项目基础结构通用性脚手架工具：
2021-01-15 23:54:39
322
原创 JS性能优化
内存为什么需要管理内存泄漏内存管理介绍内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请-使用-释放js中内存管理 ES中没有提供相应空间管理API申请内存空间使用内存空间释放内存空间// 申请let obj = {}// 使用obj.name=‘lg’// 释放obj=nullJS中的垃圾回收JS中内存管理是自动的对象不再被引用时时垃圾对象不能从根上访问到时是垃圾知道
2021-01-12 23:19:07
175
原创 TypeScript
一、1、任何一种JS运行环境都支持：Web Node.js reactNative electric桌面应用2、功能更为强大，生态也更健全、更完善3、Angular/Vue.js 3.04、前端领域中的第二语言缺点一：语言本身多了很多概念，如接口 泛型 枚举等5、渐进式缺点二：项目初期，TS会增加一些成本二、快速上手1、yarn init --yes2、yarn add typescript --dev node_modules .bin目录下 多出一个tsc命令3、完全可以按照JS的
2021-01-10 23:05:56
178
原创 TS前述
解决JS类型系统的问题，提高代码的可靠程度1、类型系统：类型安全：强类型、弱类型类型检查：静态类型、动态类型强类型：语言语法层面限制函数的实参类型必须与形参类型相同。强类型语言中不允许任意的隐士类型转换。如果传入不同类型的值，编译时就会报出错误。而不是等到运行阶段再通过逻辑判断抛出错误。JS中所有抛出的错误，都是在代码层面，运行时通过逻辑判断，手动抛出的 。Java C# Ruby Python弱类型：不会限制，语法上不会有问题，运行上可能会有问题，允许任意的数据隐式类型转换 C C++ PHP
2021-01-10 12:36:09
181
1
原创 ES新特性
ES2015新特性简介1、语言与平台关系2、JS与ES的关系一、let二、const三、数组的解构四、对象的解构 类似数组解构五、 `` 模板字符串六、 带标签的模板字符串七、字符串扩展方法八、参数默认值九、剩余参数...十、展开数组...十一、箭头函数十二、对象字面量增强十三、对象扩展方法十四、Proxy 代理对象十五、Proxy vs Object.defineProperty(目标对象,单个属性,{get(){},set(value){}})十六、Reflect十七、Promise十八、class类十
2021-01-09 23:39:18
1101
原创 高阶函数
概念1、可以把函数作为参数传递给另一个函数2、可以把函数作为另一个函数的返回结果函数作为参数// forEachfunction forEach (array, fn) {for (let i = 0; i < array.length; i++) {fn(array[i])}}// filterfunction filter (array, fn) {let results = []for (let i = 0; i < array.length; i++) {if
2021-01-05 11:02:29
112
原创 promise概述
*回调函数：*是javascript中所有异步编程方案的根基，由调用者定义， 交给执行者执行的函数*问题：*如果直接使用传统回调方式去完成复杂的异步流程，会产生回调地狱为了避免回调地狱的出现，CommonJS社区提出了Promise的规范，目的是为异步编程提供一种更合理更强大的统一解决方案在ES2015中被标准化，成为语言规范*Promise:*是一个对象，用来表示一个异步任务，可能成功也可能失败，明确结果之后不能再改变Promise–pending–Fulfilled–onFulfill
2021-01-05 11:01:42
151
原创 异步 Generator/Promise/async/await
// enerator 异步方案// 语法 * function * foo(){ console.log('start') yield 'foo' // 可以随时使用yield这个关键词，向外返回一个值}const generator = foo() // 调用时不会立即去执行这个函数,而是得到一个生成器对象generator.next() // 这个函数的函数体这时才会开始执行function * foo(){ console.log('start') yield 'foo
2021-01-05 11:00:06
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人