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

##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

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