qq_42964711的博客

1. 核心文件react.js 核心文件react-dom.js 渲染页面DOM 当前文件必须1依赖react文件babel.js 把ES6转化为ES5 把JSX语法转化为Javascriptnative app文件2.什么是JXS什么是JXS定义：一个对象，很像html，但是不是。这个东西的属性不能增加和修改。（约等于object.freeze）JXS代码会被运行或者打包阶段被编译、生成浏览器可以识别的代码。为什么使用JXS简化了语法、提高了开发效率。一

1.前言以前自己做项目的时候，登录设计比较简单，并且没考虑太多东西。而公司内部登录都是采用单点登录的。我自己的项目登录方法1.cookie和session客户端输入账号密码后向服务端发起请求。服务端验证通过后，由于http无状态，所以服务端要记录此次请求。创建一个sessionID存到cookie中（通过set-cookie），发送给客户端。客户端再次发送请求时携带cookie，并通过cookie中的sessionID在服务端验证。缺点：存在cookie中，可能被别人盗取，冒充

###今日目标1.能够了解模块化的相关规范2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌握Element-UI的使用###1.模块化的分类####A.浏览器端的模块化1).AMD(Asynchronous Module Definition,异步模块定义)代表产品为：Require.js2).CMD(Common Module Definition,通用模块定义)代表产品为：Sea.js####B.服务器端的模块化服务器端的模块化规范是使用Comm

###今日目标1.完成项目优化2.完成项目上线###1.项目优化实现步骤：A.生成打包报告，根据报告优化项目B.第三方库启用CDNC.Element-UI组件按需加载D.路由懒加载E.首页内容定制2.添加进度条给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress打开main.js，编写如下代码//导入进度条插件import NProgress from 'nprogress'//导入进度条样式import 'nprogress/nprogress.css'

1.Vuex概述Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。比如孙子给父亲传值。要经过很多儿子(层），用vuex可以大范围传值，维护一个大的共享变量store。可以直接用全局变量store，其他组件直接使用store就行。适合频繁的大范围的父子之间通信、传递消息使用Vuex管理数据的好处：能够在vuex中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据是响应式的，当数据发生改变时，页

1.最大缩放倍数和最小缩放倍数 <meta name="viewport" content="width=device-width, initial-scale=1.0">flex:1 假如5个小li，则5个li各站五分之一flex：1Flex: 1 和 flex:0 flex为0的占0份，flex为1的自适应，占剩下的全部。flex：1flex：0设置上下对齐思路：(图片和景点颜色)将主轴换为y轴把侧轴设为居中对齐。fle.

JSONP和CORS跨域的基本概念浏览器为了一定的安全因素，增加了同源策略。有违同源策略的操作都是被禁止的，这个时候就会发生我们所说的跨域。但其实浏览器加载的资源很多都是跨域的，只是有些资源的加载浏览器是允许的。图片（img）、CSS、Script等资源是不受同源策略限制的。-我们所说的跨域主要说的是ajax请求无法完成。跨域解决方案JSONPJSONP的优点就是因为他够老，能兼容各种浏览器，无兼容问题。他发送的不是ajax请求，而是利用了script标签加载机制。JSON

http（应用层协议）http1.0最大的问题，传送一次资源建立一次http连接。三次握手和四次挥手带来的性能消耗。HTTP1.1：长连接，一次http请求，发送多次http资源。HTTP2.0：解决了连接的1对1，一个连接可以有多个请求。局限性：只能由客户端联系服务端，客户端不联系服务端，服务端就不会主动给客户端发送。webscocket（html5）完成一次握手，建立持久连接。进行双向传输。解决问题：服务端有消息可以主动发送给客户端。websocket和http都是应用层协议。和

1.回流和重绘？回流：渲染树中元素的外观尺寸，外观，隐藏变化时，重绘。重绘：渲染树中颜色发生变化，不影响布局，产生重绘。回流一定会重绘，重绘不一定会回流。如果最小化重绘和回流：对DOM操作进行复杂的操作时，可以先隐藏（display：none），操作完成后在显示。不用table布局，一个变化，全会回流。避免使用css表达式，每一次使用都会重新布局。利用className可以批量修改样式。boder一次性写完。浏览器解析过程解析HTML构建DOM树，并行请求CSS/图.

浏览器的缓存浏览器缓存机制浏览器缓存机制指的是能够在一定时间内保存web资源的副本。在有效事件内，如果再次发起相同请求，会直接从缓存中获取数据。有效缓解了服务端压力以及加快了性能。优点：缓解服务器的压力。缓存机制种类强缓存定义：直接从缓存中获取资源，不用向服务端发起请求。方法：设置http头为expries（http1.0）和cache-control（http1.1）来设置。expries（服务端）：它通过相对时间计算。表示缓存到几点。（1）相对最后访问时间（2）相对修改

防抖：一段时间内只执行一次，如果有再次触发，重新计算时间（技能读条） <script> var timer = t; document.getElementById('lkq').onclick = function(){ clearTimeout(timer); timer = setTimeout(function(){ console.log('防抖'); },300)

浏览器是多线程的（多进程）每创建了一个Tab页。就相当于一个独立的浏览器进程。(浏览器的优化，一些进程被合并了）浏览器能运行：是因为系统给它的进程分配了资源（cpu和内存）浏览器有哪些进程浏览器主控进程（负责协调）第三方插件进程（使用插件时使用）GPU进程浏览器(3D绘制)渲染进程（负责协调、脚本执行、事件处理）为什么不是进程?一个崩溃影响整个进程。4.最主要的是渲染进程：它是多线程的。GUI渲染线程：负责渲染解析html树，css树，构建dom树和渲染树。布

主页内容除了登录接口，必须有服务端授权才能请求数据。使用授权的API，必须在请求头中使用Autorization字段提供token令牌。通过axios请求拦截器添加token，保证拥有获取数据的权限。请求函数，到达服务器之前调用函数，给请求头添加token//请求函数，到达服务器之前调用函数，给请求头添加tokenaxios.interceptors.request.use(config => { // console.log(config) NProgress.sta

登录不跨域：cookie和session记录状态跨域：使用token使用跨域状态。token客户端发送用户名和密码进行登录服务器验证通过之后，生成该用户token并返回客户端存储该token。后续都携带该token发送请求服务器验证token是否通过。存在证明已存在，客户端请求时可以发送数据。数据验证用ui来验证。<el-form-item prop="username">//================== // 这是表单的验证规则对

typeof和instanceoftypeof判断是否为function、number、boolean、string、undefined、objectinstanceof：判断是否为构造函数实例。即运算符用于判断构造函数的原型对象是否在对象原型链上的某个位置。继承方式ES6使用extends继承，并用super调用父亲函数ES6之前：构造函数加原型对象模拟实现继承，称为组合继承father.call(this,name,age)//改变指向var baba=new father.

方法一：定位走一半，再回来一半 <style> .parent { width: 200px; height: 200px; position: relative; background-color: pink; } .child { width: 50px; height: 50px; position: absolute;

1.函数的定义和调用函数的定义方式函数声明方式 function 关键字 (命名函数) function fn(){}函数表达式(匿名函数) var fn = function(){}new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function 里面参数都必

对象的三种创建方式字面量方式var obj = {};new关键字var obj = new Object();构造函数方式(ES6之前大量生成对象)function Person(name,age){ this.name = name; this.age = age;}var obj = new Person('zs',12);1. 静态成员和实例成员实例成员实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sin.

创建对象//以下代码是对对象的复习//字面量创建对象var ldh = { name: '刘德华', age: 18}console.log(ldh);//构造函数创建对象 function Star(name, age) { this.name = name; this.age = age; }var ldh = new Star('刘德华', 18)//实例化对象console.log(ldh); 创建类//步骤1 使用class关键.

Tab切换 - 点击之后更改索引：v-on:click='change(index)颜色变化 v-bind:class='currentIndex==index?"active":""'，active是css里的类。图片显示：v-bind:class=‘currentIndex==index?“current”:""’，和当前索引相等的设置为block属性。<!DOCTYPE html><html lang="en"><head> <meta.