前端技术
文章平均质量分 54
bazingaedward
天行酒歌,信义天下
展开
-
JS中Null与Undefined的区别
在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined?Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函转载 2015-02-01 12:47:56 · 346 阅读 · 0 评论 -
react-native 页面导航navigation
屏幕页面间的导航跳转移动app很少是由单一的页面组成的。管理多个页面间的呈现和过渡是navigator导航器所必须要处理的一个任务。这篇文章覆盖了在React Native中的大部分导航组件。如果你对导航也是一知半解,或者说刚入门,你可以尝试使用React Navigation这个npm包。该包提供了一种简单易用的导航方式,可以同时满足对stack navigation和tabbed na...翻译 2018-08-26 17:24:50 · 1276 阅读 · 0 评论 -
Fetch API 简介
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and fle...原创 2018-08-19 17:21:33 · 609 阅读 · 0 评论 -
React input 中文输入法兼容
在不少项目中需要针对input的输入数据做相应的处理,比如讲用户数据的数据转换成对应的大写字母,那么问题就来了。当用户拿起手机,点中你的input组件后开始输入时,会发现IOS的手机在中文输入下会发生重复输入的情况。举例来说,当用户在中文输入法下输入ABC这几个字母是,input的实际的value值(如果你把input的onChange事件打印出来或是设置成value的话),不是ABC而是AA...原创 2018-08-27 23:43:03 · 4742 阅读 · 0 评论 -
【前端踩过的坑】js Date的时间戳timestamp和unix时间戳有区别么?
js 获取的时间戳的方式是(new Date()).getTime,得到的例如1534982400000,然后默认就以为是moment里面的unix,然后使用moment.unx(1534982400000)来转换,后面发现居然不对。Date.getTime 在MDN中给出的官方说法是: The getTime() method returns the numeric value co...原创 2018-08-30 14:41:24 · 2927 阅读 · 0 评论 -
【前端面试系列】CSS Animations
引言前端面试总躲不过的几个知识点,像js的prototype,css的动画,当然高级点的性能优化不在本教程的内容列表里面,属于提高的内容。而本节就着重讲css的动画讲清楚。 资源来自:https://www.w3schools.com/css/css3_animations.asp 注意:以下所有内容翻译自上述官方教材,可能需要翻墙查看,强烈推荐点击链接中的示例代码,对比分析加深印象...翻译 2018-09-02 16:25:24 · 1074 阅读 · 0 评论 -
【前端面试系列】JS中的闭包-来龙去脉
引言经历过面试的前端人被问得做多的一个话题或许就是js的闭包了吧,就好像高考中总要出些难题来拉开不同人的差距,而闭包就是如此,哪怕平时用的不多,但是因为其特殊性总被拿来衡量一个前端人的js掌握情况。 以前也陆陆续续看过不少资料,书籍,对其的解释五码八门,大差不差,但从来无法回答自己几个核心问题(例如为啥叫closure,到底使用场景是什么),所以一直无法深入去理解,也就更别提灵活的使用了。 ...翻译 2018-09-02 22:36:24 · 1154 阅读 · 0 评论 -
【前端踩过的坑】react-navigation 与redux的配合
在初期使用redux的过程中,想要搭配react-navigation使用(以下简称RN,不是react-native),RN负责路由,而redux负责state的统一管理。基本的思路是: PS:为了关注核心删去了不必要的部分const ListStack = createStackNavigator( { Home: ListScreen Add: AddScr...原创 2018-09-11 16:01:15 · 1025 阅读 · 0 评论 -
redux 多种触发dispatch方式
[原文链接]https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-reduxredux 作为js app的主要的状态容器和react结合的非常多。架构设计上基于action的触发机制,通过dispatch对应的action来修改状态,而状态的修改由统一的reducer来处理(为什么叫reducer呢,因为每个...翻译 2018-09-13 10:32:34 · 35340 阅读 · 0 评论 -
Redux 核心代码解读
引言好奇于redux的核心代码是多么的短小精悍,顺便了解下其实现机制,所以找到其源码,而其中最核心的相比就是createStore这一个文件,看看大神是怎么做的吧。代码资源:https://github.com/reduxjs/redux/blob/master/src/createStore.js翻译中import $$observable from 'symbol-obse...翻译 2018-09-07 17:41:35 · 290 阅读 · 0 评论 -
git push前强制检查冲突
引言有时候同事间会因为疏忽而没有完全处理冲突,而git本身是支持未解决冲突的代码push的,因此就给包括测试、生产的多个部署环境带来可能的运行runtime bug隐患。借助git本身的hook钩子函数,想要强制push前检查冲突是否完整还是非常简单的。解决方案1. 定位git hook钩子文件git的所有配置文件一般统一存放在.git目录下,而钩子文件就放在该文件下:如上图显示是在v...原创 2018-10-23 19:41:48 · 4571 阅读 · 1 评论 -
npm中package-lock.json存在的价值
介绍如果把npm更新到了5以上,默认就会有package-lock.json。很多时候我们直接把它ignore或直接从项目中删除,然后直接从npm install来安装依赖。那么坑就此埋下了,尤其是在多人协作的时候,很有可能出现的情况是依赖报错了。那么这个文件存在的目的是什么呢?总结先给出结论:package-lock.json是^5.x.x自带生成的你应该使用package-lo...翻译 2019-02-11 11:35:46 · 1249 阅读 · 0 评论 -
vue-loader兼容性采坑:No parser and no filepath given, using 'babylon'...
现象在webpack dev开发环境,部署了vue-loader@14.2.2版本,编译后在命令行报一系列的No parser and no filepath given, using ‘babylon’…信息,让人一开始无法定位问题出在哪里?解决方案更新到14.2.4,虽然当前最新的是15.6.5版本,不过从v14迁移到v15会有不少变更,配置不好也会报错,具体参见https://vue...原创 2019-02-11 19:27:00 · 3366 阅读 · 0 评论 -
MacOS 安装 Android Debug Bridge (ADB)
安装方式-homebrew$brew cask install android-platform-tools$adb devices原创 2018-08-18 09:31:29 · 897 阅读 · 0 评论 -
on-my-zsh 安装node
node的默认安装方式通过nvm安装zsh-nvm插件zsh-nvm是基于zsh的nvm插件,安装完后直接可以使用nvm命令 【官方链接】(https://github.com/lukechilds/zsh-nvm)配置也非常简单,这里采取As an Oh My ZSH! custom plugin方案,感觉比较通用:克隆代码到本地目录 git clone http...原创 2018-08-01 11:29:20 · 1113 阅读 · 0 评论 -
js Date 格式化输出
问题描述javascript 库中Date对象有时需要指定输出格式化的字符串,而标准库中没有直接的方案,google搜索stack overflow上的解决方案显然太过笨拙,不符合我们的需要var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "Septem原创 2016-09-20 14:36:30 · 1836 阅读 · 0 评论 -
Tips: JQuery 多元素选择并转化成数组
应用场景html的form中包含多个checkbox组件,希望能够在用户选择后以数组的形式返回用户的选择结果(指的是value中的值): 得到的结果示例为:['SO2', 'NOX', 'CO', 'PM']JQuery解决流程正常的JQuery思路为:var variables = $('input[name=variables]:checked').map(function(){原创 2017-12-02 18:24:33 · 2379 阅读 · 0 评论 -
Presentational and Container Components
引言在学习React和Redux的过程中经常提到Redux作者Dan Abramov的一篇非常好的文章,讲述组件基于功能的分类,展示组件和容器组件。国内无法访问,因此基于原文重新用markdown编辑,作为日后反复研读之用。原文链接正文There’s a simple pattern I find immensely useful when writing React applications.转载 2017-11-24 15:06:37 · 369 阅读 · 0 评论 -
Debug: babel arrow function 'unexpected token' in React.Component
问题描述// index.jsimport React from 'react';import ReactDOM from 'react-dom';class App extends React.Component {....onHandler = () =>{ //报错 ....}...} SyntaxError: src/index.js: Unexpected to原创 2017-11-24 18:40:17 · 697 阅读 · 0 评论 -
karma 测试框架的前世今生
引言在前端测试框架的学习中了解到了karma的强大,搜索得到淘宝前端团队的这片讲述karma特点及原理的分享,非常不错。转载分享至此, 原文链接:http://taobaofed.org/blog/2016/01/08/karma-origin/ 原作者: 亦才[2016-01-08]正文背景JavaScript 作为 web 端使用最广泛的编程语言,它是动态语言,缺乏静态类型检查,所以在代码编转载 2017-11-25 09:59:17 · 2080 阅读 · 1 评论 -
那些年,React 踩过的坑
1. propTypes 空数组报undefined Warning举例来说:import React from 'react';import { Breadcrumb, Icon } from 'antd';import PropTypes from 'prop-types'const BreadcrumbBlock = ({ paths }) => { const items = path原创 2017-12-22 16:52:53 · 349 阅读 · 0 评论 -
[debug]jsonp 403 forbidden 通用解决方案
问题描述前端的跨域问题由来已久,暂时的主流方法是CORS和JSONP,在jsonp的使用过程中经常发现各种问题,例如get error aborted,403 forbidden等等。 而且就代码美观来说,硬生生把回调函数callback封装在url中,然后再将url硬生生塞进script中直觉上也不合理。所以有时候不得不采用服务器代理,但是这又增加了不少工作量,如果是大公司进行统一的管理调度还行原创 2017-12-30 10:57:43 · 2227 阅读 · 1 评论 -
nodejs stream 经典解析
转载自:https://github.com/jabez128/stream-handbook/blob/master/README.mdstream-handbookstream-handbook的完整中文版本nodejs stream 手册 写在前面的话: 如果你正在学习Nodejs,那么流一定是一个你需要掌握的概念。如果你想成为一个Node高手,那么流一定是武功秘籍中不可缺少的一个部转载 2017-12-31 23:51:48 · 766 阅读 · 0 评论 -
es6 promise setInterval setTimeout混合使用
Question最近在使用promise过程中突然想到如果在promise的resolve,reject中调用setInterval,会不会持续的触发resolve操作?Answer尝试编写下面的代码:function a() { return new Promise((resolve, reject) => { setInterval(()=&g...原创 2018-07-25 13:35:19 · 6569 阅读 · 0 评论 -
react shallow Compare
Note: shallowCompare已经被抛弃.请使用React.PureComponent来代替.在React.PureComponent 被引入之前,shallowCompare被广泛使用,用来实现和PureRenderMixin相同的功能。 如果你的React组件的render方法也是pure(纯,给定props和state,render结果相同)的, 你可以使用这一...翻译 2018-07-30 17:14:11 · 960 阅读 · 0 评论 -
Yarn 如果优化npm版本控制
今年10月,Facebook发布了Yarn一个新的JavaScript包管理CLI客户端工具,意图与NPM相竞争。起初,包括我自己在内很多人对此均持怀疑态度,这确实也很合理。同一生态下的多依赖管理解决方案,事情很容易就会变得复杂。那在这种让人复杂地让人感到痛苦的情况下,任何增加复杂性(的行为)都是极其糟糕的。Yarn发布初始版本之后,我体验了Yarn大约15分钟,得出的结论是:Yarn是为...转载 2018-07-31 16:39:58 · 839 阅读 · 0 评论 -
react 数据懒加载-滚动实现
使用场景项目中碰到这样一种情况,后台接口数据由于太多没法一次传输,因此希望前端在调接口时设置pageIdx和pageSize字段实现懒加载。前端页面上边一部分为选项栏下面一部分为滚动区域,大致的html结构简单抽象如下:<div className='wrapper'> <div className='header'></div> &lt原创 2018-07-28 11:01:50 · 13615 阅读 · 0 评论 -
Graphql采坑之-全家桶版本兼容性
引言在配置日常的react 项目中发现要搭配好react,apollo-client,graphql的版本还是不容易的,尤其是在众多package单独拆解功能的情况下。经过几天的摸索勉强找到了npm package的版本清单。package.jsondependencies": { "apollo-cache-inmemory": "^1.6.0", "apollo-cl...原创 2019-05-30 17:21:31 · 698 阅读 · 0 评论