方法总结

作者: wudongyu | 来源:发表于2018-11-15 11:12 被阅读0次

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标签来强制使用最新的内核渲染页面
  - <meta http-equiv='x-UA-Compatible' content='IE=edge,chrome=1'
- rgba不支持IE 解决：用opacity
- CSS3前缀
- 过度不兼容IE8，可以用JS动画来实现
- background-size不支持IE8，可以用img
- IE浮动margin产生的双倍距离，通常使用float:left来实现，浏览器存在兼容性问题，导致图片与后面的内容存在margin不一致的问题，解决方法就是给图片添加display：inline即可
- ie8不支持nth-child，但支持first-child和last-child，可以通过转化写法来处理问题，span:nth-child(2)可以转换为span:first-child+span,可以是ie8显示该内容，last-child可以自定义一个class类兼容ie8写法
- ie8不支持html5属性placeholder jquery.JPlaceholder.js插件处理问题
- 识别h'tml5元素，IE中可能无法识别nav/footer,使用html5shiv
- 火狐下表单阻止表单默认提交事件：在form中添加action='javascript:;',阻止以上所有行为
- 始终为按钮添加type属性，ie下的默认类型是button，其他浏览器下的默认类型是submit
- IE下删除所有不必要的console语句，IE下当遇到console时不识别之后报错，代码不会执行，或者全局自定义一个window.console方法
- IE浏览器下由于参数过长导致通过GET请求下载文件方法报错，解决--改为POST请求
- IE浏览器下iframe弹窗中输入框光标丢失（无法输入）问题，解决清一下frame
- 兼容IE8 new Date()返回NaN问题，解决自定义方法
- nextTick和vuex
- vue响应式原理，订阅者-发布者模式和观察者模式
- 在javascript源文件的开头包含'use strict'的意义和有什么好处
  - use strict在运行时自动执行更严格的JavaScript代码解析和错误处理的方法
    - 使调试更容易
      - 如果代码错误本来会被忽略或失败，那么现在将会产生错误或抛出异常，从而更快的发现代码中的问题，并更快的指引它们的源代码
    - 防止意外全局
      - 如果没有严格模式，将值赋给未声明的变量会自动创建一个具有该名称的全局变量。这是javascript中最常见的错误之一，在严格模式下，尝试这样做会引发错误
      - 消除潜藏威胁
        
        在没有严格模式的情况下，对null或undefined这个值的引用会自动强制到全局。这可能会导致许多headfakes和pull-out-your-hair类型的错误。在严格模式下，引用nulll或undefined这个值会引发错误
      - 不允许重复的参数值
        
        严格模式在检测到函数的重复命名参数
      - 使eval（）更安全
        
        eval（）在严格模式和非严格模式下的行为方式有些不同。最重要的是，在严格模式下，在eval()语句内部生命的变量和函数不会在包含范围中创建
      - 抛出无效的使用错误的删除符
        
        删除操作符（用于从对象中删除属性）不能用于对象的不可配置属性。当试图删除一个不可配置的属性时，非严格代码将自动失败，而在这种情况下严格模式会引发错误
什么是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端的区别

字体图标

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

方法总结

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

移除npm

List of Chrome URLs

播放器

获取位置

计算

位置获取

Promise

AJAX(Asynchromous JavaScript and XML)

async/await

map-every-some-foreach

1. axios设置默认baseURL

移动端与PC端的区别

字体图标

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1. axios设置默认`baseURL`