分类：封装

2021
08-23

详解JavaScript面向对象实战之封装拖拽对象

目录概述1、如何让一个DOM元素动起来2、如何获取当前浏览器支持的transform兼容写法3、如何获取元素的初始位置5、我们需要用到哪些事件？6、拖拽的原理7、我又来推荐思维导图辅助写代码了8、代码实现part1、准备工作part2、功能函数part3、声明三个事件的回调函数9、封装拖拽对象概述为了能够帮助大家了解更多的方式与进行对比，我会使用三种不同的方式来实现拖拽。不封装对象直接实现；利用原生JavaScript封装拖拽对象；... 继续阅读 >

2021
01-21

element el-table表格的二次封装实现(附表格高度自适应)

前言在公司实习使用vue+element-ui框架进行前端开发，使用表格el-table较为多，有些业务逻辑比较相似，有些地方使用的重复性高，如果多个页面使用相同的功能，就要多次重复写逻辑上差不多的代码，所以打算对表格这个组件进行封装，将相同的代码和逻辑封装在一起，把不同的业务逻辑抽离出来。话不多说，下面就来实现一下吧。一、原生el-tbale代码——简单の封装这里直接引用官方的基础使用模板，直接抄过来(✪ω✪)，下... 继续阅读 >

2021
01-08

SuperSocket封装成C#类库的步骤

将SuperSocket封装成类库之后可以将其集成进各种类型的应用，而不仅仅局限于控制台应用程序了，从而应用于不同的场景。这里以TelnetServer为例说明如何进行操作。首先，创建一个C#类库项目LibSocketServer添加SuperSocket引用（SuperSocket.Common.dll，SuperSocket.SocketBase.dll，SuperSocket.SocketEngine.dll），添加默认的日志框架log4net.dll引用。将log4net.config拷贝到项目文件夹的“Config”文件夹，然后设置它的“生成... 继续阅读 >

2020
12-26

在vue项目中封装echarts的步骤

为什么需要封装echarts每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题我希望这个echarts组件能设计成什么样业务数据和样式配置数据分离，我只需要传入业务数据... 继续阅读 >

2020
11-25

记录一次websocket封装的过程

在一个应用中，websocket一般都是以单例形式存在的，即在整个应用中，websocket实例始终保持唯一。但有时我们要用到websocket实例的时候，可能websocket还没实例化，所以要做成异步的形式来获取实例。一、封装。先创建socket.ts文件importEventEmitterfrom'events';//这里用到了events包constee=newEventEmitter();classWs{privatewsUrl:string='';privatesocket:WebSocket|undefined;//socket实例pri... 继续阅读 >

2020
11-17

vue 封装面包屑组件教程

我看过一篇关于程序员写博客的文章，他说很多的程序员过了两年写了很多的代码，但是回想起来自己具体做了哪些技术点，遇到坑几乎没有印象，所以说文字是记录的最好方式，好记性不如烂笔头，可以方便自己以后查看，在写的过程中也会再加深一遍印象，我也来折腾折腾。第一次写文章就写一个比较有意义的吧，18年四月末来到目前所在的这家公司，熟悉了一周环境和代码后，新的任务就是使用vue+element-ui来重构之前老版本的项目，我主要... 继续阅读 >

2020
11-06

Java Mail邮件发送如何实现简单封装

首先每次发送需要配置的东西很多，包括发件人的邮箱和密码、smtp服务器和SMTP端口号等信息。其次，没有将发送和邮件内容相分离。按照单一职责原则，应该有且仅有一个原因引起类的变更[1]。最后一个问题是，我们的代码不仅自己用，也很可能让别人调用。别人调用的时候不想去了解邮件发送的细节，调用的人只想传尽量少的参数获得预期的效果。因此让Demo变成可以使用的代码需要我们重新设计代码的结构。从Demo中我们可以抽象出两种类... 继续阅读 >

2020
10-28

vue.js封装switch开关组件的操作

我的项目本来用的element，但是switch开关不符合设计要求，于是自己封装了一个switch组件，并且实现了switch开关的双向数据绑定<template><labelrole="checkbox":class="['switch',{toggled}]"><inputtype="checkbox"class="switch-input"@change="toggle"/><divclass="switch-core":style="{backgroundColor:toggled?colorChecked:colorUnchecked}"><divclass="switch-button":style="{transition:`transfor... 继续阅读 >

2020
10-24

如何通过Proxy实现JSBridge模块化封装

最近公司在做一个项目，通过把我们自己的Webview植入第三方APP，然后我们的业务全部通过H5实现。至于为什么不直接用第三方APPWebView,主要是身处金融行业，需要做一些风控相关功能。由于是HybridAPP的性质，所以web与Native的通信是无法避免的；而为什么我要封装jsBridge，主要在于下面两点：公司APP的JSBridge提供了数据的序列化和全局函数的注入，而我们这次由于包大小考虑，这一块需要H5自己来实现；原生提供的接口协议太多，... 继续阅读 >

2020
10-10

关于Jackson的JSON工具类封装 JsonUtils用法

直接上代码，都有注释，一看就懂，完全满足日常开发需求importcom.fasterxml.jackson.annotation.JsonInclude.Include;importcom.fasterxml.jackson.core.JsonProcessingException;importcom.fasterxml.jackson.core.type.TypeReference;importcom.fasterxml.jackson.databind.DeserializationFeature;importcom.fasterxml.jackson.databind.ObjectMapper;importcom.fasterxml.jackson.databind.SerializationFeature;import... 继续阅读 >

2020
10-10

结合axios对项目中的api请求进行封装操作

痛点：1.后端对全部请求的url进行了调整。2.后端要求给所有的请求头部添加一个token，或者对请求添加其他全局处理。3.请求代码直接写在每个页面里，看起来代码臃肿，不够简练，太难管理。4.看到请求代码,不明白该请求是干嘛的，语义化不够明显。...上面列举的是一些常见的问题，如果没对api进行封装，当请求比较多的时候，修改起来欲哭无泪，解决这些问题可以进行以下操作1.对axios进行二次封装2.对全部api请求也进行封装如下... 继续阅读 >

2020
10-10

Vue封装Axios请求和拦截器的步骤

PS：本文代码在vue-cli3构建的基础vue项目之上进行编写：vuecreatemy-projectaxios是一个基于promise的http库，可以用在浏览器和node.js中,也是vue官方推荐使用的http库。axios很好用，其中之一就是它的拦截器十分强大，我们可以为请求和响应设置拦截器，比如请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便，响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权。... 继续阅读 >

2020
10-09

Java封装统一的Result Model案例

在开发过程中，有时候会需要使用错误码+错误信息的形式，来返回某些业务操作的错误结果信息，来代替效率较低的异常传递。这样就需要封装一个统一的Resultmodel作为返回值，代替直接返回数据等结果。1.定义错误码-错误信息接口错误码可能是String、Integer、Long等类型，也可能是enum类型。因此这里使用泛型来代替，错误码类型，可以提高灵活性。也可以通过枚举直接实现CodeMessage接口。publicinterfaceCodeMessage<C>{Cg... 继续阅读 >

2020
10-09

java方法通用返回结果集封装操作

我们在封装方法的时候，有的时候除了需要返回数据结果集data，有的时候需要返回code(或者status)或者msg,此时可以采取下面两种方式进行封装方法的返回值：一.返回结果使用HashMap接收1.方法中的数据封装到hashmap中publicMap<String,Object>result(Objectobject){Map<String,Object>result=newHashMap<String,Object>();result.put("status","1");result.put("msg","成功");if(条件1不通过校验){... 继续阅读 >

2020
10-09

Android封装对原生Log进行封装的操作

我就废话不多说了，大家还是直接看代码吧~packagecom.zjx.taobaounion.utils;importandroid.util.Log;publicclassLogUtils{privatestaticintcurrentLev=4;//当前log等级上线之后控制这个等级就可以减少Log的输出privatestaticfinalintDEBUG_LEV=4;//debug等级privatestaticfinalintINFO_LEV=3;//info等级privatestaticfinalintWARNING_LEV=2;//warning等级privatestaticfinalint... 继续阅读 >

2020
10-09

封装 axios+promise通用请求函数操作

我就废话不多说了，大家还是直接看代码吧~importaxiosfrom"axios";importbaseUrlfrom"../../setBaseUrl";axios.defaults.baseURL=baseUrl;import{Loading,Message}from"element-ui";constloadingOptions={lock:true,text:"拼命加载中",spinner:"el-icon-loading",background:"rgba(0,0,0,0.7)"};if(localStorage.token){axios.defaults.headers.common["x-token"]=localStorage.token;}constHtt... 继续阅读 >