weixin_39851261
weixin_39851261
2020-12-08 21:06

班会第 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%

    background-position百分比

    如果说还是以左上角为原点来计算位置的，我们这个时候应该是觉得背景图片的位置是 50px 100px 的位置（10% * 500px 20% * 500px）， 但事实上却不是这样的，结合 w3c 官网文档中提到的，还要去用这个百分比的值计算背景图的坐标，也就是背景图的 5px 10px（10% * 50px 20% * 50px）这个点是坐标点， 所以，我们再放大截图可以看到效果是这样的：

    background-position百分比背景图的坐标点

  • 回味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 的话，我们平时也就是根据项目的具体情况，然后通过 ` 来改变html标签的font-size` 而已。

  • 让 JavaScript 对象完全只读不可以被修改

    在 JavaScript 中, 如何让一个对象是不可变的? 即 immutable, 让这个对象只读, 不可以被修改, 被覆盖. 回想一下 ES5 好像提供了这样一个方法: Object.freeze()

  • HTML 转义防止被 XSS 注入

    如果在页面中使用字符串拼接来输出要渲染的 HTML 内容, 很容易被注入, 因此建议前端做一些转义, 但关键还是后端要做数据的清理, 不要相信前端的任何输入. 俗话说的好: 有输入的地方, 就有可能被注入

    HTML-encoding in JavaScript/jQuery

    javascript
// 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></div>').text(html).html();
}
// <script>alert(1)</script>
htmlEncode('<script>alert(1)</script>');
<p>// non-jQuery version
function htmlEncode(html){
    return document.createElement('a')
                   .appendChild(document.createTextNode(html))
                   .parentNode.innerHTML;
}
// <script>alert(1)</script>
htmlEncode('<script>alert(1)</script>');
</p>

  • 如何完全覆写一个 HTML 页面的内容

    Document.open()

    javascript
document.open();
document.writeln('new doc');
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 等等。

    JavaScript 发展史

    所有现代浏览器和环境都已支持 ES6

    ES6 Support

    核心 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

    Resource Template Screenshot

该提问来源于开源项目：f2e-journey/xueqianban

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

4条回答

提交

为你推荐