11月04, 2014

一周培训总结

庆幸当初的选择,珍惜现在的好机会,持之以恒,坚持~干巴爹 电子版培训笔记,未展开赘述..

##20141104

###大话重构 - by小强

要看的几篇内容

  • HTML5设计原理
  • 面向对象的css
  • 打败ie的葵花宝典

嵌套规则:块级可嵌套所有行内元素,除了a标签之外的所有行内元素,不可嵌套块元素

不要给id,class指定标签名

只有在必要时才将class限制在最近的父元素内??(如何理解)

基于web标准的网站:

  • 语义化
  • 结构,界面,行为相分离

层叠:

  • 一层套一层的样式
  • 优先级

高性能HTML:

  • 指定文档字符集
  • 避免空链接属性
  • 避免嵌套层次过深

分享PPT,7969

编写可阅读的代码 - by LC

  • 《人月神话》
  • 《大教堂与集市》
  • 奥卡姆剃刀,不要过度设计 -> 原则上的取舍平衡
  • 德摩根定理
  • 边米特法则,最少知识法则,LKP
  • 别人理解所需时间最小化

分享PPT

##20141105

###Jquery开发- by岳文

选择器

  • jquery是用的选择器引擎是Sizzle,Sizzle的流程是,分隔表达式->查找元素->过滤元素;Sizzle总是选择先尽可能利用原生方法来查询选择来缩小待选范围,然后才会在待查找范围筛选元素。
  • jquery中css选择器总是从左向右查找,但是如果最右边的第一个选择器中有id,那么就先找第一个,缩小范围后再继续从左向右找。
  • 查找原则就是尽可能的缩小检索范围(特异性越高,检索范围就越小)。一般情况下,ID数量小于NAME数量,NAME数量又小于TAG数量。因此判断顺序就是['ID','NAME','TAG']。
  • $( ":radio" ) == $( "[type=radio]" );在实际应用中,$( ":radio" ) == $( "*:radio" ); 所以建议,$( "input:radio" )这样更好。但是$( ":radio" )是jquery字定义的的,而[type="radio"]是采用了原生的querySelectorAll()实现,所以在现代浏览器中,建议使用[type="radio"]。
  • 自定义的选择器比原生的慢
  • querySelector 最慢,字符串->选择器
  • find(),filter()的区别 $('div').find('.rain'),在所有div元素内部查找class为rain的元素,组成一个集合。等同于$('div .rain') $('div').filter('.rain'),筛选出class为rain的所有div,组成一个集合。

属性

  • attr()与prop()的区别,可以参考这个
  • checked="checked"为例,attr("checked")与prop("checked")返回的值是? 简单说,对于值是true/false的property,如checked等可以动态改变,attr得到的是checked,而prop得到的是true;prop的改变不会 影响attr,但attr改变会影响prop 并且以版本1.6为界限,1.6之前,attr得到的是布尔值,并随着checkbox状态的变化而变化;1.6时,始终取得的是最开始checkbox的值,不会动态变化,并且为“checked”这样的字符串;1.6+,会随着checkbox状态的变化而变化,但是返回的是“checked”这样的字符串。 所以,浏览器兼容的判断checkebox是否被选中应该使用property

事件

  • js事件执行的过程,捕获阶段->目标阶段->冒泡阶段
  • attachEvent,addEventListener
  • bind/unbind, live/die, delegate/undelegate,on/off live其最终实现也是用的on

延迟对象

  • 分别异步A与B,拼装返回显示在页面??延迟加载
  • deffered对象

分享PPT

###HTTP- by屈屈

消息推送的方法

  • 轮询,浪费
  • 长轮询,服务端不处理,不返回,等着,挂着。facebook
  • webSocket, 双向通信

跳转

  • 301,永久重定向,客户端直接访问了B域
  • 302,临时重定向
  • 304

502,网关,服务端错误日志

代理,浏览器代替人手工发请求

X-*,自定义的属性

显示文档

  • 判断类型
  • 调用不同引擎
  • img,图片引擎

GET

  • 没有实体

POST

  • 有实体
  • 带content-length,如果最终的content的内容长度对不上会报错。

cookie

  • 服务端告诉客户端,下次发请求时要带的
  • session,是一个以key当索引,具体的东西放在缓存中,存放的位置: 内存->对象,重启会丢失 memery cache, 不利于分布式 数据库

domain,浏览器自己解决的????这是啥

几个与缓存相关的字段:

  • expires,绝对时间。如果客户端与服务器时间不准。
  • max-age,为了改进上面的问题,存的是相对时间
  • ETag,md5(文件内容),其值与时间无关 ,具体实现方式有不同,没有具体规定
  • expires,在这时间之间啊,浏览器都不应发请求
  • 优先用与时间无关的,或关系小的

gzip

  • 压缩传输内容,但是不会压缩图片,因为图片本身就是压缩过的。
  • 比如原图4.8K,传的实际大小是5.6k,多出的0.8k,是请求头的大小。

长连接

  • HTTP/1.1,默认支持长连接
  • connection: keep-alive
  • 如果有connection:close,则不会有content-length,因为不需要判断内容是多长,读完即可关闭

.php文件大小 ,是它能输出内容的大小。因为php是动态语言 .js文件大小,因为是静态文件,它的大小就是其本身的大小。

  • 分块传输 Transfer-Encodeing:chunked 长度->内容->长度->内容....直到最后为长度为0时,标志着整个文件传输完成

几个问题?

  • 复用TCP时,如何知道每个文件的大小? 根据所读的content-length的值来判断,如果gzip了,那么就是gzip之后的大小。

  • 如果一个文件大小未知,又要保持长连接,如何做到? 分块传输,在正文中告诉长度

  • 能否做到构造IP? 不能,会把东西发到别人那儿。

  • POST是否真的是安全的? NO,内容都在正文里。抓包可获得 如何做到安全? https,在http之上,加了一层 VPN,整个网络 加token等等

PPT看这里看这里

##20141107

###移动webapp开发- by代平

web应用开发

  • 分辨率
  • CPU/GPU
  • 传感设备

尽量用css3还原设计图,而不是用图

click的300ms延时,原因?

  • click->touch,touched后才出发click,系统需要确认确实是click事件

mobile开发时,jquery动画效率不高,因为底层没有用transform来实现,zepto好点

单页,多页复杂

###XSS- by成银

先来一个问题:

  • 转义?when?how?
  • 过滤?when?how?

XSS的分类

  • 反射,提前闭合标签,执行恶意js
  • 存储
  • dom,setTimeout,setInterval,可以传string,如果string里有标签

不要轻信用户的任何输入!! 尽量还原用户输入

使用模板时,进行校验:

  • 入库不做处理
  • 逻辑层不做处理
  • 所有过滤,转义都应在模板里进行->FE
  • 因为逻辑层无法知道变量在模板里的环境(属性?js变量?标签?)

tips:js里的‘/’需要转义,为了防止在正则里,页面不可用

分享PPT

##20141108

###构建可复用的组件- by瓜瓜

一个好组件的特性

这次先看PPT

  • 易用
  • 一致:代码风格
  • 灵活: 可扩展
  • 可读:逻辑清晰

可扩展性 css,js,都不要太具体,只有必须的才写上

比如一个轮播图

  • 基础的只有切换
  • 怎样的切换效果,通过继承来使用

###各种好用的开发工具- by文博

todo: 好多需要实践的,待实践后补充

调试

  • $ in console,$ 代表 document.querySelector(css选择器)
  • $$,document.querySelectorAll(css选择器)
  • 先选中元素,再console,$0=选中的这个元素

分享PPT

写在最后的话: 这里只记录了分享时的点,并没有详细解释很多,每一个点都可以展开深入了解很多。 分享者所分享的内容,都是经过自己沉淀积累得来的,可能有些地方也未必就是真理,但是至少,给我们提供了一个大方向和可以借鉴的学习方法论 总之,还是那句话,我们要形成自己的见解和看法,别人的经验未必适用于自己

本文链接:https://imjiaolong.cn/post/share-copy.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。