![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 61
fltenwall
数据科学与人工智能硕士
展开
-
javascript面向对象完全指北
js中的面向对象其实是基于原型的,构造函数其实充当了“类”的角色,因为构造函数可以创建实例。而构造函数其实与普通函数没有区别,只是一个普通函数用new进行调用的时候我们称它为构造函数。如果在构造函数中显示return,若返回值是一个对象,则该对象会代替新创建的对象实例返回,但如果返回值是一个原始类型,则会被忽略。应该始终确保使用new调用构造函数,否则构造函数中的指向的是全局对象。此时就是在改变全局对象,而不是创建一个新的对象。构造函数模式的问题:没有消除代码冗余,方法不共享查看/判断对象的原型对象原创 2022-12-03 15:14:13 · 322 阅读 · 1 评论 -
2021年的最后一天,我发布了2022年的第一个视频
大家好,我是轩灵,今天是2021年的最后一天,而在今天我发布了2022年的第一个视频,介绍2022年我的轩灵大前端知识体系打造计划,同时送上我对所有程序员同学的祝福。打算今年用一年的时间,打造大前端的知识体系,完成12个主题:算法、javascript、typescript、网络协议、设计模式、css、操作系统、react、node.js、架构设计、浏览器原理、性能优化、代码精进与软技能,产出将会以文章 + 思维导图 + 视频 + 示例 + 代码的方式方式分享出来。如果你感兴趣,可以扫码加我的微信或者进群原创 2021-12-31 14:37:03 · 533 阅读 · 0 评论 -
Thress.js设置背景色及背景透明
Thress.js默认背景Thress.js默认背景色为黑色设置Thress.js背景颜色场景想要自行定义Thress.js模型的背景颜色实现this.renderer = new THREE.WebGLRenderer();this.renderer.setClearColor(0xffffff, 0); //设置背景颜色设置Thress.js背景透明场景有时候将Thress.js渲染的3D模型嵌入在页面中,需要给页面整体设置一个背景色时,需要将Thress.js背景设为透明实现原创 2021-04-22 18:12:50 · 2870 阅读 · 0 评论 -
Echarts图例常用配置(图例大小、字体、显示方式、位置等)
Echarts图例常用配置legend: { data: this.allLegend, textStyle: { //图例字体大小 fontSize: 10, }, //图例大小 itemHeight: 10, //图例滚动显示 type: 'scroll', //图例纵向显示 orient: 'vertical', //图例位置 right: 0, top: 30, bott原创 2021-04-22 18:04:53 · 28262 阅读 · 1 评论 -
Vue中容易忽略的技术点(面试易问)持续更新,欢迎补充~
1.Vue父子组件生命周期的执行顺序父 beforeCreated父 create父 beforeMounted子 beforeCreated子 create子 beforeMounted子 mounted父 mounted2.Vue为什么设计成单向数据流?前端无法加锁,同时操作一个数据时容易造成数据不同步和数据混乱的问题3.props接收数组或对象时默认值为什么必须从一个工厂函数返回值获取?这是为了解决js中复杂数据类型浅拷贝的问题,工厂函数每次都调用时都会产生一个新的实例,返回的原创 2020-06-12 23:41:13 · 340 阅读 · 0 评论 -
前端MVC、MVP、MVVM三种架构模式对比(限前端范畴)
MVC问题:View不能独立处理用户事件一个View对应一个Model,复用性差适合无界面、多业务处理的后端使用模式主要使用的是策略模式MVP改良:用户事件由View处理Model与View完全解耦,View可抽离为接口提供给上层使用View可抽离为独立组件,适合事件处理问题Model与View的数据同步需要Presenter手动绑定,Presenter过重模式主要使用的是观察者模式MVVM改良View与Model自动同步,只需要指定View要显示的数据对应原创 2020-06-10 09:09:35 · 353 阅读 · 0 评论 -
linux环境下安装node及环境变量配置
linux环境下安装node及环境变量配置下载$ wget https://nodejs.org/dist/v12.17.0/node-v12.17.0-linux-x64.tar.xz 解压$ tar xf node-v12.17.0-linux-x64.tar.xz$ tar xf node-v12.17.0-linux-x64.tar.xz$ tar xf node-v12.17.0-linux-x64.tar.xzv12.17.0配置环境变量$ sudo原创 2020-06-01 17:46:15 · 1685 阅读 · 0 评论 -
javascript实现函数防抖与节流
github地址:JavaScript各种手写防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时function debounce(fn, delay) { var timer; return function () { var _this = this; // 保存函数的this指向 var args = arguments; //每次触发事件时都取消之前的延时调用方法 if (timer) {原创 2020-05-27 09:28:49 · 285 阅读 · 0 评论 -
手写Jsonp
github地址:JavaScript各种手写jsonp /** * jsonp获取请求数据 * @param {object}options */ function jsonp(options) { // console.log(options); // 1. 产生不同的函数名(函数名随机) let callBackName = 'itLike' + Math.random().toString().subst原创 2020-05-27 09:26:55 · 488 阅读 · 2 评论 -
js完美深拷贝
github地址:JavaScript各种手写实现//判断是否为复杂数据类型const isComplexDataType = obj => (typeof obj === 'object' || typeof obj === 'function') && (obj !== null);//利用 WeekMap() 的键对自己所引用对象的引用都是弱引用的特性,在没有其他引用和该键引用同一对象的情况下,这个对象将会被垃圾回收//为了解决循环引用的问题,设置一个哈希表存储已拷贝过原创 2020-05-27 09:20:42 · 868 阅读 · 0 评论 -
react-thunk原理及源码分析
git地址:前端流行框架源码分析????感慨:react-thunk真的是经典的不能再经典的中间件,它对applyMiddleware的利用真的是登峰造极。react-thunk源码分析react-thunk源码:function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { /** *如果ation是函数,就调用这个函原创 2020-05-27 09:13:50 · 1263 阅读 · 0 评论 -
redux源码逐行分析
git地址:前端流行框架源码分析????说明:Redux源码ES5版本的逐行解析,所有的英文注释全部做了意译。版本:4.0.5源码位置源码逐行解析(注释逐行翻译)'use strict';Object.defineProperty(exports, '__esModule', { value: true });function _interopDefault (ex) { return (ex && (typeof ex === 'object') &&原创 2020-05-27 09:10:59 · 386 阅读 · 0 评论 -
一天接收了131份前端面试简历......(面试总结)
简述:前段时间面试前端同学,只周四一天收到了131份简历,而且基本都是已离职状态(估计是公司倒闭或者被裁了),到了第二天boss直聘上还是不停闪烁求职者的消息,非常能够感受到大家求职的迫切感。由于周五要进行面试,我需要当天四点前选出大约十份简历,然后约第二天的面试,因此我需要三个小时看完这131份简历,平均一分半钟就要看完一份,像上学时候老师判卷子一样,一开始我是一份一份认真去看,从自我介绍,到个人技能,再到项目经历,我专门整理了一个excle表格了,统计年龄、性别、学历、工作时间、核心技能、项目经验、简原创 2020-05-27 09:02:21 · 2298 阅读 · 1 评论 -
对技术路线的思考(共勉)
对技术路线的思考精读《为什么专家不再关心技术细节》地址:https://juejin.im/post/5ce2055f5188251cf708b3d2感悟:(1)技术深度对于技术人的重要程度随着年龄是变化的作为一个新人,尽可能的了解更多的技术细节是很重要的,因为在没有足够的工程项目沉淀的情况下,技术细节和深度往往是评价一个技术人能力的重要标准。而除了深入技术以后,随着年龄的增长,软能力成为了评价一个技术人主要的方面。一个人不可能永远在代码一线,身体状况不允许,公司制度也不会允许,就算不转向管理岗位原创 2020-05-27 08:58:26 · 427 阅读 · 0 评论 -
大前端常用技术(持续更新)
大前端常用技术Vue系列Vue全家桶:Vue+vuex+vue-router+veu-cliVue服务端渲染SSR:vue-nuxtVue组件库:vant,element,iView…Vue全栈:Express(koa,egg)+monogdb(mysql)+vue+vue-cli+vuex+vuex-router+vant+less(sass)+webpack+babeltypescript+express+vue+…React系列React全家桶:react+redux+rea原创 2020-05-27 08:54:37 · 1191 阅读 · 0 评论 -
Deno探索
Deno探索:目标:利用deno创建一个web服务器,比较deno与node的区别安装(mac):curl -fsSL https://deno.land/x/install/install.sh | sh安装之后根据提示,设置环境变量:export DENO_INSTALL="/Users/fltenwall/.deno"export PATH="$DENO_INSTALL/bin:$PATH"其他操作系统安装方式参见官网:https://deno.land/manual/gettin原创 2020-05-27 08:52:54 · 333 阅读 · 0 评论 -
从有限状态机看现代前端开发
有限状态机与现代前端开发有限状态机是可计算理论中的一种数学模型,前端开发可以看成是在维护各种状态机的状态。有限状态机的特征:状态总数有限任一时刻,只处在一种状态之中某种条件触发后,会从一种状态转变到另一种状态有限状态机与前端(一)当前MVVM与有限状态机当下MVVM框架都是用状态来描述界面(state=>view),前端本质上就是在维护各种状态前端代码编写的核心在于:使用最合理的状态管理界面,用最合理的动作实现状态变更前端开发时需要考虑:(1)页面有几种状态(初始化?成功?失原创 2020-05-27 08:44:50 · 329 阅读 · 0 评论 -
Vue丐版数据双向绑定
HTML<div id="app"> <form> <input type="text" v-model="number"> <input type="text" v-model="number"> </form></div>创建VM实例window.onload = fu...原创 2020-03-10 16:47:39 · 110 阅读 · 0 评论 -
JS利用闭包实现缓存器策略
作用:以空间换时间,重复的计算将从缓存中取数而不是计算,提高效率。代码: /** * 缓存器策略计算阶乘 * @param val * @returns {factorial2} */ function factorial(val){ let arr = []; return function factorial2(val){ let re...原创 2020-03-10 12:58:14 · 454 阅读 · 0 评论 -
JavaScript实现冒泡排序算法
一、冒泡排序冒泡排序是一种非常基础的排序方法,其原理就是从把一个数组中的每一个数从前往后依次进行比较,然后根据大小交换位置,每一轮的比较都确定出一个当轮比较的最大值,最终实现数组的大小排序。下面我们用JS实现冒泡排序。二、JS实现1、创建待排序数组var arr = [4,23,100,9,7,49,36,57];2、确定轮数假设数组中有n个数,则需要n轮,而每一轮中比较的次数都要减...原创 2019-03-20 13:29:04 · 20868 阅读 · 2 评论 -
HTML5语义化
HTML5语义化标签HTML5主要的语义化标签<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <header> <!-...原创 2019-04-23 22:34:42 · 206 阅读 · 0 评论 -
Flex弹性布局详解
Flex弹性布局说明:重点是分清楚主轴方向、侧轴方向的设置,作用在父元素和作用在子元素上的属性。(1)控制方向flex-direction控制主轴方向,取值有row(默认) |row-reverse | column | column-reverse(垂直方向翻转)align-items控制侧轴方向,取值有strenth(默认) | flex-start(顶部对齐) |flex-end(底...原创 2019-05-03 23:37:03 · 1738 阅读 · 0 评论 -
CSS3动画(过渡、2D变形、3D变形)
1.过渡transition1)说明:作用在进行变化的元素上,有四个属性值:property(目标属性),duration(过渡时长), curve(运动曲线),delay(开始时间)创建一个空div,为它设置样式: div{ width:100px; height:100px; background-color:lightblue; margin:200px a...原创 2019-05-04 23:49:03 · 3224 阅读 · 1 评论 -
详解圣杯布局
圣杯布局html结构:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc...原创 2019-04-30 02:32:16 · 1042 阅读 · 2 评论 -
LESS核心
LESS1.基础(1)说明Less是CSS的一个预处理程序,可以编译为CSS。使用Less可以实现CSS的动态书写,提高代码的重用性,降低冗余。(2)配置1)服务器配置使用Node进行配置,或使用Webstorm作为本地服务器2)借助第三方工具本地编译工具:Koala 网址 http://koala-app.com/index-zh.html使用方式:将写好的Less文件自动编译...原创 2019-05-05 23:55:43 · 274 阅读 · 0 评论 -
CSS选择器详解
(1)#### (1)结构伪类选择器1):first-child、:last-child、:nth-child(index)、:nth-last-child(index)先创建一个列表: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4<...原创 2019-05-06 23:19:10 · 522 阅读 · 0 评论 -
javascript中的==与===
原创 2019-05-24 11:58:47 · 1037 阅读 · 0 评论 -
javascript实现深拷贝与浅拷贝
一、浅拷贝 //定义浅拷贝函数 function copy(obj){ var result = {}; for(var attr in obj){ result[attr] = obj[attr];//字符串是按值进行赋值 } return result; }对于基本数据类型的拷贝是按值传递的: var objCopy = {name : 'flt...原创 2019-05-24 12:34:17 · 220 阅读 · 0 评论 -
理解闭包
一、闭包的概念很多书籍上都将嵌套函数中内部函数使用外部函数中定义的局部变量,返回内部函数实现对外部函数局部变量的使用作为闭包的定义,但实际上我们可以将嵌套函数中这种闭包的情况作为闭包的一种特殊情况。我们可以将闭包理解为是由函数和函数所声明的词法环境的结合。即一个函数引用了自由变量,且这个被引用的自由变量将和这个函数一同存在,即使是在该变量已经离开了创造它的环境时也不例外。二、闭包示例<...原创 2019-04-23 22:23:53 · 403 阅读 · 0 评论 -
详解块级元素、行内元素、行内块级元素类型、区别及相互转化
1)块级元素特点:1.总是从新的一行开始2.高度、宽度都是可控的3.宽度没有设置时,默认为100%4.块级元素中可以包含块级元素和行内元素5.块级文字元素中不能放入其他块级元素6.块级大多为结构性标记常见块级元素: <center>...</center> 地址文字 <h1>...</h1> 标题一级 <h2...原创 2019-05-02 17:44:45 · 10539 阅读 · 4 评论 -
JavaScript实现“打地鼠”游戏开发(1)——超详细功能分析与游戏界面实现(基于H5+CSS3+JS+jQuery实现)
一、游戏说明1、简要说明打地鼠是我们非常熟悉的一款小游戏,它的游戏结构和规则也都比较简单。那么如果能够亲自徒手开发这样的一款经典小游戏呢?接下来笔者将使用H5+CSS3+JS+jQuery的组合实现完整的打地鼠小游戏,过程中会对所有代码进行详细的说明及注释。以确保对JS和jQuery不是很熟悉的朋友也能够看懂。(我们并不需要学完所有的JS和jQuery的技术再来进行实践,事实上我们应该多结合实...原创 2019-03-17 21:21:51 · 6203 阅读 · 1 评论 -
JavaScript实现对三种基本排序算法的计时比较
冒泡、选择、插入是三种基本的排序算法,那么谈们的执行效率如何呢?接下来我们将随机生成10000个0~10000之间的数字,用这三种算法分别进行排序,比较它们消耗的时间,以此来观察执行效率的不同。1.创建数集首先,创建三个数组,并将其各自加入10000个随机生成的数值: var arr1 = []; var arr2 = []; var arr3 = []; for(var i ...原创 2019-03-20 20:50:03 · 322 阅读 · 0 评论 -
JavaScript实现插入排序算法
一、插入排序算法原理插入排序是先将数组中的一部分数进行排序,再将数组中的还未排序的数与已排序的数逐一进行比较,每一次比较都判断二者的大小关系,大的数右移,为小的数腾出位置,直到遇到比这个数小的数为止,该数即“插入”到此处左移,接着将下一个未排序的数与左边已排好序的数逐一比较,重复这一过程。二、JS实现1、创建一个待排序的数组var arr = [6,3,5,2,7,1];2、创建中间变...原创 2019-03-20 19:50:17 · 612 阅读 · 1 评论 -
DIV+CSS网页布局实例
一、效果预览说明:非常基础的IDV+CSS,实现了一般网站布局。CSS样式也比较基础,一些像定位等属性都没有使用。二、代码实现1、主体结构(1)标签结构(2)容器样式2、头部(1)头部标签(2)头部样式、3、导航(1)标签结构(2)CSS样式4、主体(1)主体标签&amp;lt;!-- 主体 --&amp;gt; &amp;lt;div class=&qu原创 2019-03-16 21:07:57 · 27383 阅读 · 28 评论 -
JavaScript实现选择排序算法
一、选择排序原理选择排序是从数组的第一个数开始,和其他元素逐一进行比较,并将最小数放到数组的第一个位置,第一轮比结束。然后从重新排序的数组中的第二个数开始(此时第一个数已经是最小的)再次和其他元素逐一进行比较。重复这一过程,直到数组中只剩最后一个数没有进行逐一比较(因为此时最后一个数已经是最大值)。二、JS实现快速排序首先定义一个待排序的数组:var arr = [6,4,2,5,1]; ...原创 2019-03-20 16:35:37 · 327 阅读 · 0 评论 -
纯CSS实现鼠标移入显示图标效果
1、效果预览在淘宝或京东商城我们经常看到这样的效果:鼠标移动除某一个位置时出现下拉菜单,或者显示一个图标,那么这是如何实现的呢?我们今天就用CSS来实现鼠标移入时显示图标的一个效果。下面是我们这次最终要实现的效果或者这样2、代码实现1、标签布局&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;原创 2019-03-16 13:56:21 · 11867 阅读 · 1 评论 -
CSS中的浮动问题详解
CSS中的浮动问题所带来的“父级坍塌”等怪异的现象也是一个让人费神的东西,今天笔者就CSS中的浮动问题进行详细的阐释,以及如何防止意外情况的发生。一、浮动问题的产生首先我们来看一个例子:在浏览器中的效果是这样的:粉色部分右边都是空白既浪费空间又不美观,我们对它进行浮动。给.box加上float:left属性,看一下这时候的效果:会发现此时绿色部分跑到粉色部分下面去了,这是因为粉色部分...原创 2019-03-20 11:17:09 · 792 阅读 · 0 评论 -
七种CSS常见属性效果演示
一、尺寸属性1、width 这是个很常见的属性,就不过多赘述<p class="pre">Without you?I'd be a soul without a purpose.Without you?I'd be an emotion without a heart.I'm a face without expression,A heart with no beat.Withou...原创 2019-03-15 20:30:21 · 1251 阅读 · 4 评论 -
JavaScript实现“打地鼠”游戏开发(3)——锤子的显示及游戏音效的添加(基于H5+CSS3+JS+jQuery实现)
说明:上一节我们实现了打地鼠游戏的主体功能,包括:老鼠的随机出现、击中目标后分数增加,倒计时为0时游戏结束等功能。接下来我们将对游戏音效的添加、锤子效果的实现以及欢迎界面的添加进行具体实现。这是前两节的地址链接:JS实现“打地鼠”游戏开发(1)——超详细功能分析与游戏界面实现(基于H5+CSS3+JS+jQuery实现)https://blog.csdn.net/qq_32925031/ar...原创 2019-03-19 17:22:11 · 3347 阅读 · 1 评论 -
HTML语法基础(1)
1.HTML简介HTML是定义Web网页结构的标记语言,通过标签标记描述文档的结构和语义。由于古老的DOS系统限制扩展名最多3个字符,所以.html,.htm都可以作为后缀名,但推荐使用.html作为文件名。在HTML组成的文本中包含一系列元素(element)组成,这些元素通过标签区分不同部分的内容。HTML是由浏览器解析执行的,因此不同的浏览器显示的效果可能不同。2.HTML语法(1)注...原创 2019-03-10 23:55:21 · 140 阅读 · 0 评论