[ Javascript ] - 20140827-题目1

[ Javascript ] - 20140827-题目1

1.按照CommonJS规范，在任何模块代码的作用域下内置了以下哪些变量？
  module
A. context
B. require
C. exports
·   
2.以下关于application cache的说法，哪些是不正确的？
A. 对于目标页面而言，可以通过来启用application cache。
B. 对于启用了application cache的页面，该页面默认不会被缓存。
C. manifest文件仅在初次访问站点时才会被下载。
D. 对于manifest中列出的资源文件，只要它们被修改，下次访问站点时就会被重新下载。
3.下面哪些技术可用于优化 CSS 图片加载 ?
A. CSSSprite
B. SVGSprite
C. Iconfont
D. Base64
4 程序员小马对某 Git 仓库执行一系列操作，请写出每个步骤对应的 Git 命令： 
1. 从当前分支hotfix 切换到分支 feature 
2. 添加新文件 feature.js 
3. 提交文件 feature.js，日志消息为“添加新文件”
4. 将 feature 分支衍合（变基）到 master 分支（不考虑文件冲突） 5. 推送feature 分支到远程服务器 origin 的同名分支

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

6.
<div class='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}。


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

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

10.请填写个人github地址

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

1.按照CommonJS规范，在任何模块代码的作用域下内置了以下哪些变量？
·    module
·        context
·        require
·        exports
答案：module require exports
资源链接: http://javascript.ruanyifeng.com/nodejs/commonjs.html

2.以下关于application cache的说法，哪些是不正确的？
·        对于目标页面而言，可以通过来启用application cache。
·        对于启用了application cache的页面，该页面默认不会被缓存。
·        manifest文件仅在初次访问站点时才会被下载。
·        对于manifest中列出的资源文件，只要它们被修改，下次访问站点时就会被重新下载。
答案: B （C或者D不确定）
资源链接: http://www.cnblogs.com/blackbird/archive/2012/06/12/2546751.html

3.下面哪些技术可用于优化 CSS 图片加载 ?
·        CSSSprite
·        SVGSprite
·        Iconfont
·        Base64
答案: ABCD
资源链接:
SVGSprite: http://www.zhangxinxu.com/wordpr ... -sprite-technology/
Iconfont: http://www.cnblogs.com/lch880/p/3359222.html
CssSprite: http://baike.baidu.com/view/2173476.htm?fr=aladdin
Base64: http://www.poluoluo.com/jzxy/201206/166976.html

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
资源链接: http://blog.csdn.net/hcbbt/article/details/11651229

5.从前端工程师的角度如何提高页面的用户体验。
答案: http://www.iteye.com/news/24291

< div class='mod-spm'data-spmid='123'>
        <divclass='child_a'>
        <divclass='child_b'>
        <divclass='child_c'>
        <divclass='child_d'>
    
    <divclass='mod-spm' data-spmid='456'>
        <divclass='child_a'>
        <divclass='child_b'>
        <divclass='child_c'>
        <divclass='child_d'>
    
    <divclass='mod-spm' data-spmid='789'>
        <divclass='child_a'>
        <divclass='child_b'>
        <divclass='child_c'>
        <divclass='child_d'>
    
有dom结构如上,请用原生代码（禁用jQuery作答）实现以下功能：
(a)计算鼠标在mod-spm区域内的停留时长，data-spm不同视为不同区域
(b)尽量减少性能损耗
(c)重复进入计时累加
答案:

<style type="text/css"> .mod-spm{ width: 200px; height: 200px; border: red solid 1px; } </style>

<script type="text/javascript">
    function addEvent( obj, type, fn ) {  
        if (obj.attachEvent) {
            obj.attachEvent( 'on'+type, fn );  
        } else  
            obj.addEventListener( type, fn, false );  
    }  
    function removeEvent( obj, type, fn ) {  
        if ( obj.detachEvent ) {  
            obj.detachEvent( 'on'+type, fn );
        } else 
            obj.removeEventListener( type, fn, false );  
    }
    function getElementsByClassName(tagName){
        var nodes = new Array();
        var allNodes = document.getElementsByTagName(tagName);
        var node = new Object(null);
        for(var i = 0,l = allNodes.length; i < l;i++){
            node = allNodes[i];
            if(node.className === "mod-spm"){
                Array.prototype.push.call(nodes,node);
            }
        }
        return nodes;
    }
</script>
<script type="text/javascript">
    var nodes = getElementsByClassName("div");
    var node = new Object(null);


    var gl = {

    };

    for(var i = 0, l = nodes.length; i < l; i++){
        node = nodes[i];
        var temp = {
            startTime : 0,
            _time : 0
        };
        gl[node.getAttribute("data-spmid")] = temp;
        addEvent(node,"mouseover",function(){
            var o = gl[this.getAttribute("data-spmid")];
            o.startTime = (new Date()).valueOf();
        });
        addEvent(node,"mouseout",function(){
            var o = gl[this.getAttribute("data-spmid")];

            o._time += ((new Date()).valueOf() - o.startTime);
        });
    }

    function _print() {
        console.info(gl)
        var node = new Object(null);
        var info = "";
        for(var i in gl){
            node = gl[i];

            info += "data-spmid为" + i + "的停留时长为"+node._time + "ms<br/>";
        }
        document.getElementById("info").innerHTML= info;
    };

</script>

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 serilizeUrl(url) {
var result = {};
url = url.split("?")[1];
var map = url.split("&");
for(var i = 0, len = map.length; i < len; i++) {
result[map[i].split("=")[0]] = map[i].split("=")[1];
}
return result;
}

8.简述浏览器中使用js跨域获取数据的几种方法
答案:
(1) jsonp 加载script脚本来跨域
(2)通过修改document.domain来跨子域
(3)使用window.name来进行跨域
(4)使用HTML5中新引进的window.postMessage方法来跨域传送数据
资源链接: http://www.cnblogs.com/2050/p/3191744.html

9.如何配置让 nginx 对 js、html、css 文件进行 gzip 压缩输出
答案:
编辑nginx.conf文件，在http段加入一下配置：
代码如下:
gzip on;
gzip_min_length 1000;
gzip_buffers 48k;
gzip_types text/plain application/x-javascript text/css text/html application/xml text/javascript;
重启nginx生效。
资源链接: http://www.jbxue.com/article/2502.html

10.请填写个人github地址
答案:https://github.com/hacke2

11.编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
/**_ @param selector {String} 传入的CSS选择器。_ @return {Array}/
var query = function(selector){
//返回查找到的节点数组return [];}
答案:
var query = function(selector) {
var reg = /^(#)?(.)?(\w+)$/img;
var regResult = reg.exec(selector);
var result = [];
//如果是id选择器
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
}
else {
result.push(document.getElementById(regResult[3]));
}
}
}
//如果是class选择器
else if(regResult[2]) {
if(regResult[3]) {
if(typeof document.getElementsByClassName === 'function') {
var doms = document.getElementsByClassName(regResult[3]);
if(doms) {
result = converToArray(doms);
}
}
//如果不支持getElementsByClassName函数
else {
var allDoms = document.getElementsByTagName("") ;
for(var i = 0, len = allDoms.length; i < len; i++) {
if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
result.push(allDoms[i]);
}
}
}
}
}
//如果是标签选择器
else if(regResult[3]) {
var doms = document.getElementsByTagName(regResult[3].toLowerCase());
if(doms) {
result = converToArray(doms);
}
}
return result;
}

        function converToArray(nodes){
            var array = null;         
            try{        
                array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器         
            }catch(ex){
                array = new Array();         
                for( var i = 0 ,len = nodes.length; i < len ; i++ ) { 
                    array.push(nodes[i])         
                }         
            }      
            return array;
      }

10.请填写个人github地址
答案: https://github.com/hjzheng