私はさらに多くの質問を集めてきましたが、前年もあります。答えは正しいことを保証されていません。エラーやより良い解決策がある場合は、修正してください。
2番目の記事：2014年のフロントエンド筆記試験インターネット企業向けのフロントエンドテストインタビューの質問 - HTML、CSS
以前の質問は非常に基本的であり、あなたが行くほど、あなたはより多くのことになるほど、あなたはより深くなります。
ジュニアJavaScript：
1. JavaScriptはどのような言語とその特性とは何ですか？
標準的な答えはありません。
2. JavaScriptのデータ型は何ですか？
基本データタイプ：文字列、ブール、数字、未定義、ヌル
参照データ型：オブジェクト（配列、日付、regexp、機能）
問題は、変数が配列データ型であるかどうかを判断する方法です。
•方法1。Slice（）メソッドなど、「配列プロパティ」があるかどうかを決定します。この変数のスライスメソッドを自分で定義できるので、時々失敗することがあります
•方法2.OBJインスタンスのArrayは、いくつかのIEバージョンで間違っています
•方法3。両方の方法に脆弱性があります。新しいメソッドアレイ.isarray（）は、ecma script5で定義されており、その互換性を確保します。最良の方法は次のとおりです
if（typeof array.isarray === "undefined"）{array.isarray = function（arg）{return object.prototype.tostring.call（arg）=== "[object array]"}; }3。既知のIDを使用した入力入力ボックスで、この入力ボックスの入力値を取得したいと考えています。それをする方法は？ （サードパーティのフレームワークはありません）
コードコピーは次のとおりです。Document.GetElementByID（ "ID"）。値
4.ページ上のすべてのチェックボックスを取得する方法は？ （サードパーティのフレームワークはありません）
var domlist = document.getElementsBytagname（ 'input'）var checkboxlist = []; var len = domlist.length; //ローカル変数へのキャッシュwhile（len-）{// whileはループよりも効率的です（domlist [len] .type == 'checkbox'）{checkboxlist.push（domlist [len]）; }}5.既知のIDをxxxxにdivのHTMLコンテンツを設定すると、フォントの色が黒に設定されています（サードパーティフレームなし）
コードコピーは次のとおりです。
var dom = document.getElementById（ "id"）;
dom.innerhtml = "xxxx"
dom.style.color = "＃000"
6. DOMノードがクリックされたら、関数を実行できることを願っています。私たちは何をすべきですか？
•イベントをdom：<div onclick =” test（）”> </div>で直接バインドします
•js：xxx.onclick =テストでonclickを介してバインドします
•イベントの追加によるバインディング：addeventListener（xxx、 'click'、テスト）
問題は、JavaScriptのイベントストリームモデルは何ですか？
•「イベントバブル」：イベントは最も具体的な要素に受け入れられ始め、その後段階的に広がります
•「イベントキャプチャ」：イベントは、最初に最も特定のノードによって受信され、次に段階的にダウンして、最も具体的なものまでずっと段階的に受け取られます
•「DOMイベントフロー」：3つのステージ：イベントキャプチャ、ターゲットステージ、イベントバブル
7. AjaxとJson、彼らの長所と短所は何ですか。
Ajaxは、Webページで非同期データインタラクションを実装するための非同期JavaScriptとXMLです。
アドバンテージ：
•ページは、すべてのコンテンツをオーバーロードせずにローカルコンテンツをロードして、データ送信の量を減らすことができますか
•ユーザーエクスペリエンスを改善するために、ページを絶えずリフレッシュしたりジャンプしたりしないでください
欠点：
•検索エンジンに友好的ではありません（
•ajaxの下でフロントとバックの機能を実装するコストが高い
•リクエスト数の増加を引き起こす可能性があります
•クロスドメインの問題制限
JSONは、ECMAのサブセットである軽量のデータ交換形式です
利点：軽量で、人による読みやすい書きや書き込みが簡単で、マシン（JavaScript）で解析しやすく、複合データ型（配列、オブジェクト、文字列、数字）をサポートします
8.次のコードの出力は何ですか？理由を説明してください。
コードコピーは次のとおりです。
var a;
アラート（typeof a）; // 未定義
アラート（b）; //エラーを報告します
説明：未定義は、値が1つだけのデータ型です。この値は「未定義」です。変数がVARを使用して宣言されているが、その割り当てが初期化されていない場合、この変数の値は未定義です。また、Bは宣言されていないため、エラーを報告します。未宣言されていない変数は、宣言されていない変数とは異なることに注意してください。
9.次のコードを見てください、何が出力されますか？理由を説明してください。
コードコピーは次のとおりです。
var a = null;
アラート（typeof a）; //物体
説明：nullは1つの値のみのデータ型であり、この値はnullです。これは、ヌルポインターがターゲットになっていることを示しているため、TypeOF検出を使用すると「オブジェクト」が返されます。
10.次のコードを見てください、何が出力されますか？理由を説明してください。
var未定義、未定義== null; // true1 == true; // true2 == true; // false0 == false; // true0 == ''; // truenan == nan; // false [] == false; // true [] ==！[]; // 真実
•未定義はnullに等しいが、同一ではない（===）
•1つが数字で、もう1つが文字列の場合、文字列を番号に変換しようとします
•ブール値を0または1に数値に変換してみてください
•別の比較数量のタイプに応じて、オブジェクトを数値または文字列に変換してみてください
•したがって、0および空の文字列の判断の場合、「===」を使用することをお勧めします。 「===」は最初に両側の値タイプを決定し、タイプが一致しない場合は偽りになります。
質問は、次のコードを見て、出力とは何か、そしてなぜFOOのタイプがあるのかということです。
コードコピーは次のとおりです。
var foo = "11"+2- "1";
console.log（foo）;
console.log（typeof foo）;
実行後、FOOの値は111で、FOOのタイプは数です。
コードコピーは次のとおりです。
var foo = "11" +2+ "1"; //文字列「1」を追加することと文字列「1」を差し引くことの違いを体験してください
console.log（foo）;
console.log（typeof foo）;実行後、fooの値は1121（ここに文字列スプライシングです）、およびfooのタイプは文字列です。
11.答えを与えるためにコードを見てください。
コードコピーは次のとおりです。
var a = new object（）;
A.Value = 1;
b = a;
b.Value = 2;
アラート（a.value）;
回答：2（引用されたデータ型の詳細を調べる）
12。アレイvar stringArray = ["this"、 "is"、 "baidu"、 "campus"]が知られており、アバート出力「これはBaiduキャンパスです」。
回答：アラート（StringArray.Join（ ""））
問題は、文字列foo = "get-element-by-id"が、それをキャメル表記「getelementbyid」に変換する関数を記述することが知られていることです。
function combo（msg）{var arr = msg.split（ " - "）; var len = arr.length; //ローカル変数にarr.lengthを保存すると、（var i = 1; i <len; i ++）{arr [i] = arr [i] .charat（0）.touppercase（）+arr [i] .substr（1、arr [i] .length-1）; } msg = arr.join（ ""）; msgを返します;}（基本的なAPIを調査する）
13.Var NumberArray = [3,6,2,4,1,5]; （基本的なAPIを調査する）
1）この配列と出力の逆順を実装[5,1,4,2,6,3]
2）配列と出力の降順注文配置を実装[6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5]; numberArray.Reverse（）; // 5,1,4,2,6,3NumberArray.sort（function（a、b）{// 6,5,4,3,2,1 return ba;}）14。yyyy-mm-ddの形での今日の日付出力。たとえば、今日は2014年9月26日、その後出力2014-09-26です
var d = new Date（）; '0' +月：月; // day var day = d.getdate（）; day = day <10？ '0' + day：day; alert（year + ' - ' + month + ' - ' + day）;
15。文字列 "<tr> <td> {$ id} </td> <td> {$ name} </td> </tr>"を10枚、{$ name}をTony（正規表現を使用）で置き換える（正規表現を使用）
回答： "<tr> <td> {$ id} </td> <td> {$ id} _ {$ name} </td> </tr>"。
16。ページ出力の安全性を確保するために、いくつかの特殊文字を逃れる必要があることがよくあります。 escasehtmlを書いて、エスケープ<、>、＆、 "
function Escesphtml（str）{return str.replace（/[<> "＆]/g、function（match）{switch（mate）{case" <"：return" <"<"; case ">"; case "＆"：return "＆" case "/"：return "";}}）;}17.foo = foo || bar、このコードラインはどういう意味ですか？なぜ私はこのように書くのですか？
回答：if（！foo）foo = bar; // fooが存在する場合、値は変更されていません。そうしないと、バーの値はfooに割り当てられます。
短絡式：「&&」と「||」のオペランド式としてオペレーターは、これらの式が評価されると、最終結果が真または偽であると判断できる限り、評価プロセスが終了します。これは短絡評価と呼ばれます。
18.次のコードを見ると、出力は何ですか？ （変数宣言の強化）
コードコピーは次のとおりです。
var foo = 1;
関数（）{
console.log（foo）;
var foo = 2;
console.log（foo）;
}
回答：出力未定義および2。上記のコードは以下と同等です。
var foo = 1; function（）{var foo; console.log（foo）; //未定義のfoo = 2; console.log（foo）; // 2; }関数宣言と変数宣言は、JavaScriptエンジンによって現在の範囲の上部に暗黙的に宣伝されますが、名前を宣伝するだけでは、割り当て部分を宣伝しません。
19。JSを使用して、10から100の間で10の数値をランダムに選択し、それらを配列に保存してソートします。
var iarray = [];関数getRandom（start、iend）{var ichoice = isstart -iend +1; return math.floor（math.random（） * ichoice+isstart;} for（var i = 0; i <10; i ++）{iarray.push（getrandom（10,100））;} iarray.sort（）;20。2つの数値を組み合わせて、2番目の要素を削除します。
コードコピーは次のとおりです。
var array1 = ['a'、 'b'、 'c'];
var barray = ['d'、 'e'、 'f'];
var carray = array1.concat（barray）;
Carray.splice（1,1）;
21.ノードを追加、削除、移動、コピー、作成、および見つける方法（ネイティブJS、実際の基本、すべてのステップの詳細な書き込みなし）
1）新しいノードを作成します
createdocumentfragment（）// domフラグメントを作成します
createElement（）//特定の要素を作成します
createTextNode（）//テキストノードを作成します
2）追加、取り外し、交換、挿入
appendChild（）// add
RemoveChild（）//削除します
checheChild（）//交換
insertbefore（）// insert
3）検索
getElementsByTagname（）//タグ名によって
getelementsbyname（）//要素の名前の値の値が渡されます
getElementById（）//要素ID、一意性
22.そのようなURLがあります：http：//item.taobao.com/item.htm?a=1&b=2&c=&d=xxx＆e。 JSプログラムを作成して、URLで各GETパラメーター（パラメーター名とパラメーターの数が不確かです）を抽出し、{a： '1'、b： '2'、c： ''、d： 'xxx'、e：redefined}などのキー価値の形のJSON構造に戻します。
答え：
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;}23.正規表現コンストラクターvar reg = new regexp（ "xxx"）と正規表現リテラルvar reg = //の違いは何ですか？メールボックスを一致させる正規表現？
回答：Regexp（）コンストラクターを使用する場合、引用符（つまり、 /"Means"）を逃れる必要があるだけでなく、バックスラッシュもダブルする必要があります（つまり、//はA /を意味します）。正規表現リテラルを使用する方が効率的です。
電子メールの定期的なマッチング：
コードコピーは次のとおりです。varregmail = /^( [a-za-z0-9__-]）
24。次のコードを見て、出力の結果を示します。
コードコピーは次のとおりです。
for（var i = 1; i <= 3; i ++）{
setimeout（function（）{
console.log（i）;
}、0）;
};
回答：4 4 4。
原因：JavaScriptイベントプロセッサは、スレッドがアイドル状態になるまで実行されません。問題は、上記のコード出力1 2 3をどのように作成するかということです。
for（var i = 1; i <= 3; i ++）{settimeout（（function（a）{// inctly console.log（a）;}）（i）、0）; }; 1 //出力2325。文字列の前後にスペースをクリアする関数を書き込みます。 （すべてのブラウザと互換性があります）
互換性を考慮して、組み込みインターフェイストリム（）を使用します。
if（！string.prototype.trim）{string.prototype.trim = function（）{return this.replace（/^/s+/、 ""）.replace（// s+$/、 ""）; }} //関数var str = " /t /nテスト文字列" .trim（）;アラート（str == "テスト文字列"）; //「true」アラート26. JavaScriptのCalleeとCallerの役割は何ですか？
答え：
発信者は、現在の関数を呼び出す関数への参照を返します。
Calleeは、実行中の関数関数、つまり指定された関数オブジェクトの本体を返します。
質問は？ウサギのペアが毎月1組のウサギを産む場合;一対の新しいウサギは、2か月目からウサギを産みます。ウサギの各ペアが女性と1人の男性であると仮定すると、n月にウサギのペアがいくつのウサギを繁殖させることができますか？ （Calleeを使用して完了します）
var result = []; function fn（n）{//典型的なフィボナッチシーケンスif（n == 1）{return 1; } else if（n == 2）{return 1; } else {if（result [n]）{return result [n]; } else {//argument.callee（）fn（）result [n] = arguments.callee（n-1）+arguments.callee（n-2）; return result [n]; }}}中間javascript：
1. JavaScriptに5つの主要なデータ型をコピーできる関数クローンを実装します（番号、文字列、オブジェクト、配列、ブール）
•検索ポイント1：基本データ型と参照データ型の違いがメモリに保存されているかどうかは明らかですか？
•検索ポイント2：変数の種類を判断する方法を知っていますか？
•検査ポイント3：再帰アルゴリズムの設計
//方法1：object.prototype.clone = function（）{var o = this.constructor === array？ []：{}; for（これでvar e）{o [e] = typeof this [e] === "object"？この[e] .clone（）：this [e]; } return o;} //方法2：/** *オブジェクトのクローン * @param obj * @returns */function clone（obj）{var buf; if（obj instanceof array）{buf = []; //空の配列を作成するvar i = obj.length; while（i-）{buf [i] = clone（obj [i]）; } bufを返します。 } else if（obj instanceof object）{buf = {}; //（objのvar k）の空のオブジェクトを作成{//このオブジェクトに新しい属性を追加しますbuf [k] = clone（obj [k]）; } bufを返します。 } else {//通常の変数は、return objを直接割り当てます。 }}2。配列内の重複要素を排除する方法は？
var arr = [1,2,3,3,4,4,5,5,6,1,9,3,3,25,4]; function derepeat（）{var newarr = []; var obj = {}; var index = 0; var l = arr.length; for（var i = 0; i <l; i ++）{if（obj [arr [i]] == undefined）{obj [arr [i]] = 1; newarr [index ++] = arr [i]; } else if（obj [arr [i]] == 1）継続; } newARRを返します。 } var newarr2 = derepeat（arr）;アラート（newArr2）; //出力1,2,3,4,5,6,9,253. Xiaoxianはかわいい子犬（犬）であり、その悲鳴はとてもいいです。彼が彼の所有者を見るたびに、彼は叫ぶ（Yelp）。この説明から、次のオブジェクトを取得できます。
function dog（）{this.wow = function（）{alert（ 'wow'）; } this.yelp = function（）{this.wow（）; }}Xiaoxianのように、Xiaomangはかわいい子犬であることが判明しましたが、突然いつか彼は狂ったようになり（Maddog）、誰かを見たとき、彼は叫び声（すごい）し、半秒ごとに呼び続けました（Yelp）。説明に従ってコードを使用して実装してください。 （継承、プロトタイプ、setinterval）
答え：
function maddog（）{this.yelp = function（）{var self = this; setInterval（function（）{self.wow（）;}、500）; }} maddog.prototype = new Dog（）; // testvar dog = new dog（）; dog.yelp（）; var maddog = new maddog（）; maddog.yelp（）;4.次のUL、各列をクリックするときにインデックスを警告する方法は？ （閉鎖）
コードコピーは次のとおりです。
<ul id =” test”>
<li>これは最初の</li>です
<li>これは2番目の</li>です
<li>これは3番目の項目です</li>
</ul>
答え：
//方法1：var lis = document.getElementById（ '2223'）。getElementsByTagname（ 'li'）; for（var i = 0; i <3; i ++）{lis [i] .index = i; lis [i] .onclick = function（）{alert（this.index）; };} //方法2：var lis = document.getElementById（ '2223'）。getElementsByTagname（ 'li'）; for（var i = 0; i <3; i ++）{lis [i] .index = i; lis [i] .onclick =（function（a）{return function（）{alert（a）;}}）（i）;}5。JavaScript関数を書き込み、指定されたタイプのセレクターを入力します（3つの単純なCSSセレクターのみ：ID、クラス、およびTAGNAME、および互換性のあるコンビネーションセレクターは必要ありません）。
/*** @param selector {string}着信CSSセレクター。 * @return {array}*/
回答：（長すぎて、クリックして開きます）
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 selector elseの場合if（regresult [2]）{if（regresult [3]）{if（typeof document.getElementsbyClassName === 'function'）{var doms = document.getElementsByClassName（regResult [3]）; if（doms）{result = convertoarray（doms）; }} // getElementsByClassName関数がサポートされていない場合{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 = convertToArray（doms）; }} return result; } function convertToArray（nodes）{var array = null; try {array = array.prototype.slice.call（nodes、0）; // for nonie browsers} catch（ex）{array = new array（）; for（var i = 0、len = nodes.length; i <len; i ++）{array.push（nodes [i]）}} return array; }6.次のコードを評価し、改善のための提案をしてください。
if（window.addeventlistener）{var addlistener = function（el、type、listener、usecapture）{el.addeventlistener（type、リスナー、usecapture）; };} else if（document.all）{addlistener = function（el、type、listener）{el.attachevent（ "on"+type、function（）{ristener.apply（el）;}）; }}評価する：
•addListener関数は、IFおよびその他のステートメントで宣言されるべきではありません。最初に宣言する必要があります。
•window.addeventlistenerまたはdocument.allを使用する必要はありません。ブラウザを検出するには、機能検出を使用する必要があります。
•AttachEventにはIEでこのポインティングの問題があるため、電話するときに処理する必要があります
改善は次のとおりです。
関数AddEvent（Elem、Type、Handler）{if（Elem.addeventlistener）{elem.addeventlistener（type、handler、false）; } else if（elem.attachevent）{elem ['temp' + type +ハンドラー] =ハンドラー; Elem [Type + Handler] = function（）{Elem ['Temp' + Type + Handler] .Apply（Elem）; }; elem.attachevent（ 'on' + type、elem [type + handler]）; } else {elem ['on' + type] = handler; }}7.文字列オブジェクトにメソッドを追加し、文字列タイプパラメーターを渡してから、文字列の各文字間の価格スペースを返します。たとえば
addspace（ "hello world"）//-> 'helloworld d'
コードコピーは次のとおりです。
string.prototype.spacify = function（）{
this.split（ ''）を返してください（ ''）;
};
次に、上記の質問に答えてください。質問はそうです
1）オブジェクトのプロトタイプに直接メソッドを追加しても安全ですか？特にオブジェクトオブジェクトで。 （私はこれに答えることができませんか？私が知っていることを教えてくれることを願っています。）
2）関数宣言と関数式の式の違いは何ですか？
回答：JavaScriptでは、パーサーがデータを実行環境にロードすると、関数宣言と関数の式を均等に扱いません。パーサーは、コードを実行する前に関数宣言を最初に読み取り、それらを利用可能に（アクセス可能）にします。関数式については、パーサーがコードが解析されて実行される前にあるコードラインに実行されるまで待つ必要があります。 （機能宣言昇進）
8。ログメソッドを定義して、コンソールをプロキシできるようにします。
実行可能な方法：
コードコピーは次のとおりです。
関数ログ（MSG）{
console.log（msg）;
}
log（ "hello world！"）// hello world！
複数のパラメーターを渡す場合はどうなりますか？明らかに上記の方法は要件を満たすことができないため、より良い方法は次のとおりです。
コードコピーは次のとおりです。
function log（）{
console.log.apply（Console、arguments）;
};
問題は、適用方法と通話方法の類似点と相違点は何ですか？
答え：
ApplyとCallの2つの関数は同じです。つまり、オブジェクトの1つの方法を呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。関数のオブジェクトコンテキストを初期コンテキストからThatOBJによって指定された新しいオブジェクトに変更します。
ただし、2つの間にはパラメーターに違いがあります。最初のパラメーターの意味は同じですが、2番目のパラメーターの場合：適用は、複数のパラメーターを配列に組み合わせるパラメーターの配列に渡され、呼び出しは呼び出しのパラメーターとして渡されます（2番目のパラメーターから始まる）。たとえば、func.call（func1、var1、var2、var3）の対応する適用執筆方法は、func.apply（func1、[var1、var2、var3]）です。
9. JavaScriptの擬似アレイとは何ですか？擬似アレイを標準配列に変換する方法は？
答え：
Pseudo-Array（クラス配列）：配列メソッドを直接呼び出すことも、長さの属性の特別な動作を期待することもできませんが、実際の配列トラバーサル方法でそれらを通過することはできません。通常、関数の引数パラメーターは、getelementsbytagname、document.childnodesなどとも呼ばれ、すべて擬似アレイに属するノデリストオブジェクトを返します。配列は、array.prototype.slice.call（fakearray）を使用して実際の配列オブジェクトに変換できます。
8番目の質問ステムに従って、「Hello World！」など、各ログメソッドに「（APP）」プレフィックスを追加する必要があるとします。 - > '（app）hello world！'。この方法は次のとおりです。
function log（）{var args = array.prototype.slice.call（arguments）; // Unshiftアレイメソッドを使用するには、引数を実際の配列arg.unshift（ '（app）'）に変換します。 console.log.apply（console、args）; };10。スコープのコンテキストとこれを理解するには、次のコードを参照してください。
var user = {count：1、getCount：function（）{return this.count; }}; console.log（user.getCount（））; //何？var func = user.getCount; console.log（func（））; // 何？2つのコンソールの出力は何ですか？なぜ？
答えは1で未定義です。
FUNCはWinoDWのコンテキストで実行されるため、Countプロパティにアクセスできません。
問題は、UESRが常にFUNCのコンテキストにアクセスできるようにする方法、つまり1を正しく返す方法です。
回答：正しい方法は、function.prototype.bindを使用することです。各ブラウザの完全なコードと互換性があります。
function.prototype.bind = function.prototype.bind || function（context）{var self = this; return function（）{return self.apply（context、arguments）; };} var func = user.getCount.bind（user）; console.log（func（））;11。ネイティブJSのwindow.onloadとjqueryの$（document）.ready（function（）{}）の違いは何ですか？ネイティブJSを使用してJQの対応方法を実装する方法は？
window.onload（）メソッドは、ページ内の画像を含むすべての要素が実行前にロードされるまで待機する必要があります。
$（document）.ready（）は、DOM構造が描画された後に実行され、ロードされるまで待つ必要はありません。
/ * * wheneady（） *に関数を渡すドキュメントが解析され、操作の準備ができたら、関数はドキュメントのメソッドと呼ばれますonedy =（function（）{//ハンドラー（e）{if（ready）return //イベントハンドラーは完全に実行されることを確認してください。これらの関数の呼び出しにより、より多くの関数が登録される場合があります（var i = 0; i <funcs.length; i ++）{funcs [i] .call（document）} funcs = null; } //受信したイベントの任意のイベントのハンドラーを登録する（document.addeventlistener）{document.addeventlistener（ 'domcontentloaded'、handler、false）; document.addeventlistener（ 'readystatechange'、ハンドラー、false）; // ie9+ window.addeventlistener（ 'load'、handler、false）; } else if（document.attachevent）{document.attachevent（ 'onreadeystatechange'、handler）; window.attachevent（ 'onload'、handler）; } // return recready（）関数return function onedy（fn）{if（ready）{fn.call（document）; } else {funcs.push（fn）; }}}）（）;上記のコードを理解するのが非常に困難な場合、次の簡易バージョン：
function ready（fn）{if（document.addeventlistener）{//標準のブラウザーdocument.addeventlistener（ 'domcontentloaded'、function（）{// login event {// document.removeeventlistener（ 'domcontentloaded'）; } else if（document.attachevent）{// document.attachevent（ 'onreadystatechange'、function（）{if（document.readystate == 'complete'）{document.detachevent（ 'onreadystatechange'、arguments.callee）; fn（）; // function execution}）; }};12。（デザインの質問）ページの特定のノードにドラッグを実装したいですか？それをする方法は？ （ネイティブJSを使用）
コンセプトに答えるだけで、ここにいくつかの重要なポイントがあります
1.ドラッグする必要があるノードにマウスダウン、マウスムーブ、マウスアップイベントをバインドします
2。Mousedownイベントがトリガーされたら、ドラッグとドラッグを開始します
3. Mousemoveの場合、event.clientxとclientyを介してドラッグ位置を取得し、リアルタイムで位置を更新する必要があります。
4.マウスアップの場合、ドラッグアンドドロップが終了します
5.ブラウザの境界に注意してください
13。
function setcookie（name、value、days）{// cookieに時間変数を追加するvar exp = new date（）; exp.settime（exp.gettime（） + days*24*60*60*1000）; //有効期限を日数に設定しますdocument.cookie = name + "=" + escase（value） + "; expires =" + exp.togmtstring（）; }関数getCookie（name）{var result = ""; var mycookie = ""+document.cookie+";"; var searchName = "+name+" = "; var startofcookie（name）{var result =" "; var mycookie =" "+document.cookie+"; "; var searchname ="+name+"="; var startofcookie = mycookie.indexof（searchName）; var endofcookie; if（satrtofcookie！= -1）{startofcookie += searchname.length; endofcookie = mycookie.indexof（ ";"、startofcookie）; result =（mycookie.substring（startofcookie、endofcookie））; } return result;}（function（）{var otips = document.getelementbyid（ 'tips'）; //ヒントのIDがヒントであると仮定しますvar page = {check：function（）{// tips 'cookieが存在するかどうかをチェックし、var vary（' tips '） if（tips == "never_show_again"）false; 「インライン」; init（）{this.showtip（）setcookie（ 'tips'、 'show'）; page.init（）;}）（）;14。次の機能の関数は何ですか？空白の領域で何を埋めるべきですか？
// define（function（window）{function fn（str）{this.str = str;} fn.prototype.format = function（）{var arg = ______; return this.str.replace（_____、function（a、b）{return arg [b] || ";}） fn（ '<p> <a href = "{0}"> {1} </a> <span> {2} </span> </p>'）;回答：関数にアクセスする目的は、形式関数を使用して{0}のような関数のパラメーターを置き換え、フォーマットされた結果を返すことです。
最初の空は次のとおりです。引数
2番目の空は：// {（/d+）/}/igです
15.オブジェクト指向のJavaScriptを使用して、自己紹介します。 （答えはありません、自分で試してみてください）
回答：オブジェクトまたはJSONは良い選択です。
16.ネイティブJSによるAjaxを実装する原則を説明します。
Ajaxのフルネームは非同期JavaScriptとXMLです。その中でも、非同期は非同期を意味します。これは、従来のWeb開発で使用されている同期方法とは異なります。
Ajaxの原則は、単にxmlhttprequestオブジェクトを使用して非同期要求をサーバーに送信し、サーバーからデータを取得し、JavaScriptを使用してDOMを操作してページを更新することです。
XMLHTTPREQUESTは、AJAXのコアメカニズムです。 IE5で最初に導入され、非同期リクエストをサポートするテクノロジーです。簡単に言えば、JavaScriptは、ユーザーをブロックせずにリクエストを迅速に行い、サーバーへの応答を処理できます。更新効果を達成しません。
xmlhttprequestオブジェクトのプロパティは次のとおりです。
•ReadedStateChang各州の変更によってトリガーされるイベントのイベントハンドラー。
•ResponseTextサーバープロセスからデータの文字列形式を返します。
•ResponseXML DOM互換ドキュメントデータオブジェクトは、サーバープロセスから返されます。
•一般的な404（見つからない）や200（準備ができている）など、サーバーから返されるステータス数値コード
•ステータステキスト文字列情報は、ステータスコードを添付します
•ReadyStateオブジェクトの状態値
•0（非初期化）オブジェクトは確立されていますが、初期化されていません（開かれた方法は呼び出されていません）
•1（初期化）オブジェクトが確立されており、送信方法はまだ呼び出されていません
•2（送信データ）送信メソッドが呼び出されましたが、現在のステータスとHTTPヘッダーは不明です
•3（データ送信）いくつかのデータが受信されました。応答とHTTPヘッダーが不完全であるため、応答ボディと応答テキストが取得されるとエラーが発生します。
•4（完了）データが受信され、完全な応答データはResponseXMLおよびResponseTextを介して取得できます。
以下は、関数の単純なカプセル化です：（わずかに長く、クリックして開きます）
ajax（{url： "./testxhr.aspx"、// requestアドレスタイプ： "post"、// requestメソッドデータ：{name： "super"、age：20}、 "json"、cuscess：function（response、xml）{// code exected deed ofted place（code ofted（xml）{// cose（xml）{//コード）{//コード（// function ajax（options）{options = options || {}; options.type =（options.type || "get"）。touppercase（）; options.datatype = options.datatype || 「Json」; var params = formatparams（options.data）; // create -nonie6-ステップ1 if（window.xmlhttprequest）{var xhr = new xmlhttprequest（）; } else {// ie6および以下のブラウザvar xhr = new ActiveXObject（ 'microsoft.xmlhttp'）; } //受信 - ステップ3 xhr.onreadystatechange = function（）{if（xhr.readystate == 4）{var status = xhr.status; if（status> = 200 && status <300）{options.success && options.success（xhr.responsetext、xhr.responsexml）; } else {options.fail && options.fail（status）; }}} // connect and send -step 2 if（options.type == "get"）{xhr.open（ "get"、options.url + "？" + params、true）; xhr.send（null）; } else if（options.type == "post"）{xhr.open（ "post"、options.url、true）; // xhr.setRequestheader（ "content-type"、 "application/x-www-form-urlencoded"）を送信するときにコンテンツタイプを設定します。 xhr.send（params）; }} //フォーマットパラメーター関数formatparams（data）{var arr = []; for（data in dataのvar name）{arr.push（encodeuricomponent（name） + "=" + encodeuricomponent（data [name]））; } arr.push（（ "v =" + math.random（））。置換（ "。"））; return arr.join（ "＆"）; }上記のコードでは、Ajaxプロセスについて大まかに説明しており、説明は自分でグーグルで検索されます。質問は終了しません。 JSONPとPJAXとは何かを知っていますか？
答え：
JSONP ：（パディング付きJSON）は、クロスドメイン要求方法です。主な原則は、スクリプトタグをドメイン間で要求できる機能を活用することです。 SRC属性はリクエストをサーバーに送信し、サーバーはJSコードを返し、Webページは応答を受け入れ、直接実行します。これは、スクリプトタグを介して外部ファイルを参照するという原則と同じです。 JSONPは、コールバック関数とデータの2つの部分で構成されています。コールバック関数は通常、Webページによって制御され、パラメーターとしてサーバー側に送信されます。サーバー側は、関数とデータを文字列に綴り、戻ります。
PJAX：PJAXは、Ajax+History.PushStateに基づいた新しいテクノロジーです。 This technology can change the content of a page without refresh and can change the URL of the page. (Keypoint: It can implement back functions that cannot be achieved by ajax) pjax is an encapsulation of ajax+pushState, and supports local storage, animation and other functions. Currently, it supports various versions such as jquery, qwrap, kissy, etc.
觉得题目还ok的亲点个推荐哦，题量会不断增加。
你可能会感兴趣：BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
暂且贴出我做出答案的部分。有时间把未做出答案也贴出来。针对文中各题，如有更好的解决方法或者错误之处，各位亲务必告知我，误人子弟实乃罪过。
原文：http://www.cnblogs.com/coco1s/p/4029708.html