- 博客(41)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 响应式设计 Responsive web design
响应式设计 Responsive web design一 、 概念Responsive web design (RWD) is an approach to web design that makesweb pages render well on a variety of devices and window or screensizes. 响应式网页设计（RWD）是一种网页设计方法，可使网页在各种设备以及窗口或屏幕尺寸上都能很好地呈现。响应式 VS 自适应自适应设计（AWD） 一个
2022-05-18 21:34:38
572
原创 超级详细的koa源码解析（看完不会我打你）
如果你想提升node水平，那么我极力推荐你看看koa源码。koa作者是神一般的男人TJ Holowaychuk，源码设计巧妙而又短小精悍，既能领略koa的设计思想，而又避免了源码过冗长而带来的疲劳感。这篇文章，我们从源头出发，一起领略kao的精髓，同时围绕下面三点介绍：1.老生常谈的 洋葱模型2. context的 委托模式3. koa的 错误处理目录结构话不多说，让我们开始吧～首先请跟我一起打开命令行 输入touch koa_learn.js && npm init &am
2020-07-11 16:58:35
962
原创 记一次前端春招实习面经（已拿字节、腾讯offer）
前言三月份已经快过去了，笔者的实习面试就要告一段落了。在这接近一个月的时间，经历了面试时的紧张、失败时的痛苦、拿到offer的兴奋。目前面了字节、美团、腾讯、清远墨墨、阿里。并拿到了字节、腾讯、清远墨墨的实习offer。这次就先从笔者就从自己的心路历程结合面试干货娓娓道来。（ps:由于笔者没有面试完就及时写面经的好习惯，以至于一些细节有些忘记了。我会在想起来的第一时间回来补充）初面试-字节跳...
2020-03-30 16:36:25
2901
4
原创 记一次字节跳动前端实习面试
前言准备了一个星期。刚刚结束了我人生中第一次面试。本以为胜券在握，但最后以失败告终。虽然莫名奇妙的在hr评估环节被挂了，不过我觉得挂的不冤，还有好多值得自己反思和提升的地方。同时感谢二面的面试小哥，谢谢他的肯定与鼓励，让我重整旗鼓。这次面试也是对我的一次磨练，失败并不可怕，害怕失败才可怕！经过这次面试，我总结了下前端大厂对知识的深度和广度都有一定要求的，还有尤其是字节跳动对算法很重视，这一点无...
2020-02-22 11:31:25
2306
原创 JS排序算法
quickSort = (arr, left, right) => { if (!arr) return null let start = left || 0 let end = right || arr.length if (start < end) { let num = getNum(arr, start, end) ...
2020-02-22 10:31:11
188
原创 Babel原理
前言在学习es6的时候就一直希望了解一下bable的转码原理，偶然的机会查了查，整理了一下。Bable的主要工作原理Bable是一个转译器，与编译器不同。bable主要负责目标代码的版本转换，只处理同一种语言，并且只负责输出转码后的代码串。大概分三个阶段：parsing 生成AST抽象语法树（将整个代码字符串分割成语法单元 ，进行语义分析，在分词结果的基础之上分析语法单元之间的关系）...
2020-02-13 11:30:16
582
原创 vue双向绑定原理
observerDepwatcher将data中的值进行defineProperty监视，遇到对象则递归调用，直到所有都被defineProperty。是用来装入watcher的队列。由Observer主动触发。在渲染dom时实例化watcher在get时，将Dep.target放入dep队列中。在set时，通知dep进行更新。每一个dep实例装着对应的watch...
2020-02-10 14:38:03
385
原创 深入理解Comet、SSE、WebSocket
在一些需要浏览器和服务器频繁交流的情况下，如实时分数、市场报价等，我们需要一些适合技术来解决问题。在这个大环境下，Comet被Dojo创始人——Alex Russell发明出来。Comet是一种更高级的Ajax技术。也成为服务器推送。 他适合服务器实时提供新的信息。CometComet有两种方式实现，Ajax长轮询和HTTP流。1.Ajax长轮询和短轮询Ajax短轮...
2020-01-22 23:00:29
1060
原创 网络安全之TLS/SSL
TLS/SSlTLS/SSl 是非对称的公钥私钥结构。服务器和客户端有着自己的公私钥。公钥用于加密数据，私钥用于解密数据。每个公钥只能由对应的私钥才能打开。在安全通信之前，服务器和客户端互换公钥。服务器使用客户端的公钥加密，客户端使用自己的私钥解密。客户端使用服务器的公钥加密。服务器使用自己的私钥解密。可以把公钥理解成一把锁，私钥理解成开这把锁的钥匙。这就好比两人互换礼物，每人一把钥匙一...
2020-01-08 16:42:52
383
原创 JavaScript之你不知道的reduce
reducelet names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];var sum = names.reduce(function(prev, cur, index, arr) { if(cur in prev){ prev[cur]++ }else { prev[cur] = 1 }...
2019-12-18 21:02:33
158
原创 计算机网络导图个人总结
计算机网络基础概述和物理层好久没更了，最近在刷剑指offer学习算法，已经快刷完了。这次把总结的计算机网络知识导图分享一下，用的软件是mindline（吐槽下，这真的不是很好用哈，还是用process on比较得劲）。思维导图+附源文件。物理层...
2019-12-18 20:53:53
339
原创 会跳舞的代码
抖音上那些跳舞的代码看起来好炫酷，昨天用了一下午的时间用vue写了一个。看起来是这样的。这里是App.vue部分。<template> <div id="app"> <canvas id="canvas" style="display: none" ></canvas> <input type="f...
2019-11-08 14:41:57
4782
1
原创 实现简单Vue框架
声明最近在学习Vue源码，学习之余，参考大神的self-vue，也就是 这篇文章。在学习过程中一边加上了注释，增强了可读性。现在把他分享给正在学习路上的你，愿你能少走些弯路。我在源码的基础上删改了部分代码，并且使用es6语法。目录结构───────────────├── index.html 入口页面├── js│ ├── index.js 主体│ ├...
2019-10-27 23:00:09
538
2
原创 原生JS实现Promise
为了能完成一周至少一更的计划，还没有写讲解，先放上源码。为了便于理解，我把代码调整成相对精炼。最近忙着学习算法和Python，我会在空暇时间抓紧写讲解。希望我能够帮到你，感谢。源码function MyPromise(executor) { var self = this self.status = 'pending' self.onResolvedCallback =...
2019-10-23 16:32:35
242
原创 模拟Vue挂载VDOM
function DOMrender(oldVal, newVal, textVal, attrVal) { let oldDom = document.querySelectorAll(oldVal) for(let oneOldDom of oldDom){ let newDom = document.createElement...
2019-10-18 22:15:15
139
原创 一分钟理解JavaScript宏任务和微任务
JavaScript是单线程的。所以有了同步异步的概念，想必不用说了，异步如常见的setTimeout、Promise。这两个东西却有本质上的区别。setTimeout是宏任务，Promise是微任务。同为宏任务的有setInterval等，同为微任务的有Node的process.nextTick等。见下图。相比于宏任务，微任务的开销会小一点。JS代码执行的顺序是，按着主线程执行代码，当遇到一...
2019-10-17 13:42:47
1398
2
原创 Python排序算法
冒泡排序def bubbleSort(arr): n = len(arr) for i in range(n): for j in range(n - 1 - i): if arr[j] < arr[j + 1]: arr[j], arr[j + 1] = arr[j + 1], arr[j]ar...
2019-10-17 12:41:56
135
原创 为什么说DOM操作是昂贵的
总体上来说，操作DOM对象时，会触发浏览器的布局（layout) 和 绘制（paint) 行为，这两个罪魁祸首会导致DOM卡慢，占用内存较高等，从而影响用户体验。浏览器渲染引擎工作流程创建DOM树 HTML分析器，分析HTML元素，构建一颗DOM树创建StyleRules CSS分析器，分析CSS文件,构建Rules树创建Render树 将DOM树和Rules树关联起来，构建一颗...
2019-10-12 13:34:15
1457
2
原创 五子棋游戏（JavaScript+JQuery+Canvas）
一个简单的五子棋小游戏，自带音效。效果如下HTML<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalab...
2019-10-11 15:55:40
573
原创 Javascript轻松理解发布订阅模式
首先声明，本文的创作灵感来源于 这篇文章发布订阅模式，也可以称之观察者模式，定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。发布订阅模式与观察者模式也有着些许区别。请看下面。观察者模式小王和小李知道张三是卖报的伙计，他们都想在张三那里买报纸。小王和小李便和张三约定，一旦张三有了新报纸，就通知他俩。这里，小王和小李作为观察者，张三作...
2019-10-10 13:40:11
195
转载 发布订阅模式与观察者模式
背景设计模式并非是软件开发的专业术语，实际上，“模式”最早诞生于建筑学。设计模式的定义是：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说，设计模式是在某种场合下对某个问题的一种解决方案。如果再通俗一点说，设计模式就是给面向对象软件开发中的一些好的设计取个名字。这些“好的设计”并不是谁发明的，而是早已存在于软件开发中。一个稍有经验的程序员也许在不知不觉中数次使用过这些...
2019-10-10 12:35:35
221
原创 jQuery源码学习
最近学习一点jQuery源码，并且写了一个很简单的myquery。没有考虑ie兼容。涉及到知识点如下Dom类数组extend拓展静态方法noConflicteach原型方法仿css仿innerHTML。。。(function (window, undefied) { let myjquery = function (selector, cont...
2019-10-09 18:04:55
120
原创 Javascript实现深拷贝
JS实现深拷贝，有一个大招。利用JSON的解析和序列化。JSON.parse(JSON.stringify())这个我常用，可谓是一招鲜，吃遍天单独实现数组的深拷贝，下面列出几种方法map() 直接遍历[…] 扩展运算符slice()Array.from()单独实现对象的深拷贝，下面列出几种方法Object.assign(){…}Object.create...
2019-10-08 12:59:28
232
原创 Javascript部署iterator接口
JS给对象部署iterator接口并封装成函数Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。什么意思呢，你想用for …of遍历你的数据结构， 就得部署Iterator接口。原生提供这个接口的数据结构有。数组、类数组对象(如argument)、Map和Set结构。let arr = [1,2,3]let x = arr[Symbol.iterator]()x.ne...
2019-10-06 11:09:34
673
原创 Javascript访问对象点运算符.和方括号[]的区别
js在访问对象属性和方法时会用到两种方式obj.aobj[a]两种方法本质作用一样，但是在用法上 [] 比.有更多的功能。方括号可以放不能作为标识符使用的包含数值或者段横（-）的字符串obj.1 //errorobj.- //errorobj[1] //okobj['1'] //ok 和上作用相同obj['-'] //ok方括号里可以放变量...
2019-10-06 09:59:44
444
原创 Linux系统安装并启动mongodb服务
Linux系统安装并启动mongodb服务下载链接 mongodb-linux-x86_64-3.0.6.tgz或者去官网自己下把这个目录移动到你想放的位置 。 我的是放在 /usr/local/把下载的目录改名 mongodb新建两个文件夹在mongodb 目录下新建 data文件夹 在data文件夹下新建db文件夹 （这个是保存数据库数据的）在mon...
2019-10-02 18:46:55
881
原创 Element UI autocomplete带输入建议 自动补全后缀（邮箱地址）
Element UI autocomplete带输入建议 自动补全后缀（邮箱地址）官网介绍autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。这个组...
2019-09-18 14:37:16
3917
4
原创 Git命令（简单常见）
Git命令（简单常见）mkdir learngit //创建新仓库pwd //查看当前目录git init //这个目录变成Git可以管理的仓库$ git add readme.txt //添加文件到仓库git commit -m "???" //把文件提交到仓库git status //查看仓库当前的状态git diff readme.txt //查看修改g...
2019-09-14 22:32:13
121
2
原创 ES6学习总结（五）
class和class继承为什么要引入class?要知道，JavaScript是没有类的概念的，我们在面向对象编程的时候，通常会是编写一个构造函数。把属性写在函数里，方法放在原型上。function constructor(a,b){ this.a = a; this.b = b;}constructor.prototype.add = function (){ retur...
2019-09-14 15:19:41
168
原创 ES6学习总结（四）
ES6学习总结(四)本章准备介绍下Promise对象，Generator函数和async函数。1.Promise对象在之前，我们进行异步的操作时，通常会使用回调函数。比如要读取三个文件，如果只能是在读取上一个，才能打开下一个文件的情况下，依次读取他们，并将他们头尾拼合在一起。 fs.readFile(fileA, function (err, data) { let re...
2019-09-13 23:09:26
197
原创 ES6学习总结（三）
ES6学习总结(三)本节主要是以下内容，其中重点是 proxy和Reflect 这一点Symbol对象Set和MapIterator 和 for…ofproxy和Reflect1.Symbol对象在很多时候，我们在定义对象的属性时很容易遇到重名的情况，或者使用第三方的插件时，容易遇到重名的情况。ES6引入了第七种数据类型Symbol，作为一个具有 独一无二 的值...
2019-09-13 12:46:54
330
原创 ES6学习总结（二）
ES6学习总结(二)继上一节，本节继续巴巴 =v=1.数值的拓展这一张主要是Number和Math新增方法，上图!2.函数的拓展函数的默认值 这个第一节讲过，可以和解构赋值组合使用 function add( x = 3, y = 5) { return x + y}add() //8 function add( [x = 3, y = 5] = []) ...
2019-09-12 20:32:17
230
原创 ES6学习总结（一）
ES6学习总结(一)前言最近读了阮一峰老师的 《ES6标准入门》,这本书涵盖的干货很大，短时间内吸收的有些力不从心。在这里把我个人认为比较 常用的方法 或者需要注意的点简单总结下。 另外我将主要章节的知识树作成了 思维导图 分享，部分内容可能在表达上不严谨，仅供初学者参考使用。1.let 和 constlet不会像var一样，存在变量提升 ,所以必须先声明才能使用。{ x ++; le...
2019-09-12 19:51:43
429
原创 简单理解JS原型
简单理解JS原型先附上一张图及代码function Person(){ this.name = 'tom'; this.age = 22; this.sayName = function (){ log(this.name) }}let person1 = new Person()let person2 = new Person()...
2019-08-27 13:10:41
158
原创 Jquery+Css实现行星运动源码分享
css+jquery实现行星运动源码分享在菜鸟教程上挖到的小例子，自己玩着改了改，分享一波源码。html部分<div class="solarsys"> <!--太阳--> <div class='sun'></div> <!--水星轨道--> <div class='mercuryOrbit'>&l...
2019-07-20 14:47:40
607
原创 JS解决因循环绑定click事件失效
很多js新手都会在绑定事件遇到绑定失效的问题。大致思路就是，比如用一个循环让对应的button按钮绑定对应的事件。比如这样 <button id="1">1 </button> <button id="2">2 </button> <button id="3">3 </button></body>...
2019-07-20 13:19:39
2214
5
原创 小程序云开发数据库查询语句之doc与where||如何查询到不符合条件的结果
小程序云开发数据库查询语句之doc与where||如何查询到不符合条件的结果一只孤独的菜鸟最近在云开发时遇到的查询语句，where和doc，在官方文档上是这样的db.collection('todos').where({ done: false, progress: 50}).get()或者是db.collection('todos').doc('todo-identifi...
2019-06-02 18:09:18
9754
2
五子棋 更正版.zip
2019-07-30
五子棋.zip
2019-07-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人