您現在的位置是:電腦技術吧?>? 編程技術 ??>??常用代碼,代碼??>??正文詳情

常用代碼,代碼

友博裕2019-11-08 14:52:01 人圍觀
簡介Java代碼JavaScript越來越流行,它已經成為前端開發的首選,我們也可以使用基于JavaScript語言的nodejs開發高性能的后端服務,甚至我也看到了JavaS簡單代碼

JavaScript正變得越來越流行,它已經成為前端開發的第一選擇,并且利用基于JavaScript語言的NodeJS,我們也可以開發出高性能的后端服務,甚至我還看到在硬件編程領域也出現了JavaScript的身影。

JavaScript正在逐漸進化為一門全能的開發語言。

下面是我收集的10段實用JavaScript代碼,基于它們你還可以創造出更強大的JS插件或功能函數。

  但用好JavaScript并不容易,你除了需要掌握它的語法并知道如何寫出高質量的代碼之外,還需要了解如何解決那些幾乎在每個項目中都會遇到的需求場景,比如:判斷日期,高亮文本,限制字符數等等,有很多第三方庫可以解決這些問題,但這些庫可能并非只是為解決這一個問題而創建的,這意味著你需要引入了很多無關的代碼,這將使你的整個系統變得臃腫,而且也會影響到系統的性能。

我的做法是,收集和使用那些常見的JavaScript代碼段,并在需要時,盡可能首先使用它們。

  1. 判斷日期是否有效  JavaScript中自帶的日期函數還是太過簡單,很難滿足真實項目中對不同日期格式進行解析和判斷的需要。

JQuery也有一些第三方庫來使日期相關的處理變得簡單,但有時你可能只需要一個非常簡單的函數,而不想引入一個龐大的第三方庫。

這時,你可以使用下面這段日期校驗代碼,它允許你自定義日期格式并進行日期有效性的校驗。

  function isValidDate(value, userFormat) {  // Set default format if format is not provided  userFormat = userFormat || 'mm/dd/yyyy';  // Find custom delimiter by excluding  // month, day and year characters  var delimiter = /[^mdy]/.exec(userFormat)[0];  // Create an array with month, day and year  // so we know the format order by index  var theFormat = userFormat.split(delimiter);  // Create array from user date  var theDate = value.split(delimiter);  function isDate(date, format) {  var m, d, y, i = 0, len = format.length, f;  for (i; i len; i ) {  f = format[i];  if (/m/.test(f)) m = date[i];  if (/d/.test(f)) d = date[i];  if (/y/.test(f)) y = date[i];  }  return (  m 0 m 13   y y.length === 4   d 0   // Check if it's a valid day of the month  d = (new Date(y, m, 0)).getDate()  );  }  return isDate(theDate, theFormat);  }  使用方法:  下面這個調用返回false,因為11月份沒有31天  isValidDate('dd-mm-yyyy', '31/11/2012')  2. 獲取一組元素的最大寬度或高度  下面這個函數,對于需要進行動態排版的開發人員非常有用。

  var getMaxHeight = function ($elms) {  var maxHeight = 0;  $elms.each(function () {  // In some cases you may want to use outerHeight() instead  var height = $(this).height();  if (height maxHeight) {  maxHeight = height;  }  });  return maxHeight;  };  使用方法:  $(elements).height( getMaxHeight($(elements)) );  3. 高亮文本  有很多JQuery的第三方庫可以實現高亮文本的功能,但我更喜歡用下面這一小段JavaScript代碼來實現這個功能,它非常短小,而且可以根據我的需要去進行靈活的修改,而且可以自己定義高亮的樣式。

下面這兩個函數可以幫助你創建自己的文本高亮插件。

  function highlight(text, words, tag) {  // Default tag if no tag is provided  tag = tag || 'span';  var i, len = words.length, re;  for (i = 0; i len; i ) {  // Global regex to highlight all matches  re = new RegExp(words[i], 'g');  if (re.test(text)) {  text = text.replace(re, '' tag '$');  }  }  return text;  }  你同樣會需要取消高亮的函數:  function unhighlight(text, tag) {  // Default tag if no tag is provided  tag = tag || 'span';  var re = new RegExp('(' tag '. ?|/' tag ')', 'g');  return text.replace(re, '');  }  使用方法:  $('p').html( highlight(  $('p').html(), // the text  ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight  'strong' // custom tag  ));  4. 文字動效  有時你會希望給你的一段文字增加動效,讓其中的每個字都動起來。

你可以使用下面這段jQuery插件代碼來達到這個效果。

當然你需要結合一個CSS3 transition樣式來達到更好的效果。

  $.fn.animateText = function(delay, klass) {  var text = this.text();  var letters = text.split('');  return this.each(function(){  var $this = $(this);  $this.html(text.replace(/./g, '$'));  $this.find('span.letter').each(function(i, el){  setTimeout(function(){ $(el).addClass(klass); }, delay * i);  });  });  };  使用方法:  $('p').animateText(15, 'foo');  5. 逐個隱藏元素  下面這個jQuery插件可以根據你設置的步長(間隔時間)來逐個隱藏一組元素。

在列表元素的重新加載中使用,可以達到很好的效果。

  $.fn.fadeAll = function (ops) {  var o = $.extend({  delay: 500, // delay between elements  speed: 500, // animation speed  ease: 'swing' // other require easing plugin  }, ops);  var $el = this;  for (var i=0, d=0, l=$el.length; i  $el.eq(i).delay(d).fadeIn(o.speed, o.ease);  }  return $el;  }  使用方法:  $(elements).fadeAll({ delay: 300, speed: 300 });  6. 限制文本字數  下面這端腳本允許你根據給定的字符長度截取文本,如果文本被截取,那么它的后面會自動帶上省略號。

  function excerpt(str, nwords) {  var words = str.split(' ');  words.splice(nwords, words.length-1);  return words.join(' ')   (words.length !== str.split(' ').length ? '' : '');  }  7. 判斷相應式布局中當前適配度  目前很多設計已經采用了響應式布局來適配網站或應用在不同設備上的顯示。

你經常需要在代碼中判斷當前處于哪一個屏幕適配度下。

  function isBreakPoint(bp) {  // The breakpoints that you set in your css  var bps = [320, 480, 768, 1024];  var w = $(window).width();  var min, max;  for (var i = 0, l = bps.length; i l; i ) {  if (bps[i] === bp) {  min = bps[i-1] || 0;  max = bps[i];  break;  }  }  return w min w = max;  }  使用方法:  if ( isBreakPoint(320) ) {  // breakpoint at 320 or less  }  if ( isBreakPoint(480) ) {  // breakpoint between 320 and 480  }    8. 全局計數  在一些游戲或廣告場景中,你需要記錄用戶在當前頁面上點擊某一個按鈕的次數,這時你可以使用jQuery的.data()函數來處理:  $(element)  .data('counter', 0) // begin counter at zero  .click(function() {  var counter = $(this).data('counter'); // get  $(this).data('counter', counter 1); // set  // do something else...  });  9. 嵌入優酷視頻  function embedYouku(link, ops) {  var o = $.extend({  width: 480,  height: 320,  params: ''  }, ops);  var id = /?v=(w )/.exec(link)[1];  return '  }  使用方法:  embedYouku(  'http://static.youku.com/v/swf/qplayer.swf',  {'winType=adshowVideoIDS=XMTE3NzQ0NTkyisAutoPlay=falseisShowRelatedVideo=false'}  );  10. 創建動態菜單或下拉列表  在很多場景中,我們都需要動態地創建菜單、下拉列表或列表項。

下面是一段最基礎的代碼實現上面的功能,你可以根據實際需要進行相應的擴展。

  function makeMenu(items, tags) {  tags = tags || ['ul', 'li']; // default tags  var parent = tags[0];  var child = tags[1];  var item, value = '';  for (var i = 0, l = items.length; i l; i ) {  item = items[i];  // Separate item and value if value is present  if (/:/.test(item)) {  item = items[i].split(':')[0];  value = items[i].split(':')[1];  }  // Wrap the item in tag  items[i] = '' child ' '   (value 'value=' value '') '' // add value if present  item '';  }  return '' parent '' items.join('') '';  }  使用方法:  // Dropdown select month  makeMenu(  ['January:JAN', 'February:FEB', 'March:MAR'], // item:value  ['select', 'option']  );  // List of groceries  makeMenu(  ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],  ['ol', 'li']  );  總結:  以上只是那些實用JavaScript代碼段中的一小部分,我也建議你平時注意收集或自己編寫這樣的基礎代碼段,它們能在很多項目中使用或通過一些改造提供更完善的功能,使用這些代碼段將為你節省下大量的開發時間。

  作者微信公眾號:

版權聲明:本文由 友博裕 整理編輯。

原標題:bat實用代碼,常用代碼大全

轉載注明出處:http://www.dn9ww09s.icu/program/11598.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 筆記本顯示屏閃爍,筆記本外接顯示器閃屏

    筆記本顯示屏閃爍,筆記本外接顯示器閃屏 相關圖片帶觸摸屏的顯示器我們都知道筆記本電腦顯示器是我們操作電腦的必備配件。如果筆記本電腦顯示器閃爍,我們將無法正常訪問互聯網。顯然,顯示器是計算機中不可缺少的設備,那么...

  • 怎么布局網頁,網頁布局有哪些

    怎么布局網頁,網頁布局有哪些 相關圖片網頁布局是什么一。請不要設置UL填充,而不要使用邊距。只有嵌套2才能解決這個問題。設置縮放:1;溢出:為UL 3隱藏。設置UL的寬度或高度導致問題:IE6(或7)在這種情況下網頁頁面...

  • 筆記本電腦開機黑屏,筆記本電腦開機黑屏了怎么辦

    筆記本電腦開機黑屏,筆記本電腦開機黑屏了怎么辦 相關圖片筆記本電腦突然黑屏無法開機我們都知道便攜性是筆記本電腦相對于臺式機的最大優勢。但是筆記本電腦的散熱性能不是很好,在使用過程中經常會出現一些小插曲。這沒有用戶但是在...

  • 無線網絡連接不上,無法連接無線網絡

    無線網絡連接不上,無法連接無線網絡 相關圖片無線網絡顯示?筆記本的出現已經深入到了我們的生活中,但是一些用戶會遇到各種各樣的問題,想必很多朋友都遇到過,筆記本無線網絡顯示網絡連接不可用而紅十字會,如何解決筆...

  • 表單的屬性,html表單屬性

    表單的屬性,html表單屬性 相關圖片表單action屬性HTML5的新表單屬性本章解釋了涉及表單和輸入元素的新屬性。新表單屬性:autocompletenenovalidate新輸入屬性:ocusform overrhtml表單input屬性...

  • cmd命令行怎么打開,怎么調出cmd命令行

    cmd命令行怎么打開,怎么調出cmd命令行 相關圖片cmd命令窗口在計算機操作過程中,有時我們需要檢查計算機的物理地址。這時,我們需要使用命令行窗口來輸入命令,或者一些技術人員需要大量使用命令提示符。但是,一些普通用戶...

  • section和div區別,div和section

    section和div區別,div和section 相關圖片用section導入表格我最近在學HTML5。我剛剛接觸了HTML5,我覺得有點不舒服。因為有些標簽已經改變了,特別是div和section文章。我查閱了一些資料,試圖用HTML5和Csection標簽工具條空白...

  • 聯想筆記本的觸摸板怎么打開,聯想筆記本觸摸板設置

    聯想筆記本的觸摸板怎么打開,聯想筆記本觸摸板設置 相關圖片筆記本觸控板怎么打開現在越來越多的用戶使用筆記本電腦。現在有些人用筆記本當電視。我們知道筆記本可以使用觸摸板作為移動鼠標,而不需要USB鼠標,所以如何打開筆記本的觸摸...

  • embed標簽怎么用,bgsound標簽

    embed標簽怎么用,bgsound標簽 相關圖片em標簽嵌入的標記定義嵌入的內容,例如插件。SRC屬性的值必須指定實際的文件擴展名。例如,你想用它來播放MP3文件。這是給你的詳細介紹。感興趣的朋友可以參考嵌入式標簽的div標簽...

  • 筆記本電腦藍屏怎么解決步驟,筆記本電腦太卡了怎么解決

    筆記本電腦藍屏怎么解決步驟,筆記本電腦太卡了怎么解決 相關圖片筆記本電腦太卡怎么辦最有效由于諸多因素,筆記本電腦可以配備低音效,這就存在音效低的問題。解決筆記本電腦聲音低的方法有很多,從軟件到硬件。然而,許多用戶不知道如何解...

熱評文章

  • ghost系統還原步驟,怎么系統還原

    ghost系統還原步驟,怎么系統還原 相關圖片電腦系統一鍵還原步驟有時當出現問題時,計算機需要恢復系統。有些用戶知道計算機具有恢復系統的功能,但不知道具體的恢復步驟。現在小編就給大家簡單介紹一下系統恢復的詳細...

  • 如何安裝聯想硬盤保護系統,聯想硬盤保護系統安裝

    如何安裝聯想硬盤保護系統,聯想硬盤保護系統安裝 相關圖片聯想硬盤保護系統win10了解聯想電腦的資深人士都知道,在聯想電腦中,附帶了聯想的硬盤保護系統,需要我們自己安裝在電腦中。然而,由于安裝步驟復雜,很多人仍然不知道如何正確...

  • css常見問題,css兼容問題

    css常見問題,css兼容問題 相關圖片css兼容一。檢查HTML元素是否拼寫錯誤,結束標記是否被遺忘。即使是有經驗的用戶也經常在div的嵌套中出錯。你可以使用Dreamweaver的驗證來檢查第二個錯誤,檢查css浮動的特點...

  • 聯想筆記本fn鍵怎么取消,筆記本的fn鍵設置

    聯想筆記本fn鍵怎么取消,筆記本的fn鍵設置 相關圖片筆記本取消fn功能鍵大多數筆記本電腦都有FN鍵,FN鍵是一個可以起輔助作用的鍵。按住FN鍵并按功能鍵可以起到功能鍵的作用。我覺得FN鍵很麻煩,特別是對于喜歡在筆記本電腦上玩游戲...

  • overflow:hidden,overflow屬性hidden

    overflow:hidden,overflow屬性hidden 相關圖片address overflow備注:使用溢出:隱藏將影響列表樣式,即當UL中Li的溢出被隱藏時,列表樣式不起作用,不顯示以前的點、圓和其他樣式,并添加樣式:UL或Li中的列表樣式POSoverflow...

  • 如何解決電腦內存不足,如何解決電腦內存不足問題

    如何解決電腦內存不足,如何解決電腦內存不足問題 相關圖片電腦虛擬內存不足怎么解決在使用電腦的過程中,系統會自動下載一些垃圾文件。過了很長一段時間,電腦經常會提示內存不足。我能做什么?有人說我可以更換更大的內存模塊或直接...

  • 應用圖標,圖標

    應用圖標,圖標 相關圖片桌面圖標不見了本文是對弗林托設計團隊設計師彼得諾威爾的采訪。在采訪中,彼得介紹了他是如何設計弗林托的圖標的,以及弗林托團隊最近就弗林托用戶界面圖標背后的設計過程采...

  • 電腦死機怎么辦?,電腦死機按什么都沒用

    電腦死機怎么辦?,電腦死機按什么都沒用 相關圖片電腦老是死機現在電腦基本上是每個家庭都必須擁有的家用電器,當電腦在家里上網崩潰時,或多或少會帶來一些麻煩和疑慮。有些用戶不能移動到計算機商店。他們可以隨意修理,幾...

  • 什么是交互設計師,交互設計師

    什么是交互設計師,交互設計師 相關圖片交互設計師前景有些設計師,特別是像我這樣沒有多少實踐經驗的新人,沒有形成系統的分析方法。在進行業務分析時,它們將是分散的。這樣的分析結果很難設計出來,也很難與其他...

  • oppo怎么強制恢復出廠,edius卸載清理工具

    oppo怎么強制恢復出廠,edius卸載清理工具 相關圖片卸載下載對于很多從Windows平臺切換到Mac平臺的用戶來說,僅僅觸摸系統還是有很多問題的。但是,他們在蘋果電腦上找不到卸載程序,也不知道如何刪除應用程序。在Mac上未來教育win...

關注微信

变脸官网查询