![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
大前端课程总结
文章平均质量分 73
学习大前端课程的总结心得
vimin_M
主要学习前端相关技术,掌握html,css,JavaScript的使用;熟悉vue框架,了解git流程;熟悉nodejs,能搭建简易的服务器以及编写对应的api接口;熟悉mysql的基础操作命令
展开
-
vue 构建 SSR 服务端渲染 — 简单的服务端渲染
vue 构建 SSR 服务端渲染 — 简单的服务端渲染简单的服务端渲染基础的服务端渲染需要安装几个比较重要的模块npm i vue vue-server-renderer express在根路径下创建文件 server.js简易的服务端首先需要构建一个简易的服务器,因为是服务端渲染,所以需要在服务端返回 html 代码// server.jsconst server = require('express')()// 当浏览器请求该地址时返回信息server.get('/', (req,原创 2021-06-03 18:05:10 · 155 阅读 · 0 评论 -
nuxt 使用进阶-自定义路由配置
nuxt 使用进阶-自定义路由配置自定义路由配置nuxt.config.js配置文件extendRoutes()自定义路由配置nuxt 本身会根据 pages 目录下的文件结构生成站点路由,这种方式非常的方便,不需要我们自己去配置路由。但是有些情况下需要根据项目的实际情况去定义一个路由,这种情况该怎么办呢?nuxt 也是给我们提供了方法。nuxt.config.js配置文件nuxt 允许我们在 nuxt.config.js 文件中对 项目进行进一步的配置,如路由配置。首先我们需要在 项目根路径下创原创 2021-06-02 15:04:17 · 6937 阅读 · 0 评论 -
Vue 数据响应式原理
Vue 数据响应式原理Vue2 中的数据响应式原理用的是观察者模式,下面用一张流程图来简单说明一下观察者模式的原理。从流程图不难看出,观察者模式的核心就是 Dep 和 Watcher 这两个对象。Dep 负责收集依赖(这里的依赖实际就是 watcher),并在监听到数据变化的时候发送通知。发送通知的过程实际就是调用 watcher.update() 方法。从而更新视图内容。下面我们来详细看看 Vue 具体是如何实现数据响应式的。我将 Vue 实现数据响应式的过程分为三步:创建响应式数据,也就是原创 2021-06-02 11:37:19 · 713 阅读 · 0 评论 -
nuxt的基础使用
nuxt的基础使用安装第一个页面启动项目pages 目录路由导航nuxt-link编程式导航动态路由nuxt 是用于解决 vue 服务端渲染+客户端渲染(同构渲染)的方法,他的内部集成了 vue、vue-router 等模块,可以让开发更加的方便安装新建一个文件夹,并移动到当前目录中初始化项目 npm init -ynuxt 的安装非常的简单,只需要安装 nuxt 模块即可npm i nuxt第一个页面创建好项目和安装模块后,在项目根路径下创建 pages 目录,该目录将存放项目的所有页面原创 2021-05-18 23:43:49 · 3416 阅读 · 3 评论 -
模拟 vue-router hash 模式的基础功能实现
模拟 vue-router hash 模式的基础功能实现模拟 vue-router 的实现实现 vue-router 的核心步骤构建类构建响应式数据属性 currentinstall方法初始化 router-link,router-view 组件match 匹配路由监听 hash 改变模拟 vue-router 的实现以下内容基于 vue-router hash 模式来实现实现 vue-router 的核心步骤构建 vue-router 类构建响应式数据属性 current,动态渲染 dom添原创 2021-04-13 17:37:22 · 283 阅读 · 0 评论 -
发布/订阅模式
发布/订阅模式发布/订阅模式基础原理事件中心subs订阅事件方法 $on发布事件 $emit发布/订阅模式基础原理发布/订阅模式是响应式的解决办法之一,先看下图:可以看到,所有的事件其实是由事件中心管理。我们可以订阅事件中心的任意事件,并且传递事件触发函数(也就是我们订阅的事件被触发后希望执行的函数)。当某个事件被发布的时候,事件中心就会触发该事件所有的事件触发函数,从而实现响应式。不难看出,发布/订阅模式的组成部分主要有:事件中心 eventCenter订阅事件 $on发布事件 $emi原创 2021-04-08 10:25:41 · 798 阅读 · 0 评论 -
webpack—自动编译和自动刷新浏览器
webpack—webpack-dev-server的使用webpack-dev-server安装启动自动打开浏览器优化执行命令在日常的webpack项目的开发中,如果每次测试都需要自己手动的编译和刷新浏览器,那么将会是一个无比痛苦和低开发效率的事情,所以为了提高我们的开发效率,我们希望我们每次编辑代码的时候,webpack可以自动编译并且刷新浏览器,而这里我们就可以使用webpack-dev-server这个插件了。本章只介绍关于webpack-dev-server的自动编译和自动刷新的功能。它还有更原创 2021-03-19 00:36:29 · 567 阅读 · 0 评论 -
webpack源码分析—ESModule规范模块的导入与导出详解
webpack源码分析—ESModule规范模块的导入与导出详解前言ESModule规范模块的导入与导出导入分析r方法—模块类型标记前言上一章分析了CommonJS规范模块的导入与导出,这一章我们来分析ESModule规范模块的导入与导出。ESModule规范模块的导入与导出示例代码// index.jsimport data, { param1, param2 } from './module.js'console.log(data)console.log(param1)console.原创 2021-03-19 00:09:44 · 1329 阅读 · 0 评论 -
webpack源码分析—CommonJS规范模块的导入与导出详解
webpack源码分析—模块的导入与导出详解前言CommonJS规范的导入和导出导入导出总结前言上一章我们说了webpack打包后代码的一个整体分析,这一章我们来详细说一下webpack打包后的代码是如何实现模块的导入和导出的,因为commonjs规范和esmodule规范两者有一定差异,且esmodule的差异更大,所以我们先分析CommonJS规范下的导入导出CommonJS规范的导入和导出示例代码// 主模块入口const data = require('./module.js')con原创 2021-03-16 00:58:26 · 644 阅读 · 0 评论 -
webpack源码分析—打包文件的整体分析
webpack源码分析—打包文件的整体分析打包文件分析模块定义路径匿名函数的形参module & exports__webpack_require__参数总结主逻辑代码__webpack_require__方法图解打包文件分析模块定义路径webpack会将入口文件及其依赖的模块打包成一个文件。从图上面可以看到,webpack打包后的结果,实际是一个立即执行函数,函数接收一个modules的参数。这个参数是模块打包核心之一,我们展开来看一下可以看到,传递的参数是一个对象类型的数据,而它的键原创 2021-03-14 13:03:51 · 320 阅读 · 0 评论 -
规范化标准—ESLint的使用
ESLint介绍使用安装介绍最主流的JavaScript lint工具,检测JS代码质量ESLint很容易统一开发者的编码风格ESLint可以帮助开发者提升编码能力使用安装yarn add eslint --dev原创 2021-03-11 23:39:18 · 388 阅读 · 0 评论 -
webpack—plugin的用法及常用的plugin
webpack—plugin的用法及常用的pluginplugin有什么用处基本用法html-webpack-plugin零配置使用传递参数来定义html文件的内容根据模板生成html文件添加模板参数clean-webpack-pluginplugin有什么用处插件也是webpack最强大的一个功能之一,插件可以实现很多loader无法完成的事情。他的工作其实是在打包构建的每个环节去添加对应生命钩子函数,并执行对应的钩子来对文件进行修改。如果说loader是实现模块化打包,那么plugin就是帮助我们构原创 2021-03-10 23:35:58 · 634 阅读 · 0 评论 -
webpack—常用的loader加载器的使用
常用的loader加载器的使用前言css-loader前言这一章主要讲解了webpack中一个很重要的功能,加载器-loader。上一章讲到,webpack可以打包不同类型的文件,而webpack本身仅支持js文件的模块化打包,所以其他类型的文件需要不同的loader进行转化加载。下面我们将以几种常见的loader来介绍loader的用法css-loader前端应用免不了使用的就是css代码,如果通过常规的link方式,会将所有的样式都进行加载,但实际上,页面使用到的样式是只有一部分的。所以很大程度原创 2021-03-08 20:38:07 · 292 阅读 · 0 评论 -
快速了解webpack,及其基础知识
快速了解webpack,及其基础知识前言什么webpack快速开始webpack安装使用webpack模块配置webpack.config.js前言这是webpack学习总结及心得分栏的第一章,主要讲述一下我对webpack的一些新的认识,和webpack的基础用法,webpack源代码文档什么webpackwebpack是一个模块打包工具,但这里的模块化不仅仅是对js文件而言的,而是整个前端的打包,它可以将根据项目中的依赖将所有类型的文件打包在一起,如css文件,资源文件等。它可以将项目中零散原创 2021-03-06 21:58:23 · 192 阅读 · 0 评论 -
前端性能优化
前端性能优化一慎用全局变量缓存全局变量通过原型对象添加附加方法慎用全局变量全局变量如果不主动释放,会一直占用内存资源,而且全局变量容易重复定义,导致某些变量被覆盖而使程序出错缓存全局变量对于一些无法避免的使用的全局变量,我们应该在局部用变量缓存起来,这其实使减少了变量的作用域查找的层级示例let obj = { name: '前端性能优化', version: 1}function test() { let o = obj // 在局部缓存obj console.log(o.name原创 2021-03-05 00:33:08 · 80 阅读 · 0 评论 -
了解es6模块化,看这篇就够了
了解es6模块化,看这篇就够了ES ModuleES 的基本特性script标签中使用ES自动采用严格模式独立的私有作用域ESM通过CORS去请求外部JS模块ESM的script脚本会延迟执行ES 导入和导出exportexport <成员声明变量>export { 变量 }as关键字default关键字import基础用法导入defualt变量as关键字*关键字import导入的变量的特性接收普通变量和default变量ES Modulees module 是es6近几年最新出的一个模块化原创 2021-03-04 17:10:36 · 1159 阅读 · 2 评论 -
构建gulp自动化流程的思路及示例
构建gulp自动化流程的思路gulp实现思路项目准备开发准备gulp自动化构建gulpfile.js对HTML、Css、JavaScript进行自动化构建css任务的构建javascript任务的构建html页面的构建合并任务图片、子图图标的压缩与额外操作构建web server服务以及热更新构建dev开发模式任务完整的构建任务,代码清除、代码和文件的压缩处理html、css、javascript代码的压缩构建clean任务构建build任务示例gulpgulp本身只是一个平台,并不具备对项目进行构建的原创 2021-03-02 21:21:19 · 159 阅读 · 0 评论 -
实现一个简单的脚手架
实现思路按我的理解,脚手架实际就是种对模板文件进行读写的操作,所以大致的步骤有三个通过命令行接收传递的参数通过fs读取模板目录下的文件内容将读取的文件内容写入到项目目录下开始准备首先需要初始化一个脚手架项目初始结构yarn init --yes然后我们需要创建一个cli.js作为入口执行文件,并且需要定义头部#!/usr/bin/env node,并在package.json中定义bin字段的值为该入口文件命令行发起询问如何通过命令行接收用户输入的参数,这里我们可以使用inquir原创 2021-03-01 23:41:02 · 396 阅读 · 0 评论 -
Plop快速入门
Plop快速入门什么是Plop基本使用项目目录安装Plopplopfile.jssetGeneratoroptiondescriptionpromptsactions使用什么是PlopPlop是一个小而美的脚手架工具,它主要用于创建项目中特定类型的文件,Plop主要集成在项目中使用,帮助我们快速生成一定规范的初始模板文件。比如我们去书写Vue的组件,如果每次都是手动去写组件的初始内容,会比较繁琐,有可能会出错,且每个人写的规范可能都不一样。这时候我们就可以用Plop来创建规范的Vue组件的初始内容,方便原创 2021-02-23 18:23:10 · 954 阅读 · 0 评论 -
关于yeoman报错:requires yeoman-environment at least 3.0.0-beta.1解决方案
关于yeoman报错:requires yeoman-environment at least 3.0.0-beta.1解决方案最近在学习yeoman的使用,在运行创建自定义generator的命令时候遇到一个问题yo <my generator>解决办法将yeoman-generator的版本降到4.0或者全局安装yeoman-environment,并且使用yo run <your generator>...原创 2021-02-22 21:40:36 · 863 阅读 · 0 评论 -
this指向总结
普通函数this指向函数的this指向遵循一个基本原则:谁调用的函数,函数的this就指向谁,否则指向全局示例var name = 'window'let obj = { name: 'object', sayHi: function () { console.log(this.name) }, sayFoo: function () { return function () { console.log(this.name) } }}//原创 2021-02-22 17:53:51 · 6648 阅读 · 2 评论 -
手写promise原理
/** * promise 原理 * * 1. exector * 需要传递一个执行函数exector参数,用于执行何时进行状态改变的逻辑 * 这个函数需要两个参数 resovle, reject 分别用于处理成功、失败的状态改变 * * 2. status * status 状态 * 仅可以通过内部的resolve、reject内置函数进行修改,且仅当status == 'pending'状态可以被修改,状态一旦确定就无法被再次修改 * resolve原创 2021-02-22 16:51:13 · 153 阅读 · 0 评论 -
yeoman快速开始
yeoman的作用yeoman是一个通用的脚手架工具,可以搭配对应的generator创建任意类型的项目,也就是说我们可以通过yeoman来搭建自己的脚手架工具安装yo模块// 全局安装yo,这里我们要注意安装的模块是yo,不是yeomanyarn global add yo这里我们要注意,yo还需要搭配对应的generator来创建对应类型的项目安装generator模块示例// 全局安装generator-node模块yarn global add generator-node这原创 2021-02-22 16:20:43 · 148 阅读 · 0 评论 -
typescript数据类型
原始数据类型// string,存放字符串let str: string = 'string-type'// number,存放数值let num: number = 0// boolean,存放布尔值let bool: boolean = true// void,存放undefinedlet v: void = undefined// undefined,存放undefinedlet u: undefined = undefined// null,存放nulllet n:原创 2021-02-21 17:41:41 · 124 阅读 · 0 评论 -
开始typescript
什么是typescripttypescript是JavaScript的超集,它支持JavaScript的所有语法,并拥有一个强大的类型系统,以及ECMAScript的最新语法支持。但typescript本身并不能被浏览器执行,它最终还是需要通过编译转化成JavaScript代码快速上手安装typescript可以安装到全局或者项目中,但是考虑到项目依赖,建议安装到项目中cd <当前项目路径>yarn add typescripttsc文件在node_modules/_bin目原创 2021-02-21 10:44:31 · 146 阅读 · 0 评论 -
performance的使用
performance工具的使用performance任务管理器performance工具内存的变化TimeLineGC回收堆块照查找分离DOMperformanceperformance是一种用于监控浏览器运行的时候性能变化的工具,他可以帮助我们观察页面运行时内存的变化,渲染的时长;并分析需要改进优化的地方。任务管理器通过shift+esc,我们可以调出浏览器的任务管理器。通过任务管理器我们可以观察页面的内存占用空间cpu使用率网络情况进程ID这里我们使用较多的时内存的占用以及cp原创 2021-02-19 16:46:31 · 2367 阅读 · 0 评论 -
V8及其垃圾回收机制
什么是V8v8 是谷歌浏览器开发的一款目前最主流的 js 执行引擎,它内部有自己一套独特的垃圾回收机制v8 的垃圾回收机制最大内存:为了更好更快的垃圾回收,v8对于内存的使用有一个最大限制,对于64位操作系统,内存最大限制约是1.5G,32位操作系统是800M,并分为新生代区域和老生代区域回收策略:v8 对于垃圾的回收主要分为新生代对象和老生代对象,而且新生代和老生代的垃圾回收策略也不相同新生代对象什么是新生代对象新生代对象指的是存活时间较短的对象,主要存放在新生代区域,新生代区域在64位原创 2021-02-16 11:19:15 · 548 阅读 · 1 评论 -
JavaScript内存管理以及GC算法
内存管理以及GC算法内存管理JavaScript的内存管理什么是垃圾GC回收算法引用计数算法标记清除算法标记整理算法内存管理内存管理是开发者申请,使用,释放内存的过程,但JavaScript的内存管理是自动的,它内部并没有暴露api给开发者去操作内存。JavaScript的内存管理JavaScript并没有直接暴露api给开发者去申请,使用以及释放内存,它内部会自动分配内存申请内存// javascript 在声明变量的时候会自动分配一定的内存空间let a = []使用内存// 使用内原创 2021-02-13 11:25:55 · 193 阅读 · 2 评论