JavaScript 플러그인 개발 튜토리얼(2)_javascript 기술

1, 오프닝 분석

안녕하세요 여러분! 이전 기사------이 시리즈의 시작 부분(JavaScript 플러그인 개발 튜토리얼 1)을 아직도 기억하십니까? 주로 "jQuery를 활용한 플러그인 개발 방법"에 대해 이야기합니다.

그래서 오늘은 어제의 질문을 바탕으로 플러그인 개발 여정을 이어가겠습니다. 이전 질문은 다음과 같습니다.

(1) 프로젝트 기술 선택이 변경되고 이러한 플러그인이 "jQuery" 메커니즘에 크게 의존하는 경우 이전에 작성한 플러그인을 사용할 수 없습니다(jQuery를 사용하지 않는다고 가정). 리팩토링하는 방법?

(2), 플러그인의 핵심 로직을 리팩토링, 어떻게 구성할 것인가?

자, 오늘의 글을 질문으로 공부해 볼까요.

우선 "jQuery 플러그인 방식"을 부정하는 것이 아닙니다. 둘째, "jQuery 플러그인에는 다음과 같은 장점이 있습니다"와 같이 문제를 다양한 각도에서 분석해야 합니다.

(1) 모든 코드를 클로저(즉시 실행 기능)에 넣습니다. 이때 클로저는 private 범위와 동일하며 내부 정보는 외부에서 접근할 수 없으며 오염이 없습니다. 전역 변수의.

(2), a) 전역 종속성을 방지합니다. b) 타사 손상을 방지합니다. c) jQuery 연산자 '$' 및 'jQuery'와 호환됩니다.

그럼 리팩토링할 때 코드를 어떻게 정리할까요? 객체지향적 사고(OOP)인가요? 아니면 끝까지 프로세스 기반 접근 방식을 따라야 할까요? 아니면 둘의 조합인가요? 하하하, 계속 지켜보세요. . . . . .

2. 어제의 예를 재구성합니다

다음은 어제 Js 부분의 소스코드입니다.

코드 복사 코드는 다음과 같습니다.

(함수($){
$.fn.bigbear = 기능(선택){
         opts = $.extend({},$.fn.bigbear.defaults,opts) ;
         return this.each(function(){
            var elem = $(this) ;
              elem.find("span").text(opts["title"]) ;
               $.get(opts["url"],function(data){
                    elem.find("div").text(data["text"]) ;
             }) ;
         }) ;
} ;
$.fn.bigbear.defaults = {
제목: "간단한 테스트입니다" ,
  URL: "data.json"
} ;
})(jQuery) ;

한 줄씩 분석해 보겠습니다.

먼저 이 플러그인의 기능을 확인하세요

(1) 우리가 설정한 타이틀 텍스트 정보를 표시합니다.

(2) 비동기 방식으로 콘텐츠 정보를 동적으로 가져옵니다.

알겠습니다! 요구사항이 명확해지면 논의를 시작할 수 있습니다. 위의 코드에서 논리적 구성이 매우 느슨하고 절차적 사고가 분명하다는 것을 쉽게 알 수 있으므로 첫 번째 단계는 기능적 요구사항을 입력하는 것입니다.

수업을 효율적으로 구성합니다. 아래 리팩터링된 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

$(함수(){
    $("#bb").bigbear() ;
}) ;
(함수($){
    $.fn.bigbear = 기능(선택){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("데이터") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        제목 : "这是一个简单的测试" ,
        URL : "data.json"
    } ;
})(jQuery) ;
함수 BigBear(elem,opts){
    this.elem = 요소 ;
    this.opts = 선택 ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = 함수(){
    this.elem을 반환하세요 ;
} ;
bbProto.getOpts = 함수(){
    this.opts를 반환하세요 ;
} ;
bbProto.init = 함수(){
    var that = this ;
    this.getElem().on("data",function(){
        that._setTitle(that.getOpts()["title"]) ;
        $.get(that.getOpts()["url"],function(결과){
            that.getElem().find("div").text(result["text"]) ;
        }) ;
    }) ;
} ;
bbProto._setTitle = 함수(텍스트){
    this.getElem().find("span").text(text) ;
} ;

　　哈哈哈，是不是代码多了不少，其实这种方式就是面向对象的角島看问题，先去分析功能需求，然后设计我们的类，虽然说我们不可能一下设计得很流color，

저희는 저보다 훨씬 더 나은 사람입니다.

　　以下是是摘자체 "Bootstrap"Js 부분의 비교 대상인 关源码实现，如下图：

그렇지 않은 것은 실제적인 방법으로 볼 수 없으며, 일반적으로 우리는 당신의 주인입니다.

(삼),增加new功能,引take额external类

　　现在需求增加了，需要在体验上有所变化，加载数据时有“loading”效果。

　　实现思路可以这样, 怀　实现思路可以这样, 把文字设置成“装载数据中。。。”의字样, 然后引入一个새로운类，如下：

复主代码 代码如下:

함수 오버레이(){

} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具体实现就不写了

　　好了，遮罩层已经有了，现我们怎么集成进来那?我们接入进来，如下：

复主代码 代码如下:

 함수 BigBear(elem,opts){
     this.elem = 요소 ;
     this.opts = 선택 ;
     this.overlay = 새로운 오버레이() ;
     this.init() ;
 } ;
 var bbProto = BigBear.prototype ;
 bbProto.getElem = 함수(){
     this.elem을 반환하세요 ;
 } ;
 bbProto.getOpts = 함수(){
     this.opts를 반환하세요 ;
 } ;
 bbProto.init = 함수(){
     var that = this ;
     var loadingText = "数据装载中。。。" ;
     this.getElem().on("data",function(){
         that._setTitle(that.getOpts()["title"]) ;
         that.overlay.show() ;
         that.getElem().find("div").text(loadingText) ;
         $.get(that.getOpts()["url"],function(결과){
             that.overlay.hide() ;
             that.getElem().find("div").text(result["text"]) ;
         }) ;
     }) ;
 } ;
 bbProto._setTitle = 함수(텍스트){
     this.getElem().find("span").text(text) ;
 } ;

　　到此只为我们的功能就算是结束了, 这样写的插件,我信比第一个版本好很多,当然这不是最的实现，需要从细节上不断重构，但是这种方式是一种可选的开发插件的方式。

　　以下是完整的代码：

复主代码 代码如下:

$(함수(){
    $("#bb").bigbear() ;
}) ;
(함수($){
    $.fn.bigbear = 기능(선택){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            var bb = new BigBear(elem,opts) ;
            bb.getElem().trigger("데이터") ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        제목 : "这是一个简单的测试" ,
        URL : "data.json"
    } ;
})(jQuery) ;
함수 BigBear(elem,opts){
    this.elem = 요소 ;
    this.opts = 선택 ;
    this.overlay = 새로운 오버레이() ;
    this.init() ;
} ;
var bbProto = BigBear.prototype ;
bbProto.getElem = 함수(){
    this.elem을 반환하세요 ;
} ;
bbProto.getOpts = 함수(){
    this.opts를 반환하세요 ;
} ;
bbProto.init = 함수(){
    var that = this ;
    var loadingText = "数据装载中。。。" ;
    this.getElem().on("data",function(){
        that._setTitle(that.getOpts()["title"]) ;
        that.overlay.show() ;
        that.getElem().find("div").text(loadingText) ;
        $.get(that.getOpts()["url"],function(결과){
            that.overlay.hide() ;
            that.getElem().find("div").text(result["text"]) ;
        }) ;
    }) ;
} ;
bbProto._setTitle = 함수(텍스트){
    this.getElem().find("span").text(text) ;
} ;
함수 오버레이(){
} ;
var olProto = Overlay.prototype ;
olProto.show = function(){} ;
olProto.hide = function(){} ;
// 具体实现就不写了

本文暂时先到这里了, small伙伴们是否对插件化开发javascript에는 새로운 认识了呢가 있습니다.