jianlu_blet的博客

原创 常见密码验证规则

常见密码验证规则至少八个字符，至少一个字母和一个数字："^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"至少八个字符，至少一个字母，一个数字和一个特殊字符："^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$"最少八个字符，至少一个大写字母，一个小写字...

原创 Vue和React生命周期图

原创 react学习笔记

React.js - 第1天1. React简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友） 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Angular1 2009 年 谷歌 MVC 不支持 组件化开发由于 React 的设...

原创 JS之对象拷贝

浅拷贝：function clone (source) { let target = {}; for (let key in source) { if (source.hasOwnProperty(key)) { target[key] = source[key]; } } return target;}// 测试用例var a = { name: "m...

原创 JS快速获取图片宽高

方法一：function getImgInfo (url) { return new Promise((resolve, reject) => { let img = new Image(); img.src = url; img.onload = function (...

原创 JS错误处理

1. try-catch 语句1.1 将可能会抛出错误的代码都放在try语句块中，而把那些用于错误处理的代码放在catch块中。try {//可能会导致错误的代码someFunction();} catch (error) {//在错误发生时怎么处理alert(error.message)}1.2 finally字句虽然finally字句是可选的，但是一...

原创 获取查询字符串参数

function getQueryStringArgs () { let qs = (location.search.lenght > 0 ? location.search.substring(1) : ""), args = {}, items = qs.lenght > 0 ? qs.split('&') : [], item =...

原创 解锁浏览器背后的运行机制

浏览器内核可以分成两部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分，但随着 JS 引擎越来越独立，内核也成了渲染引擎的代称（下文我们将沿用这种叫法）。渲染引擎又包括了 HTML 解释器、CSS 解释器、布局、网络、存储、图形、音视频、图片解码器等等零部件。其中我们最需要关注的，就是HTML 解释...

原创 JS数组乱序

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];arr.sort(function () {     return Math.random() - 0.5;});

原创 JS类型判断函数封装

function type(obj) { let class2type = {} 'Array Date RegExp Object Error'.split(' ').forEach(e => class2type[ '[object ' + e + ']' ] = e.toLowerCase()) if (obj == null) ...

原创 手写一个简易的Promise

;(function () { class Promise { const status = { pending: 0, fulfilled: 1, rejected: 2 } constructor (executor) { //初始状态 this._status = status.pending; this._value = null;...

原创 手写bind函数

Function.prototype.bind = function (thisArg, ...args) {    let self = this    let Bound = function (...args2) {        self.apply(thisArg, [...args, ...args2])    }    Bound.prototype = Object....

原创 JS原生的Base64编码

编码：window.btoa('guojianlu')       //"Z3Vvamlhbmx1"解码：window.atob('Z3Vvamlhbmx1')    //"guojianlu"

原创 for in 、for of 、forEach用法总结

1.  for in 既可以枚举对象也可以枚举数组，枚举出来的是key(数组的key是0,1,2...)2.  for in 会把原型上的属性也枚举出来，但可以通过hasOwnProperty过滤3.  forEach 遍历数组的时候是无法break或者return false中断4.  for of 可以迭代数组、字符串、arguments类数组对象、NodeList这类DOM集合、...

原创 清除浮动方法汇总

1. 额外标签法：在浮动元素末尾添加一个空的标签，例如<div       style="clear: both">优点：通俗易懂，书写方便缺点： 添加许多无意义的标签，结构化比较差。2. 父级添加overflow属性方法原理： 触发BFC,可以实现清除浮动的效果。优点： 代码简洁缺点： 内容溢出会被隐藏掉3. 使用after伪元素清除浮动.clearf...

原创 将类数组对象转换成数组的方法总结

1. Array.prototype.slice.call(类数组对象)例1： function foo(a, b) {             let res = Array.prototype.slice.call(arguments);             console.log(res);          }         foo('aaa', 'bbb');    ...

原创 栅格系统（CSS Grid System）

在做项目的时候，经常要做响应式布局，对于好多初学者来说，这还是一个比较困难的事，于是就会用一些CSS框架，比如说Bootstrap, Bootstrap虽然好多方面都做得相当完善，在快速开发的时候确实很有用，但是，毕竟是框架吗，肯定不能完全符合自己的功能需求，而且也会有很多的坑，还有的情况就是也许你只需要它的栅格系统，但不得不引用它的整个css文件，这其实是完全没有必要的。那么，接下来我就将创建也...

原创 BFC的原理详解

一：BFC是什么？BFC定义：　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。　　BFC布局规则：内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻B...

原创 H5首屏秒开方案

随着移动设备性能不断增强，web 页面的性能体验逐渐变得可以接受，又因为 web 开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP 客户端里出现越来越多内嵌 web 页面（为了配上当前流行的说法，以下把所有网页都称为 H5 页面，虽然可能跟 H5 没关系），很多 APP 把一些功能模块改成用 H5 实现。虽然说 H5 页面性能变好了，但如果没针对性地做一些优化，体验还是很糟糕的，主...

原创 call、apply、bind方法详解

call方法：call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。注意：该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。语法：fun.call(thisArg, arg1, arg2, ...)thisArg在fun函数运行时指定的this值。需要注意...

原创 二叉树 BinaryTree（JavaScript）

本文用JavaScript实现了对二叉树的相关操作，包括：创建二叉树，对二叉树进行先序遍历，中序遍历，后序遍历，以及从二叉树中查找最大值，最小值，指定值。 function BinaryTree () { var Node = function (key) { this.key = key; this.left = null;...

原创 jsonp的几种实现方式

方法一：(function(window,document){ var jsonp = function (url,data,callback) { var dataString = url.indexOf('?') == -1 ? '?' : '&'; for(var key in data){ dataString +...

原创 深度优先遍历DOM树

方法一：递归实现运行结果：注：如果这是一个特变大，特变深的DOM树，这样递归调用可能出现栈溢出的风险。方法二： 栈实现运行结果:注：上边的代码可以根据自己的需求自行更改，我主要说的这两种思路。childNodes 和 children的区别：       childNodes: 子节点包括 元素节点 ， 文本节点       children:   子节点只包含 元素节点...

原创 JS判断数组或者一个字符串中出现次数最多的元素及其出现的次数

1. 判断一个字符串中出现次数最多的字母：function maxCount(str) {      var obj={};    for(var i=0;i<str.length;i++){          var key=str[i];          if(obj[key]){            obj[key]++;          }else{       ...

原创 JS数组去重

方法一：function unique1(array){  var res = [];  for(var i = 0; i < array.length; i++){  if (res.indexOf(array[i]) == -1) res.push(array[i]);  }  return res; }方法二：Array.prototype.unique2 = function(){...

原创 常用排序算法（JavaScript）

目录：1.冒泡排序2.选择排序3.插入排序4.归并排序5.堆排序6.快速排序7.希尔排序冒泡排序：冒泡排序算法的运作如下：1. 比较相邻的元素，如果前一个比后一个大，就把它们两个调换位置。2. 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。3. 针对所有的元素重复以上的步骤，除了最后一个。4. 持续每次对越来越少的元素重复上面的步骤，直到没有任何一...

原创 JS分页

        <style> a { margin: 5px;  } </style>  <div id="box"> <!-- 假设总共有10页 --> <!-- <a href="#1">首页</a> <a href="#3">

原创 HTML5 历史管理

HTML5 ---> 历史管理               --针对在一个页面内的历史管理（ajax等）1. onhashchange : 改变hash值来管理2. history :     --pushState : 三个参数：数据  标题（都没实现） 地址（可选）            --popstate事件 :  读取数据   event.state     --注意 ： 网址是...

原创 JavaScrip优化-DOM

DOM与JS就像两座独立的孤岛，中间有一座收费桥，JS每次操作DOM都需要过桥并被收取过桥费，所以要想优化DOM,就必须减少DOM操作。  var box = document.getElementById('box'); console.time('hello'); for(var i=0;i<5000;i++){ box.innerHTML += 'a'; } console.tim...

原创 异步函数简介

语法：async function asyncFuncName(param1, param2, ...) { statements } async 函数的返回值是一个 Promise 对象。当这个 async 函数返回一个值时，Promise的 resolve 方法会负责传递这个值（相当于Promise.resolve(value)）；当 async 函数抛出异常时，Promise 的 rejec...

原创 箭头函数

箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。语法：基础语法(参数1, 参数2, …, 参数N) => {函数声明}(参数1, 参数2, …, 参数N) => 表达式（单一）//相当于：(参数1, 参数2, …, 参数N) =>{ ret...

原创 JavaScript运行机制

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

原创 委托

委托分为：行为委托 和 事件委托。事件委托：利用冒泡的原理，把事件加到父级元素上，触发执行效果。事件委托的好处：1. 提高性能。2. 新添加的元素，还会有之前的事件。下面我将通过例子说明这两个好处。比如现在有这么一个需求，ul下面的每一个li，当鼠标移动上去的时候，让它的背景色变为红色，当鼠标离开的时候，将它的背景色去掉。 如果不用事件委托的话，你可能会这么写：

原创 jQuery插件开发

编写jQuery插件的两种方式：1. 类级别开发2. 对象级别开发（常用）类级别开发：1. 直接给jQuery添加全局函数jQuery.myAlert = function ( str ) { alert(str);}2. 用extend()方法jQuery.extend({ myAlert: function ( str ) {  alert(

原创 详解JavaScript中的 this 指向

this是在运行时进行绑定的，并不是在在编译时绑定的，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置。当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文），而this就是这个记录的一个属性。this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。调用位置：既然this的指向完全取决于函数的调用位置，那么，...

原创 模块与闭包

function Module(){ var something = "cool"; var another = [1,2,3]; function doSomething(){  console.log( something ); } function doAnother(){  console.log( another.join("!") ); }

原创 作用域闭包

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 function foo(){var a = 2;function bar(){console.log(a);}return bar;}var baz = foo();baz();   //2    -------->这就是闭包的效果函数bar的词法作用域能够访问

原创 作用域及相关知识

当你看见 var a = 2; 这段程序时，很可能认为这是一句声明。但实际上，它是由  var a ;   a=2 ;  这两句构成的，  var  a; 发生在编译时，a = 2；发生在运行时。变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量（如果之前没有声明过（如果该变量已经存在，则会忽略本次声明）），然后在运行时引擎会在作用域中查找该变量，如果能够找到就会对他赋值。

原创 eval和window.eval

javascript中的 eval 函数可以接受一个字符串为参数，并将其中的内容视为好像在书写时就存在于程序中这个位置一样。function foo(str, a) {eval(str);  //欺骗词法作用域console.log(a, b);}var b = 2;foo( "var b = 3", 1);   //1 3注： 在严格模式下  eval(...)运

原创 JS中的原型与继承

感觉自己隔一段时间就对原型继承，__proto__, prototype, constructor 印象模糊了，所以今天决定写篇博客记录一下，方便以后查阅。首先，prototype属性是属于构造器函数的，只有构造器函数才有prototype这个属性，而对象中有一个__proto__的属性与之相联系， 后面我在详细说明他们之间的联系。先附上一张图：由上图可以看出，每个构造器函数都