![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
栗子好好吃
向来心是看客心,奈何人是剧中人
展开
-
[生态建设] - js判断小技巧
0、参考说明: 从几个易得的点出发,逐步向外扩展延申,保证代码的可靠性1、判断是否为某个类型// 判断是否为 nullconst isNull = o => { return o === null;};// 判断是否为 undefinedconst isUndefined = o => { return o === undefined;};// 判断是否为 null or undefinedconst isNil = o => { return isNu原创 2021-01-09 10:24:45 · 145 阅读 · 0 评论 -
[web性能优化] - 使用在线工具对html、js、css进行压缩
参考1. 学习点使用 在线工具对html、css、js进行压缩学会分析压缩前后的效率提高点2. 解决方案:2.1 HTML压缩在线压缩nodejs提供了 html-minifier工具(在构建层对代码进行压缩)后端模板引擎渲染压缩2.2 CSS压缩使用html-minifier对html中的css进行压缩使用clean-css对css进行压缩使用在线压缩如下图所示。2.3 js压缩与混乱使用html-minifier对html中的js进行压缩使用ug原创 2020-11-25 00:42:25 · 477 阅读 · 0 评论 -
[redux] - createStore简单的实现
class createStore { constructor(reducer, preloadedState, enhancer) { this.currentReducer = reducer; this.currentState = preloadedState; this.currentListeners = []; this.nextListeners = this.currentListeners; this.isDispatching = fal..原创 2020-10-26 10:27:42 · 275 阅读 · 0 评论 -
算法 --- > 回溯法
回溯法参考 - 剑指Offer回溯法可以看成蛮力法的升级版,它从解决问题每一步的所有可能选项里系统地选择出一个可行的解决方案.回溯法解决的问题的特性:可以形象地用树状结构表示:节点: 算法中的每一个步骤节点之间的连接线: 每个步骤中的选项,通过每一天连接线,可以到达下一个子步骤叶子节点: 代表一个步骤的最终状态如果在叶节点的状态满足需求,那么我们找到了一个可行的解决方案...原创 2020-03-08 21:42:15 · 263 阅读 · 2 评论 -
javascript --- > 手写Promise、快排、冒泡、单例模式+观察者模式
手写promise一种异步的解决方案, [参考](Promise代码基本结构function Promise(executor){ this.state = 'pending'; this.value = undefined; this.reason = undefined; function resolve(){ } ...原创 2020-03-06 20:29:41 · 602 阅读 · 0 评论 -
javascript --- > vue2.x中原型的使用(拦截数组方法) && 响应式原理(部分)
说明在Vue2.x中,利用了对原型链的理解,巧妙的利用JavaScript中的原型链,实现了数组的pop、push、shift、unshift、reverse、sort、splice等的拦截.你可能需要的知识参考 - MDN原型链JavaScript常被描述为一种基于原型的语言(prototype-based language),每个对象拥有一个原型.数组类型也不例外.验证如下:...原创 2020-03-03 16:14:57 · 909 阅读 · 0 评论 -
javascript --- > 对象原型
对象原型参考 - MDNJavascript中的原型在Javascript中,每一个函数都有一个特殊的属性,叫做原型下面获取函数的原型fn.prototypefunction f1(){}console.log(f1.prototype)/* { constructor: f f1() __proto__:{ constructor: f Object() __...原创 2020-03-02 16:48:24 · 170 阅读 · 0 评论 -
javascript --- > Vue初始化 && 模板渲染
不带响应式的Vue缩减实现模板现有模板如下:<div id ="app"> <div class="c1"> <div title='tt1' id="id">{{ name }}</div> <div title='tt2' >{{age}}</div> <...原创 2020-03-01 14:35:53 · 302 阅读 · 1 评论 -
javascript --- > 函数的柯里化 && Vue 2.x中柯里化的使用
函数式编程部分重点参考资料: 函数式编程柯里化只传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数var add = function (x) { return function(y) { return x + y }}var increment = add(1)var addTen = add(10)increment(2) // ...原创 2020-02-29 11:25:49 · 777 阅读 · 2 评论 -
javascript --- > vue中简单的模板渲染
将下面的模板中的mustache语法使用给定数据渲染.模板如下<div id="root"> <div> <div> <p>{{name}} - {{message}}</p> </div> </div> <p>{{name}}</p> <...原创 2020-02-28 21:03:04 · 246 阅读 · 0 评论 -
javascript --- > 将DOM结构转换成虚拟DOM && 虚拟DOM转换成真实的DOM结构
虚拟DOM的实现使用虚拟DOM的原因: 减少回流与重绘将DOM结构转换成对象保存到内存中<img /> => { tag: 'img'}文本节点 => { tag: undefined, value: '文本节点' }<img title="1" class="c" /> => { tag: 'img', data: { title = "1"...原创 2020-02-28 12:02:11 · 2189 阅读 · 0 评论 -
javascript --- > 对象属性的深层次获取
现有对象如下let obj = { a: { b:{ c:{ d:'Marron' } } }}想通过一个方法,输入该对象和路径a.b.c.d获取Marron的值【思路】:首先使用split数据,将a.b.c.d变为[a, b, c, d]然后使用shift()方法每次取出最前面的属性名,存放在prop中新建一个res对象,让res = r...原创 2020-02-26 23:13:08 · 2433 阅读 · 0 评论 -
javascript --- > [有趣的条件]双等号的隐式调用和数据劫持
1 双等号的隐式调用和数据劫持求下面条件,在a为什么样时,等号成立if(a == 1 && a == 2 && a == 3){ console.log('等号成立')}1.1 双等号的隐式转换首先得了解双等号的隐式转换规则等式备注对象 == 字符串隐式调用 toString方法将对象转换成字符串null =...原创 2020-02-10 21:05:37 · 221 阅读 · 0 评论 -
javascript --- > [小练习]变量提升、优先级综合
求下列函数输出结果function Foo() { getName = function() { console.log(1) } return this}Foo.getName = function() { console.log(2)}Foo.prototype.getName = function() { console.log(3)}var g...原创 2020-02-10 18:01:58 · 158 阅读 · 0 评论 -
javascript --- > 堆栈内存与闭包的作用
你可能会用到的堆内存: 存储引用类型值所在的空间栈内存: 存储基本类型值和存储代码所在空间函数上下文: JS每一个函数在执行的时候都会创建一个执行上下文1. 堆内存中的数字和字符串都是相等的let a = {}, b='0', c=0;a[b] = 'marron';a[c] = 'Mar'console.log(a[b]) // Mar第一行代码, a创建是一个对象,对...原创 2020-02-10 12:00:09 · 219 阅读 · 0 评论 -
算法 --- > 递归实现多级树展开结构
在项目中,经常会给出一个深度不确定的数组,数字结构如下:data = [ {name: 'a', child:[{name: 'a1'},{name: 'a2', child: [{name:'a21'}]}]}, {name: 'b'}]要求将数组渲染成对应的目录结构, 结构如下:<ul> <li> a ...原创 2020-02-08 18:21:08 · 1174 阅读 · 2 评论 -
jquery --- > 监听tab栏的变化
1. jQuery样式操作1.1 操作css方法参数只写属性名,则返回属性值(字符串)$(this).css('color')参数是 属性名、属性值(逗号分隔,则表示设置属性$(this).css('color','red')参数可以是对象的形式$(this).css({ width: 400px, height: 400px})1.2 设置类样...原创 2020-02-08 16:36:16 · 1061 阅读 · 0 评论 -
javascript --- > js中的作用域 && 变量提升
1 求以下函数的输出1.1 考察点: 变量提升、this、作用域// 考察点 作用域、this、变量提升var a = 10function test() { a = 100 console.log(a) console.log(this.a) var a console.log(a) }test()第一个和第三个肯定是100在node环境下,没有wi...原创 2020-02-07 22:28:44 · 278 阅读 · 2 评论 -
javascript --- > 防抖与节流
说明源码1. 防抖与节流1.1 防抖防抖: 触发事件后,在n秒内函数只执行一次记忆: 你手比较抖,不小心按了按钮2下…你只希望它只执行一次.且按第二次结束时间算…这就用到了防抖技术1.2 节流节流: 连续发生的事件,在n秒内只执行一次函数记忆:1.3 防抖与节流的区别在一段时间内,不管触发多少次事件,事件处理函数都只处理一次称之为节流防抖,是在最后一次事件...原创 2020-02-07 21:06:43 · 291 阅读 · 0 评论 -
javascript --- > 瀑布流的实现
说明源代码1. 瀑布流出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题解决的思路: 让图片等宽、不等高核心: 用到了定位img { position: absolute; left: 最小的索引 * 图片的宽度; top: 最小的图片的高度;}算法如下:...原创 2020-02-07 19:38:00 · 204 阅读 · 0 评论 -
javascript --- > [jsonp] script标签的妙用(绕过同源限制)
1. 同源1.1 什么是同源协议、域名、端口号相同1.2 为什么有同源政策同源政策是为了保护用户信息的安全,放置恶意的网站窃取数据。最初的同源政策是指A网站再客户端设置的Cookie,B网站是不能访问的.随着互联网的发展,同源政策也越来越严格,在不同源的情况下,其中有一项规定就是无法向非同源地址发送Ajax请求,如果请求,浏览器就会报错2. jsonpjsonp是json with...原创 2020-02-04 14:38:22 · 852 阅读 · 0 评论 -
javascript --- > [FormData的使用] 文件上传进度条展示 && 文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问.1.1 静态资源使用express将public下面的资源暴露出来在根目录下面新建一个public文件夹和一个app.js文件// app.jsconst express = require('express');const p...原创 2020-02-04 14:09:58 · 258 阅读 · 0 评论 -
javascript --- > [FormData的使用] 表单元素转换成表单 && 对象二进制文件上传
1. FormData的作用1.1 将Form表单元素,转换成表单对象在使用Ajax进行表单提交的时候,采用原生的js获取dom,然后添加属性.当表单项很多的时候,代码会很多.不利于后期阅读、维护.这时,可以使用FormData对象,将HTML中的表单元素转换成表单对象,如下:<!-- 表单对象 --><form id="form"> <input typ...原创 2020-02-04 13:49:17 · 999 阅读 · 0 评论 -
node --- > [express] cookie/session 机制与 中间件的使用(路由守卫)
说明源代码记忆、遗忘回顾使用 cookie/session 机制,让 客户端/服务器 的访问变得有状态cookie 与 session由于 HTTP 协议的无状态性,当一次连接断开后. 服务器并不会记录用户是否登录. 因此需要引入 cookie/session 机制cookiecookie: 浏览器在电脑硬盘中开辟的一块空间,主要供服务器端存储数据cookie 中的...原创 2020-01-29 17:26:36 · 593 阅读 · 0 评论 -
javascript --- > 文件上传即时预览 && 闭包实现多图片即时预览
使用javascript原生功能实现,点击上传文件,然后再网页上显示出来1. 初级显示1.1 准备一个input标签和一个img标签<input type=file id="file"><img id="preview" src="">1.2 js代码如下 // 将上传的图片显示到页面上 function showUpload() { // ...原创 2020-01-28 21:34:59 · 248 阅读 · 0 评论 -
javascript --- > 实现对象的深拷贝
浅拷贝和深拷贝浅拷贝: 只拷贝一层.当对象是复杂数据类型(Object、 Array)时,只拷贝引用深拷贝: 多层拷贝.复杂数据类型,会重新分配内存空间.实现浅拷贝的2种方法使用for ... in 实现var obj = { name: 'marron', age: 18, msg: { sex: "1" }}var o = {};for(let k in ...原创 2020-01-24 15:24:29 · 289 阅读 · 0 评论 -
JavaScript --- > [学习笔记] 原型模式
说明接JavaScript — > [学习笔记]观察者模式 & 理解对象 & 工厂模式 & 构造函数模式上一篇构造函数模式创建的实例,不同实例的同一个方法是不相等的,为了解决这个问题.出现了原型模式1. 原型模式具体做法是,不在构造函数中定义对象实例的信息,而是将这些信息直接添加到原型对象中function Person(){}Person.pro...原创 2020-01-16 11:23:13 · 244 阅读 · 0 评论 -
JavaScript --- > [学习笔记]观察者模式 & 理解对象 & 工厂模式 & 构造函数模式
说明:本篇为后面TCP的模拟实现做准备本篇的主要内容: 观察者模式、JS中对象相关的概念、原型链本篇是阅读JS数据的理解(大部分书原内容+少量理解)1. 观察者模式参考JavaScript设计模式1.1 消息注册方法“将订阅者注册的消息推入到消息队列中”[算法思路] :在推入到消息队列时,如果此消息不存在则应该创建一个该消息类型并将该消息放入消息队列中如果此消息存在...原创 2020-01-10 16:13:42 · 256 阅读 · 0 评论 -
javascript --- > [虚拟DOM] 初始化&& 实现
说明本篇主要说明为什么要使用虚拟DOM技术,以及如何实现简单的虚拟dom为什么提出 -> DOM操作慢我们使用createElement属性来创建一个最常见的div,看看一个最常见的DOM有多少个属性<script> const div = document.createElement('div'); let str = ''; for(let key i...原创 2019-12-21 21:39:45 · 374 阅读 · 0 评论 -
算法 --- > [map的使用]求最大和谐子序列
说明和谐数组是指一个数组里元素的最大值和最小值之间的差别正好是1。现在,给定一个整数数组,你需要在所有可能的子序列中找到最长的和谐子序列的长度。输入: [1,3,2,2,5,2,3,7]输出: 5原因: 最长的和谐数组是:[3,2,2,2,3].思路创建一个map用于统计数组中的值,及值出现的次数创建一个max,用来保存出现的最大次数遍历map,在map中寻找...原创 2019-12-16 10:15:17 · 200 阅读 · 0 评论 -
node --- > [node接口阅读]cluster的使用
目标在主进程中完成以下事情:每隔1秒钟输出,当前请求的数量创建等同于CPU数量的进程对每个进程施加一个处理函数,用于统计请求的数量在各个CPU的进程中完成以下事情监听8000端口的请求,并返回最简单的信息发送事件,以触发主进程中施加的事件处理函数前置知识首先通过cluster.isMaster来判断,当前的执行环境是主进程,还是非主进程使用process.s...原创 2019-12-14 20:15:12 · 227 阅读 · 1 评论 -
javascript --- > Object.create的阅读
说明今天阅读koa源码时,遇到Object.create,感觉对这个概念有点生疏,于是打开了MDN进行重新梳理传送门Object.create()直接套用官网的栗子const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. ...原创 2019-12-11 20:28:50 · 177 阅读 · 0 评论 -
大前端成长路径
求星星:https://github.com/Lizhhhh原创 2019-10-31 09:50:14 · 416 阅读 · 0 评论 -
javascript --- > [代码优化]将复杂的函数分解写&&异步请求数据的同步写法
说明今天优化项目结构,发现有如下一个函数const drawMqiPie = async (index) => { // 请求的参数 let params = { lineNo: lineNo, direct: 1, driveway: 1, pageNum: 0, pageSize: 0, computeR...原创 2019-12-06 15:52:01 · 167 阅读 · 0 评论 -
koa --- > 使用koa-multer上传文件+elementUI
目录结构如下基本思路1.通过浏览器访问url: http://localhost:3000/upload2.服务器(koa)监听到对应的路由,调用路由处理函数3.使用nunjucks模板引擎进行渲染,并返回给浏览器4.浏览器渲染完毕后显示出来.5.点击上传文件->上传6.服务端监听到上传的POST请求,进行相应的处理并将处理结果返回给前端总体代码/upload.js...原创 2019-11-30 16:41:22 · 1085 阅读 · 0 评论 -
koa --- > restful规范及其栗子
遵循Restful规范的简单的栗子前端代码:<html><head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"...原创 2019-11-21 15:01:27 · 129 阅读 · 0 评论 -
koa --- > 使用Github OAuth登录
准备登录github选择右上角的settingDeveloper settings -> OAuth Apps -> Register a new application填入基本信息点击绿色的按钮,可以看见 client_id 和 client secret理清思路:开始时,一个登录的连接,点击连接.后台监听登录(/login)路由,然后重定向到github...原创 2019-11-20 10:43:16 · 372 阅读 · 0 评论 -
node --- > 实现session认证.
自己创建 Session注: session 是后端的内容具体思路如下:使用 session 空对象存 cookie 键值对.当第一次进入的时候,生成一个随机数 sid,通过 cookie 传递 sid,并再后端使用session[sid] = msg的方式,记录本次的值若非第一次进入,则需要从 cookie 中解析出 sid,进而得到该 sid 下的内容(有可能是用户信息)c...原创 2019-11-17 21:29:47 · 254 阅读 · 0 评论 -
koa --- > 扩展hbs方法
moment是一款常用的处理时间的库传入 1999-03-01T16:00:00.000Z YYYY/MM/DD输出 1999/03/02const moment = require('moment');const myDatePattern = (date, pattern) =>{ return moment(date).format(pattern)} 给扩展h...原创 2019-11-17 10:57:54 · 248 阅读 · 0 评论 -
koa --- > 监听路由,并使用模板引擎渲染显示
使用路由/Koa实战/routes/index.jsconst Router = require('koa-router');const router = new Router();router.get('/', ctx => { ctx.body = 'index';});module.exports = router/Koa实战/routes/users...原创 2019-11-17 09:27:36 · 666 阅读 · 0 评论