京东2017校招前端主观题汇总

1.谈谈优雅降级与渐进增强的区别。

答：渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

2.描述cookies，sessionStorage和localStorage的区别。

相同点：都存储在客户端
不同点：

1.存储大小

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

• localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage  数据在当前浏览器窗口关闭后自动删除。
• cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

3.如何设计开发一个图片轮播组件？简述要点或写代码。

给出一个比较通用的方法。

① 整个组件采用ViewPager

② 适配器继承自PagerAdapter

③ 重写getCount()，isViewFromObject(View arg0, Object arg1)，destroyItem(ViewGroup container, int position, Object object)，instantiateItem(ViewGroup container, int position)四个方法。

④ getCount代表返回的条目，要实现无限轮播，这里就要给出一个很大的值，我们可以采Integer.MAX_VALUE。其他的和普通ViewPager开发一样，在isViewFromObject返回arg0 == arg1，在

destroyItem中摧毁滑出的View,container.removeView((View) object),在instantiateItem中添加对应的item,记得添加item,container.addView(child)。里面的postion都要做取余处理，避免数组越界。

⑤ 在一开始展示的时候，把item定位到较中间的位置，这里我采用vp.setCurrentItem(10000 * ids.length)。当然这样只是一个滑不到边界的轮播，并不是真正的首尾相连的轮播。

⑥ 最后，可以使用一个handler实现自动轮播，重写onTouchEvent来对自动轮播控制。还可以将这些全部封装起来，当一个自定义view使用。

 

推介一个GitHub，个人觉得写得很好的一个轮播。

https://github.com/youth5201314/banner

4.简要解释盒模型、行内元素与块级元素的概念。

css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。两种盒子模型都包括padding，margin，border，content，但是ie盒子模型的content包括border和padding。

块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。

5.如何进行前端性能优化？简述几种常用的方法。

见：http://www.cnblogs.com/catherinezyr/p/7457475.html

6.给你两个集合，要求{A} + {B}。 注：同一个集合中不会有两个相同的元素。

/*直接运用STL里的set来做，比较简单*/

#include<iostream>

#include<iterator>

#include<set>

 

using namespace std;

int main(void)

{

    int n, m;

    while (cin >> n, cin >> m)

    {

        set<int> st;

        int num;

        for (int i = 0; i < n + m; ++i)

        {

            cin >> num;

            st.insert(num);

        }

        int size = st.size();

        set<int>::iterator it = st.begin();

        for (int i = 0; i < size - 1; ++i)

        {

            cout << *it << " ";

            ++it;

        }

        cout << *it << endl;

    }

    return 0;

}

 

7.尽管是一个CS专业的学生，小B的数学基础很好并对数值计算有着特别的兴趣，喜欢用计算机程序来解决数学问题，现在，她正在玩一个数值变换的游戏。她发现计算机中经常用不同的进制表示一个数，如十进制数123表达为16进制时只包含两位数7、11（B），用八进制表示为三位数1、7、3，按不同进制表达时，各个位数的和也不同，如上述例子中十六进制和八进制中各位数的和分别是18和11,。 小B感兴趣的是，一个数A如果按2到A-1进制表达时，各个位数之和的均值是多少？她希望你能帮她解决这个问题？ 所有的计算均基于十进制进行，结果也用十进制表示为不可约简的分数形式。

#include <bits/stdc++.h>

using namespace std;

int main() {

    int n;

    while(~scanf("%d",&n)) {

        int sum=0;

        for(int i=2; i<n; i++) {

            int m=n;

            while(m) {

                sum+=(m%i);

                m/=i;

            }

        }

        int val=__gcd(sum,n-2);

        printf("%d/%d ",sum/val,(n-2)/val);

    }

    return 0;

}