git身份验证失败清除密码缓存

git config --system --unset credential.helper

移除npm

npm uninstall cnpm -g

List of Chrome URLs

chrome://about/

播放器

aliplayer (有vue相关组件)
flvjs (B站)

获取位置

$(window).scrollTop() 获取滚动条卷过的位置
$(document).height() 获取整个文档的高度
$("").offset().top 获取指定元素距离文档顶部的距离
window.innerHeight 获取窗口的高度（浏览器窗口的高度）

计算

窗口高度+（整个文档的高度-元素距离文档顶部的高度）
当滚动条卷过的距离>=得出的值时，让对应的元素显示（回到顶部按钮）（当卷过的距离<指定值时，让对应按钮隐藏）

位置获取

获取网页可见区域的宽度：document.body.clientWidth ;
获取网页可见区域的高度：document.body.clientHeight;
获取网页可见区域宽：document.body.offsetWidth; (包括边线的宽度)
获取网页可见区域高：document.body.offsetHeight ;(包括边线的宽度)
获取网页正文全文宽：document.body.scrollWidth ;
获取网页正文全文高：document.body.scrollHeight ;
获取网页被卷去的高：document.body.scrollTop ;
获取网页被卷去的左：document.body.scrollLeft ;
获取网页正文部分上：window.screenTop ;
获取网页正文部分左：window.screenLeft;
获取屏幕分辨率的高：window.screen.height;
获取屏幕分辨率的宽：window.screen.width ;
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

text-overflow:ellipsis 超出截除
弹性盒子 flex布局
实现水平居中
animation translate
闭包
ajax
对象深拷贝
判断两个对象是否相等
性能优化
promise
map set
http https websocket
http常见状态吗
浏览器兼容问题
- 使用meta标签来调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换，现在使用meta标签来强制使用最新的内核渲染页面


什么是NaN？ 他的类型是什么？如何可靠的测试一个值是否等于NaN

NaN属性表示不是数字的值，这个特殊值是由于一个操作数是非数字的或者因为操作的结果是非数字而无法执行的

NaN 类型是数字
NaN 相比任何事情，甚至是本身-false
 
 
闭包

闭包是一个内部函数，他可以访问外部函数的作用域链中的变量，闭包可以访问三个范围内的变量

变量在其自己的范围内
封闭函数范围内的变量
全局变量
 
 
理论上来说，FPS越高，动画会越流畅，目前大多数设备的刷新率为60次/秒，所以通常来讲FPS为60frame/s时动画效果最好，也就是每帧的消耗时间为16.67ms
尽量减少setInterval

setInterval无视代码错误
setInterval无视网络延迟
setInterval不保证执行
setTimeOut替换


Promise

JavaScript中，所有的代码都是单线程执行，导致JavaScript中所有网络操作，浏览器事件，都必须是异步操作。异步操作可以用回调函数实现。
AJAX就是典型的异步操作-但代码不好看，且不利于代码复用
Promise在ES6中被统一规范，由浏览器直接支持
Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰的分离了job1.then(job2).then(job3).catch(handleError); 
避免了回调函数造成的代码冗余，与后期维护的高额成本

AJAX(Asynchromous JavaScript and XML)

AJAX不是JavaScript的规范，意思是用JavaScript执行异步网络请求
由于form表单会在用户提交后，刷新页面-一次HTTP请求对应一个页面->AJAX实现不刷新页面 局部更新数据
AJAX请求是异步执行-通过回调函数获得响应
写AJAX主要依靠XMLHttpRequest对象

    var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

    request.onreadystatechange = function () { // 状态发生变化时，函数被回调
        if (request.readyState === 4) { // 成功完成
            // 判断响应结果:
            if (request.status === 200) {
                // 成功，通过responseText拿到响应的文本:
                return success(request.responseText);
            } else {
                // 失败，根据响应码判断失败原因:
                return fail(request.status);
            }
        } else {
            // HTTP请求还在继续...
        }
    }

    // 发送请求:
    request.open('GET', '/api/categories');
    request.send();



    //执行多个并发请求
    function getUserAccount() {
      return axios.get('/user/12345');
    }

    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }

    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成 不写axios.spread(()=>{})也可以获取到对应数据 ，会将数据集成为数组
      }));

async/await

ES7提出的async函数解决了JavaScript异步操作的回调函数问题
async函数是Generator函数的语法糖，使用关键字async来表示，在函数内部使用await来表示异步
相较于Generator，async函数的改进

内置执行器。Generator函数的执行必须依靠执行器，而async函数自带执行器，调用方式跟普通函数的调用一致
更好的语义。async和await相较于*和yield更加语义化
更广的适用性。co模块约定，yield命令后面只能是Thunk函数或Promise对象。而async函数的await命令后面则可以是Promise或则原始类型的值(Number,string,bookean,但这时等同于同步操作) 
返回值是Promise。async函数返回值是Promise对象，比Generator函数返回的Iterator对象更方便，可以直接使用then()方法进行调用
Promise 的方式虽然解决了 callback hell，但是这种方式充满了 Promise的 then() 方法，如果处理流程复杂的话，整段代码将充满 then。语义化不明显，代码流程不能很好的表示执行流程。
async函数--流程清晰，直观、语义明显。操作异步流程就如同操作同步流程。同时 async 函数自带执行器，执行的时候无需手动加载。
   // 正确的写法
  let a;
  async function correct() {
      try {
          await Promise.reject('error')
      } catch (error) {
          console.log(error);
      }
      a = await 1;
      return a;
  }
  //将可能会出错的代码放入try/catch中执行，当代码中出现错误时，catch会捕捉到错误，不会影响后续代码的正常执行
  correct().then(v => console.log(a)); // 1
 

map-every-some-foreach

every

当内部return false时跳出整个循环（return true；也需要写）
 
forEach没有返回值，只针对每个元素调用func
some 当内部return true时跳出整个循环
map 有返回值，返回一个新的数组，每个元素为调用func的结果。


//every()当内部return false时跳出整个循环
let list = [1, 2, 3, 4, 5];
list.every((value, index) => {
    if(value > 3){
        console.log(value)// 4
        return false;

    }else{
        console.log(value)// 1 2 3
        return true;
    }

});
list.every((value, index) => {
    if(value > 3){
        console.log(value)
        return false;

    }else{
        console.log(value)// 1
        // return true;
        // 如果没有返回值true 的话，也会跳出循环
    }

});


// forEach没有返回值，只针对每个元素调用func。
    let list2 = [1, 2, 3, 4, 5];
    list2.forEach((value, index) => {
        if(value > 3){
            console.log(value)// 4 5
            return false;//没有返回值，ruturn false 仍向下执行

        }else{
            console.log(value)// 1 2 3
            return true;
        }
    });


   let list3 = [1, 2, 3, 4, 5];
    list3.some((value, index) => {
        if(value === 3){
            return true;//当内部return true时跳出整个循环
        }
        console.log(value)// 1 2 
    });

    let list5 = [1, 2, 3, 4, 5];
    let arr = [];
    arr = list5.map((value, index) => {
        return value * 2;
    });
    console.log(arr);//[2, 4, 6, 8, 10]




https://blog.csdn.net/weixin_36934930/article/details/81061063 


1. axios设置默认baseURL 

axios.defaults.baseURL = 'http://localhost:8080/api'
main.js文件中配置后，所有文件访问均加该基准


VSCode中忽略部分文件


 files.exclude-->将所需要的文件添加到对应位置，减轻编辑器压力


 TypeScript--TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。2012年十月份，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript 0.9，向未来的TypeScript 1.0版迈进了很大一步。
PWA(Progressive Web App)是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送功能。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验


渐进式网页应用--渐进式接近原生app的web app
pwa仍然是网页，只是在缓存、通知、后台功能等方面表现的更好。
web App 与 Native app优缺点对比
原生应用 Native app
体验好，下载到手机之后入口也方便---但：
开发成本高（IOS 和安卓）
软件上线需要审核
版本更新需要将新版本上传到不同的应用商定
想使用一个app就必须去下载才能使用，即使是偶尔需要使用一下
web网页开发成本低，网站更新时上传最新的资源到服务器即可，用手机带的浏览器就可以打开使用---但体验比Native app还是差一些

手机桌面入口不够便捷，想要进入一个页面必须要记住它的url或者加入书签
没网络就没响应，不具备离线能力
不想app一样能进行消息推送
 
一个PWA应用首先应该是一个网页，通过Web技术编写一个网页应用，随后添加上App Manifest和Service Woreker来实现PWA的安装和离线功能

可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
实现离线缓存功能，即使用户手机没有网络，依然可以使用一些理想功能
实现了消息推送
 


CommonJs、AMD、CMD、UMD


CommonJs-->CommonJs Modules/1.0规范

同步加载模块，服务器端没问题，但浏览器端涉及到网速、代理等原因--》NodeJS采用该规范
所以浏览器端不适合CommonJs规范-》AMD
 
AMD--》Asynchronous Module Definition--异步模块定义

这里异步指的是不堵塞浏览器其他任务（dom构建，css渲染等），二甲在内部是同步的（加载完模块后立即执行回调）
AMD是依赖前置的，这不同于CMD规范，它是依赖就近的
 
CMD

推崇就近，延迟执行
这个规范是为了Seajs的推广
同样Seajs也是预加载依赖js跟AMD的规范在预加载这一点上是相同的，明显不同的地方是调用，和声明依赖的地方。AMD和CMD都是用difine和require，但是CMD标准倾向于在使用过程中提出依赖，就是不管代码写到哪突然发现需要依赖另一个模块，那就在当前代码用require引入就可以了，规范会帮你搞定预加载，你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好（没有写好？ 倒回去写好咯）。这就是最明显的区别。
 
UMD

CommonJS是服务器端的规范，跟AMD、CMD两个标准实际不冲突。
这个代码可以兼容各种加载规范了。
 


Vue-router中proxyTable代理跨域
proxyTable: { '/api': { // 测试环境 target: 'http://localhost:3000', // 接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/api' //需要rewrite重写的, } } }

移动端与PC端的区别

PC端考虑浏览器兼容性--移动端考虑手机兼容性（无论androdi还是ios，浏览器一般都是wibkit内核）所以移动端开发，更多考虑的是手机分辨率的适配 
移动端多出来触屏事件，缺少hover事件，另移动端弹出的手机键盘的处理
布局上，移动端开发一般做到布局的自适应
动画处理上，pc端考虑IE兼容，手机端可以使用css3
微信接口组，比如文章分享，title，description，icon等图标配置
百度地图的API接口
css3动画
pc端用jQuery，移动端用zepto
性能优化，首屏打开速度，用户响应延迟，动画帧率
事件在收集上的300s延迟->hammer-time.js 

字体图标

兼容性-由强至弱

unicode引用

特点

兼容性好，支持ie6+，及所有现代浏览器
支持按字体的方式去动态调整图标大小，颜色等等
但是因为是字体，所以不支持多色，只能使用平台里单色的图标，就算项目里有多色图标也会自动取色
 
使用

拷贝生成的font-face
定义适用iconfont的样式
挑选对应图标并获取字体编码，应用于页面
 
 
font-class引用

特点

兼容性良好，支持ie8+，及所有现代浏览器
相比于unicode语义明确，书写更直观，可以很容易分辨这个icon是什么
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicod引用
不过因为本质上还是使用的字体，所以多色图标还是不支持的
 
步骤

引入项目生成的fontclass代码
挑选对应图标并获取类名，应用于页面
 
 
symbol引用

特点

支持多色图标，不再受单色限制
通过一些技巧，支持像字体那样，通过font-size，color来调整样式
兼容性较差，支持ie9+，及现代浏览器
浏览器渲染sbg的性能一般，还不如png
 
步骤

引入项目下生成的symbol代码
加入通用的css代码（引入一次就行）
挑选相应图标并获取类名，应用于页面
 
 
 

浏览器页面获取焦点事件监听
//  方法一
      document.addEventListener('visibilitychange',function(){ //浏览器切换事件
      if(document.visibilityState=='hidden') { //状态判断
            //normal_title=document.title;
            document.title = '标题二'; 
      }else {
            document.title = '标题一';
      }
      });
//方法二
      // window.onfocus=()=>{
            
      }

方法总结

git身份验证失败清除密码缓存

移除npm

List of Chrome URLs

播放器

获取位置

计算

位置获取

Promise

AJAX(Asynchromous JavaScript and XML)

async/await

map-every-some-foreach

1. axios设置默认`baseURL`

移动端与PC端的区别

字体图标

浏览器页面获取焦点事件监听

你可能感兴趣的:(方法总结)