Lirui Blog

一面代码,一面艺术

Array 与 类Array

排排坐,吃果果,你一个,我一个

Array 是 js 的一个很重要也最常见的数据结构,但往往是经常在眼前的东西才会被忽视掉一些不为人知的细节,让我来跟你说说一些array中的神奇之处. length属性,该属性是array的内建属性,表示包含的列表元素的个数 let a = [1,2,3,4] console.log(a.length) // 4 a.length = 1 // 相当于a = a.slice(0,1)...

RegExp

人海茫茫,找到合适的那一个岂止简单?

前言 使用正则,可以少写很多的判断,使代码更加的优雅,可以从字符串当中拿出任何你需要的字符,然后进行加工,得到你想要的任何结果,听起来是不是很棒? 然而正则的表达式看起来不是那么的浅显易懂,往往通用的东西都会更加的抽象,只有抽象出来,才能普适. 正文 从创建说起 两种创建方式: new RegExp / /, (推荐,除非是需要动态创建) const dynamicReg...

异步与Promise

我承诺,无论生老病死都将与你不离不弃

Promise是ES6中一个很重要的异步语法.可以很优雅的解决异步,回调等问题. 首先来引入生成器 generator 看一个同步的例子:从server端获取json数据 try{ // 获取整个项目 let project = syncGetJSON('lorry.com'); // 获取项目中的某一个任务 let mission = syncGetJSON(proj...

神奇的SVG

XML的重器

SVG (Scalable Vector Graphics) 是基于XML标记语法去描述二维矢量的标签 Namespaces 对于XML来说,SVG是在一个命名空间里的,所以理解命名空间的概念和如何使用十分重要. 比如,XHTML和SVG都有一个<title>属性,user agent怎么区分两者呢? XML content会通过声明命名空间(namespace decl...

json-server自构api

授之于鱼不如授之以渔

在进行前端开发时会需要后端的配合,比如给我们一些api,获取返回类型.如果需要等到后端把接口写好,服务架起来是需要时间的,这段时间里我们就会阻塞,当然可以先采用模拟数据从本地取,但有没有更好的办法来模拟成与线上环境一模一样的呢? 上帝说要有光,于是就有了光. json-server 简介 官方说仅仅需要3分钟,便可搭建一个json服务器.现在开始计时. 安装 jso...

React工具箱

工欲善其事,必先利其器

有一段时间没有更新博客了,之前的项目赶时间上线,所以加班很忙,在项目中使用了一段时间的react之后对其有了更深入的认识,现在就写一下写react都会用到哪些东西.有的是必备,有的是可以节省工作效率的东西. 1 node node不用说,我们需要使用很多npm的模块,可以少造很多的轮子,也适合项目依赖的管理,结合ES6的语法,可以极大的免去我们管理依赖的烦恼. 最重要的就是packag...

HTTPS

强迫症的我如何实现博客的小绿标

起因 虽然我的博客里没有任何地方会请求到访者输入任何敏感信息,但是每次看到网址旁边有一个感叹号就不爽, 而且因为是非安全网站,无法使用google的Service Worker来使服务离线化. 谷歌解决办法,土豪版的过滤掉之后大部分都采用的CloudFlare. A Growing Global Network Built for Scale 没想到还能有CDN的功效,不过没有国内...

WebSocket

双工通信

现有的HTTP 1.1 连接都是单向连接,即服务器无法主动的向客户端发送信息,必须等待客户端的请求.那么如何使用长连接呢?如果用户需要即时刷新信息应该怎么做呢? 1. 轮询(polling) 客户端通过不停的请求,来获取信息.此时不管服务器有没有消息都会请求.利用setInterval和setTimeout来设置请求频率 setInterval 客户端代码 setInterval(func...

jQuery

之:nth伪类选择器

说在前面 在jQuery中有不少的伪类选择器,给了我们在选取元素时很大的帮助,可以减少类和id的定义.下面时对:nth选择器的总结和分析. 来贴一段代码 <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/jquery/1.1...

jQuery

之:插入方式

jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别 使用方法都很类似,但是呈现的结果有所不同.在不同的场景下有选择性的使用才能达到我们预期的效果. 先给一段代码,用于演示不同的插入有什么不同的结果 <!DOCTYPE html> <html la...