班会第 44 期 #54

ufologist · 2017-01-19T02:24:21Z

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

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

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

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

The text was updated successfully, but these errors were encountered:

cfour-hi · 2017-02-07T09:26:02Z

我的 2016 总结

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

2017 计划：

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

ufologist · 2017-02-09T08:54:46Z

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

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

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

新的一年希望大家都能够

积极主动

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

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

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

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

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

liangmiao930617 · 2017-02-10T05:09:44Z

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

ufologist · 2017-02-11T06:42:30Z

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

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

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

ufologist added the Weekly label Jan 19, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

班会第 44 期 #54

班会第 44 期 #54

ufologist commented Jan 19, 2017 •

edited

Loading

cfour-hi commented Feb 7, 2017

ufologist commented Feb 9, 2017 •

edited

Loading

liangmiao930617 commented Feb 10, 2017

ufologist commented Feb 11, 2017 •

edited

Loading

班会第 44 期 #54

班会第 44 期 #54

Comments

ufologist commented Jan 19, 2017 • edited Loading

cfour-hi commented Feb 7, 2017

ufologist commented Feb 9, 2017 • edited Loading

liangmiao930617 commented Feb 10, 2017

ufologist commented Feb 11, 2017 • edited Loading

ufologist commented Jan 19, 2017 •

edited

Loading

ufologist commented Feb 9, 2017 •

edited

Loading

ufologist commented Feb 11, 2017 •

edited

Loading