进一步，有一步的欢喜。

原创 前端面试题整理汇总100题

1.一些开放性题目1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。2.项目介绍3.如何看待前端开发？4.平时是如何学习前端开发的？5.未来三到五年的规划是怎样的？position的值， relative和absolute分别是相对于谁进行定位的？ absolute:生成绝对定位的元素， 相对于最近一级的 定位不是 stati...

原创 数组合并和对象合并的方法

数组合并、对象合并

原创 js中构造函数的继承

js 构造函数的继承例子学习

原创 ES6 -类的继承-super 学习笔记

js类 super

原创 如何完成一份优秀的前端求职简历？

前端简历-自查

原创 ES6学习-generator

ES6的generator

原创 JS闭包学习笔记

产生的背景 JavaScript既存的变量使用现状：在JavaScript语言中，存在特别的现象：函数内部可以直接读取全局变量，但是在函数的外部无法读取函数内部的局部变量。特别的：变量的作用域分为：全局变量和局部变量。那如何去读取函数内部的变量到外部呢？一些情况下，由于种种原因我们是需要将函数内部的局部变量获取出来的。所以可以这样实现：在函数1的内部再定义一个函数2，并且将函数2作为函数1的返回值。就可以实现在函数1外部读取它的内部变量。 如下伪代码：function f..

原创 React方向的前端面试题

1、React的生命周期？React中只有类组件有生命周期可言。其中包含三个状态：Mounting：此时已经插入了真实的DOM；Updating：正在被重新渲染；Unmounting：已经移出真实的DOM。生命周期的方法：componentWillMount：在渲染之前调用，在客户端也在服务器端； componentDidMount：在第一次渲染后调用，只在客户端；之后组件已经生成了对应的DOM结构，可以通过this.getDomNode()来访问。还可以在此时进行数据的异步请

原创 函数的链式调用

场景：需要计算经过满减，积分，红包处理后的最后的价格。实现思路：定义三个方法，去改变全局的价格。巧妙使用数组的reduce方法实现。代码：/** * 链式处理 * 外卖订单的总价计算 * 积分、红包、满减 * * */let orderInfo = { total: 50}let actions = [pointHandle, redbagHandle, manjianHandle]let action2=[manjianHandle,pointHan

原创 数组去重方法：filter，reduce

filter、reduce实现数组去重。filter实现数组去重代码/** * filter */let ar = [1, 2, 2, 3, 4, 4, 5]let unique_ar = ar.filter((x, index) => { // if(ar.indexOf(x)===index){ // return true // }else{ // return false // } return ar.i

原创 0.1+0.2=0.3吗？

见到这样一个问题：0.1+02=03，是true还是false?首先，它肯定在数学意义上是成立的等式。但是，在计算机的程序中，它不是“真”,是的，就是这样。那为什么呢？且听我细细道来：因为这是在计算机里验证的一个等式，并且需要明白计算机的计算是将指令代码转化为了它自己的语言-二进制，也就是0和1。所以，它在接收到这样一个：“0.2+0.1”的计算指令时，第一步是将两个十进制的数分别转化成了二进制格式的两个数字。要不然，计算机也没法给你算出来啦。那，转化后的值是多少呢？这里，咱们可

原创 vue项目自动化构建到发布：Gitee+nginx+jenkins

操作的流程大概是：首先，在本地编辑器中创建一个可运行可打包的完整的项目，然后将其放到代码托管的远程仓库中。其次，在nginx的配置文件中更改相关的配置信息（项目的端口信息，以及项目入口文件的地址等）。最后，在jenkins里安装git插件，并且通过webHooks与远程仓库建立连接，最终在代码提交时触发自动构建项目，并且在项目的nginx部署地址可以访问到。一、开发工具和版本管理工具这里介绍vue项目的使用VsCode开发,gitee(码云)仓库代码托管。写在前面：vue项目创建

原创 nginx的常用命令

nginx的日常维护命令在LInux等多大数由Unix发展而来的操作系统上，普通的用户的进程只能监听1024以上的端口。至于 1024以下的端口例如80、443等需要由root身份的进程来监听。因此，Nginx的master进程的执行身份应该是root。查看Nginx版本：nginx -v 查看Nginx的版本详情：nginx -V 显示帮助信息：nginx -h 显示帮助信息：nginx -? 检查配置文件是否正确：nginx -t 启动nginx时指定配置文件，否则用默认的/etc/n

原创 发起请求关于-GET和POST思考

最近在找工作，因为之前的工作内容偏向数据交互，所以会 经常遇到GET和POST请求。用的时候只是根据API文档去写的，但是使用它们中的一个的原因是如何来的呢？首先他们是什么呢？GET和POST是什么？HTTP协议中的两种发送请求的方法。从以下几个方面来思考下：关于当前交互数据的安全性 根据API文档说明，能支持哪个？ 关于参数的数据格式和长度我们可以根据实践经历总结得到：GET请求中对应上面三个思考：第一：数据可以被放在params里面，可以在控制台看到。或者是直接拼接在请求地址中

原创 DOM学习笔记

DOM（部分）： 1、文档对象模型（document object model）,是将文档中的节点抽象成文档树的节点的API（可编程程序接口。）。DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生J...

转载 js阻止事件冒泡

原文：https://www.cnblogs.com/moqing/p/5590216.html。感谢作者。首先看看事件冒泡是什么？事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）取消事件冒泡有两种方式：标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的..

原创 mxGraph实战（二）

继mxGraph（一）的学习实践，我最近有根据官方的实例实现了图中画布的大小改变，还可以增加右上角的概览窗口。背景：react+mxGraph.要求:实现画布中每个控件有图标，label。 画布可放大，缩小，还原，有个概览窗口。 鼠标移入有提示文字（已经实现：mxGraph学习（一））首先，来看看成果图：原图：放大后的：缩小后的：主要的代码：首先初始化一些mxGraph的样式等参数： ...

原创 mxgraph学习（一）

写在前面：最近项目中有个模块，是需要在页面绘制体现数据从数据库到表数据的变化历史。其中有两个概念：‘数据血源’，‘影响分析’。也就是模仿kettel的呈现效果，在项目页面上直接呈现，不必打开kettel去一一查看数据的历史。大概的背景是这样。雏形：在此基础上我还需要实现：图的可拖动，可放大缩小。以及点击事件等。因此各种找资源学习，以下是一些学习连接：了解mxgraph：https://www.cnblogs.com/shawWey/category/1028607.html。.

原创 react-阻止其他事件触发

//方法onOpenDrawer=(e)=>{ e.stopPropagation(); this.setState({ drawerVisible: true }); }//调用<a onClick={this.onOpenDrawer}>了解更多</a>控制台打印得到的e中有这个:stopPropagation: function destructor()。直接调用就可以。原理来自于DOM：jQ.

原创 基本的HTML问题（一）

html中的长度单位：px、em、rem、%、vw、vh、vnim、vmax、calc（）某几个详情：px：像素，固定大小，涉及到适配的时候并不好用em：相对于父元素字体的大小，一般也很少用rem：相对于根元素字体的大小（即html标签），经常用于移动端（rem适配）...

原创 axio的请求异常响应统一处理

项目使用了飞冰框架（react),后端是springMVC.首先在原生的axios基础上，根据项目要求来改写axios的请求头：import axios from 'axios';import urlparse from 'url-parse';// 使用crypto-js加密库进行md5加密import MD5 from 'md5';import { Message } from '@alifd/next';import ErrorMsg from './errorMsg';/**

原创 js常见的鼠标事件

1、mousedown鼠标的键钮被按下。2、mouseup鼠标的键钮释放弹起。3、click鼠标左键（或中键）被单击。事件触发顺序是：mousedown -> mouseup -> click4、dblclick鼠标左键（或中键）被双击。事件触发顺序是：mousedown -> mouseup -> click -> mouseup -> click -> dblclick。5、contextmenu弹出右键菜单，它可能是鼠标右键触

原创 电话号码校验正则

说明：不包含特殊字符或者空格。涵盖手机号和座机号码。pattern={/^(((\(\d{3,4}\)|\d{3,4})?\d{7,8})|(1[3-9][0-9]{9}))$/}

原创 axios的禁忌

转载 Axios请求的前端提交参数data与params

Axios发送请求时params和data的区别在使用axios时，注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。 因为params是添加到url的请求字符串中的，用于get请求。 而data是添加到请求体（body）中的， 用于post请求。比如对于下面的get请求：axios({method: "get",url: "http://www....

原创 解读react项目中pacakage.json文件

解读react项目中pacakage.json文件最近遇到了这方面的相关问题，在这里做个记录方便以后查看。pacakage.json文件一般是关联项目的一些依赖配置信息。用来记录引用模块的名称，及其版本信息。cd 到项目目录下，执行npm install命令，会根据 package.json 中引用模块的名称重新下载并生成node_modules文件夹在实际开发中，代码在git 或者...

原创 在本地创建react项目时，node栈溢出，采用以下方法，亲测有效。

方法一：删除用户的.npmrc 。可以在计算机目录中查找。方法二：删除package.json文件，重新下载。

原创 vue+elementUi 表单验证

表单数据在提交前，整个表单数据验证。

原创 vue+elementUi之表单

这连天在做vue的组件封装，遇到的一个问题是，公用的模态框组件中的表单需要清空上次的表单验证规则，于是经过大佬的指点，我get到一个技能，特此记录一下，希望大家指正。 export default { data () { return { }; }, watch: { /...

原创 js获取对象属性值

对象属性值的获取方法，取决于对象属性名的类型。

原创 用unshift向对象数组中添加一个元素

arrayObject.unshift(newelement1,newelement2,....,newelementX)参数 描述 newelement1 必需。向数组添加的第一个元素。 newelement2 可选。向数组添加的第二个元素。 newelementX 可选。可添加若干个元素。 说明：unshift() 方法将把它的参数插...

原创 npm指令没有反应

最经在做react本地脚手架 搭建，node安装好后，有电脑（win10）上初始化了几个app，但是后期遇到的问题是：npm star 指令报栈溢出的错。无奈之下，我就彻底清除node，然后重新安装在C盘的系统文件下的Node中，这样后期的相关文件的配置路径应该不会出错了，但是,npm还是出错，npm -v还是没有反应。最后参考npm（中文版）官网：https://www.npmjs.com.cn...

原创 document.documentElement和document.body

DTD相关说明：在页面的开头页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。在 IE 和 Firefox 中均是如此。为了兼容，不管有没有 DTD，可以使用如下代码：var scrollTop = window.pag...

原创 react项目学习之sass与less的比较。

1、概念sassSass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就...

原创 react中的axios

前后端通信前后端通信通常使用 AJAX 方案，对于 AJAX 社区有非常多的封装，目前主流推荐 axios。使用 axios 进行通信安装依赖：npm install axios --save通常情况下，AJAX 请求都是异步的，因此 axios 默认返回一个 Promise，因此你可以通过 Promise 或者 async/await 的方式调用：import axios ...

转载 关于vue的npm run dev和npm run build比较

├─build│ ├─build.js│ ├─check-versions.js│ ├─dev-client.js│ ├─dev-server.js│ ├─utils.js│ ├─vue-loader.conf.js│ ├─webpack.base.conf.js│ ├─webpack.dev.conf.js│ ├─webpack.prod....

转载 react中表格的数据渲染

数据列表渲染数据列表处理使我们常见的事物类型，到后台给你一串数据列表，你将如何展示在前端页面上呢，传统的我们都是通过循环来实现，那么在react里面我们又是怎样实现的呢？ 数据如下const books = [ { bookname: '1', time: '一号',}, { bookname: '2', time: '二号'}, {...

转载 前辈的前后台分离介绍

前后台分离开发介绍1. 大前端开发​ 首先应该明确，现在的前端开发是完全脱离后台的，和Java中的jsp以及和c#中的asp是没有任何关系的。以前，传统的开发是使用jsp或者asp开发，是以为Java为主导的。而现在倡导前后台完全分离，各大公司都在实施，使得前端开发更加独立。​ 所以大家不管是学习后台开发还是学习前端开发都要简单很多。因为技术更加集中。你们不需要考虑过多的东西，只...

转载 关于前后端数据交互时400报错的总结

在做项目中遇到了一个之前没遇到的问题，form表单提交时，提示400错误，开始的时候也是一脸蒙蔽，后来去网上查找问题出现的原因。网上给出的答案打给有以下几个方面：1 参数类型不匹配 前台传过来的数据类型与后台的BEAN 不匹配；解决方案：1）对照字段名称，类型保证一致性2）使用stringify将前端传递的对象转化为字符串 data: JSON.stringify(param...

原创 遇到的一个问题：

用js将含有的字符串处理为一个包含这些数字的数组？解答：一、用正则：例如var str ="d567unt7jk80o9hkghftjs123ldka78sdassdfd653";str.match(/\d+/g);//["567", "7", "80", "9", "123", "78", "653"]二、另一种不用正则的，能写