xueqianban 班会第 44 期

放假了, 过年咯, 一转眼时间, 一年过去了, 希望同学们在班集体中有所收获, 学有所长, 术有专攻, 学以致用.

感谢大家一年来的支持, 提前祝同学们新年快乐.

留给大家一些寒假作业, 别光记着抢红包哦

2016 总结
- 今年我够努力吗? 对自己的表现满意吗?
- 在哪些地方进步了? 哪些地方其实我还可以做得更好?
- 解决了哪些难题, 做出了什么成绩?
2017 计划
- 明年我打算怎么突破瓶颈?
- 有什么目标?
- 如果完不成目标, 是不是应该请大家撮一顿?

技术
- 闲扯 background-position 的单位属性值
  - 对于 px 这个单位值，在不改变原点的前提下，背景图片的定位是通过图片的左上角开始计算与容器左上角的距离
  - 如果是14% 84%的这个值，那么就把背景图片的14% 84%的坐标点，放置在容器的14% 84%的坐标点位置
  background-position 单位值位置测试
  
  W3C: Colors and backgrounds
  
  With a value pair of ‘14% 84%’, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
  
  background-position: 10% 20%
  
  如果说还是以左上角为原点来计算位置的，我们这个时候应该是觉得背景图片的位置是 50px 100px 的位置（10% * 500px 20% * 500px），但事实上却不是这样的，结合 w3c 官网文档中提到的，还要去用这个百分比的值计算背景图的坐标，也就是背景图的 5px 10px（10% * 50px 20% * 50px）这个点是坐标点，所以，我们再放大截图可以看到效果是这样的：
- 回味background
  - background-color
  - background-image
  - background-position
  - background-attachment
  - background-repeat
    - space 根据背景图片的大小，然后通过计算容器的大小来平铺背景，多余的部分用空白来填充，这样的平铺方式是不会出现图片被截成一半的情况
    - round 根据背景图片的大小，然后通过计算容器的大小，压缩图片来填充容器，这样的平铺方式也是不会出现图片截成一半的情况，不过跟 background-repeat: space; 不同的是这种填充方式不会出现空白的区域，而是会去压缩图片的大小来适应容器
  - background-size 值是针对容器的
    - contain 等比缩放，以最大的尺寸填充到容器中，但不一定会撑满容器，而出现背景图片显示不全的情况
    - cover 等比缩放，以最小的尺寸填充到容器中，一定会撑满容器，且可能会出现背景图片显示不全的情况
  - background-origin
    - border-box
    - padding-box
    - content-box
  - background-clip
  - 多背景
- 别说 rem 是什么自适应
  在移动端中所谓的用 rem 做自适应，其实并非是自适应，我觉得更应该是响应式。根据不同的设备分辨率等数据，通过 JavaScript 来改变 html 中的 font-size，从而影响 DOM 节点中有 rem 单位的属性。
  
  目前国内大家用的比较多的是阿里无线的那个 Flexible, 在大漠的博客中也提到了，这个 Flexible 主要的事情是这些：
  - 动态改写 <meta> 标签；
  - 给 <html> 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值；
  - 给 <html> 元素添加 font-size 样式，并且动态改写 font-size 的值；
  所以，别再说什么自适应了，更应该是响应式。如果不是用这个 Flexible 的话，我们平时也就是根据项目的具体情况，然后通过 @media 来改变 html 标签的 font-size 而已。
- 让 JavaScript 对象完全只读不可以被修改
  
  在 JavaScript 中, 如何让一个对象是不可变的? 即 immutable, 让这个对象只读, 不可以被修改, 被覆盖. 回想一下 ES5 好像提供了这样一个方法: Object.freeze()
- HTML 转义防止被 XSS 注入
  如果在页面中使用字符串拼接来输出要渲染的 HTML 内容, 很容易被注入, 因此建议前端做一些转义, 但关键还是后端要做数据的清理, 不要相信前端的任何输入. 俗话说的好: 有输入的地方, 就有可能被注入
  
  HTML-encoding in JavaScript/jQuery
```
// jQuery version
function htmlEncode(html){
    // create a in-memory div, set it's inner text(which jQuery automatically encodes)
    // then grab the encoded contents back out.
    // The div never exists on the page.
    return $('<div/>').text(html).html();
}
// &lt;script&gt;alert(1)&lt;/script&gt;
htmlEncode('<script>alert(1)</script>');

// non-jQuery version
function htmlEncode(html){
    return document.createElement('a')
                   .appendChild(document.createTextNode(html))
                   .parentNode.innerHTML;
}
// &lt;script&gt;alert(1)&lt;/script&gt;
htmlEncode('<script>alert(1)</script>');
```
- 如何完全覆写一个 HTML 页面的内容
  Document.open()
```
document.open();
document.writeln('<html><head></head><body>new doc</body></html>');
document.close();
```
- Learn ES2015 · Babel
  ECMAScript 2015 is an ECMAScript standard that was ratified in June 2015.
  
  ES2015 is a significant update to the language, and the first major update to the language since ES5 was standardized in 2009.
  
  A detailed overview of ECMAScript 2015 features. Based on Luke Hoban's es6features repo.
  
  Be sure to try these features out in the online REPL.
  
  ECMAScript 2015 Features
  - Modules
  - Classes
  - Let + Const
  - Template Strings
  - Enhanced Object Literals
  - Arrows and Lexical This
  - Default + Rest + Spread
  - Promises
  - Math + Number + String + Object APIs
  - Map + Set + WeakMap + WeakSet
  - Symbols
  - Proxies
  - Reflect API
  - Destructuring
  - Iterators + For..Of
  - Generators
  - Subclassable Built-ins
  - Binary and Octal Literals
- JavaScript ES6 核心功能一览（ES6 亦作 ECMAScript 6 或 ES2015）
  自从 1995 年 JavaScript 诞生以来，它一直在缓慢地发展。每隔几年就会增加一些新内容。1997 年，ECMAScript 成为 JavaScript 语言实现的规范。它已经有了好几个版本，比如 ES3 , ES5 , ES6 等等。
  
  所有现代浏览器和环境都已支持 ES6
  
  核心 ES6 功能
  - 变量的块级作用域: let const
  - 模板字面量/多行字符串: 反引号 (`) 和字符串插值 ${}
  - 解构赋值
  - 类和对象和继承 class extend super
  - 箭头函数
  - 原生 Promises new Promise((resolve, reject) => {});
  - for…of for (const element of array) {}
  - 默认参数/剩余参数/展开运算符 function point(x = 0, y = -1, isFlag = true){} Math.max(...[2,100,1,6,43])
- webpack多页应用架构系列
  架构痛点痒点一览
  - SPA好复杂，我还是喜欢传统的多页应用怎么破？又或是，我司项目需要后端渲染，页面模板怎么出？
  - 每个页面相同的UI布局好难维护，UI稍微改一点就要到每个页面去改，好麻烦还容易漏，怎么破？
  - 除js外的资源如css/less、图片、swf、字体等，要怎么打包呢？不然老是要外部引用，迁移、部署起来都好麻烦呢。
  - 某些年久失修的jQuery插件怎么在webpack里使用呢？
  - 能不能整合进ESLint来检查语法？
  - 能不能整合postcss来加强浏览器兼容性？
  - 部署代码的时候如何清除用户浏览器遗留下来的上个版本的缓存？
- 2016 掘金年度回顾
  掘金 2016: 移动端版本发版 50 余次/Web 端迭代 500 余次
  - 年度最受欢迎的 10 个标签
  - 年度最优秀的 10 位原创作者
  - 年度最优秀的 10 位联合编辑
  - 年度最受欢迎的 6 篇文章
    - 总榜
    - Android
    - iOS
    - 前端
    - 后端
  - 年度最受欢迎的 6 个收藏集
  - 年度最受欢迎的 6 篇翻译计划文章
  - 年度最受欢迎的 6 期沸点
产品
- Apple UI Design Resources
  
  The Apple UI Design Resources include Photoshop and Sketch templates, and other UI materials for quickly designing iOS apps

Jan 19 '17 02:01 ufologist

我的 2016 总结

自我感觉是很努力的，不知道军哥你觉得呢？表现给自己 85 分，给自己一个优秀的及格分。:bowtie:
进步的地方不止一点两点，可以说是整体的提升，最主要还是解决业务问题到能力，以及在实现业务需求时对一些知识点细节的掌握，还有就是在学习 vue.js 并打造 blog 的过程中对前端 MVVM 的概念和思想的学习。其实我一直觉得在与产品和设计的沟通上还需要加强，还有每次需求评审会议总是没有对业务需求了解清楚，大局观有待加强。
难题和成绩还真是挺多的，对跨域解决方案的探索是让我印象最深刻的，还有对英语的坚持学习，自己的 blog，其它的还是看工作日志吧。 :grin:

2017 计划：

前端工程化的实现，这对我而言是一片新天地。
做一个 node.js 的小项目，2016 年光学了一些概念知识，没多久就忘的差不多，还是需要一些练手实战。
基础知识的牢固，去年项目中有些小问题回过头想想看就是因为基础知识不够扎实。
看过阮一峰的《未来世界的幸存者》之后，觉得需要把目光放长远一些，也需要对未来有一些新的思考。无论阮一峰的观点是否正确，但确实给我提了个醒。

Feb 07 '17 09:02 cfour-hi

@Monine 同学在 2016 进步神速, 经常的自我反思, 再加上博客的历练, 精益求精的精神值得大家学习.

推荐大家都去围观 @Monine 写的我的 2016 和告诫自己的做事流程. 这里我要小小"批评"下 @Monine 同学了, 这么好的文章应该多多主动在学前班中分享嘛, 让我们可以第一时间为你点赞. 以后 @Monine 同学可就是我们学前班里主力的内容贡献者了.

2017 看好你哦, 期待在新的一年里, 可以更进一步地实现自己的技术目标, 深入前端的圈子, 再走出前端的圈子.

新的一年希望大家都能够

积极主动

每个人都有机会主导产品的进程, 能者多劳
勤于思考

一件事做得好不好, 关键取决于你想不想做得更好
善于总结

还是那句话, 博客和交流是最好的历练

俗话说没有完美的公司, 也没有理想中的企业文化, 工作环境大多是差不多的, 最关键的还是看个人的工作态度和工作氛围, 为自己的成长创造环境

有困难要上，没有困难创造困难也要上

Feb 09 '17 08:02 ufologist

2016年总结：有进步，但是不大，有问题都要靠祥哥帮我解决。前端基本技能都学的不牢靠。框架也都不是很懂。平时下班都很少学习。 2017年计划：把前端基本技能弄扎实，能自己独立开发项目，工作中的问题能不靠祥哥自己独立解决。学会一门前端框架。总之要达到祥哥2016年的技术水平！！！:）

Feb 10 '17 05:02 liangmiao930617

@liangmiao930617 同学在 2016 的表现可圈可点, 特别是那份积极主动的精神值得嘉奖, 前端技能方面的提升也很多, 是不可多的的好苗子.

页面写得越来越好, 越来越规范, 后端的页面也能够完成了
原来前后端接口都不知道是何物, 现在已然可以自己定接口与后端人员协作完成任务了
前端的日常任务现在都是小 case

期待 @liangmiao930617 同学在 2017 可以加强前端基础知识的学习, 特别是 JavaScript 方面, 稳扎稳打地完成自己的年度目标, 更上一层楼.

Feb 11 '17 06:02 ufologist

xueqianban xueqianban copied to clipboard

班会第 44 期

xueqianban
xueqianban copied to clipboard