标签搜索
搜索到
107
篇与
的结果
-
解决Vue开发环境跨域问题 当将这个样板与现有后端集成时，通常需要在使用开发服务器时访问后端API。为此，我们可以并行（或远程）运行开发服务器和API后端，并让开发服务器将所有API请求代理到实际的后端。要配置代理规则，请在中编辑dev.proxyTable选项config/index.js。开发服务器正在使用http-proxy-middleware进行代理，因此您应该参阅其文档以获取详细的用法。但是这里有一个简单的例子：// config/index.js module.exports = { // ... dev: { proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }上面的示例将代理请求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1。网址匹配除了静态URL之外，您还可以使用glob模式来匹配URL，例如/api/**。请参阅上下文匹配以获取更多详细信 另外，您可以提供一个filter可以是自定义函数的选项，以确定是否应该代理请求：proxyTable: { '**': { target: 'http://jsonplaceholder.typicode.com', filter: function (pathname, req) { return pathname.match('^/api') && req.method === 'GET' } } }详情访问var remote = {target: 'http://umeqy.com:1700',changeOrigin: true} proxyTable: { '/Home': remote, '/Account': remote, '/Sys': remote, '/Basis': remote, '/Plan': remote, '/PriceSystem': remote, '/Receipt': remote, '/Quota': remote, '/Common': remote, '/Contract': remote, '/Waybill': remote, '/Device': remote, '/Permit': remote, '/Other': remote, '/Freight': remote }, -
14 个你可能不知道的 JavaScript 调试技巧 协作翻译原文：The 14 JavaScript debugging tips you probably didn't know链接：https://raygun.com/javascript-debugging-tips译者：暖冰, 边城, 无若, 王练了解你的工具可以极大的帮助你完成任务。尽管 JavaScript 的调试非常麻烦，但在掌握了技巧 (tricks) 的情况下，你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bugs) 。我们会列出14个你可能不知道的调试技巧, 但是一旦知道了，你就会迫不及待的想在下次需要调试 JavaScript 代码的时候使用它们！现在开始。虽然许多技巧也可以用在别的检查工具上，但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。‘debugger;’‘debugger’ 是 console.log 之外我最喜欢的调试工具，简单暴力。只要把它写到代码里，Chrome 运行的时候就会自动自动停在那。你甚至可以用条件语句把它包裹起来，这样就可以在需要的时候才执行它。把 objects 输出成表格有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出出来，你也可以用 console.table 语句把它们直接输出为一个表格！输出结果:试遍所有的尺寸虽然把各种各样的手机都摆在桌子上看起来很酷，但这却很不现实。为什么不选择直接调整界面大小呢? Chrome 浏览器提供了你所需要的一切。 进入检查面板点击 ‘切换设备模式’ 按钮，这样你就可以调整视窗的大小了！如何快速定位 DOM 元素在元素面板上标记一个 DOM 元素并在 concole 中使用它。Chrome Inspector 的历史记录保存最近的五个元素，最后被标记的元素记为 $0，倒数第二个被标记的记为 $1，以此类推。如果你像下面那样把元素按顺序标记为 ‘item-4′, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’ ，你就可以在 concole 中获取到 DOM 节点:用 console.time() 和 console.timeEnd() 测试循环耗时当你想知道某些代码的执行时间的时候这个工具将会非常有用，特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。demo 如下:运行结果:6.获取函数的堆栈轨迹信息你可能知道 JavaScript 框架会产生很多的代码--迅速的。它创建视图触发事件而且你最终会想知道函数调用是怎么发生的。因为 JavaScript 不是一个很结构化的语言，有时候很难完整的了解到底发生了什么以及什么时候发生的。 这个时候就轮到 console.trace（在终端的话就只有 trace ）出场来调试 JavaScript了 。假设你现在想看 car 实例在第33行调用 funcZ 函数的完整堆栈轨迹信息:第33行会输出:你可以看到func1调用了func2, func2又调用了func4。Func4 创建了Car的实例，然后调用了方法car.funcX，等等。尽管你感觉你对自己的脚本代码非常了解，这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的，你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。格式化代码使调试 JavaScript 变得容易有时候你发现产品有一个问题，而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。快速找到调试函数来看看怎么在函数中设置断点。通常情况下有两种方法：在查看器中找到某行代码并在此添加断点在脚本中添加 debugger这两种方法都必须在文件中找到需要调试的那一行。使用控制台是不太常见的方法。在控制台中使用 debug(funcName)，代码会在停止在进入这里指定的函数时。这个操作很快，但它不能用于局部函数或匿名函数。不过如果不是这两种情况下，这可能是调试函数最快的方法。（注意：这里并不是在调用 console.debug 函数）。在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候停止运行：屏蔽不相关代码如今，经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此阅读更多关于调试不相关代码（http://raygun.com/blog/javascript-debugging-with-black-box/）。在复杂的调试过程中寻找重点在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 Console.log，console.debug，console.warn，console.info，console.error 等等。然后，你可以在控制台中快速浏览。但有时候，某些JavaScrip调试信息并不是你需要的。现在，可以自己美化调试信息了。在调试JavaScript时，可以使用CSS并自定义控制台信息：console.todo = function(msg) {console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);}console.important = function(msg) {console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);}console.todo(“This is something that’ s need to be fixed”);console.important(‘This is an important message’);输出：例如：在console.log()中， 可以用%s设置字符串，%i设置数字，%c设置自定义样式等等，还有很多更好的console.log()使用方法。 如果使用的是单页应用框架，可以为视图（view）消息创建一个样式，为模型（models），集合（collections），控制器（controllers）等创建另一个样式。也许还可以像 wlog，clog 和 mlog 一样发挥你的想象力！查看具体的函数调用和它的参数在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。然后输出：这是查看将哪些参数传递到函数的一种很好的方法。但我必须说，如果控制台能够告诉我们需要多少参数，那就好了。在上面的例子中，函数1期望3个参数，但是只有2个参数被传入。如果代码没有在代码中处理，它可能会导致一个 bug 。在控制台中快速访问元素在控制台中执行 querySelector 一种更快的方法是使用美元符。$(‘css-selector’) 将会返回第一个匹配的 CSS 选择器。$$(‘css-selector’) 将会返回所有。如果你使用一个元素超过一次，它就值得被作为一个变量。Postman 很棒（但 Firefox 更快）很多开发人员都使用 Postman 来处理 Ajax 请求。Postman 真不错，但每次都需要打开新的浏览器窗口，新写一个请求对象来测试。这确实有点儿烦人。有时候直接使用在用的浏览器会更容易。这样的话，如果你想请求一个通过密码保证安全的页面时，就不再需要担心验证 Cookie 的问题。这就是 Firefox 中编辑并重新发送请求的方式。打开探查器并进入网络页面，右键单击要处理的请求，选择编辑并重新发送。现在你想怎么改就怎么改。可以修改头信息，也可以编辑参数，然后点击重新发送即可。现在我发送了两次同一个请求，但使用了不同的参数：节点变化时中断DOM 是个有趣的东西。有时候它发生了变化，但你却并不知道为什么会这样。不过，如果你需要调试 JavaScript，Chrome 可以在 DOM 元素发生变化的时候暂停处理。你甚至可以监控它的属性。在 Chrome 探查器上，右键点击某个元素，并选择中断（Break on）选项来使用：
-
HTML5语义化标签 简短、描述性、唯一（提升搜索引擎排名）。搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。 ：h1~h6分级标题，用于创建页面信息的层级关系。 对于搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是h1。页眉通常包括网站标志、主导航、全站链接以及搜索框。 也适合对页面内部一组介绍性或导航性内容进行标记。标记导航，仅对文档中重要的链接群使用。 html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。 article可以嵌套article，只要里面的article与外面的是部分与整体的关系。具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。 如果只是为了添加样式，请用div！指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。 如果放在main内，应该与所在内容密切相关。页脚，只有当父级是body时，才是整个页面的页脚。指定细则，输入免责声明、注解、署名、版权。 只适用于短语，不要用来标记“使用条款”、“隐私政策”等长的法律声明。表示内容重要性。标记内容着重点（大量用于提升段落文本语义）。突出显示文本（yellow），提醒读者。 在HTML5中em是表示强调的唯一元素，而strong则表示重要程度。出于实用目的提醒读者的一块文字，不传达任何额外的重要性不同于其他文字的文字= =|||这个翻译真的是······创建图（默认有40px左右margin）。：figure的标题，必须是figure内嵌的第一个或者最后一个元素。指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。只用于参考源本身，而不是从中引述。：引述文本，默认新的一行显示。：短的引述（跨浏览器问题，尽量避免使用）。可以对blockquoto和q元素使用cite属性（不是cite元素！），对搜索引擎自动化工具有用。cite=“URL”引述来源地址。标记时间。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。 不再相关的时间用s标签。解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。abbr[title]{ border-bottom:1px dotted #000; }定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。 如果提供整个页面的作者联系信息，一般放在页面级footer里。不能包含文档或者文档等其他内容。移除的内容。 添加的内容。 少有的既可以包围块级，又可以包围短语内容的元素。 标记代码。包含示例代码或者文件名 pre预格式化文本。保留文本固有的换行和空格。 表示分数的值或者已知范围的测量结果。如投票结果。 例如：20%completed 完成进度。可通过js动态更新value。
-
时间格式化 const newDate = str => { if (str === null) return null; if (str === undefined) return new Date(); if (str.constructor != String) return new Date(str); let $ = str.match(/^\s*(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)\s*$/); return $ && new Date($[1], $[2] - 1, $[3], $[4], $[5], $[6]) || new Date(str); } /** * * 格式化时间 * * @param {String} str * @param {String} fmt "yyyy-MM-dd hh:mm:ss" "yyyy-MM-dd" * @returns 格式化后的时间 */ const formatDate = (str, fmt) => { if (!Boolean(str)) { return "" } const now = newDate(str); let o = { "M+": now.getMonth() + 1, //月份 "d+": now.getDate(), //日 "h+": now.getHours(), //小时 "m+": now.getMinutes(), //分 "s+": now.getSeconds(), //秒 "q+": Math.floor((now.getMonth() + 3) / 3), //季度 "S": now.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (now.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (let k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } export { formatDate, newDate }
-
eslint 配置没有之一 module.exports = { // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。 root: true, // 对Babel解析器的包装使其与 ESLint 兼容。 parser: 'babel-eslint', parserOptions: { // 代码是 ECMAScript 模块 sourceType: 'module' }, env: { // 预定义的全局变量，这里是浏览器环境 browser: true, es6: true }, // 扩展一个流行的风格指南，即 eslint-config-standard // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ // 此插件用来识别.html 和 .vue文件中的js代码 'html', // standard风格的依赖包 "standard", // standard风格的依赖包 "promise" ], // add your custom rules here 'rules': { "keyword-spacing":0,//关键字前后空格 'no-tabs': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 0 : 0, // 关闭语句强制分号结尾 "semi": [0], //关闭禁止混用tab和空格 "no-mixed-spaces-and-tabs": [0], "no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 0,//禁止使用数组构造器 "no-bitwise": 0,//禁止使用按位运算符 "no-caller": 1,//禁止使用arguments.caller或arguments.callee "no-catch-shadow": 0,//禁止catch子句参数与外部作用域变量同名 "no-class-assign": 0,//禁止给类赋值 "no-cond-assign": 0,//禁止在条件表达式中使用赋值语句 "no-console": 0,//禁止使用console "no-const-assign": 0,//禁止修改const声明的变量 "no-constant-condition": 0,//禁止在条件中使用常量表达式 if(true) if(1) "no-continue": 0,//禁止使用continue "no-control-regex": 0,//禁止在正则表达式中使用控制字符 "no-delete-var": 0,//不能对var声明的变量使用delete操作符 "no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/ "no-dupe-keys": 0,//在创建对象字面量时不允许键重复 {a:1,a:1} "no-dupe-args": 0,//函数参数不能重复 "no-duplicate-case": 0,//switch中的case标签不能重复 "no-else-return": 0,//如果if语句里面有return,后面不能跟else语句 "no-empty": 0,//块语句中的内容不能为空 "no-empty-character-class": 0,//正则表达式中的[]内容不能为空 "no-empty-label": 0,//禁止使用空label "no-eq-null": 0,//禁止对null使用==或!=运算符 "no-eval": 1,//禁止使用eval "no-ex-assign": 0,//禁止给catch语句中的异常参数赋值 "no-extend-native": 0,//禁止扩展native对象 "no-extra-bind": 0,//禁止不必要的函数绑定 "no-extra-boolean-cast": 0,//禁止不必要的bool转换 "no-extra-parens": 0,//禁止非必要的括号 "no-extra-semi": 1,//禁止多余的冒号 "no-fallthrough": 1,//禁止switch穿透 "no-floating-decimal": 0,//禁止省略浮点数中的0 .5 3. "no-func-assign": 0,//禁止重复的函数声明 "no-implicit-coercion": 1,//禁止隐式转换 "no-implied-eval": 0,//禁止使用隐式eval "no-inline-comments": 0,//禁止行内备注 "no-inner-declarations": [0, "functions"],//禁止在块语句中使用声明（变量或函数） "no-invalid-regexp": 0,//禁止无效的正则表达式 "no-invalid-this": 0,//禁止无效的this，只能用在构造器，类，对象字面量 "no-irregular-whitespace": 0,//不能有不规则的空格 "no-iterator": 0,//禁止使用__iterator__ 属性 "no-label-var": 0,//label名不能与var声明的变量名相同 "no-labels": 0,//禁止标签声明 "no-lone-blocks": 0,//禁止不必要的嵌套块 "no-lonely-if": 0,//禁止else语句内只有if语句 "no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以） "no-mixed-requires": [0, false],//声明时不能混用声明类型 "no-mixed-spaces-and-tabs": [0, false],//禁止混用tab和空格 "linebreak-style": [0, "windows"],//换行风格 "no-multi-spaces": 1,//不能用多余的空格 "no-multi-str": 0,//字符串不能用\换行 "no-multiple-empty-lines": [1, {"max": 0}],//空行最多不能超过0行 "no-native-reassign": 0,//不能重写native对象 "no-negated-in-lhs": 0,//in 操作符的左边不能有! "no-nested-ternary": 0,//禁止使用嵌套的三目运算 "no-new": 1,//禁止在使用new构造一个实例后不赋值 "no-new-func": 1,//禁止使用new Function "no-new-object": 0,//禁止使用new Object() "no-new-require": 0,//禁止使用new require "no-new-wrappers": 0,//禁止使用new创建包装实例，new String new Boolean new Number "no-obj-calls": 0,//不能调用内置的全局对象，比如Math() JSON() "no-octal": 0,//禁止使用八进制数字 "no-octal-escape": 0,//禁止使用八进制转义序列 "no-param-reassign": 0,//禁止给参数重新赋值 "no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接 "no-plusplus": 0,//禁止使用++，-- "no-process-env": 0,//禁止使用process.env "no-process-exit": 0,//禁止使用process.exit() "no-proto": 0,//禁止使用__proto__属性 "no-redeclare": 0,//禁止重复声明变量 "no-regex-spaces": 0,//禁止在正则表达式字面量中使用多个空格 /foo bar/ "no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错 "no-return-assign": 1,//return 语句中不能有赋值表达式 "no-script-url": 0,//禁止使用javascript:void(0) "no-self-compare": 0,//不能比较自身 "no-sequences": 0,//禁止使用逗号运算符 "no-shadow": 0,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名 "no-shadow-restricted-names": 0,//严格模式中规定的限制标识符不能作为声明时的变量名使用 "no-spaced-func": 0,//函数调用时 函数名与()之间不能有空格 "no-sparse-arrays": 0,//禁止稀疏数组， [1,,0] "no-sync": 0,//nodejs 禁止同步方法 "no-ternary": 0,//禁止使用三目运算符 "no-trailing-spaces": 1,//一行结束后面不要有空格 "no-this-before-super": 0,//在调用super()之前不能使用this或super "no-throw-literal": 0,//禁止抛出字面量错误 throw "error"; "no-undef": 1,//不能有未定义的变量 "no-undef-init": 0,//变量初始化时不能直接给它赋值为undefined "no-undefined": 0,//不能使用undefined "no-unexpected-multiline": 0,//避免多行表达式 "no-underscore-dangle": 1,//标识符不能以_开头或结尾 "no-unneeded-ternary": 0,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false; "no-unreachable": 0,//不能有无法执行的代码 "no-unused-expressions": 0,//禁止无用的表达式 "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数 "no-use-before-define": 0,//未定义前不能使用 "no-useless-call": 0,//禁止不必要的call和apply "no-void": 0,//禁用void操作符 "no-var": 0,//禁用var，用let和const代替 "no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注 "no-with": 0,//禁用with "array-bracket-spacing": [0, "never"],//是否允许非空数组里面有多余的空格 "arrow-parens": 0,//箭头函数用小括号括起来 "arrow-spacing": 0,//=>的前/后括号 "accessor-pairs": 0,//在对象中使用getter/setter "block-scoped-var": 0,//块语句中使用var "brace-style": [1, "1tbs"],//大括号风格 "callback-return": 1,//避免多次调用回调什么的 "camelcase": 0,//强制驼峰法命名 "comma-dangle": [2, "never"],//对象字面量项尾不能有逗号 "comma-spacing": 0,//逗号前后的空格 "comma-style": [0, "last"],//逗号风格，换行时在行首还是行尾 "complexity": [0, 11],//循环复杂度 "computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的 "consistent-return": 0,//return 后面是否允许省略 "consistent-this": [0, "that"],//this别名 "constructor-super": 0,//非派生类不能调用super，派生类必须调用super "curly": [0, "all"],//必须使用 if(){} 中的{} "default-case": 0,//switch语句最后必须有default "dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾 "dot-notation": [1, { "allowKeywords": true }],//避免不必要的方括号 "eol-last": 0,//文件以单一的换行符结束 "eqeqeq": 1,//必须使用全等 "func-names": 0,//函数表达式必须有名字 "func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式 "generator-star-spacing": 0,//生成器函数*的前后空格 "guard-for-in": 0,//for in循环要用if语句过滤 "handle-callback-err": 0,//nodejs 处理错误 "id-length": 0,//变量名长度 "indent": [1, 2],//缩进风格 "init-declarations": 0,//声明时必须赋初值 "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格 "lines-around-comment": 0,//行前/行后备注 "max-depth": [0, 4],//嵌套块深度 "max-len": [0, 80, 4],//字符串最大长度 "max-nested-callbacks": [0, 0],//回调嵌套深度 "max-params": [1, 3],//函数最多只能有3个参数 "max-statements": [0, 10],//函数内最多有几个声明 "new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用 "new-parens": 2,//new时必须加小括号 "newline-after-var": 0,//变量声明后是否需要空一行 "object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格 "object-shorthand": 0,//强制对象字面量缩写语法 "one-var": 1,//连续声明 "operator-assignment": [0, "always"],//赋值运算符 += -=什么的 "operator-linebreak": [0, "after"],//换行时运算符在行尾还是行首 "padded-blocks": 0,//块语句内行首行尾是否要空行 "prefer-const": 0,//首选const "prefer-spread": 0,//首选展开运算 "prefer-reflect": 0,//首选Reflect的方法 "quotes": [1, "single"],//引号类型 `` "" '' "quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号 "radix": 0,//parseInt必须指定第二个参数 "id-match": 0,//命名检测 "require-yield": 0,//生成器函数必须有yield "semi": [1, "always"],//语句强制分号结尾 "semi-spacing": [0, {"before": false, "after": true}],//分号前后空格 "sort-vars": 0,//变量声明时排序 "space-after-keywords": [0, "always"],//关键字后面是否要空一格 "space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格 "space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格 "space-in-parens": [0, "never"],//小括号里面要不要有空格 "space-infix-ops": 0,//中缀操作符周围要不要有空格 "space-return-throw-case": 0,//return throw case后面要不要加空格 "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格 "spaced-comment": 0,//注释风格要不要有空格什么的 "strict": 0,//使用严格模式 "use-isnan": 0,//禁止比较时使用NaN，只能用isNaN() "valid-jsdoc": 0,//jsdoc规则 "valid-typeof": 0,//必须使用合法的typeof的值 "vars-on-top": 2,//var必须放在作用域顶部 "wrap-iife": [0, "inside"],//立即执行函数表达式的小括号风格 "wrap-regex": 0,//正则表达式字面量用小括号包起来 "yoda": [0, "never"]//禁止尤达条件 } }
-
VScode-Vue大法 在VScod中完美开发Vue项目,1.插件安装"eslint": "^4.10.0", "eslint-config-standard": "^10.2.1", "eslint-plugin-html": "^3.2.2", "eslint-plugin-import": "^2.8.0", "eslint-plugin-node": "^5.2.1", "eslint-plugin-promise": "^3.6.0", "eslint-plugin-standard": "^3.0.1", "babel-eslint": "^8.0.2", npm install --save-dev eslint eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard babel-eslint这是在我项目中用的插件版本,安装 npm install (包名) --save-dev2.在项目更目录添加.eslintrc.js配置文件配置文件内容 module.exports = { // 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。 root: true, // 对Babel解析器的包装使其与 ESLint 兼容。 parser: 'babel-eslint', parserOptions: { // 代码是 ECMAScript 模块 sourceType: 'module' }, env: { // 预定义的全局变量，这里是浏览器环境 browser: true, }, // 扩展一个流行的风格指南，即 eslint-config-standard // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ // 此插件用来识别.html 和 .vue文件中的js代码 'html', // standard风格的依赖包 "standard", // standard风格的依赖包 "promise" ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 } }3.设置VScode{ "workbench.colorTheme": "Monokai", "workbench.startupEditor": "newUntitledFile",// 以像素为单位控制字号。 "editor.fontSize": 18, "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], "eslint.options": { "plugins": ["html"] }, "emmet.includeLanguages": { "vue-html" :"html" }, "emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }, "emmet.triggerExpansionOnTab": true, "emmet.showSuggestionsAsSnippets": true, "workbench.iconTheme": "vscode-icons", "vetur.validation.template": true, "window.zoomLevel": -1, "files.associations": { "*.vue": "html" }, "htmlhint.documentSelector": [ "html", "htm", "vue" ] }5.Vue插件安装1.Vetur 2.Vue 2 Snippets 3.VueHelper都是精华,接下来就可以愉快的玩耍了记得在全局安装eslint
-
axios学习笔记 GET请求// Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // Optionally the request above could also be done as axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });POST请求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });同时执行多个请求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) { // Both requests are now complete }));其实和其他的ajax库一样，基本用法都是差不多的。大家一看就知道怎么用。axios API可以直接通过config来完成请求axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); axios(url, [config]) // Send a GET request (default method) axios('/user/12345');请求方法别名下面是axios支持的所有请求方法别名，便于各种请求。注：[...]中的数据表示可以为空。url是ajax请求地址；data是提交的数据对象；config是配置对象，所有ajax配置都可以在config中实现。- axios.request(config) - axios.get(url[, config]) - axios.delete(url[, config]) - axios.head(url[, config]) - axios.post(url[, data[, config]]) - axios.put(url[, data[, config]]) - axios.patch(url[, data[, config]])并发性下列接口用于处理并发请求(同时处理多个多个request)- axios.all(iterable) - axios.spread(callback)axios实例可以用自定义的config创建一个axios实例axios.create([config]) var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} });实例方法下面是实例的所有可用方法，方法中的config会与axios实例中的config合并。（实例可以将一些通用的config先配置好）- axios#request(config) - axios#get(url, [config]) - axios#delete(url, [config]) - axios#head(url, [config]) - axios#post(url[, data[, config]]) - axios#put(url[, data[, config]]) - axios#patch(url[, data[, config]]) Config重点来了，来看看Config。下面列出了config的所有配置项，其中之后url是必填的。当method没有指定方法，默认为GET。{ // `url` is the server URL that will be used for the request // 用来向服务器发送请求的url url: '/user', // `method` is the request method to be used when making the request // 请求方法 method: 'get', // default // `baseURL` will be prepended to `url` unless `url` is absolute. // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs // to methods of that instance. // 假如`url`不是绝对路径，那么向服务器发送请求的URL将是`baseURL + url` baseURL: 'https://some-domain.com/api/', // `transformRequest` allows changes to the request data before it is sent to the server // This is only applicable for request methods 'PUT', 'POST', and 'PATCH' // The last function in the array must return a string, an ArrayBuffer, or a Stream transformRequest: [function (data) { // Do whatever you want to transform the data return data; }], // `transformResponse` allows changes to the response data to be made before // it is passed to then/catch transformResponse: [function (data) { // Do whatever you want to transform the data return data; }], // `headers` are custom headers to be sent headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` are the URL parameters to be sent with the request // Must be a plain object or a URLSearchParams object params: { ID: 12345 }, // `paramsSerializer` is an optional function in charge of serializing `params` // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data` is the data to be sent as the request body // Only applicable for request methods 'PUT', 'POST', and 'PATCH' // When no `transformRequest` is set, must be of one of the following types: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream data: { firstName: 'Fred' }, // `timeout` specifies the number of milliseconds before the request times out. // If the request takes longer than `timeout`, the request will be aborted. timeout: 1000, // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default // `adapter` allows custom handling of requests which makes testing easier. // Return a promise and supply a valid response (see [response docs](#response-api)). adapter: function (config) { /* ... */ }, // `auth` indicates that HTTP Basic auth should be used, and supplies credentials. // This will set an `Authorization` header, overwriting any existing // `Authorization` custom headers you have set using `headers`. auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` indicates the type of data that the server will respond with // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName` is the name of the http header that carries the xsrf token value xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress` allows handling of progress events for uploads onUploadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `onDownloadProgress` allows handling of progress events for downloads onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `maxContentLength` defines the max size of the http response content allowed maxContentLength: 2000, // `validateStatus` defines whether to resolve or reject the promise for a given // HTTP response status code. If `validateStatus` returns `true` (or is set to `null` // or `undefined`), the promise will be resolved; otherwise, the promise will be // rejected. validateStatus: function (status) { return status >= 200 && status < 300; // default }, // `maxRedirects` defines the maximum number of redirects to follow in node.js. // If set to 0, no redirects will be followed. maxRedirects: 5, // default // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http // and https requests, respectively, in node.js. This allows to configure options like // `keepAlive` that are not enabled by default. httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy' defines the hostname and port of the proxy server // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and supplies credentials. // This will set an `Proxy-Authorization` header, overwriting any existing `Proxy-Authorization` custom headers you have set using `headers`. proxy: { host: '127.0.0.1', port: 9000, auth: : { username: 'mikeymike', password: 'rapunz3l' } }, // `cancelToken` specifies a cancel token that can be used to cancel the request // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }) }分析Config配置参数很多，我们一个一个来了解它们url —— 用来向服务器发送请求的urlmethod —— 请求方法，默认是GET方法baseURL —— 基础URL路径，假如url不是绝对路径，如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL + url。transformRequest —— transformRequest方法允许在请求发送到服务器之前修改该请求，此方法只适用于PUT、POST和PATCH方法中。而且，此方法最后必须返回一个string、ArrayBuffer或者Stream。transformResponse —— transformResponse方法允许在数据传递到then/catch之前修改response数据。此方法最后也要返回数据。headers —— 发送自定义Headers头文件，头文件中包含了http请求的各种信息。params —— params是发送请求的查询参数对象，对象中的数据会被拼接成url?param1=value1¶m2=value2。paramsSerializer —— params参数序列化器。data —— data是在发送POST、PUT或者PATCH请求的数据对象。timeout —— 请求超时设置，单位为毫秒withCredentials —— 表明是否有跨域请求需要用到证书adapter —— adapter允许用户处理更易于测试的请求。返回一个Promise和一个有效的responseauth —— auth表明提供凭证用于完成http的身份验证。这将会在headers中设置一个Authorization授权信息。自定义Authorization授权要设置在headers中。responseType —— 表示服务器将返回响应的数据类型，有arraybuffer、blob、document、json、text、stream这6个类型，默认是json类似数据。xsrfCookieName —— 用作 xsrf token 值的 cookie 名称xsrfHeaderName —— 带有 xsrf token 值 http head 名称onUploadProgress —— 允许在上传过程中的做一些操作onDownloadProgress —— 允许在下载过程中的做一些操作maxContentLength —— 定义了接收到的response响应数据的最大长度。validateStatus —— validateStatus定义了根据HTTP响应状态码决定是否接收或拒绝获取到的promise。如果 validateStatus 返回 true (或设置为 null 或 undefined ),promise将被接收;否则,promise将被拒绝。maxRedirects —— maxRedirects定义了在node.js中redirect的最大值，如果设置为0，则没有redirect。httpAgent —— 定义在使用http请求时的代理httpsAgent —— 定义在使用https请求时的代理proxy —— proxy定义代理服务器的主机名和端口，authcancelToken —— cancelToken定义一个 cancel token 用于取消请求Response当我们ajax获取数据成功后会返回一个response对象，它包含了以下内容：{ // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the headers that the server responded with headers: {}, // `config` is the config that was provided to `axios` for the request config: {} }response是通过promise的then方法来获取,具体使用方法如下：axios.get('/user/12345') .then(function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); });相对的，我们有时也会出现ajax报错，此时就会到我们的catch中去捕获异常error对象。
-
获取Date中的月份中的天数 getDays(str) { //构造当前日期对象 var date = new Date(str); //获取年份 var year = date.getFullYear(); //获取当前月份 var mouth = date.getMonth() + 1; //定义当月的天数； var days; //当月份为二月时，根据闰年还是非闰年判断天数 if (mouth == 2) { days = year % 4 == 0 ? 29 : 28; } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) { //月份为：1,3,5,7,8,10,12 时，为大月.则天数为31； days = 31; } else { //其他月份，天数为：30. days = 30; } return days; },
-
vue在子组件内改变父组件的属性 .sync 方式在使用vue.js创建多页时有效，但是使用vue.esm.js时无效今天我在开发组件时，遇到一个问题，我想在子组件内改变父组件的属性，查阅了官方文档之后，我发现Vue重新引入了 .sync修饰符，但是刚用就发现了个坑。没有同步！没有同步！没有同步！重要的事情说三遍。我使用的是vue.esm.js这是父组件中的一段pug代码calendar(:show.sync="show", @export="exportDate")这是子组件的部分代码this.$emit('update:show', false);然而并没有什么软用。通过Chrome Devtools，我检测到了update:show的事件一直被触发。但是show属性一直都没有改变。摒弃这种语法糖后，我直接按照语法糖转化后的写法calendar(:show="show", @export="exportDate", @update:show="val => show = val")最后我通过官方指导的扩展后的写法，发现能实现数据的改变。在网上查阅了很多资料，发现并没有类似的问题（当然除了在我之前有个英文的提问，讲到了同样的问题）不知道大家有没有遇到过这类问题，并且知道缘由的。PS: 我使用unpkg的vue.js 2.3.3 并没有出现这类问题，代码能正常识别.sync的语法糖。
-
闭包 闭包是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。概念要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 另一方面，在函数外部自然无法读取函数内的局部变量。但是通过闭包，可以在函数外面访问到内部的变量！比如: function foo(){ var b; //在foo函数不能访问bau函数的变量. function bau(){ var a = 1; b = a; //但是在bau函数可以访问foo函数的变量. } //但是我不变量a赋给了变量b bau(); console.log(b); } foo();函数bau就被包括在函数foo内部，这时foo内部的所有局部变量，对bau都是可见的。但是反过来就不行，bau内部的局部变量，对foo就是不可见的。 这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。 所以，父对象的所有变量，对子对象都是可见的。 所以，我们说的闭包，就是能够在外部访问函数内部的函数。本质上，闭包就是将函数内部和函数外部连接起来的一座桥。这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！ 闭包的作用闭包的主要作用就是,减少全局污染,把变量和方法私有化. 比如: 方法的私有化 function foo(){ var a = 9; f1 = function(){ a+=1; } function bau(){ console.log(a); } return bau; } var fn = foo(); fn(); //9 f1(); fn(); //10这段代码中值得注意的地方，就是"f1=function(){a+=1}"这一行，首先在f1前面没有使用var关键字，因此f1是一个全局变量，而不是局部变量。 其次，f1的值是一个匿名函数，而这个匿名函数本身也是一个闭包，f1可以在函数外部对函数内部的局部变量进行操作。在这段代码中，结果实际上就是闭包bau函数。它一共运行了两次，第一次的值是9，第二次的值是10。这证明了，函数foo中的局部变量a一直保存在内存中，并没有在foo调用后被自动清除。原因就在于foo是f1的父函数，而f1被赋给了一个全局变量，这导致f1始终在内存中，而f1的存在依赖于foo，因此foo也始终在内存中，不会在调用结束后，被垃圾回收机制回收。 闭包注意点闭包会产生一个特定的作用域, 如果使用不当会得到一个错误的结果. 在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 总结:1.闭包的体现函数嵌套函数.2.闭包是一种作用域链特殊情况的体现.3.闭包主要用来属性和方法的私有化封装.4.延迟资源回收.
