
前端知识零碎
随时记录写js知识,对某些问题的总结整理
guocongcong-cc
归纳总结,记录职业生涯
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
如何用"状态模式"优化代码
状态模式定义在状态模式(State Pattern)中,类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。使用场景意图:允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类。主要解决:对象的行为依赖于它的状态(属性),并且可以根据它的状态改变而改变它的相关行为。...原创 2020-03-12 17:54:26 · 311 阅读 · 0 评论 -
js程序设计中如何保证代码的健壮性
相信已经入门的开发人员,大多数开发人员在写代码的时候基本上一上来就考虑业务逻辑的实现,脑中被业务流程全部占据,如果你基本功不够,没有在业务流程之外的程序健壮性予以考虑,则后期必然会导致很多bug,只有等待测试发现,而很多的测试依然是基于功能的黑盒测试,对于很对异常系问题不能完全测到,一个高素质的程序员无论在写任何业务流程代码,基本的程序健壮性是必不可少的硬实力。而很多基本的健壮性处理是共通的,只要...原创 2020-03-12 17:23:48 · 800 阅读 · 0 评论 -
贪心算法解决青蛙跳问题
题目描述一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。分析1层 只有一种跳法2层 :1,1;2两种3层:1,1,1;1,2;2,1;3;四种4层:3层的没一种跳法 再跳一层与之组合 及发f(3)+f(3)*15层:4层的所有跳法在条一层与之组合f(4)+f(4)*1易知 f(n)=f(n-1)+f(n-2)+……f(1...原创 2020-03-10 17:22:01 · 1074 阅读 · 0 评论 -
递归优化策略
很多程序员都慎用递归,因为少不注意就会造成内存崩溃,其实只要做到递归优化就回尽可能避免经典问题 求斐波那契数列第n项,n从0开始不优化:function Fibonacci(n){ // write code here if(n == 0){ return 0; }else if(n==1){ return 1 }else{...原创 2020-03-10 15:45:32 · 385 阅读 · 0 评论 -
js如何用两个栈模拟队列
用两个栈来实现一个队列,完成队列的Push和Pop操作。 队列中的元素为int类型。分析队列特性:先进先出栈:先进后出js中我们用数组实现栈,单个数组 压栈push(),出栈pop(),js中同样用数组实现队列,入队 push(),出队shift(),如果用两个栈(数组)则我们只需要将另外一个数组reverse()代码两个数组实现let stackA = [];let sta...原创 2020-03-10 14:16:50 · 628 阅读 · 0 评论 -
如何通过二叉树的前序和中序遍历生成二叉树
牛客网上的一道练习题:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6},则重建二叉树并返回。以上就是我们的需求,关于树的相关基础知识请移步本人博客js高级进阶之数据结构“二叉排序树”的es5和es6实现与应用...原创 2020-03-09 17:28:25 · 2225 阅读 · 0 评论 -
如何用vscode编写Markdown文件
开始写博客已经有一段时间了,用Markdown也算的心应手了,但是对于一名专业的开发人员,用编辑工具ide写文档是个基本功,虽然项目中各种设计需求文档都是word的但日常开发维护中组内使用最方便的莫过于markdwn了,本篇博文详细介绍如何用vs编写markdown文本。1.安装Markdown插件对于开发人员,相信使用安装使用vscode能力肯定具备,所以本篇就直接掠过vscode的安装步骤...原创 2020-01-22 14:14:04 · 7548 阅读 · 2 评论 -
2020开年最火css效果实现
1.交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟(delay)这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚...原创 2020-01-20 14:30:25 · 479 阅读 · 0 评论 -
详解es6中set,map,WeakSet,Weakmap的区别和用法
set,map,WeakSet,Weakmap 在js的使用频率越来越高,特备是一些新框架的源码中,本篇博文将其基本用法和区别做一总结,加强记忆。set在js中Set 对象允许存储任何类型的唯一值,无论是原始值或者是对象引用。顶层数据结构不具备key—>value特征,内部会自动加index序列。可以存储不同类型的任何数据。如何理解唯一性:对于原始数据类型(boolean,nu...原创 2020-01-17 16:51:45 · 2113 阅读 · 0 评论 -
es5和es6面向对象继承的最佳实践,附可以判断继承关系的方法
js实现对象的继承是开发人员迈向高级的重要基础,本文就es5和es6实现对象继承的最佳实践方式做一总结。es5最佳继承模式“寄生组合”关于es5多种继承方式实现的比较不太清除的,请移步“ES5面向对象js实现继承的最优方式”如果对es5与es6定义对象不清楚的可以移步“es5和es6定义对象比较”。我们用es5继承的最佳实践“寄生组合方式”实现Person 和Gcc的继承关系: let ...原创 2020-01-16 16:17:23 · 670 阅读 · 0 评论 -
es5和es6定义对象比较
js中定义对象有多种方法再加上es6的新方法,难免使用时让人摸不着头脑,本篇博文对经典的集中对象定义方法做一次总结,最主要是和es6进行比较加强理解。es5定义对象:Object构造函数、对象字面量、工厂模式、构造函数模式、原型模式、组合模式。es6:class定义类。es5定义对象对象字面量使用对象字面量创建对象的写法简单直观,所以定义一个对象的最简单方式就是对象字面量,它是通过在一个...原创 2020-01-14 16:35:18 · 732 阅读 · 0 评论 -
全网最佳优惠券使用算法
每逢过节网上购物,不论哪个平台都会发放很对优惠券,如何在结账时最合理的使用已有的优惠券平台是不会告诉你的,作为程序员的我们写一套算法得到最优使用方法是一件很有趣的事,关键是目前全网好像没有比较靠谱的答案哦!理想状态下的最优使用券算法首先看下最理想状态下的优惠券使用算法,假设客户手中有[1,2,5,10,50,100]6种优惠券,而且每种优惠券个数无限(银行),此种情况类似银行给客户兑现金,我...原创 2020-01-13 17:44:22 · 10075 阅读 · 3 评论 -
js排序大全
排序是程序员的基本工,本篇博文就js排序算法做一总结。冒泡排序let bubblingSort = function (arry,order){ if(! arry instanceof Array){ return } for(let i=0;i<arry.length;i++){ for(...原创 2020-01-12 18:00:26 · 239 阅读 · 0 评论 -
一次彻底搞清楚typeof和instanceof的用法区别如何判断js所有内置对象的类型
typeof作用:用于判断一个一个表达式,(对象或者原始值),返回一个字符串。用法 typeof a类型 结果Undefined : “undefined”Null : “object” (...原创 2020-01-08 16:49:35 · 286 阅读 · 0 评论 -
一次彻底搞清楚js中变量和函数(包括箭头函数)提升
做前端的同学肯定对变量提升和函数提升不陌生,但实际应用中依然会有出错的情况,前端时间组内成员review代码发现很多小d在这个问题上没有彻底弄清楚,本篇博文详细做一次刨析。变量提升首先看下这个问题:输出结果是什么?var x =20;function s(){console.log(x);var x = 10;console.log(x);return x;}; s();经...原创 2020-01-08 16:12:33 · 1771 阅读 · 0 评论 -
js中对空、null、undefined、0、数字、数组、空对象的严格判断
js 在if中,"", 0, NaN, false,null,undefined都为false某些情况我们需要对数据做严格的判断,比如判断每个变量或参数是不是undefined肯定不能直接if(a)去判断,因为a 如果为“ ‘’ ”, 0, NaN, false,null,undefined”中的任意一个就都会进入if内从而导致bug。本篇博文详细介绍判断这些特殊数据类型的正确姿势。常...原创 2020-01-07 17:43:53 · 6002 阅读 · 0 评论 -
关于html和css面试高频问题总结
初中级的前端人员面试必然少不了html和css的内容,笔者就今几年公司招聘前端所搜集到的高频率问题进行汇总整理,做重要是尝试给一个最佳答案(欢迎指正)第一部分 HTML5 基础1.1. 请描述一个网页从开始请求到最终显示的完整过程?一个网页从请求到最终显示的完整过程一般可分为如下 7 个步骤:在浏览器中输入网址;发送至 DNS 服务器并获得域名对应的 WEB 服务器的 IP 地址;与...原创 2020-01-07 15:23:20 · 509 阅读 · 0 评论 -
https“中间人攻击”介绍
https真的安全吗?当然比起http答案是肯定的。但即便如此依然有存在针对https的“中间人攻击”不安全隐患,在特定的环境窗口就可能发生,本篇博文介绍下“中间人攻击”。HTTPS 的实现原理大家可能都听说过 HTTPS 协议之所以是安全的是因为 HTTPS 协议会对传输的数据进行加密,而加密过程是使用了非对称加密实现。但其实,HTTPS 在内容传输的加密上使用的是对称加密,非对称加密只作用...原创 2020-01-07 14:31:57 · 590 阅读 · 0 评论 -
一次学完css所有关于居中的方案
css中对于居中问题是写页面最基本的要求,通过对以往经验总结将所有的居中问题进行归纳。问题水平居中的解决方案。垂直居中的解决方案。水平垂直居中解决方案。水平居中场景:外层容器大小不固定,内层容器大小随内容宽度决定,要求内层容器居于外层容器水平居中位置。方案1. 通过设置内层容器display:display:inline-block;外层容器设置text-align:center...原创 2020-01-06 17:58:06 · 238 阅读 · 0 评论 -
前端代码检查工具之stylelint使用指南
作为前端开发leader你必须要对组员开发的代码制定适合项目的开发规范,并且要做到跟踪检查,传统的做法是制定军规,比如命名方式,代码结构,注释模版,缩紧换行等等,然后通过代码review检查,但这样耗时成本太大,没有必要将团队大量时间浪费在这种代码格式的检查上,但代码格式统一对于项目开发人员至关重要,因为我们要相互承接阅读修改彼此的代码,所以自动化的代码检查约束就显得非常重要,本篇博文介绍前端产出...原创 2020-01-03 17:27:21 · 3558 阅读 · 0 评论 -
ES5面向对象js实现继承的最优方式
es5时代js面向对象的的编程需要重点关注的问题就是“继承”,要实现继承,在js中有多种方式,虽然各种方式都有利弊,没有做好的但是相较之下总有最优的,本篇博文将这几种方法逐一列举总结,参考来源《javascript高级程序设计》。先准备一个父类: // 定义一个person类 function Person (name) { // 属性 this.name = n...原创 2020-01-03 12:38:23 · 358 阅读 · 0 评论 -
用代理模式实现图片懒加载
在网页开发中我们经常需要在线请求图片到页面展示,但在网速不佳,情况下就回使页面抖动闪烁,或大白屏展示,这些都严重影响到用户的体验,或者不在当前展示区域的图片先不请求,页面滚动到可是区域时在加载图片一优化网络请求,最普通的解决方法就是图片懒加载,在真实图片未请求完成之前我们先给一个loading图片站位同时提示用户图片加载中。等图片请求完毕,或者需要请求图片时再替换会真实图片。本篇博文介绍使用js的...原创 2019-12-31 11:08:42 · 665 阅读 · 0 评论 -
WebAssembly在前端的应用前景
前段时间在做一个音视频直播的项目,遇到一些性能问题团队中有大牛建议使用WebAssembly实现c端的解决方案代码移到js端实现,对于我这个只听过WebAssembly的存在而不知道具体何物的“骨干”倍感汗颜,于是找时间调查了下这个东西的前世今生。来自MDN的定义:WebAssembly是一种新的编码方式,可以在现代的网络浏览器中运行 - 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接...原创 2019-12-30 15:59:43 · 1328 阅读 · 0 评论 -
一次学完ES6 的扩展运算符(对象展开符) ...
扩展运算符( spread )是三个点(…),将一个数组转为用逗号分隔的参数序列。下面罗列几个常用方法1.合并数组es5合并数组var a = [1,2],b=[3,4]var c = a.concat(b)console.log(c)es6 扩展运算符2.与解构赋值生成新数组const [a, ...b] = [1, 2, 3, 4, 5];a // 1b // [...原创 2019-12-27 17:30:50 · 704 阅读 · 0 评论 -
参照jq的方法定制自己的js工具包
在前端开发中曾经离不开jq,随着jq的年迈逐渐离去,很多项目中已不再建议引入jq,毕竟它太万能也太重了,对于习惯了用jq的小童鞋们可以尝试在项目中自己参照jq的方法封装适合自己项目的工具库,此处分享一个几年前阅读jq源码时自己写的一个小工具,可以像jq一样去修改css和给元素绑定各类事件。关键点:自执行匿名函数,不要在原生对象上扩展方法,采用决策树优化if-else( func...原创 2019-12-27 15:13:26 · 245 阅读 · 0 评论 -
一次搞清楚ajax和axios、fetch的区别
前端请求基于ajax的时代已逐渐成为将要成为历史了,es6的fetch和node的axios将会逐渐代替它,本篇博文将就这三者的区别做以比较方便对后两者的理解和使用。ajax传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。ajax最经典的...原创 2019-12-26 16:22:05 · 743 阅读 · 0 评论 -
关于css中长度与角度单位总结
习惯了用px单位布局的童鞋们注意了,随着h5应用越来越广泛,适配各种设备及应用场景越来越复杂,仅仅用px布局已经力不从心,你需要了解掌握更多关于css的长度角度单位,本篇博文参考css官方文档对css中所有的长度角度单位进行整理,包括浏览器的支持情况;长度单位长度单位包括包括:相对单位和绝对单位。相对长度单位包括有:em,ex,ch,rem,vw,vh,vmax,vmin绝对长度单位包括有...原创 2019-12-26 10:39:47 · 304 阅读 · 0 评论 -
关于css伪元素和伪类看这一篇就够了
css伪类和伪元素在页面开发中经常使用到,但相对来说比较生僻,每次都要去查下文档,今日将其进行总结整理想对比记忆效果更好。css伪类用于向某些选择器添加特殊的效果。常用的伪类有如下:link, :visited, :hover, :focus, :active, :first-child, :langcss3新增的伪类::last-child, :only-child, :first-o...原创 2019-12-25 17:17:48 · 223 阅读 · 0 评论 -
es6实现lodash常用方法用
随着es6逐渐普及以往借用lodash实现的一些方法可以用es新方法去替代了,本文总结几个常用的lodash方法用es6实现1.数组去重原生es5方法: var arr1 = ["a", "b", "c","b","a"]; function unique(arr) { var newArr = []; for (var i = 0; i <...原创 2019-12-24 17:53:17 · 1341 阅读 · 0 评论 -
link和@import区别
前端开发都知道 ,外部引入 CSS 有2种方式,link标签和@import。但是它们有何本质区别?本人项目中多数情况都使用link方式,但见过某些项目人,自以为@import高大上类似es6,极力吹捧使用@import,就此找了一些资料对此进行比较说明:先上结论慎用@import方式。可以避免考虑@import的语法规则和注意事项,以及不合理的引入顺序导致的资源文件下载顺序混乱和http...原创 2019-12-23 17:05:56 · 590 阅读 · 0 评论 -
利用dbo标签快速实现文字内容倒序输出
在html页面上有时某些特殊情况下需要将字符串倒序输出,大多数都是用js进行处理后给页面,利用dbo标签也可以在页面上直接倒序处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor...原创 2019-12-23 16:48:46 · 346 阅读 · 0 评论 -
相对协议解决前端页面加载cdn资源https,http跨域问题
前段时间做了一个银行项目,银行项目基本上都是https协议下实现各种交互,所以从域名配置,证书申请,ssl证书应用,基本上都走了一遍,感兴趣的可以查看本人其它几篇博文,本篇博文重点你介绍针对https协议下如何实现页面cdn资源跨域请求。例如系统中要实现地图查看银行网点信息,此时由于开发系统是https协议如果访问加载在线百度或者高德地图如果以http方式引用则必然会报错,特别是一些在线api的...原创 2019-12-20 11:50:40 · 1713 阅读 · 0 评论 -
linux下node项目快速迁移到新服务器
项目部署中可能会有更换服务器的可能,如何能快速将云linux机器上的node服务快速迁移考验开发人员的综合能力,本篇博文就此做个总结说明1.项目工程文件在线转移如果你还只会从云机上通过ftp工具拉到本地,再从本地上传到新的云机,那就太low了,linux下直接转移最方便scp -r /etc root@192.168.1.xx:/opt即在原云机上 将 etc目录下的文件及子目录 传到 新云...原创 2019-12-19 16:57:05 · 795 阅读 · 0 评论 -
js利用策略模式优化if else循环
js程序中最常用的if else循环,如果分枝很多的的情况下难免使写出的程序又臭又长,但是根据需求又必须将这些分支处理,此时稍有经验的程序员可能会想到用switch case优化但是只是仅仅做到利于阅读,最好的方法是用策略模式进行优化。例如 有五个对象obj1 = {name:“obj1”,option:{do:“case1”}}…obj5 = {name:“obj5”,op...原创 2019-12-19 11:03:20 · 2763 阅读 · 1 评论 -
不用for循环如何实现数组基本功能操作
对于js初级开发者一遇到数组这个数据模型必然就会想到for 循环去操作实现相关功能,其实一些基本的操作完全不用循环也能实现,当然要考虑到是否恰当合适(性能)例如:如何不用循环初始化一个长度为100的数组其数组每一个值等于下标数字的平方,a[1] = 1,a[2] =4 … a[99] = 99*99;1. 利用setInterval实现var a = new Array(100),i=0;...原创 2019-12-19 10:11:06 · 2700 阅读 · 0 评论 -
一个屌丝前端成长记
从事程序猿工作已经8个年头了,除去最初做jsp,.net的两年没有纯前端的概念外专业前端开发也已经六年时间,本人计算机专业科班出身,没有天赋,也不算聪明,是百万程序员大军中的普通一员,作为最普通的样本将个人前端成长之路最一个简单的回顾,也顺便对目前掌握的知识点和需要提高学习的方向整理一下。懵懂少年误入前端世界移动互联网的兴起才使的前端在程序员界作为一个独立的工种出现在大众眼前,还记得8年前刚毕...原创 2019-12-16 17:30:28 · 369 阅读 · 0 评论 -
node express下申请证书配置https
对于网站安全性要求比较高的网站要求都是需要https链接访问网站,本篇博文就node环境下https配置做一总结说明。申请证书1.通过安装openssl生成证书下载opssl软件https://www.openssl.org/source/下载后运行以下命令生成证书创建私钥:genrsa -out ca-key.pem 1024创建证书请求:req -new -out ca-req.c...原创 2019-12-12 10:38:46 · 927 阅读 · 0 评论 -
js数组filter map reduce用法
数组的高阶函数能够简化我们的程序代码,把本来需要f多层or循环加判断的代码只用几行代码就可以完成,今天我们介绍小最常用的几个 filter map reducefilterfilter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意: filter() 不会对空数组进行检测。注意: filter() 不会改变原始数组。例子:var words = ...原创 2019-12-11 14:52:00 · 423 阅读 · 0 评论 -
node.js inspect 浏览器 断点调试技巧与原理
做前端开发你一定会用到浏览器自带的各种调试工具firebug 谷歌的debugtools等,我们太过于熟悉使用这些工具了,以致于在node开发中同样的js文件我们是否也可以用浏览器就行调试呢,答案当然可以,本篇文章我们就node端的js代码如何通过inspect进行调试,以及说明其调试原理。首先我们先用vd code工具来调试一端代码通过vs工具新建js文件 a.js编辑如下内容:let v...原创 2019-12-11 11:27:03 · 1611 阅读 · 0 评论 -
关于前端跨域问题你看只一篇就足够了
这几年经手的项目遇到过很多跨域的问题,是时候进行总结整理了。跨域问题的本质要解决跨域问题,很多时候更像是在做黑客,从浏览器被设计之初更多的是考虑到跨站点访问安全性,所以要禁止你跨域访问,请注意对于跨域问题重点针对的是JavaScript的安全限制,以防止来自第三方的恶意攻击。我们首先来看下浏览器的同源策略:同源:协议+端口+主域名+子域名相同例如:https://blog.csdn.n...原创 2019-12-10 15:54:08 · 683 阅读 · 0 评论