- 博客(42)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 【案例】CRM客户管理系统的登录模型
一个简单的用户名密码登录，期间会发生什么尼？登录模型核心流程如下：简单说明一下：格式校验：如判断用户名/密码框是否为空，或格式是否符合要求。如果不符合要求直接提示或进行相关的处理，就不向服务器发请求了。MD5加密：在真实项目中，密码等信息是一定要经过不可逆转加密的，MD5加密即不可逆转。可逆转的加密是可以按照相应规则进行解密的，所以还是不安全。在真实项目中通过MD5加密的密码是这样验证的：所谓不可逆转加密，就是不能被解密的。你在百度上可能会看到“在线MD5解密”的工具，它们是基于碰撞检测实现
2020-06-18 16:33:23
690
原创 手写Promise⭐(race,finally方法除外)
只有代码警告⚠class MyPromise{ constructor(executor){ // 每一个实例都有一个状态和结果属性 this.status = 'pending'; this.value = undefined; // 创建数组存放then中的方法 this.resolveArr = []; this.rejectArr = []; // 定义change方法修改状态 let change = (status,value) => { if(
2020-06-05 16:21:07
294
原创 AJAX的异步性
需求：在向服务器发送请求，获取数据后，动态创建一个盒子，然后点击盒子时，修改盒子的样式。// 核心代码(有问题版本)$.ajax({ url:'...', method:'get', success(result){ $('body').append('<div>...</div>'); // 创建盒子 }})；$('#box').click(function(){ $(this).css('background','lightcoral');})这样写
2020-06-05 09:35:01
228
原创 Promise基础用法&async await
引入Promise是ES6提供的一个内置类，是一种设计模式。为什么会出现Promise呢？在JavaScript中，所有代码都是单线程执行的。因此JavaScript的所有网络操作，浏览器事件，都必须异步执行。异步执行可以用回调函数实现，一种很常见的场景就是网络请求。但是当网络请求非常复杂时，就会出现回调地狱。发送请求1，成功->发送请求2，成功->发送请求3...这样一层层嵌套，非常不利于代码的维护。Promise对象是JavaScript 的异步编程的一种解决方案，可以很优雅的避开回
2020-06-04 09:54:57
313
原创 数组和对象的深浅克隆
数组克隆方法有哪些ES6展开运算符let arr1 = [10,20,{name:'cmj'}];let arr2 = [...arr1];数组arr1中元素既有基本类型值，又有对象。把arr1中元素展开逐个赋值给arr2，最终arr2中元素与arr1全部相同，实现了数组的克隆。由于数组和对象均为引用类型值，实际存储的是堆内存地址。arr2===arr1返回false说明arr1和arr2占用了不同的堆内存，可是数组中的对象元素在克隆后仍占用同一块堆内存。像这样，只把最外层克隆，而内层与
2020-06-03 09:55:29
224
原创 AJAX核心四步操作
目录AJAXAJAX核心四步操作XMLHttpRequest实例对象打开请求连接请求方法监听请求状态AJAX状态码——xhr.readyStateHTTP状态码——xhr.status发送请求AJAX引入：你是如何理解AJAX的？AJAX(Asynchronous Javascript And XML，异步JS和XML)。所谓异步JS指的是基于AJAX进行局部刷新。（全局刷新 vs 局部刷新）服务器渲染时代（全局刷新）：服务器收到HTTP请求，获取到请求的资源文件页面中的代码，从数据库中根据业务逻辑
2020-06-02 11:41:54
630
3
原创 从用户输入URL到看到页面发生了什么？
【公开的内心独白】接触前端还没多久的时候参加了一次面试，被问到这个问题，由于基础薄弱，那时的我居然认为——这也能算作一个问题？不就输入网址弹出页面……完了么（我太天真了手动捂脸.jpg）后来我发现，这题就像无底洞露出的小小洞口。进去之后发现一篇新天地，而且是越探索越发觉广阔的那种。现在也没有算是理解太透彻，姑且将习得的内容整理下来，后面慢慢补充细节吧。总体而言分为以下几个步骤DNS解析什么是URLDNS解析TCP三次握手——建立连接发送HTTP请求服务器处理请求并返回响应结果TCP四次挥手——关闭
2020-05-28 22:47:56
442
原创 几道有意思的面向对象面试题
1let obj = { 2: 3, 3: 4, length: 2, push: Array.prototype.push}obj.push(1);obj.push(2);console.log(obj);2a等于什么值会让下面条件成立var a = ?;if (a == 1 && a == 2 && a == 3) { console.log('OK');}3function Fn(n,m) {
2020-05-22 16:49:47
246
原创 深入探索call/apply/bind的内部机制
上一回说到Function.prototype上有三个神奇的方法call/apply/bind，他们都可以改变函数中的this指向。接下来的时间喃，请跟随我踏上“深入探索call/apply/bind的内部机制”之旅，知其然而知其所以然——才能屡战屡胜呀！bind方法原理前一篇文章this的情况总结中，我们了解了bind方法的用法，简单回顾：[function].call([context],params1,params2,…)，预先修改this，预先存储参数，而函数不被立即执行。下面我们就来康康
2020-05-18 21:59:53
201
原创 JS中this的情况总结
初学JS，你有没有被代码里的this搞得晕头转向？有一说一，反正我晕了。于是经过一番系统学习，终于算是理清了this这个鬼东西，希望看完这篇文章的你也能战胜this呀！目录全局上下文中的this块级上下文中的this函数私有上下文中的this事件绑定普通方法执行构造函数执行ES6中的箭头函数call/apply/bind方法全局上下文中的this在浏览器环境中，全局上下文中的this，就是window。let a = 12;console.log(this); // 控制台输出为
2020-05-18 15:34:11
228
原创 重写内置new和Object.create方法
重写内置new方法编写_new方法实现内置new xxx()具备的功能。function Dog(name) { this.name = name;}Dog.prototype.bark = function () { console.log('wangwang');}Dog.prototype.sayName = function () { console.log('my name is ' + this.name);}function _new() { .
2020-05-16 15:36:47
407
原创 原型prototype与原型链__proto__
目录数据类型新的扩展&很重要的几句话原型链机制检测某个属性是否是某个对象的属性new函数执行要不要加()基于内置类原型扩展方法为啥要往原型上扩展方法tips数据类型新的扩展&很重要的几句话类——函数类型；实例——对象类型；函数也是对象，也有自己的键值对每一个函数 (除ES6中的箭头函数外) 都有一个内置属性prototype(原型属性)，属性值是一个对象，存储了当前类的公共属性&方法供实例调用。prototype堆中，如果是浏览器为其默认开辟的堆内存，则默认存在constr
2020-05-14 15:22:50
351
原创 JS面向对象基础——内置类&自定义类创建的底层机制
面向对象思想，围绕对象、类、实例的概念与关系展开~对象、类、实例的概念可以按照自然界中类别和个体的概念进行理解。至于对象——万物皆对象~目录JS中的内置类自定义类JS中的内置类数据类型类：每种数据类型都有一个自己对应的类Number类：每个数字(包括NaN/Infinity)都是它的一个实例。String类：每个字符串都是它的一个实例。Boolean类Null&Undefined类：浏览器保护了这两个类。Symbol类：不可被new。BigInt类Object类：Arra
2020-05-14 09:59:52
334
原创 正则表达式中常见的的元字符和修饰符
正则表达式由两部分组成：元字符、修饰符元字符元字符又分为量词元字符、特殊元字符、普通元字符量词元字符元字符含义*0~多次+1~多次?0次 或 1次{n}出现n次，n为0或正整数{n,}n~多次{n,m}n~m次特殊元字符元字符含义\转义字符，可以普通转特殊 or 特殊转普通.除了\n以外的任意字符^以…开头$以…结束\n换行\t一个制表符tab(四个空格)\d0
2020-05-11 11:27:59
252
原创 JavaScript时间字符串格式化
目录需求方案一：字符串拼接方案二：基于replace替换方案三：正则处理需求封装一个方法，将某个格式的时间字符串，转换为任意我们想要的格式。如2020/5/2 17:08:46 => 2020年05月02日 17时08分46秒。方案一：字符串拼接思路：首先将字符串中所有代表时间的值全部获取到，再拼接成我们想要的格式。let time = "2020/5/2 17:08:46"; ...
2020-05-02 19:40:18
1881
原创 JavaScript字符串常用方法
通过浏览器控制台console.log(String.prototype)获取字符串内置的属性和方法~字符串常用方法的要点：方法的意义、作用参数@params返回值@return与数组对象不同的是，字符串方法的所有操作均不会对原字符串产生影响。因为字符串是基本值，字符串方法是copy一份来操作的，而数组是对象，操作的是堆的地址，有可能会改变原始堆内存中的内容。目录获取指定位置的字符...
2020-04-30 14:39:50
547
原创 JS练习题(一)
计算以下代码的输出。var result = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false;console.log(result)'============================================2.console.log([] == false);con...
2020-04-28 11:17:47
474
原创 作用域链和私有上下文
这篇文章让我们深挖一下函数创建和执行过程中的底层机制~引入以下代码输出什么？var x = [12,23];function fn(y){ y[0] = 100; y = [100]; y[1] = 200; console.log(y);}fn(x); // [100,200]console.log(x); // [100,23]一道很简单的题目，了解底层...
2020-04-25 10:41:39
242
原创 DOM对象的深入理解
DOM是啥？JS由三部分组成：ECMAScriptDOM(Document Object Model): 文档对象模型，简单来说，就是提供一系列的属性和方法，让我们能够操作页面中的DOM元素(可以理解为HTML标签)。BOM(Browser Object Model): 浏览器对象模型如何获取DOM元素？这里先简单列举两个，用以探究DOM内部结构。语法含义do...
2020-04-24 17:59:31
345
原创 JS中的判断和循环语句——容易忽略的点
常用判断语句if…else if…else…/三元运算符？ ：最简单的if…else…可以改写为三元运算符。若某一分支不做操作，则用null/undefined占位；可以在某一分支内进行多项操作，可将其写在()中，多项操作间用，分隔；可嵌套三元运算符switch…case…每一种case情况都是基于===判断的（值与数据类型必须均相同）常用循环语句for循环...
2020-04-23 09:45:49
137
原创 数据类型与堆栈内存练习&数据类型检测
目录数据类型相关练习堆栈内存相关练习数据类型相关练习1、let a = {}, b = '0', c = 0;a[b] = '你好'；a[c] = '再见'；console.log(a[b]); // '再见'b,c为变量，在作为属性名时默认将变量的值作为属性名，即字符串’0’和数字0，这两者作为属性名时是相同的（可以理解为均为字符串’0’）。因此后面的赋值会覆盖前面。2...
2020-04-22 09:13:00
313
原创 JS堆栈内存底层处理——从几道面试题谈起
JS堆栈内存底层处理——从三道面试题谈起一些概念栈内存堆内存一些概念执行栈执行环境栈（ECStack）。JS引擎执行代码时，首先创建执行环境栈。执行上下文（EC）每个域下的代码执行，都有自己的执行上下文。分为全局执行上下文、函数执行上下文。全局对象（GO）在浏览器中，会把全局对象赋值给window，在Node中不然。栈内存负责执行代码，存储基本类型值堆内存负责存储引用类...
2020-04-21 23:07:32
796
原创 JS中的string与boolean类型
目录string类型其他类型转换为string类型字符串拼接boolean类型string类型其他类型转换为string类型String([value])[value].toString()两种方法基本一致，没啥区别~基本数据类型转换为字符串类型，均得到相应的字符串特殊情况：① 普通对象->string："[object Object]"② 数组对象->strin...
2020-04-20 21:44:32
1033
原创 number数据类型及转换详解
转换为number数据类型的几种方式Number()——JS内置转换方法parseInt()/parseFloat()其他方式小tipNumber()——JS内置转换方法转换规则：string->number:若字符串（全部）为有效数字字符，则转换为相应的number类型数字。字符串中出现了无效数字字符，则转换结果为NaN。空串，转换为数字0。boolean-&g...
2020-04-20 17:41:55
2712
原创 JS中常用的输出方式总结
console系列（浏览器控制台输出）命令详细console.log()控制台输出日志，可以一次性输出多个值console.dir()详细输出，不可一次性输出多个值console.table()将多维JSON数据以表格形式输出console.time() / console.timeEnd()输出两者中间代码的运行时间console.warn(...
2020-04-20 09:54:46
159
原创 JS中的关键字和保留字
关键字关键字可用于表示控制语句的开始或结束，或用于执行特定操作等。关键字不能用作标识符。breakcasecatchcontinuedebugger(第五版新增关键字)defaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoi...
2020-04-20 08:41:03
574
原创 浏览器内核分类和控制台使用
浏览器内核分类和控制台使用常用浏览器依据内核分类Chrome控制台常用浏览器依据内核分类Webkit内核ChromeSafariOpera（>V14）国产浏览器360（普通浏览器、极速浏览器）猎豹搜狗QQUC……Gecko内核FirefoxTrident内核IE系列Chrome控制台Elements：包含当前页面中所有结构、样...
2020-04-19 20:47:35
38317
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人