DJYanggggg-CSDN博客

原创实现Vue的模板编译-数据劫持-双向数据绑定

文章目录前言内容梳理index.htmlvue.jsindex.js捋清关系前言Vue这个框架自己也用了两年多了，发现自己对它的了解不是很深刻，对vue也只是停留在会用的地方，对于一些细节的地方了解的不是很深，最近有时间就在b站看了路白大佬的公开课，结合vue官网的源码理解，打算自己照着模仿写一个mini版的vue框架，方便自己加深印象，有兴趣的也可以自己去b站看视频，或者看官网。b站链接：https://www.bilibili.com/video/BV1Lo4y1277S官网链接： https:

2021-06-09 11:49:09 271

原创彻底搞懂Vue把虚拟dom(vnode)转化为真实dom的过程

Vue是如何把虚拟dom(vnode)转化为真实dom的？相信很多学习过vue的小伙伴们都觉得很容易上手，因为vue不需要太过复杂的配置，也不需要你太关注它背后运行的逻辑，你只要用vue-cli脚手架建一个项目就可以在本地进行开发了，个人认为vue最好的一点就是你只要关注数据的变化就好了，其他的一切都有vue背后来实现。我们今天就来探究一下vue内部是如何吧虚拟dom变为我们页面上的html代码的，并且手写一个简单的例子来实现。写之前我们先用一张图来了解一下vue把vnode变为真实dom的一个流程

2021-03-10 21:49:53 6721 4

原创腾讯实时语音视频TRTC与Vue的结合开发-PC端

文章目录前言使用步骤1.引入依赖总结前言近日，由于公司业务需要实现一个实时的语音视频通话，想起了之前用过的腾讯的TRTC多人会议通话，于是把TRTC这一功能融合到系统中，我们系统用的vue进行开发，所以使用的是TRTC的web-sdk，即trtc-js-sdk。今天来给大家介绍一下如何在vue中使用它，在进行以下文章的内容学习之前我希望小伙伴们对Vue以及TRTC有相关的了解，Vue会简单的使用即可，TRTC则需要跑通Web版的demo，如果没跑过demo的话，大家可以点击这个链接[web-demo

2020-09-23 15:07:19 4882 27

原创基于qiankun框架的微前端实战使用

最近公司要整合目前所有的前端项目，希望放到同一个项目里面进行管理，但是项目使用的技术栈大体不相同，有原生js的，有用jq的也有用Vue的，整合的话要么重构，统一技术栈，不过这是不现实的，成本高，时间长，要么使用iframe，但是iframe也有很多缺点，通信不方便，刷新页面会导致路由丢失，这都是很不好的体验，于是我想起了最近很火的微前端概念，打算用微前端的技术来整合已有项目。什么是微前端？微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆,拆完后...

2020-08-24 14:56:45 4481 15

原创手写简单版的webpack打包工具

文章目录前言前提条件webpack打包流程操作流程前言webpack最近一直都有学习，但是一直都未能够很好的去了解它的一个实现方法以及实现过程做了什么，因为在了解了网上的一些基本的webpack知识后，今天来自己实现一个简单的webpack。前提条件希望在看这篇文章之前大家对webpack和node的一些api有着最基本的了解，这样子大家才能跟好的了解后面的内容，不熟悉的建议先官网学习一下。webpack打包流程初始化参数：从配置⽂件和 Shell 语句中读取与合并参数,得出最终的参数。开始

2021-06-03 15:43:14 229

原创 css中单位px和em，rem的区别

1、px是相对长度单位，它是相对于显示器屏幕分辨率而言的。优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。2、em是相对长度单位，EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。优缺点：em的值并不是固定的，它会继承父级元素的字体大小。3、rem是CSS3新增的一个相对单位，REM是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体

2021-04-20 09:11:21 215

原创 vue3.0中ant-design样式引入无效问题

最近做新项目时想试试vue3.0+ts+ant-design，在依赖都装完后，随便写了个页面样式却出不来，如下图经过一番百度，终于知道了原来在使用antd的时候， css 不能开启 css modules，我们只需要把vue.config.js的css配置下把modules改为false就可以了，如下图重启项目后就可以了值得注意的是，在我们刚刚配置的vue.config.js文件下，modules属性与requireModuleExtension是补鞥呢同时存在的，不然会被后者覆盖，把requi

2021-04-06 17:42:12 6953 4

原创聊聊那些常用的前端跨域解决方案

解决跨域的方法千千万，主要是我们要根据自己的实际情况来选择对应的方案，一下简单说说集中常常遇到的跨域情景下的解决方案。主域名下的不同子域名的跨域首先我们如果只是想要实现主域名下的不同子域名的跨域操作，我们可以使用设置 document.domain 来解决。将 document.domain 设置为主域名，来实现相同子域名的跨域操作，这个时候主域名下的 cookie 就能够被子域名所访问。同时如果文档中含有主域名相同，子域名不同的 iframe 的话，我们也可以对这个 iframe 进行操作。不同

2021-03-22 17:19:20 153

原创一文让你了解各种原生JS的实现方式

习惯了平时的快速开发的模式，相信大家对于一些原生的方法也是熟记于心，比如改变this指向的call，apply方法，创建对象的new关键字，实现异步编程的promise，又或者是自己手动实现的累加函数等等，今天本人就在这里给大家分享部分原生js方法的实现方式。本文只是方便个人知识存储，但也希望对大家有用。call原理：call方法接收一个目标对象以及一系列的参数，把当前的this对象指向目标对象，并执行方法 Function.prototype.call = function (cont

2021-03-22 17:03:55 555

原创字符串数组去重

最近遇到一到很有趣的题目，乍一看的数组的简单去重排序，一看到还有一些字母之类的头都大，后来发现了一个很有好用的方法localeCompare。

2021-03-10 22:12:59 98

原创实现简单的盒子拖拽效果

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="robots" content="noindex,nofollow"><title>拖拽效果</title></head><style type="text/css"> body{ overflow: hidden;.

2020-07-16 17:19:19 761

原创浅谈JS中的原型继承、call继承以及寄生组合继承

JS中的继承指的是子类继承父类中的属性和方法，用的比较多的是原型继承，call继承，以及寄生组合继承，今天我们来简单讲解一下这三类继承。原型继承 function A() { this.x = 100; } A.prototype.getX = function getX() { console.log(this.x); }; function B() { this.y = 200; } B.prototype.sum=fu

2020-06-27 14:30:54 211

原创 vue-cli 2.0+iview+postcss-pxtorem打包样式异常

由于项目设计稿的定稿宽度是1920*1080，客户电脑可能达不到这个要求，所以我们在项目引入了postcss-pxtorem进行兼容，按照文档进行配置后页面兼容还算可以，但在打包后，rem转换的时候出现了问题，自定义的css文件，less文件都可以正常转换为rem，但是ui框架iview的样式并没有正常的进行转换，还是px单位，后来在排查下，发现是build/webpack.prod.conf.js的配置文件出了问题，加上usePostCSS:true就可以了...

2020-06-13 14:29:20 690

原创 vue-cli3.0+iview4.0打包后字体图标资源丢失问题

解决办法：在build→utils.js中ExtractTextPlugin.extract中配置publicPath: '../../' return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loa...

2020-05-30 09:38:09 513 2

原创简单回顾js中的堆内存和栈内存

上一篇我们简单的回顾了JS中的基础数据类型和一些基础知识点，今天我们就上一边的内容延伸一下，简单的来了解一下我们js中的堆内存以及栈内存。通过上一篇我们都知道，js的数据类型分为基础数据类型以及引用类型，因此，他们的数据存放位置也是不一样的，在js中，基础数据类型（number,string,boolean,null,undefined）存放在栈内存中，引用类型(array,object,reg,Date,Math等)存放在堆内存中，因此我们在对数据进行操作的时候也有一定的差异，我们通过代码片段来看看。

2020-05-28 11:14:13 269

原创回顾基础数据类型的一些基本知识点

1.基础数据类型number，boolean，string，null，undefined2.引用数据类型object ----- [ ]，{ }，/reg/， Date日期对象，Math对象，其他实例对象 function3.ES6新增symbol4.检测数据类型方式typeof -----> NaN不是有效数字，但属于number类型 typeof NaN = Number NaN与NaN本身不相等，检测是否为有效数字可食用isNaN()，该方法会隐式的把其他数据类型转换为

2020-05-27 15:23:33 132

qq_37947438的博客