js 플러그 인 으로 패키지 하 는 절차 방법
봉 투 는 무엇 입 니까?
제 가 이해 하 는 것 은 하나의 기능 을 따로 구성 요 소 를 만 드 는 것 입 니 다.마치 만 두 를 만 드 는 것 과 같 습 니 다.예전 에 만 두 를 만 들 려 면 먼저 밀가루 로 만두 껍질 을 만 든 다음 에 만두 소 를 만 든 다음 에 만 두 를 만 드 는 것 입 니 다.그러나 지금 은 사람들 이 자동 으로 만 두 를 만 드 는 기 계 를 발 명 했 습 니 다.기계 안의 모든 절 차 는 당신 이 만 두 를 만 드 는 것 과 같 지만,하지만 지금 당신 이 해 야 할 일 은 딱 한 가지 입 니 다.원 료 를 넣 는 것 입 니 다.이 기 계 는 봉 인 된 플러그 인 이 고,원 료 는 당신 이 전달 하고 자 하 는 매개 변수 입 니 다.
왜 js 기능 을 플러그 인 으로 봉 합 니까?다음 과 같은 몇 가지 가 있 을 것 같 아 요.
1.코드 재 활용 에 편리 함
2.각 기능 구성 요소 의 간섭 을 피하 고 역할 영역 에 문제 가 있 을 수 있 습 니 다.
3.유지 하기 편리 하고 프로젝트 의 축적 에 도 유리 합 니 다.
4.계속 복사 붙 여 넣 기 가 낮 지 않 나 요.................................................
내 가 인터넷 에서 본 포장 은 두 가지 가 있 는 것 같다.하 나 는 js 의 원생 포장 이 고 하 나 는 jquery 의 포장 이다.이쪽 은 제 가 먼저 원생 포장 에 대해 말씀 드 리 겠 습 니 다.
우 리 는 패키지 할 때 js 코드 를 자체 실행 함수 에 넣 어서 변수 충돌 을 방지 할 수 있 습 니 다.
(function(){
......
......
}()}
그리고 구조 함 수 를 만 듭 니 다.
(function(){
var demo = function(options){
......
}
}())
전역 호출 을 위해 이 함 수 를 외부 에 노출 하 십시오.
(function(){
var demo = function(options){
......
}
window.demo = demo;
}())
사실 지금 당신 은 직접 호출 할 수 있 습 니 다.포장 을 다 했 습 니 다.비록 어떤 기능 도 실현 하지 못 했 지만.
var ss = new demo({
x:1,
y:2
});
혹은
new demo({
x:2,
y:3
});
그리고 전 참 은 어떻게 합 니까?우리 플러그 인 은 보통 필수 적 인 매개 변수 나 선택 할 수 있 는 매개 변수 가 있 습 니 다.제 가 보기 에는 선택 할 수 있 는 매개 변 수 는 플러그 인 에서 기본 값 을 주 었 을 뿐 입 니 다.우리 가 전 하 는 인 자 는 플러그 인의 기본 인 자 를 덮어 씁 니 다.$.extend({})로 덮어 쓸 수 있 습 니 다.
(function(){
var demo = function(options){
this.options = $.extend({
"x" : 1,
"y" : 2,
"z" : 3
},options)
}
window.demo = demo;
}())
그리고 구조 함 수 를 초기 화 할 때 작업 을 수행 할 수 있 습 니 다.
(function(){
var demo = function(options){
this.options = $.extend({
"x" : "1",
"y" : "2",
"z" : "3"
},options);
this.init();
};
demo.prototype.init = function(){
alert("x "+this.options.x+" y "+this.options.y+" z "+this.options.z);
};
window.demo = demo;
}());
new demo({
"x" :"5",
"y" :"4"
});
</script>
그렇게 됐어.아주 간단 한 패키지제 게 의문 이 있 습 니 다.extend 는 jquery 일 뿐 입 니 다.js 대상 에 게 어떤 대체 방법 이 있 습 니까?좀 늦게 봐 요.
그리고 제시 해 야 할 것 은 js 를 포장 할 때 우 리 는 주도면밀 하 게 고려 해 야 한 다 는 것 이다.예 를 들 어 그의 확장 성과 호환성,그리고 성능 이 어떤 지,그리고 필요 하지 않 은 것 은 포장 할 필요 가 없다.
현재 인터넷 에서 이미 완 성 된 플러그 인 은 셀 수 없 을 정도 로 많 고 기능 도 매우 강하 다.그러나 바로 이 점 이다.어떤 때 는 큰 플러그 인 을 우 리 는 아주 작은 부분 에 만 사용 할 때 가 있다.그러면 우리 자신 에 게 맞 는 것 으로 수정 해 야 한다.그리고 어떤 항목 의 스타일 은 현재 의 플러그 인 스타일 과 다 르 기 때문에 관건 은 자신의 프로젝트 에 맞 는 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.