- 博客(17)
- 收藏
- 关注
RSS订阅原创 手写Vue2数据响应式原理
实现目标代码目标分析借图来分析一下流程，嘻嘻嘻，自己画的太丑啦注意此时data对象是挂载到vue实例的$data属性上，不符合我们的书写规范，所以需要进行代理操作根据节点类型进行编译依赖收集视图中会用到data中某key，这称为依赖。同一个key可能出现多次，每个依赖都需要一个Watcher来维护它们，此过程称为依赖收集。 多个Watcher需要一个Dep来管理，需要更新时由Dep统一通知。实现思路：实现过程：创建Dep创建Watcher时触发getter需要进行依赖收集(将watche
2022-06-08 15:54:21
248
1
原创 KOA框架实现文件上传
先简单介绍一下用到的插件koa：用来快速启动一个web服务器koa-router：koa的路由处理插件koa-static：获得某个目录下的静态文件path：获得当前项目绝对路径，和koa-static搭配使用koa2-cors：解决跨域问题@koa/multer：图片上传核心插件multer： @koa/multer 依赖于 multer，需要将 multer 一并安装上先确定一下代码结构将koa框架搭建起来//main.jsconst Koa = require('koa')
2022-05-23 19:55:14
2980
原创 记利用crypto-js插件进行加解密之踩坑记录
项目需求：前端需要调用后端登录接口login，然后这个接口后端进行了加密。所以前端需要利用crypto-js插件实现DES-CBC加解密方法首先观察项目原先的AES-ECB加解密方法import CryptoJS from "crypto-js";const Key = "*******";//密钥export default { /** * 加密 * @param word * @param keyStr */ encrypt(word) { var.
2022-05-10 18:28:27
2101
原创 实现两栏布局(左边固定，右边自适应)的六种方法
html内容如下 <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div>方法一：利用float .left { float: left; width: 200px; background-color: pink;
2022-04-12 17:17:14
3980
5
原创 Webpack自定义Loader和Plugin方法
手写LoaderLoader 本质上是导出函数的 JavaScript 模块，而该模块导出的函数被称为 Normal Loader，在开发 Loader时，我们可以在导出的函数上添加一个 pitch 属性，它的值也是一个函数。该函数被称为 PitchingLoader。Loader执行时会先执行Pitching Loader再执行Normal Loader， Pitching Loade的执行顺序是 从左到右，而 Normal Loader 的执行顺序是 从右到左。借用他人示意图如下：开发之前需
2022-03-30 10:43:44
1162
原创 利用webSocket和Node创建简易多人聊天室
webSocket最大的的特点是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。具体推荐参考阮一峰大佬的博客html页面如下： <h1>聊天室</h1> <div id="message"></div> 昵称： <input id="username" type="text" /> 内容： <input id="text" type="text" style="width:300px" .
2022-03-14 18:36:32
2351
原创 JavaScript 设计模式核⼼原理
本文旨在简单介绍我认为前端应该需要了解的设计模式一、单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。应用场景：Vuex中的单例模式（实现了一个全局 Store为单一数据源 用于存储应用的所有状态）。先来看vue中如何使用vuex// 安装vuex插件 Vue.use(Vuex)// 将store注入到Vue实例中new Vue({ el: '#app', store})通过Vue.use()方法，调用了vuex插件的insta
2022-03-03 16:21:08
333
原创 webpack中的代码分割中的常见方法
代码分割是webpack的一个重要特性，可以将代码分割成不同的部分（chunk），以便进行后续的按需加载和并行下载，对提升项目性能起着重要的作用方法一：webpack入口文件配制成多个文件const path = require('path');module.exports = { //entry也可以是数组，例如entry:['./src/index.js', './src/another-module.js'] //为数组时不会生成多个bundle //此时entry是对象 entry:
2022-02-18 15:35:04
1490
原创 JQ项目中如何使用Handlebars简化模版
一 安装首先使用npm install handlebars进行安装，使用const Handlebars = require(“handlebars”);进行引入。或者使用cdn直接引入<script src="https://cdn.bootcdn.net/ajax/libs/handlebars.js/4.7.7/handlebars.amd.min.js"></script>二 使用可以基于jQuery ajax的封装获得html模版，例如 Rose.aj
2022-02-10 15:58:47
635
原创 HTML5通过触摸原生事件简易实现年度报告
先定义需要显示的报告页面（利用transition实现过度动画）<div id="report-content"> <transition name="slide-fade"> <div v-if="showIndex == 1"> 第一个页面 </div> </transition> <transition name="slide-fade"> <div v-if="showIn
2022-02-10 10:49:20
1039
1
原创 初识node框架KOA
首先需要先看一个小例子，初步了解koa。const koa =require('koa')const Router =require('koa-router')//实例化Koaconst app =new koa()const router =new Router()// 配置路由//ctx 上下文（content），包含了request和response信息router.get('/', async (ctx, next) => { ctx.body={msg:"Hello ko
2022-02-08 18:45:00
363
原创 前端APP原生实现适配苹果安卓手机附件上传功能
我这里是循环出多个上传对象，样式已经简化 <span v-for="(item, index) in attachInfoList" :key="index + '-wrap'" //设置捕获事件. //当一个父元素div1 包裹着一个子元素div2 同时有点击事件。 //我们希望点击从外面执行到里面，先触发父元素再触发子元素。 //我们可以在父元素的点击事件加上@click.capture .
2022-02-07 20:56:21
1863
原创 前端使用webpack-api-mocker插件mock数据
mock数据是前端必备技能首先需要在webpack生产环境配置文件中引入插件const apiMocker = require('webpack-api-mocker'); devServer: { before(app) { //mock/index.js为mock文件夹入口 if (process.env.MOCK) { apiMocker(app, path.resolve('mock/index.js'));
2022-02-07 19:51:13
901
2
转载 原生js实现Date.format方法
解释：RegExp.$1为取得字符串中符合正则表达式的部分； Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": thi...
2019-10-23 14:52:51
1162
原创 在固定区域内放大缩小图片展示图片效果
在固定区域内放大缩小图片展示图片效果，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2019-10-10 10:38:03
828
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人