jijunqing321的博客

原创 微信小程序上传组件（可同时长传图片+视频）

微信小程序上传组件，同时支持上传视频+图片，并且可以返显。

原创 webpack常用loader和pluglin

webpack常用loader、plugin

原创 【angular】vscode设置tslint保存自动修改

开发angular一直用webstorm，诚然，确实好用，就是公司的电脑不太给力，开启关闭都费时间，一个字就是慢，最后还是换回了vscode。不过，有个问题就是，保存时tslint不会自动格式化，百度搜索都是settings直接设置，但是这种并不是使用项目内部的tslint.json文件，后来看了vscode插件tslint的文档才知道设置很简单，接下来上图片文件 => 首选项 => 设置，右上角“打开设置”主要是下面代码："files.associations": { "tslin

原创 【浏览器原理】浏览器执行顺序

脑图下面是详细说明一下事件循环：首先，明确浏览器是多线程的，而js是单线程，至于为什么是单线程，阮一峰大神的博客是这么说的：原因大概是不想让浏览器变得太复杂，因为多线程需要共享资源、且有可能修改彼此的运行结果，对于一种网页脚本语言来说，这就太复杂了。后来就约定俗成，JavaScript为一种单线程语言。（WorkerAPI可以实现多线程，但是JavaScript本身始终是单线程的。）其次，明确Event Loop是一个程序结构，译为事件循环，用于等待和发送消息和事件，主要是连接主线程与负责主线

原创 微信小程序 多文件上传方法

最近工作项目主要是微信小程序，这篇主要介绍接到的一个需求——多图片上传。知道需求后马上查了下小程序的api，发现wx.uploadFile并不支持多文件上传，这样就得循环上传，肯定影响速度，后来发现有大神写了插件wx-formData，大家可以看一下，接下来就简单了，引入、传文件下面是使用的代码：const FormData = require('./formData/formData');let data = this.data.formData.getData();wx.request({

原创 【浏览器原理】V8引擎是如何处理JavaScript代码的？

脑图大家先看下脑图吧，估计看完应该能清晰的理解V8处理JavaScript的流程。其实，脑图中也主要是以下几个方面：首先介绍编译器和解释器的区别。紧接着又分析了 V8 是如何执行一段 JavaScript 代码的：V8 依据 JavaScript 代码生成 AST和执行上下文，再基于 AST 生成字节码，然后通过解释器执行字节码，通过编译器来优化编译字节码。基于字节码和编译器，又介绍了 JIT 技术。最后延伸说明了下优化 JavaScript 性能的一些策略。其中，我认为AST是非常重要

原创 【浏览器原理】垃圾回收

脑图大家可以通过分析以下代码研究一下垃圾回收机制：function foo(){ var a = 1 var b = {name:" a "} function showName(){ var c = " b " var d = {name:" b "} } showName()}foo()

原创 【浏览器原理】内存机制

脑图相信学过JavaScript的童鞋应该对栈和堆都不陌生，所以这块没什么好说的了。通过堆栈就可以解释闭包开辟的空间closursefunction foo() { var myName = " a " let test1 = 1 const test2 = 2 var innerBar = { setName:function(newName){ myName = newName }, get

原创 【浏览器原理】This

脑图可以根据以下代码理解脑图内容：var myObj = { name : " a ", showThis: function(){ this.name = " b " console.log(this) }}var foo = myObj.showThisfoo()var myObj = { name : " a ", showThis: function(){ console.log(this) }}myObj.showThis()

原创 【浏览器原理】作用域链

脑图可以根据以下代码感受作用域链：function bar() { var myName = " a " let test1 = 100 if (1) { let myName = " b " console.log(test) }}function foo() { var myName = " c " let test = 2 { let test = 3 bar()

原创 【浏览器原理】块级作用域（ES6）

脑图代码思考：var myname = " a "function showName(){ console.log(myname); if(0){ var myname = " b " } console.log(myname);}showName()输出：undefined undefinedfunction foo(){ for (var i = 0; i < 7; i++) { } console.log(i); }foo()输出：7

原创 【浏览器原理】调用栈

脑图

原创 微信小程序 问题

Page “pages/“ has not been registered yet

原创 【浏览器原理】变量提升

脑图

原创 【浏览器原理】渲染流程

脑图

原创 【浏览器原理】导航流程

脑图

原创 【浏览器原理】HTTP流程

脑图

原创 【浏览器原理】TCP/IP协议

脑图

原创 【浏览器原理】Chrome架构

近期在学习，导出脑图

原创 ionic : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ionic.ps1，因为在此系统上禁止运行脚本。

最近需要使用ionic做平板app，所以想研究一下，不过刚开始就遇到了一个麻烦。运行安装后，创建项目时，报错：ionic : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ionic.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ ionic -versi

原创 【uniapp】Table固定首行、列，能够分级

已将前期写的uniapp表格组件封装成组件，上传至uniapp组件库。可以根据以下api进行使用，此组件只适用于app端（因为浏览器环境就可以正常写了，不用这么麻烦）。组件地址：添加链接描述Table 固定首列、首行主要提供能table首列、首行功能根据主题颜色变化：属性值类型说明tableHeaderobject固定首行时，头部数据classifyDataobject传入的最左侧大分类数据headerKeystring当不使用slot修改头

原创 【uniapp】sass主题切换

已将前期写的uniapp主题转换弄成了一个项目，上传至uniapp组件库。可以根据以下api进行主题切换，此组件只适用于app端（因为浏览器环境就可以正常写了，不用这么麻烦）。组件地址：添加链接描述Theme 主题切换主要使用scss与vuex支持uniapp主题切换使用方法：①安装npm install ②使用template调用示例：:class="[vtheme,'content']"scss调用示例：.content { @include base-backgro

原创 【uniapp】悬浮球（floatball）全局组件——全局消息提醒功能

已将前期写的全局组件（消息提醒）封装完毕，上传至uniapp组件库。组件能够全局显示，不用每个组件都引用。此组件只适用于app端。组件地址：添加链接描述Floatball 悬浮球主要用于移动端app全局显示悬浮球，进行展示及跳转使用方法：①安装vuexnpm install vuex -D③copy插件中mixins，并在项目main.js引入，如：import mixin from './mixins/index.js'Vue.use(mixin)④copy插件中store，并

原创 【uniapp】确认框（confirm）组件

原创 uniapp自定义封装确认框

uniapp 确认框

原创 vue利用postcss-px2rem、rem做PC端适配

vue实现响应式rem，利用插件postcss-px2rem

原创 离线百度地图使用

离线百度地图使用

原创 NG-ZORRO的form不验证多选解决方法之一

解决使用angular的NG-ZORRO UI框架，form组件不验证多选问题

原创 控制手机物理返回键双击退出

在vue项目中使用：document.addEventListener("backbutton", this.onBackKeyDown, false);onBackKeyDown() { document.removeEventListener("backbutton", this.onBackKeyDown, false); // 注销返回键 document.addEventListener("backbutton", this.exitApp, false); //绑定

原创 uniapp 滑块封装

最近在做uniapp，需要一个滑块的组件，刚开始写了一个小滑块就两个内容，来回滑。后来项目有又个大的滑块，项目是动态加载的，还需要有动态效果，就又写了一个。效果图：点击时，会有滑动效果，上代码：/** * 弹窗组件 made by jidzh * * 最后修改时间：2021-09-10 * * 传入参数： * switchNames：滑块name数组 * widthItem：每个滑块的宽度 * componentName：引用组件时，多次使用需要给一个唯一名称 * currentN

原创 uniapp 弹出框二次封装

近期一直在做uniapp，所以自己封装了几个组件，是在uniapp提供组件的基础上进行的二次封装，感觉还是挺实用的，先贴个弹出框的，上代码：/** * 弹窗组件 made by jidzh * * 最后修改时间：2021-03-18 * * 传入参数： * filterArray：循环数组 * title：标题 * mode：单选（single）、多选（multiple），默认值为single * backgroundColor：背景颜色（可传入主题），默认值为#fff * width

原创 __proto__、prototype、constructor

①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们..

原创 Event Loop总结

首先，明确浏览器是多线程的，而js是单线程，至于为什么是单线程，阮一峰大神的博客是这么说的：原因大概是不想让浏览器变得太复杂，因为多线程需要共享资源、且有可能修改彼此的运行结果，对于一种网页脚本语言来说，这就太复杂了。后来就约定俗成，JavaScript为一种单线程语言。（Worker API可以实现多线程，但是JavaScript本身始终是单线程的。）其次，明确Event Loop是一个程序结构，译为事件循环，用于等待和发送消息和事件，主要是连接主线程与负责主线程与其他进程（主要是各种I/O操作）的.

转载 _proto_与prototype的关系及区别

__proto__与prototype这两个原型属性大概在学习前端的过程中多多少少都接触过，但是不经常用基本就忘了，不过面试的时候经常会被问到，然后就一脸懵逼的蒙混过关，总觉得这样不太好，所以看了些文章，觉得这位大神写的非常不错，简单易懂，贴给大家看看，共同学习！原型是javascript面向对象编程中非常重要的概念，而且并不是那么容易懂。偶然看到一个题目：阐述proto和prototype的关系。看到这个问题的时候，我的脑海浮现出一些概念，但却说不出来。先来看一张图如果能看懂图中的关系基本上就可以解

原创 为什么使用{}.toString.call判断类型

最近在看jquery源码的时候，发现自己有好多基础知识都没有掌握，看来需要慢慢补足基础。jquery在判断变量类型的时候，用到了{}.toString.call方法，一般我在判断类型的时候都会用typeof，那么为什么不直接用typeof呢？度娘了一番，再通过自己的尝试，发现typeof确实不会每种类型都能判断。var a;console.log(typeof a);// undefinedvar b = null;console.log(typeof b);// objectvar c = un

原创 uniapp 封装固定表头、固定列表格

最近又有个很烦的需求，就是要在平板上渲染一张大表格，而且表格需要在向上滚动时固定表头，向左滚动时固定左侧列，uniapp是不支持table的，网上的也很难找到合适的组件，这就尴尬了。第一时间想的是用scroll-view来做，也真就这么搞了，也搞出来，通过各种计算固定了表头和左侧列，但是最让人头疼的问题就是性能太低，H5端没问题，移动端在滚动的时候会有延迟效果，而且滚动快了会错位，还有就是抖动，硬伤！后来想到了sticky，尝试了一下，还真可行，写了个组件，由于是给项目写的，封装具有局限性，大家有能用得

原创 为什么vue创建不用es6中class而是用函数

看vue源码的时候，发现在创建vue时用的是function而不是class。由于对class用的较少，真心不知道二者的区别在哪里，所以百度一下，发现网上的答案真心不清不楚：function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called wit

原创 为啥不建议写内联样式？

最近有个小问题，就是在写页面的时候要尽量避免用内联样式，那么为啥？可能是从开始学习的时候就避免写内联，觉得不美观，js也不便操作。然后，想了想会不会是因为css会阻塞dom树的渲染呢？查完以后，发现dom和css是同时进行加载，然后组成dom树的渲染，就是说，如果css没加载完，dom树肯定也是不能被渲染的。然后，由于js是要操作dom和css，所以但凡这俩有一个没加载完，都会影响js的操作，也就是会阻塞js。综上，可以总结出内联样式（style）与css样式的优缺点：css样式：优点

原创 uniapp全局组件（消息提醒）

书接上回，上个帖子写的主题切换，这个该写全局组件了，也是相互写着写着发现功能竟然有全局的，又是因为没有根组件[擦汗]，ps：下次如果用uniapp，必须要做全产品功能，然后想好到底怎么搭这个框架！！！好了，接下来就是说下这帖子我的需求。项目有个消息提醒功能，累死就是一个悬浮按钮，全局显示，一来消息，上面的数字就会变化，功能很简单，但是在uniapp实现起来却有点麻烦。网上有很多老铁给的方法很通用啊，就是写个公共组件，然后每个组件都引用一遍，这里我想大喊一声，卧槽（我屮艸芔茻），如果我想这么麻烦那干嘛还来

原创 uniapp主题切换

uniapp主题切换近期公司一直在搞uniapp，搞着搞着发现最麻烦的就是没有根元素，导致好多功能在开发中非常麻烦，近期遇到两个：由于前期对uniapp考察不是很全面，导致在功能开发1/3以后才发现没有一个公共头，这时发现没法全局收发消息；主题前期有人搞，接手的时候发现是通过localstorage做的，感觉有点点low，而且是从后台传过来的，根本没必要，还会越存越多。这篇先提个解决主题的办法。网上找了一些解决方案，发现基本的思路都是通过vuex将颜色存起来，然后在每个页面引用后style，个