#yyds干货盘点前端小知识点扫盲笔记记录

标签：知识点 console name yyds 视图干货 cookie View log

前言

大家好我是歌谣微信公众号关注前端小歌谣带你进入前端巅峰人才交流群

MVC和MVVM

// 在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化， // 然后通知视图进行自动更新，而当用户操作视图时，VM也能监听到视图的变化，然后通知数据做相应改动， // 这实际上就实现了数据的双向绑定。并且V和VM可以进行通信。 // Model（模型） // 模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。 // View（视图） // 就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。 // ViewModel（视图模型） // 视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。 // 低耦合:View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。 // 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。 // 独立开发: 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。 // MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。 // 这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。 // Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。 // C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。 // 低耦合 // 重用性高 // 生命周期成本低 // 部署快 // 可维护性高 // 有利软件工程化管理

object.Create

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Object.create</title>
</head>
<body>
  <script>
    //利用object.create实现继承
    function father(name){
      var name="geyao"
      this.name = name;
     
    }
    function children(){
        father.call(this)
    }

    children.prototype=Object.create(father.prototype);
    children.prototype.constructor=children

    var geyao=new children()
    console.log(geyao.name,"geyao") //geyao
  </script>
</body>
</html>

argument

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>arguments</title>
	</head>
	<body>
		<script>
            //arguments 是一个对应于传递给函数的参数的类数组对象。
			//这边的arguments[0]等价于fn
			var length = 10
			function fn() {
				console.log(this.length, 'length')
			}
			var obj = {
				length: 5,
				method: function (fn) {
					console.log(arguments[0], 'arguments')
					//      fn(){
					//     console.log(this.length,"length");
					//   } 'arguments'
					arguments[0]()
				},
			}
			obj.method(fn) //1
		</script>
	</body>
</html>

class类继承

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script>
			class Rectangle {
				// constructor
				constructor(height, width) {
					this.height = height
					this.width = width
				}

				// Getter
				get area() {
					return this.calcArea()
				}

				// Method
				calcArea() {
					return this.height * this.width
				}
			}

			const rectangle = new Rectangle(10, 20)
			console.log(rectangle.area)
			// 输出 200

			// 继承
			class Square extends Rectangle {
				constructor(length) {
					super(length, length)

					// 如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
					this.name = 'Square'
				}

				get area() {
					return this.height * this.width
				}
			}

			const square = new Square(10)
			console.log(square.area)
			// 输出 100
		</script>
	</body>
</html>

constructor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>constructor</title>
</head>
<body>
  <script>
    //属性的值是对函数本身的引用

    function father(name){
      this.name = name;
    }
    var gg=new father("father")
    console.log(gg.constructor,"gg")

    //ƒ father(name){
    //  this.name = name;
   // } 'gg'
  //创建自身属性的方法
   function Parent() {};
    function CreatedConstructor() {}

    CreatedConstructor.prototype = Object.create(Parent.prototype);
    //创建一个Parent的对象
    console.log( Object.create(Parent.prototype),"Parent")
    CreatedConstructor.prototype.constructor = CreatedConstructor; // 改变指向到父级
    CreatedConstructor.prototype.create = function create() {
      return new this.constructor();
    }

    new CreatedConstructor().create().create(); 
    //按照父亲级别的属性进行创造
    console.log(new CreatedConstructor().create().create(),"CreatedConstructor")
  </script>
</body>
</html>

cookie,session区别

// cookie 和 session 区别 // cookie数据存放在浏览器中， session数据存放在服务器上 // cookie是不安全的，别人可以分析存放在本地的cookie并进行cookie诈骗，考虑到安全性能，应尽量使用session // session会在一定时间内保存在服务器上。当访问增多时，会比较占用服务器的性能。考虑到服务性能，应尽量使用cookie // 单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie // cookie和session都用来存储用户信息， cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session存储，比如用户的登录信息 // cookie， sessionStorage， localStorage 区别 // HTML5中提出了webStorage的概念， webStorage包括sessionStorage和localStorage，只为了保存数据，不会与服务器进行通信 // cookie, localStorage, sessionStorage都是在客户端保存数据，存储数据的类型：字符串 // webStorage不会随着HTTP header发送到服务器端，所以安全性相对来说比cookie高，不必担心截获 // 生命周期不同（见后文）， localStorage要手动清除， sessionStorage在浏览器关闭后清除 // 生命周期 // cookie：可设置失效时间，否则默认为关闭浏览器后消失 // localStorage：除非被手动清除，否则永久保存 // sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除

diff算法

// 传统diff算法 // 虚拟DOM中的Diff算法 // 传统算法查找两颗树每一个节点的差异 // 会运行n1(dom1的节点数)*n2(dom2的节点数)次方去对比,找到差异的部分再去更新 // snabbdom的diff算法优化 // Snbbdom根据DOM的特点对传统的diff算法做了优化 // DOM操作时候很少会跨级别操作节点 // 只比较同级别的节点 // key的作用 // Diff操作可以更加快速 // Diff操作可以更加准确 // 避免渲染错误 // 不推荐使用索引作为key

eval使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>eval的使用</title>
</head>
<body>
  <script>
    //   eval（) 函数会将传入的字符串当做 JavaScript 代码进行执行。
  var fangfang=eval（new String('2 + 2')) 
  console.log(fangfang,"fangfang") //String { "2 + 2" }
  var fangfangTest=new String('2 + 2')
  console.log(fangfangTest,"fangfangTest") //String { "2 + 2" }
  var geyao=eval（'2 + 2') 
  console.log(geyao,"geyao") //4
  </script>
</body>
</html>

http1.0,2.0,3.0区别

HTTP1.0和HTTP1.1主要区别主要体现在：缓存处理，在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。带宽优化及网络连接的使用，HTTP1.0中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content)这样就方便了开发者自由的选择以便于充分利用带宽和连接。错误通知的管理，在HTTP1.1中新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。Host头处理，在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域，且请求消息中如果没有Host头域会报告一个错误（400 Bad Request）。长连接，HTTP 1.1支持长连接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。HTTP2.0HTTP2.0是HTTP协议自1999年HTTP1.1发布后的首个更新，主要基于SPDY协议。HTTP2.0大幅度的提高了web性能，在HTTP1.1完全语义兼容的基础上，进一步减少了网络的延迟。实现低延迟高吞吐量。对于前端开发者而言，减少了优化工作。主要体现在以下几点特性：头部压缩多路复用二进制分帧请求优先级服务器推送

总结

我是歌谣 这些都是扫盲时候的笔记 微信公众号关注前端小歌谣 学习前端知识

标签：知识点,console,name,yyds,视图,干货,cookie,View,log
From： https://blog.51cto.com/u_14476028/6149529

#yyds干货盘点前端小知识点扫盲笔记记录

前言

MVC和MVVM

object.Create

argument

class类继承

constructor

cookie,session区别

diff算法

eval使用

http1.0,2.0,3.0区别

总结

相关文章

赞助商

阅读排行

#yyds干货盘点 前端小知识点扫盲笔记记录

前言

MVC和MVVM

object.Create

argument

class类继承

constructor

cookie,session区别

diff算法

eval使用

http1.0,2.0,3.0区别

总结

相关文章

赞助商

阅读排行

#yyds干货盘点前端小知识点扫盲笔记记录