SF
前端知识体系梳理
前端知识体系梳理
注册登录
关注博客
注册登录
主页
关于
RSS
【小试牛刀】手写一个form表单,实现校验功能
stefanieliang
2019-11-05
阅读 3 分钟
2.8k
参照element ui 表单组件,实现一个简易的登录表单校验。App.vue {代码...} Input.vue {代码...} FormItem.vue {代码...} Form.vue {代码...}
js数组
stefanieliang
2019-05-15
阅读 2 分钟
1.2k
含义 向数组的末尾添加一个或更多元素,并返回新的长度 删除并返回数组的最后一个元素 删除并返回数组的第一个元素 向数组的开头添加一个或更多元素,并返回新的长度 删除元素,并向数组添加新元素 对数组的元素进行排序 颠倒数组中元素的顺序items前 "items: [ { message: 'Foo' }, { message: 'Bar' }]" "items: [ { m...
【js基础】之页面加载、性能优化
stefanieliang
2018-09-10
阅读 1 分钟
2.6k
1.页面加载 加载一个资源的过程 浏览器根据 DNS 服务器得到域名的IP地址 向这个 IP 的机器发送 http 请求 服务器收到、处理并返回 http 请求 浏览器得到返回的内容 浏览器渲染页面的过程 根据 HTML 结构生成 DOM Tree 根据 CSS 生成 CSSOM 将 DOM 和 CSSOM 整合成 RenderTree 根据 RenderTree 开始渲染和展示 遇到 <s...
【js基础】之模块化、AMD、CommonJS
stefanieliang
2018-09-10
阅读 2 分钟
1.2k
1.AMD require.js 全局 define 函数 全局 require 函数 依赖的JS会自动、异步加载 {代码...} 2.CommonJS {代码...} 3.AMD 和 CommonJS 的使用场景 需要异步加载JS,使用AMD 使用了 npm 之后建议使用 CommonJS
【js基础】之BOM操作
stefanieliang
2018-09-07
阅读 2 分钟
1.8k
1.知识点 navigator (navigator.userAgent) screen (screen.width / screen.heigght) location history (history.back() / history.forward()) {代码...} 2.检验浏览器的类型 navigator.userAgent {代码...} 3.解析url 手动解析 {代码...} 使用正则 {代码...}
【js基础】之异步和单线程
stefanieliang
2018-09-07
阅读 1 分钟
1.3k
1.异步 前端使用异步的场景: 定时任务:setTimeout、setInterval; 网络请求:ajax请求、动态<img>加载; 事件绑定 {代码...} {代码...} {代码...} 2.同步异步的区别 同步异步的区别: 同步会阻塞代码执行,异步不会; alert是同步,setTimeout是异步; {代码...}
【js基础】之作用域和闭包、this
stefanieliang
2018-04-27
阅读 3 分钟
1.6k
1.执行上下文 范围:一段<script>或者一个函数 全局:变量定义、函数声明(一段<script>) 函数:变量定义、函数声明、this、arguments(函数) {代码...} 区分函数声明和函数表达式 函数声明:function fn(){} 函数表达式:var fn = function(){} 2.this this要在执行时才能确认值,定义时无法确认。 {代码...}...
【js基础】之this,call,apply,bind
stefanieliang
2018-04-27
阅读 1 分钟
1.5k
1.this this的使用场景: 1.作为构造函数执行; 2.作为对象属性执行; 3.作为普通函数执行; 4.call apply bind。 this要在执行时才能确认值,定义时无法确认 {代码...} 2.call,apply 改变上下文this指向。 fn.call({this指向},参数1,参数2) fn.apply({this指向},[参数1,参数2]) {代码...} 3.bind 在函数表达式后边改变...
【js基础】之变量类型和计算
stefanieliang
2018-04-25
阅读 2 分钟
1.6k
1.数据类型 ECMAScript定义了6种数据类型,包括: 基本数据类型:Undefined、Null、Boolean、Number、String; 复杂数据类型:Object; 2.typeof操作符 typeof操作符可区分值类型,对于引用数据类型无法区分(只能区分出引用类型中的function)。 'undefined',如果这个值未定义; 'boolean',如果这个值是布尔值; 'string'...
【知识梳理】4.5MVVM框架类
stefanieliang
2018-04-04
阅读 2 分钟
1.6k
1.MVVM框架 Vue.js React.js Angular.js 参考资料:教你认清MVC,MVP和MVVM三种模式 2.双向绑定的原理 Object.defineProperty()作用:能监听data的变化,当有变化时会调用回调函数,回调函数中写好了view和data的关系,所以后续只需修改data即可。Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修...
【知识梳理】3.7面向对象
stefanieliang
2018-04-02
阅读 3 分钟
1.6k
1.类与实例 类的声明 {代码...} 生成实例 {代码...} 2.类与继承 继承的几种方式 1.借助构造函数实现继承 实现了部分继承,只能继承父类构造函数体内的属性;父类的原型对象上的方法不能继承。 {代码...} 2.借助原型链实现继承 弥补了构造函数继承的不足,但是继承后原型链上的原型对象是共用的,改变一个其余的也都跟着...
【知识梳理】4.4错误监控
stefanieliang
2018-04-02
阅读 1 分钟
2.6k
1.前端错误的分类 1.即时运行错误(代码错误); 2.资源加载错误(图片、js、css)。 2.错误的捕获方式 即时运行错误的捕获方式: 1)try...catch; 2)window.onerror(DOM0)/addEventListener()(DOM2)。 资源加载错误的捕获方式: 1)object.onerror;图片、scrip标签都有onerror事件;资源加载错误 不会冒泡 但是...
【知识梳理】4.3页面性能
stefanieliang
2018-04-02
阅读 2 分钟
1.4k
1.一道面试题 题目:提升页面性能的方法有哪些? 1.资源压缩合并,减少HTTP请求 2.非核心代码异步加载--->异步加载的方式--->异步加载的区别 3.利用浏览器缓存--->缓存的分类--->缓存的原理* 4.使用CDN(特别是页面第一次打开的时候,缓存不起作用,此时使用CDN效果明显) 5.预解析DNS(页面中涉及多个域名...
【知识梳理】4.2JS运行机制
stefanieliang
2018-04-02
阅读 3 分钟
1.6k
1.对比同步和异步 使用异步的场景: 定时任务:setTimeout、setInterval 网络请求:ajax请求、动态<img>加载 事件绑定 {代码...} 2.同步任务和异步任务的优先顺序 JS是单线程的,即在同一时间只能做一件事。从上到下执行。 任务队列:分同步任务、异步任务(setTimeout()、setInterval(),异步任务要挂起,同步任...
【知识梳理】4.1渲染机制
stefanieliang
2018-03-30
阅读 2 分钟
1.7k
DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式。
【知识梳理】3.10算法类
stefanieliang
2018-03-30
阅读 3 分钟
1.8k
1.排序* 快速排序,选择排序,希尔排序,冒泡排序 快速排序: 1.在未排序序列中找到最小(大)元素,存放到排序序列的起始位置 2.从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。 3.重复第二步,直到所有元素均排序完毕。 {代码...} 选择排序: 1.在未排序序列中找到最小(大)元素,存放到排序...
【知识梳理】3.9安全类
stefanieliang
2018-03-30
阅读 1 分钟
1.8k
1.前端安全的分类 CSRF XSS 2.CSRF 基本概念和缩写:跨站请求伪造,英文名Cross-site request forgery,缩写CSRF。攻击原理: 不可缺少的两大因素:1.用户一定在注册网站登陆过;2.网站的某一接口有漏洞(引诱链接会自动携带cookie,不会自动携带Token)。 防御措施: Token验证(访问网站后,服务器将Token存储在本地,...
【知识梳理】3.8通信类
stefanieliang
2018-03-28
阅读 6 分钟
1.6k
1.同源策略及限制 源:协议(http://)、域名(www.example.com)、端口(80) 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 目的:这是一个用于隔离潜在恶意文件的关键的安全机制。 限制范围: Cookie、LocalStorage 和 IndexDB 无法读取; DOM 无法获得; AJAX 请求不能发送。 参考文档:浏...
【知识梳理】3.6原型链
stefanieliang
2018-03-28
阅读 4 分钟
1.6k
原理:ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__ 属性来表示一个对象的原型链。
【知识梳理】3.5HTTP协议类
stefanieliang
2018-03-28
阅读 3 分钟
1.7k
简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。
【知识梳理】3.4数据类型与类型转换
stefanieliang
2018-03-28
阅读 1 分钟
1.3k
1.数据类型 最新的ECMAScrip标准定义了7种数据类型: 原始类型:Undefined,Null,Boolean,Number,String,Symbol(es6中新增); 对象类型:Object; 2.显示类型转换 显示类型转换时需调用Number函数,String函数,Boolean函数三个中的一个。 Number函数 原始类型转换: 1.数值:转换后还是原来的值; 2.字符串:如果可以被...
【知识梳理】3.3DOM事件
stefanieliang
2018-03-27
阅读 6 分钟
1.8k
DOM2:element.addEventListener('click',function(){},false), 第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用(默认);
【知识梳理】3.2CSS盒模型
stefanieliang
2018-03-27
阅读 5 分钟
1.9k
计算宽度、高度的不同,如何计算?标准模型的宽度和高度=content的宽度和高度;IE模型的宽度和高度=content+padding+border的宽度和高度。
【知识梳理】3.1页面布局
stefanieliang
2018-03-27
阅读 6 分钟
2k
题目:假设高度已知,请写出三栏布局,其中左栏、右栏各为300px,中间自适应。 0.基础样式 {代码...} 1.浮动布局 {代码...} 2.绝对布局 {代码...} 3.flexbox布局 {代码...} 4.表格布局 {代码...} 5.网格布局 {代码...} 6.延伸 1.五种方案优缺点? 浮动:脱离文档流,常见问题在于清除浮动,优点是兼容性比较好; 绝对定...