网易云课堂前端微专业各部分作业解答

买了云课堂的前端微专业课程，在这里记录下解题的过程，一来防止自己偷懒，二来希望朋友们看到能提提意见，共同进步。
主要放大题自己写的答案，有些会提提思路，代码基本都在在线代码平台上。

注：除注明作者外，其他均为本人回答

PS部分

HTML部分

创建三个截图的HTML结构代码

第一题是一个阅读排行榜的，第二题是一个邮递区域表格，第三题是一个提交表单
解答地址：http://runjs.cn/detail/gmxxlrhq 点击“查看源码”可以看到源代码

CSS部分

实现两列自适应布局

解答地址：http://runjs.cn/detail/8ld3y1gf

实现三列垂直平分标签选项卡

解答地址：http://runjs.cn/detail/xqdyocbt

实现一个弹窗

这题略坑爹，实际项目一般都用js实现垂直居中对齐
解答地址：http://runjs.cn/detail/3wx5slgu

JavaScript部分

类型检测函数

题：编写一个type()函数，识别js各种类型
解答：http://runjs.cn/code/oahcxwfa，主要利用对象原型链上的toString方法实现（Object.prototype.toString）

引用类型复制

题：要克隆出一个独立但属性、方法完全一样的对象，该如何实现？
解答：主要参考jQuery extend方法做了实现，地址：http://runjs.cn/code/hls9ogyl
引申问题：需使用对象拷贝的场景？
课程老师严跃杰回答：

比较容易想到的场景是数据对象处理，比如一份数据对象被各个使用者使用时，为了相互之间不影响，每个使用者都需要拷贝自己的一份数据。但是继续深入，我们需要思考为何js本身不提供这样一个clone函数？因为js的对象拷贝本身没有一个明确的标准（对这个讨论提来说就是没有一个标准答案），通常我们需要根据对象类型，对象需要实现功能去实现。比如数据对象拷贝跟函数对象拷贝可能目的和实现方法都不同，另外有些对象可能还有私有属性（闭包属性），用于表示对象状态或某些私有数据，这时对象拷贝就会遇到问题。总之，对象拷贝需要考虑对象类型及对象需要实现功能，因此js本身没有提供也无法提供这样一个通用clone函数，但是我们可以实现某些特定对象类型（或自定义对象）的clone函数，比如DOM中cloneNode方法，jQuery中的clone，extend方法等（这些方法其实就是使用js对象拷贝的场景）。

总结一下：1. 没必要也很难实现一个通用的克隆函数 2. 要根据不同业务场景设计不同的克隆函数

实现生成[0-999]之间随机整数的函数

解答：http://runjs.cn/code/tgivvt2r，主要用了Math.random方法

实现低版本的Function.prototype.bind函数

解答：http://runjs.cn/code/m2sctfnk。ECMAScript 5 引入了 Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

DOM程序设计部分

如何实现浏览器兼容版的element.dataset

element.dataset能够获取元素的自定义属性，但是低版本的ie不支持，如何在低版本的ie上兼容类似的功能。

function camelCase(str) {
return str.replace(/^([A-Z])|-(w)/g, function(match, p1, p2, offset) {
if (p2) return p2.toUpperCase();
return p1.toLowerCase();
});
}
function getDataset (element) {
if (element.dataset) {
return element.dataset;
}
var attributes = element.attributes, key, dataset = {};
for (var i=0, len=attributes.length; i<len; i++) {
if(attributes[i].nodeName.substring(0, 5) === "data-"){
key = camelCase(attributes[i].nodeName.substring(5));
console.log(key);
dataset[key] = attributes[i].nodeValue;
}
}
return dataset;
}
var element = document.getElementById('user');
var dataset = getDataset(element);
console.log(dataset);

任意层级级联选择器

这题之前写了一个，后来蔡老师出了个答案，被完爆了，在线地址
推荐大家看看，体会一下十年码工的实力！

后来有一题是实现年月日级联选择器
贴一个本人实现

页面架构部分

高清屏的背景图片适配

当我们把一个图标做成CSS中的背景图，在视网膜屏上预览时会发现图标是模糊的，所以我们会同时准备一个2倍大小的图标给高清屏，那么问题来了，怎么实现在普通屏下是普通背景图，而在高清屏下是用的高清图呢？

主要有四种实现方式：
1. media query + pixel-ratio 实现
2. img标签引用的不同大小图片，通过retina.js根据设备自动替换图片地址
3. image-set 实现（不兼容微信浏览器）
4. svg 实现

线上效果查看：
PC端: 链接
手机端二维码：

参考：
1. Retina 显示屏的网页图片兼容方案，里面优缺点说的很清楚了。
2. CSS 与 HTML5 响应

水平列表的底部对齐

如图所示，一个水平排列的列表，每项高度都未知，但要求底部对齐，有哪些方法可以解决呢？
思路：
1. 利用display: table-cell+vetical-align
2. flex布局实现
实现见链接

实现一个幻灯布局

一个幻灯片效果如图：

已知结构如下：

<div class="slide">
<!-- 图片省略 -->
<!-- 以下是指示器 -->
<div class="pointer"><i></i><i></i><i></i></div>
</div>

要求如下：幻灯（slide）宽高未知，指示器（pointer）在底部且水平居中，距离底部10px，指示器中的圆直径为10px，个数未知，背景为黑色，间距为5px，请完成CSS。
思路：position: absolute + translate
实现链接

实现一个自适应布局

按要求完成能兼容所有浏览器的HTML和CSS：一个不定宽度的容器被分为左中右三列，左右两列定宽100px，中间列自适应剩余宽度，且三列之间间距为10px，效果如下：

思路：双飞翼布局（float + 负外边距）
实现链接

一个全等四宫格的实现

一个未知宽高的容器，要被均分为四个相同大小格子（即四个容器），且格子间有10px间距（即十字型空隙），有哪些方法可以解决呢？

思路：flex布局实现
实现链接

完成响应式布局的实现

已知一个自适应布局的HTML结构如下：

<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>

请完成以下响应式要求：
1、默认情况，PC电脑（假设视窗都大于等于1000px）访问：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px。

2、当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。

3、当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。

思路：CSS3 media query
实现链接

实现一个弹窗

已知HTML结构和效果图如下：

<div class="a">
<div class="b">Hello World</div>
</div>

思路：一个是利用flex布局，一个是利用position: absolute+tranlate
实现链接

假设以上父元素称为A，子元素称为B
请写出CSS以实现以下弹窗需求：弹窗（B）固定在浏览器窗口中间，弹窗背景色为白色，弹窗宽高由其内容决定，弹窗四周为黑色半透明（0.5透明度）遮罩

产品前端架构部分

项目发布时需要做哪些优化？

1. 文件缓存。配置超长时间的本地缓存，节省带宽，提高性能；采用内容摘要作为缓存更新依据 ，实现精确的缓存控制，同时实现资源的非覆盖式发布， 保证平滑升级。
2. 静态资源CDN部署，优化网络请求响应。
3. 资源合并与优化。文件合并，模块化会导致HTTP请求大量增加；图片优化，包括图片压缩和雪碧图合并（貌似现在都流行用iconfont实现这块）等。
4. 参考：前端工程与性能优化 & 大公司里怎样开发和部署前端代码？

实际项目中发布工具的哪些功能是你比较关注的？

1. 实现项目发布时各项优化。前一题答过，如资源MD5计算和地址替换、CDN地址替换，资源合并优化等
2. 学习成本低。配置要简单，有各种语言的实现版本，文挡丰富社区活跃
3. 不强制要求项目目录结构。很多项目一开始没想到发布这快，等上发布工具的时候，已经无法变更目录结构了
4. 其他。性能要求编译发布时间秒级内，支持二次开发定制

重要性大致依次降低

大型的组件库为什么都用到了预处理？

事实上处理bootstrap、foundation. 还有一些其它类似规模的组件库， 它们或许在设计和css构建上理念上有部分区别， 它们都非常一致的使用了css预处理器来管理css文件， 你能说出这么做的好处吗？

假设不使用预处理器，而直接用CSS作为大型组件库的样式方案，会有如下缺陷：

1. 语法不够强大。比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器
2. 没有变量和合理的样式复用机制。使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护

所以反过来，CSS预处理器的优点：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性

参考链接：再谈 CSS 预处理器 & CSS 预处理器与 CSS 后处理器 & 为什么要使用CSS预处理器？

最后

以上就是粗心发带为你收集整理的网易云课堂前端微专业各部分作业解答的全部内容，希望文章能够帮你解决网易云课堂前端微专业各部分作业解答所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。