面接(ネット上)——ES 6、vue、モジュール化、エンジニアリング(答えが不完全)(下書き)

5883 ワード

1.promiseについて
promiseは非同期操作を処理するために使用され、pending(進行中)、resolved(完了)、rejected(失敗)の3つの状態があります.
いったん状態が変わると、二度と変わらない.2つの場合にのみpromise状態が変化します.pending="resolvedからpending="rejectedから
変化すると、状態が固まります.
promiseの内部状態が変化し、値があると、その後、.thenまたは.catchが呼び出されるたびに、この値が直接取得される.
2.promise、promiseの原理、およびその2つのパラメータをどのように実現しますか?
let p = new Promise({resolve, reject}=>{
    if(condition) {
        resolve(result)
    }else {
        reject(result)
    }
});

3.
promise.then(onResolved, onRejected)
thenは2つの関数でパラメータを作り,1つは拒否時に呼び出し,1つは解析時に呼び出す.
4.
promiseの2番目のパラメータのrejectで実行する方法とpromise.catch()はすべて失敗して実行して、それぞれこのように書いてどんな違いがあって、どんな情況の下で2つがすべて同時に使うことができますか?
いずれもエラーを投げ出すことができますが、rejectはresolve関数に対してpromiseオブジェクトの状態が失敗したときのエラー処理に使用されます.catchは一般的にコールバック関数でエラーを処理します.また、thenメソッドのコールバック関数の非同期操作に失敗すると、catchはエラーをキャプチャして処理します.
5.promiseパッケージajax
getData(method, url){
  var promise = new Promise(function(resolve, reject){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(method, url);
    xmlHttp.send();
    xmlHttp.onload = function () {
      if (this.status == 200 ) {
        resolve(this.response);
      } else {
        reject(this.statusText);
      }
    };
    xmlHttp.onerror = function () {
      reject(this.statusText);
    };
  })
  return promise;
}

getData('get','www.xxx.com').then(successFun, failFun)
getData(method, url, successFun, failFun){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open(method, url);
  xmlHttp.send();
  xmlHttp.onload = function () {
    if (this.status == 200 ) {
      successFun(this.response);
    } else {
      failFun(this.statusText);
    }
  };
  xmlHttp.onerror = function () {
    failFun(this.statusText);
  };
}

 6.矢印関数のthisは
矢印関数のthisがこの定義の関数です
通常の関数のthisは誰が誰を指しているのか
矢印関数のthisは、関数を定義するときにバインドされ、実行中にバインドされるものではありません.簡単に言えば、関数が定義されると、thisは関数を定義するオブジェクトを継承します.
7.let constの利点
変数の重複が混同されないようにブロックレベルの役割ドメインです
letは繰り上げを宣言していません.割り当てがなくても、最初はundefinedではありません.
(繰り返しを宣言できないのは...
const付与後は変更できません.const aを即時付与するのは間違っています.
vue
1.vue双方向バインドの実現方法
v-model
原理:
発行者-購読者Object.defineProperty()各プロパティ定義get,setプロパティメソッド
データ変更=』サブスクライバにメッセージを発行し、対応するリスニングコールバックをトリガー
(1)データオブジェクトにsetとgetを設定し,そのオブジェクトに値を割り当てるとバインドされたsetがトリガーされ,データの変化が傍受される
(2)compileはテンプレート命令を解析し,テンプレート中の変数をデータに置き換え,各命令のノードを更新関数にバインドし,サブスクライバを追加すると,データが変化し,通知を受け,ビューを更新する.
(3)watcherは橋です.
.自己インスタンス化時にプロパティサブスクライバ(dep)に自己を追加する
.独自にupdate()メソッドがあります
.dep.notice()は通知を発行し、自身のupdate()を呼び出し、compileバインドのコールバック関数をトリガーします.
Observerモニタmodelデータ変化Compile解析コンパイルテンプレート命令Watcher通信ブリッジ
2.MVVM
MVVMフロントエンドのビューレイヤを、Model,View,VM ViewModelの3つの部分に分けて
3.使用する設計モード:観察者モード
4.ライフサイクル
beforeCreate:空のvueインスタンスオブジェクトを初期化したばかりで、オブジェクト上のdataとmethodsのデータはまだ初期化されていません.
created:dataとmethodsのデータを初期化し、ここでmethodsのメソッドを呼び出し、dataのデータを操作します.
beforeMount:テンプレートはメモリでコンパイルされていますが、マウントされていません.ページは古いです.
mounted:vueインスタンスの初期化完了
beforeUpdate:ページ内のデータが古い、dataデータが最新の
updated:ページとdataデータは最新です
beforeDestroy:vueインスタンスは破棄フェーズに入りますが、data、methods、フィルタ、コマンド...は使用できます.
destroyed:コンポーネントは完全に破棄され、すべて、使用されません.
5.コンポーネント間のインタラクション:
親コンポーネントからサブコンポーネントへの値の転送:サブコンポーネントpropsプロパティにデータをマウント
子伝父:子コンポーネントは親コンポーネントから渡されたメソッドを呼び出し、メソッドを呼び出すときにデータをパラメータとして渡す
サブコンポーネントの内部でemitで親コンポーネントを呼び出すメソッド.最初のパラメータは、サブコンポーネントが親コンポーネントメソッドを呼び出すメソッド名、2番目はデータです.
6.ルーティングネスト(録音)
ルーティングネストとは
ルーティングネストが必要なタイミング
このプロジェクトではルーティングネストはどこで使用されますか?
ルーティングネストの実装方法
7.nextTick
8.vuex
vuexとは
vueに対して.jsのステータス管理システム、すなわちコンポーネント間で共有されるデータを管理し、データ格納の倉庫である.
プロジェクトはどこでvuexを使いますか
カートデータの操作
カートデータの設定方法
9.カスタムコンポーネントを実装する方法、異なるコンポーネント間でどのように通信するか
10.CommonJSのrequire/exportsとES 6のimport/exportの違い
構築(エンジニアリング&モジュール化)エンジニアリング
Webpack、gulp、gruntなどについて知っていますか?コントラスト.Webpackのエントリファイルはどのように構成され、複数のエントリはどのように分割されますか.
webpack.config.js中module.exportsのentryオブジェクトは、entry 2などを書くことができ、outputのfilename属性値は'[name].js’,
書類の名前によって梱包して、いくつかの入り口の書類があって、いくつかの出口の書類があります
Webpackのloaderとpluginsの違い
二つの全く違うもの.
loaderは各種言語,offeeScript,Type Script,ESNext(Bable),Sass,Lessなどを処理し,一度に1つのファイルを処理する.
pluginはファイルを直接操作するのではなく、loaderが実現できない他のことを解決し、パッケージの最適化と圧縮から、環境変数の再定義まで、さまざまなタスクを解決します.
gulpの具体的な使用フロントエンドエンジニアリングの理解
どのように自分で1つのファイルのパッケージを実現して、例えば1つのJSファイルの中で同時にまたES 5とES 6の書いたコード、どのように彼らをコンパイルして互換性があります
モジュール化
AMD、CMD、CommonJSについて知っていますか?
AMD:非同期モジュール定義仕様require.jsプロモーションmodule transportを介してオブジェクト露出インタフェースを返すと、コールバック関数のフロントエンドを指定できます.
CMD:同期モジュール定義仕様seajsプロモーション
commonjsはnodeなどのサーバ側仕様です.jsはモジュールを同期ロードし、ロードが完了すると、exportsまたはmoduleを介して後の操作を実行することができる.exportsプロパティに露出インタフェースを割り当てる
(AMDとrequireJSに関するCMD commonJSS 6仕様は互いに独立している
commonJS内蔵requireロードモジュールとrequireJSは関係ありません
    :
module.exports = function () {
  console.log("hello world")
}

require('./example2.js')()

Node.js :
var exports = module.exports;

  ,   exports      :
exports.area = function (r) {
  return Math.PI * r * r;
};
es6:
export:
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

             
export function multiply(x, y) {
  return x * y;
};


import xxx  from  './……'

 )
なぜモジュール化するのですか?
各ネーミングスペースは独立しており、変数名が同じであってもエラーは発生しません.
モジュール化後はモジュール管理ツールで管理でき、便利
低結合、高集約:モジュール後、多くの人が開発しやすく、モジュール間の依存関係を低減し、これは低結合である.各モジュールには特定の機能があり、これは高集約です.
再利用可能、メンテナンスが便利:ある機能を修正する時、直接そのモジュールを修正すればいい.このような機能を持つモジュールをそのまま持ってきて使えるので便利です
どのようなモジュール化されたライブラリがあるかというと、モジュール化の発展の歴史を知ったことがありますか?
先のCommonJSは、バックエンドに使用され、ブラウザには適用されず、AMDによって作成されています.CMDは玉伯が開発し、AMDを参考にしている.