自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(41)
  • 收藏
  • 关注

原创 Git常用命令(clone/add/commit/push/fetch/merge/pull/submodule)

git底层采用的是SHA-1算法(哈希)git分支管理的本质是创建和移动指针git 签名//项目级别:仅在当前本地库范围内有效//签名信息保存在 cat ./.git/configgit config username lijj_progit config user.email 13261968767@163.com//系统用户级别:登陆当前操作系统的用户范围//签名信息保存在 c...

2019-12-15 18:57:50 520 1

原创 CSS 行内元素设置高度

设置line-height属性行内元素设置高度,并且文本垂直水平居中 span { background: red; line-height: 100px; align-items: center; display: flex; justify-content: center; } span { b...

2019-12-07 23:01:25 1820

原创 域名倒置

function reverse(str) { return str.split('.') .map(item => item.split('').reverse().join('')) .join('.').split('').reverse().join('');}// 先单个逆转得到[ 'www', 'oaboat', 'moc' ],join后再整体逆转...

2019-12-01 15:25:17 1156 1

原创 CSS 三列布局(三栏布局)

传统三列布局:左右定宽,中间自适应绝对定位+外边距实现:左右盒子绝对定位,固定于页面左右两侧;中间盒子的 margin-left,margin-right 分别等于左右两个盒子的宽度。 <!--CSS--> * { margin: 0; padding: 0; font-size: 50px; text-align: center; } ...

2019-11-29 14:03:45 888

原创 JavaScript 数组实现击鼓传花

叫到指定数字的人出列function pass(nameList, num) { const queue = []; for (var i = 0; i < nameList.length; i++) queue.push(nameList[i]); // var queue = JSON.parse(JSON.stringify(nameList)); while...

2019-11-27 16:37:02 225

原创 javascript数组实现10进制转2进制

function dec2bin(number) { var arr = []; while (number > 0) { arr.push(number % 2); number = Math.floor(number / 2); } var str = ''; while (arr.length > 0) { str += arr.pop...

2019-11-27 15:37:50 658

原创 Fibonacc 斐波那契数列 JavaScript实现

function fib(n){var a = 0, b = 1, arr = [0,1];while(arr.length < n) { [a, b] = [b, a+b]; arr.push(b);} return arr;}

2019-11-16 17:11:57 189

原创 五个常用的CSS单位

px绝对单位,一个px是一个点的意思,如果使用1920*1080这种16:9的解析度,代表屏幕横向由1920个光点组成,纵向由1080个光点组成。在设定段落的样式时,除了字体大小外,还经常设置行距,如果使用px这个绝对单位设定字体大小和行距,在更改字体大小时还要更改行距大小,否则会有行距过大或过小的情况。em相对单位,基于当前容器的大小,再乘以em的值得到最终的大小,可以理解为倍数。使用em...

2019-10-25 21:19:30 376

原创 配置redux-thunk(兼有Redux DevTools)

import { createStore, applyMiddleware, compose } from 'redux';import reducer from './reducer';import thunk from 'redux-thunk';const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION__COMPOSE_ ?...

2019-10-16 15:26:16 168

原创 Object.freeze()

彻底冻结一个对象var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if(typeof obj[key] === 'object') { contantize(obj[key]); } }); };或者var constantiz...

2019-07-04 15:36:04 551

原创 JavaScript 遍历对象

Object.keys()方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组function Person() {}Person.prototype.name = "Tom Holland";Person.prototype.age = 23;Person.prototype.job = "Spider man";Person.prototype.sayHi = f...

2019-07-02 14:32:33 767

原创 CSS实现三角形的原理

盒模型上下左右边框交界处呈现平滑的斜线,利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。调整宽度可以调节三角形形状。#test { height:0; width:0; border-color:#FF9600 transparent transparent transparent; border-style:solid; b...

2019-06-18 14:56:37 787

原创 JavaScript 数组去重

1.利用对象中的属性不能重复的原理 function unique(arr) { if(!Array.isArray(arr)) { console.log("not an array"); return; } var len = arr.length; var newArr = []; var obj = {}; for ...

2019-06-13 11:14:34 194

原创 JavaScript 循环和递归分别实现二分查找

1.经典二分查找的代码,在有序数组里面查找是否存在某个元素,如果存在,则返回相应元素所在索引号:function binary(find, arr, low, high) { while (low <= high) { var mid = Math.ceil((low + high) / 2); if (arr[mid] ==...

2019-06-12 23:12:43 653

原创 正则表达式实现 trim trimLeft trimRight

function TrimLeft(str) { return str.replace(/^\s+/g, "");};function TrimRight(str) { return str.replace(/\s+$/g, "");};function TrimBoth1(str) { return TrimLeft(TrimRight(str));};fu...

2019-06-12 17:56:23 537

原创 原生JS实现 trim, trimLeft, trimRight

function LTrim(str) { for(var i=0; i<str.length; i++) { if(str.charAt(i)!=" ") break; } //console.log(i); 打印第一个非空格字符的index return str.slice(i, str.leng...

2019-06-12 17:53:35 3059

原创 CSS position(定位)

默认值static继承no版本CSS2JavaScript 语法object.style.position=“absolute”

2019-06-06 17:30:22 298

原创 JavaScript深拷贝

Object.assign()拷贝的是属性值,假如源对象的属性值是一个对象的引用,那么它也只指向那个引用,一个有改动,另一个跟着变。let obj1 = { a: 0 , b: { c: 0}}; let obj2 = Object.assign({}, obj1); console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} ob...

2019-06-06 17:07:54 132

原创 width:100% width:auto的区别

width:100% 子元素的content宽度等于父级的content宽度width:auto 子元素的margin2+border2+padding*2等于父级的content宽度

2019-06-03 11:11:09 387

转载 JavaScript event-loop

任务队列JavaScript的一大特点是单线程,这意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就得一直等着。如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等到结果出现,再往下执行。JavaScript的设计者意识到,这时主线程完全可以不...

2019-05-24 13:38:37 167

转载 为什么JavaScript是单线程

JavaScript语言的一大特点是单线程,也就是说,同一时间只能做一件事情。这与它的用途有关,作为浏览器脚本语言,JavaScript 的主要用途是与用户互动,以及操作DOM,这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假如JavaScript同时有两个线程,一个线程在某个DOM节点上添加了内容,而另一个线程删除了该节点,这时浏览器应该以哪个线程为准?为了利用多核CPU的计算能力...

2019-05-24 10:07:29 584

原创 CSS盒模型

在标准盒模型中,width 和 height 是内容区域即 content 的 width 和 height盒子总宽度 = 左右margin + 左右border + 左右padding + width;IE盒模型或怪异盒模型中,width 和 height 除了 content 区域外,还包含 padding 和 border。盒子总宽度= width + margin(左右)box-s...

2019-05-16 17:06:08 135

原创 CSS 伪类

伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。使用伪类和伪元素,不仅可以根据文档 DOM 树中的内容对元素应用样式,而且还可以根据导航历史这样的外部因素来应用样式(例如>:visited)...

2019-05-15 13:55:24 153

原创 link @import区别

是 html 标签,定义文档与外部资源的关系,最常见的用途是链接样式表。<head><link rel="stylesheet" type="text/css" href="theme.css"><!--rel(必需),定义当前文档与被链接文档之间的关系--></head>@import 引入样式表:@import url("theme....

2019-05-15 10:15:20 181

原创 命名函数表达式--有标识符的函数表达式

定义函数的三种方法1.函数声明function functionName(arg0, arg1, arg2) {//函数体};函数声明最重要的一个特性是函数声明提升,即在执行代码之前会先读取函数声明,因此可以把函数声明放在调用它的语句后面。2.函数表达式(2种),也叫函数字面量2.1没有标识符的叫匿名函数(拉姆达函数)var functionName = function(arg...

2019-05-12 12:16:14 641

原创 JavaScript splice() 方法

splice():绞接,捻接Array​.prototype​.splice()

2019-04-28 15:44:14 236

原创 JavaScript slice()方法

slice: 切下,把…分成部分,将…切成薄片slice() 方法提取一个字符串的一部分,并返回一新的字符串。

2019-04-28 15:11:20 342

原创 JavaScript split()方法

split: 劈开,分开split() 方法使用指定的分隔符字符串将一个 string 对象分割成字符串数组:找到分隔符后,将其从字符串中删除,并返回源字符串以分隔符出现位置分割而成的一个数组。如果没有分隔符,则返回的数组包含一个由整个字符串组成的元素var str = "abcd";result = str.split();//["abcd"]如果分隔符为空字符串,则将 str 转换...

2019-04-28 14:04:50 1311 1

原创 4.4

从字符串中截取一个子串,可以使用 substr 或 splice 函数,前者接受一个开始索引和一个需要截取的字符串长度;后者接受一个开始索引和一个结束索引。“No, they're saying Booo-urns.”.substr(19, 3); //'Boo'“No, they're saying Booo-urns.”.slice(19, 22); //'Boo'...

2019-04-04 11:03:11 146

原创 4.1

声明变量使用var 声明的变量会自动被添加到最接近的环境中。在函数内部,最接近的环境就是函数的局部环境;在 with 语句中,最接近的环境是函数环境。如果初始化变量时没有使用 var 声明,该变量会自动被添加到全局环境。function add(num1, num2){var sum = num1 + num2;return sum;}var result = add(10, 20);...

2019-04-01 13:40:41 148

原创 Vue中的坑

当实例被创建时 data 中存在的属性才是响应式的。var data = { a: 1 }var vm = new Vue({data: data)}console.log(vm.a == data.a) //truevar vm = new Vue({data: data)}var data = { a: 1 }console.log(vm.a == data.a) /...

2019-03-19 19:17:12 223

原创 前端知识点总结

1.position的值, relative和absolute分别是相对于谁进行定位的?absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。static 默认值。没有定位,...

2019-03-14 17:28:43 287

原创 Webpack 入门

复杂的项目涉及到很多模块,如果一个模块化开发的项目不经过打包处理,应用是无法工作的,只有打包编译后生成的文件浏览器才能编译运行在客户端打包工作使得模块化开发更加方便,打包后生成的静态资源体积更小,加载运行速度更快使代码可以按需加载核心概念entry: 打包入口Webpack 构建依赖图的起点,先分析起点使用的模块,并解析模块中使用的模块,以此类推,最终将前端静态资源按照一定规则打包...

2019-03-14 16:01:46 120

转载 使用$refs访问Vue中的DOM

在 Vue 的模板中的任何元素中可以添加 ref 属性,从而在 Vue 实例中引用这些元素,即访问 DOM 元素。Vue 模板&lt;div id="app"&gt; &lt;h1&gt;{{ message }}&lt;/h1&gt; &lt;button @click="clickedButton"&gt;click here&lt;/button&gt; &lt

2019-02-28 17:00:37 669

转载 Vue 组件选项props

在 Vue 中,父组件通过 props 向子组件传递数据 (props down),子组件通过 events 向父组件发送消息(events up)。父子组件&amp;amp;lt;div id=&amp;quot;example&amp;quot;&amp;amp;gt; &amp;amp;lt;parent&amp;amp;gt;&amp;amp;lt;/parent&amp;amp;gt;&amp;amp;lt;

2019-02-22 11:12:14 295

原创 this

域编译过程,this 指向 window2.全局作用域里,this 指向 windowcall/apply可以改变函数运行时 this 的指向obj.func( ),func( ) 里的 this 指向 obj

2019-01-11 11:53:32 129

原创 typeof

typeof 返回值object, boolean, number, undefined, funcition, string记忆方法是 objectj 是 number,暂且这样记住吧。。。

2019-01-11 10:52:36 125

原创 call & apply

作用:改变this指向function a() { b.apply(null,arguments); //等价于 b(arguments);}function b() { console.log(arguments);}a(1,2,3,4,5);// 1,2,3,4,5

2019-01-11 10:26:18 226

原创 JavaScript单线程模型

单线程模型指:JavaScript 只在一个线程上运行。即,JavaScript 同时只能执行一个任务,其他任务必须在后面排队等待。注意:JavaScript只在一个线程上运行,不是说 JavaScript引擎只有一个线程。实际上,JavaScript引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合。JavaScript从诞生起就是单线程,这也是这门语言的核心...

2018-12-27 14:12:11 524

原创 如何用正则表达式匹配“只能由字母 数字 下划线 百分号 点 组成”

pattern: /^[a-z0-9A-Z._%]+$/ ; ^在[ ]里面表示“非”;^在[ ]外面匹配输入字符串的开始位置,即从字符串左边第一个字符开始匹配;$ 匹配输入字符串的结束位置;+ 匹配前面的子表达式一次或多次。例如,‘zo+’ 能匹配 “zo” 以及 “zoo”,但不能匹配 “z”。+ 等价于 {1,}。* 匹配前面的子表达式零次或多次。例如,zo* 能匹配 “z” 以...

2018-12-13 17:32:35 6498

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除