My-Note-Blog
My-Note-Blog copied to clipboard
huangchucai
主要生活blog
###### 人生就像一列开往坟墓的列车，路途上会有很多站，很难有人至始至终陪你走完全程，当陪你的人要下车时，即便不舍，也要心存感激，然后挥手告别。---sunnyhuang --- ## HTTP ### 1. OSI 七层模型指什么  开放式系统互联通信参考模型(OSI) > 主机层 > > Data(数据层）7.应用层 6. 表示层 5.会话层 > > Segments(数据段) 4.传输层 > > > > 媒介层 > >...
## OAuth2.0理解 **需求来源分析**：当我们在自己开发的网站中，需要让用户可以通过第三方登录，我们肯定想让用户直接用第三方的账号和密码在我们自己的登录页面登录，然后让第三方服务器来返回用户的个人数据。但是这样第三方服务器肯定觉得这样不安全，凭什么我的用户的账号和密码要给你，并且还给你用户数据，那你保存起来，那就是盗取了我的用户资料，干一些羞羞的事情怎么搞？ 在这样的一个背景下，就需要一种**授权**标准孕育而生，让开发网站者可以在不使用账号密码的情况下，通过一个**令牌**来获取第三方服务器的个人数据。 ### 原理 OAuth2.0通过一个中间的授权机制，来满足需求。  1. 第三方客户端(自己开发的网站)发送授权请求给**用户**。 2. 用户点击同意授权。 3. **客户端**通过上一步获得的授权，去向**认证服务器**获取令牌。 4. 认证服务器根据判定授权，确定无误后，返回给客户端令牌。 5. 客户端利用令牌向第三方服务器发送请求。 6. 第三方服务器确定令牌正确后，返回相应的资源。 ### 微信公众号实战 ##### 前期工作 1. 获取测试号 [测试号链接地址](https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login) 2. 申请了测试号后，可以获得`appId`和`appsecret` 3....
# webpack文档高级配置 主要从下面几个方面讲解： 1. webpack的生产配置环境 2. webpack的优化机制 - 模块分离 - 按需加载 - 第三方模块利用缓存 3. webpack的部分插件 ## webpack的生产配置构建 在开发一个项目的时候，我们往往需要几个环境的切换，例如：开发(dev)，生产(production)， 测试(test),这里主要讲解开发和生产中的环境配置，`webpack`官方推荐我们将公共的基本配置放在一起，然后对开发和生产进行不同的配置文件，通过官方提供的插件`webpack-merge`进行配置的合并，然后通过webpack编译生产。 > `webpack.common.js` // 通用文件 > > `webpack.dev.js` // 开发文件 > >...
# 图片的上传和压缩 **前言：** 楼主之前一直对图片上传感到很好奇，我们怎么得到上传的文件呢？然后怎么显示给用户呢？怎么上传给服务器呢？ ## 1.input的file类型 ```html ``` HTML5新增了的input 为file的输入框，可以上传文件，并且把文件放到计算机缓存中，方便我们之后的获取和使用。我们可以通过监听上传图片后触发的`change`事件，来获取对应的`value`和`files` #### value(string) 一般的类型的输入框我们都会先研究它的`value`的值, `type=file`的value有点不一样，由于没有输入内容，只是上传文件，所以可以联想到可能和文件名有关系。 ```javascript // 如果是单个文件的话，ipt.value = C:\fakepath\文件名 如果是多个文件的话，ipt.value = C:\fakepath\文件名(文件的第一个) //eg：我们上传的图片的文件名为1.jpg => ipt.value = 'C:\fakepath\1.jpg' ``` #### files属性(object)...
# underscore源码解析 [源码地址](http://www.bootcss.com/p/underscore/docs/underscore.html) ### &&和||返回值解析 经常我们在项目中会使用条件判定，`&&`必须2边都是`true`的时候，才会返回`true`, `||`有一边是`true`就返回`true`, 很少关心是否它的返回值，因为`if`语句会自动转换成布尔值。下面我们来讨论下，它不转换成布尔值的时候返回的值 ``` javascript // && true && 3 => 3 false && 2 => false 0 && false => 0 // || false...
前端刷题总结
# 前端刷题总结 ### 第一题 ##### 题目： 实现一个flatten函数，将一个嵌套多层的数组 array（数组） (嵌套可以是任何层数)转换为只有一层的数组，数组中元素仅基本类型的元素或数组，不存在循环引用的情况。 ```javascript flatten2([1,2,[11],['fff',['aa',['bb']]]]) => [1, 2, 11, "fff", "aa", "bb"] ``` ##### 解法一： ```javascript // 解法一 function flatten(arr) { let newarr =...
## 前端工程化实现 本文主要通过4个点来讲述现在前端的工作开发流程 1. css加前缀 2. js语法检查 3. 压缩 4. ES6 => ES5 ### CSS自动加前缀 我们一般使用autoprefixer来给我们写的css自动添加前缀，来配合不同浏览器的区别。 [aotoprefixer官网](https://github.com/postcss/autoprefixer) 介绍了它是`postcss`的一个插件，所以我们可以通过postcss来使用`autoprefixer`来自动添加前缀。[postcss官网链接](https://github.com/postcss/postcss) 介绍了怎么使用autoprefixer **npm run/cli** To use PostCSS from your command-line interface or with...
### webpack2详解 #### 1. 项目小工具 - anywhere ```javascript npm i -g anywhere //全局安装anywhere // 使用 1. 在相应的目录下面启动anywhere命令行 ``` - 命令行小技巧 ```javascript anywhere & //释放当前命令行，生成一个id,一直执行anywhere ``` - jobs 查看你目前命令行的工作进程 ...
# cookie和CSRF、xss攻击 ## cookie是什么 > 首先需要明白的是， > > 1. cookie是储存在浏览器中的一段字符串，它本身是没有任何危害的，不包含任何可执行的代码。 > 2. 储存cookie是**浏览器的功能**，浏览器的安装目录下会有一个专门存放不同域名下的**cookie**的文件夹。 > 3. 当网页发起**http请求**的时候，浏览器首先会检查是否有对应域名的**cookie**，如果有，就会自动添加到**request header**中，发送给服务器。 > 4. cookie的存放有大小限制，不可以超过4kb, 每一个域名下的cookie数量最多是20个 ## 图解cookie的运行机制 我们以百度登录的cookie为例，当我们没有登录前，给www.baidu.com发送http请求，返回的数据  当我们登陆后，再访问百度的域名后  基本通讯流程： 登录的时候，百度服务器会**response heade**r会返回一个不同用户的一个标识符(**cookie**)...
# 深度双向绑定 ```javascript var data = { user: { name: 'hcc', age: 23 }, hobby: 'study' } class Observer { constructor(data) { this.data = data this.check(data) } check(obj) { for(let...