JavaScript
缝合怪
这个作者很懒,什么都没留下…
展开
-
【Vue CLI4】打包优化,通过externals配合cdn资源优化依赖项体积
打包优化前的体积: 打包优化后的体积:一、项目根目录创建vue.config.js,通过chainWebpack配置打包入口,这样我们就可以针对发布和开发两种模式使用不同的打包入口,具体代码如下:module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'pr...原创 2020-09-30 08:52:50 · 2791 阅读 · 0 评论 -
【JavaScript】appendChild一个的注意点之会删除原dom树节点
最近在研究学习vue原理,其中使用createDocumentFragment()方法,是用来创建一个虚拟的节点对象,那问题来了,创建了虚拟dom树,且最后只渲染了虚拟dom树里面的节点,那原dom树的节点去哪里了,查阅了MDN等相关资料,发现是appendChild在搞搞震。首先看一下MDN上对appendChild的定义:Node.appendChild()方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么appendChild(...原创 2020-09-24 09:29:50 · 919 阅读 · 0 评论 -
【Vue】组件通信-eventbus(总线)简单入门
基本 vue组件非常常见的有父子组件通信,兄弟组件通信。而父子组件通信就很简单,父组件会通过props向下传数据给子组件,当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。如果两个页面没有任何引入和被引入关系,该如何通信了,一个是用vuex,另一种方法就是用eventbus。 首先看一下用到的实例方法和官方解释(摘自官方):vm.$emit( eventName, […args] ) 参数: {string} eventName [...args] ...原创 2020-09-22 16:15:55 · 262 阅读 · 2 评论 -
【Vue+elementUI】container布局容器header和aside固定实现思路
代码就不多敲了,说下需求:在container布局容器中,当main内内容过多时,若不用分页,则需要向下拖动,为了更好的用户体验,将header和aside用fixed固定定位。一般aside中会放一个NavMenu 导航菜单,当导航菜单没添加collapse折叠时,直接使用fixed不影响布局。如果添加了collapse,那当事件触发折叠时,菜单会进行折叠,但是右侧的main区域不会自适应填充折叠空出的部分,可以使用以下思路:对main区域动态设置margin-left,当折叠时margin-le原创 2020-09-17 20:02:28 · 3584 阅读 · 0 评论 -
【webpack】nodejs中安装与配置
为了更好解决不同浏览器对于代码兼容性问题,可以使用webpack对项目进行打包:一、基本入门1、通过npm安装webpack:npm install webpack webpack-cli -D2、项目根目录创建webpack.config.js文件,并进行配置module.exports = { //可以设置为development(开发模式),production(发布模式) mode:"development" }3、修改项目中的package.jso原创 2020-09-15 10:59:39 · 231 阅读 · 0 评论 -
【express】不用第三方包允许cors跨域
app.all("*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Acce原创 2020-09-12 11:19:56 · 234 阅读 · 0 评论 -
【JavaScript】原生JS中Formdata与JSON转换
可以使用可选的form参数来创建一个带预置数据的FormData对象-MDN1、html结构<form id="myf" action="#"> <input type="text" name="name" /> <input type="password" name="pw"> <input type="submit" value="提交" /></form>2、获取表单dom并为其绑定监原创 2020-08-27 15:16:55 · 2348 阅读 · 0 评论 -
【JavaScript】预解析之变量名与函数名重名的问题
我们来看一个经典的例子: var a = 1; function b() { a = 10; return; function a() { console.log(a); } } b(); console.log(a);大家会觉得最后打印的是多少呢?答案是1。误区明明在b()里面直接对a进行了赋值,这不就是是全局变量了吗?为原创 2020-07-22 20:54:42 · 702 阅读 · 0 评论 -
【JavaScript】数字与字符串之间的比较、算数运算符
1、字符串数字 与 整型数字做比较运算:将字符串数字转化为对应整型数值,再进行数值的比较 :例:console.log('1'>2) --1>2--true2、字符串数字之间比大小,比较ascll码值例:console.log('21'>'3') --'21'>'3'--false3、字符串数字与整型数字做加运算:+号相当于连接符; 将整型数字转为字符串数字,在连成一个新的字符串例:console.log('3'+2) --'32'4、字符串数字与整型数字..转载 2020-07-20 20:35:09 · 563 阅读 · 2 评论