03 2021 档案
摘要：1.Set <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>集合<
阅读全文
摘要：1.迭代器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>迭代器
阅读全文
摘要：1.async <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc
阅读全文
摘要：1.同步回调和异步回调 <script> // 同步回调 let arr = [1,2,3,4,5]; //对数组的每一个元素 * 10 返回新数组 forEach filter some every let newArr = arr.map(item => { // console.log(0);
阅读全文
摘要：1.几个短而让我印象深刻的题 if (!("a" in window)) { var a = 10; //var命令在块级作用域就是在全局的，let才在块级作用域生效 } console.log(a); // undefined /* var a; if(!("a" in window)){ a =
阅读全文
摘要：1.那你能讲一讲MVVM吗？ MVVM是Model-View-ViewModel缩写（是数据驱动模型）。Model层代表数据层（后端的api接口数据），View代表视图层，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层，并自动将数据渲染到页面中，视图变化的时候（d
阅读全文
摘要：1.什么是同源策略及限制 同源策略的含义 同源是指‘三个相同’： 协议相同 域名相同 端口相同 举例来说，http://www.example.com/dir/page.html 这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下：
阅读全文
摘要：一，DOM事件 1.dom事件的级别 DOM0 element.onclilck = function(){} DOM2 element.addEventListener('click',function(){}) DOM2 element.addEventListener('keyup',func
阅读全文
摘要：详情；https://www.cnblogs.com/fsg6/p/13082013.html 网络基础 TCP/IP的分层管理 基于浏览器的连接处理（在浏览器上输入URL到页面渲染的过程） HTTP协议的主要特点 HTTP报文的组成部分 HTTP方法 GET和POST请求的区别 常见状态码 什么是
阅读全文
摘要：一，盒子水平居中垂直居中的五大方案；https://www.cnblogs.com/fsg6/p/12707898.html 二，圣杯布局（左右固定，中间自适应）；https://www.cnblogs.com/fsg6/p/14530741.html 三，标准盒模型和怪异盒模型（ie盒子模型）和f
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="viewport" content="width=de
阅读全文
摘要：async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log("async2"); }
阅读全文
摘要：对象(数组)的深克隆和浅克隆（头条） let obj = { a: 100, b: [10, 20, 30], c: { x: 10 }, d: /^\d+$/ }; // 1.浅克隆，obj和obj2是没有关系的，第二级的对象还是引用的同一个地址 let obj2 = { ...obj }; //
阅读全文
摘要：1 堆；存储引用类型值的空间栈；存储基本类型值和指定代码的环境 // example 1 let a = {}, b = '0', c = 0; a[b] = '珠峰'; a[c] = '培训'; console.log(a[b]); //培训 2 //example 2 let a = {},
阅读全文
摘要：flex布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width
阅读全文
摘要：## **贪吃蛇练习** 使用TypeScript + Webpack + Less实现贪吃蛇的例子； ### **项目依赖** TypeScript： - typescript； - ts-loader； Webpack： - webpack； - webpack-cli； - webpack-d
阅读全文
摘要：tsconfig.json配置 { "compilerOptions": { "module": "es2015", "target": "es2015", "strict": true, "outDir": "./dist", "noEmitOnError": true }, "include":
阅读全文
摘要：/* 1.变量类型声明和初始化 */ let a: number; // a 的类型设置为了number，在以后的使用过程中a的值只能是数字 a = 10; a = 33; // a = 'hello'; // 此行代码会报错，因为变量a的类型是number，不能赋值字符串 let b: strin
阅读全文
摘要：1.1 express框架是什么 Express是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。 1.2 express框架的特性 1 提供了方便简洁的路由定义方式 2 对获取HTTP
阅读全文
摘要：学生管理档案 目标：模板引擎应用，强化node.js项目制作流程。 知识点：http请求响应、数据库、模板引擎、静态资源访问 制作流程 1.建立项目文件夹并生成项目描述文件 2.创建网站服务器实现客户端和服务器端通信 3.连接数据库并根据需求设计学员信息表 4.创建路由并实现页面模板呈递 5.实现静
阅读全文
摘要：模板引擎是第三方模块。 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。 在命令行工具中使用 npm install art-template 命令进行下载 使用const template = require('art-template')引入模板引擎 告诉模板引擎要拼接的数
阅读全文
摘要：利用mongoose创建数据库，基本操作 // 引入mongoose第三方模块 用来操作数据库 const mongoose = require('mongoose'); // 数据库连接 mongoose.connect('mongodb://localhost:27017/playground'
阅读全文
摘要：启程express 安装npm i express -S 1:引入express第三方对象 2:构建一个服务器对象 3:开启服务器监听端口 4:处理响应 在express中，保留了原生http的相关属性和函数 app.use(路由路径,fn) 小练习 选择性荤菜素菜 用户/abc/def的请求 选择
阅读全文
摘要：#### 包（文件夹） * 多个文件，有效的被组织与管理的一个单位 * 留一个入口 * __包就是一个:文件夹__ #### npm|| yarn * 自己先有一个包描述文件（__package.json__) * 创建一个包描述文件 `npm init [-y]` * 会根据当前的文件夹来自动生成
阅读全文
摘要：nodejs实现规范 CommonJS : 规范JavaScript语言作为后端语言运行的标准 具备什么能力,该怎么做 ,比如: 具备服务器的功能/ 可以操作文件 ..... 模块应该怎么写: Module : 1:依赖一个模块 require('模块名(id)') 2: 需要被模块依赖 modul
阅读全文
摘要：安装node,百度查阅，node -v查询版本 node.js和javascript区别 es 定义了语法，js和nodejs都要遵守 不能操作dom,不能监听click,不能发送ajax js 使用es语法，外加webAPI，可以操作dom,事件绑定，ajax等 nodejs 使用es语法，外加n
阅读全文
摘要：CommonJS 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。 当使用require命令加载某个模块时，就会运行整个模块的代码。 当使
阅读全文
摘要：购物车原型图 从功能上拆分层次 尽量让组件原子化 容器组件（只管理数据）vuex 组件拆分 该功能拆分成两个组件，顶部是商品列表，底部是购物车商品 功能上 1.点击加入购物车，底部购物车新增商品（或者是已有商品，数量加1即可） 2.点击增加按钮，数量加一，点击减少，数量减1 数据结构上 1.有两种数
阅读全文
摘要：目录 前端为什么要进行打包和构建？ module chunk bundle区别 loader和plugin的区别 babel和webpack的区别 webpack如何实现懒加载 如何产出一个lib babel-polyfill babel-runtime区别 为什么proxy不能被polyfill
阅读全文
摘要：module chunk bundle的区别 module 各个源码文件，webpack一切皆模块 chunk 多模块合并成的， 如entry import()异步加载 splitChunk代码分割 bundle 最终的输出文件，有可能好多个打包文件 1.优化babel-loader 尽可能少的应用
阅读全文
摘要：最近新启动了个pc端的项目，项目要求兼容IE，想必各位前端都清楚，要想拿下IE这个破地，必须用上babel。 个人平时对这方面也没有过分的关注，于是乎各种网上寻找解决方案，这一找，发现有时候网络就跟个历史博物馆一样，大部分问题的解决方案基本都是过时了的。通篇看下来，基本全是推荐使用babel-pol
阅读全文
摘要：关于开启多进程 1.项目较大，打包较慢，开启多进程能提高速度 2.项目较少，打包很快，开启多进程会降低速度（进程开销） happyPack多进程打包js单线程，开启多进程打包，提高构建打包速度 在生产环境配置，开发环境配置也可以, 安装happyPack webpack.config.js cons
阅读全文
摘要：为什么要使用Dll 通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些
阅读全文
摘要：weppack.config.js配置，该文件在根目录下的build文件夹里头 module.exports = { entry: { main: './src/index.js', }, resolve: { extensions: ['.js', '.jsx'，'.vue','.ts'], al
阅读全文
摘要：ESLint（https://eslint.bootcss.com/） 能对 JS 基本语法错误/隐患进行提前检查，使用步骤 安装loader npm install eslint-loader eslint --save-dev eslint 是语法检查的包 eslint-loader 是 esl
阅读全文
摘要：解决方法： 1.由后台解决，后台在服务端添加配置，检测到404页面，直接跳转指向到 index.html 的 路径 2.由前端解决，不采用 mode:"history" 模式，采用 hash 路径；就可以解决404的问题 虽然这样会显得 url 很丑 用vue-cli脚手架搭建单页面项目 route
阅读全文
摘要：目前比较主流的框架如Vue、React等，都是单页面应用的框架。一般我们在使用它们的时候，会使用官方脚手架来创建项目，所以我们不必关心单页面应用路由是如何实现的，因为脚手架中已经帮我们做好了配置。在具体项目开发中，我们只需要做相应的路由配置即可。 那么在实际项目中，手动搭建项目的前提下，我们需要如何
阅读全文
摘要：当我们工作本地开发某一个需求的时候，需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上，就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求，并将其转发到我们想要转发的接口上呢？ 这个时候就需要用到 webpack-dev-server 主要看 devS
阅读全文
摘要：当我们工作本地开发某一个需求的时候，需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上，就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求，并将其转发到我们想要转发的接口上呢？只有开发环境需要代理， 这个时候就需要用到 webpack-dev-serv
阅读全文
摘要：使用webpack打包ts文件，就需要安装 ts-loader 安装： npm i ts-loader typescript -D webpack.config.js 文件中添加解析 typescript 代码的 loader const HtmlWebpackPlugin = require('h
阅读全文
摘要：http-server 安装 workbox-webpack-plugin 安装 相信很多朋友都有耳闻过 PWA 这门技术, PWA 是 Progressive Web App 的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的
阅读全文
摘要：webapck配置目录 开发环境webpack.dev.js const webpack = require('webpack'); const devConfig = { mode: 'development', devtool: 'cheap-module-eval-source-map', d
阅读全文
摘要：以 jquery 为例，代码如下 // index.js import $ from 'jquery' $('body').html('HHAHAH') import func from './test.js' func() // test.js export default function fu
阅读全文
摘要：缓存 场景 生产环境中，我们配置output,输出打包配置,代码分割配置，第三方的库会被打包到vendors文件 optimization: { usedExports: true, splitChunks: { chunks: 'all', cacheGroups: { vendors: { te
阅读全文
摘要：我们之前写的css文件都会被打包进js文件中，要想把css单独打包成一个css文件该怎么做呢？ 这个时候就需要用到 MiniCssExtractPlugin 开发环境用不到这个功能（因为这个东西不支持热模块更新，样式更改自动替换，不用刷新页面），一般都是用在生产环境中。 安装： npm instal
阅读全文
摘要：它可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，针对这些，我们可以进行文件分割等操作。 分析内容：如图所示，打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何步骤如下：1. 安装：npm install web
阅读全文
摘要：Lazy Loading 异步import的包会被单独打成一个chunk， 新建index.js入口文件，import(),这个是异步加载模块方式， vue的路由路由懒加载就是如此 async function getComponent() { const { default: _ } = awai
阅读全文
摘要：当你把所有的代码都打包到一个文件的时候，每次改一个代码都需要重新打包。且用户都要重新加载下这个js文件。但是如果你把一些公共的代码或第三方库抽离并单独打包。通过缓存加载，会加快页面的加载速度。（分割成多个文件，不必打包成一个文件，提高性能） 异步加载的代码，webpack会单独打包到一个js文件中
阅读全文
摘要：因为在不同的环境下，webpack的配置稍微有点区别，如果我们需要在不同的换将下切换，就得重复修改webpack.config.js配置，这是很麻烦而且还容易改错，所以我们需要把配置文件进行拆分。 在项目根目录下新建build文件夹，然后在build文件夹中新建 webpack.dev.js 、 w
阅读全文
摘要：什么是 Tree-Shaking 用来在打包编译成 bundle 时消除 ES6 Module 语法中未使用到的代码和模块。 比如入口文件引入这个math.js模块，有add,min方法，只引入add方法，但是打包后的文件中还自动引入了min方法，多次一举，浪费性能，使用tree-shaking(树
阅读全文
摘要：Enter与Output基础配置 需求一；我们需要将打包后输出两个js文件 module.exports = { mode: 'development', entry: { main: './src/index.js', sub: './src/index.js' }, entry可以接收一个对象，
阅读全文
摘要：### webpack 介绍 * 什么是webpack<https://www.webpackjs.com/> * Webpack是一个模块打包器(bundler)。 * 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理 * 它将根据模块
阅读全文
摘要：function shallowRef(val) { return shallowReactive({value:val}); } function shallowReactive(obj) { return new Proxy(obj, { get(obj, key){ return obj[ke
阅读全文
摘要：什么是 Proxy？ MDN 上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。 其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作
阅读全文
摘要：利用readonly封装数据，递归只读 <template> <div> <p>{{state.name}}</p> <p>{{state.attr.age}}</p> <p>{{state.attr.height}}</p> <button @click="myFn">按钮</button> </
阅读全文
摘要：ref 过去在 Vue2 中，我们采用 ref 来获取标签的信息，用以替代传统 js 中的 DOM 行为。 <template> <div ref="box"> I am div </div> </template> console.log(this.$refs.box); 在 Vue3 的组合 A
阅读全文
摘要：customRef 返回一个ref对象,可以显式地控制依赖追踪和触发响应 示例 <template> <div> <p>{{obj}}</p> <button @click="inc">button</button> </div> </template> <script> import { cust
阅读全文
摘要：ref和toRef区别: ref->复制, 修改响应式数据不会影响原始数据 toRef->引用, 修改响应式数据会影响原始数据 ref->数据发生改变, 界面就会自动更新 toRef->数据发生改变, 界面也不会自动更新 toRef应用场景: 如果想让响应式数据和以前的数据关联起来, 并且更新响应式
阅读全文
摘要：reactive类型数据代码 <template> <div> <p>{{state}}</p> <button @click="myFn">按钮</button> </div> </template> <script> import {reactive} from 'vue'; export de
阅读全文
摘要：递归监听 默认情况下，Vue3 中的 ref 和 reactive 都是递归监听的(层级深的对象)，即能实时监听对象的底层变化。 例如，在 ref 中 <template> <div> <p>msg.a.b.c = {{msg.a.b.c}}</p> <p>msg.e.f = {{msg.e.f}}
阅读全文
摘要：1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value 如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value 2. Vue是如何决定是否需要自动添加.value的 Vue在解析
阅读全文
摘要：1.什么是ref? - ref和reactive一样, 也是用来实现响应式数据的方法 - 由于reactive必须传递一个对象, 所以导致在企业开发中 如果我们只想让某个变量实现响应式的时候会非常麻烦 所以Vue3就给我们提供了ref方法, 实现对简单值的监听 2.ref本质: - ref底层的本质
阅读全文
摘要：reactive reactive 是 Vue3 中提供的实现响应式数据的方法。 在 Vue2 中响应式数据是通过 defineProperty 来实现的，在 Vue3 中响应式数据是通过 ES6 的 Proxy 来实现的。具体参照Vue双向数据绑定，Vue3 的 Proxy 和 definePro
阅读全文
摘要：新的 setup 组件选项在创建组件之前执行。 1.Composition API 和Option API(vue2.x)混合使用 2.Composition API本质 (组合API/注入API) 3.setup执行时机 4.setup注意点 1.setup执行时机 beforeCreate: 表
阅读全文
摘要：1，用vue2.x，实现一个todos <template> <div> <form> <input type="text" v-model="stu.id"> <input type="text" v-model="stu.name"> <input type="text" v-model="st
阅读全文
摘要：1.Vue3.0-快速上手 - 创建Vue3的3种方式 + Vue-CLI + Webpack + Vite 我用 Vite （尤自创的方案） 2.什么是Vite? - Vite是Vue作者开发的一款意图取代webpack的工具 - 其实现原理是利用ES6的import会发送请求去加载文件的特性,
阅读全文
摘要：Vue3.0是如何变快的? - diff算法优化: https://vue-next-template-explorer.netlify.app/ + Vue2中的虚拟dom是进行全量的对比，同级对比，不管修改和未修改的数据都会对比 + Vue3新增了静态标记(PatchFlag), 在与上次虚拟节
阅读全文
摘要：Object.defineProperty 劫持数据 只是对对象的属性进行劫持 无法监听新增属性和删除属性 需要使用 vue.set, vue.delete 深层对象的劫持需要一次性递归 var obj = { a: 1, o: { b: 2, o1: {} } } 无法监听原生数组，需要特殊处理，
阅读全文
摘要：路由是根据不同的url地址来显示不同的页面或内容的功能，这个概念很早是由后端提出的。后端之前是这么做的，当我们访问 http://xxx.abc.com/xx 的时候，大致流程可以想象成这样的： 1. 浏览器向服务器发出请求。2. 服务器监听到80端口，如果有请求过来，那么就解析url地址。3. 服
阅读全文
摘要：vue组件是异步渲染的 汇总data的修改，一次性更新视图 减少dom的操作次数，提高性能 <template> <div id="app"> <ul ref="ul1"> <li v-for="(item, index) in list" :key="index"> {{item}} </li>
阅读全文
摘要：转载；https://www.cnblogs.com/ming1025/p/13091678.html 本版本是对于vue2.x的总结，未来等学习了vue3，再完善对比一波！然后就是说，我们这里主要介绍原理部分，所谓二八原则，我们一切都从最重要的说起吧！ 一切从这张图开始 让我们一步步看吧！ 一、初
阅读全文
摘要：vue响应式简单代码 // 触发更新视图 function updateView() { console.log('视图更新') } // 重新定义数组原型 const oldArrayProperty = Array.prototype // 创建新对象，原型指向 oldArrayProperty
阅读全文
摘要：Object.defineProperty()语法说明 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 Object.defineProperty(obj, prop, desc) obj 需要定义属性的当前对象 prop 当前需要
阅读全文
摘要：Model-View-ViewModel（MVVM，数据驱动视图模型）是软件体系结构模式之一。通过将应用程序分为以下三个部分Model - View - ViewModel来设计和实现具有自己的图形用户界面（GUI）的应用程序的方法。
阅读全文
摘要：当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下： mixin中 组件中 控制台 解决方案：不要返回结果而是直接返回异步函数 mixin中 组件中 控制台
阅读全文
摘要：mixins基础概况 vue中的解释是这样的，如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 怎么用？ 举个栗子： 定义一个混入对象
阅读全文
摘要：在项目的目录中找到router文件夹里的index.js index.js文件原先的文件结构 import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City
阅读全文
摘要：动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，如果有，则显示 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件
阅读全文
摘要：vue中的插槽————slot 什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 父组件拥有结构，子
阅读全文
摘要：vue高级特性 1. 自定义v-model; 详解；https://www.cnblogs.com/fsg6/p/14469150.html 2. this.$nextTick vue是异步渲染，data改变后，Dom不会立刻渲染， $nextTick会在DOM渲染之后被粗发，已获得最新的dom节点
阅读全文
摘要：v-model 还有一种数据的交互方式是使用 v-model， 这种方法专门是 input 组件， 这只不过是 一种语法糖的形式： input 组件上面本身有一个 onInput 事件。每当素输入框内容发生发生的时候，就会触发这个事件，然后把 input 的值 通过 $emit 传递出去。 <!--
阅读全文
摘要：Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选
阅读全文
摘要：1.watch如何深度监听，watch监听引用类型数据，拿不到oldVal <template> <div> <input v-model="name"/> <input v-model="info.city"/> </div> </template> <script> export default
阅读全文
摘要：图片设置模糊样式 .head-img{ width: 100%; height: 320rpx; /* 图片模糊效果 */ -webkit-filter:blur(20px); }
阅读全文
摘要：一，电影页面功能 功能分析，1.点击搜索关键字，搜索电影 2.点击更多按钮，跳转到更多电影页面 3.点击电影图片，跳转到电影详情页 逻辑分析，1.在movies页面分别发送三个请求，获取正在上映的，不久上映的，top250的数据，传递给电影列表movie-list子组件 2.从lin-ui映入搜索组
阅读全文