LuckyFBB-CSDN博客

原创 create-react-app创建react项目使用less的修改过程。

在使用create-react-app创建react项目的时候，原始的项目结构是不能够使用less预编译器。使用 yarn reject暴露配置文件$ yarn reject$ react-scripts ejectNOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without eje...

2019-05-10 15:41:12 1170

原创数据结构---栈、队列

学习JavaScript数据结构与算法之栈和队列篇章。前端小白简单的学习笔记。栈是一种遵从后进先出（LIFO）原则的有序集合。新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。队列是遵循FIFO（First In First Out，先进先出，也称为先来先服务）原则的一组有序的项。队列在尾部添加新元素，并从顶部移除元素。最新添加的元素...

2019-03-22 09:18:54 249

原创数据结构---数组

学习JavaScript数据结构与算法之数组篇章。前端小白简单的学习笔记。数组的创建var array = new Array(); //声明并初始化一个数组var array = new Array(7); //创建指定长度的数组var array = new Array(1, 2, 3, 4); //直接将数组元素作为参数传递给它的构造器var array = [...

2019-03-22 09:17:57 282

原创深拷贝和浅拷贝

JS有两种数据类型基本数据类型 string/number/boolean/undefined/null/symbol(ES6)引用数据类型 object/array/function基本数据类型储存在栈内存中，保存与复制都是数据本身引用数据类型储存在堆内存中，保存与复制都是指向对象的指针浅拷贝对于基本数据类型来说，拷贝一份互不影响；而对于数组和对象来说，只会拷贝数组或者对象的...

2019-03-11 14:33:02 271

原创 JS执行机制

关于JS执行机制这一块内容，一直是自己比较难以理解的知识点，结合自己看的资料与代码实践，写一篇总结。首先，我们熟知JS是单线程语言，再同一时间只能做一件事情。所以JS是按着语句顺序依次执行下来的。let a = 1console.log(a)let b = 2console.log(b)//依次输出1 2之后，接触了很多知识之后，我们认识到了两个定时器setTimeout和它的...

2019-03-07 21:00:39 616

原创 2019届珍爱网春招前端面经

3.5下午视频面试。记录一下面试题目。基础function常用的传值类型(基本类型，引用类型)；几种基本类型，有什么引用类型？ES6有什么特性？(聊了如下知识点)let/const 不会变量提升，const定义常量(引申const obj添加值和进行复制)class继承(继承的关键字，构造函数中的关键字)模块化(export和export default的区别)ma...

2019-03-06 00:44:23 898

原创 2019届个推前端面经

记录2019.1.19个推前端面试。笔试下午1.30左右到了公司，先做了一下笔试题。大致内容如下:什么时候display: inline-block会产生间隙?如何解决？如何把span元素放到距离浏览器顶部20px左边200px?什么时候会产生CSS阻塞?什么时候会产生JS阻塞?写出下列代码结果let x= [1, 2]let { ...y } = xco...

2019-03-06 00:42:56 1771 1

原创 line-height和vertical-align

总结一下line-height和他的好朋友vertical-align。幽灵空白节点在HTML5文档声明中，内联元素的所有解析和渲染变现就如同每一个行框盒子之前都会有一个’空白节点’，这个’空白节点’没有宽度，永远透明。<div style="background-color: red;"> <span style="display: inline-block;"&gt...

2019-02-11 10:35:14 286

原创小程序tabbar不显示

今天遇到一个问题，在给小程序配置tabbar的时候，在所有的配置路径都没有写错的情况下，tabbar不显示。page配置tabbar配置但是这种情况下，tabbar并不会展示在页面底部。在pages的配置之中，默认显示数组第一个参数，也就是welcome页面。在tabBar的配置中，默认选择展示的也是list数组中的第一个，也就是posts页面。在我以上配置中，pages和tabB...

2019-01-07 10:15:24 10998 4

原创事件节流/事件防抖

在resize/scroll/keypress/mousemove等事件触发时，会不断的调用绑定事件上的回调函数，降低了性能。然后引入了一下两个概念。事件节流什么是事件节流节流是在一段时间内只允许函数执行一次。方案//时间戳方式function throttle(fn, delay) { let pre = Date.now() return function () {...

2018-12-28 16:54:22 978

原创小程序中使用scroll-view滚到底部多次触发scrolltolower

最近写小程序的时候遇到一个问题，使用scroll-view组件的时候，有一个属性叫做bindscrolltolower，滚动到底部/右边，会触发 scrolltolower 事件。不知道是代码编写有问题，还是组件问题。如果将页面上拉到距离底部一定的高度之后，再松手，回滚到底部之后就会多次触发加载函数(loadMore)。像这样子查阅了网上的一些解决方案1.scroll-view有一个...

2018-12-28 14:45:49 8551

原创 webpack配置react项目，无法使用箭头函数

今天使用自己配置的webpack做开发的时候，发现不能使用箭头函数，错误原因Unexpected token。我的.babelrc文件长这样子在这个文件中，我没有配置stage-0。然而使用箭头函数和stage-0有关，他一定要放在后面。它包含了对ES6以及7的所有支持，包括那些还没有定下的功能。解决方案安装stage-0，执行 npm install --save-dev ba...

2018-11-29 15:30:27 3160

原创 [email protected]+配置react开发环境

一、项目创建&amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;nbsp;创建一个文件夹，进入到该目录，执行npm init。所有的提示内容均可以跳过，执行完之后，目录中会多一个package.json文件，该文件为核心文件，包含包依赖管理和脚本任务。mkdir webpack-democd webpack-demonpm init二、安装react，re

2018-11-20 16:56:10 426

原创 react组件中引用本地图片

使用create-react-app脚手架写项目，遇到一个问题react引用本地图片。从JSON文件中，读取图片路径地址，在前端渲染。但是在ES6中不支持img标签中直接写图片路径。使用import引入import img1 from '../assets/img/img1.jpg' //引入···&lt;img src={img1} /&gt; //使用使用requir...

2018-11-20 10:03:01 2932

原创 React使用锚点滚动

实现锚点滚动，不要使用a标签，会引发路由跳转。我们使用H5的新增API，scrollToAnchor以前使用a标签的方法&lt;a href='#activity1'&gt;&lt;/a&gt; //定义锚点&lt;div name='activity1'&gt;&lt;/div&gt; //跳转到的锚点但是在单页面中，这样会进行前端路由的修改使用scrol

2018-11-19 14:17:51 3253

原创关于this对象

js中this的四种用法在一般函数方法中使用this指代全局对象(默认绑定)var x=1;function test(){ console.log(this.x)}test(); //1作为对象方法调用，this指向上级对象(隐式绑定)function test(){ console.log(this.x)}var obj={ x:1, func...

2018-10-11 11:17:16 187

原创模拟实现apply/call

call func.call(obj,args1,args2); //传入的是参数列表 apply func.call(obj,[args1,args2]); //传入的是数组参数记法：apply是a开头为array改变this的指向，让bar()函数的this指向foo对象var foo={ value: 100}function bar(){ ...

2018-10-11 08:39:00 454

原创 JavaScript常用数组操作方法

concat()连接两个或者多个数组。不改变原数组join()把数组中所有的元素放到一个字符串里。不改变原数组push()向数组的末尾添加一个或多个元素，并返回新的长度。改变原数组pop()用于删除并返回数组的最后一个元素，返回最后一个元素。改变原数组shift()用于把数组的第一个元素从其中删除，并返回第一个元素值。改变原数组unshift()向数组的开头添加一个或者多个...

2018-09-26 18:13:33 209

原创 JavaScript的深拷贝和浅拷贝

基本数据类型：number、string、boolean、null、undefined。引用数据类型(Object类)：对象、数组、函数。基本数据类型—名值都存在栈内存中let a=1当复制b=a的时候，栈内存会开辟一个新的内存。即使修改a=2，这时候对b并不会有任何影响。引用数据类型–名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用地址指向堆内存中的值当b=a进行...

2018-09-17 21:38:54 437

原创关于Angular脏检查机制

什么是脏检查对脏数据的检查就是脏检查，比较UI和后台数据是否一致。什么时候触发脏检查只有当UI事件、ajax请求或者timeout延迟事件，才会触发脏检查$watch对象Angular每一个绑定到UI的数据，就会有一个$watch对象。$watch对象包含三个参数watch = { name:'', //当前的watch对象观测的数据名 getNew...

2018-09-17 21:37:04 2558

原创踩过的Angular坑

$watch:监听数据变化$watch(参数，函数，是否深度)：参数是Angular表达式或函数的字符串，函数有两个参数是newVal和oldVal；如果参数是多值必须采用深度监控(true)自定义指令scopefalse：直接使用父scope；父子绑定同一个值两者会一起改变true：子scope创建并继承父scope之后，两者互不影响{ }：创建新的隔离作用域@：单向绑定...

2018-09-17 21:35:13 375

原创 AngularJS动态绑定节点

在AngularJS中，操作DOM一般在指令中完成，事件监听机制是在对于已经静态生成的dom绑定事件，而如果在指令中动态生成了DOM节点，动态生成的节点不会被JS事件监听。使用$compile服务，将死模板转换成为带有绑定事件的模板，从而实现动态绑定。var template:'<div ng-click="hello()">Hi everyone</div>',...

2018-07-31 23:33:58 919

转载 ngRouter和ui-router区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的。本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍，并做一个对比。ngRoute使用方法1) 引入 angular-route无论是 ngRoute 还是 ui.router ，作为框架额外的附加功能，都必须以模块依赖的形式被引入。 ...

2018-07-22 20:50:13 458

转载 Jquery中attr()和props()的区别

针对属性对象不同prop( )是针对Dom元素属性，attr( )针对HTML元素属性，和attribute与property区别一样。用于设置的属性值类型不同attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型...

2018-07-07 09:30:40 2090

转载 HTML5 <template>标签元素简介

HTML5 template元素先见后认识元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是“模板元素”。目前，我们在HTML中嵌入模板HTML，往往是类似这样的写法：<script type="text/template">// ...</script>123实际上，并不存在type=”text/template”这样的标准写法，<t...

2018-07-07 08:43:22 9947

原创关于测试

三天的测试小结软件测试的必要性软件测试心理学软件测试就是证明软件不存在错误的过程软件测试的目的在于证明软件能够正确的完成其预定的功能测试是为了发现错误而执行程序的过程软件测试经济学软件测试不能发现程序的所有错误黑盒测试：通过有限的测试用例最大限度的提高发现白盒测试穷绝路经测试测试的原则测试用例中的一个必需部分是对预期输出或结果的定义。...

2018-06-28 17:45:46 1551 2

转载 JS的继承方法

父类：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); }}// 原型方法Animal.prototype.eat = function(...

2018-05-29 18:46:57 159

原创 CSS的居中方法

1.水平居中 1.1行内元素设置text-align:center 1.2块级元素设置margin:0 auto 1.3块级元素2.垂直居中 2.1行内元素 2.1.1单行行内元素 a.设置padding-top和padding-bottom b.设置height和line-heigh...

2018-05-27 15:06:46 396

原创 Vue中使用v-for给img中的src属性赋值

在学习Vue的时候，使用v-for获取Vue data中的数据，img中src属性使用{{}}获取，报错。<div id="app"> <div v-for="book in list"> <img src="{{book.bookImg}}"> //并不会读取到 </div></

2018-05-11 20:58:44 26617 10

原创 JS阻止事件冒泡

事件冒泡：事件开始是由具体的元素接收，然后逐级向上传播到不具体的节点。添加以下代码<div class="content"> <a href="http://www.baidu.com" target="_blank">hhhh</a></div>添加CSS.content{height: 200px;width: 600px;

2018-05-07 18:37:18 390

原创浅谈position属性

position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute。position:static static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中。因此这种定位就不会受到top、bottom、left、right的影响。<div class="wrap"> <div class="content"...

2018-04-24 20:10:42 5516

原创个人对跨域的理解

什么是跨域？跨域是指浏览器不能再执行其他网站的脚本。它是由浏览器同源策略造成的，是浏览器施加的安全限制。同源是指：域名(domain)、协议(protocol)、端口(port)。URI 说明是否跨域 http://www.LuckyFBB.com/a.jshttp://www.Lucky.cm/b.js 不同域名是http://www.LuckyFBB.com/src/a.jshttp://...

2018-04-24 15:31:24 231

原创个人对JSON的理解

JSON：JavaScript Object Notation(JavaScript对象表示法)JSON是存储和交换文本信息的语法。类似XML。JSON比XML更小、更快、更容易解析。1、语法 JSON语法是JavaScript对象表示语法的子集。 1)、数据在名称/值对中 2)、数据由逗号分隔 3)、大括号保存对象 4)、中括...

2018-04-17 15:33:56 1530

原创 JavaScript中运算符的优先级

JavaScript中运算符也分等级。具有较高优先级的运算符先于较低优先级的运算符执行。下表中按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。运算符描述. [] ()字段访问、数组下标、函数调用以及表达式分组++ -- - ~ ! delete new typeof void一元运算符、返回数据类型、对象创建、未定义值* / %乘法、除法、取模+ ...

2018-04-17 10:00:43 1248

原创 JavaScript数据类型

ECMAScript中有五种简单数据类型(基本数据类型)：Undefined、Null、Boolean、Number和String。还有一种复杂数据类型：Object。因为ECMAScript数据类型具有动态性，所以这六种数据类型足够表示所有数据。1、typeof操作符 ECMAScript是松散类型，可以用typeof来检测给定变量的数据类型。typeof操作符返回字符串。 "und...

2018-04-16 20:22:57 175

原创 JavaScript中的同步与异步

首先了解JavaScript是单线程语言，做任何事情的时候都是一条流水线（单线程）。同步和异步的区别就是在这个流水线上执行顺序不同。最基础的异步是setTimeout和setInterval函数。改变了程序正常的执行顺序。因为JavaScript是单线程。意味着，所有的任务执行都是需要排队的。前一个任务结束之后，下一个任务才能够开始。如果前一个任务消耗的时长过长，后一个任务就不得不一直等待。因此引...

2018-04-16 16:09:45 362

一个前端小白的瞎扯