JavaScript가 점점 더 인기를 얻고 있습니다. 프론트 엔드 개발을위한 첫 번째 선택이되었습니다. JavaScript 언어를 기반으로 NodeJS를 사용하면 고성능 백엔드 서비스를 개발할 수도 있습니다. 하드웨어 프로그래밍 분야에 JavaScript가 나타나는 것을 보았습니다. JavaScript는 점차적으로 만능 개발 언어로 진화하고 있습니다.
그러나 JavaScript를 잘 사용하기는 쉽지 않습니다. 구문을 마스터하고 고품질 코드를 작성하는 방법을 아는 것 외에도, 날짜를 판단하고 텍스트를 강조, 문자 수를 제한하는 등 거의 모든 프로젝트에서 발생할 필요 시나리오를 해결하는 방법을 이해해야합니다. 전체 시스템이 부풀어 오르고 시스템의 성능에도 영향을 미칩니다. 저의 접근 방식은 일반적인 JavaScript 스 니펫을 수집하고 사용하여 필요할 때마다 먼저 사용하는 것입니다. 다음은 내가 수집 한 10 가지 실용적인 JavaScript 코드입니다. 그것들을 기반으로 더 강력한 JS 플러그인 또는 기능 기능을 만들 수도 있습니다.
1. 날짜가 유효한지 결정하십시오
JavaScript에 포함 된 날짜 기능은 여전히 너무 간단하며 실제 프로젝트에서 다른 날짜 형식을 파싱하고 판단하는 것이 어려운 일입니다. JQuery는 또한 날짜 관련 처리를 간단하게 만들기위한 타사 라이브러리가 있지만 때로는 거대한 타사 라이브러리를 소개하지 않고는 매우 간단한 기능이 필요할 수도 있습니다. 현재 다음 날짜 확인 코드를 사용할 수있어 날짜 형식을 사용자 정의하고 날짜의 유효성을 확인할 수 있습니다.
function isValidDate (value, userformat) {// 기본 형식 설정 형식이 제공되지 않으면 userformat = userformat || 'mm/dd/yyyy'; // // 월, 일 및 연도 문자를 제외하여 사용자 정의 구분자를 찾으십시오. // 월, 일 및 연도로 배열을 만듭니다. // index var var theformat = userformat.split (delimiter)의 형식 순서를 알고 있습니다. // 사용자 날짜에서 배열 생성 var thedate = value.split (delimiter); 함수 isdate (날짜, 형식) {var m, d, y, i = 0, len = format.length, f; for (i; i <len; i ++) {f = 형식 [i]; if (/m/.test(f)) m = 날짜 [i]; if (/d/.test(f)) d = 날짜 [i]; if (/y/.test(f)) y = 날짜 [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // 달의 유효한 날인지 확인 d <= (새 날짜 (y, m, 0)). getDate ()); } return isdate (thedate, theformat);}사용 방법 :
11 월에는 31 일이 없기 때문에 다음 호출은 False를 반환합니다.
isvaliddate ( 'dd-mm-yyyy', '31/11/2012 ')
2. 요소 세트의 최대 너비 또는 높이를 얻으십시오.
다음 기능은 동적 레이아웃을 수행 해야하는 개발자에게 매우 유용합니다.
var getMaxHeight = function ($ elms) {var maxheight = 0; $ elms.each (function () {// 경우에 따라 auterheight ()를 대신 var height = $ (this) .height (); if (height> maxheight) {maxheight = height;}}); return maxheight;};사용 방법 :
$ (요소) .Height (getMaxHeight ($ (요소)));
3. 텍스트를 강조합니다
텍스트를 강조하는 기능을 구현할 수있는 jQuery의 타사 라이브러리가 많이 있지만 다음과 같은 작은 JavaScript 코드를 사용 하여이 기능을 구현하는 것이 좋습니다. 그것은 매우 짧고 내 필요에 따라 유연하게 수정 될 수 있으며, 강조 스타일을 직접 정의 할 수 있습니다. 다음 두 가지 기능을 사용하면 자신만의 텍스트 강조 표시 플러그인을 만드는 데 도움이 될 수 있습니다.
함수 하이라이트 (텍스트, 단어, 태그) {// 기본 태그가 제공되지 않으면 태그 = 태그 || '기간'; var i, len = words.length, re; for (i = 0; i <len; i ++) {// 모든 경기를 강조하기 위해 re = new regexp (단어 [i], 'g'); if (re.test (text)) {text = text.replace ( '<' + tag + '> $ & </' + tag + '>'); }} 반환 텍스트;}또한 높은 조명 기능이 필요합니다.
Unhighlight (텍스트, 태그) 함수 {// 기본 태그가 제공되지 않은 경우 태그 = 태그 || '기간'; var re = new regexp ( '(<'+tag+'.+?> | <//'+tag+'>)', 'g'); return text.replace (re, '');}사용 방법 :
$ ( 'p'). html (하이라이트 ($ ( 'p'). html (), // 텍스트 [ 'foo', 'bar', 'baz', 'hello world'], // 'strong'// custom tag를 강조하기위한 단어 또는 문구 목록);
4. 텍스트 모션 효과
때로는 모든 단어가 움직일 수 있도록 텍스트 단락에 모션을 추가하고 싶습니다. 다음 JQuery 플러그인 코드를 사용 하여이 효과를 달성 할 수 있습니다. 물론 더 나은 결과를 얻으려면 CSS3 전환 스타일을 결합해야합니다.
$ .fn.animatetext = function (Delay, Klass) {var text = this.text (); var 문자 = text.split ( ''); reture this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>'); $ this.find ( 'span.letter'). 각 (function (function () {$ (el). });사용 방법 :
$ ( 'p'). animatetext (15, 'foo');
5. 요소를 하나씩 숨 깁니다
다음 JQuery 플러그인은 설정 한 단계 길이 (간격 시간)에 따라 요소 그룹을 하나씩 숨길 수 있습니다. 목록 요소를 다시로드하는 데 사용되면 좋은 결과를 얻을 수 있습니다.
$ .fn.fadeall = function (ops) {var o = $ .extend ({delay : 500, // 요소 사이의 지연 속도 : 500, // 애니메이션 속도 편의 : '스윙'// 다른 플러그인이 필요합니다}, ops); var $ el = this; for (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } return $ el;}사용 방법 :
$ (요소) .fadeall ({지연 : 300, 속도 : 300});
6. 텍스트의 단어 수를 제한합니다
아래 스크립트를 사용하면 주어진 문자 길이에 따라 텍스트를 가로 채 릴 수 있습니다. 텍스트가 가로 채면 자동으로 타원이 이어집니다.
함수 발췌 (str, nwords) {var words = str.split ( ''); Words.splice (nwords, words.length-1); return Words.join ( '') + (Words.length! == str.split ( '') .length? '…': '');}7. 해당 레이아웃에서 현재 적응성을 결정하십시오
많은 디자인이 웹 사이트의 표시 또는 다른 장치의 응용 프로그램에 적응하기 위해 반응 형 레이아웃을 채택했습니다. 현재 코드에있는 화면 적응을 결정해야합니다.
함수 isbreakpoint (bp) {// CSS var bps = [320, 480, 768, 1024]에서 설정 한 중단 점; var w = $ (창) .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]; 부서지다; }} return w> min && w <= max;}사용 방법 :
if (isbreakpoint (320)) {// 320 이하} if (isbreakpoint (480)) {// breakpoint 사이의 320과 480}…8. 글로벌 카운트
일부 게임 또는 광고 시나리오에서는 사용자가 현재 페이지의 버튼을 클릭하는 횟수를 기록해야합니다. 현재 jQuery의 .data () 함수를 사용하여 처리 할 수 있습니다.
$ (element) .data ( 'coun
9. Youku 비디오를 포함합니다
함수 embedyouku (link, ops) {var o = $ .extend ({너비 : 480, 높이 : 320, 매개 변수 : ''}, ops); var id = //?v/=(/w+)/.exec(link)9; return '<embed alludefullscreen = "true"id = "embedid"Quality = "high"align = "middle"allistackcess = "항상"type = "application/x-shockwave-flash"src = "'+id+'?'+o.ops ';}사용 방법 :
embedyouku ( 'http://static.youku.com/v/swf/qplayer.swf', { 'wintype = adshow & videoids = xmte3nzq0ntky & isautoplay = false & isshowrelatedvideo = false'});10. 동적 메뉴 또는 드롭 다운 목록을 만듭니다
많은 시나리오에서 메뉴, 드롭 다운 목록 또는 목록 항목을 동적으로 만들어야합니다. 다음은 위의 기능을 구현하기위한 가장 기본적인 코드이며 실제 요구에 따라 그에 따라 이에 따라 확장 할 수 있습니다.
함수 makemenu (항목, 태그) {tags = tags || [ 'ul', 'li']; // 기본 태그 var parent = tags [0]; var child = 태그 [1]; var 항목, value = ''; for (var i = 0, l = items.length; i <l; i ++) {item = item [i]; // 값이있는 경우 (/:/.test(item)) {item = item [i] .split ( ':') [0]; 값 = 항목 [i] .split ( ':') [1]; } // 태그 항목에 항목을 감싸 [i] = '<'+child+''+(value && 'value = "'+value+'' '+'> '+// 현재 항목+'</'+child+'> '; } return '<' + parent + '>' + items.join ( '') + '</' + parent + '>';}사용 방법 :
// DROPDOWN SELECT MONSTMAKEMENU ([ '1 월 : 1 월 : 2 월 : 2 월 : 3 월 : Mar'], // 항목 : value [ 'select', '옵션']; // groceriesmakemenu 목록 ( '', '토마토스', '우유'], [ 'ol', 'li');
위의 것은 실용적인 JavaScript 코드 스 니펫의 작은 부분 일뿐입니다. 또한 그러한 기본 코드 스 니펫을 직접 수집하거나 작성하는 데주의를 기울이는 것이 좋습니다. 많은 프로젝트에서 사용하거나 일부 수정을 통해보다 완전한 기능을 제공 할 수 있습니다. 이 코드 스 니펫을 사용하면 많은 개발 시간이 절약됩니다.