- 博客(44)
- 收藏
- 关注
RSS订阅转载 前端小笔记
for ... of是作为ES6新增的遍历方式,允许遍历一个含有iterator接口的数据结构并且返回各项的值。 for...of与 ES3中的for ... in的区别如下：for ... of遍历获取的是对象的键值,for ... in 获取的是对象的键名。for ... in会遍历对象的整个原型链,性能非常差不推荐使用,而for ... of只遍历当前对象不会...
2019-07-31 21:02:00
139
转载 script标签async和defer的区别及作用
作用：1.没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。2.async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。需要注意的是，这种方式加载的 JavaScript...
2019-04-30 23:27:00
357
转载 记录一次node中台转发表单上传文件到后台过程
首发掘金记录一次node中台转发表单上传文件到后台过程本篇跟掘金为同一个作者leung公司几个项目都是三层架构模式即前台，中台(中间层)，后台。前台微信端公众号使用vue框架，后台管理前端使用react，中台(中间层)使用node，后台使用java。此次说的是后台关键上传数据文件时遇到的一个bug，因为是三层架构，前台表单会先提交到node中间层，然后再通过node中间层转...
2019-03-30 13:50:00
342
转载 在阿里云域名https配置(nginx为例)
如题；在阿里云上注册了域名之后在阿里云域名控制台配置https；1.在域名控制台选择要配置的域名，并在操作栏点击“解析”2.在域名解析点击更多下的SSL进入到证书列表页，这里有收费的也有免费的，公司的建议用收费的个人网站免费够我们用了，不过免费的话是免费一年的，第二年到期前再下载一个免费的替换就可以了。3.在证书列表也配置你要设置https域名，并勾选系统自...
2019-01-31 21:27:00
378
转载 react新特性 react hooks
本文介绍的是react新特性reacthooks，本文面向的是有一定react开发经验的小伙伴，如果你对react还不是很熟悉的话我建议你先学习react并多多联系。首先我们都知道react有3种组件；分别是Function函数式无状态组件、class有状态组件、高阶组件。这里不对这3种组件做一一介绍。本文重点是reacthooks一个最简单的Hooks首先让我们看一...
2018-12-22 14:53:00
136
转载 Nginx中配置vue，react项目地址
如题像以前在Nginx中配置域名解析的时候只需要在conf.d文件夹下添加对应的xx.conf文件(当然了你也可以在nginx.conf)下配置。如果是以前的老项目只需要在配置文件中server内配置root直接设置需要访问的地址目录，index中配置首页页面。最后nginx -s reload重启Nginx。但是现在前端项目大都是webpack打包后编译的结果，压根就...
2018-11-28 22:41:00
166
转载 Node后台使用mysql并开启事务
如题；node后台使用mysql数据库，并使用事务来管理数据库操作。这里主要讲一个事务的封装并写了一个INSERT插入操作。code：基础code：db.config.js 1 const mysql = require('mysql') 2 3 const pool = mysql.createPool({ 4 connectionLimit...
2018-09-29 22:35:00
288
转载 使用Node搭建reactSSR服务端渲染架构
如题；本文所讲架构主要用到技术栈有：Node, Express, React, Mobx, webpack4, ES6, ES7,axios, ejs, log4js, scss，echarts，ant desige使用Express初始化Node服务开始本项目首先你的电脑要安装有node，npm这个没什么好说的。其次本次Node服务用的框架是express；所以要安装：ex...
2018-08-29 23:54:00
270
转载 HTTP请求库——axios源码阅读与分析
概述在前端开发过程中，我们经常会遇到需要发送异步请求的情况。而使用一个功能齐全，接口完善的HTTP请求库，能够在很大程度上减少我们的开发成本，提高我们的开发效率。axios是一个在近些年来非常火的一个HTTP请求库，目前在GitHub中已经拥有了超过40K的star，受到了各位大佬的推荐。今天，我们就来看下，axios到底是如何设计的，其中又有哪些值得我们学习的地方。我在写这...
2018-07-31 23:49:00
108
转载 一个JS多个数组取交集算法
如题，多个数组中取交集（共同拥有元素），思路取第一个数组去跟每个数组中的元素对比，同时比较数据类型有救返回没有就返回null。下面介绍到的算法数据格式是二维数组如：const parentArray = [[11,12,343,34,432,34,4],[54,3,4,5,2,52],[34,2,3,23,423,234]]算法明细：vararr=arr...
2018-06-27 23:41:00
1272
转载 记录一些移动端H5，小程序视觉还原问题及方法
前端，特别是移动端如果对视觉还原要求比较高的时候。功能测试和性能测试完成之后。UI真的是一个像素一个像素的给你抠出来哪里还原不到位之前项目要求还原度要达到98%以上。所以每到视觉还原的时候真的是挺痛苦的，这里记录一些视觉还原不同机型上的一些显示问题。小程序iOS端1rpx显示2px宽度这个视觉问题这真的是很痛苦的。我们想到针对iOS端单位1rpx，然后tran...
2018-04-30 23:51:00
329
转载 px单位html5响应式方案
移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了。这个需要计算根元素的font-size来实现响应式。但这种方案也有一个缺点，那就是font-size不为整数的时候一些字体使用rem单位会导致字体显示的有问题比如字体会产生锯齿，对视觉还原要求比较高的项目来说这还是令前端开发挺头疼的一件事的。解决前端响应式无非就是在不同的设备下可以正常展示，这里介绍一种不需要rem方...
2018-03-07 22:19:00
91
转载 JavaScript数据迭代方法差别
js有很多总迭代方法，ES6之后又新增了几个；这里主要讨论数组迭代遍历的方法所以不会细讲for...in...ES5、ES6数组迭代方法有：forEachmapfiltersomeeveryreduce/reduceRightfind/findIndex (ES6新增)for...of... (ES6新增)forEachfor...
2018-02-28 00:30:00
90
转载 一些印象深刻的坑小结
年底了最近也比较忙没怎么有时间来写博客，今晚找个时间回想一下遇到的一些令人深刻的坑，并写上解决方案；希望能帮到更多的人填坑。1.webpack配置devServerproxy前后端分离接口返回504的问题问题描述：配置webpackdevServer proxy后端接口的时候，前面几个接口能正常访问，后面配置的接口居然504；按理说这些配置要错就全错，怎么有的可以访问有的不可...
2017-12-31 23:49:00
181
转载 ES7前端异步玩法：async/await理解
在最新的ES7（ES2017）中提出的前端异步特性：async、await。什么是async、await？async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用通常async、await都是跟随Promise一起使用的。为什么这么说呢？因为async返回的...
2017-11-30 23:51:00
262
转载 js原生API妙用（一）
复制数组我们都知道数组是引用类型数据。这里使用slice复制一个数组，原数组不受影响。 1 let list1 = [1, 2, 3, 4]; 2 let newList = list1.slice(); 3 list1.push(5); // [1,2,3,4,5] 4 //newList [1,2,3,4] 不受影响 5 console.log(newLi...
2017-10-31 23:25:00
120
转载 ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象。它减少了传统ajax金字塔回调，可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多。Promise的状态：既然是用来传递异步消息的那肯定就会有异步消息的状态；所以promise提供了3种状态：pending(进行中)，resolved(已完成或者称 fulfilled)，rejected(失败)。不同的...
2017-09-30 00:05:00
109
转载 GIT命令汇总
最近项目版本控制使用git。用了svn快4年的我一开始真心是不习惯啊。这是svn用久了的通病吗？？？？虽然有可视化的git“小乌龟”工具；UI界面跟svn很像。但是工具有的时候不知道怎么回事不好使。关键时刻还得靠命令行(虽然还有好多记不住)。然后，就进到主题了：会git命令，啥都不怕~找来的一个git命令汇总；大家一起学习分享。原文链接：我怕你忘了的Git...
2017-08-31 19:36:00
111
转载 Ajax新玩法fetch API
目前 Web 异步应用都是基于XMLHttpRequest/ActiveXObject(IE)实现的， 这些对象不是专门为资源获取而设计的，因而它们的 API 非常复杂，同时还需要开发者处理兼容性问题。 虽然开发者普遍使用$.ajax()这样的上层包装，但 Fetch API 意在提供更加方便和一致的原生 API， 同时统一 Web 平台上的资源获取行为，包括外链脚本、样式、图片...
2017-08-31 14:31:00
132
转载 vue组件的一个总结
用vue进行开发到目前为止也有将近一年的时间了，在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架。虽然两者思想上的差异不大，但是vue的语法在代码的可读性以及后期的维护成本更加的适合，而且最近看到Apache对react的相关许可限制；这里不讨论react和vue的对比哪个好，技术框架没有最好的，只有适合项目才是最好的。进入主题。。。。。。。组件...
2017-07-31 23:29:00
92
转载 React的JSX语法及组件
最近一个同事很急没有做任何交接就请了陪产假，然后我来维护。说实在的我一开始是一脸懵逼的。因为MV*项目里用的最多的还是Vue；React听说也了解过，但毕竟不熟。。。不过不管如何这也是工作；同事也恭喜同事当爸了，打心理为他感到高兴！代码down下来后开始查看的时候语法基本上使用的都是CMD，ES6还有本文讲的JSX，React组件。CMD，ES6这不难毕竟平常也经常用。但是JSX...
2017-06-26 23:35:00
123
转载 Vue2.x中的Render函数
Render函数是Vue2.x版本新增的一个函数；使用虚拟dom来渲染节点提升性能，因为它是基于JavaScript计算。通过使用createElement(h)来创建dom节点。createElement是render的核心方法。其Vue编译的时候会把template里面的节点解析成虚拟dom；什么是虚拟dom?虚拟dom不同于真正的dom，它是一个JavaScript对象。当...
2017-05-30 23:44:00
569
转载 ES6常用语法
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。 也就是说，ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了... 在我们...
2017-04-30 15:05:00
103
转载 nodejs中exports与module.exports的区别
node中exports模块对象相信大家一定不陌生；如studentModule.js:exports.student = function() { console.log("this is student module!"); }在另一个模块中这样引用：var student = require('./studentModule.js');...
2017-03-29 23:36:00
81
转载 获取元素最终的background-color
通常我们都会先获取元素，然后得到style对象获取对应的css属性值；下面，假设我定义一个div并在css中给定了指定的background-color：这里并没有考虑!important/内联的形式。如： 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <m...
2017-02-28 22:42:00
248
转载 js中DOMContentLoaded和load的区别
如题；DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。浏览器渲染页面DOM文档加载的步骤：1.解析HTML结构。2.加载外部脚本和css文件。3.解析并执行脚本代码。4.DOM树构建完成。(此时会触发DOMContentLoaded事件)5.加载外部图片等文件。6.页面加载完毕。(此时会触发load事件)...
2017-02-28 20:52:00
221
转载 angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信；但是我们directive与directive之间的通信呢？当我们两个directive嵌套使用的时候怎么保证子directive不会被父directive替换覆盖；及当子directive需要用到父directive中controller某个变量或者方法的时候怎么实现两个directive之间的通信的。这里主要讲...
2016-12-25 12:47:00
146
转载 angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候，是怎么样进行通讯呢？这里介绍3种angular自定义directive与controller通信的指令。1.指令作用域中的"@"作用：把当前属性作为字符串传递实现指令与html页面元素关联。 1 <!DOCTYPE html> 2 <html...
2016-12-11 23:23:00
175
转载 一个前端引用Facebook评论插件案例
最近公司海外的同事提了一个新的需求；那就是将Facebook的评论系统接入到公司海外网站的资讯详情页。下面做一个简单的介绍： 首先我们登录到Facebook开发者平台；然后进入评论插件系统(https://developers.facebook.com/docs/plugins/comments)然后我们就可以看到Facebook评论插件的详细介绍。进去之后我们就可以看...
2016-11-29 23:49:00
266
转载 angularJS之$watch的一个小介绍
现在最近公司项目使用angularJS进行开发；以前也接触过但是不多，趁着现在熟悉回来。如题，angular中$watch也是我们在开发的时候需要的各种监听；$watch接收3个参数，第一个是对象，或者对象中某个属性，或者一个函数；第二个为回调方法【回调中有两个参数第一个为新值newVal,第二个为旧值oldVal】,第三个为true/false默认为false，为true的时候...
2016-11-02 23:46:00
90
转载 js数组中indexOf/filter/forEach/map/reduce详解
今天在网上看到一篇帖子，如题：出处：前端开发博客 (http://caibaojian.com/5-array-methods.html)在ES5中一共有9个Array方法，分别是：Array.prototype.indexOfArray.prototype.lastIndexOfArray.prototype.everyArray.prototype.some...
2016-10-31 23:51:00
96
转载 当call/apply传的第一个参数为null/undefined的时候js函数内执行的上下文对象是什么呢？...
如题；在js中我们都知道call/apply，还有比较少用的bind;传入的第一个参数都是改变函数当前上下文对象;call/apply区别在于传的参数不同，一个是已逗号分隔字符串，一个以数组形式。而bind和call几乎没差别只是将值返回。可是当我们将null/undefined作为值传进去的时候呢？居然得到的是window，当前js运行环境的全局对象。这其实在es5中就有解...
2016-10-30 21:16:00
209
转载 前端使用js读取文件
最近同事问我js能不能读取本地文件；想起以前看到js读取本地文件的文章，然后自己写了个demo。ps:这有点像Java的IO流，但是又有差别。首先我们定义一个input标签type="file"1 jsReadFile:<input type="file" onchange="jsReadFiles(this.files)"/>然后我们定义一...
2016-09-25 21:15:00
5178
转载 谈谈html5存储之IndexdDB
IndexdDB简介html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库；且具有丰富的查询能力。新建一个IndexdDB数据库IDBOpenDBRequest定义有几个重要的属性：onerror：新建或打开数据库失败的回调onsuccess：新建或打开数据库成功的回调onupgradeneeded：新建或打开数据库版本发生变化时触发的回调...
2016-08-31 00:23:00
257
转载 一个被称为世界上最短的判断IE方法
最近偶然看到一段判断是否为IE浏览器的代码：1 if(!+[1,]) {2 console.info("IE 浏览器"); 3 } else {4 console.info("非 IE浏览器");5 }短短的几个字节就判断出当前浏览器是否为IE浏览器，有意思。最后看了这里才知道原来是使用了IE浏览器自身编译js代码上的区别才明白；原...
2016-07-31 23:15:00
74
转载 使用js倒计时还有几天及计时过了几天
公司主营业务是体育赛事为主的；尤其是足球赛事。现正值2016法国欧洲杯；之前忙于做欧洲杯专题没时间总结。现分享一个工作中需求带来的经历。需求是：从现在开始倒计时欧洲杯还有多久开赛；当开赛之后开始计算已经开赛了几天及计算当前是小组赛还是1/8决赛,1/4决赛,半决赛,决赛。废话不多说，直接上代码: 4 var cdInterval, dateInterval; //...
2016-07-02 16:20:00
393
转载 webApp移动开发之REM
最近发现一偏很好的文章，关于webAPP开发REM 一个css单位；来自腾讯ISUX;web app变革之rem 转载于:https://www.cnblogs.com/leungUwah/p/5579120.html
2016-06-12 23:09:00
115
转载 js !!条件判断或运算的作用
今天看到一个判断语句非常奇怪:1 if(!!selected){} //为什么是双'!'号呢？自己查了下资料终于明白了这其中的原理：原来'!!'会将表达式转为Boolean类型的数据。如果'!undefined' //得到的是true但是为了防止值等于undefined的时候不为true的话我们可以使用'!!'进行判断；其实'!!'就是为了排除{非null/u...
2016-05-31 23:27:00
172
转载 精彩的javascript对象和数组混合相加
最近遇到一个让人困解的一个问题；一个简单的js加法运算表达式:1 +[]; //这里加上一个空数组得到什么???答案：'1';为什么答案是1，一开始我也很困惑；后来我读了一篇文章才知道：在javascript中加法的规则很简单，只能数字与数字相加或字符串和字符串相加；所有其他类型的值都会自动转换成这两个类型的值。这里面其实有一个隐式转换的存在。这里就不得不说javascr...
2016-05-02 17:45:00
227
转载 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案...
最近在改一个bug即如标题所讲的一样，chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了。为此百度了好久发现网上说的使用js来append操作，亲测了都不管用。除非把autocomplete=“off”关了，但这就不符合需求了如图网上说的改变-webkit-autofill的阴影背景是可以去除黄...
2016-04-24 23:52:00
411
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人