前端
关注
分享
扫一扫
文章平均质量分 73
主要包括：Javascript、vue、H5、小程序、移动端适配等
.︶ㄣ☆.'龍
前后端都略懂略懂略懂，Flutter也略懂。。。共同学习，共同成长～
展开
-
GoGoCode工具让Vue2升级到Vue3更轻松
Vue3 已经出来有一段时间了，很多朋友早已熟读了文档，写了好几个 Demo，馋 Composition API 等新特性已久了。无奈，在实际工作中，大部分朋友还是不得不守着成千上万行的 Vue2 老项目过日子，做一次框架升级就像给老房子装修——念头总是充沛，决心总是匮乏。其实 Vue 团队已经尽可能地减少了破坏性更新，还提供了一份细致的迁移指南[1]，条数不少，但定睛一看，大部分都是体力活，有些很简单，比如异步组件要多包上一层：还有一些就改起来有点麻烦，比如自定义指令生命周期的更名，和传入.原创 2021-09-15 12:41:11 · 3316 阅读 · 3 评论 -
Vue全局挂载组件之Vue.extend
Vue.extend 属于Vue的全局 api，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中（例如：ElementUI库），所以Vue.extend + $mount 这对组合非常有必要需要我们了解下。Vue.component文档官网用法：注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称// 注册组件，传入一个扩展过的构造器Vue.component('my-c.原创 2021-09-13 11:06:59 · 1539 阅读 · 1 评论 -
浅析--Javascript的闭包
一、概念有权访问另一个函数作用域中的变量的函数；一般情况就是在一个函数中包含另一个函数。从官方定义我们知道闭包是一个函数，只不过这个函数有[超能力]，可以访问到另一个函数的作用域。为什么说这个叫做[超能力]呢？因为我们知道函数作用域是独立的、封闭的，外部的执行环境是访问不了的，但是闭包具有这个能力和权限。那闭包是怎样的一个表现形式呢？第一，闭包是一个函数，而且存在于另一个函数当中第二，闭包可以访问到父级函数的变量，且该变量不会销毁function person(){原创 2021-06-23 15:03:07 · 112 阅读 · 0 评论 -
浅析--js的原型和原型链
proto（原型）每一个JavaScript对象(除了 null )都具有的一个属性，叫proto，这个属性会指向该对象的原型prototype（原型链）每个函数都有一个 prototype 属性，这个属性指向函数的原型对象。每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。1.prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。.原创 2021-06-23 14:46:40 · 140 阅读 · 0 评论 -
JavaScript算法篇--排序
排序算法说明:（1）对于评述算法优劣术语的说明稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面；不稳定：如果a原本在b的前面，而a=b，排序之后a可能会出现在b的后面；内排序：所有排序操作都在内存中完成；外排序：由于数据太大，因此把数据放在磁盘中，而排序通过磁盘和内存的数据传输才能进行；时间复杂度: 一个算法执行所耗费的时间。空间复杂度: 运行完一个程序所需内存的大小。(2)排序算法图片总结: 1.冒泡排序（Bubble Sort）冒泡排序须知：作为最简单的原创 2021-06-23 14:15:17 · 134 阅读 · 0 评论 -
Vue cli3 库模式搭建组件库并发布到 npm--详解
市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。所以本文的目的就是让读者能通过此文，小能做一个简单的插件供人使用，大能架构和维护一个组件库不在话下。以下一个简单的DEMO讲述从开发到上线到npm的流程。一、技术栈如何通过新版脚手架创建项目，这里就不提了，自行看官方文档。Vue-cli3: 新版脚手架的库模式，可以让我们很轻..原创 2021-06-23 13:48:29 · 2194 阅读 · 3 评论 -
JavaScript算法篇--递归
定义：递归函数就是在函数体内调用本函数；递归函数的使用要注意函数终止条件避免死循环；特点：每个递归都有一个结束递归的条件，每一个递归都会在函数内部把函数本身调用一次，但是函数在每次运行的时候，都会发生一些变化，用来触发递归的结束。1.某些时候递归能替换for循环我们先看一下如下2个例子：var arrList = [1,2,3,5,100,500,10000,10000,1000,10000002] //for循环测试 function forTest(){ ..原创 2021-06-23 10:56:07 · 2544 阅读 · 1 评论 -
JavaScript四则运算--进阶篇
背景：由于js在做浮点型数字的计算时，容易出现精度丢失的情况，为了处理这一问题，特编写四则运算的工具类。原理：运用了我们小学所学的算术的小数相乘/相加/相减/相除后小数位的变化规律来进行精度的换算首先，我们可以看一个例子，如下图：四则运算工具类如下：/** * 解决两个数相加精度丢失问题 * @param a * @param b * @returns {Number} */function floatAdd(a, b) { var c, d, e; ..原创 2021-06-23 10:42:12 · 836 阅读 · 0 评论 -
VUE的双向绑定原理及实现
前言使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位：代码： 效果图：是不是看起来跟vue的使用方式差不多？接下来就来从原理到实现，从简到难一步一步来实现这个SelfVue。由于本文只是为了学习和分享，所...转载 2021-05-27 15:15:40 · 327 阅读 · 0 评论 -
深入解读VUE中的异步渲染的实现
这篇文章主要介绍了深入解读VUE中的异步渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧接下来在本文里一起看看当数据变化时，从源码层面逐步分析一下触发页面的响应动作之后，如何做渲染到页面上，展示到用户层面的。同时也会了解在Vue中的异步方法NextTick的源码实现，看一看NextTick方法与浏览器的异步API有何联系。注意，本文涉及的Vue源码版本为2.6.11。什么是异步渲染？这个问题应该先要做一个.原创 2021-05-27 10:35:11 · 1608 阅读 · 6 评论 -
浅谈Vue中的$nextTick的使用
$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。假设我们更改了某个dom元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要dom更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中；先来第一个例子看一看<template> <section>..转载 2021-05-26 16:28:28 · 122 阅读 · 0 评论 -
浅谈Vue中的$set的使用
用于手动让vue实现动态绑定数据在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue $set</tit..原创 2021-05-26 16:25:10 · 527 阅读 · 0 评论 -
vue.js的两大核心（数据驱动、组件系统）
vue.js的两大核心：1. 数据驱动2.组件系统1. 数据驱动，也就是数据的双向绑定数据发生变化后，会重新对页面渲染，这就是Vue响应式，那么这一切是怎么做到的呢？想完成这个过程，我们需要：侦测数据的变化 收集视图依赖了哪些数据 数据变化时，自动“通知”需要更新的视图部分，并进行更新对应专业俗语分别是：数据劫持 / 数据代理 依赖收集 发布订阅模式也就是说：Vue 响应式核心就是，getter 的时候会收集依赖，setter 的时候会触发依赖更新v...转载 2021-05-26 16:00:22 · 283 阅读 · 0 评论 -
15个常用的JS正则表达式（汇总）
在表单验证中，使用正则表达式来验证正确与否是一个很频繁的操作，本文收集整理了15个常用的JavaScript正则表达式，其中包括用户名、密码强度、整数、数字、电子邮件地址（Email）、手机号码、身份证号、URL地址、 IPv4地址、 十六进制颜色、 日期、 QQ号码、 微信号、车牌号、中文正则。1、 用户名正则//用户名正则，4到16位（字母，数字，下划线，减号）var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;//输出 trueconsole.log(uP.转载 2021-05-26 10:22:37 · 2449 阅读 · 0 评论 -
原生App项目集成flutter混合开发详细指南
方案选择目前主流的混合开发方案有两种集成方式：源码集成：也就是谷歌官方提供的方案[https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps]产物集成：Flutter项目单独开发，开发完成后发布成aar包或者iOS的framework形式，原生项目依赖flutter输出的制品即可。具体可以参考闲鱼的文章两种方式各有优劣，其实产物集成更好一些，不过即使是进行产物集成，也需要弄懂源码集成的方式，因为当有很多和.转载 2021-05-25 11:47:36 · 332 阅读 · 0 评论 -
深入理解 Dart 空安全
本文为 Dart 空安全的经典详解，其详细且全面地展开说明了 Dart 处理空安全采用的原则、具体实现和技术细节，对于众多 Dart 开发者而言是不可错过的精华内容。无论您是否已经成为了 Dart 专家，相信在阅读后都会感到受益匪浅。所以，倒一杯清甜的茶，找一张舒适的椅子，让我们带您进入空安全之旅吧！自 Dart 2.0 替换了静态可选类型系统为健全的静态类型系统后，空安全是我们对 Dart 作出最大的改变。在 Dart 初始之际，编译时的空安全是一项少有且需要大量时间推进的功能。时至今日，Kot..转载 2021-05-25 11:27:32 · 787 阅读 · 0 评论 -
javascript阻止冒泡和默认行为
js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。在说事件冒泡之前，我们先说说事件对象（Event）Event在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息） 所有浏览器都支持Event对象，但支持方式不同 IE中的事件对象：window.event/.原创 2021-05-20 14:53:29 · 257 阅读 · 1 评论 -
通过Debugx5在电脑端调试微信页面
1.手机通过数据线连接电脑，进入USB调试模式2.微信打开X5调试页面：http://debugx5.qq.com，也可直接扫描二维码3.勾选“打开TBS内核Inspector调试功能”和“打开vConsole调试功能”4.在谷歌浏览器地址栏输入 chrome://inspect/#devices，可以看到手机型号与调试链接，点击“inspect”5.成功，弹出调试窗口。...转载 2021-05-19 17:05:31 · 1811 阅读 · 0 评论 -
浅析js浅拷贝与深拷贝的区别和实现方式
前言如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。从专业角度来说：浅拷贝：有两种方式，一种是把一个对象里面的所有的属性值和方法都复制给另一个对象，另一种是直接把一个对象赋给另一个对象，使得两个都指向同一个对象。深拷贝：把一个对象的属性和方法一个个找出来，在另一个对象中开辟对应的空间，一个个存储到另一个对象中。两者就在于，浅拷贝只是简单的复制，对对象里面...原创 2021-05-19 14:32:08 · 130 阅读 · 0 评论 -
浅析js数组中常用的方法及用法
1.push(newelement1,newelement2,....,newelementX)：向数组的末尾添加一个或多个元素，并返回新的长度。（1）返回值：返回值为数组的新长度。（2）原数组发生改变。（3）参数：参数为新添加的元素（可以是1个也可以是多个，提示：至少添加一个元素，参数不可为空）。newelement1：必须。要添加到数组的第一个元素。newelement2：可选。要添加到数组的第二个元素。newelementX：可选。可添加多个元素。var arr = [1,2,3,4原创 2021-05-19 14:22:12 · 185 阅读 · 0 评论 -
浅析Vue.js 2.0源码--前端渲染
一、前言Vue.js框架是目前比较火的MVVM框架之一，简单易上手的学习曲线，友好的官方文档，配套的构建工具，让Vue.js在2016大放异彩，大有赶超React之势。前不久Vue.js 2.0正式版已出，在体积优化（相比1.0减少了50%）、性能提升（相比1.0提升60%）、API优化等各方面都更上一层楼。本文是系列文章，主要想通过对于Vue.js 2.0源码的分析，从代码层面解析Vue.js的实现原理，帮助读者能够更深入地理解整个框架的思想。此篇文章主要介绍前端渲染部分。不足之处还请批评指正转载 2021-05-14 14:39:07 · 221 阅读 · 0 评论 -
浅析vue-cli 3.0 脚手架cli-service服务
使用命令在一个 Vue CLI 项目中，@vue/cli-service安装了一个名为vue-cli-service的命令。你可以在 npm scripts 中以vue-cli-service、或者从终端中以./node_modules/.bin/vue-cli-service访问这个命令。这是你使用默认 preset 的项目的package.json：{ "scripts": { "serve": "vue-cli-service serve", "buil...转载 2021-05-14 11:37:15 · 1324 阅读 · 0 评论 -
H5监听移动端物理/浏览器返回键
JavaScript没有监听物理返回键的API，所以只能使用 popstate 事件监听。工具类如下：export function handleBrowserGoBack(back){ console.log("back"); pushHistory(); addPopstateListener(back);}/** * 向历史记录中插入了当前页 */function pushHistory() { let hash = lo...原创 2021-05-10 11:39:59 · 3552 阅读 · 0 评论 -
H5移动端调试神器-eruda.js
Eruda是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。在main.js中添加如下代码if(process.env.NODE_ENV == 'development' || process.env.NODE_ENV == 'testing'){ let src = '//cdn.jsdelivr.net/npm/eru...原创 2021-05-10 11:37:46 · 1055 阅读 · 0 评论 -
页面锚点，点击跳转页面某固定位置(scrollIntoView)
常用场景：页面锚点，点击跳转页面某固定位置1.element.scrollToView() （1）当页面有fixed顶部的布局时，由于fixed布局的元素脱离文档流，被scrollToView()的元素会被置顶到页面最顶部，导致部分被fixed布局的元素遮挡，因此不太适用。 （2）可用于页面没有fixed布局，常见的是顶部需要固定位置时可用element.scrollToView()，但是当点击的元素没有当前页面的高度（100vh）时，会出现整个页面上移的情况。 此时可用的解...原创 2021-05-10 11:35:15 · 1941 阅读 · 0 评论 -
浅析移动端滚动条处理方案
滚动体属性：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb）::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置::-webkit-scrollbar-track-...原创 2021-05-10 11:32:48 · 1084 阅读 · 0 评论 -
基于vue+vant的移动端适配（亲测有效）
1.下载lib-flexible --savenpm i lib-flexible --save2.在main.js中引入lib-flexiblemain.jsimport 'lib-flexible/flexible'3.设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">4.安装po原创 2021-05-10 11:27:03 · 1661 阅读 · 3 评论 -
iPhoneX安全区域H5的屏幕适配
在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况。具体方案如下：使用苹果官方推出适配方案css函数env()、constant()来适配env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：safe-area-inset-left：安全区域距离...原创 2021-05-10 11:30:20 · 640 阅读 · 0 评论 -
浅析Axios的使用
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF安装使用 npm:$ npm install axios使用 bower:$ bower install axios使用 cdn...转载 2021-05-14 10:00:01 · 125 阅读 · 0 评论 -
浅析css——mixin及其用法
@mixin：@mixin指令允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），混入(@mixin)还可以包含所有的 CSS 规则，以及任何其他在 Sass 文档中被允许使用的东西，甚至可以携带 arguments，引入变量等，这就意味着只需少量的混入(@mixin)代码就能输出多样化且不重复的样式。下面一Sass为例讲解一下mixin的使用：@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）.原创 2021-05-14 09:44:30 · 2375 阅读 · 0 评论 -
浅析vue——mixins（混入）的使用
mixins基础概况vue中的解释是这样的，如果觉得语言枯燥的可以自行跳过嘿~混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。怎么用？举个栗子：定义一个混入对象把混入对象混入到当前的组件中用法似不似相当简单呀mixins的特点1 方法和参数在各组件中不共享混合对象中的参数num组件1中的参数num进行+1的操作组件2中的参转载 2021-05-11 16:18:30 · 126 阅读 · 0 评论 -
浅析Javascript——async/await
一、async带async关键字的函数，是声明异步函数，返回值是promise对象，如果async关键字函数返回的不是promise，会自动用Promise.resolve()包装。async function test() { return 'test'}test();返回值为Promise {<resolved>: "test"}。二、awaitawait等待右侧表达式的结果，这个结果是promise对象或者其他值。如果它等到的不是一个 promise .原创 2021-05-11 14:41:24 · 222 阅读 · 0 评论 -
浅析Javascript——Promise 对象
PromisePromise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。特点对象的状态不受外界影响 （3种状态） Pending状态（进行中） Fulfilled状态（已成功） Rejected状态（已失败） 一旦状态改变就不会再变 （两种状态改变：成功或失败） Pending -> Fulfilled Pending -> R原创 2021-05-11 10:13:19 · 105 阅读 · 0 评论