- 博客(39)
- 收藏
- 关注
RSS订阅原创 js常用转换正则
//双引号转单引号var_adrobj=JSON.stringify(address).replace(/\"/g,"'");//单引号转双引号var_nstr=_adrdata.replace(/'/g,'"');//去除空格String.prototype.Trim = function() {return this.replace...
2020-01-16 17:24:31
677
原创 TS Eslint规则说明
"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch-shadow": 2,//禁止catch子句参数与外部作...
2020-01-14 12:05:59
1897
原创 字节和字符的区别
字节(Byte)是计量单位，表示数据量多少，是计算机存储容量的计量单位。一个字节占8位。字符(Character)计算机中使用的文字和符号，比如'A'、'B'、'$'、'&'等。字节与字符：①ASCII码中，一个英文字母（不分大小写）占一个字节的空间，一个中文汉字占两个字节的空间。②UTF-8编码中，一个英文字符等于一个字节，一个中文等于三个字节。③Unicode编码中...
2019-11-25 09:50:36
1013
原创 sudo npm install fecs -g 报错
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue/usr/local/bin/fecs -> /usr/local/lib/node_modules/fecs/bin/fecs> [email protected] posti...
2019-01-04 15:04:20
467
转载 对webpack和gulp的理解和区别
webpack是前端构建工具，称为模块打包机，webpack支持模块化；构建前端开发过程中常用的文件，如：js，css，html，img等；使用简单方便，自动化构建。webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。Glup侧重于前端开发的整个过程的控制管理，我们可以通过给glup配置不同的task来让glup实现不同的功能，从而构建整个前端开发流程。（通过g...
2018-10-21 14:41:42
269
转载 文档流与浮动
CSS样式----浮动（图文详解）本文最初发表于博客园，并在GitHub上持续更新。以下是正文。标准文档流宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。标准文档流的特性我们来看看标准流有哪些微观现象。（1）空白折叠现象：无论多少个空格、换行、t...
2018-10-21 14:38:32
380
转载 HTTP协议Keep-Alive模式详解和HTTP头字段总结
1、什么是Keep-Alive模式？我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成 之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服 务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能...
2018-10-17 15:18:18
361
转载 js正则表达式常见面试题
1 . 给一个连字符串例如：get-element-by-id转化成驼峰形式。var str = "get-element-by-id";var reg = /-\w/g; // 匹配横杆以及之后的一个字符，全局匹配console.log(str.replace(reg,function($0){ return $0.slice(1).toUpperCase(); ...
2018-10-15 18:45:37
1130
转载 CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素（成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。如果你刚刚接触 CSS Grid 布局，...
2018-10-15 11:59:17
320
转载 Flex 布局语法教程
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。...
2018-10-15 11:56:28
103
转载 Vue2.0生命周期（组件钩子函数与路由守卫）
组件相关钩子函数： beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed还有两个特殊的（使用keep-alive）：activated、deactivated（不详述）v2.5.0+新增： errorCaptured (暂时还不知道咋用)路由守卫：全局&路由独享：...
2018-10-11 15:25:48
1852
转载 浅谈React前后端同构防止重复渲染
什么叫前后端同构？为了解决某些问题（比如SEO、提升渲染速度等）react 提供了2个方法在服务端生成一个HTML文本格式的字符串。在得到了这个HTML格式的字符串之后，通常会将其组装成一个页面直接返回给用户的浏览器。到这里，服务端的活已经干完了，然后就是浏览器这边干活。浏览器拿到HTML文本后，立刻进行渲染将内容呈现给用户。然后加载页面所需的 .js 文件，然后执行 JavaScri...
2018-09-18 20:17:49
678
原创 renderToString和renderToStaticMarkup的区别
renderToString 方法渲染的时候带有 data-reactid 属性. renderToStaticMarkup 则没有 data-reactid 属性， 可以节省一点流量.data-reactid 简单的说就是 react 组件 的一个唯一标示 id, 具体可以去 google 下对于服务端渲染而言 使用 renderToStaticMarkup 渲染出的是不带data...
2018-07-20 11:56:18
2301
转载 css与 js动画 优缺点比较
我们经常面临一个抉择：到底使用JavaScript还是CSS动画，下面做一下对比JS动画缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 (2)代码的复杂度高于CSS动画优点：(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动...
2018-06-25 19:37:42
696
转载 前端程序员必须知道的高性能Javascript知识
想必大家都知道，JavaScrip是全栈开发语言，浏览器，手机，服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践，提高大家对JS的底层和实现原理的理解。数据存储计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能，在JavaScript中，数据存储的位置会对代码性能产生重大影响。 – 能使用{}创建对象就不要使用new Object，能使用[]创...
2018-06-25 19:36:27
149
转载 为什么说对象字面量赋值比new Object()高效？
虽然平时都是以对象字面量来初始化js变量的，即 var obj={}; 也没有去具体去纠结为什么这样就比 var obj=new Object(); 来的好就直接在chrome上做了个对比试验，结果如下：网上别人的解释，个人觉得能理解的：{}是字面量，可以立即求值，而new Object()本质上是方法（只不过这个方法是内置的）调用，既然是方法调用，就涉及到在proto链中遍历该方法，当找到该方法...
2018-06-25 19:30:53
397
原创 React组件挂载优化
做惯了react的首屏加载优化、代码结构优化、dom diff优化，却很少从react组件挂载做切入点动些邪念，嘻嘻嘻。。。。所以今天被问及这个问题时，回答的就有点隔靴搔痒，没能直击面试官的G点。。。。当时我答定义一个isMounted变量来判断组件的运行状态。。。。当然能解决问题，但不是最优解。。。。回来后翻阅资料，发现有高手封装了cancelableFetch工具来处理异步请求。。。。我猜想作...
2018-06-23 17:07:42
725
转载 彻底理解js中this的指向，不必硬背。
首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。 为什么要学...
2018-06-21 06:50:34
135
转载 Web安全之点击劫持（ClickJacking）
点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面；二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义；iframe覆盖直接示例说明1. 假如我们在百度有个贴吧，想偷偷让别人关注它。于是我们准备一个页面：<!DOCTYPE...
2018-06-19 09:22:38
835
转载 Codemirror 常用API
一、触发事件1.onChange(instance,changeObj)：codeMirror文本被修改后触发。instance是一个当前的codemirror对象，changeObj是一个｛from，to，text[,removed][，origin]｝对象。其中from，to分别表示起始行对象和结束行对象，行对象包括ch：改变位置距离行头的间隔字符，line：改变的行数。text是一个字符串数...
2018-06-13 14:15:30
6243
转载 理解react16.3的fiber架构
一.目标Fiber是对React核心算法的重构，2年重构的产物就是Fiber reconciler核心目标：扩大其适用性，包括动画，布局和手势。分为5个具体目标（后2个算送的）：把可中断的工作拆分成小任务对正在做的工作调整优先次序、重做、复用上次（做了一半的）成果在父子任务之间从容切换（yield back and forth），以支持React执行过程中的布局刷新支持render()返回多个元素...
2018-06-10 17:07:33
8263
转载 JS模块规范
commonJS特点：1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。2、模块加载会阻塞接下来代码的执行，需要等到模块加载完成才能继续执行——同步加载。环境：服务器环境应用：nodejs的模块规范是参照commonJS实现的。语法：1、导入：require('路径')2、导出：module.export...
2018-06-10 09:44:50
521
转载 彻底弄懂HTTP缓存机制及原理
前言Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确的理解前端缓存有...
2018-06-10 08:48:04
225
原创 浏览器加载、解析、渲染的过程
为什么要了解浏览器加载、解析、渲染这个过程？好，我们先说一下，为什么要了解这些呢？如果想写出一个最佳实践的页面，就要好好了解。了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。了解浏览器如何进行解析，可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。了解浏览器如何进行渲染，明白渲染的过程，在设置元素属...
2018-06-07 12:13:20
120
转载 JavaScript 垃圾回收
avaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是时时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。变量生命周期不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后...
2018-06-07 11:40:26
330
原创 js事件委托处理dom
事件委托就是根据事件冒泡原理，用父级来触发子级的事件。利用事件委托可以解决多个兄弟节点绑定问题，动态创建的html事件绑定问题等。一、多个兄弟节点事件绑定例如，给ul下的li添加事件：<ul id="wrap"> <li>item1</li> <li>item2</li></ul>$(function(){ //普通
2018-06-01 10:52:42
263
原创 React更新日志
16.4.0（5.23，2018）---------------------------------------------------------------------------------------------------------------------------------React新增实验性组件React.unstable.Profiler,以检测组件的“mount”，“upd...
2018-05-27 10:42:55
864
转载 JS-斜杠和反斜杠的转换
例子：var url = "http://localhost:64177/Home/AccordionIndex";将斜杠转换成反斜杠：url = url .replace("\/\/", "\\\\");url = url .replace("\/", "\\");url = url .replace("\/", "\\");alert(url);将会弹出：http:
2018-05-22 11:14:18
7206
原创 react前端开发规范总结
代码规范javascript格式规范使用标准ECMAScript 6使用 ECMAScript 6 作为源码标准。参见 ECMA-262 6th Edition缩进使用两个空格为一个缩进单位123[ 1, 2, 3, 4, 5 ].map( ( value, index, array ) => { return value + index;} );变量见名知意常量使用 UPPER_CASE...
2018-05-18 09:52:30
2636
原创 Commit message 和 Change log 编写指南
一、Commit message 的作用 格式化的Commit message，有几个好处。 (1)提供更多的历史信息，方便快速浏览。 比如，下面的命令显示上次发布后的变动，每个commit占据一行。你只看行首，就知道某次 commit 的目的。 $ git log HEAD –pretty=format:%s ...
2018-05-18 09:51:05
439
原创 git常用操作
一、创建版本库git initgit addgit commit -m “注释”git statusgit diff二、版本回退git loggit log -pretty=onelinegit reset --hard 版本号git reflog三、工作区和暂存区工作区： 在电脑上能看到的目录，比如目录下testgit里的文件(.git隐藏目录版本库除外)。或者以后需要再新建的目录文件等都属于工...
2018-05-18 09:43:19
72
原创 对常用HTTP状态码的理解
2开头 （请求成功）表示成功处理了请求的状态代码。200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 201 （已创建） 请求成功并且服务器创建了新的资源。 202 （已接受） 服务器已接受请求，但尚未处理。 203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。 204 （无内容） 服务器成功处理了请求，但没有返...
2018-05-16 16:05:31
189
原创 对js对象setter、getter的理解
一、简介getter函数，获取object对象的属性值。setter函数，对object对象的属性进行赋值。通常，有两种手段可以对object对象存、取值；1. 在对象初始化时2. 在对象初始化后二、定义属性2.1 在对象初始化时在getter函数前用“get”关键字定义，在setter函数前用“setter”关键字定义；如下：var o = { key: 0, get getKey() { ...
2018-05-15 10:43:06
2979
原创 XSS跨站脚本攻击
一、简介 跨站脚本攻击（cross site scripting），web应用最主流攻击方法；为了避免和层叠样式表（cascading style sheet）重名而简写成XSS。1.1 成因 系统太过于信任用户输入，而没有对其提交的数据进行转译处理或过滤，使得提交的数据中存在可执行代码并嵌入到web页面中。1.2 危害1. 盗取用户账号2.控制敏感数据3.非法转账4.强制发送...
2018-05-14 18:05:28
270
转载 对js原型对象的理解
一、普通对象和函数对象在javascript中，分为普通对象和函数对象。 总结，凡是通过new Function()创建的对象都是函数对象，其他的都是普通对象。二、构造函数 上面的例子中person1和person2都是Person的实例。这两个实例都有一个constructor（构造函数）属性，该属性（是一个指针）指向Person。即：三、原型对象在javascript中，每当定义一个对象时，对...
2018-05-13 18:09:48
2537
原创 对RESTFUL接口的理解
1.什么是restREST是英文representational state transfer(表象性状态转变)或者表述性状态转移;Rest是web服务的一种架构风格;它是一种设计风格 2. Rest架构的主要原则 网络上的所有事物都被抽象为资源 每个资源都有一个唯一的资源标识符 同一个资源具有多种表现形式(xml,json等) 对资源的各种操作不会改变资源标识符 所有的操作都是无状态的 符合RE...
2018-05-13 12:40:09
365
原创 history辅助下的SPA路由实现
上篇文章简单介绍了html5的history api，这篇将就进入实战环节。看看在history api的辅助下，目前流行的前端SPA框架路由是怎么实现的。1.什么是SPA 首先，什么事spa呢？一句话概括：spa就是单页面应用，即：single page application。通过看源码就可以发现，整个网站就只有一个html文件。 那么，spa有什么优势...
2018-04-25 10:08:18
797
转载 浏览器本地存储策略
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。session...
2018-04-24 14:01:22
788
转载 window.history跳转的实质
1、简介window.history是用来保存用户在一个会话期间的网站访问记录，并提供相应的方法进行追溯。其对应的成员如下：方法：back()、forward()、go(num)、pushState(stateData, title, url)、replaceState(stateData, title, url)属性：length、state事件：window.onpopstate以上红色标注的...
2018-04-24 11:24:55
1388
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人