pro_monkeyking的博客

原创 带着疑问来理解JavaScript闭包是如此简单

前言在JavaScript中，闭包对于JavaScript的意义无异于指针在c++中的意义。理解闭包是我们掌握JavaScript这门语言的基础能力，而对闭包的掌握程度就可以看出来你对JavaScript这门语言的深入程度，网上关于闭包的文章也不少但多数让人看过之后一头雾水，也许是自己理解能力较差。所以我还下定决心以提问的方式来理解何谓闭包，希望能给与我有相同境遇的博友一点帮助。闭包是什么...

原创 深入理解flex布局

前言随着电子产品的快速迭代，传统的前端布局越来越难以是配多端的屏幕显示，无论是table布局还是float布局在移动端适配上都有着很大的局限性。09年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局，flex的应用可以极大程度上补充传统布局的不足之处。flex布局是什么Flex是flex box的缩写意为弹性布局，用来为盒状模型提供最大的灵活性。特点：采...

原创 VUE全家桶之vuex核心原理解析

前言现在前端开发中vuejs是大部分前端工程师的首选，只要不是很小的项目都会引用vuex来进行状态管理。最近新开展的项目比较复杂，使用vuex的地方也比较多。在此过程中也遇到了不少问题。如今有时间正好研究下vuex框架源码，深入了解下他的底层实现。为什么要使用vuex在当前前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，子父组件间的传值，兄弟组件间的传值...

原创 VUE全家桶之vuex的使用

前言在vue项目中，如果我们涉及到兄弟组件间的传值（及多个组件共享一个状态）。遇到这种情况使用vuex来解决是目前比较流行的解决方案。虽然在vuex官方文档中详细介绍了vuex的使用方法，但是文档中的内容太过细节，初次阅读不易抓住重点。本篇文章根据自身使用vuex的经验来精简的说明下vuex的使用，希望内能够给初次使用vuex的小伙伴提供些帮助，也希望熟悉这块的道友如发现文章不到之处给出指正。...

原创 vue使用总结（3）生命周期篇

工作之初使用的angularjs框架，从那时开始数据双向绑定的思想就深深的吸引了我。那是刚入门并没有深究angularjs实现双向绑定的原理。所以至今对angularjs也是一知半解。在工作半年左右接触了vue，开始使用它作为主要的开发框架。使用至今已有两年多了，期间也对其源码进行过研究。vue的各种理念也都比较了解。最近有空总结下自己对vue各个知识点的理解。 vue生命周期示例图 上图...

原创 vue.js的使用总结（2）原理篇

原理篇 本章是以上一章为基础上来深入理解vuejs的设计思想， vue中比较出彩的是虚拟DOM，响应式数据数据操作（数据双向绑定）以及丰富的生态库（vue-router vuex iview….）。 1.vue中的响应式数据 在数据双向绑定这个理念出来之前，前端中都是使用jQuery或原生js操作DOM来实现数据变化。这不仅实现过程麻烦，也对页面的性能有很大的影响。vue框架中的核心理念就...

原创 chrome devtools 常用功能总结

一 Console基本功能 1.Console可以作为调试的log输出 2.作为js代码的执行坏境可以直接在console中写JavaScript代码 如: 3.可以用来直接编辑页面在console中输入 document.designMode = “on” 二 Element基本功能 1.可以用来查看网页的HTML元素 2.右侧的style可以调试页面的样式属性，是前端布局样式调

原创 vue.js的使用总结（1）基础篇

最近公司要求使用vue.js开发一款PC端的应用，大约用时4个月完成，在此之前只是了解过vue.js，在项目完成后对vuejs的相关内容也有了大致的了解，为了加强自身的记忆，对vue的相关知识进行总结梳理，方便以后的开发。如有不足之处请各位道友批评指正。 基础篇： 先上张xmind思维导图 注：vue的基本知识内容比较多，此处总结自己认为在vue中比较难理解和重要的知识点 1. vu...

原创 纯前端实现腾讯cos文件上传功能

前言在前端开发中文件上传是经常会遇到的，并且多数情况会使用第三方平台来存储文件，腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档 JavaScript SDK 步骤安装腾讯云COS上传所需的sdk下载cos-js-sdk-v5.min.js并引入index.html监听文件上传组件//监听文件变化document.ge...

原创 纯web端实现二维码识别

前言最近公司的业务场景中有个生成二维码和识别二维码的需求。生成二维码之前有做过，选用的 qrcode.js这个前端库,操作比较简单。这里不再赘述。刚开始看到二维识别这个需求觉得很简单，以为有相应的前端库直接用就行了。但当真正开始写功能时，发现二维识别会涉及到很多其他的功能。废话不再多说，还是来看看如何实现的吧。实现流程调用摄像头通过浏览器调用摄像头在h5中已经有个属性可以兼容大部分...

原创 解决iview中表格导出Excel时单元格内不换行的问题

分享一篇解决iview中表格导出Excel时单元格自动换行问题的文章1.遇到问题的过程最近的项目中有将表格内容导出到Excel表格的需求，正好我们使用的是iview框架。在iview中的table组件自带表格导出到Excel功能，于是开心的直接使用：html:<Table :columns="columns" :data="data" size="small"

原创 vue 项目中ivew按需引入

原创 Vue项目中路由动态传参功能相关实现

这两天在项目中有个新需求：在当前页面中的有很多数据，过滤数据的条件有时间，页码，类型，id搜索….，假设我在页面中选择的某段时间，某个类型，现在我需要把握当前看到的信息完全展现给另一朋友。 server端环境：时间和页码可以动态的传递到后端一. 初步解决方案刚看此需求首先想到的是vue—router的动态传参，于是就开始码代码。将过滤条件相关的变量动态的传说路由中 thi...

原创 vue2.x 项目搭建

环境搭建 a) 下载node.js http://nodejs.cn/download/ 安装完成后添加到坏境变量 b) 全局安装 vue-cli npm install -g vue-cli(输入 vue -V输出版本号则为安装成功)新建项目 a)进入你需要新建项目的目录输入： vue init webpack test（一直回车即可） 结束后会生成一个test的文件夹

原创 node学习之路（四）net模块实现tcp通信

点击进入官网net模块API 在node中net模块专门用于tcp服务器和tcp客户端的通信。1.实现步骤如下创建tcp连接 var server=net.createServer([options],[callBackFunc1]); 监听客户端请求 server.listen(port,[host],[backlog],[callbackFunc2]); 参数说明 callBackF

原创 node学习之路（三）文件操作

最近学习了node的fs模块，在此与大家分享所得。不妥之处请诸位道友批评指正。1.文件操作的同步与异步当今异步操作横行编程界，node也是以异步编程为大家所称道。在node的文件操作中也是以异步为主，同步为辅（虽然存在感低，但我也是存在的）。异步方法：readFile(......),writeFile(......),appendFile(......),open(......)

原创 node学习之路（二）Buffer对象

在js中对于二进制数据没有进行很好的支持（前端中二进制数据用的较少）。但是在出路TCP流和文件流数据时，二进制数据处理不可避免。因此node定义了一个Buffer类来处理二进制数据流。1.创建Buffer类Buffer类和其他类的创建并无区别，只需要new其对象即可。注：Buffer类有一个length属性，用来规定Buffer类的长度。第一种：var buf=new Bu

原创 grunt构建工具使用总结（二）Gruntfile文件配置

启动grunt必须新建一个Gruntfile文件，在文件中必须写的代码：module.exports = function (grunt) {}grunt所用的配置都写在此函数中。本节主要谈谈一下几点设置：concat(合并)，uglify（压缩），watch（监视），jshint（代码规范）1.代码合并插件（concat）在现在的前端项目中代码合并是项目

原创 grunt构建工具使用总结（一）环境搭建

前一个项目中，项目组长要求我们用grunt来构建项目，这里总结了一些工作经验供大家学习参考。1.安装nodejshttps://nodejs.org/下一步下一步下一步、的安装方式，这里不再赘述安装了nodejs之后，可以在你的控制台中输入“node -v”试验nodejs是否安装成功。2.npm(npm是nodejs自带的包管理工具，所以不用再安装)//创

原创 webpack构建工具安装

一环境搭建,安装webpack工具最好是在node的环境下使用npm1.      安装nodejs：官网下载安装，设置为全局的环境变量 node –v测试安装成功 2.      npm包管理器（node安装时已经顺带安装）      npm –v测试安装成功3.      全局安装webpack npm install –g webpack4.   

原创 浅谈DOM中事件机制

在前端中，js和HTML的交互是通过事件来实现的。事件也可以理解为用户在浏览页面的一些操作，如点击鼠标，移动鼠标，按下键盘等操作。想要在成为一名出色的前端工程师，了解DOM的事件机制是必备知识。而了解DOM，我觉得从以下几个方面入手更能快速的掌握：事件流，事件处理程序(这只是DOM中最为基础也是最为重要的一部分)。一  、事件流PS:有兴趣的可以了解下浏览器的发展史，更能容易理解事件流

原创 nodejs学习之路（一）基本概念

最新因工作需要正在努力学习node中，在此也与小伙伴们分享下自己的学习过程。

原创 JavaScript中原型学习基础

第一节 原型基础转眼之间接触JavaScript这门语言有一年多，在工作中用的都是其开发的框架。原生的JavaScript在项目中基本很少用到。在此利用工作之余，总结最近所学，如有不妥之处，望各位批评指正。原型：1.原型是什么？在JavaScript中所有的函数和对象都有原型这个属性，我们称为原型对象(prototype)。2.原型都有什么内容?

原创 分享一些JavaScript中不足之处

最近看了JavaScript的语言精粹这本书，数中简单明了的介绍了JavaScript这门语言的优美和不足之处，下面分享一些JavaScript中的不足之处，也就是我们在编程中会因其特性而犯错误的一些语言特性。1)        全局变量：在微程序中可以带来便利，但在大型程序中为成为令人头痛的问题。问题：大型程序中，全局变量难以管理。降低了程序的可靠性。如果全局变量的名称碰巧与

原创 JavaScript中的内置对象Math

简介：Math在JavaScript 是一个内置对象， 为数学常量和数学函数提供了属性和方法，而不是一个函数对象。与其它全局对象不同的是, Math 不是一个构造器.  Math 的所有属性和方法都是静态的. 你用到的常数pi可以用 Math.PI 表示,用 x 作参数 Math.sin(x)调用sin函数. JavaScript中的常数, 是以全精度的实数定义的.

原创 jquery和js中对DOM元素的操作

jquery / javaScript1.创建元素document.createElement();1.增加节点JQ: element.append() element.appendTo() element.prepend() element.prependTo()JS: document.append()2.删除节点JQ:JS:3.插入节点JQ:

原创 javaScript中的设计模式(5)单例模式

单例模式指的是只有一个实例的对象在JavaScript中实现这种定义的方法是定义字面量：var singleon={name:"single"method:function(){return this.name;}}优点：1、提供了对唯一实例的受控访问。2、节约内存资源，提高代码执行率。3、允许可变数目的实例。 主要缺点：1，

原创 javaScript中的设计模式(4)动态原型模式

在项目开发过程中我们经常遇到一些需要动态添加的变量或方法属性。在JavaScript语言中动态原型模式能很好的解决此问题。栗子：function Person(name,age,job){this.age=name;this.name=age;this.job=job;if(typeof this.sayName !="function"){//添加if语句动态的判定P

原创 JavaScript中return返回函数的问题

在使用return中遇到以下一个函数：var name="super";var object={  name:"child",  getName:function(){  console.log(this.name);    return function(){      console.log(this.name);    }  }}object.

原创 JavaScript中常见的设计模式（3）原型模式

原型模式在上一章节中已经说过原型模式解决了构造模式和工厂模式的不足之处。function Person(){}Person.prototype.name ="yuan xing";Person.prototype.age=23;Person.prototype.job="Software engineer";Person.prototype.displayInfo=func

原创 JavaScript中常见的设计模式（2）构造函数模式

构造函数模式 在ECMAScript中构造函数可以用来创建特定类型的对象。例如：Array Object String等的原生构造函数。根据这一特性我们可以重写构造函数来满足我们的需求，代码如下：function Demo(name,address,time){this.name=name;this.address=address;this.time=time;//

原创 JavaScript中常见的设计模式（1）工厂模式

在编程的世界，每种语言都有其各自的优缺点。为了弥补这些缺点，各种设计模式也随之二诞生。在此介绍一下自己对JavaScript设计模式的一些学习总结。工厂模式：顾名思义，工厂及将各种零件组装成我们需要的设备。在编程语言中及可以参照此思想，用在某个函数中传入变量来处理这个变量。栗子：function factory(name,time,location){//内部的处理过程对外

原创 JavaScript中Array对象总结-(forEach,fill,unshift,push)

在JavaScript开发中经常遇到添加数组元素和修改元素的问题，一下总结了一些数组添加元素和修改元素的方法。1.Array.prototype.forEach(callBack(param1,param2,param3))方法对数组的每个元素执行一次提供的函数。param1:数组中正在处理的当前元素。param2:数组中正在处理当前元素的索引。param3:函数处理的原数组。

原创 JavaScript中的Date总结

基础知识日期在我们处理用户form表单验证，监测装置信息等很多方面都有使用。在使用过程中我总结出以下几点常使用的Date方法：字符串转换成日期格式、number型转换成日期格式、日期格式的变化、日期大小的比较、日期的自动刷新注：此小节主要介绍：字符串转换成日期格式、number型转换成日期格式1.string类型=>date型var date = new Date('Decem...

原创 javaScript中的BOM对象-navigator和cookies（4）

1.navigator是BOM属性之一，他引用的是包含浏览器厂商和版本信息的Navigator对象

原创 关于JavaScript基础知识

变量1.变量的类型基本类型：String Number Null Undefined Boolean引用类型：Object(function Array ....)2.变量的定义基本类型：var example；（弱类型）引用类型：var example =new Array()[或者用example=[]]两种类型定义的方法相同，但是引用类型定义之后具有属性和...