TOMMYHU

先看下这段流氓代码
!function test() {     // 捕获异常，递归次数过多调试工具会抛出异常。     try{         !function cir(i)         {             // 当打开调试工具后，抛出异常，setTimeout执行test无参数，此时i == NaN，("" + i / i).length == 3             // debugger设置断点             ( 1 !== ( "" + i / i).length || 0===a ) && function(){}.constructor("debugger")(),cir(++i);         } (0)     } catch(e) {         setTimeout(test,500)     } }();

问题复现
一次扒某网站的前端代码，打开控制台要看Network，结果发现他们页面一打开控制台就不断的debugger，100ms一次，很影响看页面内容。就像下面这样的



问题分析
每次在断点处停下来的时候页面都会跳到source这个tab页面，也能够看到他的debugger的代码，其实他的实现很简单，只有这一行代码

(function() {var a = new Date(); debugger; return new Date() - a > 100;}())
虽然简单，但是却很有效。

不停地打断你，页面跳到source页面，阻止你看他代码不
断的产生不可回收的对象，占据你的内存，造成内存泄漏，没过多久浏览器就会卡顿
所以他带来的影响还是挺大的，我们需要解决这个问题。

问题解决
这个问题解决起来还是蛮简单的，问题解决只需要一句话：禁止断点。
而对应的操作是在Chrome控制台的Source Tab页点击Deactivate breakpoints按钮或者按下Ctrl + f8(下图)。


这样就能禁用断点了，问题就得到了解决，但是当你需要调试的时候记得要起他哦。很简单的操作，但是你如果对Chrome控制台调试不熟悉的话还是比较头疼的。在这里记录一下，分享给更多的人。

1、vue proxyTable接口跨域请求调试
或参考开发阶段 API 请求代理
在vue-cli项目中的config文件夹下的index.js配置文件中，dev长这样子：
dev: {     env: require('./dev.env'),     port: 8080,     autoOpenBrowser: true,     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: {},       cssSourceMap: false   }
服务器提供的接口如果长这样https://www.exaple.com/server_new/login，我们把域名提取出来如https://www.exaple.com；

在config中新建一个文件命名为proxyConfig.js :
module.exports = {   proxy: {         '/apis': {    //将<a href="http://www.exaple.com" target="_blank">www.exaple.com</a>印射为/apis             target: 'https://www.exaple.com',  // 接口域名             changeOrigin: true,  //是否跨域             pathRewrite: {                 '^/apis': ''   //需要rewrite的,             }                       }   } }
config文件夹下的index.js引入proxyConfig.js：
var proxyConfig = require('./proxyConfig') config文件夹下的index.js中的dev改成: [codes=c#] dev: {     env: require('./dev.env'),     port: 8080,     autoOpenBrowser: true,     assetsSubDirectory: 'static',     assetsPublicPath: '/',     proxyTable: proxyConfig.proxy,     cssSourceMap: false   }   
重启项目npm run dev：

你会发现出现了这个



这个时候我们已经设置好了本地API代理了

修改本地hosts文件
文件路径一般是C:\Window\System32\drivers\etc，打开hosts文件，在这一段下面把localhost设置进去
# localhost name resolution is handled within DNS itself. # 127.0.0.1       localhost # ::1             localhost 127.0.0.1                   activate.adobe.com 127.0.0.1                   practivate.adobe.com 127.0.0.1                   lmlicenses.wip4.adobe.com 127.0.0.1                   lm.licenses.adobe.com 127.0.0.1                   na1r.services.adobe.com 127.0.0.1                   hlrcv.stage.adobe.com
localhost                   www.exaple.com            
搞定
此时我们已经完全解决了跨域问题，以及本地测试后台无法向我们本地环境设置cookie的情况了。

2、后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下：
import axios from 'axios' import config from '../config' export default { request (method, uri, data, headerConfig = {withCredentials: true}) { if (!method) { console.error('API function call requires method argument') return } if (!uri) { console.error('API function call requires uri argument') return } let url = config.serverURI + uri return axios({ method, url, data, ...headerConfig }) } }
jQuery的$.ajax:：
$.ajax({ type: "POST", url: "http://www.xxx.com/api.php", dataType: 'json', xhrFields: {   withCredentials: true }, crossDomain: true }).then((json) => { // balabala... })

3、jsonp

jsonp也是一种解决跨域的方法，不过我从来没有用过，在网上查了下资料，jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求。

4、nginx配置
最近使用vue开发一个功能，npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下，那么问题来了，如何让后端接口支持跨域。有两种方法：

让后端在返回数据的时候设置下返回请求的header，这种方法比较不稳定，因为接口一旦多了就得改好多代码，而且每次出了问题还得去找后端开发改代码，很烦。

另一种方法是，自己配置nginx，首先ssh登录到部署接口所在的服务器，修改nginx配置，在http对象中加入两行代码：
http {   // 需要加入的代码   add_header Access-Control-Allow-Origin <a href="http://a.com.cn" target="_blank">http://a.com.cn</a>   add_header Access-Control-Allow-Credentials true   server {     // b.com.cn的具体配置   } }
改完重启下nginx，然后在vue项目中，在导入axios的地方加如以下代码：
import axios from 'axios' axios.defaults.withCredentials = true
然后测试，发现就可以跨域了。

弹出层、弹窗插件，有这两兄弟就够了，居家旅行必备良品
layx  https://gitee.com/monksoul/LayX
layer  http://layer.layui.com/

前端
1、promise.then
2、Step.js 使用教程（附源码解析）

3、Async.js中文详解



其他
1、Generator co http://www.ruanyifeng.com/blog/2015/05/async.html
2、async await 可以参考阅读https://www.jianshu.com/p/7bd8d5e87965

2.1、vue : async / await 的应用
api.js
import axios from 'axios'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; var async2 = async function () {     let data = await new Promise((resolve)=>{         setTimeout(()=>{             resolve({"errocode":0,"errmsg":"ok"})             console.log("async2");         },3000)     })     return data } export const async1 = async function () {     await async2();     let data = await new Promise((resolve)=>{         setTimeout(()=>{             resolve({"errocode":0,"errmsg":"ok"})             console.log("async1");         })     })     return data }
app.vue
import { async1,async2 } from '../../api/api'; ... created(){     async1().then((v)=>{             console.info(v);      });   }, ...

vue使用async/await 报错“Syntax Error: await is a reserved word“””
引入babel-plugin-transform-runtime包，然后在.babelrc加上 {   "presets": [     ["env", { "modules": false }],     "stage-2"   ],   "plugins": ["transform-runtime"],   "comments": false,   "env": {     "test": {       "presets": ["env", "stage-2"],       "plugins": [ "istanbul" ]     }   } }



async/await 更好的异步解决方案https://segmentfault.com/a/1190000012411744

1.引入generator支撑库
经过Babel转译后的代码，会把aysnc/await的功能通过类似co库的方式来实现，即要使用到generator，所以，和我们使用co的时候一样，需要依赖一个regeneratorRuntime，才能支持generator特性。我们可以使用Facebook开源的regenerator库。你可以通过npm来下载这个regenerator库：

npm install regenerator --save
然后将下载文件中名为regenerator-runtime的文件拿出来，放到我们的小程序代码中去。

2.引入代码
在需要使用async/await特性的代码文件中，引入regenerator库：

import regeneratorRuntime from '../../utils/regenerator-runtime/runtime-module.js';
然后，你就可以放心的在你的代码里使用async/await来写异步处理了。

https://www.w3cplus.com/preprocessor/8-tips-help-get-best-sass.html
编写Sass的八个技巧

download: function() {         console.log("xiazai")         var obj = document.getElementById('download');         var str = "姓名,出生日期,地址\n";         for (var i = 0; i < this.tableData.length; i++) {           var item = this.tableData[i];           str += item.name + ',' + item.date + ',' + item.address;           str += "\n";         }         console.log(obj)         str = encodeURIComponent(str);         console.log(str)         obj.href = "data:text/csv;charset=utf-8,\ufeff" + str;         obj.download = "download.csv";       }

/** * Created by Tommy.Hu on ${DATE}. */ <template>     <section>${NAME}..     </section> </template> <script> export default {   name: '${NAME}',   data () {     return {       componetTitle: '${NAME}'     }   } } </script> <style scoped> </style>