景洪的博客

javascript中的“this”星期五的下午和同学ci完菠菜面，顺便买了6块钱的菠萝回宿舍开始“搞代码”这是在此博客写的第一篇文章，以前在wordpress写的文章有时间再转过来。大一大二没有写博客的习惯，倒是从大一折腾微信公众号，闲下来写写关于摄影的想法，经常拍了作品也往里放。大二下学期开始决心转计算机，还年轻梦想还是要有的，也谓之“不忘初心”。在学计算机的这一年中对我影响很大的是感悟出的一些

堆栈数据结构的实现：在编程方式上面采用了面向对象编程里面的组合使用构造函数模式和原型模式； 实现原理：这里就不阐述堆栈的基本概念了，学c语言数据结构的时候都学过吧，这里主要纪录一下用js实现的原理；c语言用结构体去实现，在js语言中用面向对象就十分方便了；用dataStore存储数据；用top表示栈顶位置，它的值也等于栈的长度；出栈和入栈方法分别是pop和push；show（）方法返回某一

链表结构的原理图：链表是由一组节点组成的集合，每个节点都是使用一个对象的引用指向他的后继节点；最后一个节点指向空对象null；为了更好的标示链表的起点，在第一个节点之前添加了一个头节点； 插入节点的原理图链表中插入一个节点的效率很高，向链表中插入一个节点，需要修改它前面那个节点（前驱节点），让它指向新加入的节点，然后让新加入的节点指向前驱节点以前指向的节点； 删除节点的原理图和插入节点一样也是改

字典是一种以键值对存储数据的一种结构其实我们可以使用数组和对象去实现字典结构，但是，我们自己定义一个Dictionary类，让这种字典类型使用起来更加简单，使用（）来引用键更加方便； 定义Dictionary类function Dictionary(){ this.datastore = new Array();}给Dictionary原型添加方法：Dictionary.prototyp

用邻接表表示图：如下图所示的图: 用邻接表二维数组表示为：adj[0] = [1,2,5,6];adj[1] = [0,3,8,9];adj[2] = [0,4];adj[3] = [1];adj[4] = [2];adj[5] = [0,7];adj[6] = [0];adj[7] = [5];adj[8] = [1];adj[9] = [1]构建图类： functi

题目描述找出数组 arr 中重复出现过的元素 示例1 输入: [1, 2, 4, 4, 3, 3, 1, 5, 3]; 输出: [1, 3, 4]; 方法一：先排序后查重：function duplicates(arr) { var newArr = arr.sort(); var result = []; for (var i = 0; i < newArr.length; i

拓扑序： 如果，图中从v到w有一条有向路径，则v一定排在w之前，满足此条件的顶点序列称之为拓扑序，获得一个拓扑序的过程叫做拓扑排序；AVO如果有合理的拓扑序，则必定是有向无环图； // 拓扑排序 topSort: function(){ var that = this; var a = 1; var visit

typeof的小”bug”;提到类型检测大家首先应该会想到typeof 操作符，现在复习一下她的用法，对于一个值使用typeof会得到以下结果： “undefined”,”boolean”,”string”,”number”,”object”,”function”; 但是，有个bug是，当值为正则表达式的时候，结果为”function”; instanceof的弊端:value inst

函数柯里化 用于创建一个已经设置好了一个或或者多个参数的函数通用写法如下：function curry(fn){ var args = Array.prototype.slice.call(arguments, 1); return function(){ var innerArgs = Array.prototype.slice.call(arguments); va

//发布-订阅类function Event(){ this.events = {};}Event.prototype = { on: function(key, fun){ if (!this.events[key]){ this.events[key] = []; } if (typeof fun == 'func

2017.10.19前端开发时间：45分钟方式：视频主要问题： 1、实习中，你的工作是哪些，你实现的功能？ 2、巡更管理系统中，你遇到了哪些问题，设计了哪些插件，怎么实现的？ 3、vue框架，子元素向父元素传递信息，孙子元素向父元素传递信息的实现； 4、jQuery的项目做vue项目的重构怎么做？ 5、bootstrap框架的实现原理 6、em、rem单位是什么 7、百分号可以设

何为事件委托再解释什么是事件委托之前，补充一下事件冒泡： 事件流：描述从页面接受事件的顺序，IE事件流为事件冒泡，而Netscape的事件流为事件捕获； 事件冒泡：事件开始从最具体的元素（文档中嵌套层次最低的那个节点）接受，然后逐级向上传播到较为不具体的节点。事件委托利用事件冒泡原理，当触发嵌套较深的元素的时候，这个触发会冒泡到叫深的事件，例如页面中的某个div被点击，这个点击事件会冒泡

写在前面的话最近在找工作的时候，觉得应该把编程原理性，基础性的知识学的扎实一点，所以系统的学了一下设计模式，主要参考书籍是：《javascript设计模式与开发实践》，写下博客是对书中我认为比较重要的内容的一个提炼，然后自己做个总结；以下： 什么是多态 多态：同一个操作应用到不同的对象上，可以产生不同的解释和执行结果，多态背后的思想是将“做什么”和“谁去做，怎么做”分开，其中“做什么”是不变

单例模式单例模式是一种保证一个类仅仅拥有一个实例的模式，使用这种模式，全局仅仅有一个该类的实例，它的实现思路是，构造一个类，这个类拥有instance属性，这个属性是一个flag，当它为null时才能创建一个类的实例，并且把实例赋值给它；创建实例使用的一个静态方法一般命名为getInstance 实现一个不透明度单例模式不透明单例特点是就是不能通过new Single来创建单例，而是通过 Sin

require.js的主要作用是js的工程化，规范化：1）它是一个js脚本的加载器，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行。并提供了在加载完成之后的执行相应回调函数的功能；2）它要求js脚本的模块化，也就是文件化；require.js的作用之一就是加载js模块，也就是js文件。所以我

silly-datetime时间格式转换https://www.npmjs.com/package/silly-datetime formidable文件post上传https://www.npmjs.com/package/formidable browser-sync浏览器自动刷新http://www.browsersync.cn/ body-parser post请求内容解析https://

const testPath = path.join(__dirname, 'test.txt')const readFileAsync = new Promise((resolve, reject) =&amp;amp;amp;gt; { const data = readFile(testPath, 'utf8', (data, err) =&amp;amp;amp;gt; { if (data) resolve(data)...

数组属于什么数据类型让我们一起复习一下吧：javascript基本数据类型有五种：Number、String、Undefined、boolean、Null引用类型有： 引用类型是一种数据结构，将数据和功能组织在一起： Object、Array、Date、RegExp、Function基本包装类型： Boolean、Number、String单体内置对象：Global、Math java

1、匹配双字节字符：[^\x00-\xff]正则表达式 [^\x00-\xff]能匹配双字节字符，下面方法用来获取字符串长度，规则为：单字节长度为1、汉字等双字节长度为2； function getLength(str){ return str.replace(/[^\x00-\xff]/g, 'aa').length;//把所有非单字节的字符转换成2个单字符 }

正则表达式的基础知识：字面量的形式ECMAscript通过RegExp引用类型来支持正则表达式，使用下面语法就可以创建一个正则表达式： var expression = /pattern / flags;模式（patten）：可以是简单或者复杂的正则表达式，可以包含字符串，限定符，分组，向前查找及反向引用；标志（flags): 用来标志正则表达式的行为，主要有一下三种标志： g：表示全局模式，

给事件处理函数传参数今天刷百度前端学院的任务，遇到了一个问题，需要给事件处理函数传参数；我把问题抽象成下面问题

闭包的直接传递 function foo(){ var a = 2; function b(){ console.log(a); } out(b); } function out(fn){ fn(); //函数b其实是在这里被调用的，但是仍然能访问到函数foo内部的作用域 } foo

setTimeout和任务对列的联系，单线程优点，性能优化； 一、诡异的SETTIMEOUTsetTimeout(code, ms)函数是指在指定的毫秒数(ms)后调用函数或执行代码块，并返回一个整数，后续可以通过clearTimeout(num)传递这个整数来取消该定时器。setTimeout(function(){ console.log(1);}, 0);console.log(

前端工程一般具有以下四个步骤：基础构架（项目文件目录结构）任务自动化（自动监听、检测、压缩、响应）编译工具（babel、webpack）代码实现 目录结构如下app(前端）server(服务器）tasks（构建工具） - step1：服务器端代码在命令行输入： express -e .(express脚手架工具，－e表示ejs模版引擎，.表示当前目录）npm installste

在线使用地址https://regexper.com/将工具安装到本地由于在线地址是国外的所以访问起来可能有一点延迟，所以我们可以把这个web应用安装到本地，很大提高了访问速度，步骤如下1、访问 github源码 https://github.com/javallone/regexper-static2、复制项目源码下载地址https://github.com/javallone/regexper

自定义事件，解决了原生事件的诸多问题

对象创建方法其实主要有两种最简单的方式：创建一个Object实例var person = new Object();person.name = 'jinghong';person.age = 22;person.sayName = function(){ alert(this.name); }对象字面量 var person = { name = ‘jinghong’

一、用vue－cli构建初始项目step1：全局安装vue-cli$ npm install --global vue-clistep2: 创建一个基于webpack模版的新项目vue init webpack my-vueRouter-project1step3：创建项目过程中，根据提示填写项目名称，是否使用ESLint检查项目等功能，具体填写结果如下： step4： 安装依赖文件//

javascript用来区别IE与其他浏览器的方法：1、document.allif (document.all){alert(”IE浏览器”);}else{alert(”非IE浏览器”);}2、!!window.ActiveXObjectif (!!window.ActiveXObject){alert(”IE浏览器”);}else{alert(”非IE浏览器”);}

首先看下面这段动画的原始的callback写法：var ball1 = document.querySelector('.ball1'); var ball2 = document.querySelector('.ball2'); var ball3 = document.querySelector('.ball3'); function animate(ball, dist

用于循环体中break和continue都是用于循环中精准控制代码的执行； 当遇到break时，立即退出循环执行循环体后的语句； 但是遇到continue时，会退出循环，从循环体的顶部继续执行循环；实例 var num = 0; for (var i = 1; i < 10; i++){ if (i % 5 == 0){ break; } num ++

一、DOM节点创建DOM节点（Node）最主要的三类为：Element，元素节点Attribute，属性节点Text，文本节点DOM节点创建最常用方法：document.createElement()document.createTextNode()var node1 = document.createElement('div');var node2 = document.creat

定义节点二叉查找树是由节点组成，所以我们首先要定义一个Node类， //定义类 function Node(data, left, right){ this.data = data; this.left = data; this.right = right; this.show = show; } //定义No

如何书写模块一、函数写法 function m1(){ //... } function m2(){ //... }函数m1和m2就是两个最原始的模块；但是它的缺点是，函数名高度暴露，污染了全局变量。二、对象写法var module = new Object({ m1: function(){ //...

首先复习一下鼠标事件：click: 在用户单击主鼠标按钮，或者按下回车键时触发。 mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发； mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。 mouseleave： 在鼠标光标移动到元素范围之外时触发 mousemove：当鼠标指针在元素内部移动时重复地触发，不能通过键盘事件触发这个事件； mouseout：

一、element.child和element.childNodes的区别childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。我遇到的坑：var childNodes = rootEle.children; chi

MongoDB和mongoose mongoose 是个 odm。odm 的概念对应 sql 中的 orm。也就是 ruby on rails 中的 activerecord 那一层。orm 全称是 Object-Relational Mapping，对象关系映射；而 odm 是 Object-Document Mapping，对象文档映射。它的作用就是，在程序代码中，定义一下...