- 博客(14)
- 收藏
- 关注
RSS订阅原创 服务端渲染(SSR)和Nuxt.js
服务端渲染(SSR)客户端渲染和传统服务端渲染的问题SPA应用有两个非常明显的问题：首屏渲染慢不利于 SEO传统的服务端渲染又存在:应用的前后端部分完全耦合在一起，在前后端协同开发方面会有非常大的阻力；前端没有足够的发挥空间，无法充分利用现在前端生态下的一些更优秀的方案；由于内容都是在服务端动态生成的，所以服务端的压力较大；相比目前流行的 SPA 应用来说，用户体验一般；现代化的服务端渲染(同构)客户端发起请求服务端渲染首屏内容 + 生成客户端 SPA 相关资源
2020-09-09 09:38:46
510
原创 Vuex概念并实现一个简单的Vuex
Vuex什么是VuexVuex 是专门为Vue.js设计的状态管理库Vuex 采用集中式的方式存储需要共享的状态Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享Vuex 集成到了 devtools中，提供了time-travel时光旅行历史回滚功能什么情况下使用Vuex非必要的情况不要使用 Vuex大型的单页应用程序多个视图依赖于同一状态来自不同视图的行为需要变更同一状态Vuex 核心概念：Store：每一个应用仅有一个StoreStore是一个容器包
2020-09-07 14:21:20
137
原创 Virtual DOM
Virtual DOM什么是Virtual DOMVirtual DOM(虚拟DOM),是由普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以叫Virtual DOM为什么使用Virtual DOM手动操作DOM比较麻烦,还需要考虑浏览器兼容性问题,虽然有jquery等库简化DOM操作,但是随着项目的复杂DOM操作复杂提升为了简化DOM的复杂操作于是出现了MVVM框架,MVVM框架解决了视图和状态的同步问题为了简化视图的操作我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化
2020-08-26 15:35:02
197
原创 Vue.js响应式原理,数据双向绑定
响应式原理数据驱动数据响应式数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率双向绑定数据改变,视图改变;视图改变,数据也随之改变我们可以使用v-model在表单元素上创建双向绑定数据数据驱动开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图Vue2 数据响应式核心原理:defineProperty介绍浏览器兼容IE8以上<!DOCTYPE html><html
2020-08-19 18:39:09
543
原创 一个简单的Vue Router 实现原理
Vue Router 实现原理Vue Router使用步骤基础路由接下来我会通过代码的形式为大家展现路由的基本用法创建router对象,router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'// 路由组件import index from '@/views/index'// 组成插件Vue.use(VueRouter)// 路由规则const routes = [ { n
2020-08-18 00:19:58
224
原创 前端规范化标准
规范化标准为什么要有规范化标准?软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准?代码、文档、提交的日志开发过程中认为编写的成果物代码标准化规范最为重要实施规范化的方法编码前人为的标准约定这么做会有很多问题,人为约束不可靠,开发者也容易忘记规则通过工具实现Lint这样才能很好的指定规范化标准,开发才能够高效合理ESLint最为主流的JavaScript Lint
2020-08-15 14:37:23
622
原创 TypeScript的基础用法
类型强类型与弱类型(类型安全)强类型语言层面限制函数的实参类型必须与形参类型相同弱类型语言层面不会限制实参的类型静态类型与动态类型(类型检查)静态类型:一个变量声明时它的类型就是明确的,之后不可更改动态类型:运行阶段才能明确变量类型,变量的类型随时可以改变JavaScript 是弱类型且动态类型强类型的优势错误更早暴露代码更智能,编码更准确重构更牢靠减少不必要的类型判断Typescript基本使用全局安装typescriptnpm instal
2020-08-14 14:38:30
506
原创 前端模块打包工具Webpack
前端模块打包工具打包工具解决的是前端整体的模块化,并不是单指JavaScript模块化核心特性:模块打包器(Module bundler)模块加载器(Loader)代码拆分(Code Splitting)资源模块(Asset Module)在webpack4.0以后支持0配置的方式直接启动打包默认会将src/index.js 打包到 dist/main.jswebpack.config.js是运行在node环境中的js文件下面是一个简单的webpack.config.js文件c
2020-08-13 23:21:27
618
原创 ECMAScript2015-2017
大家常说的ES6相对应的版本是ECMAScript2015， 但是由于该版本影响较大，所以ES6也成为往后的版本的一个统称，以下将着重列出2015-2017版本的变动ECMAScriptECMAScript2015let先来一个例子// 只会输出一轮for (var i = 0; i < 3; i++) { for (var i = 0; i < 3; i++) { console.log(i); } console.log("内层结束i=
2020-08-10 17:39:53
166
原创 模块化之ESM
模块化CommonJS规范一个文件就是一个模块每个模块都有单独的作用域通过module.exports导出成员通过require函数载入模块CommonJS是以同步模式加载模块模块化的最佳实现在Node.js环境中采用CommonJS的规范在浏览器环境采用ES Modules规范那么这里我们主要介绍ES Modules的使用ES Modules 的特性首先介绍一下ES Modules都有哪些特性Tips: 以下ES Module 将简称为ESM通过给script添加
2020-08-09 13:32:10
3995
原创 项目内的脚手架 plop
一般在项目中我们都会使用cli脚手架, 三大框架又各自拥有自己的脚手架,对我们构建一个项目省了很多力气,然而在开发中能少一步操作就少一步这是一名程序员所共有的特质…相信大家在开发期间一定都经历过频繁的创建文件夹,创建文件,而大部分的文件的配置上又存在很多相同的代码(这些代码不能删除)那么我给大家安利一个工具,希望可以帮助到大家快速的构建重复的文件代码1. 首先我们要安装依赖npm install plop2. 根目录下创建一个plopfile文件[外链图片转存失败,源站可能有防盗链机制,建议将
2020-08-03 23:44:34
409
原创 JS性能优化,GC垃圾处理
内存管理介绍内存: 由可独写单元组成,表示一片可操作空间管理: 人为的去操作一片空间的申请、使用和释放内存管理: 开发者主动申请空间、使用空间、释放空间管理流程: 申请→使用→释放JavaScript中内存管理申请内存空间使用内存空间释放内存空间一个简单的js管理流程// 申请let obj = {};// 使用obj.name = "obj";// 释放obj = null;Javascript中的垃圾JavaScript中内存管理是自动的对象不再被引用时是
2020-08-03 23:37:57
1595
原创 什么是函数式编程？总结
什么是函数式编程函数式编程(Functional Programming, FP)，FP 是编程范式之一，我们常听说的编程范式还有面向过程编程、面向对象编程。面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象，通过封装、继承和多态来演示事物事件的联系函数式编程的思维方式：把现实世界的事物和事物之间的联系抽象到程序世界（对运算过程进行抽象）程序的本质：根据输入通过某种运算获得相应的输出，程序开发过程中会涉及很多有输入和输出的函数x -> f(联系、映射) ->
2020-08-03 23:09:11
3429
原创 一步一步的手写Promise
手写promise写在前面(核心逻辑)1. Promise 是一个类, 在执行这个类的时候 需要传递一个执行器进去,执行器会立即执行2. Promise 中有三种状态，成功=>fulfilled，失败=>rejected，等待=>pendingpending --> fulfilledpending --> rejected状态一旦确定就不可更改3. resolve和reject函数是用来更改状态的resolve: fulfilledreject: rejec
2020-08-03 23:07:45
205
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人