- 博客(32)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Javascript学习2：函数柯里化与运用（手写简版bind，实现柯里化）
说到js函数柯里化，我们先看一个例子吧// 普通的add函数function add(x, y) { return x + y}// Currying后function curryingAdd(x) { return function (y) { return x + y }}add(1, 2) // 3curryingAdd(1)(2) // 3像这样，把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数
2021-08-26 17:30:40
280
原创 web知识积累1：浏览器输入url到页面渲染过程1
毕业后一直在写业务代码没有好好研究一下浏览器的渲染机制偶然看到掘金里面的文章有提到了这个我就开始查阅资料并进行一些个人总结把整个从浏览器输入url到页面渲染过程主要是有三个阶段：1、浏览器解析URL的过程2、浏览器发送请求与服务器交互的过程3、浏览器对接收到的html页面渲染的过程浏览器解析URL的过程关键字：本地域名服务器LDNS，root service，主域名服务器（gTLD），Name Server域名服务器这一步是把域名解析成 IP 地址（这个过程有点像是你提供一个城市名
2021-08-20 17:05:28
181
原创 Javascript学习1：变量提升，var与let，const
本文只是记录在学习和工作中遇到的JS方面知识并提出了自己的见解和想法参考资料如下：JavaScript 教程在说JavaScript变量提升的定义之前，先看一段js代码function foo() { console.log(a); var a = 1;}foo()在执行这段代码会输出什么呢？答案如下为啥console.log(a)在var a = 1之前执行，却不会报错，而是输出一个undefined。这时候我们引出变量提升的概念：JavaScript 引擎的工作方式是
2021-08-11 11:55:43
124
原创 vue3开发2：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（二）
书接上文这里我们讲一下在vue3中ckeditor5编辑器的自定义图片上传，图片编辑功能自定义图片上传ckeditor5上传其实也有好几种方式，但是由于公司业务需求，需要带token在上传的请求中，所以只能使用自定义图片上传。（这里是直接上传服务器，而不是保存后上传）新建一个uploadImg.jsimport axios from 'axios'export default class MyUploadAdapter { constructor( loader ) {
2021-07-13 16:14:26
2392
原创 vue3开发1：在vue3项目中集成ckeditor5编辑器，自定义图片上传，图片编辑排坑（一）
最近尝试用了vue3进行开发，没想到在使用element-plus框架的时候出现了bug（一个星期后官方修复了），所以我对在项目中集成富文本插件ckeditor5比较忐忑，而且也没有vue3中集成ckeditor5的例子可以借鉴，注意这篇文档适合有一定vue2.x基础的参考这里我们先上个ckeditor5官网地址ckeditor5有很多功能版本这里我选用了document版官方提供了三种集成到项目中的方法这里可以先用npm的方法集成，在后面我们会使用下载包的方式来引入（为了图片大小编辑功能）
2021-07-13 14:48:38
3802
原创 vue服务端渲染（vue-ssr）的理解（仅限个人理解，不供参考）
开篇说明：文章资料内容参考vue-ssrssr与csr什么是服务端渲染1. 什么是服务端渲染（ssr）？SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html。服务端渲染是一种方式，不限定语言，不管是以前的jsp，php，asp.net还是现在的node.js,都可以做服务端渲染的事情。服务端渲染把一部分的视图业务逻辑交给服务端，这让服务端承受压力。2. 什么是浏览器端渲染 (CSR)？CSR是Client Side Ren
2021-06-18 10:44:52
1455
原创 npm学习1:熟悉package.json配置
在使用npm的过程中，package.json配置是我们需要熟悉的。但是有些是开发npm组件库需要配置的，对于公司项目则不需要配置也可以。下面是一些npm配置项的含义：{ "name": "test", //项目名称 "version": "1.0.0", //版本号 "description": "", //描述信息 "main": "index.js",//入口文件 "keywords":"" , //关键词 "author":"",//作者 "repository":"", //对
2021-05-28 10:12:45
181
原创 react学习之路6：安装react-tool工具
开发react一段时间了，在调试的适合一些传参和state值可能会比较麻烦，所以这里上传了一份react-devTool的插件包，给大家使用下载链接: https://pan.baidu.com/s/1PuJobxN3Rc8UNwsAH26lMg 提取码: smaq解压打开谷歌浏览器 - 更多工具 - 扩展程序...
2021-05-27 11:40:09
292
原创 react学习之路5：学习react时的一些小坑
使用react也有一段时间了，其实一直是在做项目过程中学习，所以难免会遇到一些坑。而且在写法上，react与vue有相似的地方，但如果太想当然地使用vue的写法会遇到一些坑。在Jsx语法中,处理事件需要bind(this,value),使这个事件指向这个当前组件内的funtion，写法的话我总结了几种，其中推荐第三种写法，这种写法对性能的影响是小的。//第一种 bind绑定addClick(){ let click = this.state.click this.s
2021-05-22 16:06:51
150
原创 react学习之路4：react组件的生命周期（与vue2.x对比）
学vue的朋友们都知道，vue提供给vue组件在不同阶段的生命周期都提供了不同的生命周期钩子函数，以vue2.x为例子，vue的生命周期下图，整体可以总结为4个生命周期，即create，mount，update和desdroy，每个生命周期都有对应的生命周期钩子函数来满足我们实际的开发需求。而react也一样，组件也拥有生命周期（或者说vue的生命周期可能在一定程度上借鉴了react），react的生命周期如下Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmountin
2021-05-21 11:59:47
166
原创 react学习之路3：写一个react组件
最近很少写react的项目的，怕自己会遗忘掉，所以给自己写个博客记录一下。众所周知react和vue一样，也是基于组件化开发的，那开发组件的方式有哪几种呢？我大概总结了一下我在项目中用到的方式。使用es6关键字通过class继承React.Component的方式编写组件。（状态组件）组件中需要定义构造器constructor，还需要调用父类的构造器super(props)，这样，你就可以在组件中使用reactComponent 父类提供的一些生命周期函数，使用state组件状态管理等等，是具有状态的
2021-04-25 15:48:14
129
原创 react学习之路2：react路由相关知识
上次介绍了react简单路由的配置方法，这次介绍一些路由知识，同时与学过的vue的相关知识进行一些类比hashrouter和browserrouter这是两种路由模式，对应着vue-router中的hash模式和history模式，hash路由和history路由的原理大家可以百度一下。使用方法参考如下import {HashRouter ,BrowserRouter, Route} from 'react-router-dom';ReactDOM.render( <HashRout
2021-03-15 15:23:54
89
原创 react学习之路1：react基础路由配置
最近接手了一个react项目的任务之前一直没学过react的我临危受命，凭借着js的功底完成了这个任务，但是既然入坑了react，那我也来从头好好学习一下react这个框架吧（毕竟大厂都爱react）这里我记录一下我学习react的路由配置首先先放一下我的项目目录应该大家都能看懂吧，接下来我们安装一下相关的依赖（react-router-dom）npm install react-router-dom --save接下来我们创建三个页面组件（app，page1，page2），参考上面的文件结
2021-03-08 16:39:37
283
原创 记录我第一次做切图仔和静态H5活动页
最近化了一个星期的时间做了一个小的活动H5的项目，内容是某个地方的美食地图和一些介绍文字和图片。使用了vue框架来做，这个项目的难度不大，但是页面还挺多，数据要写成json来读取，所以用vue来做会快很多作为一个有经验的前端hhhhh，这开发难度当然是不大，但是也很考验我的布局能力与css的熟悉度下面是我的一些总结经验：1.使用图片时，我们使用img还是设置div的background属性在做这个项目的时候我对这个确实没啥概念，后来才发现了有的地方用img有的地方用background会比较方便
2021-02-04 11:25:22
226
原创 vue和uniapp在组件中动态引入腾讯地图js包并获取用户定位
如题接到新的需求决定使用腾讯地图的定位注册腾讯地图的步骤这里就不说了按照传统的方法，如果是vue项目的话我们多数会在index.html中直接引入腾讯地图定位的js<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>但是由于我是在开发项目的单一组件，我无法得到index.html文件，这
2021-01-07 17:16:49
1170
2
原创 用Koa2做一个小项目（一）项目初始化
最近接了一个小项目，需要写一个轻量级的服务端，我选择用基于node的Koa。由于之前使用过thinkjs，觉得其中的一些API虽然好用，但是还是不如自己写的灵活，所以打算再用Koa写一次服务端。先上文档Koa文档1.环境部署需要部署nodejs，这个大家自己百度吧...
2020-12-25 22:40:17
353
1
原创 js使用XMLHttpRequest发送异步http请求
一直都是用框架在开发的我第一次遇到要在html里写原生js的需求就是发送一个异步http请求，去请求后端的数据我对原生一无所知！感觉要好好补习一下了下面就贴出我在论坛里找的并修改的请求封装函数 function httpRequest(paramObj, fun, errFun) { var xmlhttp = null; /*创建XMLHttpRequest对象， *老版本的 Internet Explorer（IE5 和
2020-12-16 10:59:42
1036
原创 vue中的nextTick实现局部刷新（一）
vue中的nextTick今天在开发过程中我又遇到了很神奇的东西在vue中使用nextTick没有效果促使我去查了一下这个api的用法才发现我一直都在"乱用"和"滥用"这个nextTick我们先来看一下vue文档中对nextTick的解析这里首先我们第一个看明白的是vue更新DOM时，是异步的。可以看一下我下面的这个局部div刷新的小例子<div v-if="isAlive" >{{msg}}</div>data(){ return:{ msg:"内容",
2020-12-09 20:24:27
880
原创 thinkjs入门（1）初识thinkjs
之前用thinkjs帮朋友写了个毕业设计第一次用中国的nodejs后端框架来写服务端一开始上手thinkjs打开thinkjs的文档thinkjs感觉对刚刚上手的开发者很友好有着非常详细的文档而且thinkjs是基于koa2的所以一些koa2可以用的API在thinkjs的框架上也一样可以使用但是我们在网上搜索一下thinkjs相关的博客会发现使用的人确实还不多所以预先准备好会踩坑的准备1.安装安装这一块可以参照一下文档，基本上不会遇到什么坑作为一个前端工程师，用npm安装thi
2020-12-05 18:36:28
779
原创 vue接入海康萤石云npm包，开发视频模块
vue接入海康萤石云npm包，开发视频模块因为公司项目的需要，需要接入海康萤石云平台的npm包来开发公司的视频模块我们目前做的是公司的视频直播模块ui设计采用的是公司的视频窗口ui好了，我们先看一下这个npm包的md文档萤石云GitHub安装和引入方式可以参考里面的，注意引用方式不同，调用的类也不同这里我们采用npm引入的方式来调用与文档里面的用法一致我们需要先创建一个dom节点注意，如果初始化视频时没有设置长度和宽度那么就会铺满这个dom元素，所以这个dom元素一定要设置长度和宽度
2020-12-05 16:30:44
1676
原创 uni-app | 封装一个二级国内城市选择器（citypicker）
uni-app | 封装一个二级国内城市选择器（citypicker）在实际uniapp，微信小程序，h5的项目中，经常用到picker官方的定义：从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。一共有5种模式，有满足用户需求的省市区选择器。再看看该模式的文档我们可以看到兼容性来说，还是不太好。而且只能是三级，与实际需求不太符合，那这样我们就来自己基于原生的picker封装一个二级citypicke
2020-12-01 13:24:05
1557
原创 vue实际项目接入websocket
在实际vue项目中，我有一个接入服务端websocket的需求调试了一段时间终于成功了，记录一下1.配置ws socket() { //socket()连接方法 let wssString = window.location.href.indexOf("/a") === -1 ? "wss:测试地址/ws" : "wss:正式地址/ws" let ws = new WebSocket(wssString); this.ws = Stomp.over(ws);
2020-11-18 11:08:25
439
原创 vue使用xlsx包解析xlsx表格文件成json格式
根据实际项目需求，需要前端去解析Excel文件成json格式传给后端这时候我就想到了xlsx包，有直接转化为json的方法说干就干1.安装和引入相关包（jquery好像是xlsx需要安装的依赖） "jquery": "^3.5.1", "xlsx": "^0.16.8"然后npm install一下2.在vue文件中引入import XLSX from "xlsx"; 3.准备一个解析的excel文件，开始前端接入 <div class="imp
2020-11-18 10:17:23
1072
原创 封装axios请求函数
在实际的项目开发中，一定程度上的封装axios，管理请求的api有助于精简项目的代码，统一管理api，便于持续性开发。接下来就看看我在我自己的小项目中是如何封装的吧（可能会用到部分伪代码）1.安装axios（这一步就略过咯）2.在src/util/axios.js新建了axios.js3.在axios.js引入 import { cookieData } from "@/util/local"; import axios from "axios";在main.js引入 impor
2020-11-18 09:34:28
499
1
原创 封装cookie、sessionStorage、localStorage公共函数（vue）
封装cookie、sessionStorage、localStorage公共函数（vue）通常一个前端项目，我们最常用到的三个浏览器储存有三种：cookie、sessionStorage、localStorage这三种各有各的优势在项目快速搭建的过程中，我通常会写一个公共js文件，方便调用他们// local操作const localData = function(method, name, obj) { /* * 参数说明： * method：get获取，set存入或覆盖，c
2020-11-03 11:00:41
406
原创 Vue实现路由懒加载
Vue路由懒加载这是个大部分Vue搭建的项目常用的写法可以提高Vue首屏加载的速度虽然已经学会，但是还是想记录一下避免以后可能少用Vue的时候我还能在这里温故知新import Vue from 'vue'import Router from 'vue-router'import login from '@/view/login/login' // 正常的import引入import error from '@/view/error.vue'import error2 from '@/vie
2020-11-03 10:18:03
119
原创 Vue打包app实现检查更新功能
Vue打包app实现检查更新功能最近接收到一个需求，就是把移动h5的代码打包成安卓app这个确实很符合这个时代“一套代码，多处编译”的趋势而且混生App发展到这个时期也已经可以做到很多原生app所能做到的事情我的项目是使用Vue搭建的，我选择的打包方式是使用HbuilderX打包而这次的需求是app的检查更新功能（未上架各类市场）开始这个需求之前，我构思了一下思路，大概如下1.app会有一个版本号，可以根据版本号来判定是否更新2.可以让后端编写接口，返回当前发布版本号（需要更新的版本号），
2020-11-03 09:40:19
1110
原创 vue项目中引入jquery和jqueryui
vue项目中引入jquery和jqueryui之前一直不喜欢在vue里面引入jq的东西，因为和vue的理念是背道而驰的，但是后来因为项目需求难以解决，不得不引入入jquery去解决，才感叹jq还是很强大的啊真香嘻嘻我的项目是基于vue 2.0的。3.0的可能会有些不同，但是应该问题不大了首先，我们得在package.json文件中的dependencies添加 "jquery": ...
2019-11-08 11:41:10
1927
原创 Vue.js下使用vue-full-calendar的那些坑（二）
Vue.js下使用vue-full-calendar的那些坑（二）上次提到在开发日程模块时，本小白用到了vue-full-calendar组件，但是这个组件并没有提供很多原版才有的api，这就需要我们自己去发掘了下面是vue-full-calendar所提供的鼠标点击事件和渲染函数//event点击事件@event-selected="eventClick"// day的点击事件@da...
2019-11-08 10:28:06
3322
2
原创 Vue.js下使用vue-full-calendar的那些坑（一）
Vue.js下使用vue-full-calendar的那些坑（一）近期本实习生接到一个任务就是用大日历组件开发一个日程管理的功能，刚刚接到这个任务时我立马想到了full-calendar的日历组件，因为它接口多，功能强大，但是在vue下使用该full-calendar就得用vue版本的vue-full-calendar，这就导致了一些问题，就是vue-full-calendar没有很详细的api...
2019-11-08 09:51:42
7328
22
空空如也
初学ROS小白，编译通过后找不到自定义srv服务？
2018-11-04
TA创建的收藏夹 TA关注的收藏夹
TA关注的人