underscore.jsソースコードの解釈:一般的な型の判断といくつかの便利なツールとメソッド

アンダースコアを付ける理由

最近、underscore.jsのソースコードを調べ始め、underscore.jsのソースコードの解釈を2016年の計画に入れました。

いくつかの有名なフレームワークライブラリのソースコードを読むことは、マスターと話すようなものであり、多くのことを学びます。なぜアンダースコアなのですか?主な理由は、アンダースコアが短く簡潔(約1.5k行)で、100以上の便利なメソッドをカプセル化し、結合が少なく、メソッドごとの読み取りに非常に適しており、元のポスターのようなJavaScript初心者に適しているためです。そこから、未定義の書き換えを回避するために未定義の代わりにvoid 0を使用するなどのいくつかのトリックだけでなく、変数タイプの判断、関数のスロットリングと関数のデバウンス、および多くのブラウザーの互換性などの一般的な方法も学ぶことができます。ハック、あなたはまた、作者の全体的なデザインのアイデアとAPIデザインの原則(後方互換性)を学ぶことができます。

後で、ホストはソースコードの読み取りで学んだ知識をあなたと共有するために一連の記事を書きます。

ウォッチへようこそ〜(興味があれば、スター&ウォッチを歓迎します〜)あなたの注意は、ホストが書き続ける動機です

タイプ判定

最初の記事では、underscore.jsが未定義ではなくvoid 0を使用する理由について簡単に説明しました。予期せず、良い反応がありました。これまで知らなかったと個人的に書いた友人もいれば、続行するように促した人もいました。通訳記事。今日は、underscore.jsで一般的に使用されるJavaScriptタイプのチェック方法と、ツールの判断方法について説明します。

まず、昔ながらの質問であるJavaScriptの配列型の判定方法についてお話します。実際、Javascriptでの配列の正しい姿勢の判定の記事で、さまざまな判定方法の長所と短所を詳しく分析し、正しい判定コードを示しました。 :


function isArray(a) {

  Array.isArray ? Array.isArray(a) : Object.prototype.toString.call(a) === '[object Array]';

}

そして、下線は実際にこれを正確に行います:


// Is a given value an array?

// Delegates to ECMA5's native Array.isArray

// 判断是否为数组

_.isArray = nativeIsArray || function(obj) {

  return toString.call(obj) === '[object Array]';

};

nativeIsArrayはES5のArray.isArrayメソッドであり、サポートされている場合は最初に呼び出され、toString変数はObject.prototype.toStringを保存します。

オブジェクトを判断する方法は?アンダースコアは、関数型とオブジェクト型の変数をオブジェクトとしてカウントします。もちろん、nullは削除する必要があります。


// Is a given variable an object?

// 判断是否为对象

// 这里的对象包括 function 和 object

_.isObject = function(obj) {

  var type = typeof obj;

  return type === 'function' || type === 'object' & !!obj;

};

'Arguments'、 'Function'、 'String'、 'Number'、 'Date'、 'RegExp'、 'Error'これらのタイプの判断を見てください。実際、Object.prototype.toString.callを使用して判断できるので、次のように記述します。一緒:


// Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp, isError.

// 其他类型判断

_.each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp', 'Error'], function(name) {

  _['is' + name] = function(obj) {

    return toString.call(obj) === '[object ' + name + ']';

  };

});

しかし、IEのisArgumentsメソッドを見てください


// Define a fallback version of the method in browsers (ahem, IE

// there isn't any inspectable "Arguments" type.

// _.isArguments 方法在 IE

// IE

// 结果是 [object Object]

// 而并非我们期望的 [object Arguments]。

// so 用是否含有 callee 属性来判断

if (!_.isArguments(arguments)) {

  _.isArguments = function(obj) {

    return _.has(obj, 'callee');

  };

}

ツールカテゴリの判断方法

次に、一般的に使用されるツールの判断方法をいくつか見てみましょう。

要素がDOM要素であるかどうかを判断するのは非常に簡単です。空ではなく、nodeType属性が1であることを確認してください。


// Is a given value a DOM element?

// 判断是否为 DOM 元素

_.isElement = function(obj) {

  // 确保 obj 不是 null

  // 并且 obj.nodeType === 1

  return !!(obj & obj.nodeType === 1);

};

要素をNaNとして判断する方法は?NaNは実際にはNumberタイプに属しています。Object.prototype.toString.call(NaN)は「[objectNumber]」を返し、NaNはそれ自体と等しくありません。次の2つのポイントを使用して判断できます。


// Is the given value `NaN`? (NaN is the only number which does not equal itself).

// 判断是否是 NaN

// NaN 是唯一的一个 `自己不等于自己` 的 number 类型

_.isNaN = function(obj) {

  return _.isNumber(obj) & obj !== +obj;

};

もちろん、アンダースコアには他にも多くの便利なツール判断方法があります。詳細については、ソースコードhttps://github.com/hanzichi/underscore-analysis/blob/master/underscore-1.8.3.js/src/underscore-1.8を参照してください。 .3.js#L1192-L1263この部分。

私が共有したものがあなたに役立つと思うなら、私のリポジトリhttps://github.com/hanzichi/underscore-analysisに従ってください

おすすめ

転載: blog.51cto.com/15080022/2588315