aefg95955-CSDN博客

转载 [react] hooks

react HooksHooks是什么？functional component在使用的时候有一些限制，比如需要生命周期、state的时候就不能用functional component。而有了Hooks，你就可以在funtional component里，使用class component的功能:props，state，context，refs，和生命周期函数等等。1.组件之间...

2019-04-10 22:47:00 371

转载 [react] react 16 新特性

16.0一、render支持返回这五类：React elements, 数组,Fragments，Portal，String/numbers,boolean/null。class Example extends React.Component { render() { return [ <div key="1">first element<...

2019-03-29 22:52:00 426

转载 [node] nodejs中的web安全

配置管理安全HTTP头Strict-Transport-Security 强制实施与服务器的安全（HTTP over SSL / TLS）连接X-Frame-Options 提供点击劫持保护X-XSS-Protection 支持在最新的Web浏览器中内置的跨站点脚本（XSS）过滤器X-Content-Type-Options 可防止浏览器从声明的内容类型中嗅探响应Conte...

2019-02-18 20:47:00 794

转载 [web] 《现代前端技术解析》读书笔记

1　Web前端技术基础1.1　现代Web前端技术发展概述前端项目代码越来越多，结构越来越复杂，如何实现项目的管理将直接决定后期的维护成本。所以我们必须考虑用模块化和组件化的思路来管理.所谓的模块化和组件化是指采用代码管理中分治的思想，将复杂的代码结构拆分成多个独立、简单、解耦合的结构或文件分开管理，使项目结构更加清晰。在页面内容较多、较复杂的情况下，为了让用户尽可能快速看到内容，...

2019-01-31 02:08:00 302

转载 [web] webpack4 guide

getting startedNode 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）.npx webpack 相当于 "build":"webpack"-> npm run build默认支持ES2015 中的 imp...

2018-11-28 02:29:00 255

转载 [react] RN 积累

使用相关csspixel point(PT)代表的是逻辑像素而不是实际像素.可以通过Dimensions 来获取宽高，PixelRatio 获取密度。React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是...

2018-10-19 11:18:00 275

转载 [cs] mac使用相关

快捷键mac外接键盘windows键盘:修饰键里把Control和Command互换下,键盘的Control就代表Command了更改后:上箭头为Caps^为Control->Windows为Command->Control奇怪的符号为Option->altmac键盘快捷键命令作用Windows + `打开terminalWi...

2018-09-29 17:54:00 130

转载 [web] webpack4 concepts

拓展阅读javascript-module-systems-showdownpredictable-long-term-caching-with-webpackseparating-manifestModule MethodsWriting a LoadertapableModular_programmingcommonjsAMDwebpack-http-2conc...

2018-09-27 01:30:00 147

转载 [翻译] webpack4 changelog

webpack4 changelog翻译webpack4的主要功能变更,bugfixes之类的如果不重要会略过V4.0.0大的变更环境不再支持Node.js 4。源代码已升级为更高的ecmascript版本。用法现在必须在两种模式之间选择 (mode or --mode)：production or development生产支持所有类型的优化以生成优化的bundles...

2018-09-07 02:25:00 290

转载 [http] XSS 与 CSRF

XSSXSS，即 Cross Site Script，中译是跨站脚本攻击XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它们的共同...

2018-08-27 19:57:00 166

转载 [js] 函数

(高阶)函数高阶函数高阶函数(higher-order function)指操作函数的函数函数可以作为参数被传递函数可以作为返回值输出常见的 sort,reduce 等函数也算。AOPAOP（面向切面编程）的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的...

2018-07-20 00:44:00 181

转载 [cs] git (3)

git常用命令及技巧git merge --no-ff默认情况下，如果没有冲突那么 git merge 采用 fast-forward(快进) 的模式进行合并，所谓 fast-forward 指的是：不产生新的提交历史，直接移动 HEAD 至要合并的分支，显而易见的缺点是合并历史信息不清晰，如下图(一条线)：所以为了保留分支的 commit 历史记录，可以采用 --no-ff 选...

2018-07-11 21:27:00 132

转载 [web] 从 webpack 3 到 webpack 4

该文章目前对应的是 webpack 4.12.1v4.0.0 changelog新增webpack-cli需要多安装一个webpack-cli.现在可以不需要webpack.config.js文件也能简单打包文件,会默认打包./src/index.js,输出到./dist/main.js中.相当于默认载入了这个配置const path = require('path');...

2018-06-26 20:56:00 261

转载 [react] React Fiber 初探

React Fiber是对React核心算法的重构，2年重构的产物就是Fiber Reconciler。1 为什么需要React Fiber在React Fiber之前的版本,当React决定要加载或者更新组件树时，会做很多事，但主要是两个阶段:调度阶段(Reconciler)。这个阶段React用新数据生成新的Virtual DOM，遍历Virtual DOM，然后通过Dif...

2018-06-21 21:12:00 204

转载 [css] transform matrix

概述/* 2D */transform: matrix(1, 0, 0, 1, 0, 0);/* 3D */transform: matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);上面两行 css 代码其实什么变换都不会做，因为那是变换的默认状态，即没有变换。但是其中使用到了 matrix，翻译成中文叫做：矩阵。更多...

2018-06-20 22:09:00 389

转载 [js] 内存

js的内存生命周期不管什么程序语言，内存生命周期基本是一致的：分配你所需要的内存使用分配到的内存（读、写）不需要时将其释放\归还在所有语言中第一和第二部分都很清晰。最后一步在底层语言中很清晰，但是在像JavaScript 等上层语言中，这一步是隐藏的、透明的。JavaScript 的内存分配值的初始化JavaScript 在定义变量时就完成了内存分配。var n...

2018-06-19 20:52:00 122

转载 [vue] JSX

官方文档基本没怎么说,很迷,可以参考这个babel-plugin-transform-vue-jsx.还有react的JSXvnode似乎也需要了解render (h) { return ( <div // normal attributes or component props. id="foo" // DOM proper...

2018-05-18 20:41:00 121

转载 [js] 页面加载

window.onload在文档装载完成后会触发 load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载。DOMContentLoadedIE9+当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页...

2018-05-18 20:40:00 198

转载 [vue] 《Vue.js实战》读书笔记

随书代码略的部分为个人觉得没什么记录价值的部分.1. 初始Vue.jsMVVM(Model-View-View Model):当View(视图层)变化时，会自动更新到ViewModel(视图模型)，反之亦然。View 和ViewModel 之间通过双向绑定(data-binding)建立联系.2. 数据绑定和第一个Vue 应用在 {{}} 中，除了简单的绑定属性值外，还可以使...

2018-05-11 23:22:00 364

转载 [js] this (2)

call、apply 、函数执行的本质严格模式下,fn 里的 this 就是 call 的第一个参数，也就是 undefined。 "use strict" function fn(a, b) { console.log(this) } fn(1, 2)//undefined //等价于 fn.ca...

2018-05-02 21:49:00 129

转载 [web] webpack (3)

CommonsChunkPlugin默认情况下CommonsChunkPlugin可以将多entry的公共依赖模块提取到一个chunk文件。实际上如果不是多entry，在同一entry系列里的重复引入模块，是不会被webpack重复打包的。第二个默认行为是如果不是多入口且没有指定打包的库，会打包manifest。使用CommonsChunkPlugin更主要是为了提取较稳定的库，...

2018-04-18 20:54:00 187

转载 [react] 《深入浅出React和Redux》读书笔记

随书代码1 React 新的前端思维方式npm i create-react-app -gcreate-react-app first_react_appnpm start//执行eject则会弹出原本的scripts配置，不可逆react的理念UI = render(data)2 设计高质量的React组件当 prop 的值不是字符串类型时，在 JSX 中必须用花括...

2018-04-11 20:32:00 302

转载 [web] npm scripts

npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。这意味着...

2018-04-10 20:19:00 130

转载 [vue] vuex

官方示例examples状态管理模式new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { incre...

2018-03-11 00:12:00 70

转载 [vue] vue-router

官方示例examples$route可以获取到路由相关的数据。$router可以使用路由相关的方法。动态路由匹配路由匹配规则是restful的，当使用如/user/:username的params时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子...

2018-03-09 22:20:00 114

转载 [program] dev tools

vscode大多与webstorm类似命令作用Ctrl + F查找Ctrl + H查找替换Ctrl + Shift + F整个文件夹中查找Ctrl + B全屏切换Ctrl + D快速选中相同，用于批量修改ctrl + /单行注释alt + shift + A多行注释alt + enter换行Ctrl+T...

2018-03-03 18:55:00 125

转载 [js] 积累 (2)

js中的值对比js中的值对比Date处理获取当前Unix时间，三种写法等效new Date().getTime()Date.now()+new Date();es5、es6边界es5bindeveryDate.now()trimfilteres6find数字处理num类型可为number 或 string :~num num取反并减1 ...

2018-02-08 22:27:00 98

转载 [css] 一些兼容性(奇怪)问题

垂直居中偏移问题line-height在安卓中出现往上偏移的现象。(在ios可能会出现下掉....暂不知晓原因)原因：可能是使用了奇数字号。可能是字号小于12px。本质原因:可能是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHead Descent等），而primyfont的查找是看font-family里哪个字体...

2018-02-04 19:48:00 289

转载 [js] 《高性能JavaScript》读书笔记

Loading and Execution 加载和运行一般来说浏览器中有多种线程：UI渲染线程、javascript引擎线程、浏览器事件触发线程、HTTP请求线程等。多线程之间会共享运行资源，浏览器的js会操作dom，影响渲染，所以js引擎线程和UI渲染线程是互斥的，导致执行js时会阻塞页面的渲染。将<script>标签放在尽可能接近<body>标签底部的位...

2018-02-04 04:44:00 93

转载 [css] line-height 、 vertical-align

line-height行高、行距行高是指文本行基线间的垂直距离。基线（base line）并不是汉字文字的下端沿，而是英文字母“E”的下端沿。意味着中文没有基线，也就更难(视觉)底部对齐。图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距。半...

2018-01-28 21:06:00 169

转载 [node] cluster

child_processchild_process 模块提供了衍生子进程的功能。默认情况下，在 Node.js 的父进程与衍生的子进程之间会建立 stdin、stdout 和 stderr 的管道。数据能以非阻塞的方式在管道中流通。注意，有些程序会在内部使用行缓冲 I/O。虽然这并不影响 Node.js，但这意味着发送到子进程的数据可能无法被立即使用。exec：启动一个子...

2018-01-13 00:00:00 163

转载 [node] 《深入浅出nodejs》读书笔记

事件驱动事件驱动是指在持续事务管理过程中，进行决策的一种策略，即跟随当前时间点上出现的事件，调动可用资源，执行相关任务，使不断出现的问题得以解决，防止事务堆积。消息驱动消息是一个报告事件发生的通知，消息驱动是围绕消息的产生与处理展开的，并依靠消息循环机制来实现。非阻塞io单线程多线程死锁web workerservice workerchild_processlib...

2017-12-24 04:56:00 117

转载 [vue] vue 、vue-loader

生命周期beforecreated：el 和 data 并未初始化created:完成了 data 数据的初始化，el没有beforeMount：完成了 el 和 data 初始化(模板插入)mounted ：完成挂载(渲染出真实dom)data,props,computed,methods是在created之前beforecreate之后创建的父组件与子组件的生命周期是同...

2017-12-13 19:58:00 234

转载 [js] 你可能不会promise

1Promise 构造函数与 console.log() 在stack里，按顺序执行。promise.then 是microtask，在queue里，stack执行完后才会执行它。 const promise = new Promise((resolve, reject) => { console.log(1) r...

2017-11-13 20:25:00 102

转载 [js] event loop

并发模型(Concurrency model) 、运行时(runtime)栈(stack)函数调用形成了一个栈帧(stack of frames)。 function foo(b) { var a = 10; return a + b + 11; } function bar(x) {...

2017-10-20 19:35:00 75

转载 [react] react-modal 源码

看看思路react-modal//Modal function getParentElement(parentSelector) { return parentSelector(); } componentDidMount() { if (!canUseDOM) return;//判断是否能取到真实dom c...

2017-10-19 19:56:00 172

转载 [js] underscore 常用方法源码解读

debounceimmediate: true开启 leading-edge，可以执行时立即执行。如果点击过快，除了某个时段的首次点击，其余查询都不会送出。immediate: false（默认）开启 trailing-edge，可以执行时也必须延后至少 wait 个时间才能执行。如果点击过快，除了某时间段内的最后一次点击，其余所有的查询都不会送出。 var...

2017-10-16 19:56:00 167

转载 [js] redux (3)

reduxaction我们应该尽量减少在 action 中传递的数据?function addTodo(text) { return { type: ADD_TODO, text }}Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。dispatch(addTodo(text))d...

2017-09-14 21:05:00 155

转载 [http] 缓存

缓存(caching)重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。各种类型的缓存缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去源服务器重新下载。这样带来的好处有...

2017-09-01 18:57:00 163

转载 [http] 报文

HTTP报文(messages)HTTP报文是服务器和客户端之间交换数据的方式。有两种类型的报文︰请求--由客户端发送用来触发一个服务器上的动作；响应--来自服务器的应答。HTTP报文由采用ASCII编码的多行文本构成。在HTTP/1.1及早期版本中，这些报文通过连接公开地发送。在HTTP/2中，为了优化和性能方面的改进，曾经可人工阅读的报文被分到多个HTTP帧中。HTTP...

2017-08-28 19:46:00 287

空空如也

空空如也