坚持就是胜利------仅此记录每天学习的知识点
2018-5-7(周一)
sessionstorage.setItem(key, str)方法设置相同的key值,后者不会覆盖前者,getItem('key')值为两个字符串相加
跨域产生的原因包括(1、浏览器限制(前台请求发送和后端都返回数据了,就是浏览器限制)2、不在同一个局域网,比如端口不同;3、XmlHttpRequest请求(比如json请求就不会产生跨域))
解决跨域可以从两个方面入手1、服务端允许跨域;2、调用方隐藏跨域请求
1、服务端添加允许跨域的代码,比如在filter里添加请求头的相关代码(response.setHeader()方法,)
2、浏览器设置允许跨域
3、不用xhr请求,比如jsonp(缺点只有get请求)
4、中间服务器Nginx或apache配置代理请求
5、springboot 注解@CrossOrigin
xss攻击分为两类:1、反射型:在请求url参数中带标签(style:影响样式;script:增加脚本事件;Iframe:增加窗口),服务器解析后返回错误数据,浏览器显示错误,比如评论功能;2、储存型(脚本等存在数据库等中,sql)
解决:编码、过滤,校正。对用户的数据进行html Entity 编码,在转码过程中添加过滤,移除用户输入的dom 事件,比如onerror onclick,移除标签:style、script、Iframe,如果用默认的转码就加不了过滤代码。
2018-5-8(周二)
学习了一下Chrome浏览器调试工具,Sources查看js代码,断点调试;
js事件委托:利用事件冒泡,只指定一个事件处理程序,管理某一类型的所有事件。比如click 事件会一直冒泡到 document 层次。我们可以为整个页面指定一个onclick事件处理程序,不必给每个可单击的元素分别添加事件处理程序 。
2018-5-9(周三)
前端vue项目打包放在服务器后端项目里出现了ajax请求路径错误,原因是我在app下又加了一层子路由,请求路径写的相对路径,所以最终请求中间多了一层,导致404错误。解决方法把相对路径改为绝对路径就行。最终我放弃嵌套子路由,改为组件组合的方式。我觉得应该慎用子路由嵌套,可以把公用的提取出来写成组件,就不会出现路径错误。
浏览器输入网址比如www.baidu.com 解析顺序是从右往左。浏览器渲染页面首先把下载的静态资源解析成dom树(包括不可见的),再解析成render树(只是可见的),最后逐层解析dom。
2018-5-10(周四)
需求改了,整个页面结构都要改,好烦!!!
还好我页面数据结构比较清晰,改起来不是那么的麻烦。异步请求可以当做成promise对象,再用promise.all(array).then(resolved,rejected),所有异步请求都成功执行(返回resolved状态)或者有一个失败时(返回rejected状态)才会执行then回调。
优化两个方面:复用、加载(用户体验)
复用:css复用,尽量用外联样式,封装模块。
加载:同步加载,建立少量的tcp请求,将网站最想表现的logo或文字先展示,其他内容用异步加载。按需加载,用户触发加载。
session 是不存在的,就是服务器端的一个标记。比如登陆后,服务器端就会通过判断是否有session来和客户端进行会话保持;cookie保存在客户端,用于储存一些信息。
2018-5-11(周五)
新同事来首先应该把代码规范给说清楚,比如用单引号还是双引号,命名、注释、图片文件位置等
拿到项目时首先先分析模块,提出公用的模块做成可复用组件,比如弹窗、字体样式、校验方法、ajax请求失败后的返回;图片、代码分文件夹放置,不然到后期更改真的很难。主要就是前期多花点时间规划好。
2018-5-12(周六)
今天骑了一下午的自行车,锻炼了身体吧。
2018-5-14(周一)
新学习计划第一天(失败),没有6点钟起床,晚了半个小时!!!懒是原罪!!!
JSON.stringfy(): 可以传3个参数,第一个需要被转化的值;第二个可选:字符串如何被转化,可以是函数或字符串数组;第三个可选: 缩进
fetch:取得, defined: 定义, convert: 使...转换, current: 当前的, browsers: 浏览器, deal:处理, prehistoric: 陈旧的。
以前没有记录这个问题,今天又遇到了:
iview上传组件的before-upload 钩子接收的是一个函数,注释掉的的写法会把执行结果传回去,导致index是不变的,也就是js没有块级作用域的原因。
写前端项目前应该先与后端讨论确定好数据结构,更要理清项目的功能,用户的操作习惯,不能把用户当成程序员来设计功能实现。
git主要优点是pull request(协同办公),(公司太小没用过,哭!没有review代码的过程)。git 新建分支是新增了指向分支的指针而不是全部克隆。
2018-5-16(周二)
今天解决了前几天莫名其妙的一个问题,更新后端代码后请求出现400错误,错误信息还是‘no...’没有返回请求头。之后查看response返回中发现连接被close了,还有QQservice/tencent字样,我认为就是QQ软件把请求拦截了,把QQ软件服务关了就好了。
js 容易忽略的问题:ajax异步请求还没有返回值时就在下一步使用了当前返回值做判断或者运算,这样就会出现问题
git pull request 讨论代码,Issues可以讨论需求啥的(暂时没有解决方案),git还可以建立自己的网站。
2018-5-17(周三)
js判断undefined的方法: 1、typeof(val) == undefined(val为null 或者 val 为undefined是返回结果是一致的);2、typeof(val) == 'undefined'(只判断是否为undefined)
网络请求: 应用层--> 传输层--> 网络层-->链路层(客户端:加首部(封装))--> 链路层--> 网络层-->传输层-->应用层(服务器:减去首部)。
css 推荐的3本书《css权威指南》《精通css,高级web标准解决方案》《css secret》
2018-5-18(周四)
http状态码:
200: 请求成功,返回响应内容;204: 请求成功,但是没有内容返回; 206(范围请求): 请求成功,返回请求的部分内容。
301: 资源永久性重定向;302: 资源临时性重定向;303;资源有两个访问url,应当使用get方法定向请求该资源;304: 客户端请求带条件,服务器资源已找到,但是没有满足条件;307:临时重定向,与302不同的是302可以禁止把post变为get,但是大家都不遵守,307是强制不能把post转为get.
400: 请求报文中存在语法错误; 401: 发送的请求需要通过http认证; 403: 发送的请求被服务端拒绝了; 404(not found):请求的资源服务端没有找到.
500: 服务器内部发生错误; 503: 服务器忙或者正在维护,现在无法处理请求;
浏览器自动填充密码错位了, 把登录名填充到了密码的下一项位置,查询资料发现浏览器是通过input的type=‘password’来填充的,通过把type='password' 改为 type = 'text' οnfοcus='this.type = 'passwors'' 禁止浏览器自动填充(ie8> 不支持)
git 回滚到某个版本: git log 查看提交日志,复制需要回滚的版本id; git reset --hard 版本id; git push -f -u origin 分支名 推送到服务器
2018-5-19(周五)
看完了图解http,对http和https有了一个初步的了解,https就是在http的基础上加密,实现数据的安全传输。
优化方法:
@params : time( 毫秒数) function(需要执行的方法)
@return: function
debouce: 在指定的时间内重复某一动作(需要调用某一方法),使其只延时调用;(比如电梯关门,有人进来后再重复延时几秒关闭)
throttle:在指定的周期内只调用一次方法(比如公交车按时出站,一个周期只出一班车)
2018-5-21(周一)
自己挖的坑自己花时间填: 项目前期没有和后端统一字段命名,数据格式,现在改起来好麻烦
类型选择器(元素选择器: p、h1) 后代选择器(p span) 类选择器(.class) ID选择器(#ID) 通用选择器 * (匹配所有)
高级选择器:
1. 子选择器 div >p 匹配div下第一层p标签 可以通过通配符完成子选择器
2. 相邻同胞选择器 + 匹配一个元素的下一个元素
3. 属性选择器 img[title] 匹配有该属性的元素
层叠重要度次序 : 标有 !important 的用户样式 > 标有 !important 的作者样式 > 作者样式 > 用户样式 > 浏览器/用户代理的样式
特殊选择器的样式 > 一般选择器的规则 规则相同 则后定义的优先 详情可以查询《精通CSS 高级web标准解决方案》
使用dom Ready(速度快,提高用户体验) 不使用 window.onload
2018-5-22(周二)
清除浮动和垂直居中,方法有多种,不过目前我只用过flex布局、clear清除浮动,还有用:after清除浮动、父元素overflow:hidden 等,需要慢慢研究
2018-5-25(周五)
CSRF: 跨站点请求伪造
检查是否为数组用 instanceof Array
2018-5-28(周一)
“别 用 accountList 来 指 称 一 组 账 号, 除 非 它 真 的 是 List 类 型”。 那我以前的命名都有问题,比如diskList、IPList等 应该改为disks或diskGroup
2018-6-7(周四)
es6数组去重:Array.from(new Set(arr)) [...new Set(arr)]
2018-6-19(周二)
图形工具 ==> 正则 https://github.com/javallone/regexper-static
() 分组,$1/$2 反向代替分组