フロントエンド面接の体験概要-jsチュートリアル-php.cn

今日やるべきことをやり、グルテンを共有し、一緒に進歩しましょう。たくさん汗をかいています、さあ。

忘れている部分もあるので、覚えていることを書きますが、少しわかりにくいかもしれません。

パート 1 チームリーダー

1. URL の構造

URI—Universal Resource Identifier ユニバーサルリソース識別子

HTML ドキュメント、画像、ビデオクリップ、プログラムなど、Web 上で利用可能なすべてのリソースは、 URI を見つけるため、
URI は通常 3 つの部分で構成されます
① リソースにアクセスするための命名メカニズム
② リソースが保存されているホスト名
③ リソースを強調したパスで表されるリソース自体の名前。

URL—Uniform Resource Locator

URL は、インターネット上の情報リソースを記述するために使用される文字列で、主にさまざまな WWW クライアントプログラムやサーバープログラム、特に有名な Mosaic で使用されます。
URL は、ファイル、サーバーアドレス、ディレクトリなどのさまざまな情報リソースを統一された形式で記述するために使用できます。
URLは通常、
①プロトコル（またはサービスメソッド）
②リソースを格納するホストのIPアドレス（場合によってはポート番号を含む）
③ホストリソースの特定のアドレスの3つの部分で構成されます。ディレクトリやファイル名など。

例
URI = 作文
URL = 議論的なエッセイ、物語、詩...

次に

1. マクロを説明するとき、教師は次のように尋ねます。今日のテストの「作文」はどれも優れていますが、同じことを指しているとしても、全員の「論述」が優れているとは言いません。
2. 客観的に説明するときは、「今日は詩を使って作曲した」とくどくど言うのではなく、デスクメイトにこう言います。

同様に

技術文書の仕様を書くときは、特定のパラメータに「URL 形式文字列」を渡す必要があると言うのではなく、特定のパラメータに URI を渡す必要があると言うでしょう。

フロントエンド面接の体験概要

Scheme:// プロトコル部分は次で終わります: 一般的なプロトコルには HTTP、HTTPS などが含まれます。
//: 階層型 URL 識別子は、次の情報からプロトコルを分離するものとして理解できます
ログイン: パスワード@: ID 認証の一般的なプロトコルは、データ取得にデフォルトの匿名形式を使用します
アドレス: サーバーアドレスは通常、ドメイン名の形式で存在します
ポート: サーバーポートさまざまなプロトコルがあります自身のデフォルトのポート番号
/path/to/resource: ファイルパスは唯一の特定のリソースを指します
?query_string: クエリ文字列
／#fragment: フラグメントID この部分のコンテンツは表示されませんページ下部のトップに戻るボタンは、

//递归的方法
function test(n){
  if(n<2){
    return 1;
  }
  return test(n-1)+test(n-2)
}
alert(test(9))

ログイン後にコピー

rreeee

緊張しています、メソッド 2 は別の方法で書かれています

3. ページが読み込まれた後、ブラウザーがページにリクエストを送信します。何が起こったのか

この質問は、質問 1: 自分で穴を掘る

につながります。前の要約は適切ではありませんでした。。次に

ブラウザのスレッドを開き、www/baidu.com のドメイン名に基づいて DNS サーバーを見つけ、対応する IP アドレスに解決します。たとえば、次のように解析されます: http://www.php.cn/:80/login.aspx

ブラウザが IP アドレスを解析した後の 2 番目のステップは、指定された URL の HTTP カプセル化を実行し、ブラウザが URL を HTTP メッセージにカプセル化した後の 3 番目のステップは、HTTP リクエストメッセージをサーバーに送信することです
(注: ブラウザはどのようにして http リクエストメッセージをサーバーに送信しますか? 回答: ブラウザは内部で Socket オブジェクトを作成し、http リクエストメッセージを byet[] バイトに変換してから、Socket.Sent() メソッドを呼び出してデータをサーバーに送信します。ここでもう 1 つの質問があります。ページ中にリクエストはありますか。私の答え: おそらく

私自身の状況、つまりフロントエンドとバックエンドのネゴシエーションインターフェイス、フロントエンドとフロントエンドの共同開発、フロントエンドについて話しました。バッフルデータの書き込みが終わり、最後に調整インターフェイスです

以下は参考になります

現在、フロントエンドとバックエンドは分離されており、バックエンドサーバーの役割はリクエストを受信するだけです。それらをデータの形式で返し、データのレンダリングと表示の方法はフロントエンドに任されます。プレゼンテーション層はフロントエンドとバックエンドの分離を実現するために使用されます

5. ボックスモデルについてお話しました。標準のボックスモデルと奇妙なボックスモデルについては説明しませんでした

6. MV* フレームワークを理解または使用すること、モジュール性と反応について説明しました

。

これ以上説明しません

8. あなたの会社のプロジェクトで使用されているパッケージ化ツールについて教えてください (開発者とユーザーにとってどのような良い経験がありますか?)

その会社は ant を使用しています

他のプロジェクトでは最近 webpack を使用していると言いました、

(1) ホットロード

(2) ファイル圧縮とパッケージ化

问了webpack的基本配置，自己回答的：entery和output，感觉好浅薄。还是用的少，了解少的缘故吧

webpack的常用配置

entry:{} //加载模块的入口点
output:{}//打包文件的路径和名称
module:{}//那些加载器来处理那些文件
resolve:{}//设置模块的一些细节
plugins:[]//系统插件和扩展插件

9.使用的vue其他生态库

使用了 vue-router、vue-resource，了解vuex

由此引出问题10，11，12

10.说说vue-router的原理，怎么实现路由的

平时做项目能正常跳转就可以了，没有想过路由怎么路由的，没答上来。。

SPA路由实现原理不知道面试官想得到的是不是类似这样的答案。

11.vue的生命周期

フロントエンド面接の体験概要

12.vue组件通信

父子组件通信的机制，传递数据使用prop属性

动态Prop

用 v-bind 动态绑定 props 的值到组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

<p>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</p>

<child :my-message="parentMsg"></child>

ログイン後にコピー

单向数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

通常有两种改变 prop 的情况：

prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；
prop 作为需要被转变的原始值传入。

13.说说JSONP的实现原理

JSONP ： JSON with Padding

（1）script标签 src属性可以访问外部资源

（2）用script标签加载资源是没有跨域问题的

在资源加载进来之前定义好一个函数，函数接受一个参数，函数中包含实现逻辑（要做什么事）

通过script标签加载远程文件资源，当远程文件被加载进来时，执行当前定义好的函数，数据就是函数传入的参数

14.职业规划

求职定位，到底想干啥？

第二部分领导面

每一点都非常深入。

1.css盒模型

标准盒模型和怪异盒模型不再重复
box-sizing属性：content-box：标准盒模型，border-box：怪异盒模型
行内元素同样具有盒模型

A.任何元素都可以设置border

<!-- 行内元素可以设置border 设置宽高无效-->
<span style="border:10px solid red;width:100px;height:100px">haha</span>

ログイン後にコピー

フロントエンド面接の体験概要

B.行内元素设置padding，margin 上下是无效的，左右是有效的

<!-- 行内元素设置padding、margin-->
<p style="width:90px;height:100px;background:blue;">
    <span style="background:yellow;padding:5px;margin:20px;">1782</span>
    <p>
        woship
    </p>
</p>![Snip20170211_5](/Users/shenyuanyuan/Desktop/Snip20170211_5.png)

ログイン後にコピー

フロントエンド面接の体験概要

行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。

黄色内边距5px
左边黄色距离蓝色20px
上下虽然显示padding，但是padding并没有影响其他元素

2.position定位

（1）position的属性有哪些？默认的是什么？

默认值：static

属性有5个分别是：relative、absolute、fixed、inherit、static

（2）例子考察

父元素p ：width:500px;height:200px;position: static|absoluta|relative|fixed。 position分别取值，子元素怎么定位？

子元素p：width：200px;height:200px;position：absolute

<!-- 父元素默认static-->
<p style="background:red;width:500px;height:60px;">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;">
    </p>
</p>

<br>
<!-- 父元素默认relative-->
<p style="background:red;width:500px;height:60px;position:relative">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;">
    </p>
</p>
<br/>
<!-- 父元素默认fixed-->
<p style="background:gray;width:500px;height:60px;position:fixed">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;">
    </p>
</p>
<!-- 父元素默认absolute-->
<p style="background:red;width:500px;height:60px;position:absolute">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:50px;top:30px;">
    </p>
</p>

ログイン後にコピー

フロントエンド面接の体験概要

发现：子元素绝对定位，按照除了属性为 static以外的第一个父元素定位。所以父元素设置为：absolute、relative、fixed，子元素定位表现一致；

（3）例子考察(事实证明，面试官这道题也错了)

如果子元素设置margin、border、padding呢？子元素左上角的点以margin、border、还是padding定位

<p style="background:red;width:500px;height:60px;position:relative">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:fixed;left:0px;top:30px;">
    </p>
</p>
<br/>
<!--  最原始-->
<p style="background:red;width:500px;height:60px;position:relative">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;">
    </p>
</p>
<br/>
<!--  最原始：添加margin-->
<p style="background:red;width:500px;height:60px;position:relative">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;margin:10px;">
    </p>
</p>
<br/>
<!--  最原始：添加padding-->
<p style="background:red;width:500px;height:60px;position:relative">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;padding:10px;">
    </p>
</p>
<br/>
<!--  最原始：添加botder-->
<p style="background:red;width:500px;height:60px;position:relative">
    <p style="background:yellow;width:10px;height:10px;position:absolute;left:0px;top:0px;" >
    </p>
    <p style="background:blue;width:100px;height:20px;position:absolute;left:10px;top:10px;border:10px solid yellow;margin:5px;">
    </p>
</p>

ログイン後にコピー

フロントエンド面接の体験概要

RunJS上边分享的代码

3.BFC（块级格式化上下文）

清除遮挡

<p class="left"></p>
<p class="right">    </p>
.left {
width: 100px;
height: 100px;
background: red;
float: left;
}
.right {
height: 200px;
background: yellow;
overflow:hidden;//属性清楚遮挡
}

ログイン後にコピー

关闭浮动

解决垂直双边距问题

<p style="background:gray;width:300px;height:300px;overflow:auto">
    <p style="background:green;margin-top:10px;float:left;width:20px;height:20px">    
    </p>
    <p style="background:red;width:50px;height:50px;margin-top:40px;"></p>
</p>

ログイン後にコピー

BFC的作用

http://www.php.cn/

4.flex（css3新特性）

<p class="container">
  <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
</p>    
.container {
  display: flex;
  flex-flow: row;
    width:300px;
    height:100px;
    background:gray;
    justify-content:space-around
}
.box {
  width: 20px;
    background:yellow;
    height:20px;
}

ログイン後にコピー

フロントエンド面接の体験概要

flex参考1

flex参考2

在线例子：http://www.php.cn/

5.JS原型和原型链

个人觉得讲的很好的js原型、原型链

原型链

function Foo(){
}
var a = new Foo();//new的操作做了什么
var a = new Object()
a.__proto__ = Foo.prototype
Foo.call(a)

ログイン後にコピー

6.闭包

闭包：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

function a(){
  var i=0;
  function b(){
     alert(i);       
  }       
  return b;   
}   
var c = a();   
c();

ログイン後にコピー

7.http

请求头字段和状态码

フロントエンド面接の体験概要

http状态码

8.数组去重算法（时间／空间复杂度）

数组去重

时间复杂度空间复杂度也不会啊。

X.说说你做前端的优势

除了技术，这个也问？感觉没啥优势，优势是移动端经验相对多一点

フロントエンド面接の体験概要

パート 1 チーム リーダー

1. URL の構造

緊張しています、メソッド 2 は別の方法で書かれています

につながります。前の要約は適切ではありませんでした。 。次に

以下は参考になります

6. MV* フレームワークを理解または使用すること、モジュール性と反応について説明しました

webpack的常用配置

9.使用的vue其他生态库

10.说说vue-router的原理，怎么实现路由的

11.vue的生命周期

12.vue组件通信

13.说说JSONP的实现原理

14.职业规划

第二部分领导面

1.css盒模型

A.任何元素都可以设置border

B.行内元素设置padding，margin 上下是无效的，左右是有效的

2.position定位

（1）position的属性有哪些？默认的是什么？

（2）例子考察

（3）例子考察(事实证明，面试官这道题也错了)

3.BFC（块级格式化上下文）

4.flex（css3新特性）

5.JS原型和原型链

6.闭包

7.http

8.数组去重算法（时间／空间复杂度）

X.说说你做前端的优势

パート 1 チームリーダー

につながります。前の要約は適切ではありませんでした。。次に