每天一个前端小知识~

【代码】vue3 + mark.js 实现文字标注功能。

通过自定义指令。

发布订阅模式 + 双向数据绑定 = vue2响应式。

使用匿名自执行函数，将公共方法挂载在原型上，封装for循环。

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

创建一个空对象，设置它的原型链，改变this指向，判断返回值类型。

避免变量被污染、私有化、保存变量常驻内存。

this指向上一个调用者箭头函数没有thiscall, apply, bind可以改变this指向call,apply 改变之后执行一次，bind只改变不执行call传对象，apply传数组。

将img的真实src存在自定义属性data-src，获取页面的视口和滚动条高度，遍历img，假如img的offsetTop在可视区内则给src赋值。

用来控制路径的跳转，一个路由即一组映射关系（key-value键值对形式），key为路径value为方法或者组件。

快速构建模块化、组件化、工程化项目创建项目步骤。

一、项目背景在这个互联网高速发展的时代，人们可以享受足不出户的购买商品，只要在家浏览商品下单，几天内就会收到心仪的商品。 Mall商城后台(Vue+SSM)——可做毕业设计 二、项目介绍Mall商城分为PC端、小程序端、App端、H5端、PC后台，我负责PC后台的开发，Mall商城后台分为基础模块、会员管理、商品管理、订单管理、系统管理、数据统计六大模块1.基础模块包含登录和退

官网：https://react.docschina.org/简介：用于动态构建用户界面的 JavaScript 库优点：声明式编码、组件化编码、高效（diff算法，使用虚拟dom，减少页面重绘）

2023年最新前端面试题，每天几道你便能轻松进入大厂，成为卷中之王！！！

对象都有_proto_属性，指向它的原型对象，原型对象也有_proto_属性，指向原型对象的原型对象，一层一层行成的链式结构叫做原型链。person对象 -> Person.prototype->Object.prototype->null。每个函数的prototype属性叫做原型（原型对象）

防抖：游戏回城节流：技能冷却

浅拷贝只拷贝一层，深层次的对象或数组只是拷贝地址，源数据的改变会影响新数据的改变，例如for遍历、Object.assign()深拷贝拷贝多层，深层次的对象或数组也会拷贝，源数据的改变不会影响新数据的改变，例如递归for遍历、JSON.parse(JSON.stringify(obj))—有注意事项

express是node http模块的升级版，既能构建Web服务器，也能构建API接口服务器。1.编写express.js。2.编写api.js。

【代码】每天一个前端小知识03——Node手写服务器。

实现原理：Object.defineProperty()中get、set方法。实现原理：Proxy（代理）对象拦截属性变化，Reflect（反射）操作属性。缺点：新增和删除对象属性、通过下标修改数组页面不更新。为什么不用Object操作属性而用Reflect呢？

1.模块化：包括对css、js、资源的模块化2.组件化：封装组件，复用ui、css、js3.规范化：目录结构、编码、接口、文档以及git分支4.自动化：自动化构建、部署、测试

reduce() 对数组每个元素执行一次由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。循环遍历能做的，reduce都可以做。比如数组根据元素某个属性求和、数组元素出现次数、数组去重、数组根据某个元素属性分类等等。...

前端工作常用组件

一、导航跳转及页面传参1.新增shoplist页面2.首页跳转以及传参二、设置标题以及编译模式1.挂载上一个页面传过来的参数2.在onReady函数中设置标题3.自定义编译模式三、渲染商铺列表1.挂载请求参数2.调用api接口3.渲染门店页面4.美化门店页面/* pages/shoplist/shoplist.wxss */.shop-item { display: flex; padding: 15rpx; border: 1rpx solid #efe

一、页面导航1.声明式导航导航到 tabBar 页面导航到非 tabBar 页面后退导航2.编程式导航导航到 tabBar 页面导航到非 tabBar 页面后退导航3.导航传参声明式导航传参编程式导航传参在 onLoad 中接收导航参数二、页面事件1.下拉刷新启用下拉刷新在配置文件中，将 enablePullDownRefresh 设置为 true下拉刷新窗口的样式backgroundColor 背

一、新建项目1.填写项目相关信息2.去掉黄色警告以及调试库版本过高提示VM339 WAService.js:2 Unhandled promise rejection TypeError: WebAssembly.instantiate()原因：默认的调试基础库的版本太高了解决：降低调试库版本或者右键hide3.新增3个页面，删除默认的index以及logs页面二、配置导航栏效果修改导航栏背景、显示文本、文本颜色三、配置 tabBar 效果1.进入阿里巴巴图片矢量库下载图片到本

一、WXML模板语法1.数据绑定(绑定内容、绑定属性、运算）2.事件绑定（传参、重新赋值）3.条件渲染（wx:if、block+wx:if、hidden）4.列表渲染（vx:for、vx:key）二、WXSS模板样式WXSS 扩展的特性有rpx 尺寸单位@import 样式导入1.rpx（使用 iPhone6 作为样机）小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配2.样式导入3.全局样式和局部样式当局部样式和

一、小程序简介小程序与普通网页开发的区别1.运行环境不同网页运行在浏览器，小程序运行在微信2.API 不同小程序中无法调用 DOM 和 BOM 。但是，小程序可以调用微信的 API，例如：定位、扫码、支付3.开发模式不同网页的开发模式：浏览器 + 代码编辑器小程序的开发模式：申请开发账号、安装开发者工具、创建和配置项目二、搭建第一个小程序1.进入微信公众平台注册账号2.选择小程序3.填写相关信息注册成功后得到 小程序id（创建小程序时必须的）4.安装微信开发者工具5.安装

效果图一、EChats官网：echarts.apache.orgECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。二、怎么在Vue中使用EChats1.在Vue脚手架仪表盘安装EChats的运行依赖因为是5.0.0最新版，我的脚手架用不了，于是我使用了

问题当我们在Vue页面显示当前登录用户的头像时，该如何加载后端传过来的动态图片地址呢？这时是固定地址，第一时间我们想到直接在src前加:，使用vue的双向数据绑定即可，但是试了多次没有效果，原来要加require关键字…解决1.用户登录可以拿到用户的相关信息，这时候我们可以把头像、角色id、token等多页面需要共享的数据存入sessionStorage,角色id可以渲染左侧菜单，token判断是否登录2.拿到头像的值3.定义动态拼接图片的方法，注意必须写require4.把src换成

问题Vue父子组件传递数据的时候，浅拷贝会出现修改数据相互影响的情况。比如修改失败，前端的页面表单的数据还是改变了解决方案使用深拷贝代替浅拷贝this.addForm = JSON.parse(JSON.stringify(memberInfo))因为增加和修改共用一个表单，所以每次打开表单时增加要给表单赋空值效果图会员名是不可以修改的，disabled会员组件页代码<template> <div> <!-- 面包屑导航区域 -->

问题当我们写好一个项目的功能模块时，为了方便和其它成员共享项目，可以选择上传到gitee解决方案1.找到项目所在文件夹，查看所在分支，如图此时在master主分支git branch2.切换到会员分支1.存在分支git checkout 分支名2.假如没有分支git checkout -b 分支名3.检查当前分支的状态，我们可以发现有些文件是修改和新增的git status4.把它们加入暂存区git add .5.再次检查状态git checkout6

什么是iconfont官网：https://www.iconfont.cn/IconFont，图标字体也叫字体图标，就是字体做的图标。可以通过设置字体的方式改变图标的样式，受到近些年 扁平化设计 的影响，越来越多的图标都开始使用 IconFont快速入门1.搜索关键字2.加入购物车3.添加至项目4.生成代码5.复制代码6.在浏览器中打开7.复制代码保存为css文件就可以导入项目中使用了...

什么是uni-app？官网：https://uniapp.dcloud.io/uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。uni-app的优点跨平台发行，运行体验更好通用前端技术栈,学习成本更低开发生态,组件更丰富怎么创建uniapp项目HBuilderX内置相关环境，无需配置nodejs、vue等，三秒钟就可以创建一个项目。开发界面，使用微信开发者工具查看运行效果...

一、Mall项目简介客户使用的业务服务：PC端前台采用传统html开发，（小程序，移动web，移动app）采用uniapp开发管理员使用的业务服务：PC端后台管理端采用vue脚手架开发Mall后台管理系统采用前后端分离的开发模式前端项目是基于Vue的SPA（单页应用程序）项目后台功能图前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts后端技术栈：SSM,Mysql二、项目初始化A.安装Vue脚手架B.通过脚手架创建项目C.配置路由D.配置El

一、微信小程序是什么微信小程序是不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开的应用，在微信小程序的使用过程中，用户只增不减，很多的公司都开始研发属于自己的小程序二、环境准备1.前往微信公众平台官网注册账号：https://mp.weixin.qq.com/2.获取APPID3.下载微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html三、微信

一、Vuex概述1.组件之间共享数据的方式2.Vuex是什么3.使用Vuex管理数据的好处4.什么样的数据适合存储在Vuex中二、Vuex的基本使用1.创建带有vuex的vue项目，打开cmd，输入命令：vue ui2.参考前面vue脚手架的教程创建项目注意：这次要引入Vuex3.创建成功界面三、Vuex的核心概念1.StateState提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储例如，打开项目中的store.js文件，在State对

一、路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现，并完成资源的分发2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路

一、什么是Vue脚手架Vue脚手架用于快速生成Vue项目基础架构官方网址为：https://cli.vuejs.org/zh/二、Vue脚手架的安装1.检查是否安装node.js没有安装的话，详情参考 node.js的安装教程2.使用国际开源库生态系统安装脚手架npm install -g vue-cli因为数据源在国外，很容易出现下面这个问题rollbackFailedOptional: verb npm-session这个问题不是报错，而是 npm 要安装的源在国外，简单理解

实现购物车步骤1.实现组件化布局把静态页面转换成组件化模式把组件渲染到页面上2.实现 标题和结算功能组件标题组件实现动态渲染从父组件把标题数据传递过来 即 父向子组件传值把传递过来的数据渲染到页面上结算功能组件从父组件把商品列表list 数据传递过来 即 父向子组件传值把传递过来的数据计算最终价格渲染到页面上3.实现列表组件删除功能从父组件把商品列表list 数据传递过来 即 父向子组件传值把传递过来的数据渲染到页面上点击删除按钮的时候删除对应的数据给