![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
趣味前端
文章平均质量分 76
前端Baymax
No Pains! No Gains!
一份耕耘!一分收获!
展开
-
Egg 服务搭建微信公众号的基础服务
Egg 服务搭建微信公众号的基础服务原创 2022-06-20 11:10:08 · 578 阅读 · 0 评论 -
Yarn安装
前端包依赖工具yarn的安装原创 2022-05-06 17:16:07 · 575 阅读 · 0 评论 -
圣杯布局与双飞翼布局
圣杯布局与双飞翼布局原创 2022-04-28 10:04:56 · 295 阅读 · 0 评论 -
UUID VS ID
UUID与ID对比分析原创 2022-04-27 18:07:51 · 899 阅读 · 0 评论 -
使得一个DOM元素不显示在浏览器可视范围内(CSS)
使得一个DOM元素不显示在浏览器可视范围内(CSS)原创 2022-04-19 20:55:50 · 574 阅读 · 0 评论 -
刨析——浏览器如何工作
浏览器可以被认为是使用最为广泛的软件,以下篇幅将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么。原创 2022-04-19 20:35:43 · 314 阅读 · 0 评论 -
单点登录 SSO
单点登录的几种处理方式以及处理逻辑原创 2022-04-18 10:59:33 · 223 阅读 · 0 评论 -
HTTP Headers
HTTP Headers定义HTTP Headers种类HTTP Headers使用HTTP Headers配置(方案,内容以及结果示例)原创 2022-03-02 20:42:36 · 2858 阅读 · 0 评论 -
Virtual Dom 虚拟DOM
为什么要有VirtualDOM?与真实DOM的区别? VirtualDOM的优势VirtualDOM实例VirtualDOM应用VirtualDOM的体现, React, Vue, Angular, Sevelte原创 2022-02-17 10:24:04 · 372 阅读 · 0 评论 -
AST (Abstract Syntax Tree)
AST (Abstract Syntax Tree)标题内容ASTAST定义,使用方式,原理ASTAST例子ASTAST应用AST 定义AST(Abstract Syntax Tree)抽象语法树,简称AST,它是源代码(也就是说它不仅仅是应用于JavaScript,同时还应用于其他语言,例如: Python,Rust等)语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源码中的一种结构。Thinking in Jac原创 2022-02-14 14:02:09 · 1453 阅读 · 0 评论 -
http vs https
httphttps原创 2022-02-09 21:07:17 · 1484 阅读 · 0 评论 -
antd系列之Select
antd系列之select选择器组件解读原创 2022-01-04 21:23:14 · 5342 阅读 · 0 评论 -
React - Initial Rendering(初始化渲染)
React - Initial Rendering(初始化渲染)以下内容均从源码角度分析,UI更新本质上是数据更改(props或者state) = render(state)。React提供了一种直接且直观的方法,所有移动部分都以**状态(states)**的形式聚合,那么问题来了?React究竟是如何渲染的了?内部的渲染原理是什么样的?接下来我们一步一步的分析。标题内容JSXJSX是如何生效的?React.createElementReact.createElemen原创 2021-10-31 00:02:00 · 828 阅读 · 1 评论 -
Bind函数
BindFunction.prototype.bind()标题内容Bind的定义什么是Bind函数?Bind的使用如何使用Bind函数?Bind的实现原理如何实现Bind函数?Bind的示例Bind函数实现继承等Bind的定义bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被指定为bind()的第一个参数,而其余参数将作为新函数的参数,供调用时使用。const jackdan = { age: 27,原创 2021-08-17 22:03:26 · 1422 阅读 · 0 评论 -
Apply
ApplyFunction.prototype.Apply标题内容Apply的定义什么是Apply函数?Apply的使用如何使用Apply函数?Apply的实现原理如何实现Apply函数?Apply的示例Apply函数实现继承等Apply的定义apply()方法调用了一个具有给定this值的函数,以及以一个数组(或者类数组对象)的形式提供的参数。注意: call()方法的作用和apply()方法类似,区别就是call()方法接受的是参原创 2021-08-16 17:22:03 · 215 阅读 · 0 评论 -
Promise对象
Promise 对象标题内容Promise来源为什么需要Promise对象?Promise原理Promise是怎么实现的?Promise实现如何原生实现Promise?为什么需要Promise对象?在剖析这个问题之前,我们需要了解一下异步编程。异步编程首先,我们其实都知道JavaScript语言的执行环境是"单线程"(single thread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一原创 2021-06-24 21:24:29 · 123 阅读 · 0 评论 -
Call函数
Call函数Function.prototype.call()标题内容Call的定义什么是Call函数?Call的使用如何使用Call函数?Call的实现原理如何实现Call函数?Call的示例Call函数实现继承等Call的定义call()方法使用一个指定的this值和单独给出的一个或者多个参数来调用一个函数。function People(name, age) { this.name = name; this.age = a原创 2021-06-22 17:03:10 · 876 阅读 · 0 评论 -
JavaScript数据类型
JavaScript数据类型数据类型名称数据类型内容原始类型(primitive type)Undefined类型、Null类型、Boolean类型、String类型、Number类型、Symbol类型(ES6新增)对象类型(object)Object类型什么是数据类型?数据元(Data Element),也称为数据元素,是用一组属性描述其定义、标识、表示和允许值的数据单元,在一定预警下,通常用于构建一个语义正确、独立且无歧义的特定概念语义的信息单元。数据元可以原创 2021-06-17 10:08:34 · 194 阅读 · 0 评论 -
ES6 async 函数
async 函数标题内容async的引入this指向, 构造函数, arguments对象, Generatorasync的含义async函数是什么?async的特点内置执行器, 更好的语义, 更广的适用性, 返回值是Promiseasync的引入ES2017标准引入了async函数,使得异步操作变得更加方便。也可以说是Generator的语法糖。(了解)AsyncFunction构造函数AsyncFunction构造函数用来创建新的异步函数对原创 2021-06-15 19:56:43 · 943 阅读 · 15 评论 -
HTTP请求中Form Data和Request Payload区别
HTTP请求中Form Data和Request Payload区别Form Data和Request Payload浏览器传输给接口的两种格式。这两种格式的区分是通过Content-Type进行区分的,如果Content-Type为Content-Type: application/x-www-form-urlencoded则浏览器传输给接口的格式方式为Form Data; 如果Conte...原创 2019-11-22 11:51:15 · 993 阅读 · 0 评论 -
JavaScript基础(一)之数值转换
数值转换有3个函数可以把非数值转换为数值: Number();parseInt();parseFloat();Number()函数,即转型函数,可以用于任何数据类型,而另外两个函数则专门用于把字符串转换成数值。Number()函数的转型规则如下: 如果是Boolean值,true和false将分别被转换为1和0;如果是数字值,只是简单的传入和返回;如果是null值,返回0;...原创 2018-03-13 21:43:30 · 378 阅读 · 0 评论 -
JavaScript基础(一)之[变量、标识符、基本数据类型、关键字以及保留字]
JS基础(一)ECMAScript的基本概念任何语言的核心都必然会描述语言的基本的工作原理。而描述的内容通常都要涉及这门语言的语法、操作符、数据类型、内置功能等用于构建复杂解决方案的基本概念。ECMAScript语法ECMAScript的语法大量借鉴了C及其他类C语言(如Java和Perl)的语法。因此,熟悉这些语言的开发人员在接受ECMAScript更加宽松的语...原创 2018-02-26 08:36:30 · 419 阅读 · 1 评论 -
Big-man的Bootstrap篇(二)
Bootstrap-2Bootstrap-2脚本架 : 首先必须是使用HTML5文档类型.Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype. 因此这一文档类型必须出现在项目的每个页面的开始部分.<!DOCTYPE html><html lang="en">...</html>Bootstrap的排版与链接 : Bootstrap 为屏幕、排版和原创 2017-05-24 19:20:57 · 588 阅读 · 0 评论 -
Web-viewport
手机网页宽度: <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value ,转载 2016-09-27 17:24:08 · 397 阅读 · 0 评论 -
JavaScript基础(一)后续
Object类型ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象,如下所示:var o = new Object();这个语法与Java中创建对象的语法相似;但在ECMAScript中,如果不给构造函数传递参数,则可以省略后面的一...原创 2018-04-23 08:03:06 · 214 阅读 · 0 评论 -
JavaScript基础(一)——位操作符
JS基础(一)——位操作符位操作符用于在最基本的层次上,即按内存中表示数值的位来操作数值。ECMAScript中的所有数值都以IEEE-754 64格式存储,但位操作符并不直接操作64位的值。而是先将64位的值转换成32位的整数,然后执行操作,最后再结果转换回64位。...原创 2018-05-06 08:40:14 · 853 阅读 · 5 评论 -
JavaScript基础(一)之[乘性,加性,关系,相等,条件,赋值,逗号]操作符
JavaScript基础(一)之[乘性,加性,关系,相等,条件,赋值,逗号]操作符乘性操作符ECMAScript定义了3个乘性操作符:乘法、除法和求模。这些操作符与Java、C或者Perl中的相应操作符用途类似,只不过在操作数为非数值的情况下会执行自动的类型转换。如果参与乘法计算的某个操作数不是数值,后台会先使用Number()转型函数将其转换为数值。也就是说,空字符串将被当作0,布尔值...原创 2018-08-22 09:47:28 · 460 阅读 · 0 评论 -
JavaScript基础(一)之布尔操作符
JavaScript基础(一)之布尔操作符在一门变成语言中,布尔操作符的重要性堪比相等操作符。如果没有测试两个值关系的能力,那么诸如if...else和循环之类的语句...原创 2018-08-21 09:57:25 · 646 阅读 · 0 评论 -
基于Token的身份验证——JSON Web Token
基于Token的身份验证——JSON Web TokenToken的维基百科token的维基百科,可以了解Token的发展和定义。Token的广泛应用现如今的很多大型网站,比如Facebook、Twitter、Google+以及Github等等,比起传统的身份验证方法,Token扩展性更强,也更安全点,非常适合用在Web应用或者移动应用上。Token的在中文翻译中有”令...原创 2018-09-05 11:58:09 · 1184 阅读 · 0 评论 -
JS setTimeout()与setInterval()的区别
JS setTimeout()与setInterval()的区别李四–x 张三: 我很好,谢谢!李四-x 王五: 我很好,谢谢!Note right of 王五: 李四想了很长时间, 文字太长了不适合放在一行.李四–>>张三: 打量着王五…张三->>王五: 很好… 王五, 你怎么样?这将产生一个流程图。:```mermaidgraph LRA[长方形...原创 2019-09-17 14:31:50 · 1806 阅读 · 0 评论 -
Vue, App与我(二)
Vue, App与我(二)前言:进过上一章的讲解,Big-man已经理解了项目的搭建,接下来就是项目的具体代码了。还有就是Webpack的配置说明Big-man在上面仅仅是简单的引用,所以Big-man会在接下来继续进行分析和总结。Vue-index.html移动端的h5:index.html:<!DOCTYPE html><html lang="en"> <head> <m原创 2017-07-12 09:51:18 · 1919 阅读 · 0 评论 -
Vue, App与我(一)
Vue, App与我(一)前言:从事App的开发,这对于Big-man他自己一个新的挑战,App是基于Vue + PHP + Linux + MySql进行开发的。就他个人而言,这也是一次全新的挑战。Vue-api:Vue的功能介绍这里就不进行了,可以查看Vue-api, 这里论述的是它的实际项目开发。搭建vue项目:搭建vue项目: 在所有的搭建项目过程中,感觉vue的搭建项目最为简单原创 2017-07-11 13:36:00 · 2693 阅读 · 0 评论 -
Vue, App与我(七)
Vue, App与我(七)评论框的书写:要用前端的代码书写一个适合与所有移动端的手机设备,想到了几种解决的方式,但是都不太适用,但是还是想要把这几种方式更新出来,供大家评判一下我这个失败之笔的。js来书写评论框的位置:a、用定位来解决:var oHeight = $(document).height(); // 浏览器当前的高度 $(window).resize(function())原创 2017-08-18 08:03:58 · 450 阅读 · 0 评论 -
Vue, App与我(五)
Vue, App与我(五)Big-man今天非常的生气,至于为什么?那就是本身的app上没有添加页面跳转记住上一页面的位置功能,上网查询了很多的资料,说得都比较的模糊和不全,所以决定自己写一下。用自己理解的语言。h5的History:javascript: history.go(-1);或者javascript: history.back();这个是h5自带页面跳转模型(返回上一页),但是这个跳原创 2017-07-24 22:58:40 · 1557 阅读 · 0 评论 -
Vue, App与我(三)
Vue, App与我(三)index.html文件的书写完成之后,也就意味着我们的首页展示框已经写好了,接下来需要写一下app.vue的内容。这部分也就是<div id="app"></div>中展示的内容。app.vue: 如果你想简单的进行实现这部分代码,可以写一个测试代码。<template> <div> <div class="page-topnav">原创 2017-07-12 14:00:28 · 5212 阅读 · 0 评论 -
Bootstrap-2
Bootstrap-2<div class="nav-collapse"> <ul class="nav"> <li class="active"> <a href="#">首页</a> </li> <li> <a href="#about">关于</a> </li>原创 2017-05-24 22:49:12 · 269 阅读 · 0 评论 -
图片的自动放大
图片的自动放大效果大概是今天早上10点钟的样子,我就接收到一个消息, 需要进行图片的动态效果,给出的效果图如下: 就我个人而言我还真没有写过这样的效果, 图片的相册效果的实现需要进行思考才好实现它的效果。css实现:html<ul class="box"> <li><span><a href="#"><img src="sy_4.jpg"></a></span><p>DDD</p></li原创 2017-06-12 20:57:12 · 624 阅读 · 0 评论 -
HTML DOM 中的selectedIndex
HTML DOM 中的selectedIndex机会:一个很偶然的机会我结识现在正要写的selectedIndex。天气很炎热, 但是也不能阻止我写下对它的看法,因为我知道它在我的脑海中不是一天、两天了。定义和用法:selectedIndex: 属性可设置或返回下拉列表中被选选项的索引号。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti原创 2017-06-10 18:55:55 · 2428 阅读 · 0 评论 -
JS中数组的方法
JS中数组的方法在我做测试题的时候, 曾经遇到过这样的一道题,举例说出js数组中的方法并且写出它们的作用。在此我就想就我的理解展开论述。shift():删除数组的第一个元素,并且返回删除的元素。 var arr = new Array(); arr[0] = 0; arr[1] = 1; arr[2] = 2; console.log(arr.shift()); // 0unshift原创 2017-06-10 18:45:29 · 319 阅读 · 0 评论 -
Big-man酷谈overflow
Big-man酷谈overflow代码实例:body { width: 100%; height: 100%; margin:0; padding:0; background:#ffe; font-size:12px; overflow:auto; /*border: 2px solid #333;*/}思考: overflo原创 2017-02-12 07:48:10 · 2068 阅读 · 0 评论