No.22 Week

饮食: 蛋白粉两勺一杯摇匀服用+碳水化合物(小面包)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
- 哑铃握举(二头肌)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/11/20-11/26
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

语法

程序设计语言分为 解释型 和 编译型 两大类.
编译型: Java/C++等语言需要编译成直接在计算机上跑的可执行文件,错误在编译阶段就能发现,而且速度更快,可移植性更好;
解释型: 像JavaScript需要浏览器这个解释器来执行 JavaScript脚本;

注释

用"//"注释单行,用"/**/注释多行",用""来注释HTML

// 单行
/*
多行
多行
*/

<!-- <p>我是HTML</p>-->

变量

JavaScript允许对变量直接赋值而不需要提前声明
字面量(literal)是指由字母，数字等构成的字符串或者数值，它只能作为右值出现，所谓右值是指等号右边的值

数据类型

JavaScript 是弱类型语言,即可以在任何时候改变变量的数据类型
字符串
- 可以用反斜线 ""转义为普通字符
数值
- 浮点数/负数浮点数
布尔值
数组
- 关键字 Array 声明
- 关联数组
对象
- 关键字 Object 声明

操作

算术操作符
- 加号(+) : 可用于数值,也可用于字符串拼接
- 快捷符"++" 和 "+="
条件语句
- "=="与"===" , "!="与"!=="
逻辑操作符

循环语句

while 循环
- do...while 循环
for 循环

函数

作用域
- 全局变量/局部变量

对象

属性 property : 隶属于某个对象的变量
方法 method : 只有某个函数才能调用的函数
对象就是属性和方法组合在一起构成的数据实体,通过点来访问:
- object.property
- object.method
实例: 对象的具体个体如: new Person
内建对象: Array, Date
宿主对象: 浏览器提供的预定义对象(document, Form, Image, Element)

Vue 2 初始化data及组件选择性缓存的问题解决

重新调用data方法，即可重置

Object.assign(this.$data, this.$options.data())

Object.assign(target, source1, source2) 为ES6中的浅拷贝

发生场景:

同一组件选择性缓存

解决方案: keep-alive钩子 activated

keep-alive 组件激活时调用

平稳退化

JS行为层与HTML结构层解耦

HTML-DOM VS DOM Core

判断对象是否为空

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致（两者的主要区别是一个 for-in 循环还会枚举其原型链上的属性）

Object.keys(Arry).length !== 0

js 里循环执行过程(包括for/for...in.../ES6...)?

尤其是一些执行顺序,循环体内体外的一些差异

DOM: document object model (文档对象模型)

文档树
- 元素节点
- 文本节点
- 属性节点

获取元素

getElementsById
getElementsByTagName
getElementsByClassName (HTML5 新增的方法)

前者返回对象,后两者返回数组

获取及设置属性

getAttribute
setAttribute

setAttribute 对文档做出修改后,查看浏览器的view source 源代码依旧是改变前的属性值;
反应了DOM的工作模式: 先加载文档的静态内容,再动态刷新而不改变文档的静态内容;
DOM强调: 对页面内容进行刷新却不需要在浏览器里刷新页面;

浏览器对图片的渲染格式要求

今天有同事问我一个关于 img标签图片显示的问题，我猜是格式问题，但浏览器到底能识别怎样的图片？怎样的图片又是不能显示的？

早起计划

感觉身体渐渐虚弱了，应该是长期熬夜的副作用慢慢体现出来了。。。

特意开个issue监督自己。

晚上11点前睡觉！

后面看能不能搞个脚本自动推issue打卡。

2017/8/21 开始生效

第19周(增加手臂)

饮食: 蛋白粉两勺一杯摇匀服用+碳水化合物(小面包)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
- 哑铃握举(二头肌)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/10/30-11/5
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

基于Github的团队开发管理

建立自己的组织
 合理利用Milestones里程碑
 Github生成燃尽图的方式
 使用GitHub进行团队合作

搞开发,我们是认真的!

第16周(改变下健身模式)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/08/21-08/28
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

SPA前端权限控制方案

SPA: 单页Web应用（single page web application）将所有web活动局限于一个html页面中，利用js通过hash或者浏览器history api来实现无刷新路由跳转，前后端通过ajax数据通信，避免了浏览器的刷新重新加载，为用户提供流程的操作体验。这意味着前端接管了路由层，需要通过调用前端自身的MVC模块，来渲染不同的页面。

Date: 2017/9/23
Author: yepanmeng

Base on：

Vue 框架
Vuex 状态管理机
Vue-router 路由
Axios http请求库

1.登陆事件Login

// 1.触发登陆事件
dispatch('login')
 
// actions
commit(types.LOGIN_SUCCESS, res.data.data)
...

2.获取Token，经Base64编码后存至sessionStorage

// mutations
const mutations = {
    [types.LOGIN_SUCCESS] (state, data) {
        state.authlock = false
	// 2.登陆成功回调拿到token,经Base64 编码后存入本地sessionStorage
        let token = Base64.encode(data + ':HIKDATAE')
        sessionStorage.setItem('userToken', token)
	// 路由跳转至目标页面
        router.push({name: 'xxx'})
    },
    [types.LOGOUT_SUCCESS] (state) {
        state.authlock = true
	// 登出成功回调,移除本地token
        sessionStorage.removeItem('userToken')
		router.push({name: 'Login'})
    }
}

3.所有HTTP Header Authorization 加上编码后的token(前后端可约定规则)

// Axios 请求钩子（request）
axios.interceptors.request.use(req => {
    let token = sessionStorage.getItem('user')     
    if (token) { 		
        // 3.token 存在,则在之后所有请求的http请求头 Authorization 带上base64编码后的token,后台拿到token后进行验证权限         
        req.headers.Authorization = `Basic ${token}`     
    }
    req.data = qs.stringify(req.data)     
    return req 
}, error => {
    return Promise.reject(error) 
})

浏览器http header

4.请求拦截：后台拿到token后对每个请求进行校验，若校验失败返回401，前端response钩子里统一catch error 跳转至登陆页面

// Axios 请求钩子（response）
axios.interceptors.response.use(res => {
    return res
}, error => {
	if (error.response) {
        switch (error.response.status) {
		// 4.所有接口response校验钩子,若token检验失败,后台返回 401 error code, 清除token信息并跳转到登录页面
        	case 401:
            	store.commit(types.LOGOUT)
            	router.replace({
            		path: '/login'
		})
	}
    }
    return Promise.reject(error)
})

5.路由跳转拦截：任意路由跳转时，在路由beforeEach钩子里校验本地是否存在token，若没有，则跳转至登陆页面

// 路由钩子(每个路由跳转前调起beforeEach钩子)
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    sessionStorage.removeItem('userToken')
  }
  let user = sessionStorage.getItem('userToken')
  if (!user && to.path !== '/login') {
	// 若本地token不存在,则任意路由跳转的时候,重定向至login 登陆页面
    next({ path: '/login' })
  } else {
    next()
  }
})

6.登出Logout：清楚本地sessionStorage的token信息

// mutations
const mutations = {
	...
    [types.LOGOUT_SUCCESS] (state) {
        state.authlock = true
	// 登出成功回调,移除本地token
        sessionStorage.removeItem('userToken')
	router.push({name: 'Login'})
    }
}

流程示意图如下:

第20周

饮食: 蛋白粉两勺一杯摇匀服用+碳水化合物(小面包)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
- 哑铃握举(二头肌)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/11/6-11/12
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

第17周(改变下健身模式/蛋白粉补充)

饮食: 蛋白粉两勺一杯摇匀服用+碳水化合物(小面包)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/10/09-10/15
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

js中对象的Key修改?

今天突然遇到这个问题,虽然有其他方式可以实现,比如复制key然后删除原来的key/遍历/...

但还是好奇,这周有空研究下.

PS:JavaScript set object key by variable

No.23 Week

饮食: 蛋白粉两勺一杯摇匀服用+碳水化合物(小面包)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
- 哑铃握举(二头肌)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/11/27-12/3
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

异步编程发展史

参考：

http://mp.weixin.qq.com/s/7bdk24mvoxZWwiHLGaVdyw

title

when to go?

1
2

DOM 属性

childNodes
- 获取子元素,得到一个数组
nodeType
- 元素节点的 nodeType 属性值为1
- 属性节点的 nodeType 属性值为2
- 文本节点的 nodeType 属性值为3
nodeValue
- 元素节点的 nodeValue为null
- 属性节点的 nodeValue为属性值
- 文本节点的 nodeValue为文本值
firstChild
- 获取第一个节点
lastChild
- 获取最后一个节点

JavaScript 的起源

JavaScript原名为LiveScript,后来为了蹭Java的热度而改名,因此和Java没有半毛钱关系.:sweat:

JavaScript由Netscape和Sun公司合作开发
⬇️
1995年,JavaScript 1.0 版本出现于 Netscape Navigator 2 浏览器中
⬇️
微软推出IE3,同时发布VBScript语言,取名 JScript
⬇️
Netscape 和 Sun 公司联合 ECMA (欧洲计算机制造商协会),对JavaScript进行了标准化,即 ECMAScript
⬇️
1996年,JavaScript/ECMAScript/JScript 逐渐稳定,Netscape和微软都在各自的第3版浏览器中不同程度支持了 JavaScript 1.1版本

浏览器战争

1997年6月, Netscape Navigator 4 发布,同年10月, IE 4 发布,但是两个浏览器使用两种不兼容的DOM
⬇️
IE在浏览器份额大战中战胜了Netscape, 只是由于所有运行Windows 操作系统的个人电脑默认安装IE,:astonished:
⬇️
为了避免浏览器的自私行为,WaSP小组应运而生,目的就是为了推动由W3C制定的各项标准
⬇️
2003年苹果推出 Safari 浏览器(基于WebKit)

WebKit 是Safari和Chrome采用的一个开源Web浏览器引擎,
另外的还有Firefox浏览器的Gecko引擎,
IE的Trident 引擎

DOM的演变史

Document Object Model, W3C对DOM的定义: 一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容,结构和样式.

DHTML (Dynamic HTML)出现,目的就是为了描述 HTML, CSS, JavaScript 组合
⬇️
1998年10月, W3C 推出了标准化的 DOM,完成了"第1级DOM"(DOM Level 1)
⬇️
直至今天,浏览器大战的硝烟已经散尽了,几乎所有浏览器都内置支持了DOM 😀

第14周

2017/08/07-08/14
健身日: 周二周四周六

Vue 对象修改属性时watch问题(deep and 深拷贝)

export default {
    data () {
        return {
            title: '',
            backgroundColor: '',
            current: {}
        }
    },
    computed: {
    },
    mounted () {
        this.init()
    },
    watch: {
        // 深度 watcher
        current: {
            handler (val, oldVal) {
                if (Object.keys(oldVal).length !== 0) {
                    console.log('触发监听', val)
                }
            },
            deep: true
        }
    },
    methods: {
        init () {
            // 从store里获取state 深拷贝
            let _currentConfig = JSON.parse(JSON.stringify(this.$store.state.chartsConfig.currentConfig))
            // 利用  Object.assign 让新添加的属性具有响应式属性         
            this.current = Object.assign({}, this.current, _currentConfig)
            this.title = this.current.opt.title.text
            this.backgroundColor = this.current.opt.backgroundColor
        },
        changeTitle (val) {
            this.current.opt.title.text = val
        }
    }
}

No.21 Week

饮食: 蛋白粉两勺一杯摇匀服用+碳水化合物(小面包)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
- 哑铃握举(二头肌)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/11/13-11/19
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

饮食: 蛋白粉两勺一杯摇匀服用+碳水化合物(小面包)

改变下健身模式：

一周一轮
先练大肌群（胸、背、臀腿）
小肌群（肩）

RM: Repetition Maximum 重复做的最大数值，一般建议8~12RM，瘦子6~10RM

胸(周二)
- 哑铃飞鸟三组(17.5kg*2)
- 哑铃卧推三组(17.5kg*2)
背+肩（前中后束）(周四)
- 哑铃划船三组(17.5kg*2)
- 哑铃硬拉三组(17.5kg*2)
- 负重耸肩
- 哑铃上举(后束)
臀腿(周六)
- 负重深蹲(20*3)（负重25kg）

anything:

15min 8.5~9.5 匀速跑

2017/10/23-10/29
健身日: 周二周四周六

颈椎病治疗视频推荐(赵之心)

第5章最佳实践

浏览器嗅探技术

即: 通过提取浏览器供应商提供的信息来解决向后兼容的问题.

palmerye / palmerye.github.io Goto Github PK

palmerye.github.io's Introduction

Hi there 👋

palmerye.github.io's People

Contributors

Stargazers

Watchers

Forkers

palmerye.github.io's Issues

语法

注释

变量

数据类型

操作

循环语句

函数

对象

发生场景:

平稳退化

JS行为层与HTML结构层 解耦

HTML-DOM VS DOM Core

DOM: document object model (文档对象模型)

获取元素

获取及设置属性

SPA前端权限控制方案

1.登陆事件Login

2.获取Token，经Base64编码后存至sessionStorage

3.所有HTTP Header Authorization 加上编码后的token(前后端可约定规则)

4.请求拦截：后台拿到token后对每个请求进行校验，若校验失败返回401，前端response钩子里统一catch error 跳转至登陆页面

5.路由跳转拦截：任意路由跳转时，在路由beforeEach钩子里校验本地是否存在token，若没有，则跳转至登陆页面

6.登出Logout：清楚本地sessionStorage的token信息

流程示意图如下:

title

DOM 属性

JavaScript 的起源

浏览器战争

DOM的演变史

浏览器嗅探技术

平稳退化

渐进增强

减少DOM访问及减少标记

Recommend Projects

Recommend Topics

Recommend Org

JS行为层与HTML结构层解耦