2021年03月_没有什么时间是比现在合适的_CSDN博客

没有什么时间是比现在合适的

码龄9年

个人简介：欲穷千里目，更上一层楼。

IP 属地：北京市

查看详细资料

个人成就

获得71次点赞
内容获得31次评论
获得91次收藏
代码片获得340次分享

TA的专栏

兴趣领域设置

前端

javascript

创作活动更多

2024 博客之星年度评选报名已开启

博主的专属年度盛宴，一年仅有一次！MAC mini、大疆无人机、华为手表等精美奖品等你来拿！

搜TA的内容

css实现超出部分显示省略号

显示一行，省略号 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;显示两行，省略号text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2

发布博客 2021.03.03 ·

3-4-01-搭建自己的 Server Side Render

搭建自己的 SSRVue 实例的服务端渲染使用 vue-server-renderer 插件完成 vue 实例的服务端渲染使用 express 创建一个 node 服务器fs 模块读取 html 模板const Vue = require('vue')const express = require('express')const fs = require('fs')const renderer = require('vue-server-renderer').createRendere

发布博客 2020.11.24 ·

3-3-07-nuxtjs案例realworld-nuxtjs

realworld-nuxtjs项目地址：https://gitee.com/dingxd9702/realworld-nuxtjs创建项目mkdir realworld-nuxtjsyarn init -yyarn add nuxt配置启动脚本创建pages目录，配置初始页面导入页面模板导入样式资源首先根目录下创建 app.html 定制 Nuxt.js 默认的应用模板，并通过 link 标签将样式资源引入。默认模板：<!DOCTYPE html><html

发布博客 2020.11.24 ·

3-3-06-Nuxt.js 基本介绍

Nuxt.js 介绍Nuxt.js 是一个基于 Vue.js 生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用 Vue.js 技术栈构建同构应用Nuxt.js 的使用方式初始项目已有的 Node.js 服务端项目直接把 Nuxt 当作一个中间件集成到 Node WebServer 中现有的 Vue.js 项目非常熟悉 Nuxt.js至少百分之10 的代码改动Nuxt.js 异步数据——asyncData 方法基本用法它会将 asyncData 返回的数据

发布博客 2020.11.24 ·

3-3-05-服务端渲染概述

服务端渲染概述spa 的优缺点优点：用户体验好，开发效率高，渲染性能好，可维护性好缺点：首屏渲染时间过长，与传统服务端渲染直接获取服务端渲染好的 html 不同，spa 使用 js 在客户端生成 html 来呈现网页内容，用户需要等待客户端 js 解析执行完才能够看到页面，这样就使得首屏加载时间过长影响用户体验。不利于 SEO，当搜索引擎爬取网站 html 文件的时候单页面的 html 是没有内容的，因为他需要通过客户端 js 解析执行完才能够生成完 html 内容，所以目前的主流的搜索引擎堆这

发布博客 2020.11.24 ·

3-3-04-Vuex基本实现

Vuex 基本结构Vuex 是 Vue 的一个插件，需要使用 Vue.use 调用。Vue 的插件是一个函数或者是一个对象包含 install 方法，Vue.use 的作用就是去执行这个函数或者 install 方法给 Vue 实例添加这个插件。所以 Vuex 是一个包含 install 方法的对象。另外，Vuex 还会通过 new Vuex.store 的方式实例一个仓库，所以，Vuex 插件这个对象除了 install 方法之外应该还包含一个 store 构造函数或者类。所以 Vuex 的基本结构

发布博客 2020.11.24 ·

path.resolve() 和 path.join() 的区别

path.resolve()相对于当前路径，将传入的参数解析为一个绝对路径。解析的过程是从右往左，遇到 / 表示跳转到根目录， …/ 表示跳转到上一层目录。前提：执行命令的路径为 D:\platform\testconsole.log(path.resolve('a', 'b', 'c')) // D:\platform\test\a\b\cconsole.log(path.resolve('a', 'b', '/c')) // D:\cconsole.log(path.resolve('a',

发布博客 2020.11.20 ·

3-3-03-Vuex 插件

Vuex 插件在学习购物车案例的时候，需要将购物车的信息存储到本地存储 localStorage 中，这个存储操作需要再 cart.js 的每一个 mutations 中都执行一次，所以如果 mutations 太多，这种方法就显得不是很合理，所以这里可以使用 Vuex 中的插件去实现，这样会显得更加合理一些。Vuex 的插件就是一个函数。这个函数接收一个 store 的参数。在这个函数里面，我们可以定义一个函数，让它在所有的 mutations 执行结束之后再去执行。import Vue f

发布博客 2020.10.26 ·

3-3-02-Vuex

Vuex概念什么是 VuexVuex 是专门为 Vue.js 设计的状态管理库Vuex 采用集中式的方式存储需要共享的状态Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享Vuex 继承到了 devtools 中，提供了 time-traval 时光旅行历史回滚功能。什么情况下使用 Vuex非必要的情况不要使用 Vuex大型的单页应用程序多个视图依赖于同一状态来自不同视图的行为需要变更同一状态核心概念、store每一个 Vuex 应用的核心就是 sto

发布博客 2020.10.26 ·

3-3-01-Vue.js 组件状态管理

Vue.js 组件状态管理Vue 中最核心的两个功能分别是数据驱动和组件化。组件化可以提高开发效率和代码的可维护性。new Vue({ // state data () { return { count: 0 } }, //view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.c

发布博客 2020.10.26 ·

3-2-27-Vue.js 源码阅读-模板编译-过程

Vue 模板编译-过程编译的入口文件是 src/compiler/create-compiler.js 中的 createCompilerCreator 生成的方法 complieToFunctions 。下面就简单介绍一下编译的过程吧。用于生成 render 函数的方法 compileToFunctions 是通过调用方法 createCompileToFunctionFn 生成的。export function createCompileToFunctionFn (compile: Funct

发布博客 2020.10.26 ·

3-2-26-Vue.js 源码阅读-模板编译-概述

Vue 模板编译-概述模板编译的作用？Vue2.0 使用 vnode 描述视图以及各种交互，用户自己编写 vnode 比较复杂模板编译可以让用户只需要编写类似 HTML 的代码 - Vue.js 模板，通过编译器将模板转换为返回 vnode 的 render 函数.vue 文件会被 webpack 在构建的过程中转换为 render 函数运行时编译的前提必须是使用完整版的 Vue，它会再运行时把模板转换成 render 函数。因为多了编译器的代码，使得 Vue 的体积变大，运行的速度也

发布博客 2020.10.26 ·

3-2-25-Vue.js 源码阅读-key

Vue 中的虚拟 DOM - keyhttps://blog.csdn.net/weixin_42695446/article/details/84680213

发布博客 2020.10.26 ·

3-2-24-Vue.js 源码阅读-patch

Vue 中的虚拟 DOM - updateVue 中的 update 最终更新视图调用的方法是通过高阶函数 createPatchFunction 创建的一个 patch 函数，下面分析 patch 函数的执行过程。// 函数柯里化，让一个函数返回一个函数// createPatchFunction({ nodeOps, modules })传入平台相关的两个参数// core 中的 createPatchFunction (backend), const { modules, nodeOps }

发布博客 2020.10.26 ·

3-2-23-Vue.js 源码阅读-update

Vue 中的虚拟 DOM - update通过上面的介绍知道了 vnode 的创建过程，下面分析 update 这个函数是如何将 vnode 转换成虚拟 DOM 的。// updateComponent 的定义// src/core/instance/lifecycle.js/mountComponent()updateComponent = () => { // _render 将模板转换成虚拟DOM // _update 将生成的虚拟 DOM 转换成真实 DOM vm._upd

发布博客 2020.10.26 ·

3-2-22-Vue.js 源码阅读-VNode的创建过程

Vue 中的虚拟 DOM - VNode 的创建过程通过前面 Vue 初始化过程的分析知道，Vue 的虚拟 DOM 的生成实在 lifecycle.js 中的 mountComponent 这个方法中定义的 updateComponent 这个方法完成的。// updateComponent 的定义// src/core/instance/lifecycle.js/mountComponent()updateComponent = () => { // _render 将模板转换成虚拟DO

发布博客 2020.10.26 ·

3-2-21-Vue.js 源码阅读-虚拟 DOM

Vue 中的虚拟 DOM什么是虚拟 DOM？虚拟 DOM 是使用 JavaScript 对象描述真实 DOMVue.js 中的虚拟 DOM 借鉴 Snabbdom, 并添加了 Vue.js 的特性。例如：指令和组件机制。为什么要使用虚拟 DOM ？避免直接操作 DOM，提高开发效率（因为不需要操作 DOM 不需要关心操作 DOM 的浏览器兼容问题）作为中间层可以跨平台（除了在 web 端使用外，还支持服务端渲染）虚拟 DOM 不一定可以提高性能首次渲染的时候会增加开销复杂视

发布博客 2020.10.26 ·

浏览器 event loop 解读

发布博客 2020.08.26 ·

JavaScript 执行上下文解读

概念理解执行上下文其实是函数调用的一个抽象环境，环境中包括了函数内部和外部所关联的所有的引用关系，这些引用关系会在函数执行的时候用到。执行上下文包括三种类型：分为全局执行上下文函数执行上下文eval执行上下文每个执行上下文都有三个属性变量对象作用域链this变量对象函数的形参（如果是在函数作用域中）函数声明变量声明作用域链局部变量 scope，用于存放当前执行上下文的父级执行上下文的引用this默认绑定非严格模式下，默认绑定的 this 指向全局对象， wi

发布博客 2020.08.24 ·

原生 js 实现鼠标拖拽绘制矩形区域

业务开发中遇到一个场景，视频监控播放的时候，需要在视频区域画一个矩形，然后将这个矩形包括的范围放大的功能。所以首先就需要一个可以在 video 标签上绘制矩形的方法。思路：鼠标按下，记录鼠标按下的位置，及绘制矩形的起点。鼠标移动的时候，以起点为原点建立直角坐标系，然后分别讨论移动之后的鼠标点在四个坐标象限的情况。鼠标弹起，清空鼠标移动个鼠标弹起事件，调用矩形绘制方法的回调函数。在鼠标移动的过程中还要考虑到鼠标越界的情况。代码如下：<!DOCTYPE html><html

发布博客 2020.08.21 ·