jQuery와 js 사용자 정의 함수와 파일 방법 (전체 네트워크에서 가장 완전함)

우리는 jQuery나 js를 작성할 때 자주 함수를 사용자 정의하고 js 파일에 써서 html에 호출하기 편리하게 한다.그러면 js 파일에서 jQuery와 js 사용자 정의 함수를 어떻게 쓰는지 문제입니다.
사용자 정의 함수를 소개하기 전에 js의 자체 실행 함수를 알아야 합니다.
1. js 자체 실행 함수 소개
Google은 보통 JS 코드를 단독 JS 파일에 쓴 다음 페이지에 도입합니다.그러나 변수 이름이나 함수 이름이 다른 JS 코드와 충돌하는 문제가 발생할 때가 있습니다.그렇다면 어떻게 이 문제를 해결합니까?역할 영역 격리.JS에서 작용역은 함수를 통해 구분된다. JS 코드를 함수에 봉하여 호출하면 변수 이름/함수 이름이 충돌하는 문제를 피할 수 있지만 이것도 틀림없다. 왜냐하면 봉인 함수 자체가 다른 함수와 이름이 바뀔 수 있기 때문이다. 해결 방안은 바로 자행 함수이기 때문이다.
셀프 실행 함수는 한 쌍의 원괄호로 익명 함수를 둘러싸고, 괄호 (전참) 를 붙이면 바로 실행됩니다.함수에 이름이 없기 때문에 작용역의 절대 격리와 함수명의 충돌 문제를 실현하였다.이 자동 실행 함수를 만드는 것은 새로운 이름 공간을 개척하여 그 안의 내용을 다른 공간과 격리시키는 것과 같다. 그러면 js 파일의 전역 변수가 다른 전역 변수 이름과 같은 위험을 줄일 수 있다.
자체 실행 함수의 몇 가지 표현 방식:
방법1: function 바깥쪽에 괄호(추천, 비교적 흔함):

//        (  )  
(function() {
	alert(x + y);
})();

//       (  )  
(function(x, y) {
	alert(x + y);
})(2, 3);

위에 익명 함수 (첫 번째 괄호 안에 있음) 를 만들었고, 두 번째 괄호는 이 익명 함수를 호출하고 인자를 전송하는 데 사용됩니다.두 개의 괄호는 모두 표현식이고 표현식이면 되돌아오는 값이 있기 때문에 뒤에 한 쌍의 괄호를 붙여서 그것들을 집행할 수 있다.js의 해석기가 앞의 괄호를 실행한 후에 하나의 함수 대상을 되돌려주고 뒤의 괄호를 연결하면 완전한 함수 이름 + (매개 변수) +를 구성한다.의 함수 실행문입니다.
방식2: 맨 앞뒤에 괄호를 넣는다(이것은 jslint가 추천한 맞춤법이다. 좋은 점은 코드를 읽는 사람에게 이 코드는 하나의 전체라는 것을 알릴 수 있다는 것이다)

(function() {
	alert(1);
}());

방식3:function 앞에 연산자를 붙인다. 흔히 볼 수 있는 것은!보이스이렇게 하는 목적은 함수를 표현식으로 바꾸는 것이다.

!function() {
	alert(1);
}();

void function() {
	alert(2);
}();

2. js 파일의 사용자 정의 함수
위에서 자집행 함수를 소개했기 때문에 우리는 그것을 이용하여 전역 변수의 사용을 줄이고 안전성을 높일 수 있다.그래서 js 파일에서, 우리는 자주 자체 실행 함수로 우리의 사용자 정의 함수를 감싸곤 한다.형식은 다음과 같습니다.

//       
(function($){
	//        
})(jQuery);

그러면 사용자 정의 함수는 어떻게 정의합니까? 아래의 방법을 보십시오.
방법 1: jQuery 전역 변수에 함수 추가하기

//  ：   jQuery         
(function($){
	// jQuery              myFunction1   ,          
	$.myFunction1=function(x,y){
		//   
	};
	$.fn.myFunction2=function(x,y){
		//   
	};
})(jQuery);
//  
$(function(){
	$.myFunction1(1,2);
});

방법2: jQuery 전역 변수에서 프로그램 확장하기

//      
(function($){
    //    3
	jQuery.extend({
		"myFunction3":function(){
			alert("     jquery  3");
		};
	});
    //    4
	jQuery.fn.extend({
        "myFunction4":function(){
            alert("     jquery  4");
        }
  });	
})(jQuery);
//  
$(function(){
    //    3
	$.myFunction3();
    //    4
	//  ，     4   ,        ，         $("button").myMethod(args);
	$("  ").myFunction4();
});

주의: 통과.fn에서 정의한 확장 방법은 jQuery 선택기를 통해 호출해야 합니다. 예를 들어 탭 선택기 $("button") 를 통해 호출해야 합니다.myMethod(args).
방법3: 전역 변수를 만들고 전역 변수에서 사용자 정의 함수 만들기

// js           STUDENT，                    
var STUDENT={ //  window.STUDENT,           
	name:"  ",
	age:"38",
        //     
	getNameAndAge:function(){
		return "name:"+name,"age:"+age;
	}
}
//  ，  STUDENT      
$(function(){
	//       
	var info=STUDENT.getNameAndAge();
});