1. 値を入力し、そのデータ型を返す**関数型(para) { Object.prototype.toString.call(para) を返します。 } 2. アレイ重複排除関数 unique1(arr) { [...新しいSet(arr)]を返す } 関数 unique2(arr) { var obj = {}; arr.filter(ele => { を返します if (!obj[ele]) { オブジェクト[要素] = true; true を返します。 } }) } 関数 unique3(arr) { var 結果 = []; arr.forEach(ele => { (結果のインデックス(ele)== -1)の場合) 結果.push(ele) } }) 結果を返します。 } 3. 文字列の重複排除String.prototype.unique = 関数 () { var obj = {}, 文字列 = ''、 len = this.length; (var i = 0; i < len; i++) の場合 { if (!obj[this[i]]) { str += this[i]; obj[this[i]] = true; } } str を返します。 } ###### //連続する文字列を削除する function uniq(str) { str.replace(/(\w)\1+/g, '$1') を返します } 4. ディープコピーとシャローコピー//ディープクローン(ディープクローンは関数を考慮しません) 関数 deepClone(obj, 結果) { var 結果 = 結果 || {}; (var prop in obj) { obj.hasOwnProperty(prop) の場合 { if (typeof obj[prop] == 'object' && obj[prop] !== null) { // 参照値(obj/配列)であり、null ではない if (Object.prototype.toString.call(obj[prop]) == '[object Object]') { // オブジェクト result[prop] = {}; } それ以外 { // 配列 result[prop] = []; } deepClone(オブジェクト[prop]、結果[prop]) } それ以外 { // 元の値または関数 結果[prop] = オブジェクト[prop] } } } 結果を返します。 } // ディープクローニングとシャロークローニングは参照値用です function deepClone(target) { if (typeof (target) !== 'object') { ターゲットを返します。 } var 結果; if (Object.prototype.toString.call(target) == '[オブジェクト配列]') { // 配列結果 = [] } それ以外 { // オブジェクト結果 = {}; } (var prop in target) { ターゲットが独自のプロパティを持っている場合 結果[prop] = deepClone(ターゲット[prop]) } } 結果を返します。 } // 関数をコピーできません var o1 = jsON.parse(jsON.stringify(obj1)); 5. 基本原理と拡張を逆転させる// 元の配列を変更する Array.prototype.myReverse = function () { var len = this.length; (var i = 0; i < len; i++) の場合 { var temp = this[i]; this[i] = this[len - 1 - i]; this[len - 1 - i] = temp; } これを返します。 } 6. 聖杯パターンの継承関数継承(ターゲット、オリジン) { 関数 F() {}; F.prototype = Origin.prototype; ターゲット.prototype = 新しい F(); Target.prototype.constructor = ターゲット; // 最終的なプロトタイプは Target.prop.uber = Origin.prototype を指します。 } 7. 文字列中に1回だけ現れる最初の文字を見つけるString.prototype.firstAppear = 関数(){ var obj = {}, len = this.length; (var i = 0; i < len; i++) の場合 { もし(obj[this[i]]) { obj[this[i]]++; } それ以外 { obj[this[i]] = 1; } } (var prop in obj) { (オブジェクト[プロパティ] == 1)の場合{ プロパティを返します。 } } } 8. 要素のn番目のレベルの親要素を見つける関数の親(ele, n) { while (ele && n) { ele = ele.parentElement ? ele.parentElement : ele.parentNode; n--; } 要素を返します。 } 9. 要素のn番目の兄弟ノードを返す関数retSibling(e, n) { (e && n) の間 { (n > 0) の場合 { if (e.nextElementSibling) { 次の要素の兄弟を作成します。 } それ以外 { e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling; の場合 } n--; } それ以外 { (e.previousElementSibling)の場合{ e = e.previousElementSibling; } それ以外 { e = e.previousElementSibling; e && e.nodeType !== 1; e = e.previousElementSibling; の場合 } n++; } } e を返します。 } 10. ブラウザの互換性問題を解決するためにmychildrenをカプセル化する関数 myChildren(e) { var children = e.childNodes, ar = [], len = children.length; (var i = 0; i < len; i++) の場合 { (子[i].nodeType === 1)の場合{ arr.push(子[i]) } } arr を返します。 } 11. 要素に子要素があるかどうかを判定する関数hasChildren(e) { var children = e.childNodes, len = children.length; (var i = 0; i < len; i++) の場合 { (子[i].nodeType === 1)の場合{ true を返します。 } } false を返します。 } 12. 要素を別の要素の後に挿入するElement.prototype.insertAfter = 関数 (ターゲット、elen) { var nextElen = elen.nextElenmentSibling; if (nextElen == null) { this.appendChild(ターゲット); } それ以外 { this.insertBefore(ターゲット、次のElen); } } 13. 現在の時刻(年、月、日、時、分、秒)を返す関数 getDateTime() { var date = 新しい Date(), 年 = date.getFullYear(), 月 = date.getMonth() + 1、 日 = date.getDate(), 時間 = date.getHours() + 1、 分 = date.getMinutes(), 秒 = date.getSeconds(); 月 = checkTime(月); day = checkTime(day); 時間 = checkTime(時間); 分 = checkTime(分); 秒 = checkTime(秒); 関数 checkTime(i) { もし(i < 10){ i = "0" + i; } i を返します。 } 戻り値: "" + 年 + "年" + 月 + "月" + 日 + "日" + 時間 + "時間" + 分 + "分" + 秒 + "秒" } 14. スクロールバーのスクロール距離を取得する関数 getScrollOffset() { if (window.pageXOffset) { 戻る { x: ウィンドウ.ページXオフセット、 y: ウィンドウページYオフセット } } それ以外 { 戻る { x: document.body.scrollLeft + document.documentElement.scrollLeft、 y: document.body.scrollTop + document.documentElement.scrollTop } } } 15. ビューポートのサイズを取得する関数 getViewportOffset() { if (window.innerWidth) { 戻る { w: ウィンドウの内側の幅、 h: ウィンドウの内側の高さ } } それ以外 { // ie8以下 if (document.compatMode === "BackCompat") { // Quirks モード return { w: document.body.clientWidth、 h: ドキュメント本体のクライアント高さ } } それ以外 { // 標準モード return { w: document.documentElement.clientWidth、 h: ドキュメント.documentElement.クライアント高さ } } } } 16. 任意の要素の任意の属性を取得する関数 getStyle(要素, プロパティ) { window.getComputedStyle を返します ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop] } 17. バインディングイベントの互換コード関数 addEvent(要素, タイプ, ハンドル) { if (elem.addEventListener) { //IE 以外および IE9 以外 elem.addEventListener(タイプ、ハンドル、false); } else if (elem.attachEvent) { //ie6 から ie8 elem.attachEvent('on' + type, function() { handle.call(要素); }) } それ以外 { elem['on' + type] = ハンドル; } } 18. 解除イベント関数removeEvent(要素、タイプ、ハンドル) { if (elem.removeEventListener) { //IE 以外および IE9 以外 elem.removeEventListener(タイプ、ハンドル、false); } else if (elem.detachEvent) { //ie6 から ie8 elem.detachEvent('on' + タイプ、ハンドル); } それ以外 { 要素['on' + タイプ] = null; } } 19. バブルの互換コードをキャンセルする関数stopBubble(e) { e && e.stopPropagation の場合 { e.stopPropagation(); } それ以外 { ウィンドウのイベントをキャンセルするには、次の手順を実行します。 } } 20. 文字列が回文かどうかを確認する関数isPalina(str) { if (Object.prototype.toString.call(str) !== '[オブジェクト文字列]') { false を返します。 } var len = str.length; (var i = 0; i < len / 2; i++) の場合 { str[i] != str[len - 1 - i] の場合 { false を返します。 } } true を返します。 } 21. 文字列が回文かどうかを確認する関数isPalindrome(str) { str = str.replace(/\W/g, '').toLowerCase(); コンソール.log(文字列) 戻り値 (str == str.split('').reverse().join('')) } 22. getElementsByClassNameメソッドと互換性があるElement.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = 関数 (_className) { var allDomArray = document.getElementsByTagName('*'); var lastDomArray = []; 関数trimSpace(strClass) { var reg = /\s+/g; strClass.replace(reg, ' ').trim() を返す } (var i = 0; i < allDomArray.length; i++) { var classArray = trimSpace(allDomArray[i].className).split(' '); (var j = 0; j < classArray.length; j++) の場合 { if (classArray[j] == _className) { lastDomArray.push(allDomArray[i]); 壊す; } } } lastDomArray を返します。 } 23. モーション機能関数 animate(obj, json, コールバック) { タイマー間隔をクリアします。 var 速度、 現在; obj.timer = setInterval(関数() { var ロック = true; (json 内の var プロパティ) { (prop == '不透明度')の場合{ 現在の = parseFloat(window.getComputedStyle(obj, null)[prop]) * 100; } それ以外 { 現在の = parseInt(window.getComputedStyle(obj, null)[prop]); } 速度 = (json[prop] - 現在の値) / 7; 速度 = 速度 > 0 ? Math.ceil(速度) : Math.floor(速度); (prop == '不透明度')の場合{ obj.style[prop] = (現在の速度 + 速度) / 100; } それ以外 { obj.style[prop] = 現在の値 + 速度 + 'px'; } (現在のjson[prop]ではない)の場合{ ロック = false; } } if (ロック) { タイマー間隔をクリアします。 typeof callback == 'function' ? callback() : ''; } }, 30) } 24. 弾性運動関数 ElasticMovement(obj, target) { タイマー間隔をクリアします。 var iSpeed = 40, a, u = 0.8; obj.timer = setInterval(関数() { a = (ターゲット - obj.offsetLeft) / 8; iSpeed = iSpeed + a; iSpeed = iSpeed * u; (Math.abs(iSpeed) <= 1 && Math.abs(a) <= 1) の場合 { コンソールログ('over') タイマー間隔をクリアします。 obj.style.left = ターゲット + 'px'; } それ以外 { obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30); } 25. 独自の forEach メソッドをカプセル化するArray.prototype.myForEach = 関数 (func, obj) { var len = this.length; var _this = 引数[1] ? 引数[1] : ウィンドウ; // var _this=引数[1]||ウィンドウ; (var i = 0; i < len; i++) の場合 { func.call(_this, this[i], i, this) } } 26. 独自のフィルターメソッドをカプセル化するArray.prototype.myFilter = 関数 (func, obj) { var len = this.length; var arr = []; var _this = 引数[1] || ウィンドウ; (var i = 0; i < len; i++) の場合 { func.call(_this, this[i], i, this) && arr.push(this[i]); } arr を返します。 } 27. 配列マップ法Array.prototype.myMap = 関数 (func) { var arr = []; var len = this.length; var _this = 引数[1] || ウィンドウ; (var i = 0; i < len; i++) の場合 { arr.push(func.call(_this, this[i], i, this)); } arr を返します。 } 28. すべてのメソッドを配列するArray.prototype.myEvery = 関数 (func) { var フラグ = true; var len = this.length; var _this = 引数[1] || ウィンドウ; (var i = 0; i < len; i++) の場合 { (func.apply(_this, [this[i], i, this]) == false)の場合{ フラグ = false; 壊す; } } フラグを返します。 } 29. 配列のreduceメソッドArray.prototype.myReduce = 関数 (func, initialValue) { var len = this.length, 次の値、 私; if (!初期値) { // 2番目のパラメータは渡されません nextValue = this[0]; 私 = 1; } それ以外 { // 2 番目のパラメータを渡します nextValue = initialValue; 私 = 0; } (; i < len; i++) の場合 { nextValue = func(nextValue, this[i], i, this); } 次の値を返します。 } 30. URLのパラメータを取得する関数 getWindonHref() { var sHref = window.location.href; var args = sHref.split('?'); (args[0] === sHref)の場合{ 戻る ''; } var hrefarr = args[1].split('#')[0].split('&'); var obj = {}; (var i = 0; i < hrefarr.length; i++) { hrefarr[i] = hrefarr[i].split('='); obj[hrefarr[i][0]] = hrefarr[i][1]; } obj を返します。 } 31. 配列のソート// クイックソート [左] + min + [右] 関数 quickArr(arr) { (arr.length <= 1)の場合{ arr を返します。 } var 左 = [], 右 = []; var pIndex = Math.floor(arr.length / 2); var p = arr.splice(pIndex, 1)[0]; (var i = 0; i < arr.length; i++) の場合 { もし(arr[i] <= p){ 左にプッシュします(arr[i]); } それ以外 { 右にプッシュします(arr[i]); } } // 再帰 return quickArr(left).concat([p], quickArr(right)); } // バブル関数 bubbleSort(arr) { (var i = 0; i < arr.length - 1; i++) の場合 { (var j = i + 1; j < arr.length; j++) の場合 { もし(arr[i] > arr[j]) { var temp = arr[i]; arr[i] = arr[j]; arr[j] = 一時; } } } arr を返します。 } 関数 bubbleSort(arr) { var len = arr.length; (var i = 0; i < len - 1; i++) の場合 { (var j = 0; j < len - 1 - i; j++) の場合 { もし(arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = 温度; } } } arr を返します。 } 32. Domツリーのトラバースページ上の 関数 traverse(要素, コールバック) { コールバック(要素); var リスト = element.children; (var i = 0; i < list.length; i++) の場合 { トラバース(リスト[i]、コールバック); } } 33. ネイティブ js カプセル化 ajax関数 ajax(メソッド、URL、コールバック、データ、フラグ) { var xhr; フラグ = フラグ || true; メソッド = method.toUpperCase(); if (window.XMLHttpRequest) { xhr = 新しい XMLHttpRequest(); } それ以外 { xhr = 新しい ActiveXObject('Microsoft.XMLHttp'); } xhr.onreadystatechange = 関数 () { xhr.readyState == 4 && xhr.status == 200 の場合 { コンソール.log(2) コールバック(xhr.responseText); } } if (メソッド == 'GET') { var date = 新しい Date(), タイマー = date.getTime(); xhr.open('GET', url + '?' + データ + '&timer' + タイマー, フラグ); xhr.送信() } それ以外の場合 (メソッド == 'POST') { xhr.open('POST', url, フラグ); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(データ); } } 34. スクリプトを非同期にロードする関数loadScript(url, コールバック) { var oscript = document.createElement('script'); if (oscript.readyState) { // ie8以下 oscript.onreadystatechange = function () { if (oscript.readyState === '完了' || oscript.readyState === 'ロード済み') { 折り返し電話(); } } } それ以外 { oscript.onload = 関数(){ 折り返し電話() }; } oscript.src = URL; document.body.appendChild(oscript); } 35. クッキー管理var クッキー = { 設定: 関数 (名前、値、時間) { document.cookie = 名前 + '=' + 値 + '; max-age=' + 時間; これを返します。 }, 削除: 関数 (名前) { this.setCookie(name, '', -1) を返します。 }, get: 関数 (名前、コールバック) { var allCookieArr = document.cookie.split('; '); (var i = 0; i < allCookieArr.length; i++) { var itemCookieArr = allCookieArr[i].split('='); if (itemCookieArr[0] === 名前) { アイテムCookieArr[1]を返す } } 未定義を返します。 } } 36. bind() メソッドを実装するFunction.prototype.myBind = 関数 (ターゲット) { var target = ターゲット || ウィンドウ; var _args1 = [].slice.call(引数, 1); var self = this; var temp = 関数 () {}; var F = 関数() { var _args2 = [].slice.call(引数, 0); var parasArr = _args1.concat(_args2); self.apply(this instanceof temp ? this : target, parasArr) を返します。 } temp.prototype = self.prototype; F.prototype = 新しいtemp(); F を返します。 } 37. call() メソッドを実装するFunction.prototype.myCall = 関数 () { var ctx = 引数[0] || ウィンドウ; ctx.fn = これ; var args = []; (var i = 1; i < 引数の長さ; i++) { args.push(引数[i]) } var 結果 = ctx.fn(...args); ctx.fn を削除します。 結果を返します。 } 38. apply() メソッドを実装するFunction.prototype.myApply = 関数 () { var ctx = 引数[0] || ウィンドウ; ctx.fn = これ; if (!引数[1]) { var 結果 = ctx.fn(); ctx.fn を削除します。 結果を返します。 } var 結果 = ctx.fn(...引数[1]); ctx.fn を削除します。 結果を返します。 } 39. 手ぶれ補正関数デバウンス(ハンドル、遅延) { var タイマー = null; 関数を返す(){ var _self = これ、 _args = 引数; タイマーをクリアします。 タイマー = setTimeout(関数() { ハンドルを適用します(_self, _args) }、 遅れ) } } 40. スロットリング関数スロットル(ハンドラ、待機) { var lastTime = 0; 関数を返す(e){ var nowTime = new Date().getTime(); if (現在時刻 - 前回時刻 > 待機) { ハンドラ.apply(this, 引数); 前回の時刻 = 現在の時刻; } } } 41. requestAnimFrame互換メソッドwindow.requestAnimFrame = (関数() { window.requestAnimationFrame を返します || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || 関数(コールバック){ window.setTimeout(コールバック、1000 / 60); }; })(); 42. cancelAnimFrame 互換メソッドwindow.cancelAnimFrame = (関数() { window.cancelAnimationFrame を返します || window.webkit アニメーションフレームをキャンセルします || window.mozCancelAnimationFrame || 関数 (id) { ウィンドウのクリアタイムアウト(id); }; })(); 43. jsonp 基本メソッド関数 jsonp(url, コールバック) { var oscript = document.createElement('script'); if (oscript.readyState) { // ie8以下 oscript.onreadystatechange = function () { if (oscript.readyState === '完了' || oscript.readyState === 'ロード済み') { 折り返し電話(); } } } それ以外 { oscript.onload = 関数(){ 折り返し電話() }; } oscript.src = URL; document.body.appendChild(oscript); } 44. URLのパラメータを取得する関数 getUrlParam(sUrl, sKey) { var 結果 = {}; sUrl.replace(/(\w+)=(\w+)(?=[&|#])/g, 関数(ele, key, val) { if (!結果[キー]) { 結果[キー] = val; } それ以外 { var temp = 結果[キー]; 結果[キー] = [].concat(temp, val); } }) if (!sKey) { 結果を返します。 } それ以外 { 結果[sKey]を返します || ''; } } 45. フォーマット時間関数formatDate(t, str) { var obj = { yyyy: t.getFullYear(), yy: ("" + t.getFullYear()).slice(-2), M: t.getMonth() + 1、 MM: ("0" + (t.getMonth() + 1)).slice(-2)、 d: t.getDate(), dd: ("0" + t.getDate()).slice(-2), H: t.getHours(), HH: ("0" + t.getHours()).slice(-2)、 h: t.getHours() % 12, hh: ("0" + t.getHours() % 12).slice(-2), m: t.getMinutes(), mm: ("0" + t.getMinutes()).slice(-2), s: t.getSeconds(), ss: ("0" + t.getSeconds()).slice(-2), w: ['日', '月', '火', '水', '木', '金', '土'][t.getDay()] }; str.replace(/([az]+)/ig, 関数($1) {を返す オブジェクト[$1]を返す }); } 46. メールアドレスを検証するための正規表現関数 isAvailableEmail(sEmail) { var reg = /^([\w+\.])+@\w+([.]\w+)+$/ reg.test(sEmail) を返す } 47. 関数カリー化複数のパラメータを受け入れる関数を、単一のパラメータ(元の関数の最初のパラメータ)を受け入れ、残りのパラメータを受け入れて結果を返す新しい関数に変換する手法です。 関数curryIt(fn) { var 長さ = fn.length、 引数 = []; var 結果 = 関数 (引数) { 引数をpushします。 長さ - ; 長さ<= 0の場合{ fn.apply(this, args) を返します。 } それ以外 { 結果を返します。 } } 結果を返します。 } 48. 大きな数字を足す関数 sumBigNumber(a, b) { var res = '', // 結果 temp = 0; // ビット加算の結果と繰り上がり a = a.split(''); b = b.split(''); (a.length || b.length || temp) の間 { //~~ビットごとの NOT 1。型変換、数値に変換 2。~~undefined==0 temp += ~~a.pop() + ~~b.pop(); res = (temp % 10) + res; 温度 = 温度 > 9; } res.replace(/^0+/, '') を返します。 } 49. シングルトンパターン関数 getSingle(func) { var 結果; 関数を返す(){ if (!結果) { 結果 = 新しい関数(引数); } 結果を返します。 } } よく使われるフロントエンド JavaScript メソッドのカプセル化に関するこの記事はこれで終わりです。フロントエンド JavaScript メソッドのカプセル化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux環境でユーザーにsudo権限を追加する方法
こんなことがありました。今日はGitHubで遊んでいました。最初はログインせずにいくつかのページを閲...
この記事では主に、次のように共有されるネイティブ JS 音楽プレーヤーのサンプル コードを紹介します...
前回の記事では、次のことを紹介しました。 MySQL8.0.20 インストール チュートリアルとイン...
MySQL を長い間使用してきた多くの人は、これら 2 つのフィールド属性の概念をまだよく理解して...
目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...
1.vueパッケージングここでは、vueネイティブパッケージングコマンドを使用してvueプロジェクト...
1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...
Linux は現在最も広く使用されているサーバー オペレーティング システムです。Unix をベー...
目次1. 元の値と参照値2. インスタンス3. 範囲1. 元の値と参照値6 つの単純なデータ型の値は...
このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...
vue2 では、タイムスタンプを変換するときに、通常はフィルターを使用します。vue3 以降では、...
目次出力出力パス出力.publicPath webpack-dev-server の publicP...
多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...
誰もが色にとても敏感だと思います。私たちの目が見るところにはどこにでも色があります。では、CSS で...
目次1. オブジェクト1.1 オブジェクトとは何ですか? 1.2 なぜオブジェクトが必要なのか? 2...