- 博客(58)
- 收藏
- 关注
RSS订阅原创 CSS样式优先级
给DOM元素设置样式，通常通过以下几种方式：通过ID选择器通过类选择器通过属性选择器除了上面的几个之外，还有特殊的选择方式，比如伪类伪元素通常来说，设定样式一般不会有什么问题，但是如果设置了几种样式，比如// html<div id = 'test'> <p>test</p></div>// css#test p {...
2019-01-03 20:24:06
451
原创 使用//代替https://或者http://
产生的原因当一个资源可以通过http或者https访问，但是不同端对于同一个资源使用的协议不同，但是后端的接口往往又是同一个，怎么做到适配？为什么可以这么做？当使用// 代替https://(http://)，默认使用的是当前页面的协议，这样你就可以在不同的端获得正确的资源地址。注意如果你在浏览器单独输入一个//abc.com，则会使用默认的file协议。为什么会发生上面的情况？在解...
2018-11-19 21:02:28
941
原创 手把手教你实现一个modal对话框
需求：1、点击一个按钮弹出对话框2、对话框的事件能够被父组件捕捉3、对话框里的内容能够随时改变一、如何实现一个对话框1.1 创建一个简单的对话框 简而言之，一个简单的对话框就是一个div（也可能是几个div），怎么创建呢？function createModal () { //创建一个div var modalDiv = docume...
2018-11-14 11:35:33
1884
原创 前端中的Web Worker详解
web worker产生的背景&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;总所周知，前端javascript是单线程工作的(前端中的线程)，那如果有计算密集性、高延时的任务，前端通常会特定的调度机制通过settimeout、promise等实现，但是本质上，无论怎么样，还是在一个线程中进行工作，仍然会阻塞主Javascript线程，为了能够更好的执行，前端实现了一个web api接口—web...
2018-11-03 11:19:54
6979
1
原创 前端文件下载方式探讨
开发过程中遇到一个问题，就是文件下载问题，通过请求后端的接口把文件下载到本地。一般有两种方式一、window.openwindow.open(URL,name,features,replace)url: 代表urlname: 新窗口的名字features: 新窗口的特性replace: 是否替换当前浏览器的历史记录二、window.location.hrefwindow.loc...
2018-11-02 20:38:07
1579
原创 单行和多行溢出显示省略号
对于文本内容，单行或者多行溢出，显示省略号，一般有两种操作方式Javascript截断操作Css溢出操作截断操作let str = '23048930jsldfjklsdfsdf';str.length &amp;gt; 6 ? str.splice(0,6) + '...' : str;Css操作单行溢出 // 溢出必须要设置宽度，然后设置超出部分隐藏，用省略号代替，不换行 ...
2018-10-30 12:06:44
392
原创 数组某一个元素置于数组首位
改变数组中一个元素的位置，通常有两种方法：改变原来的数组返回新数组改变原来的数组let values = [1, 3, 5, 7, 12, 10];let value = 12; //需要置于首位的元素let index = values.indexOf(12);if(index) { let first = values.splice(index , 1)[0];...
2018-10-30 10:51:31
5422
原创 如何完整的编写一个React通用组件？
React组件概念想必大家都熟悉了，但是在业务开发过程中，面对通用的业务，怎么编写一个通用的React业务组件呢？本文以实际案例说明，如何编写一个通用的业务组件。案例背景实现一个如图所示的组件，可以添加对组件进行添加和删除实现思路实现组件的界面样式实现组件的基本功能考虑通用型和可扩展性实现基本的界面样式实现上面的界面展示，需要三个方面的东西一个文本框一个➖操作一个➕操...
2018-10-26 21:38:38
5171
原创 前端filter
其实数组的很多函数需要的参数都是一样的，arr.fun((item, index, arr) => { item: 数组的元素 index:数组元素在的位置 arr:整个数组})filter是数组的一个用法，用来返回一个数组，满足特定条件的数组中的元素let arr = [1, 2, 3, 4];let newArr = arr.filter((item, index, a...
2018-10-24 20:51:55
1330
原创 深入浅出—React-redux源码
目录React-redux框架基本原理是什么？为什么？怎么用？框架源码模块划分ProviderConnectdefaultSelectorFactorypureFinalPropsSelectorFactoryimpureFinalPropsSelectorFactorydefaultMapStateToPropsFactories和defaultMapDispatchToPropsFactori...
2018-10-16 16:48:56
590
原创 深入浅出—Redux-saga源码
redux中间件编写如何编写一个中间件呢？({dispatch, getState}) =&amp;amp;amp;amp;gt; next =&amp;amp;amp;amp;gt; action { // write your code here next(action)}上面的函数参数什么含义呢？{dispatch, getState}: dispatch和getState就是redux中常用的函数next: 就是下个中间件...
2018-10-16 11:28:44
1165
原创 Redux中间件原理详解
目录1、中间件是什么样子的1.2 thunk中间件1.2promise中间件1.3logger中间件2、怎么使用中间件3、中间件运行原理3.1 中间件的内部逻辑3.2 触发一个action时，执行逻辑附录compsoe为了解析中间件，先看一下几个中间件是什么样子，怎么用，运行起来的原理是什么？1、中间件是什么样子的1.2 thunk中间件function createThunkMiddle...
2018-10-12 21:09:08
1265
原创 深入浅出—Redux源码
目录一、维护一个状态树、发布订阅1.1 dispatch1.2 subscribe1.3 getState1.4 replaceReducer1.5 [$$observable]: observable二、中间件三、工具函数3.1 compose3.2 combineReducers3.3 bindActionCreator附录阅读本文的前提条件，了解Redux基本概念。杂谈：&amp;amp;n...
2018-10-11 16:24:51
843
原创 前端你必须要知道的进程、线程和事件队列
一、浏览器的进程和线程&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;前端研发人员不要忘记了浏览器是安装在PC电脑（手机）上的应用。既然是客户端应用，就免不了一个问题：线程和进程。一个程序可以有多个进程；一个进程和多个线程；多个进程之间可以相互通信；多个线程之间可以相
2018-10-08 17:02:55
1215
原创 前端异步操作大杂烩（ajax、fetch、promise、async/await）
写在前面的话一、为什么需要异步操作？二、服务器交互的异步（Ajax----&gt;Promise----&gt;Fetch）2.1 Ajax：2.2 Promise2.3 Fetch2.4 async/await三、实战利器参考链接前端工作中面临两个重要的问题：同步与异步操作。&nbsp;&nbsp;同步操作，用户操作即时显示的，比如切换菜单，按钮点击效果等等。&nbsp;&nbsp;异步操...
2018-10-08 16:49:09
1287
原创 你应该知道的JSON.stringify
最近做项目遇到了一个坑爹玩意，就是想后台发送数据，需要Json序列化，因为一些特别的原因，只需要序列化一部分内容，所以坑就出现了。var str = { "name":"donspeng", "site":"https://blog.csdn.net/Donspeng", 'test':{ 'deep':'这...
2018-08-22 18:34:59
554
原创 前端面向对象的编程
问：Javascript有对象么？ 答：有。 问：你怎么理解面向对象的编程？ 答：那我用code来说明下function Foo(who) { this.me = who;}Foo.prototype.identify = function() { return "I am " + this.me;};function Bar(who) { Fo...
2018-07-22 15:52:28
631
原创 Redux详解
redux 1、基本概念 redux其实就是一个页面状态管理的规约。store中的数据约定是不能改变的，只能重新生成store。 2、页面刷新带来的问题 store中的数据是存在内存中的，页面刷新会使store中的数据全部重置，所以不要期望页面刷新后能够从store中获取相应的数据，要想获得持久化的数据，可以从sessionStorage或者localStorag...
2018-07-22 14:57:03
318
原创 React编程中的常用技巧（欢迎拍砖）
1、变量初始化 在react组件编写的过程中，组件都需要输入参数，但是对于代码维护者来说，一个组件的使用，首先要知道它的输入。而React中的变量检查和默认值刚好可以做到，一方面可以校验变量，另一方面，可以把组件的输入参数表现出来。class Input extends React.Component { // ...}Input.defaultProps = { c...
2018-07-22 11:24:30
401
原创 详解React中的ref和context
React中的ref和context 前端设计到的两个重要问题：变化和异步。这两个总结起来就是：前端的状态管理。 状态管理主要分为三个方面的问题： 输入====》状态====》输出前端的状态管理有很多解决方案。无非就是一点，如何有逻辑、有层次地管理前端的状态。（毕竟，要实现一个功能很简单，如果瀑布流的代码编程，给代码维护者是一种灾难。）...
2018-07-22 00:35:44
1665
原创 NodeJs概念入门
本文主要针对NodeJs的入门概念进行简单的解释。 了解一个新的概念或者技术，首先要着重于概念，一般可以分为这么几个套路 1）NodeJs是用来做什么的？ 2）NodeJs的特点是什么，有哪些重要的概念，这些概念具体对应的是什么？ 那么我们首先来看NodeJs是用来做什么的？ NodeJs的初衷是用来实现“旨在提供一种简单的构建可伸缩网络程序的方法”
2017-10-28 22:18:19
739
1
原创 原生JS实现Promise
ES6中Promise可以说很大情况下改善了异步回调的嵌套问题，那么如果我们自己去写一个类似Promise的库应该怎么去写？我们先看一下Promise的特点第一：Promise构造函数接受一个函数作为参数，函数里面有两个参数resolve和reject分别作为执行成功或者执行失败的函数var promise=new Promsie(function(resolve,rejec){ if(/
2017-10-22 22:13:35
5315
2
原创 Js实现轮播图
首先说明下轮播图的实现方式： 1、通过改变图片的位置，将图片放到一个div中，设置父元素的overflow为hidden，然后改变子div的位置，达到显示图片的目的 2、控制图片是否显示{ 1）改变图片的透明度， 2）改变图片的display属性 } 本文通过改变图片的display属性实现，话不多说，直接上代码<!DOCTYPE
2017-10-22 15:06:41
527
原创 面向工资的编程
遇到到了一个问题有n个ajax请求，ajax[1],ajax[2],...,ajax[n],统计每个ajax请求的响应时间，要求：不修改源代码第一次听到这个问题，就想到了在ajax请求里面修改，但是如果对于一个老旧的项目，其实就不太合理了。 那么最好的方式就是面向切面的编程，搞过java的同学应该对这个并不陌生。那么在js中怎么实现面向切面的编程呢？ 首先定义两个函数before和afterFu
2017-10-20 22:48:19
571
1
原创 Javascript继承
1、继承是和作用域有极大的关系 函数具有作用域 {}没有块级作用域（ES6中如果生命了let const就会有块级作用域） 外部作用域无法访问内部部作用域变量，内部可以访问外部 内部作用于搜索变量，先从自身搜索，再向上搜索 如果内部没有声明var 则会产生变量提升var age=10;function superType(){ age=12;
2017-09-02 12:14:14
405
原创 浏览器缓存
浏览器缓存分为强缓存和协商缓存 强缓存： 不必向后台发起请求 相关字段：cache-control > expires 协商缓存： 向后台发起请求，但是提示从缓存中取数据 相关字段：E-tag > lastmodified 流程： 第一次请求：正常请求，携带字段 cache-control：no-cache 返回消息：携带
2017-08-23 21:16:56
259
原创 同源策略
为什么同源？ 为了安全 怎么算同源？ 协议+域名+端口 限制哪些内容？ cookie、localstorage、indexDB DOM操作 ajax请求 如果要垮域怎么办？ 分为两类： 页面之间垮域： 设置document.domain(适用于一级域名相同、二级域名不同
2017-08-19 18:12:38
308
原创 前端框架的思考
今天面试了某公司，因为现在在用react进行业务重构，所以问我React和jquery有什么区别？ 两个本就不是一个层面上的东西，怎么去比较呢？面试官：你比较下jquery有什么不好，react有什么好处我：他不是一个层面的东西，怎么去比较？面试官：那你为什么现在用React？我：好吧。React组件化更好，复用性、封装性好balbalbal。。。。。。。面试官：react做的jqu
2017-08-19 17:49:10
339
原创 理解javascript原型链
要理解javascript的原型链首先要明白javascript创建对象的方式 1、对象有数据属性和访问器属性，可以使用defineProperty来创建 数据属性具有四个特性： Configurable：能够通过delete属性删除而重新定义属性，默认true Enumerable：能够通过for in循环属性。默认true Writable：能够修改
2017-08-16 16:59:53
288
原创 按钮悬浮动画过度效果CSS实现
话不多说直接上代码：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border:
2017-08-15 21:01:50
959
原创 antd源码解析
首先说一下我对antd的认识： antd是一个对于样式和简单功能的封装，值得关注的来个两点：1）定义的样式规则可接受性比较广泛，2）采用融合了react，每一个都封装为一个组件，组件配置化大大提升 本文通过简单例子说明对于组件样式和功能的简单封装。 1、图标 通常为了提高页面可读性和用户的良好交互，通常会给按钮或者其他地方加入icon，那么通常操作是什么呢？ 通过伪类实现而
2017-08-15 19:58:33
6387
原创 antd文档系统解析
antd的文档系统是基于bisheng开源框架来做的，本文主要简单介绍下文档系统中几个关键点，重点理解其思路 1、google Analytics 作用：跟踪用户数据，形成分析报告 使用方法：在文档中添加如下代码<!-- Google Analytics --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsOb
2017-08-15 17:17:35
3825
原创 Javascript权威指南杂记
1、defer vs async相同点：异步加载js文件不同点： defer：在DOM文档完全加载完成后加载，顺序加载 async：当前脚本不必等待其他脚本，也不必阻塞文档呈现，不按顺序加载2、基本概念1）大小写敏感2）驼峰命名法3）'use strict'严格模式，可以在文档顶部，也可以在函数内部，相当于一个编译指示4）声明未赋值的变量会自动复制为undefined，未声明
2017-08-12 12:03:46
398
原创 前端图片、动画基本知识
一、最原生的方法实现图片或者动画 1、img 作用：展示一个图片 使用方法：<img src="图片路径" alt="图片没有加载成功出现的内容" data-src="自定义属性，不属于html规范"></img>注意：data-src:一般会用于懒加载（在瀑布流视图中经常用到，鼠标滚轮）ps：懒加载和预加载的区别懒加载：当需要用户看到内容的时候再去请求优点：减轻服务器压力
2017-08-11 19:53:34
682
原创 Css伪元素和伪类
pseudo-class：俗称伪元素 作用：在选择器后面给选择的元素添加一个特定的状态，比如说：hover 使用方法：selector:pseudo-class { property: value;}为什么要使用伪元素？ 在文档树之外定义相关的样式或者字段,定义的内容不在文档树中 举个简单例子：在li元素前面添加相应的图标？：before，是不是很简单？关于伪类和伪元素，Allo
2017-08-11 17:45:38
471
原创 React---Render
var a=[1,2,3]; var b=['s','m']; class Test extends React.Component{ render(){ return( <div> { a.map((item)=>{ if(item==3){
2017-08-04 23:58:25
342
原创 React高阶组件
哈哈，又进入了名字脱坑的环节了，什么是高阶组件。 一句话： 组件作为参数传递，返回一个组件 为什么会需要这个？ 组件的复用性，如果两个组件之间有很多相同的部分，需要提取出来怎么办？那就复用啊，就需要用到高阶组件。 例子：function higherComponent(Component){ return class First extends React.component{
2017-08-04 10:38:30
421
原创 React生命周期全解和state避坑
所谓的生命周期就是React中定制的一套执行函数的顺序 分为三个阶段，每一个阶段都有不同的函数执行顺序，值得注意的是实例化和销毁阶段执行一次，存在期是可以反复执行的： 1、组件实例化阶段 （在实例化阶段只会执行一次） constructor componentWillMount render componentDidMount 2、组件存在阶段
2017-08-04 10:05:13
4342
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人