- 博客(50)
- 收藏
- 关注
RSS订阅
原创 记录一次完整的react hooks实践
写在前面React在16.8版本正式发布了Hooks。关注了很久，最近正好有一个小需求，赶紧来试一下。需求描述需求很简单，部门内部的一个数据查询小工具。大致长成下面这样：用户首次访问页面，会拉取数据展示。输入筛选条件，点击查询后，会再次拉取数据在前端展示。需求实现使用React Class Component的写法如果使用以前的class写法，简单写一下，代码可能大概长成下面这样：...
2019-06-12 20:33:49
1874
原创 详解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
2715
1
原创 Vue渲染过程浅析
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤•把模板编译为render函数•实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom•对比虚拟dom，渲染到真实dom•组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟...
2019-06-06 22:46:53
1074
原创 css3实现蒙版弹幕功能
最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕， 打开之后效果大概是这样的再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。实现原理其实就是类似于ps的蒙版，也就是说将图像的一部分 “隐藏”。这里我们需要用到的是css3的mask遮罩属性。CSS maskCSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性...
2019-06-30 15:28:56
1691
1
转载 当你在浏览器中输入google.com并按下回车后发生了什么0
按下"g"键接下来的内容介绍了物理键盘和系统中断的工作原理，但是有一部分内容却没有涉及。当你按下“g”键，浏览器接收到这个消息之后，会触发自动完成机制。浏览器根据自己的算法，以及你是否处于隐私浏览模式，会在浏览器的地址框下方给出输入建议。大部分算法会优先考虑根据你的搜索历史和书签等内容给出建议。你打算输入 “google.com”，因此给出的建议并不匹配。但是输入过程中仍然有大量的代码在后台运行...
2019-06-29 19:06:53
779
原创 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
401
原创 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话尽管DOM作为API已经非常完善了，但是为了实现更多的功能，DOM仍然进行了扩展，其中一个重要的扩展就是对选择器API的扩展。人们对jQuery的称赞，很多是由于jQuery方便的元素选择器。除了前面已经介绍过的getElementsByClassName()方法外，DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种...
2019-06-29 15:44:24
333
原创 JS方法速查
首先这个文章是一个不断维护的项目，因为里面的内容并不是最优解，如果各位朋友有更好的解决方法，欢迎在下方评论，我也会第一时间感谢和更新文章内容的，拜谢!!!GitHub地址：项目地址查看更多速查：notes网址更新记录（只显示最近5条）数组部分增加了注释，和一些示例，整体上优化了很多，感谢大家的反馈（2019.6.25）增加DOM,BOM分类（2019.6.24）致谢：大湿胸。| Ad...
2019-06-28 19:29:56
1177
原创 Web前端开发，必须规避的8个错误点！
现在，有越来越多所谓的“教程”来帮助我们提高网站的易用性。我们收集了一些在Web开发中容易出错和被忽略的小问题，并且提供了参考的解决方案，以便于帮助Web开发者更好的完善网站。通过避免下面这些小错误，可以使得我们的网站变得更为友好。错误1：表单的label标签跟表单字段没有关联利用“for”属性允许用户单击label也可以选中表单中的内容。这可以扩大复选框和单选框的点击区域，非常实用。错...
2019-06-28 15:32:55
374
原创 《web全栈工程师》：中总结的20条军规和必读书单
作为一个前端新人，应该不断学习加强各种基础技术，而且也要多看别人的建议，别人成功的经历或许不能让你复制，但是你总能从中有所收获，身体和灵魂总要有一个在路上。今天抱起了实习时候充充翻过的一本书《web全栈工程师》，作者是腾讯的高级UI工程师雨果，序章就已经讲述了他从一个菜鸟成长为大神的历程。突然想起这本书是因为接受了公司关于职业规划的培训之后，有点迷茫，所以看看什么的web全栈工程师是一个什么职位...
2019-06-27 20:01:14
414
原创 js基本搜索算法实现与170万条数据下的性能测试
js基本搜索算法实现与170万条数据下的性能测试前言今天让我们来继续聊一聊js算法，通过接下来的讲解，我们可以了解到搜索算法的基本实现以及各种实现方法的性能，进而发现for循环，forEach，While的性能差异，我们还会了解到如何通过web worker做算法分片，极大的提高算法的性能。同时我还会简单介绍一下经典的二分算法，哈希表查找算法，但这些不是本章的重点，之后我会推出相应的文章详细...
2019-06-27 16:46:28
1477
原创 JavaScript动态添加数据到表单并提交的几种方式
情景1：已经存在form对象了，动态为form增加对象并提交function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>...
2019-06-26 21:13:51
2604
1
原创 javascript实现段落的收缩与展开
主要是使用-webkit-line-clamp这个属性进行限制显示行数,通过计算文字在标签内的显示高度来计算当前文字行数,再与需要限制的行数进行对比,来确定是否显示代码如下:<!--Created by lmj on 2017/8/10.--><!DOCTYPE html><html><head><meta charset="utf...
2019-06-26 20:28:56
646
原创 Web前端常用的十种技术
Web前端常用的十种技术Web前端应用十种常用技术，随着JS与XHTML的应用普及，越来越多的web界面应用技术出现在网站上，比如我们常见的日历控件，搜索下拉框等，这些web界面应用技术大大的丰富了网站的表现形式，本文将为您精心推荐十种最常见的web界面应用技术。Web应用程序的界面设计，其核心就是网页设计 ，但它的重点主要是在功能方面。要超越桌面应用程序， Web应用程序必须提供简单、直观和...
2019-06-26 16:42:23
12097
原创 TDD（测试驱动开发）死了吗？
01、前言很早之前，曾在网络上见到过 TDD 这 3 个大写的英文字母，它是 Test Driven Development 这三个单词的缩写，也就是“测试驱动开发”的意思——听起来很不错的一种理念。其理念主要是确保两件事：确保所有的需求都能被照顾到。在代码不断增加和重构的过程中，可以检查所有的功能是否正确。但后来很长一段时间里，都没再听过 TDD 的消息。有人说，TDD 已经死了，给出...
2019-06-26 16:17:10
94
原创 vue视图不更新情况
我们有时会会在处理vue项目的时候，遇到数据变化了，但是视图并没有实时渲染的情况vue视图为什么不渲染页面的原因当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 s...
2019-06-25 22:09:09
2294
原创 JQuery：介绍、安装、选择器、属性操作、动画
jQuery详细内容1.JQuery介绍jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。操作: 获取节点元素对象，属性操作，样式操作，类名，节点的创建，删除，添加，替换2.JQu...
2019-06-25 19:34:57
121
原创 Ananiah ES6-Proxy，代理
proxy 代理 Es6 增强 对象和函数（方法）Proxy用于修改某些操作的默认行为，即对编程语言层面进行修改，属于“元编程”，Proxy意思为“代理”，即在访问对象之前建立一道“拦截”，任何访问该对象的操作之前都会通过这道“拦截”，即执行Proxy里面定义的方法。声明 Proxy 第一个大括号放对象体 第二个放预处理机制 get set applylet pro = new ...
2019-06-25 15:32:35
127
原创 前端项目代码加密教程
序 我们都知道，浏览器上是可以看到前端的html和js代码的，所以如果遇到隐私心比较强的老板，你就冷不丁的会接受到一个代码加密的需求，当接受到这个需求的时候你怎么完成？那我希望我的这篇博客可以帮助到你。首先，告诉你的老板，严格意义上的加密是不存在的，能够实现的只有对前端代码进行压缩混淆，增加阅读难度。本篇教程全篇描述的，就是对代码进行混淆的手段，从而满足老板提出的加密需求。为了保证本篇教...
2019-06-25 15:05:04
2921
原创 5 分钟即可掌握的 JavaScript 装饰者模式与 AOP
什么是装饰者模式当我们拍了一张照片准备发朋友圈时，许多小伙伴会选择给照片加上滤镜。同一张照片、不同的滤镜组合起来就会有不同的体验。这里实际上就应用了装饰者模式：是通过滤镜装饰了照片。在不改变对象（照片）的情况下动态的为其添加功能（滤镜）。需要注意的是：由于 JavaScript 语言动态的特性，我们很容易就能改变某个对象（JavaScript 中函数是一等公民）。但是我们要尽量避免直接改写某个...
2019-06-24 21:59:42
156
原创 前端Vue项目——初始化及导航栏
正文一、项目初始化 创建webpack模板项目如下所示：MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project? Project name luffy_project? Project description A Vue.js project? Author hqs? Vue build standalone...
2019-06-24 21:08:19
9870
2
原创 新手秒懂 - 作用域 & 作用域链
前言根据上篇关于 新手秒懂 - 高逼格解释变量提升 的文章中说明了，在生成执行上下文的创建阶段，生成变量对象后会建立作用域链。那我们接下里就看看作用域和作用域链到底是个啥子玩意。作用域作用域是一套规则, 用于确定在何处以及如何查找变量(标识符)。(说白了就是你写代码的那块旮旯里，来确定你之后怎么查找变量，简单粗暴。。)词法作用域 & 动态作用域词法作用域: 函数的作用域在函数定...
2019-06-24 14:42:49
175
原创 3 小时前发布 原生JS快速实现拖放（drag and drop）效果
拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果：HTMLHTML的内容很简单，就是五个空的容器和一个可以被拖拽的元素：html：<body> <div class="droppable"> <div class="draggable" ...
2019-06-22 21:50:35
412
原创 CSS改变鼠标样式（图片）
如果你想让你的网站看起来更酷炫，可以改变鼠标样式，用你喜欢的图片来代替。下面就来介绍下步骤方法：首页把鼠标图标格式转换成.ico格式，大小为32*32转换格式网址为：https://www.easyicon.net/covert/然后在CSS样式中增加代码：*{ cursor:url(../images/shubiao.ico),auto;}大功告成啦~~~说明：图...
2019-06-22 14:54:35
9029
1
原创 TypeScript 中如何继承 Error 类
在 JavaScript 中很多时候都需要自定义错误，尤其是开发 Node.js 应用的时候。 比如一个典型的网站服务器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我们希望这些类都拥有 Error 的特性：有错误消息、有调用栈、有方便打印的 toString 等。 最直观的实现方式便是 继承 Error 类。 但考虑 TypeSc...
2019-06-21 20:44:06
2206
原创 javascript 常见判断
对象的字符串表示形式。var toString = Object.prototype.toString;isString判断给定的值是否为字符串类型。如果是范围true，否则返回false。function isString(val) { return typeof val === 'string';}isNumber判断给定的值是否为数字类型。如果是范围true，否则返回f...
2019-06-21 14:52:15
4128
原创 JavaScript设计模式：单例模式
单例模式：限制类实例化次数只能一次，一个类只有一个实例，并提供全局访问点。(归属创建型设计模式)模式特点类只有一个实例全局可访问该实例自行实例化（主动实例化）可推迟初始化，即延迟执行（与静态类/对象的区别）实现方式实现方式：使用一个变量存储类实例对象（值初始为 null/undefined）。进行类实例化时，判断类实例对象是否存在，存在则返回该实例，不存在则创建类实例后返...
2019-06-20 21:37:14
123
原创 Vue 页面权限控制和登陆验证
页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。Vue 动态添加路由及生成菜单这是我写过的一篇文章，通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。另一种办法就是所有的页面都在路由表里，只是在访问的时候要判断一下角色权限。如果有权...
2019-06-20 15:56:25
1662
原创 箭头函数中的this究竟是什么鬼？
摘要： 箭头函数极大地简化了this的取值规则。普通函数与箭头函数普通函数指的是用function定义的函数：var hello = function () { console.log("Hello, Fundebug!");}箭头函数指的是用=>定义的函数：var hello = () => { console.log("Hello, Fundebug!...
2019-06-19 20:44:28
926
原创 [译]送你43道JavaScript面试题
导读这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了，项目中记录了一些JavaScript题目。我大概从头到尾看了一遍，都是一些基础的题目，我大概花了半个小时（有些题很简单，可以一扫而过）把这些题做完了，虽然题目很简单，但是每道题都对应一个知识点，如果这个知识点你没有接触过，那肯定会做错，如果你接触过这些知识点，那...
2019-06-19 20:34:02
1703
原创 如何判断THIS指向？
什么是this？this是用来做什么的？这是首先我们必须知道的this它是js的一个关键字，用来指向某一个对象如何判断this指向？函数（方法）内一种以函数的方式调用（不带.）this指向window一种以方法的形式调用（函数名前面带.）this指向点前面的函数（方法）外，this指向windowthis指向的特列：1、自调用函数内的this都是window2、定时器的this指...
2019-06-18 15:04:39
792
转载 道路千万条，安全第一条——一次服务器被入侵的处理经过
容器为何自动停止？服务器为何操作卡顿？进程的神秘连接到底指向何处？发现——自动停止的容器某日发现部署在服务器上的一个容器被停掉了，开始以为是同事误操作停止或删除了。但登录服务器重新启动容器的时候发现一个奇怪的现象：容器启动后几秒钟便会自动停止。一般来说这种情况可能是容器本身有问题。但是查看容器日志并未得到任何错误信息，而且该容器镜像已在其它服务器稳定部署运行，应该不会有bug。所以...
2019-06-18 14:51:17
143
原创 JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
排序算法的介绍排序也称排序算法 (Sort Algorithm)，排序是将 一组数据 ， 依指定的顺序 进行 排列的过程 。排序的分类内部排序 : 指将需要处理的所有数据都加载 到 内部存储器(内存) 中进行排序。外部排序法: 数据量过大，无法全部加载到内 存中，需要借助 外部存储(文件等) 进行 排序。常见的排序算法分类算法的时间复杂度 度量一个程序(算法)执行时间的两...
2019-06-17 14:13:43
308
原创 visual studio 2019正式版安装简单教程
visual studio 2019 2019年4月2日发布正式版今天终于有时间安装了体验了一下，环境WIN10企业版固态硬盘+机械硬盘，原来安装有visual studio 2017 废话不说，直接上截图由于考虑到空间问题还是安装在了机械硬盘下，肯定没有固态启动速度快影响效率。下载速度还可以吧电信50M宽带，大约下载和安装40分钟左右，安装选择上我也没有全部安装，只安装了LINUX C+...
2019-06-14 19:11:27
52855
2
原创 JavaScript错误处理
一．错误分类1． 语法错误也称为解析错误，发生在传统编程语言的编译时，在JavaScript中发生在解释时，这些错误是由代码中的意外字符直接引起的，然后就不能直接编译/解释，eg，在一行代码因缺少右括号，产生了语法错误。发生语法错误时，就不能继续执行代码。在JavaScript中，只有在同一个线程中的代码会受语法错误的影响。在其他线程中的代码和其他外部引用的文件中的代码，如果不依赖于包含错误的...
2019-06-14 15:58:57
1171
原创 jQuery实现表格的增、删、改操作示例
本文实例讲述了jQuery实现表格的增、删、改操作。分享给大家供大家参考，具体如下：这里实现的是在jQuery中通过按钮的形式，对表格进行的一些基本操作，可以实现表格的增删改操作，并实现对鼠标事件监听，实现表格的高亮行操作。<head> <meta charset="UTF-8"> <title>www.jb51.net jQuery表格操作<...
2019-06-13 21:18:43
793
原创 图文详解vue框架安装步骤
vue安装首先第一步，安装javascript运行环境node.js，根据你系统是32位或64位安装文件如下图。第二步，安装Nodejs下的包管理器，打开windows命令窗口，输入“npm install -g cnpm --registry=https://registry.npm.taobao.org”命令安装。如下图所示。第三步，安装vue-cli脚手架构建工具，在windows命...
2019-06-13 21:07:10
2198
原创 CSS3移动端vw+rem不依赖JS实现响应式布局的方法
1、前言（1）vw/vh介绍在使用之前，我们先简单了解一下什么是vw和rem以及它们的作用，vw是css3出现的一个新单位，它是“view width”缩写，定义为把当前屏幕分成一百份，1vw即为屏幕的1%，与之对应的是vh，把高分成一百份，1vh即为屏幕高的1%，一般我们常用的vw单位来完成响应式开发（2）rem介绍rem是相对长度单位。相对于根元素(即html元素)font-size计...
2019-06-13 15:47:05
279
原创 详解NodeJS Https HSM双向认证实现
工作中需要建立一套HSM的HTTPS双向认证通道，即通过硬件加密机（Ukey）进行本地加密运算的HTTPS双向认证，和银行的UKEY认证类似。NodeJS可以利用openSSL的HSM plugin方式实现，但是需要编译C++，太麻烦，作者采用了利用Node Socket接口，纯JS自行实现Https/Http协议的方式实现具体实现可以参考如下 node-https-hsmTLS规范自然是参...
2019-06-12 19:07:01
963
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人