WuShaolin

所在的团队

入职已经有一个半月了，目前的团队氛围对于我这个新人来说，就一句话如鱼得水，感谢机缘，能让我在转行的第一份工作中遇见这个团队，而我也会为了这个团队努力工作，让前端的大旗迎风飞扬。

scrollTop的兼容性问题

在做移动端布局时，监控touchmove事件经常会使用scrollTop来模拟页面的滑动距离，但是

• 仅仅使用document.body.scrollTop来进行滑动距离的判断，会失效

组件是插槽式的，例如某个页面有两个组件，其中搜索作为其中一个组件，当它作为组件的时候，它作为子组件的时候需要把参数通过属性的方式传递进来，通知父组件的时候通过触发事件来进行通信。

以上是组件化的简单描述，与模块化的组要区别在于组件化课深度定制不同的属性，借助父组件的参数值。

那么问题来了，组件间如何进行通信呢？

如何自学前端，以及应该学习的顺序……自己想了下，总结一下

仅代表初级前端能找到一份养家糊口的工作，至少需要一年多的理解，如果有过其他编程基础，可能需要8个月吧。

弃一些花里胡哨的没个卵用的网站，关注下面的网站，绝对不会让你们失望了，坚持使用3个月以上，学不好前端，你们来砍我~

在自学前端的道路上，关注下面的网站，绝对不会让你们失望了，坚持使用3个月以上，学不好前端，你们来砍我~

配上英语，学的更好哦~

获取歌曲的外链

通过七牛的文档说明，先去js官方文档，然后通过里面的js源码地址，选择1.0的版本，进入之后，选择示例网站，在获得代码里面，可以发现下面代码

  'FileUploaded': function(up, file, info) {
    // 每个文件上传成功后,处理相关的事情
    // 其中 info.response 是文件上传成功后，服务端返回的json，形式如
    // {
    //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
    //    "key": "gogopher.jpg"
    //  }
    // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

  // var domain = up.getOption('domain');
  // var res = parseJSON(info.response);
  // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
 },

本文是云音乐的需求分析以及基本环境的搭建，主要是LeanCloud和七牛的使用。

需求分析

先根据网易云音乐移动端去分析需求，看看有哪些能做的

做啥

目前初步分析的需求如上图所示，主要针对两个角色（普通用户和管理员）。

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

基本安装

1. 局部安装,官方也是推荐安装到项目目录下

mkdir webpack-demo-1
cd webpack-demo-1
npm init -y //生成package.json,并且一路同意,如果没啥个性化的内容则省了你一路狂按enter
npm install --save-dev webpack //安装到开发环境里面(devDependicies)

2. webpack基本配置文件

本文主要学习一下一些高级的HTTP知识，例如Session LocalStorage Cache-Control Expires ETag

其实主要就是涉及到了持久化存储与缓存的技术

在此之前已经学习了Cookie的相关知识，其中Cookie有个缺点可以人为修改，有一定的安全隐患。

所以，针对这个缺点，诞生了Session

Session

一般来说Session是基于Cookie实现的，它利用一个sessionId把用户的敏感数据隐藏起来，除非暴力穷举才有可能获得敏感数据。

sessionId

我们使用Cookie的时候，一般是服务器给用户一个响应头，设置Cookie

response.setHeader('Set-Cookie', 'sign_in_email=...;HTTPOnly')

既然Session还是基于Cookie实现的，那么还是应该在Set-Cookie上搞事情。

上篇介绍了注册的基本流程，下篇简单的讲讲登录的流程以及Cookie的出现

实现登录的小功能

当你在浏览器的输入框里输入localhost:8080/sign_in的时候，会发起GET请求，去访问sign_in.html

if (path === '/sign_up' && method === 'GET') {
  let string = fs.readFileSync('./sign_up.html', 'utf8')
  response.statusCode = 200
  response.setHeader('Content-Type', 'text/html;charset=utf-8')
  response.write(string)
  response.end()
}

CSS布局与上篇的布局基本一样，略去不表～

cookie 如果非要用汉语理解的话应该是 一段小型文本文件，由网景的创始人之一的卢 蒙特利在93年发明。

上篇是熟悉一下注册的大致流程，下篇熟悉登录流程以及真正的Cookie

实现基本的注册功能

我们打开网站，浏览网站，最常见的两个操作就是注册以及登录，所以有必要探索一下这两个功能如何实现的。

本地模拟，当输入localhost:8080/sign_up的时候，浏览器发起get请求，服务器给你响应sign_up.html

//服务器端代码
if (path === '/sign_up' && method === 'GET') {
    let string = fs.readFileSync('./sign_up.html', 'utf8')
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/html;charset=utf-8')
    response.write(string)
    response.end()
 }

科学上网

如何科学上网是个很严肃的问题(⊙o⊙)哦

以Linux为例

sudo apt-get install python-pip; 
sudo pip install shadowsocks;

• 如果你遇到 _cleanup 不存在的提示，可能是遇到 bug 了，你要将 openssl.py 中的 _cleanup 全部改为 _reset 才行。

• 如果你不会改，使用

sed -i 's/_cleanup/_reset/g' xxxxxxxxxxxxxxxxxxxxxx/openssl.py  
// 注意把 xxxxxxxxxxxxxxxxxxxxxx/openssl.py 改成图中的 openssl.py 文件的路径

创建sslocal 配置文件

创建 sslocal 配置文件（如果你不知道在哪创建就创建在 ~/.ssconf.json），配置文件的内容可使用我的服务器，你也可以自己买服务器（显然自己买服务器更靠谱）

 {
     "server":"45.76.180.233", //自己买
     "server_port":27148, //自己买
     "local_address": "127.0.0.1",
     "local_port":1080,
     "password":"A7#x8Jyzme)jkFfc", //自己买
     "timeout":300,
     "method":"aes-256-cfb",
     "fast_open": false
 }

可以使用了

1. 使用 ss-local -c ~/.ssconf.json 或 sslocal -c ~/.ssconf.json 开启代理，其中 ~/.ssconf.json 是配置文件的路径-