前端技术
关注
分享
扫一扫
文章平均质量分 90
蜗牛不会跑~
生命虽然无趣，但总要留下点什么！！
展开
-
Webpack实战笔记
◆ 使用配置文件>> Webpack对于output.path的要求是使用绝对路径（从系统根目录开始的完整路径），用node.js的路径拼装函数---path.join，将__dirname(node.js内置全局变量，值为当前文件所在的绝对路径)与dist(输出目录)连接起来，得到了最终的资源输出路径。◆ webpack-dev-server&g...原创 2019-11-02 13:42:16 · 665 阅读 · 0 评论 -
解决git指令更新远程仓库github时每次都要输入用户名和密码问题
使用命令在git bash 中执行设置记住密码(默认15分钟)：>git config –global credential.helper cache如果想自己设置时间，可以这样做：>git config credential.helper ‘cache –timeout=3600’这样就设置一个小时之后失效长期存储密码：>git config –...原创 2018-10-30 13:33:34 · 3876 阅读 · 0 评论 -
RxJS——函数式编程
本篇通过RxJS的实现原理、基础实现以及实例来一步步分析，提供RxJS较为全面的指引，感受一波使用RxJS编码是怎样的体验常规方式实现搜索功能搜索功能是前端开发经常做的，一般的实现方式是：监听文本框的输入事件，将输入的内容发送到后台，最终将后台返回的数据(搜索结果)在前端页面渲染处理上面的代码实现了我们要的搜索功能，但存在两个较大的问题：1.多余的请求 当我们想要搜索...原创 2018-09-20 11:42:22 · 516 阅读 · 0 评论 -
探索Redux的最佳实践
一、 前言广发证券金钥匙是一个连接用户和投资顾问、为用户提供专业投资咨询服务的的产品。基于Angular 1.x和Ionic，我们为用户和投顾分别提供了覆盖PC Web、Mobile Web和Android/iOS客户端的系列产品。前端的发展日新月异，React Native/Weex/微信小程序等技术方案进一步扩展了前端技术的应用范围。在金钥匙项目中，我们相继推出了小程序版金钥匙有问必答...原创 2018-09-11 10:35:22 · 818 阅读 · 0 评论 -
Reflux详解
ReFlux细说Flux作为一种应用架构（application architecture）或是设计模式（pattern），阐述的是单向数据流（a unidirectional data flow）的思想，并不是一个框架（framework）或者库（library）。前言在细说Flux之前，还是得提一下React ，毕竟Flux这个名字，是因为它才逐渐进入到大众视野。React...转载 2018-09-19 17:18:52 · 976 阅读 · 0 评论 -
redux 异步流之 redux-saga
1. 介绍对于从来没有听说过 redux-saga 的人，作者会如何描述它呢？It is a Redux middleware for handling side effects. —— Yassine Elouafi这里包含了两个信息：首先，redux-saga 是一个 redux 的中间件，而中间件的作用是为 redux 提供额外的功能。其次，我们都知道，在 ...原创 2018-09-07 18:29:26 · 677 阅读 · 0 评论 -
dva框架使用详解及Demo教程
dva框架的使用详解及Demo教程在前段时间，我们也学习讲解过Redux框架的基本使用，但是有很多同学在交流群里给我的反馈信息说，redux框架理解上有难度，看了之后还是一脸懵逼不知道如何下手，很多同学就转向选择使用dva框架。其实dva框架就是一个redux框架与redux-saga等框架的一个集大成者，把几个常用的数据处理框架进行了再次封装，在使用方式上给使用者带来了便利，下面我们就来简单...转载 2018-09-07 17:40:05 · 2765 阅读 · 0 评论 -
dva.js学习梳理集
不知大家学 react 或 dva 时会不会有这样的疑惑：es6 特性那么多，我需要全部学会吗? react component 有 3 种写法，我需要全部学会吗? reducer 的增删改应该怎么写? 怎么做全局/局部的错误处理? 怎么发异步请求? 怎么处理复杂的异步业务逻辑? 怎么配置路由? ...这篇文档梳理了基于dva-cli使用dva的最小知识集，让你可以用最少的时间...转载 2018-09-07 16:46:06 · 2609 阅读 · 0 评论 -
一起玩react 10分钟带你入门ant-design-pro
前言这篇文章主要根据自己最近一个月从学习react到最近实际使用ant-design-pro，谈一谈自己的使用心得，个人见解有误的地方望大家指正！1、为什么要选择ant-design-pro？其实我来目前公司之前，公司前端技术栈是vue+vuex+elementui+axios，但是奈何公司前端利用vue做出来东西表现确实一般，更重要的是代码有点乱，用我自己的话说就是野路子太多（当然野...转载 2018-09-07 15:51:50 · 1038 阅读 · 0 评论 -
关于dva实际应用的一些经验以及疑惑
从开始学习dva到引入到实际项目中也有几个月的时间，下面分享一下实际的经验，另外也有一些比较含糊或者疑惑的地方，看看大家有没有有些好的思路。dva整体构架比较清晰，但是实际使用的时候，还是需要做很多处理。dva model扩展在我们的基础库中，实现了Model.extend方法，所有的model都通过这个方法来创建, extend具体对以下几个方面进行了扩展.state根据我们的...原创 2018-09-07 15:26:42 · 1480 阅读 · 0 评论 -
Ant Design Pro 上手备忘录
Ant Design Pro 是蚂蚁金服团队在 Ant Design 的设计规范与组件库基础上推出的一套 React 实现的企业级中后台前端/设计解决方案。上手使用方法是直接 clone 其 GitHub 仓库然后执行 npm install，或是安装官方提供的 cli 工具创建项目（但在这过程中也会涉及到 clone 其 GitHub 仓库）。新项目创建后，自带模板页面和工具链，可以快速...原创 2018-09-07 15:15:36 · 447 阅读 · 0 评论 -
dva.js 上手
初始化安装 dva-cli 用于初始化项目：npm install -g dva-cli# 或yarn global add dva-cli创建项目目录，并进入该目录：mkdir your-projectcd your-project初始化项目：dva init然后运行 npm start 或 yarn start 即可运行项目。目录结构项目初...原创 2018-09-07 14:52:26 · 749 阅读 · 0 评论 -
从redux-thunk到redux-saga实践
简介本质都是为了解决异步action的问题Redux Saga可以理解为一个和系统交互的常驻进程，其中，Saga可简单定义如下：Saga = Worker + Watchersaga特点：saga的应用场景是复杂异步，如长时事务LLT(long live transcation)等业务场景。 方便测试，可以使用takeEvery打印logger。 提供takeLat...原创 2018-09-10 10:59:49 · 702 阅读 · 0 评论 -
roadhog
Roadhog 是一个包含 dev、build 和 test 的命令行工具，他基于 react-dev-utils，和 create-react-app 的体验保持一致。你可以想象他为可配置版的 create-react-app。Features原创 2018-09-10 10:04:40 · 1083 阅读 · 0 评论 -
Mock.js使用
Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki安装使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock...转载 2018-09-06 14:40:58 · 152 阅读 · 0 评论 -
MVC，MVP，MVVM开发模式对比
MVC，MVP和MVVM这些模式是为了解决开发过程中的实际问题而提出来的，它们目前作为主流的几种架构模式而被广泛使用。1，MVC(Model View Controller)模式 MVC是比较直观的架构模式，既用户操作-->View(负责接收用户的输入操作)-->Controller(业务逻辑处理)-->Model(数据持久化)-->View(将结果反馈给...原创 2019-03-03 16:52:48 · 313 阅读 · 0 评论 -
创建一个新的空白的文档片段( DocumentFragment)。
语法节let fragment = document.createDocumentFragment();fragment是一个指向空DocumentFragment对象的引用。DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。...原创 2019-09-17 18:01:20 · 501 阅读 · 0 评论 -
vue-cli 自定义路径别名 assets和static文件夹的区别 --save-dev和--save的区别
写在前面：这是一篇vue-cli的几个小知识点简单介绍，适用于刚接触vue-cli脚手架以及对此方面并不太了解的同学，大佬们绕道。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。静态资源处理：assets和static文件夹的区别相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很...原创 2019-08-22 16:44:47 · 396 阅读 · 0 评论 -
Redux的全家桶与最佳实践
Redux 的第一次代码提交是在 2015 年 5 月底（也就是一年多前的样子），那个时候 React 的最佳实践还不是明晰，作为一个 View 层，有人会用 backbone 甚至是 angular 和它搭配，也有人觉得这层 View 功能已经足够强大，简单地搭配一些 utils 就直接上。后来便有了 FLUX 的演讲，React 社区开始注意到这种新的类似函数式编程的理念，Redux 也作为 ...原创 2018-09-11 11:46:39 · 339 阅读 · 0 评论 -
glob 在webpack中的使用。
glob 在webpack中对文件的路径处理非常之方便，比如当搭建多页面应用时就可以使用glob对页面需要打包文件的路径进行很好的处理。官方文档地址 ： https://www.npmjs.com/package/glob 我没有找到中文文档地址。经过一段时间的学习，本着互联网分享精神。我现将我学习思路以及想法记录如下，分享给大家，希望对大家有所帮助。本文章 全部案例源码：http:/...转载 2018-08-17 11:55:29 · 2159 阅读 · 0 评论 -
关于前端开发中“模块”和“组件”概念的思考
术语的重要性首要是澄清术语。同事平时交流的时候，有比较多的上下文信息是双方已经预先知道的，所以容易推断对方要表达的意思，一定程度的术语混淆关系不大。但是和其他人交流的时候，如果不明确术语的内涵和外延，经常变成鸡同鸭讲的状况。举个例子来说，上次看到有位同学老是骂别人的文章里哪里哪里不对，进而演变为完全否定他人。我后来发现他对某些术语的理解有诸多“与众不同”，即他自己从概念和定义上就否定了别人。而有这...转载 2018-06-27 14:22:41 · 2282 阅读 · 0 评论 -
Redux进阶系列1：React+Redux项目结构最佳实践
React + Redux 是React生态中使用最频繁的技术栈，但关于如何组织React+Redux的项目结构，一直都有多种声音。本文将讨论其中最常用的3种项目结构，并给出个人的最佳实践。按照类型这里的类型指的是一个文件在项目中充当的角色类型，即这个文件是一个component，还是一个container，或者是一个reducer等，充当component、container、action、re...转载 2018-05-30 15:38:56 · 362 阅读 · 0 评论 -
HTML语言SSI指令语法
SSI有什么用? 之所以要扯到ssi，是因爲shtml--server-parsed HTML 的首字母缩略词。包含有嵌入式服务器方包含命令的 HTML 文本。在被传送给浏览器之前，服务器会对 SHTML 文档进行完全地读取、分析以及修改。shtml和asp 有一些相似，以shtml命名的文件里，使用了ssi的一些指令，就像asp中的指令，你可以在SHTML文件中写入SSI指令，当客户端访问这些s...转载 2018-05-08 17:08:32 · 1197 阅读 · 0 评论 -
JavaScript 调试常见报错以及修复方法
（看到一篇调试JS很有用的文章，收藏一下）JavaScript 调试是一场噩梦：首先给出的错误非常难以理解，其次给出的行号不总有帮助。有个查找错误含义，及修复措施的列表，是不是很有用？以下是奇怪的 JavaScript 错误列表。同样的错误，不同的浏览器会给出不同的消息，因此有一些不同的例子。如何读懂错误？首先，让我们快速看下错误信息的结构。理解结构有助于理解错误，如果遇到列表之外的错误会减少麻烦...转载 2018-04-27 10:09:21 · 830 阅读 · 0 评论 -
React小知识点
1，getDOMNode 是 ReactDOM 2，楼上的是正解，getDomNode的却是ReactDom的方法，你可以用，ReactDOM.findDOMNode(this.refs.textarea)原创 2018-05-11 14:23:23 · 143 阅读 · 0 评论 -
React的一些概念
对于初学React的同学而言，这并不是一件易事。就拿我自己来说，都不知道从何下手，应该如何去学习才能开始使用React。就算你对React不陌生，学习React也常会碰到一些瓶颈。比如说新颖的概念、开发工具的使用、抽象的名词、快速变化的生态环境等等。也就是说，一旦开始学习React，你会发觉要学的东西越来越多，甚至可能还没开始碰到React就被这些东西给吓跑了(特别是对于初学者，听到这些东东就傻眼...转载 2018-05-11 14:10:12 · 1201 阅读 · 0 评论 -
【前端攻略】：玩转图片Base64编码
引言 图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的 base64 编码可能相对一些人而言比较陌生，本文不是从纯技术的角度去讨论图片的 base64 编码。标题略大，不过只是希望通过一些浅显的论述，让你知道什么是图片的 base64 编码，为什么我们要用它，我们如何使用并且方便的使用它，并让你懂得如何去在前端的实际工作中运用它。 什么是 base64 编码? 我不是来讲概...转载 2018-04-25 13:40:32 · 176 阅读 · 0 评论 -
OOCSS+Sass
OOCSS面向对像对于一位程序员来说并不会陌生，因为他成任何现代编程语言的一种基本形式，数据的抽象化、模块化和继承等特点在编写代码中得到了大规模的应用。而面向对象的CSS简称为OOCSS熟悉的人并不太多。面向对象的CSS是一种容易重用的一种CSS规则，也是OOP概念，从而降低了页面加载时间，提高网站性能。OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方法，一种书写方法。...转载 2018-05-02 18:37:05 · 787 阅读 · 0 评论 -
axios设置请求头内容
axios设置请求头中的Authorization 和 cookie 信息：GET请求axios.get(urlString, { headers: { 'Authorization': 'Bearer ' + token, "Cookie" : 'sessionId=' + sessionId + '; recId=' +...转载 2018-05-02 17:58:49 · 49450 阅读 · 0 评论 -
webpack多页面开发与懒加载hash解决方案
之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景，如果是常规单页面应用的话，上篇文章提供的方案是没有问题的。但是前端项目复杂多变，应对复杂多页面项目时，我们不得不继续踩webpack的hash坑。在进入正文之前先解释一下所谓的常规单页面和复杂多页面是什么意思。这两个并非专业术语，而是笔者实在想不出更恰当的说法了，见谅。1. 项目类型1.1 常规单页面项目常规单页面符合...转载 2018-05-02 17:51:48 · 676 阅读 · 0 评论 -
reactJS 干货（reactjs 史上最详细的解析干货）
一. State和 Props state是状态机。 应该包括：那些可能被组件的事件处理器改变并触发用户界面更新的数据，譬如需要对用户输入,服务器请求或者时间变化等作出响应。 不应该包括：计算所得数据、React组件（在render()里使用props和state来创建它）、基于props的重复数据（尽可能保持用props来做作为唯一的数据来源，把props保存到s...转载 2018-05-02 17:48:53 · 1021 阅读 · 0 评论 -
React文档精读（上篇）
原文链接：https://juejin.im/post/5ab20d67f265da237c68c949pre-notifyReact中的element是什么条件渲染element和component渲染React Elementcomponent与pure function函数式组件和类组件state/状态setStatestate设置更新时的自动合并机制setState是异步的componen...转载 2018-03-21 18:09:57 · 173 阅读 · 0 评论 -
怎样理顺 React，flux，redux 这些概念的关系，开发中有必要使用它们吗?
原文链接：www.zhihu.com一、引子这是关于一把玄铁重剑，一本经书，和一套轻功步法的故事。让我们先从普通程序猿们的日常工作内容说起，一般来说，程序猿们大部分时间关注的可能不是研发某个具体算法，这是算法工程师／数学家们擅长的东东。程序猿的工作主要是通过调用编程环境中现成的工具函数或接口来实现具体的应用功能，将各个底层接口或算法模块用代码有秩序地拼装联接起来，实现酷炫好用的产品功能，如同组装一...转载 2018-03-21 18:05:28 · 387 阅读 · 0 评论 -
Immutable 详解及 React 中实践
Shared mutable state is the root of all evil（共享的可变状态是万恶之源）-- Pete Hunt有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的，下面我们来一探究...转载 2018-05-11 14:11:00 · 150 阅读 · 0 评论 -
react+redux
做React需要会什么？react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redux来管理数据，react-router管理路由，react已经全面拥抱es6，所以es6也得掌握，webpack就算是不会配置也...转载 2018-05-11 14:11:10 · 263 阅读 · 0 评论 -
React系列---React+Redux工程目录结构划分
按角色组织如果你用MVC框架开发过应用，应该知道MVC框架之下，通常有这样一种代码组织方式：controllers/ todoController.js filterController.jsmodels/ todoModel.js filterModel.jsviews/ todo.js todoItem.js filter.jsController、Model、...转载 2018-05-30 15:40:18 · 2359 阅读 · 0 评论 -
分享 50 个完整的 React Native 项目
一、前言先更正下，不然又有人要出来打假了。标题说是 50 个，但其实目前只有 43 个。那为啥标题非说 50 个？！可是如果叫《43 个完整.....》好像不太好听吧？嘿嘿~ 不过我是每个月 15 号左右去更新的，所以下个月肯定就超过 50 个了。顺便说下，最近买了一个的域名：http://www.marno.cn 。不过暂时还没想好放什么内容，就先用 Github Pages 搭了一个简单的网站...转载 2018-05-30 15:42:22 · 1820 阅读 · 2 评论 -
CSS如何实现内凹角效果
记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力，把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果：CSS如何实现内凹角的效果。上图展示的效果就是接下来所要聊的内凹角的效果。也就是说，通过下文的介绍，我们可以知道这种效果是如何做的，而...转载 2018-06-26 16:14:58 · 10999 阅读 · 1 评论 -
使用FileReader API创建一个Vue的文件阅读器组件
特别声明：此篇文章内容来源于https://www.w3cplus.com/vue/file-reader-component.html © w3cplus.com有时候我们需要从文件中读取数据。在以前，你需要将其发送到服务器，然后返回所需的数据。问题是，现在我们还可以使用FileReader API直接访问浏览器中的文件。如果我们只是想读取一个文本文件，以便在UI级别上做一些无关紧要的事情，那么...原创 2018-06-26 14:39:37 · 774 阅读 · 0 评论 -
Vue中的无渲染组件
不知道您是否以前有过在第三方组件库中提取过组件的经历，在提取组件的过程中发现需要做一些小的调整，而且也避不开提取整个包。比如像自定义的下拉框，日历或自完匹配等组件，而这些组件可能非常的复杂，需要处理许多意想不到的边界情况。有很多库在处理这些复杂边界情况做得很好，但是它们通常都有一个破坏性的缺点：很难或不可能定制它们的外观。比如标签输入控件（Tag input控件）：这个组件有一些有趣的特性：它不会...原创 2018-06-26 14:17:09 · 2275 阅读 · 0 评论