- 博客(16)
- 收藏
- 关注
RSS订阅原创 搭建一个webpack5 + Vue3 + typescript 项目
去年Vue3，webpack5发布之后，一直没机会亲手实践一下，前段时间利用空余的时间，自己手动搭建了一个webpack5 + Vue3 + typescript的后台管理系统的基础模板，以及一些很常见的功能webpack方面首先我也是分了三个文件一个公共的配置文件，另外两个一个是生产的一个是开发的配置webpack.common.js const path = require('path'); const util = require('./util') const MiniCssExtract
2021-04-13 13:41:25
1309
2
原创 iframe高度自适应
之前一个比较老的项目，一个页面是有三个iframe组成，在一个页面UI大改造的过程中，需要让iframe能够根据iframe中的内容自适应调整，解决的思路就是通过js，获取到iframe的内容高度，然后轮询修改iframe的height属性（css并没有用，查了很多办法，最终还是选择使用js）//这是iframm标签<iframe onload="changeFrameHeight()" src="你的iframe地址" id="tabs" name="tabs" width=100% fram
2021-02-04 11:00:05
215
原创 创建Vue3项目
vue3已经发布了，我也很好奇，今天就用vue-cli脚手架创建了一下vue3 + ts 的项目这是官网的创建项目方法：https://v3.vuejs.org/guide/typescript-support.html#recommended-configuration这是vue3的英文官方文档，介绍了vue3的语法，api，我建议可以先看一遍vue3都有哪些变化，再创建项目，个人感觉语法基本上和2没有太大的区别，但是它又有了一些新的功能，新的写法。那就需要我们自己去看下了我们就按照官网推荐的方法
2020-09-22 19:37:51
928
原创 bootstrap-datetimepicker日期插件和bootstrap modal模态框冲突解决
在今天的开发中发现一个插件冲突的问题，使用bootstrap-datetimepicker日期插件，选择日期的时候触发了模态框hide.bs.modal隐藏事件，开始不知道，真的一脸茫然，后来自己找了非压缩版来debugger，发现，这个日期插件在选择完，并执行隐藏日期选择框之后，还会执行父节点的hide事件，如果我们的代码中在模态框的hide事件中还加入了一些逻辑，那么就会出现很多莫名其妙的事情。这里解决办法就是$(".modal").on('hide.bs.modal',function(e){/
2020-09-14 13:36:51
1027
1
原创 知识体系：Vuex的实现原理
Vuex作为vue的好基友，还是有必要看一下他的实现原理的，我依旧是写一个例子，用debugger的形式探索Vuex的奥秘store.jsimport Vue from "vue"import Vuex from "vuex"Vue.use(Vuex)const state = { name:"yjt", age:"18"} const mutations = { setInfo(state, obj){ state.name = obj
2020-08-10 20:08:22
172
原创 知识体系：Vue的事件机制
Vue的事件可以分为原生的DOM事件和自定义的事件原生的DOM事件：其实就是通过addEventListener添加绑定事件，而我们通过v-on, @添加的事件都会先经过Vue的模板编译，生成抽象语法树（ast），再生成render函数，通过render函数生成我们的Vnode，render函数上的参数，就会告诉Vue我们最终生成真实的DOM有哪些属性，是否是有事件的我自己写了一个例子，然后使用完整版的Vue（就是包含编译部分）,看了一下生成render函数的过程，而使用只包含运行时的Vue，脏活累活v
2020-08-06 12:04:34
481
原创 知识体系：Vue diff算法的探索
今天特意看了看Vue,在数据发生变化之后，是如何处理新旧节点的，也就是diff算法是如何优化我们重新渲染的，因为创建新的节点相对来说是很消耗性能的，已经创建过的节点是没有必要再创建一遍的，那我还是用debugger的方式学习以下是我的App.vue 功能很简单就是数据的替换<template> <div id="apps"> <div v-for="item in tableData" :key="item.id"> <div>
2020-08-03 20:12:56
147
原创 知识体系：Vue双向绑定实现原理
只知其然,而不知其所以然,我们还是要知道Vue,到底是这么实现双向数据绑定的，我还是依旧使用debugger的形式，一步一步的执行，看看他的底层实现首先我先用vue-cli，就直接默认配置，初始化了一个工程，现在最新的版本是2.6，然后将main.js和App.vue进行了相应的改造main.js //我加了两个钩子函数import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vu
2020-07-29 19:45:26
183
原创 原vue项目重构，使用typescript开发
目前手上的项目基本都是vue2+webpack3.0的一套基础框架，一直没有机会使用ts,心血来潮将原来的一个vue小项目，页面不多，将他改造一下，也来试试用typescript开发的感觉第一步就是要下依赖包"ts-loader": "^3.5.0","tslint": "^6.1.2","tslint-config-standard": "^9.0.0","tslint-loader": "^3.5.4","typescript": "^3.1.4","vue-class-component
2020-07-17 09:53:25
624
原创 简单实现一个模板引擎
html代码<body> <div id="app"> <div>123<div>{{name}}</div>123 </div><div><div> <div> <div>{{age}}</div> </div></div></div> <div>{{gender}}</div> &l
2020-06-30 09:32:31
673
原创 知识体系:离线缓存
当我们断开服务器的时候，还想缓存我们的文件，就需要浏览器的离线缓存功能离线缓存最关键的就是在要被缓存的页面的html标签中添加 manifest=“文件名.appcache” 属性，当页面被加载，就会向服务器请求.appcache的文件，告诉浏览器那些文件是需要离线缓存的。我拿了自己随便的一个项目，对登录页做离线缓存的实验，服务器我用的是nginx<html lang="fr" manifest="demo.appcache"> //这里我定义了一个demo.appcache文件&
2020-06-23 10:23:30
329
原创 知识体系：require.js原理
本文记录自己学习require.js的过程，主要通过例子再自己debugger，了解require.js是如何处理的因为是debugger学习，所以我将require.js中的超时时间expired变量设为了false,即永远不会超时，默认是7秒我的文件结构AMD.html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d
2020-06-16 12:37:08
523
原创 知识体系：理解es6 class构造以及继承的底层实现原理
开始从事前端开始，我一直关注的是业务，最近慢慢意识到知识体系的重要性，我需要将我零散的知识点，以及模糊不清的javascript理论知识慢慢的串联起来，巩固扎实，形成自己的知识体系，我受到启发的是掘金的一篇文章：https://juejin.im/post/5cc1da82f265da036023b628 《一名【合格】前端工程师的自检清单》今天通过查资料以及通过babel官网的转义，进行debugger，自己理解了一下 class构造以及继承的底层实现原理 //转义前 class Parent{
2020-06-09 22:04:03
1130
原创 将链接图片，转为base64或者二进制数组
今天后端接口返回的图片是一个阿里云地址，我就需要将这个地址转为base64思路就是将图片先画在canvas上，再用toDataURL转成base64 如果需要二进制数组，可以将得到的base64数据进一步转换 var image = new Image() //解决图片跨域，不然会报错 image.setAttribute('crossOrigin', 'anonymous'); image.src = “这是返回的链接图片地址” image.onload = fun
2020-05-29 15:51:23
557
3
原创 jq 多文件下载，解决只下载最后一个文件的问题
今天有一个选择多个文件，然后一起下载的需求解决方法：通过setTimeOut，有延时的一个个添加iframe标签， wordArr = [1,2,3] //这里的数据是选中文件的Id,用于拼接地址 wordArr.forEach(function(item,index){ // 拼接成后端定义好的单个文件的下载的路径（根据实际情况） var path = interUrl.basic + "common/export?templateId=" + item + "&bizId="
2020-05-22 19:01:23
1570
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人