2015-淘宝秋招

1.按照CommonJS规范，在任何模块代码的作用域下内置了以下哪些变量？

       A, module

       B,context

       C, require

       D,exports  

答：A,C,D

可以参考：

阮一峰commjs文章：输出模块变量的最好方法是使用module.exports对象，加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的module.exports对象

var i = 1;
var max = 30;

module.exports = function () {
  for (i -= 1; i++ < max; ) {
    console.log(i);
  }
  max *= 1.1;
};

使用require方法，加载example.js。

// main.js

var example = require('./example.js');

 

2.以下关于application cache的说法，哪些是不正确的？

·       A,对于目标页面而言，可以通过来启用application cache。

·       B, 对于启用了application cache的页面，该页面默认不会被缓存。

·       C,manifest文件仅在初次访问站点时才会被下载。//每次都会下载minifest

·       D, 对于manifest中列出的资源文件，只要它们被修改，下次访问站点时就会被重新下载。//修改了不会重新下载

答：BCD（A没有写全）

解析：application cache是HTML5的一种新技术，应用缓存，HTML5 使用ApplicationCache 接口解决了由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。

3.下面哪些技术可用于优化 CSS 图片加载 ?

·      A CSSSprite

·      B SVGSprite

·      C,Iconfont

·      D Base64

 

答：ABCD

 

4。程序员小马对某 Git 仓库执行一系列操作，请写出每个步骤对应的 Git 命令：

1. 从当前分支hotfix 切换到分支 feature

2. 添加新文件 feature.js

3. 提交文件 feature.js，日志消息为“添加新文件”

4. 将 feature 分支衍合（变基）到 master 分支（不考虑文件冲突）

5. 推送feature 分支到远程服务器 origin 的同名分支

git checkout feature
git add feature.js
git commit -m '添加新文件'
git rebase master
git push origin feature:feature 

5.从前端工程师的角度如何提高页面的用户体验。

 加载速度快
兼容各种浏览器
http://www.iteye.com/news/24291

 

6.

<divclass='mod-spm'data-spmid='123'>

       <divclass='child_a'></div>

       <divclass='child_b'></div>

       <divclass='child_c'></div>

       <divclass='child_d'></div>

    </div>

    <divclass='mod-spm'data-spmid='456'>

       <divclass='child_a'></div>

       <divclass='child_b'></div>

       <divclass='child_c'></div>

       <divclass='child_d'></div>

    </div>

    <divclass='mod-spm'data-spmid='789'>

       <divclass='child_a'></div>

       <divclass='child_b'></div>

       <divclass='child_c'></div>

       <divclass='child_d'></div>

    </div>

有dom结构如上,请用原生代码（禁用jQuery作答）实现以下功能：

(a)计算鼠标在mod-spm区域内的停留时长，data-spm不同视为不同区域
(b)尽量减少性能损耗
(c)重复进入计时累加

7。有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:'1', b:'2', c:'', d:'xxx', e:undefined}。

 

function getQuery(url) {
    var query = url.split('?')[1];
    if (!query) {
        return {};
    }
    query = query.split('&');

    var arr = {};

    for (var i = 0, l = query.length; i < l; i++) {
        var temp = query[i].split('=');
        var key = decodeURIComponent(temp[0]);//
        var value = decodeURIComponent(temp[1] == null ? '' : temp[1]);//value可能是空
        if (key in arr) {           //这段if else是处理key重复
            var valArr = arr[key];
            if (typeof valArr === 'string') {
                valArr = [valArr];
            }
            valArr.push(value);
            arr[key] = valArr;
        }
        else {
            arr[key] = value;
        }
    }

    return arr;
}

 

8.简述浏览器中使用js跨域获取数据的几种方法

jsonp 加载script脚本来跨域
通过修改document.domain来跨子域
使用window.name来进行跨域
使用HTML5中新引进的window.postMessage方法来跨域传送数据
flash

9.如何配置让 nginx 对 js、html、css 文件进行 gzip 压缩输出？

10.请填写个人github地址

https://github.com/QingFlye

11.编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

/*** @param selector {String} 传入的CSS选择器。* @return{Array}*/

var query = function(selector){

//返回查找到的节点数组return [];}

 

/**
 * 用于表示标识符
 *
 * @type {string}
 */
var identifier = '(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+';

/**
 * 用于表示空白字符
 *
 * @type {string}
 */
var whitespace = '[\\x20\\t\\r\\n\\f]';

/**
 * 基本选择器
 *
 * @type {Object}
 */
var expr = {

    /**
     * ID选择器
     *
     * @type {RegExp}
     */
    'ID': new RegExp('^#(' + identifier + ')'),

    /**
     * 类选择器
     *
     * @type {RegExp}
     */
    'CLASS': new RegExp('^\\.(' + identifier + ')'),

    /**
     * 标签选择器
     *
     * @type {RegExp}
     */
    'TAG': new RegExp('^(' + identifier + '|[*])')
};

/**
 * 用于匹配CSS属性转义字符
 *
 * @type {RegExp}
 */
var runescape = new RegExp('\\\\([\\da-f]{1,6}' + whitespace + '?|(' + whitespace + ')|.)', 'ig');

/**
 * 用于处理CSS属性转义字符的替换函数
 *
 * @param {*} _ 此参数仅占位
 * @param {string} escaped 转义后的字符
 * @param {string} escapedWhitespace 是否转义
 * @return {*} 返回处理结果
 */
var funescape = function (_, escaped, escapedWhitespace) {
    var high = '0x' + escaped - 0x10000;

    // NaN表示不转义
    if (isNaN(high) || escapedWhitespace) {
        return escaped;
    }

    if (high < 0) {
        return String.fromCharCode(high + 0x10000);
    }

    return String.fromCharCode(high >> 10 | 0xD800, high & 0x3FF | 0xDC00);
};


/**
 * 解码CSS属性转义字符
 *
 * @param {string} str 要解码的字符串
 * @return {string} 解码后的字符串
 */
function unescape(str) {
    return str.replace(runescape, funescape);
}

/**
 * 对选择器进行词法分析
 *
 * @param {string} selector 选择器字符串
 * @return {Array|null} 如果为空表示解析失败
 */
function tokenize(selector) {

    var tokens = [];

    while (selector) {

        var matched = false;

        // 处理基本选择器
        for (var type in expr) {

            var match;
            if (expr.hasOwnProperty(type) && (match = expr[type].exec(selector))) {

                matched = match.shift();

                tokens.push({
                    matched: matched,
                    value: match,
                    type: type
                });

                selector = selector.slice(matched.length);
            }
        }

        if (!matched) {
            break;
        }
    }

    if (selector) {
        throw new Error(selector + '解析失败');
    }

    return  tokens;
}

/**
 * 进行兼容性检测
 *
 * @type {Object}
 */
var support = (function () {

    var support = {};

    // 检查IE9以下不支持getElementsByClassName的问题
    support.getByClass = !!document.getElementsByClassName;

    // 检查IE67getElementById会返回Name的问题
    var div = document.createElement('div');
    var expando = 'selector-' + new Date().getTime();
    document.body.appendChild(div).id = expando;
    support.getById = !document.getElementsByName(expando).length;

    // 释放多余的元素
    document.body.removeChild(div);
    div = null;

    return support;
})();

/**
 * 用于生成过滤器的函数
 *
 * @type {Object}
 */
var filter = {

    /**
     * 类选择器
     *
     * @param {string} className 类名
     * @return {Function} 过滤函数
     */
    'CLASS': function (className) {

        var pattern = new RegExp('(^|' + whitespace + ')' + className + '(' + whitespace + '|$)');

        return  function (elem) {
            return pattern.test(typeof elem.className === 'string' && elem.className || '');
        };
    },

    /**
     * ID选择器
     *
     * @param {string} id 要匹配的ID
     * @return {Function} 过滤函数
     */
    'ID': support.getById ? function (id) {

        var attrId = unescape(id);

        return function (elem) {
            return elem.getAttribute('id') === attrId;
        };
    } : function (id) {

        var attrId = unescape(id);

        return function (elem) {
            var node;
            return (node = elem.getAttributeNode('id')) && node.value === attrId;
        };
    },

    /**
     * 标签选择器
     *
     * @param {string} nodeNameSelector 要过滤的标签名
     * @return {Function} 过滤函数
     */
    'TAG': function (nodeNameSelector) {

        var nodeName = unescape(nodeNameSelector).toLowerCase();

        return nodeNameSelector === '*' ? function () {
            return true;
        } : function (elem) {
            return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
        };
    }

};

/**
 * 将当前一个匹配数组打包成一个匹配函数
 *
 * @param {Array} matchers 匹配数组
 * @return {Function} 匹配函数
 */
function elementMatcher(matchers) {

    if (matchers.length > 1) {

        return function (elem, context) {
            var i = matchers.length;
            while (i--) {
                if (!matchers[i](elem, context)) {
                    return false;
                }
            }
            return true;
        };
    }

    return matchers[0];
}

/**
 * 使用一组token生成一个匹配函数
 *
 * @param {Array} tokens 一组token
 * @return {Function}
 */
function tokenMatcher(tokens) {

    var matchers = [];

    for (var i = 0, len = tokens.length; i < len; i++) {
        matchers.push(filter[tokens[i].type].apply(null, tokens[i].value));
    }

    return elementMatcher(matchers);
}

/**
 * 合并两个数组或类数组到第一个数组
 *
 * @param {Array} target 数组或类数组
 * @param {Array} args 数组或类数组
 * @return {*} 返回first
 */
function merge(target, args) {
    target = target || [];

    var i = 1;

    // 只传进来target时候直接返回target
    if (arguments.length === i) {
        return target;
    }

    var l = target.length;

    for (; i < arguments.length; i++) {
        args = arguments[i];

        if (args != null) {
            var len = +args.length;
            var j = 0;

            while (j < len) {
                target[l++] = args[j++];
            }

            // 修复IE8下可能造成length失效的问题
            if (isNaN(len)) {
                while (args[j] !== undefined) {
                    target[l++] = args[j++];
                }
            }
        }
    }

    target.length = l;

    return target;

}

/**
 * 使用选择器找出相关的元素
 *
 * @param {string} selector 选择器字符串
 * @param {HTMLElement|HTMLDocument} [context] 上下文对象
 * @return {Array} 查询结果
 */
function query(selector, context) {

    var results = [];
    context = context || document;

    if (!selector || typeof selector !== 'string') {
        return results;
    }

    // 如果context不存在，表示查询非法
    var nodeType;
    if ((nodeType = context.nodeType) !== 1 && nodeType !== 9) {
        return results;
    }

    // 处理单标签的情况
    var match;
    if ((match = rquickExpr.exec(selector))) {

        var m;
        // 处理selector是ID的情况
        if ((m = match[1])) {
            var elem;
            if (nodeType === 9) {
                if ((elem = context.getElementById(m)) && elem.id === m) {
                    results.push(elem);
                    return results;
                }
            }
            else {
                if (context.ownerDocument && (elem = context.ownerDocument.getElementById(m))
                    && contains(context, elem) && elem.id === m) {

                    results.push(elem);
                    return results;
                }
            }
        }
        // 匹配selector是TAG的情况
        else if (match[2]) {
            return merge(results, context.getElementsByTagName(selector));
        }
        // 匹配selector是CLASS的情况
        else if ((m = match[3]) && support.getByClass) {
            return merge(results, context.getElementsByClassName(m));
        }
    }

    var seed = [];
    var found = false;
    var tokens = tokenize(selector);

    for (var i = 0, l = tokens.length; i < l && !found; i++) {
        var token = tokens[i];
        if (support.getByClass && token.type === 'CLASS') {
            merge(seed, context.getElementsByClassName(token.value[0]));
            found = true;
        }
        else if (support.getById && token.type === 'ID' && context.nodeType === 9) {
            var ele = document.getElementById(token.value[0]);
            ele && seed.push(ele);
            found = true;
        }
        else if (token.type === 'TAG') {
            seed = context.getElementsByTagName(token.value[0]);
            found = true;
        }
    }

    !found && merge(seed, context.getElementsByTagName('*'));

    if (!seed.length) {
        return results;
    }

    var matcher = tokenMatcher(tokens);

    for (var j = 0, len = seed.length; j !== len && (elem = seed[j]) != null; j++) {
        if (elem && elem.nodeType === 1 && matcher(elem, context)) {
            results.push(elem);
        }
    }

    return results;
}