A-A+

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

2015年12月08日 日志 暂无评论 阅读 880 次

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

注:除注明作者外,其他均为本人回答

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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

任意层级级联选择器

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

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

页面架构部分

高清屏的背景图片适配

当我们把一个图标做成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>
  • 1
  • 2
  • 3
  • 4
  • 5

要求如下:幻灯(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
  • 2
  • 3
  • 4

请完成以下响应式要求:
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>
  • 1
  • 2
  • 3

思路:一个是利用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预处理器?

原文地址:http://blog.csdn.net/sinat_27304985/article/details/46293583

给我留言

Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录