首展噼里啪啦前端团队-CSDN博客

原创通过生命周期梳理vue组件化流程

初始化流程new Vue从 new Vue 开始作为入口，Vue 只是一个简单的构造函数。function Vue (options) { this._init(options)}进入了 _init 函数之后，先初始化了一些属性。initLifecycle：初始化一些属性如：$parent$children根实例没有 $ parent，parent，parent， $children 开始是空数组，直到它的子组件实例进入到 initLifecycle 时，才会往父组件的 $

2021-12-29 10:43:35 654

原创剖析promise

一、分析promise之前，先了解清楚EventLoop事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop即事件循环。是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。先执行 Script 脚本，然后清空微任务队列，然后开始下一轮事件循环，继续先执行宏任务，再清空微任务队列，如此往复。二、宏任务和微任务因为js的一大特点是单线程，为了协调事件，交互渲染等等行为，防止主线程的阻塞，js有两种任务的执行

2021-12-06 11:43:35 396

原创 v-model

默认元素v-model：vue 中的v-model 实现了对数据的双向绑定，即数据->模版，模版-> 数据的绑定，例如：<input type="text" v-model="message"><p>{{message}}</p>v-model 是经过vue封装后的一个指令，目的是方便我们使用，它内部真实的实现方式：<input :value="message" @input="message = $event.target.value

2021-11-05 14:21:43 199

原创常用复制对象方法效率对比

1.背景在我们日常代码中，经常会用到对象之间的相互转换，将一个对象的属性复制赋值给另一个对象。今天我们就来测试下常见的几种复制对象的方法效率问题。2.实体类我们先准备两个实体类用于复制对象，一个是StudentFirst，另一个是StudentSecond，里面即包含了一些相同的属性也有不同的属性，为了后续效率的比较还专门设置了几个复杂属性。这里的两个实体类纯粹为了验证复制方法的效率，没有其他意义。 public enum SexEnum { Undefined = 0,

2021-09-01 18:10:15 487

原创图片处理二--使用OpenCV库实现图片膨胀腐蚀

1.什么是形态学操作？形态学操作就是基于形状的一系列图像处理操作。通过将结构元素作用于输入图像来产生输出图像最基本的形态学操作有二：腐蚀与膨胀(Erosion 与 Dilation)。他们的运用广泛:消除噪声分割独立的图像元素，以及连接(相邻的元素。寻找图像中的明显的极大值区域或极小值区域。腐蚀和膨胀都是针对白色部分（高亮部分）而言的2.二值化处理首先，在讲膨胀腐蚀之前，先来看一下如何实现图片二值化。因为不管是膨胀还是腐蚀，图像都必须先二值化处理介绍一下二值化处理方法Threshol

2021-09-01 17:24:15 1646

原创深入理解this

在this的学习中需要明确的一件事就是this既不指向函数本身，也不指向函数的词法作用域，this属于动态词法，运行时才会决定真正的指向，完全取决于函数在哪里被调用。this关键字是JavaScript中极其复杂的机制之一，它会被自动定义在函数作用域内，在缺乏清晰的认知下，this完全是一种魔法。任何足够先进的技术都和魔法无异。 ——Arthur C. Clarke调用位置在理解this指向前先要明白一个概念: 调用位置，调

2021-06-28 20:57:48 132

原创 weex开发总结2

weex+vue项目使用ts开发接入TypeScript网上关于weex接入TypeScript的文章相当的少，仅存能找到的几篇还都是重复的，按照上面的步骤来做了之后并不能正常运行，关于vue2.0改造ts的文章倒是不少，于是先新建了一个vue2.0项目，尝试改造了ts开发，发现主要是webpack和ts的版本限制比较大，两者版本要对应起来，不然就会出现报错情况。然后简单进行了总结，如以下几点：1、添加ts 环境依赖，根据自己的需要升级相关依赖或者有影响的包，下载ts执行环境需要的依赖。2、生成t

2021-06-01 18:16:35 413

原创 TinyMessenger实现分发/订阅源码理解

1.TinyMessenger实现分发/订阅功能最简单使用首先，我们需要一个对象作为我们发送消息和接收消息的中转站：TinyMessengerHubTinyMessengerHub在源码里解释为：负责订阅/发布和传递消息的消息核心TinyMessengerHub MessageHub = new TinyMessengerHub();MessageHub 对象可以引申出我们所需要的分发消息方法-----MessageHub.Publish(TMessage)-----MessageHub

2021-05-31 19:19:42 869

原创 weex开发历程

开发之前需要安装的依赖和工具，这里就不再赘述了，按照官方文档上一步步来都可以，如果出现问题网上搜一下都可以解决。这里主要讲在实际项目开发中所遇到的问题（偏向于web端）。开发：配置多页面入口：在configs文件夹下，有一个webpack.common.conf.js，这个文件是所有环境的公共配置文件，里面设置了weex与web的出入口配置（webEntry 和 weexEntry），这边要改成多页，就意味着需要把入口文件改成多个配置的。原始配置：// weex的入口配置，但是这边是单

2021-05-21 18:01:35 417 1

原创简单工厂设计模式

定义简单工厂：提供一个工厂类（Factory），负责对象的创建。工厂类的引入创建一个控制台应用程序，假设以魔兽世界的4大种族为例，分别是Ne(暗夜精灵)、Orc(兽族)、Undead(不死族)、Human(人类)，它们都有一个共同的ShowKing()方法，上端在调用的时候，我们一般是new一个对象：{ Human human = new Human(); human.ShowKing();}这个时候我们来看，上端调用的代码，直接引用Human类创建对象，类在这里就是细节

2021-04-28 09:54:11 130

原创 AST抽象语法树

一、什么是AST抽象语法树?抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，一种编程语言的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。通常我们在书写代码时候，都是按照语法规则的，是方便开发者阅读和理解，但是对于编译器等工具来说，它可以理解的就是抽象语法树了，我们可以看下const abc = 5生成的图形化语法的样子:（图一）二、AST如何产生？通常生成AST树需要两个阶段：...

2021-04-23 14:12:32 1189 1

原创 iOS compare字符串的比较相关的使用略微整理

从前，有一个程序员，他得到了一盏神灯。灯神答应实现他一个愿望。然后他向神灯许愿，希望在有生之年能写一个好项目。后来....后来..... 他得到了永生。关于字符串，这里我总结一些方法案例：一、compare:（判断两对象值的大小，按字母顺序进行比较）NSString*string =@"9.1.1";[stringcompare:@"9.1.1"];返回的类型是NSComparisonResult 的NSOrderedSame（= 等于）...

2021-04-23 14:11:40 520

原创图片上传

在我们日常的项目开发中，图片上传是一个很常见的需求。一些常见的UI框架都已经集成了图片上传组件，然而有时候这些组件并不能满足我们的需求，这时候就需要自己写组件实现上传，这就需要弄懂上传的原理以及里面的知识点。本次我就通过简单的代码，为大家解析图片上传的各个知识点。1、传统图片上传服务器前端通过<input type="file"/>获取上传文件，然后通过ajax的post(设置type为multipart/form-data)上传后端，后端取到文件后保存至服务器并返回路径。2、微.

2021-04-22 20:46:28 635

原创 Android推送语音优化之路

首先跟大家介绍两个核心关键词：通知、透传，通知是发送后会在系统通知栏展现，同时响铃或震动提醒用户，并且点击通知栏可以自定义点击行为，透传是发送后消息后台处理，用户无感知，在相应方法中回调，执行对应操作。付呗app作为一款我们公司主要的移动收单应用，为商户提供收款语音提醒功能，在推送语音方面面临着很大的挑战：一、语音播报的稳定性，二、推送达到率的高低；面对商户日交易量增长，商户重需求，android碎片化严重，国产品牌手机严格控制后台推送等这些问题，android客...

2021-04-22 20:44:48 440

原创 iOS关于私有api审核被拒问题解决方案

可能大家都知道iOS提交审核比较严，有些制度必须要遵守，不然就不给你通过，可能严重的还会把你的app打入冷宫。所以请善待你们身边广大iOS开发的同事。哈哈。皮一下就好，下面就给广大iOS开发一些被打回的问题排查方案，以供参考。一、问题内容首先让我们看下面的这条苹果打回的通知信息：Guideline 2.5.1 - Performance - Software RequirementsThank you for your resubmission. However, we noticed

2021-04-22 20:41:45 1063

原创 iOS优秀的图片压缩处理方案

背景：最近遇到一个图片压缩的问题，项目需求压缩图片500k以内上传服务器，还要求图片要清晰一点。事实证明500k的图片肉眼识别已经是很清晰，那就没办法了，硬着头皮上了。下面是我的一些心得体会，以及考虑到的一些方向，拿出来以供大家参考。思路：本来以为很简单的问题，自己随意写了一个UIImageJPEGRepresentation的方法进行一个循环压缩不就搞定了？后来事实证明这个想法是错的，有太多东西不是你想当然的。问题：1.为什么不提UIImagePN...

2021-04-22 20:40:17 1341

原创 HTTP发展史

前言本篇讲述的是一个快递员送包裹的故事，同时在发送包裹的过程中遇到的一系列的问题，通过讲述快递员如何快递员解决的这些问题的方法来引出相关的网络协议，并将方法与网络协议进行对比。内容主要包含四个部分，第一部分主要通过讲快递员steven ji在发送包裹的时候出现的包裹丢失、道路不通等问题来引出tcp模块的SYN、ACK和三次握手等相关概念，第二部分通过steven sao的所提供的地址别名服务来说明dns服务的基本原理，第三部分通过steven ji的业务从包裹扩展到送信来引入http的概念，第四部

2021-04-22 20:37:42 284

原创了解浏览器缓存

“这个页面你改了吗，怎么还是没变？”“那你清一下缓存看看！”在开发中我们经常会听到这样的对话，那么浏览器缓存到底是什么？他又是如何对文档进行存储的呢?一、什么是浏览器缓存简单来说，浏览器缓存就是将页面上的一些文件储存在本地磁盘中，以便下次再打开这个地址的时候快速加载页面，减少请求资源。用chrome打开我们的付呗官网，查看network刷新页面后，我们看到有些js，图片，css的size变成了form memory cache，form disk cache...

2021-04-22 20:33:55 938

原创 JS简单设计模式分享

前奏恰当的设计模式能够让代码变得更加容易维护，更加容易让人理解，同时也更加容易扩展，更新迭代。一、设计模式基本原则1、单一职责原则：一个功能一个方法只干一件事情。当下几乎所有的计算机都遵循冯诺依曼结构，将计算机分为五大部分，各部分之间相互独立相互协调，共同构成计算机的基本构架。（1）输入设备负责将信息输入到计算机中。（2）存储器负责将各种数据存储到硬盘里，并提供访问的接口。（3）运算器负责计算机的所有运算工作。（4）控制器控制各部件之间的相互协调。（5）输出设备负责将计

2021-04-22 20:16:23 137

原创客户端设计中的表现模式

前言与用户界面相关的最大的问题就是大量的凌乱的代码，表现模式（Presentation Patterns）就是围绕如何移除用户界面的复杂性，让界面更加简洁和可管理而产生的。表现模式主要包含：用户界面包含负责的逻辑用于维护界面相关对象; 包含了应用程序状态的维护; 因此，目前网络上所称的“MVP、MVC、MVVM架构”，本质上并不完全属于一种架构方式，更确切的说，是一种用户界面和逻辑处理间的一种表现模式。（注：本文并不包含iOS的VIPER模式。）...

2021-04-22 19:57:43 261

原创 c#中的委托与事件

“在C#中，委托与事件是不容易弄清楚的两个概念。本文主要介绍这两个概念以及它们的用法。”一、委托首先，我们来看委托。委托本质上是函数或方法的指针，也就是说，委托对象的值就是指向一个方法的指针。因此，对于一个委托类型，可以创建它的实例，并使这个实例指向一个具体的方法。而这个方法的签名（即方法的参数个数、每个参数的类型以及方法的返回值）必须要与委托类型的定义一致。无论方法具体完成什么功能，只要其签名与委托定义一致即可。在C#中，定义委托使用delegate关键字。来看一个例子，以下...

2021-04-22 19:54:13 530

原创图片处理--图片识别以及抗干扰处理

“由于项目中需要用到图片识别来获取图片的金额，本文主要介绍如何用OpenCv库来处理图片，识别到所需的内容以及处理内部干扰。”需要引用的Dll如下所示：使用场景介绍：1.解决背景颜色和文字颜色差异较大 2.目标数字背景有干扰线的情况 3.目标数字文本模糊的情况 4.目标文本数字之间靠拢过近情况本文以数字背景存在干扰线情况做...

2021-04-22 19:25:19 2623

原创 Vue-浅析换肤

应产品的要求，做人生中的第一次换肤项目，在没做之前，确实觉得挺没有头绪的，所以就只能借助于百度啊，然后发现其实element自带的就有换肤功能，虽然看了很多别人的文章，但是想自己写一下加深印象。一、项目搭建第一步肯定是根据命令行生成对应的项目框架，然后安装element，根据需求引入自己需要的element组件最后拿到的效果图如下：二、换肤思路搭建好了项目以后，最重要的问题就来了，如何实现换肤呢。其实主要的还是依赖于element里面的知识：vue , e...

2021-04-20 21:00:42 204

原创 Vue Test Utils

单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。在提供了经过测试的单元的情况下，系统集成过程将会大大地简化。开发人员可以将精力集中在单元之间的交互作用和全局的功能实现上，而不是陷入充满很多Bug的单元之中不能自拔。流行框架1. jestJest是一个由facebook开发的测试运行器，内置Jsdom、断言库和mock，vue-test-utils 官网评价 jsdom 由纯javascript实现的一系列 web标准，特别是 WHATWG（Web ...

2021-04-20 20:58:31 1574

原创 vue项目详情页返回列表，记录之前信息

需求场景：我们在开发后台管理系统的时候，经常会遇到这样的问题，我刚通过筛选条件筛选出来了一批数据，然后我点击到了第二页，点击进入了对应数据的详情页，查看完数据后，返回列表，这个时候之前筛选的信息不见了，页码也回到了第一页；这个时候如果需要再筛选，再重复操作的话，这样的体验是非常差的，很浪费时间；最好的体验是：我去详情之前是怎样的页面，详情返回后就是怎样的页面，保留之前的筛选条件、列表数据、分页信息等，甚至刷新也都保存之前的筛选条件；但是如果我从其他模块进入，我希望筛选条件等是清空的，从第一页开始；

2021-04-20 14:54:59 919

qq_20350847的博客