- 博客(78)
- 收藏
- 关注
RSS订阅
原创 记录一次完整的react hooks实践
写在前面React在16.8版本正式发布了Hooks。关注了很久，最近正好有一个小需求，赶紧来试一下。需求描述需求很简单，部门内部的一个数据查询小工具。大致长成下面这样：用户首次访问页面，会拉取数据展示。输入筛选条件，点击查询后，会再次拉取数据在前端展示。需求实现使用React Class Component的写法如果使用以前的class写法，简单写一下，代码可能大概长成下面这样：...
2019-06-12 20:33:49
1859
原创 详解iview的checkbox多选框全选时校验问题
在用iview框架的 checkbox 多选框时 遇到了一个校验问题在iview给的例子中 代码如下 https://www.iviewui.com/components/checkbox<template> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;...
2019-06-10 22:12:26
2683
1
原创 Vue渲染过程浅析
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤•把模板编译为render函数•实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom•对比虚拟dom，渲染到真实dom•组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟...
2019-06-06 22:46:53
1059
原创 微信小程序后台持续定位功能使用
微信小程序团队在7月30日更新了 基础库 2.8.0其中新添加了小程序后台持续定位功能和联系定位的接口从上到下分别是1.wx.onLocationChange//监听位置实时变化2.wx.stopLocationUpdate//关闭监听实时位置变化，前后台都停止消息接收3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息4.wx.startLocat...
2019-08-23 15:02:15
12966
2
原创 圣杯布局与双飞翼布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。主要运用了浮动，定位，负边距。注释：图片来源圣杯布局原文In Search of the Holy Grail，双飞翼布局图片来源来源于淘宝UED。圣杯布局DOM结构圣杯布局的DOM结构主要由main包裹的center，left，right构成，其中cen...
2019-08-15 16:46:42
452
原创 一文读懂tomcat组件--一个web服务器的架构演化史
tomcat是谁？tomcat可以做什么？tomcat是一个web容器，可以将web应用部署到tomcat，由它提供web服务，一个web容器中可以部署多个web应用，这些web应用可以是同一个域名，也可以是多个域名的服务。tomcat有哪些组件4.怎么快速理解这些组件呢？我们可以假设我们来设计一个web容器，我们该什么设计？第一代：接收请求，处理请求，返回结果集中到整...
2019-08-10 21:08:25
436
原创 内网穿透（mac，window，linux通用）1分钟实现外网访问电脑本地服务器
我们在做开发时，不想购买服务器，只想搭建我们本地的服务器，我们搭建的本地服务器只能供我们自己电脑的浏览器访问，或者处于同一个wifi下的手机访问，但是我们如果想让别人访问到我们的本地服务器，尤其做微信公号或者小程序开发时，想在微信里访问到我们在电脑上搭建的本地服务器。我们就要做内网穿透了，内网穿透就是别人通过外网能够访问到我们本地的服务器。先来说下市面上一些主流的内网穿透方法今天就来讲...
2019-08-07 20:53:19
2951
1
翻译 JavaScript中文技术文档
bytecode读写ClassPoolClass loader自有和定制Bytecode操控接口GenericsVarargsJ2ME装箱和拆箱调试bytecode读写Javassist是用来处理java字节码的类库， java字节码一般存放在后缀名称为class的二进制文件中。每个二进制文件都包含一个java类或者是java接...
2019-08-05 15:22:32
1593
原创 Javascript正则
正则的定义字符出现的规律的一种规则！正则的作用验证和查找创建正则1、var reg=/输入正则规则/； 注意：/ /内部是正则的天下，不支持js语法！2、var reg=ner RegExp()； //了解即可，不需要强记！正则的语法1、关键词的原文就是最简单的正则2、字符集：一个字符可能出现的备选字符的集合eg:：政[治法协]匹配：政治 政法 政协常见字符集：如果备...
2019-08-05 15:07:23
230
原创 一步一步搭建前端监控系统：如何记录用户行为？
**背景：**市面上的监控系统有很多，大多收费，对于小型前端项目来说，必然是痛点。另一点主要原因是，功能虽然通用，却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法。这是搭建前端监控系统的第二章，主要是介绍如何统计js报错，跟着我一步步做，你也能搭建出一个属于自己的前端监控系统。目前已经在运行的线上Demo：前端监控系统代码和讲解都放在这篇文章里：监控系统介绍及代码如果实...
2019-08-03 15:55:55
3816
原创 JS函数
函数：简单来说就是将程序中一段代码封装，再起一个名字。步骤：1.封装function 函数名（参数列表）{函数体；return结果；}解释：参数：接收传入函数的数据，函数执行是必要的数据。参数其实就是一个普通变量，使用时与变量完全一致。当函数执行时，必需某些数据，那么就需要定义参数，告诉调用者函数必需的数据。作用：告诉调用者函数执行时必需的数据，使函数更加灵活。函数体：函数结构中...
2019-07-26 21:39:43
339
原创 vue实现多组关键词对应高亮显示
先上效果图：我们有多组关键词，这里实现了关键词的背景色与匹配值的字体颜色值相同先拟定一组数据 colors: [ "#FFB5C5", "#EEC900", "#D1EEEE", "#40E0D0", "#FFFF00", "#FF7F00", "#FF6A6A", ...
2019-07-25 15:27:01
2278
原创 前端的一些小知识点
window.top 用来判断当前部分是否在页面的最顶层，比如：判断是否在iframe中，等等；2.css3中width的属性值增加了。width：fit-content； 随内容的增加而撑开，不会因为单词的分隔自动wrap，还有一些属性值max-content，mini-content，fill-avaliable Intrinsic Sizing（内部尺寸）和Extrinsic Si...
2019-07-24 21:27:14
309
原创 微信小程序 确认框的实现（附代码）
效果图如下:delType:function(e){ var typeId = e.currentTarget.dataset['id']; console.log("delete:"+typeId) wx.showModal({ title: '提示', content: '确认要删除该支出类型?', success: function (res)...
2019-07-23 16:21:42
3749
原创 html5的新标签
html5的新标签 定义页面独立的内容区域。 定义页面的侧边栏内容。 允许您设置一段文本，使其脱离其父元素的文本方向设置。 定义命令按钮，比如单选按钮、复选框或按钮 用于描述文档或文档某个部分的细节 定义对话框，比如提示框 标签包含 details 元素的标题 规定独立的流内容（图像、图表、照片、代码等等）。 定义 元素的标题 定义 section 或 document 的页...
2019-07-20 16:04:34
255
原创 el-input 标签中密码的显示和隐藏
效果展示：密码隐藏：密码显示：代码展示：一：标签代码 <el-form-item label="密码" prop="password"> <el-input :type="passw" v-model="adduser.password" style="width: 300px;" > <%-- input中加图标必须要...
2019-07-19 21:40:27
6971
原创 使用JavaScript将图片保存至本地
在最近的开发当中，我们需要为img标签以及canvas动态绘制的图像提供下载功能，下面是经过探索后我们得出的结果。一、Canvas 版本// 下载Canvas元素的图片function downloadCanvasIamge(selector, name) { // 通过选择器获取canvas元素 var canvas = document.querySelector(sel...
2019-07-18 14:51:15
307
原创 技术栈中的爱马仕？Facebook发布全新JavaScript引擎：Hermes
前言目前，用户的流畅体验是用户能长期使用某个移动客户端应用App的重要指标之一，因此，移动客户端应用App的性能问题备受关注。最近，一个崭新的JavaScript引擎面世：Hermes，它是Facebook在Chain React 2019 大会上发布 & 用于在React Native应用提高性能的，今天，我将进行全面介绍。目录示意图1. 简介Facebook在Chain...
2019-07-17 14:35:27
266
原创 记一次用git上传本地项目到github（亲测有用）
务必保证已经安装了git，打开git bash命令行模式，输入ssh-keygen -t rsa -C “git绑定的邮箱地址”，然后一直按回车即可。如下图表示成功：然后会生成一对密钥对，私钥(id_rsa)和公钥(id_rsa.pub)。2.登录github.com，然后进行如下图操作然后进入到Add new SSH kys页面，Title随便填，Key填的就是上面生成的公钥id_r...
2019-07-16 19:00:19
254
原创 Vue事件总线（EventBus）使用详细介绍
前言vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。Event...
2019-07-16 18:53:51
4301
原创 小程序中计算距离某个节日还剩多少天
先看一下页面效果：页面是这样的：好了，正文如下最近碰到个需求需要计算，距离圣诞、元旦、高考、国庆啊等最近一个节日，还剩多少天。因为后台没空理我，所以本文讲解在js中如何解决这个需求。(建议实际中获取标准时间，当前时间有点不靠谱)首先肯定是要用 new Date() 获得当前时间对象，然后再用它的一些方法获取当前年月日等，根据年月日判断。先看一下new Date()对象常用的方法。...
2019-07-15 16:21:03
1542
原创 js中获取当前url路径
可以使用 window.location 获取当前页面url。以下是一些简单应用。<script> $(function(){ // 返回 web 主机的域名，如：http://127.0.0.1:8080/testdemo/test.html?id=1&name=test var url = window.location.hre...
2019-07-13 14:40:09
5818
原创 JavaScript初学者必看“箭头函数”
译者按: 箭头函数看上去只是语法的变动，其实也影响了this的作用域。原文: JavaScript: Arrow Functions for Beginners译者: Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。本文我们介绍箭头(arrow)函数的优点。更简洁的语法我们先来按常规语法定义函数：function funcName...
2019-07-12 20:16:06
288
原创 微信小程序之几种常见的弹框提示信息
一、模态窗口wx.showModal delete(){ wx.showModal({ title: '', content: '是否确认删除', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cance...
2019-07-11 15:11:25
11620
原创 jquery-toastr 消息提醒、播放音频、点击跳转
应用情景，有新的订单生成，后台进行消息提醒并播放音频（这里用到轮询简单实现）：下面附代码1.找到laravel-admin 中的 index.blade.php 文件进行编辑{{-- 音频通知 --}}<audio style="display:none; height: 0" id="bg-music" preload="auto" src="http://fjdx.sc.china...
2019-07-10 16:30:51
1319
原创 「面试高频」彻底弄懂函数柯里化
关注「面试高频」彻底弄懂函数柯里化前言随着主流JavaScript中函数式编程的迅速发展， 函数柯里化在许多应用程序中已经变得很普遍。 了解它们是什么，它们如何工作以及如何充分利用它们非常重要。什么是柯里化（ curry）在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。举例来说，一个接收3个参数的普通函数，在进行柯里化后， 柯里化版本的函...
2019-07-08 20:47:55
740
原创 12个HTML和CSS必须知道的重点难点问题
这12个问题，基本上就是HTML和CSS基础中的重点难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: ...
2019-07-08 15:25:35
293
原创 盘点Vue源码中用到的工具函数
以下摘取的函数，在 shared 目录下公用的工具方法。文件在 util.js 中，githu地址。提取了一些常用通用的函数进行剖析，主要包含以下内容：创建一个被冻结的空对象判断是否是 undefined 或 null判断是否不是 undefined 和 null判断是否是原始类型判断是否是对象类型判断有效的数组下标判断是否是一个 Promise 对象...
2019-07-06 22:28:38
605
原创 JS基础理论相关知识
1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。2.什么是语义化的HTML?直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！html语义化就是让页面的内容结构化，便于对浏...
2019-07-06 15:54:02
293
原创 jq+swiper 实现今日头条App的选项卡效果
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>今日头条APP顶部点击可居中导航</title> <meta name="view...
2019-07-04 19:53:06
576
原创 css3实现蒙版弹幕功能
最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕， 打开之后效果大概是这样的再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。实现原理其实就是类似于ps的蒙版，也就是说将图像的一部分 “隐藏”。这里我们需要用到的是css3的mask遮罩属性。CSS maskCSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性...
2019-06-30 15:28:56
1664
1
转载 当你在浏览器中输入google.com并按下回车后发生了什么0
按下"g"键接下来的内容介绍了物理键盘和系统中断的工作原理，但是有一部分内容却没有涉及。当你按下“g”键，浏览器接收到这个消息之后，会触发自动完成机制。浏览器根据自己的算法，以及你是否处于隐私浏览模式，会在浏览器的地址框下方给出输入建议。大部分算法会优先考虑根据你的搜索历史和书签等内容给出建议。你打算输入 “google.com”，因此给出的建议并不匹配。但是输入过程中仍然有大量的代码在后台运行...
2019-06-29 19:06:53
756
原创 Web前端——JavaScript练习
显示和隐藏，改变display属性关键代码：e.style.display = "block";e.style.display = "none";源码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>显示和隐藏<...
2019-06-29 16:00:43
386
原创 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话尽管DOM作为API已经非常完善了，但是为了实现更多的功能，DOM仍然进行了扩展，其中一个重要的扩展就是对选择器API的扩展。人们对jQuery的称赞，很多是由于jQuery方便的元素选择器。除了前面已经介绍过的getElementsByClassName()方法外，DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种...
2019-06-29 15:44:24
321
原创 JS方法速查
首先这个文章是一个不断维护的项目，因为里面的内容并不是最优解，如果各位朋友有更好的解决方法，欢迎在下方评论，我也会第一时间感谢和更新文章内容的，拜谢!!!GitHub地址：项目地址查看更多速查：notes网址更新记录（只显示最近5条）数组部分增加了注释，和一些示例，整体上优化了很多，感谢大家的反馈（2019.6.25）增加DOM,BOM分类（2019.6.24）致谢：大湿胸。| Ad...
2019-06-28 19:29:56
1158
原创 Web前端开发，必须规避的8个错误点！
现在，有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题，并且提供了参考的解决方案，以便于帮助Web开发者更好的完善网站。通过避免下面这些小错误，可以使得我们的网站变得更为友好。错误1：表单的label标签跟表单字段没有关联利用“for”属性允许用户单击label也可以选中表单中的内容。这可以扩大复选框和单选框的点击区域，非常实用。错...
2019-06-28 15:32:55
365
原创 《web全栈工程师》：中总结的20条军规和必读书单
作为一个前端新人，应该不断学习加强各种基础技术，而且也要多看别人的建议，别人成功的经历或许不能让你复制，但是你总能从中有所收获，身体和灵魂总要有一个在路上。今天抱起了实习时候充充翻过的一本书《web全栈工程师》，作者是腾讯的高级UI工程师雨果，序章就已经讲述了他从一个菜鸟成长为大神的历程。突然想起这本书是因为接受了公司关于职业规划的培训之后，有点迷茫，所以看看什么的web全栈工程师是一个什么职位...
2019-06-27 20:01:14
402
原创 js基本搜索算法实现与170万条数据下的性能测试
js基本搜索算法实现与170万条数据下的性能测试前言今天让我们来继续聊一聊js算法，通过接下来的讲解，我们可以了解到搜索算法的基本实现以及各种实现方法的性能，进而发现for循环，forEach，While的性能差异，我们还会了解到如何通过web worker做算法分片，极大的提高算法的性能。同时我还会简单介绍一下经典的二分算法，哈希表查找算法，但这些不是本章的重点，之后我会推出相应的文章详细...
2019-06-27 16:46:28
1454
原创 JavaScript动态添加数据到表单并提交的几种方式
情景1：已经存在form对象了，动态为form增加对象并提交function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>...
2019-06-26 21:13:51
2536
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人