头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

正则表达式详解

2019-10-24
#js

一.为什么要使用正则表达式呢?

通过使用正则表达式,可以:

  1. 测试字符串内的模式。
    例如,可以测试输入字符串,以查看字符串内是否出现电话号码模式或信用卡号码模式。这称为数据验证。

  2. 替换文本。
    可以使用正则表达式来识别文档中的特定文本,完全删除该文本或者用其他文本替换它。

  3. 基于模式匹配从字符串中提取子字符串。
    可以查找文档内或输入域内特定的文本。

正则表达式(regular expression) 描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

例如,创建一个正则表达式:

let re = /ab+c/
// 或者
let re = new RegExp("ab+c", 'g')//ab+c/g
/* 
g 是全局搜索; 
i 不区分大小写;
m 多行搜索; 
s 允许 . 匹配换行符; 
u 使用unicode码的模式进行匹配; 
y 执行“粘性”搜索,匹配从目标字符串的当前位置开始,可以使用y标志。*/

EventLoop详解

2019-09-20
#js

EventLoop详解

什么是进程与线程?

相信大家经常会听到 JS 是单线程执行的,但是你是否疑惑过什么是线程?
讲到线程,那么肯定也得说一下进程。本质上来说,两个名词都是 CPU 工作时间片的一个描述。

  • 进程描述了 CPU 在运行指令及加载和保存上下文所需的时间,放在应用上来说就代表了一个程序。
  • 线程是进程中的更小单位,描述了执行一段指令所需的时间。

把这些概念拿到浏览器中来说,当你打开一个 Tab 页时,其实就是创建了一个进程,一个进程中可以有多个线程,比如渲染线程、JS 引擎线程、HTTP 请求线程等等。当你发起一个请求时,其实就是创建了一个线程,当请求结束后,该线程可能就会被销毁。

webpack基本原理

2019-09-18

Webpack引入原因

1.在网页中会引用哪些常见的静态资源?

  • JS
    .js .jsx .coffee .ts(TypeScript 类 C# 语言)
  • CSS
    .css .less .sass .scss
  • Images
    .jpg .png .gif .bmp .svg
  • 字体文件(Fonts)
    .svg .ttf .eot .woff .woff2
  • 模板文件
    .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】

2.网页中引入的静态资源多了以后有什么问题???

  • 网页加载速度慢, 因为 我们要发起很多的二次请求;
  • 要处理错综复杂的依赖关系(比如bootstrap依赖于jQuery)

3.如何解决上述两个问题

  • 合并、压缩、精灵图、图片的Base64编码
  • 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系;

webpack是一个js打包工具,不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制,在庞大的社区支持下各种场景基本它都可找到解决方案。

js实现继承

2019-09-06
#js

实现两个类 A 和 B, 且B类继承自A类,B类的实例可以调用A类的方法

1. 借用构造函数继承:

用.call()和.apply()将父类构造函数引入子类函数;
call() 方法:B.call(A, args1,args2);即A对象调用B对象的方法;
apply() 方法:用作 this 的对象和要传递给函数的参数的数组 B.apply(A, arguments);即A对象应用B对象的方法

function A(propertyA){
    this.propertyA=propertyA;
    this.fn1 = function(){

    };
}
function B(propertyB){
    A.call(this,args1,args2);//A.apply(this,[])
    this.propertyB = propertyB;
}
var b1 = new B("大毛");  
b.fn1();

CSS经典布局——圣杯布局和双飞翼布局

2019-09-06

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局一直是前端面试的高频考点,圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局,它的起源不是源于对页面的形象表达。在西方,圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。

圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样:

  • 圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,
  • 双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。

七种实现左侧固定,右侧自适应两栏布局的方法

2019-09-06

总结一下左边固定,右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。
常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是,利用CSS中的新型布局flex layout与grid layout。

首先创建基本的HTML布局和最基本的样式。

<div class="wrapper" id="wrapper">
  <div class="left">
    左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
  </div>
  <div class="right">
    这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
    基本的样式是,两个div相距20px, 左侧div宽 120px
  </div>
</div>

跨域常用解决方案

2019-08-26

同源与同源策略

我们知道,同源指的是协议、域名、端口号全部相同。同源策略(Same Origin Policy)是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能都可能会受到影响。浏览器引入同源策略主要是为了防止XSS,CSRF攻击。
Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略是处于对用户安全的考量的,如果缺少了同源的限制,那又怎么能够确定别人的网站始终对你是友好的呢。

针对非同源的情况制定了一些限制条件:

  1. 无法读取不同源的cookie、LocalStorage、indexDB。
  2. 无法获得不同源的DOM。
  3. 不能向不同源的服务器发送Ajax请求。  

Image1.png
在浏览器中,script、img、iframe、link等标签都可以跨域加载资源,而不受同源策略的限制。事实上,在大多数情境下,我们经常是需要借用非同源来提供数据的,所以这就要用到跨域方面的技术了。

js如何判断数组是Array类型

2019-08-23
#js

在说明如何判断一个对象为数组类型前,我们先巩固下js的数据类型,
js一共有六大数据类型:number、string、object、Boolean、null、undefined。

var str="string";
console.log(typeof str); //string
var num=1;
console.log(typeof num); //number
var bn=false;
console.log(typeof bn); //boolean
var a;
console.log(typeof a); //undfined
var obj = null;
console.log(typeof obj); //object
var doc = document;
console.log(typeof doc);//object
var arr = [];
console.log(arr); //object
var fn = function(){};
console.log(typeof fn); //function  

除了前四个类型外,null、对象、数组返回的都是object类型;对于函数类型返回的则是function,再比如typeof(Date),typeof(eval)等。

接下来进入正题,js判断数组类型的方法。

js字符串方法总结

2019-08-19
#js

ES5

String.fromCharCode()

该方法的参数是一系列Unicode码点,返回对应的字符串

charAt()

该方法返回指定位置的字符,参数是从0开始编号的位置

str.charAt(index)  

index 为必须参数,类型为number(0到str.length-1之间,否则该方法返回 空串)另外:str.charAt()即不带参数和str.charAt(NaN)均返回字符串的第一个字符

js数组操作

2019-08-19
  • 传统的js数组方法: concat(),push(),pop(),shift(),unshift(),splice(),slice(),join(),sort(),reverse();
  • ES5新增数组方法: indexOf(),lastIndexOf(),map(),filter(),forEach(),some(),every(),reduce(),reduceRight();

Array.map()

此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组

let arr = [1, 2, 3, 4, 5]
    let newArr = arr.map(x => x*2)
    //arr= [1, 2, 3, 4, 5]   原数组保持不变
    //newArr = [2, 4, 6, 8, 10] 返回新数组

Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数,没有返回值,直接改变原数组,注意和map方法区分

let arr = [1, 2, 3, 4, 5]
   num.forEach(x => x*2)
   // arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分
Lililich's Blog