web相关

  1. 1. js对象的定义
  2. 2. 原型继承
  3. 3. 浏览器渲染过程
  4. 4. 写好HTML应该会有下面的要点
  5. 5. notice
  6. 6. 操作系统
  7. 7. WEB服务
  8. 8. 打开网页时发生了什么
  9. 9. 一个HTTP响应由三部分组成
  10. 10. Laravel Resources
  11. 11. MVC
  12. 12. cookie 问题
  13. 13. 测试
  14. 14. 可读的代码
  15. 15. https
  16. 16. XSS(Cross-Site Script)
  17. 17. Http-Only
  18. 18. 其它

js对象的定义

无序属性的集合，其属性可以包含基本值、对象或者函数
一个Javascript函数也是一个对象，并且，所有的对象从技术上讲也只不过是函数

1
2
3
4
5
6
7
8
9
var Person=function(){
    this.name="phodal";
    this.weight=50;
    this.height=166;
    this.future=function dream(){
        return "future";
    };
};
var person=new Person();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var calc={
    add: function(a,b){
        return a+b;
    },
    sub: function(a,b){
        return a-b;
    },
    dif: function(a,b){
        if(a>b){
            return a;
        }else{
            return b;
        }
    }
}
1
2
3
4
5
6
7
8
9
function Calc(){
}
Calc.prototype.add=function(a,b){
    return a+b;
};
Calc.prototype.sub=function(a,b){
    return a-b;
};

原型继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Chinese=function(){
    this.country="China";
}
var Person=function(name,weight,height){
    this.name=name;
    this.weight=weight;
    this.height=height; 
    this.futrue=function(){
        return "future";
    }
}
Chinese.prototype=new Person();
var phodal=new Chinese("phodal",50,166);

浏览器渲染过程

  • 解析HTML去构建DOM树
  • 渲染树形结构
  • 生成渲染的树形图布局
  • 绘制树形图

第一步 Parse HTML，而 Parse HTML 实质上就是将其将解析为 DOM Tree。与此同时，CSS 解析器会解析 CSS 会产生 CSS 规则树。
随后会根据生成的 DOM 树和 CSS 规则树来构建 Render Tree，接着生成 Render Tree的布局，最后就是绘制出 Render Tree。

写好HTML应该会有下面的要点

  • 了解标准及遵守绝大多数标准
  • 注重可读性，从ID及CLASS的命名
  • 关注SEO与代码的联系

notice

  • 对于行内非替换元素，其占用空间（行高）由 line-height 决定，即使有内边距与边框。

操作系统

以现代标准而言，一个标准PC的操作系统应该提供以下的功能：

+ 进程管理（Processing management）
+ 内存管理（Memory management）
+ 文件系统（File system）
+ 网络通信（Networking）
+ 安全机制（Security）
+ 用户界面（User interface）
+ 驱动程序（Device drivers）

WEB服务

WEB服务实际上是一组工具，并有多种不同的方法调用之。三种最普遍的手段是：

+ 远程过程调用（RPC）
+ 面向服务架构（SOA）
+ 表述性状态转移（REST）

HTTP是用于客户端与服务端之间的通信。
传输层的TCP是基于网络层的IP协议的,而应用层的HTTP协议又是基于传输层的TCP协议的。

打开网页时发生了什么

  • 浏览器需要查找域名的IP，从不同的缓存直至DNS服务器。
  • 浏览器会给web服务器发送一个HTTP请求
  • 服务器“处理”请求
  • 服务器发回一个HTML响应
  • 浏览器渲染HTML到页面。

StackOverflow’s Answer:

  • browser checks cache; if requested object is in cache and is fresh, skip to #9
  • browser asks OS for server’s IP address
  • OS makes a DNS lookup and replies the IP address to the browser
  • browser opens a TCP connection to server (this step is much more complex with HTTPS)
  • browser sends the HTTP request through TCP connection
  • browser receives HTTP response and may close the TCP connection, or reuse it for another request
  • browser checks if the response is a redirect (3xx result status codes), authorization request (401), error (4xx and 5xx), etc.; these are handled differently from normal responses (2xx)
  • if cacheable, response is stored in cache
  • browser decodes response (e.g. if it’s gzipped)
  • browser determines what to do with response (e.g. is it a HTML page, is it an image, is it a sound clip?)
  • browser renders response, or offers a download dialog for unrecognized types

一个HTTP响应由三部分组成

  • 状态行(状态码)
  • 消息报头(响应报头)
  • 响应正文(消息体)

互联网上的一切信息都可以看作是一种资源。

Laravel Resources

Verb Path Action Route Name
GET /resource index resource.index
GET /resource/create create resource.create
POST /resource store resource.store
GET /resource/{resource} show resource.show
GET /resource/{resource}/edit edit resource.edit
PUT/PATCH /resource/{resource} update resource.update
DELETE /resource/{resource} destroy resource.destroy

MVC

在 Controller 层应该做的事:

  • 处理请求的参数
  • 渲染和重定向
  • 选择 Model 和 Service
  • 处理 Session 和 Cookies

控制器层起到不同层面间的组织作用，用于控制应用程序的流程。

业务是善变的,Controller 是不容易变化的

模型用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法

Cookie 存在一些明显的问题：不支持跨域、并且不是无状态的、不能使用CDN、与系统耦合等等

JSON Web Token (JWT) 是一种基于 token 的认证方案

测试

一般来说，自动测试应该从两部分考虑：

  • 单元测试
  • 功能测试

可读的代码

  • 确保我们的变量名、函数名是易读的
  • 没有复杂的逻辑判断
  • 没有多层嵌套 (事不过三)
  • 减少复杂函数的出现（如,不超过三十行）
  • 然后，你要去测试它。这样你就知道需要什么，实际上要做到这些也不是一些难事

短的精巧的函数有以下的特点：

  • 如果每个函数的粒度都很小，那么函数被复用的机会就更大；
  • 是这会让高层函数读起来就像一系列注释一样，容易理解；
  • 是如果函数都是细粒度，那么函数的复写也会更加容易。

在提炼函数中我们所要做的就是——判断出原有的函数的意图，再依据我们的新意图来命名新的函数。然后判断依赖——变量值，处理这些变量。提取出函数，再对其测试。

Intellij IDEA 提炼函数:

Mac: alt+command+M
Windows/Linux: Ctrl+Alt+M
鼠标: Refactor | Extract | Method

内联函数:

Mac: alt+command+N
Windows/Linux: Ctrl+Alt+N
鼠标: Refactor | Inline

查询取代临时变量:

Refactor | Replace Temp with Query

https

http 协议下的网络连接都是基于明文的，信息很有可能被泄露篡改
理论上 https 是安全的

XSS(Cross-Site Script)

跨站脚本攻击本质上是一种注入攻击
简单的说就是利用各种手段把恶意代码添加到网页中，并让受害者执行这段脚本。 XSS 能做用户使用浏览器能做的一切事情。可以看到同源策略无法保证不受 XSS 攻击，因为此时攻击者就在同源之内。

可以分为以下两类：
client(客户端型)
server(服务端型)
当一端 XSS 代码是在服务端被插入的，那么这就是服务端型 XSS ，同理，如果代码在客户端插入，就是客户端型 XSS 。

其实只要做好无论任何情况下保证代码不被执行就能完全杜绝 XSS 攻击
任何时候都不要把不受信任的数据直接插入到 dom 中的任何位置,一定要做转义。

Http-Only

使用 Http-only 保护 cookie ，可以保证即使发生了 XSS ，用户的 cookie 也是安全的。使用 Http-only 保护的 cookie 是不会被 javascript 读写的。

其它

  • textarea 的值通过 innerHTML 属性获取不了，得通过 value属性
  • 获取父窗口: window.opener.document
  • 根据 document.attachEvent 可判断出是否为 ie