フロントエンドの面接問題(1)

グループで誰かが試験問題を共有していたので、腕試しにやってみました。

1. 以下のレイアウトを HTML5 標準で完成させてください#

HTML:
	<header>HEADER</header>
	<nav>NAV</nav>
	<aside>ASIDE</aside>
	<section>SECTION</section>
	<footer>FOOTER</footer>
CSS:
	body{
		color: white;
		font-size: 14px;
		text-align: center;
	}
	header{
		background-color: black;
	}
	nav{
		background-color: gray;
	}
	aside{
		width: 30%;
		height: 200px;
		float: left;
		background-color: red;
	}
	section{
		width: 70%;
		height: 200px;
		margin-left: 30%;
		background-color: blue;
	}
	footer{
		background-color: orange;
	}

2. 以下の2つのケースを実現するフレームワークレイアウトのCSSを記述してください。#

HTML:
	<div class="box1">1</div>
	<div class="box2">2</div>
CSS:
	div{width: 600px;height: 50px}
	.box1{background-color: red;}
	.box2{background-color: blue;}
	@media screen and (min-width:1024px ) {
		div{
			float: left;
		}
	}
	@media screen and (max-width: 1024px) {
		div{
			float: none;
		}
	}

3. 画像とテキストが同時に含まれる行データを垂直方向に中央揃えにしてください（`table`は使用せず、互換性に注意してください）#

HTML:
	<div class="box1">
		<div class="wrap1">
			<p>我要居中</p>
			<img src="http://images.cnitblog.com/blog/607355/201408/100022249123500.png" alt="liveReload">
		</div>
	</div>
	<div class="box2">
		<div class="wrap2">
			<p>我也要居中</p>
			<img src="http://images.cnitblog.com/blog/607355/201408/100022249123500.png" alt="liveReload">
		</div>
	</div>
	<div class="box3">
		<div class="wrap3">
			<p>我也要居中</p>
			<img src="http://images.cnitblog.com/blog/607355/201408/100022249123500.png" alt="liveReload">
		</div>
	</div>
CSS:
	.box1,.box2,.box3,.box4{
		width: 33%;
		height: 300px;
		float: left;
		border: 1px solid #00FFFF
	}
	/*方法1，用display:table*/
	.box1{
		display: table;
	}
	.wrap1{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	/*方法2，用绝对定位法*/
	.box2{
		position: relative;
	}
	.wrap2{
		width: 150px;
		height: 150px;
		border: 1px solid black;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	/*方法3，用translate方法*/
	.box3{
		position: relative;
	}
	.wrap3{
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		   -moz-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		     -o-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);
	}

4. `cookie`、`sessionStorage`、`localStorage`の相違点と共通点を説明してください。#

共通点：いずれもブラウザ側に保存されるデータです。相違点： cookieデータは、常に同オリジンのHTTPリクエストで送信されます（不要な場合でも）。つまり、cookieはブラウザとサーバー間でやり取りされます。一方、sessionStorageとlocalStorageは自動的にデータをサーバーに送信せず、ローカルにのみ保存されます。cookieデータにはパス（path）の概念もあり、特定のパスにのみcookieを制限できます。 保存サイズの制限も異なります。cookieデータは4KBを超えることはできません。また、HTTPリクエストごとにcookieが送信されるため、cookieはセッションIDのようなごく小さなデータの保存にのみ適しています。sessionStorageとlocalStorageにも保存サイズの制限はありますが、cookieよりもはるかに大きく、5MB以上に達することもあります。 データの有効期限も異なります。sessionStorageは現在のブラウザウィンドウが閉じられるまでのみ有効であり、永続的な保持はできません。localStorageは常に有効で、ウィンドウやブラウザを閉じても保存され続けるため、永続データとして使用されます。cookieは、設定されたcookieの有効期限が切れるまで、ウィンドウやブラウザを閉じても有効です。 スコープも異なります。sessionStorageは、同じページであっても異なるブラウザウィンドウ間で共有されません。localStorageは、すべての同オリジンウィンドウで共有されます。cookieも、すべての同オリジンウィンドウで共有されます。

5. 以下のコードのパフォーマンス上の問題を指摘し、最適化してください。#

var str=" 123";
str +=" 456 ,";
str +=" 789 ,";
str +=" 012" ;

どう答えたらいいか分かりません、-_-

6. 以下の要件を満たすユーザー・クラスを記述してください。#

プロパティ：id、name、password、age
メソッド：ユーザー情報を取得し、JSON文字列を返す GetUserInfo
メソッド：ユーザーログイン情報を検証し、ajaxで実装し、ログイン成功または失敗のメッセージを返す CheckLogin
ユーザー・クラスのオブジェクトを作成し、GetUserInfoメソッドをオーバーライドしてください。

コード：

var Person = {
  id: "ID",
  name: "Name",
  password: "PassWord",
  $age: null,
  get age() {
    if (this.$age == undefined) {
      return new Date().getFullYear() - 1993;
    } else {
      return this.$age;
    }
  },
  set age(val) {
    if (!isNaN(+val) && +val > 0 && +val < 120) {
      this.$age = +val;
    } else {
      throw new Error(val + "不是正确的年龄");
    }
  },
  GetUserInfo: function () {
    return {
      id: this.id,
      name: this.name,
      password: this.password,
      age: this.age,
    };
  },
  CheckLogin: function (data, success, error) {
    //data为用户数据，success和error分别是成功和失败的回调函数
    var xmlhttp;

    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      //for IE6
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        if (xmlHttp.responseText === "OK") {
          if (typeof success === "function") {
            success();
            console.log("登陆成功");
          }
        } else {
          error();
          console.log("登录错误");
        }
      }
    };
    xmlhttp.open("POST", "Login", true);
    xmlhttp.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded",
    );
    xmlhttp.send(data);
  },
};

var me = Object.create(Person);
me.id = "123";
me.name = "kisnows";
me.password = "kPassword";
var myData = me.GetUserInfo();
console.log(myData);
me.GetUserInfo = function () {
  console.log("Rewrite GetUserInfo");
};

7. `jQuery`プラグイン開発：データリストページがあり、以下の要件があります。#

奇数行は背景色なし
偶数行は背景色#EEE
マウスが特定の行にホバーした際に背景色を#0066CCにし、テキスト色を白に変更し、マウスが離れたら元に戻す

ul要素内のli要素に背景を設定すると仮定した場合、コードは以下の通りです。

(function ($) {
  $.fn.extend({
    ChageBg: function () {
      var lis = $(this).find("li");
      var bfBg, bfCl;
      for (var i = lis.length - 1; i >= 0; i--) {
        lis[i].index = i;
        if (i % 2 === 0) {
          $(lis[i]).css("backgroundColor", "#EEE");
          // lis[i].style.backgroundColor = '#EEE';
        }
        $(lis[i]).mouseover(function () {
          bfBg = $(this).css("backgroundColor");
          // console.log($(this),bfBg)
          bfCl = $(this).css("color");
          $(this).css({
            backgroundColor: "#0066CC",
            color: "#FFF",
          });
        });
        $(lis[i]).mouseout(function (pro) {
          $(this).css({
            backgroundColor: bfBg,
            color: bfCl,
          });
        });
      }
    },
  });
})(jQuery);

8. `HTML5`を使用して動画または音声を再生し、マーカー機能（指定された開始時間から終了時間まで再生する機能。例えば、10秒の動画を2秒目から8秒目まで再生する）をサポートしてください。#

HTML:
<video id="video1" controls="controls">
  <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
  <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support HTML5 video.
</video>

コントロールバー付きの音声・動画の埋め込み方は知っていますが、マーカー機能については知りません。インターネットでも見つけられませんでした。ご存知の方がいらっしゃいましたら、ぜひ教えていただけると幸いです。

9. `CSS3`の`transition`と`Animation`アニメーション終了後のコールバック関数は何ですか。#

この問題の答えは、以下のネットワークリソースからのものです：http://blog.csdn.net/renfufei/article/details/19617745

transitionendイベントとanimationendイベントは、標準ブラウザのアニメーション終了コールバック関数です。webkitベースのブラウザは依然としてプレフィックスに依存しているため、呼び出す前にイベントのプレフィックスを特定する必要があります。

/* From Modernizr */
function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd',
      'MsTransition':'msTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

/* 监听 transition! */
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
    console.log('Transition 完成!  原生JavaScript回调执行!');
});

/*
    在 "whichTransitionEvent" 中,可以将 "transition"文本替换为  "animation",则处理的就是动画,此处代码省略...)
*/

まとめ#

4問目は、取り組む前はそれほど深く理解していませんでした。ブラウザ側に存在するローカルデータであり、sessionStorageとlocalStorageがHTML5の新機能であること、sessionStorageが短期保存、localStorageが長期保存であることだけを知っていました。
6問目のCheckLoginメソッドの具体的な実装方法が分かりませんでした。
8問目のマーカー機能については知りませんでした。
9問目は以前聞いたことがありませんでした。

1. 以下のレイアウトを HTML5 標準で完成させてください#

2. 以下の2つのケースを実現するフレームワークレイアウトのCSSを記述してください。#

3. 画像とテキストが同時に含まれる行データを垂直方向に中央揃えにしてください（tableは使用せず、互換性に注意してください）#

4. cookie、sessionStorage、localStorageの相違点と共通点を説明してください。#

5. 以下のコードのパフォーマンス上の問題を指摘し、最適化してください。#

6. 以下の要件を満たすユーザー・クラスを記述してください。#

7. jQueryプラグイン開発：データリストページがあり、以下の要件があります。#

8. HTML5を使用して動画または音声を再生し、マーカー機能（指定された開始時間から終了時間まで再生する機能。例えば、10秒の動画を2秒目から8秒目まで再生する）をサポートしてください。#

9. CSS3のtransitionとAnimationアニメーション終了後のコールバック関数は何ですか。#