架构师的成长之路

原创 个人博客转向思否

本人博客转向思否地址：https://segmentfault.com/u/frontendjie

原创 前端性能优化总结

前端性能优化总结目录页面加载优化一、减少HTTP请求二、使用CDN三、添加Expires头四、压缩组件五、将样式表放在头部六、将脚本放在底部七、避免CSS表达式八、使用外部的JavaScript和CSS 九、减少DNS查找十、精简JavaScript十一、避免重定向十二、删除重复脚本十三、配置ETag十四、使Ajax可缓存vue性...

原创 react新更新的context传递数据

看到网上都是老版的context，发一篇最新的context的使用及小例子。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Contex...

原创 深入理解react生命周期

生命周期的重要性，对于学习框架的重要性，就不多说了，下面主要讲一下react的生命周期中的这些钩子函数的基本用法。话不多说，先上图：react组件的构造import React,{ Component } from 'react';//因为编译时要用到React，所以必须要引入 class Demo extends Component { const...

原创 深入理解mvc，mvp，mvvm框架设计思想+代码样例

对mvc，mvp，mvvm框架设计思想有深入的了解，是前端开发工程所必备的。MVC通信方式如下：View 传送指令到 Controller Controller 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈例子如下：<h1>Number: <span id="num"></span&g...

原创 登录权限验证token验证的原理和实现

原理后端不在存储认证信息，而是在用户登录的时候生成一个token，然后返回给前端，前端进行存储，在需要进行验证的时候将token一并发送到后端，后端进行验证加密的方式：对称加密和非对称加密，对称加密指的是加密解密使用同一个密钥，非对称加密使用公钥和私钥，加密用私钥加密，解密用公钥解密主要流程：用户登录的时候，生成token，token 中应该包含 payload （数据） cert...

原创 登录的权限验证session的原理和实现

存储方式原理: 登录成功后，保存登录信息到文件/数据库种，同时保存创建时间和过期时间，下次验证的时候取出来做验证使用express-session中间件来进行session的操作1.安装express-sessionnpm install express-session2.配置expess-session中间件使用中间件进行配置//使用express-session插...

原创 如何去掉csdn的广告

csdn的广告太丑，太烦人了，怎么办，屏蔽掉。解决方案：谷歌浏览器下一个插件AdBlock

转载 回流和重绘精析

回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN） 从上面这个图上，我们可以...

原创 reanct native样式大全

目录布局写法React-Native 样式指南Properties 属性Text 文本Dimension 尺寸Positioning 定位Margin 外部白Padding 内部白Border 边框Background 背景Transform 转换Flexbox 弹性盒Other 其他Valuse 取值Color 颜色Number 数...

原创 css3动画与js动画的对比

Chromium项目里，渲染线程分为main thread和compositor thread。如果CSS动画只是改变transforms和opacity，这时整个CSS动画得以在compositor thread完成（而JS动画则会在main thread执行，然后触发compositor进行下一步操作）在JS执行一些昂贵的任务时，main thread繁忙，CSS动画由于使用了compos...

原创 手把手教你Expo和Typescript构建React Native应用程序

创建一个示例RN应用程序，从Expo的create-react-native-app（CRNA）开始，并将其配置为使用Typescript开发我们的RN代码。1.使用CRNA创建React Native项目$ yarn global add create-react-native-app打开终端，并cd选择您的工作文件夹。运行以下命令以创建新的React Native项目：...

原创 深入剖析JS类的static,public,private,protected

在ES6中，我们的javascript也有了类，那么，JS中的类有没有static,public,private,protected这些关键字呢，又是怎么样的呢，本文主要带你探讨JS类中的static,public,private,protected这些关键字的使用。static类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这...

原创 react 子组件引入父组件加不上类名

react 子组件引入父组件加不上类名         function inject_unount (target) { // 改装componentWillUnmount，销毁的时候记录一下let next = target.prototype.componentWillUnmounttarget.prototype.componentW...

原创 Vue 3.0 更新发布

在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲，对 Vue 3.0 的更新计划、方向进行了详细阐述。目前该演讲的 PPT 也已上传至 Google 文档，感兴趣的可点此查阅。 可以看到，Vue 3.0 将会：1、更快 Virtual DOM 完全重写，mounting &amp;...

原创 redux原理及应用

 redux是一个架构模式/状态管理模式，借鉴了flux，在使用的时候需要去搭建redux结构，本文将着重介绍redux在react中应用。 Redux思想store是管理全局状态的，视图可以获取到store的状态，视图产生用户操作后会调用actionCreator的方法来生成一个action，将其dispatch派发给store store会将当前的状态和此次的action交给r...

原创 用react-transition-group实现动画

在react中，我们主要使用react-transition-group实现动画过度效果，本文将讨论如何在react项目中实现过度动画效果。安装# npmnpm install react-transition-group --save# yarnyarn add react-transition-group官方提供的三个组建Transition,CSSTransitio...

原创 style-components的熟练运用

style-components在react中用来做样式组件，很有用，拿来给大家讲一下。安装首先下一个包：npm install --save styled-components使用创建组价以及根据属性加样式import React ,{Component} from 'react'import styled from 'styled-components';con...

原创 React-Router实现Tag封装

在React-Router中Link无法指定生成的元素类型，那么我们可以封装一个，就可以实现Vue-router中tag的功能。一下代码中是有了react中的样式组件，需要安装：yarn add style-component -s封装代码：import React from 'react'import { NavLink, Route, withRouter } from...

原创 React-Router用法详解

本文将讨论如何在react项目中使用React-Router实现路由切换。（使用的React-Router是4.0版本）。在react中安装React-Router//如果你使用yarnyarn add react-router-dom//如果你使用npmnpm install react-router-dom完整代码import React, { Componen...

原创 react中Eslint配置

在react项目中配置Eslint在package.json文件中进行如下配置 "eslintConfig": { "extends": "react-app", "rules":{ "no-console":1 } },比如这个，配置了不让输出，否则会warningeslint规则（no-console的值）："off" 或者

原创 css变量使用方法

CSS变量，如任何编程语言中的变量，让我们一遍又一遍地引用相同的值。截至2017年4月，它们受到所有现代浏览器支持，是编写紧凑，简洁风格的有效方式。声明变量1.通过将它们添加到添加其他样式的元素来声明声明变量的时候，变量名前面要加两根连词线（–）。例如：body {    --foo: #7F583F;    --bar: #F7EFD2;}变量不能包含$，[，...

原创 Git 命令大全

目录 查看、添加、提交、删除、找回，重置修改文件查看文件diff查看提交记录Git 本地分支管理 分支合并和rebase Git补丁管理(方便在多台机器上开发同步时用) Git暂存管理Git远程分支管理Git远程仓库管理创建远程仓库查看、添加、提交、删除、找回，重置修改文件git help &lt;command&gt; # 显示command的...

原创 深入理解react高阶组件+代码小例

高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。新组件承受业务逻辑，并将数据传入给接收的组件，接收的组件变成UI组件，只负责使用数据，而生成的新组件称为容器组件。原来react使用混入（mixi...

原创 react为何移除mixins

react为何移除mixin，本文主要介绍minix的弊端。mixin引入了隐式依赖关系 有时候组件依赖于mixin中定义的某个方法，比如getClassName()。有时情况正好相反，mixin会在组件上调用renderHeader()之类的方法。JavaScript是一种动态语言，因此很难强制或记录这些依赖关系。 mixin打破了通常安全的假设，即可以通过搜索组件文件...

原创 csdn博客访问量突破这个数，纪念下

原创 Vue Router参数传递params和query

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。方法一param传递参数（get方式）getDescribe(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, ...

原创 深入理解Vue生命周期

本文主要讨论了Vue的生命周期及每个生命周期可以做什么，学好Vue，必须学好生命周期。图示：说明如下：&lt;body&gt; &lt;div id="app"&gt; &lt;my-component&gt;&lt;/my-component&gt; &lt;/div&gt; &lt;template id="component&q

原创 CommonJS规范 module.export与exports区别

const  exports= module.exports; exports只是module.exports的快捷方式在index.js里写入exports.test = 100;//意思就是直接输出一个test变量在main 里引入const mod=require('.index');console.log(mod.test);在cmd 输出 F:\nodeFi...

原创 cookie误区之过期时间（谷歌浏览器）

这条cookie没有过期吗？如果你是这样想的，你就进入了误区：expires设置的是过期时间，如果这个过期时间是在过去，说明这个cookie已经不会再发送到服务器，随后浏览器会把cookie删除的。 为什么是1969-12-31T23:59:59.000Z，这是一个UTC标准时间，unix时间戳是从1970-01-01T00:00:00Z开始的，这个也是我们计算时间戳的起始时间。co...

原创 Es6模块化export和export default的区别

1.在一个文件或模块中，export，import可以有多个，而export default只能有一个。2.通过export导出模块式，导入此模块要加{}，export default 则不需要。详细例子如下： 1、export //demo1.jsexport const str = 'hello world'export function f(a){ ret...

原创 ES6中const详解

我们使用const声明常量时，总认为值一旦声明就不可改变，然后我发现在定义对象时，对象的值是可以改变的；对于数值：var message = "Hello!";let age = 25;// 以下两行都会报错const message = "Goodbye!";const age = 30;对于对象const foo = {};// 为 foo 添加一个属性，可以...

原创 解决img标签上下出现间隙的方法

这是怎么回事呀？我不是已经把 img 的外边距和内边距什么的全部清空了么？实际上，这其实是inline元素搞的鬼。任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。----《CSS权威指南》什么意思？意思就是，其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高...