wytraining

原创 react

一：为什么要学 react？1. 原生js的弊端原生js操作DOM繁琐、效率低（DOM-API 操作 UI）使用js直接操作DOM，浏览器会进行大量的重回重排原生js没有组件化编码方案，代码复用率低2. react的特点采用组件化模式、声明式编码，提高开发效率及组件复用率在 React Native 中可以使用 React 语法进行移动端开发使用虚拟DOM + 优秀的Diff算法，尽量减少与真实DOM的交互二：虚拟DOM的两种创建方式（jsx / js）1.使用 jsx使用 j

原创 一：Vue3.0的优化

一：编译优化vue2.xvue2.x 的数据更新并触发重新渲染的粒度是组件级的，虽然 vue 能保证触发更新的组件的最小化，但仍需要遍历该组件的整个 vnode 树（即使只有一个动态节点），所以很多diff和遍历其实是不需要的，这就导致 vnode 的性能跟模板大小正相关，跟动态节点的数量无关。 （当组件中只有少量动态节点时，这些遍历都是性能的浪费）vue3.x通过编译阶段对静态模板的分析，编译生成了 Block tree。 Block tree 是一个将模板基于动态节点指令切割的嵌套区块，每个区块

原创 Vue3.x——配置项目

p21（2021.4.18 周日1）1.在vue3.x中安装tsnpm install -g @vue/clivue create vue3-ts-demovue add typescriptnpm install -D sass-loader node-sass2.defineComponent要让typescript正确推断Vue组件选项中的类型，需要使用 defineComponent 全局定义组件<script lang="ts">import { defin

原创 Vue3.x——新特性

p18（2021.4.14 周三）1.Composition API简介Composition API 也叫组合式API，是vue3.x的新特性。没有Composition API之前vue相关业务的代码需要配置到option的特定区域（data、methods、computed……），中心型项目是没有问题的，但是在大型项目中会导致后期的维护性比较复杂，同时代码的复用性不高。Vue3.x中的Composition API就是为了解决这个问题而生的。2.Composition API提供了

原创 Vue3.x——基础部分

2021.4.8Vue是一套用于构建用户界面的渐进式框架，目前最新版本是Vue3.x。1.通过vue-cli创建项目1.安装yarnnpm i -g yarn 2.安装脚手架// 安装脚手架npm install -g @vue/cli// 查看脚手架版本vue -V3.新建项目：通过vue-cli创建项目// 创建vue create demo// 运行yarn serve (npm run serve)2.通过Vite创建项目1.使用npm创建npm ini

原创 Typescript

一：为什么要用tsts具有类型系统，且是js的超集。js能做的，ts能做；js不能做的，ts也能做。js是弱类型并且没有命名空间，导致很难模块化，使得其在大型的协作项目中不是很方便。可以使用泛型来创建可重用的组件。即创建一个参数类型和返回值类型是一样的通用方法。...

原创 知识梳理——CSS

1.画一条0.5px的线采用meta viewport的方式<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />采用border-image的方式采用transform: scale()的方式 .line:after { content:""; position: absolute;

原创 vue单页面的首屏优化

一：缩小webpack打包生成体积1.尽量按需引入，不要在main.ts里全局引入2.webpack-bundle-analyzer可以知道生成的包中哪个依赖占据着空间，哪个库占用的空间最多二：使用cdn使用cdn把一些必要的库在index.html里面引入进去,这样也能加快加载速度。三：动态路由分块加载这种优化，就是将每个组件的js代码独立出来，在使用到这个组件时，才向服务器请求文件，并且请求过一次后就会缓存下来，再次使用到这个组件时，就会使用缓存，不再发送请求。import Vue fro

原创 http常见的状态码

一.2xx200：成功二：3xx301：请求的url已移走，Response中应该包含一个Location URL, 说明资源现在所处的位置（永久移除）302： 客户端会使用Location中给出的URL，重新发送新的HTTP request（与状态码301类似，但这里的移除是临时的）304：说明无需再次传输请求的内容，也就是说可以使用缓存的内容。（这通常是在一些安全的方法（safe），例如GET 或HEAD, 或在请求中附带了头部信息： If-None-Match 或If-Modified-Si

原创 vue中针对7个数组方法的重写

vue通过原型拦截的方式重写了数组的7个方法，首先获取到这个数组的Observer。如果有新的值，就调用observeArray对新的值进行监听，然后调用notify，通知render watcher，执行update// src/core/observer/array.js// 获取数组的原型Array.prototype，上面有我们常用的数组方法const arrayProto = Array.prototype// 创建一个空对象arrayMethods，并将arrayMethods的原型指

原创 跨域的解决方案：nginx

一：解决方案1、 通过jsonp跨域2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域资源共享（CORS）7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域二：使用nginx代理跨域实践中客户端无法直接跟服务端发起请求的时候，我们就需要代理服务。代理可以实现客户端与服务端之间的通信,我们的Ngi

原创 前端视频流的解决方案（RTSP、RTMP、HLS、FLV）

通过浏览器用video.js可以正常播放，但是发现和原视频存在5秒左右的延迟，不符合项目的实时性需求，所以有实时视频的需求不建议用HLS流播放。在开始一个流媒体会话时，客户端会下载一个包含源数据的extended M3U（m3u8）playlist文件，用于寻找可用的媒体流。因为他会将数据分割成多个片段，所以客户端可以很快的实现码率切换，以适应不同的带宽，主要应用于手机端。因其自己的实现方式，需要多次请求，HLS存在延迟的延迟比别的协议会高，不适用于直播，HLS对于网络质量的要求比较高。

原创 vue中的key

一：什么是key二：对key的理解key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速key会用在虚拟DOM算法（diff算法）中，用来辨别新旧节点。不带key的时候会最大限度减少元素的变动，尽可能用相同元素。（就地复用）带key的时候，会基于相同的key来进行排列。（相同的复用）带key还能触发过渡效果，以及触发组件的生命周期三：为什么存在不带key速度更快不带key的省略了销毁和创建dom的开销，只需要替换文本节点就ok了，而带key

原创 Vue.nextTick

一：什么是Vue.nextTick在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 methods: { updateMessage: function () { this.message = '已更新' console.log(this.$el.textContent) // => '未更新' this.$nextTick(function () { console.log(this

原创 从浏览器输入URL到页面呈现经历了什么

1.查看缓存（浏览器缓存，系统缓存，路由器缓存），如果有直接访问2.如果没有，DNS服务器进行域名解析，解析成ip地址3.通过ip地址找到服务器，进行TCP连接，完成三次握手4.浏览器向服务器发送http请求5.服务器返回请求的文件（html）6.浏览器解析渲染页面1. HTML parser --> DOM Tree标记化算法，进行元素状态的标记dom 树构建2. CSS parser --> Style Tree解析 css 代码，生成样式树3. attachmen

原创 this

1.this原文如果要判断一个函数的this绑定，就需要找到这个函数的直接调用位置。然后可以顺序按照下面四条规则来判断this的绑定对象：由new调用：绑定到新创建的对象由call或apply、bind调用：绑定到指定的对象由上下文对象调用：绑定到上下文对象默认：全局对象注意：箭头函数不使用上面的绑定规则，根据外层作用域来决定this，继承外层函数调用的this绑定。2.call、apply、bind原文三者都是用来改变函数的this指向三者的第一个参数都是this指向的对象bin

原创 使用angular-translate实现项目语言的中英文动态转换

1.引入angular-translate.js2.在script/base文件夹下准备cn.json和en.json两个json文件，用来配置中英文键//cn.json{ "你好!": "你好!", "国际化"："国际化"}//en.json{ "你好!": "Hello!", "国际化"："Internationalization"}3.在app.js中注入依赖var app = angular.module('myApp', ['pascalprecht.transl

原创 使用Token请求数据

1.什么是Token?token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。当用户第一次登录后，服务器生成一个token并将此token返回给客户端，以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。简单token的组成：uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token的前几位以哈希算法压缩成的一定长度的十六进制字符串。为防止token泄露）。2.为什么要用Token?Token 完全由应用管理，所

原创 MVVM、响应式、数据的双向绑定

一.实现双向绑定的方法可以实现双向绑定的方法有很多，KnockoutJS基于观察者模式的双向绑定，Ember基于数据模型的双向绑定，Angular基于脏检查的双向绑定，基于数据劫持的双向绑定（常见的基于数据劫持的双向绑定有两种实现：Object.defineProperty和Proxy）二：基于数据劫持实现的双向绑定的特点什么是数据劫持vue.js采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 getter/setter ， 在数

原创 vue的虚拟DOM以及Diff算法

1.什么是虚拟DOM用JS按照DOM结构来实现的树形结构对象2.为什么需要虚拟DOM既然已经有了DOM，为什么还需要额外加一层抽象？1.为了尽可能少的操作DOM，不仅仅是DOM相对较慢，更因为频繁操作DOM会造成浏览器的重绘或者回流，这些都是性能的杀手。因此，我们需要这一层抽象，在patch过程中尽可能的一次性将差异更新到DOM中。2.虚拟DOM最初的目的,就是更好的跨平台,比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtua

原创 css 中 background-size 属性

1.background-size: 100% 100%;(如果只设置一个值，则第二个值会被设置为 “auto”)2.background-size: cover;把背景图像扩展至足够大，使背景图像完全覆盖背景区域(某些部分也许无法显示在背景定位区域中)3.background-size: contain;把图像图像扩展至最大尺寸，使其宽度和高度完全适应内容区域(可能会在定位的区域中留白)...

原创 vue cli3 配置全局sass变量

1.新建variables.scss文件，注册变量2.配置到预加载在vue.config.js中添加你要预加载的全局css变量, 注意import你的文件路径css: { loaderOptions: { sass: { additionalData: '@import "@/styles/variables.scss";' } }}由于 sass-loader 版本不同，loaderOptions 中的 addition

原创 CSS选择器

1.子选择器：>article下所有section（子子孙孙）article section { margin: 5px } 只有紧跟着article的section（紧跟着的子）article > section { border: 1px solid #ccc } 2.同层相邻组合选择器：+只有紧跟着header的p元素（紧跟着的同层）header + p { font-size: 1.1em } 3.同层全体组合选择器：~所有跟在article

原创 JavaScript的事件循环（Event Loop）

一：任务队列所有任务可以分为两种：一种是同步任务，另一种是异步任务。同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。二：JavaScript的运行机制（1）所有同步任务都在主线程上执行，形成一个执行栈。（2）主线程之外，还存在一个“任务队列”。只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。（3）一旦

原创 APP

1.安装cordovanpm install -g cordova2.创建项目cordova create testdemo com.yourname.testdemo TestDemo3.进入项目cd testdemo4.添加平台cordova platform add android5.调试运行cordova run android6.打包生成wwwcordova build android7.在MyApp中写vue项目8.修改文件：修改Vue项目config/i

原创 ES6

1.let和const1.let1.1不存在变量提升，需要先声明再使用1.2暂时性死区，只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。1.3不允许重复声明2.const2.1声明一个只读的常量。一旦声明，常量的值就不能改变。2.2const实际上保证的，并不是变量的值不得改动，而是变量指向的那个‘内存地址’所保存的数据不得改动。...

原创 深浅拷贝

1.浅拷贝赋值运算符 “ = ” 实现的是浅拷贝，只拷贝对象的引用，而未复制真正的值。（两个值之间会相互影响）2.深拷贝深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。（只要进行了深拷贝，它们谁也不会影响谁）2.1递归：利用递归来实现每一层都重新创建对象并赋值deepClone(source: any){ const targetObj = source.constructor === Array ? [] : {}; // 创建对象：并判断复制的目标是

原创 flex布局的使用

原创 3D柱状饼图：Highcharts

想要实现3D柱状饼图，使用了Highcharts，效果图如下：代码如下：<!doctype html><html lang="en"> <head> <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script> <script src="https://code.highcharts.com.cn/

原创 iview 文件的上传和下载

一：上传文件1.html//action: 上传的地址，必填//data: 上传时附带的额外参数//on-success: 文件上传成功时的钩子，返回字段为 response, file, fileList<Upload :action= "env + '/Manage/upload'" :data="{companyId: row.ID}" :on-success="success"> <

原创 vue中$router.push打开新窗口

//点击排口rowClick(params: any) { let url = this.$router.resolve({ path: '/main/portInfo', query: { sbid : params.sbId } }); window.open(url.href, '_blank');}

原创 element表格

element表格1.html： 用v-for循环表头<el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-for="item in tableColums" :prop="item.prop" :label="item.label" wid

原创 echarts的基本配置

echarts的配置

原创 promise

PromisetestPromise() { return new Promise(function (resolve, reject) { //做一些异步操作（可以是一个post请求） setTimeout(function () { console.log('执行！'); console.log('1')...

原创 js中的定时器

每隔五秒打印 0-10var index = 0;setInterval(function () { //如果大于10， 则重新赋值为0 if (index > 10) { index = 0 } console.log(index); index++;}, 5000);每隔五秒 调用一次后台接口window....

原创 iview表格设置表头： 使用 renderHeader在表头渲染按钮

1.表头显示的是一个按钮，可以使用 renderHeader 渲染：{ renderHeader: (h, params) => { return h('span', [ h('Button', { props: { type: 'success', size: 'small' } }, '按钮1'), h('But

原创 Avoid mutating a prop directly since the value will be overwritten whenever the parent component……

报错截图：报错原因：官方解释： 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。即在本项目中，子组件直接对 父组件的 current 进行了操作解决办法：定义一个本地的 data 属性并将这个 prop 用作其初始...

原创 数组的常用方法

1.尾部push：推入var arr = [5,45,2,1];arr.push(10,20);console.log(arr); // [5, 45, 2, 1, 10,20]pop：删除数组的最后一个元素，并返回最后一个元素的值var arr = [5,45,2,1];arr.pop();console.log(arr); // [5, 45, 2]2.头部unsh...

原创 前端数组去重

利用 indexOfvar arr = [1,2,3,4,2,3,4,2,1,5];var arrNew = []; //定义一个新的空数组for (var i = 0; i < arr.length; i++) { if (arrNew.indexOf(arr[i]) === -1) { arrNew .push(arr[i]); }}...

原创 前端使用 for in 进行对象的遍历

对象：var test = { name : "zs", age: "18"}1.前端遍历某个对象：使用for in1.遍历属性名for(key in test) { console.log(key);}2.遍历属性值for (key in test) { console.log(test[key]);}注：遍历时，只能通过 test[value] 来...