lznism / notes Goto Github PK

首先我们需要搞清楚，我们为什么需要进行文件的压缩与合并？压缩与合并的原因主要有两点

• 减少HTTP请求数
• 减小HTTP的请求大小
  这里的主要优化方式有3点：
• HTML/CSS/JS文件的压缩
• CSS/JS文件的合并
• 开启GZIP压缩

如何进行HTML压缩

1. 使用在线网站压缩
2. html-minifier工具
3. 后端模板引擎渲染时压缩

如何进行CSS压缩

1. 使用在线网站压缩
2. 对于html中的css可以使用html-minifier压缩
3. clean-css工具

为什么要进行js压缩与混乱

1. 无效的字符删除
2. 删除注释
3. 代码语义的缩减和优化
4. 代码保护

如何进行js的压缩

1. 使用在线网站进行压缩
2. 对于html中的css可以使用html-minifier压缩
3. uglifyjs2工具

如何进行js的合并

1. 手动进行合并
2. 使用webpack，gulp等工具

文件合并带来的优势

1. 假设我们未合并之前，有N个JS文件，文件的合并我们可以减少N-1上行的HTTP请求
2. 减轻了丢包问题的影响
3. 减少了经过代理服务器时断开的可能

文件合并存在的问题

1. 由于文件全部被合并到一个js文件中，那么首屏渲染时就需要将完整的js文件下载下来，然后才能渲染首屏，这样增加了首屏渲染的时间
2. 由于文件合并时，文件的md5戳会发生变化，从而导致缓存失效的问题

如何有效的规避文件合并带来的问题

1. 可以将项目的第三方依赖打到一个common chunks中，这样不会每次打包都会改变这个文件的md5戳

转载声明: 请注明本文引用自http://www.cnblogs.com/guolizhi/

css中-webkit-line-clamp这个属性表示超过指定行的文本隐藏并且会在结尾加上...号，用起来十分快捷。但是该属性只支持Chrome，在IE, FireFox下都无效。
解决方案：可以用一种比较这种的方式来处理

p {
    height: 3.6em;
    font-size: 16px;
    color: #999;
    line-height: 1.8;
    overflow: hidden;
    position: relative;

    &:after {
        content: '';
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10%;
        height: 1.8em;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    }
}

效果如图:

上面的代码给p元素上面添加了一个伪类。并且让这个伪类采用绝对定位，定位至文本结尾处。
超过的部分可以使用overflow:hidden隐藏。并且结果部分用一个渐变效果遮盖
以上就是这种比较这种的解决方式

npm run eject 配置webpack

对象也支持扩展运算符

url中使用参数this.props.match.params.XXX

Switch只命中匹配到的第一个组件

React判断一个元素是HTML元素还是React元素就是看第一个字母是大写还是小写。

JSX使用的是事件委托，在DOM树上面只挂载一个事件处理函数，挂在顶层的DOM节点上。所有的点击事件都被这个事件捕获，然后根据特定的组件分配给特定的函数

组件unmount的时候清除相关事件处理函数

npm run eject是不可逆的

React利用虚拟DOM，让每次渲染都只重新渲染最少的DOM元素

Virtual DOM是对真实DOM的抽象

拆分组件最关键的就是确定组建的边界，每个组件都应该是可以独立存在的，如果两个组件的逻辑太紧密，无法清晰定义各自的职责，那也许这两个组件本身就不该被拆开，而是用作同一个组件更为合理

• 低耦合
• 高内聚

super(props)的作用是给this.props赋值，否则就不能访问到父组件传递过来的props

propTypes虽然在开发阶段发现代码中的问题，但是放在产品环境中就不太合适了。

this.setState干的事情，首先是修改状态，其次是驱动组件经历更新过程

不允许直接修改props的值，修改props的值是一个副作用，组件应该尽量避免

定义组件构造函数的目的

• 初始化state
• 绑定成员函数的this环境

如果一个组件没有任何需要渲染的东西，可以返回null或者false,render函数是一个纯函数，不能在这个函数里面做任何有副作用的操作，比如setState

服务端渲染没有componentDidMount的生命周期，因为服务端渲染并不会真正的产生DOM树

componentWillRecieveProps()只要父组件的render方法被调用，这个生命周期钩子就会被调用。并且这个里面不能再次setState，否则会造成死循环

this.forceUpdate()可以强制让组件更新

shouldComponentUpdate() 决定了组件是不是要重新渲染，返回一个布尔值；true就继续渲染，false就停止更新。这个生命周期方法可以大大提高react的运行速度

正常情况下，服务端不会调用react的componentDidUpdate方法

定义defaultProps如果需要定义一个啥都不做的函数，需要写 onUpdate: f => f

多层组件嵌套，如果用props传递数据就显得非常复杂，组件之间的耦合也会加深

借助virtual dom，react能够计算出对DOM树的最小修改，这就是react默认情况下渲染都迅捷的秘诀

服务端渲染：前端代码可以直接在服务端做渲染，进而达到在同步请求HTML时，直接返回渲染好的页面

服务端渲染的好处：

• 利于SEO
• 加速首屏渲染
• 服务端和客户端可以共享某些代码，避免重复定义。react-dom/server可以让React组件以字符串的形式渲染

服务端渲染的两个主要方法

• React.renderToString 会直接在服务端标识reactid，在浏览器端渲染时只用绑定事件等前端操作
• React.renderToStaticMarkup 使用这个方法生成的HTML字符串没有reactid

urllib模块设置代理

如果我们频繁用一个IP去爬取同一个网站的内容，很可能会被网站封杀IP。其中一种比较常见的方式就是设置代理IP

from urllib import request
proxy = 'http://39.134.93.12:80'
proxy_support = request.ProxyHandler({'http': proxy})
opener = request.build_opener(proxy_support)
request.install_opener(opener)
result = request.urlopen('http://baidu.com')

首先我们需要构建一个ProxyHandler类，随后将该类用于构建网页代开的opener的类，最后在request中安装opener

requests模块使用代理

该模块设置代理非常容易

import requests
proxies = {
    'http': 'http://10.10.1.10:3128',
    'https': 'http://10.10.1.10:1080'
}
r = requests.get('http://icanhazip.com', proxies=proxies)

angular中没有以前老版本的ng-show，因此元素直接使用ngStyle或者ngClass

ngSwitchDefault是可选的，如果没有匹配到，则不渲染任何值

[style.fontSize.px]来指定font-size的单位是px

在对数组进行迭代时，如果需要获取每一项的索引，可以使用let idx = index

如果某个部分不想让angular编译，可以使用ngNonBindable

angular对于表单的解决方案

• FormControl
• validator
• observer

import module之后就可以使用该module中的所有指令

ngForm做了一件隐晦的工作，他的选择器包含form标签。这意味着当我们导入formModule时候，ngForm就会被自动附加到视图中所有的<form>上

下面代码中#f="ngForm"为视图中的ngForm指定了一个别名，并且绑定到变量f

<form #f="ngForm"></form>

当我们使用不带有属性值的ngModel时，我们是要指定单向数据绑定以及希望在表单中创建一个名为sku的formControl

为一个字段添加多个验证器可以使用Validator.compose()来实现，只有里面的多个验证器都合法时，FormControl才是合法的

表单里面的要点就是要学会使用FormGroup, FormControl, Validation

在不需要新请求的情况下，允许在代码中创建新的浏览器记录项并显示适当的url，这是利用history.pushState()来实现的，在不支持上述方法的时候，会被迫使用锚点进行标记

依赖注入可以提供一个更加松耦合的架构

简单的爬虫

from urllib.request import urlopen
html = urlopen('http://pythonscraping.com/pages/page1.html')
print(html.read())

上述代码就会获取该网页的全部的HTML代码。

使用beautifulSoup来解析HTML文档

from urllib.request import urlopen
from bs4 import BeautifulSoup
html = urlopen('http://pythonscraping.com/pages/page1.html')
# 这里需要指定html.parser，否则会报No parser was explicitly specified的warning
bsObj = BeautifulSoup(html.read(), 'html.parser')
print(bsObj.h1)

在网络连接不可靠时

如果我们在urlopen一个不可靠的连接时，也许是因为服务器上不存在这个页面，也许是目标服务器宕机等原因。那我们的爬虫程序就会抛出异常
因此我们需要一个完备的异常处理机制

try:
    html = urlopen('http://pythonscraping.com/pages/page1.html')
except HTTPError as e:
    print(e)
else:
    # 程序继续。注意：如果你已经在上面异常捕捉那一段代码里返回或中断 （ break），
    # 那么就不需要使用else语句了，这段代码也不会执行

或者在某些情况下如果一个标签不存在

try:
    html = urlopen(url)
except (HTTPError, URLError) as e:
    return None
try:
    bsObj = BeautifulSoup(html.read())
    title = bsObj.body.h1
except AttributeError as e:
    return None

上面的例子中，就处理了url打不开和获取不到标签信息的异常

BeautifulSoup应用

# 查找所有的class为green的span标签
nameList = bsObject.findAll('span', {'class': 'green'})
# 查找单条class为green的span标签
nameList = bsObject.find('span', {'class': 'green'})
# 获取标签内部的文本, get_text()方法会将标签全部清除，只剩下一段不带标签的文字
text = node.get_text()
# 查找一组标签
nodeList = bsObj.findAll({'h1', 'h2', 'h3'})
# 获取div后代所有的img标签
imgList = bsObj.div.findAll('img')
# 获取所有的子标签
childrenList = bsObj.find('table', {'id': 'giftList'}).children
# 获取后面的所有兄弟节点
siblingsList = bsObj.find('table').tr.next_siblings
# 获取前面的所有兄弟节点
previousList = bsObj.find('table').previous_siblings
# 获取某个元素的父标签
parent = bsObj.find('table').parent
# 获取某条属性
attr = myTag.attrs['src']
# 使用lamada表达式
soup.find(lambda tag: len(tag.attrs == 2))

在Beautiful中使用正则

images = bsObj.findAll("img",{"src":re.compile("\.\.\/img\/gifts\/img.*\.jpg")})

使用urllib库下载图片

主要方式是通过urlretrieve

from urllib.request import urlretrieve
from urllib.request import urlopen
from bs4 import BeautifulSoup
html = urlopen("http://www.pythonscraping.com")
bsObj = BeautifulSoup(html, "html.parser")
imgUrl = bsObj.find("a", {"id": "logo"}).find("img")["src"]
urlretrieve(imgUrl, "logo.png")

使用requests库做爬虫登录

import requests
params = {'firstname': 'Ryan', 'lastname': 'Mitchell'}
r = requests.post('http://pythonscraping.com/files/processing.php', data=params)
print(r.text)
# 获取授权cookie
r.cookies.get_dict()