웹 프론트엔드 JS 튜토리얼 JavaScript 플러그인 개발 튜토리얼(2)_javascript 기술

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

May 16, 2016 pm 04:17 PM
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에는 새로운 认识了呢가 있습니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

권장되는 AI 지원 프로그래밍 도구 4가지 권장되는 AI 지원 프로그래밍 도구 4가지 Apr 22, 2024 pm 05:34 PM

이 AI 지원 프로그래밍 도구는 급속한 AI 개발 단계에서 유용한 AI 지원 프로그래밍 도구를 많이 발굴했습니다. AI 지원 프로그래밍 도구는 개발 효율성을 높이고, 코드 품질을 향상시키며, 버그 발생률을 줄일 수 있습니다. 이는 현대 소프트웨어 개발 프로세스에서 중요한 보조자입니다. 오늘 Dayao는 4가지 AI 지원 프로그래밍 도구(모두 C# 언어 지원)를 공유하겠습니다. 이 도구가 모든 사람에게 도움이 되기를 바랍니다. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot은 더 빠르고 적은 노력으로 코드를 작성하는 데 도움이 되는 AI 코딩 도우미이므로 문제 해결과 협업에 더 집중할 수 있습니다. 힘내

Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 알아보세요. Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 알아보세요. Mar 28, 2024 pm 10:00 PM

Go 언어 개발 모바일 애플리케이션 튜토리얼 모바일 애플리케이션 시장이 지속적으로 성장함에 따라 점점 더 많은 개발자가 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 모색하기 시작했습니다. 간단하고 효율적인 프로그래밍 언어인 Go 언어는 모바일 애플리케이션 개발에서도 강력한 잠재력을 보여주었습니다. 이 기사에서는 Go 언어를 사용하여 모바일 애플리케이션을 개발하는 방법을 자세히 소개하고 독자가 빠르게 시작하고 자신의 모바일 애플리케이션 개발을 시작할 수 있도록 특정 코드 예제를 첨부합니다. 1. 준비 시작하기 전에 개발 환경과 도구를 준비해야 합니다. 머리

최고의 AI 프로그래머는 누구일까요? Devin, Tongyi Lingma 및 SWE 에이전트의 잠재력을 살펴보세요. 최고의 AI 프로그래머는 누구일까요? Devin, Tongyi Lingma 및 SWE 에이전트의 잠재력을 살펴보세요. Apr 07, 2024 am 09:10 AM

세계 최초의 AI 프로그래머 데빈(Devin)이 태어난 지 한 달도 채 안 된 2022년 3월 3일, 프린스턴 대학의 NLP팀은 오픈소스 AI 프로그래머 SWE-에이전트를 개발했습니다. GPT-4 모델을 활용하여 GitHub 리포지토리의 문제를 자동으로 해결합니다. SWE-bench 테스트 세트에서 SWE-agent의 성능은 Devin과 유사하며 평균 93초가 걸리고 문제의 12.29%를 해결합니다. SWE-agent는 전용 터미널과 상호 작용하여 파일 내용을 열고 검색하고, 자동 구문 검사를 사용하고, 특정 줄을 편집하고, 테스트를 작성 및 실행할 수 있습니다. (참고: 위 내용은 원문 내용을 약간 조정한 것이지만 원문의 핵심 정보는 그대로 유지되며 지정된 단어 수 제한을 초과하지 않습니다.) SWE-A

가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: 개발을 위한 필수 도구 가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: 개발을 위한 필수 도구 Feb 22, 2024 pm 02:33 PM

가장 인기 있는 다섯 가지 Go 언어 라이브러리 요약: Go 언어는 탄생 이후 광범위한 관심과 적용을 받아왔습니다. 새롭게 떠오르는 효율적이고 간결한 프로그래밍 언어인 Go의 급속한 발전은 풍부한 오픈 소스 라이브러리의 지원과 불가분의 관계입니다. 이 기사에서는 인기 있는 Go 언어 라이브러리 5개를 소개합니다. 이러한 라이브러리는 Go 개발에서 중요한 역할을 하며 개발자에게 강력한 기능과 편리한 개발 경험을 제공합니다. 동시에 이러한 라이브러리의 용도와 기능을 더 잘 이해하기 위해 구체적인 코드 예제를 통해 설명하겠습니다.

VSCode 이해: 이 도구는 어떤 용도로 사용됩니까? VSCode 이해: 이 도구는 어떤 용도로 사용됩니까? Mar 25, 2024 pm 03:06 PM

"VSCode 이해: 이 도구는 어떤 용도로 사용됩니까?" 》프로그래머로서 초보자이든 숙련된 개발자이든 코드 편집 도구를 사용하지 않으면 할 수 없습니다. 많은 편집 도구 중에서 Visual Studio Code(약칭 VSCode)는 가볍고 강력한 오픈 소스 코드 편집기로 개발자들 사이에서 매우 인기가 높습니다. 그렇다면 VSCode는 정확히 어떤 용도로 사용되나요? 이 기사에서는 VSCode의 기능과 사용법을 자세히 살펴보고 독자에게 도움이 되는 구체적인 코드 예제를 제공합니다.

웹 개발에서 PHP는 프런트엔드인가요, 백엔드인가요? 웹 개발에서 PHP는 프런트엔드인가요, 백엔드인가요? Mar 24, 2024 pm 02:18 PM

PHP는 웹 개발의 백엔드에 속합니다. PHP는 주로 서버 측 로직을 처리하고 동적 웹 콘텐츠를 생성하는 데 사용되는 서버 측 스크립팅 언어입니다. 프런트엔드 기술과 비교하여 PHP는 데이터베이스와의 상호 작용, 사용자 요청 처리, 페이지 콘텐츠 생성과 같은 백엔드 작업에 더 많이 사용됩니다. 다음으로, 백엔드 개발에서 PHP 적용을 설명하기 위해 특정 코드 예제가 사용됩니다. 먼저 데이터베이스에 연결하고 데이터를 쿼리하기 위한 간단한 PHP 코드 예제를 살펴보겠습니다.

Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전 Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전 Mar 28, 2024 pm 01:06 PM

빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.

자세한 PyCharm 활성화 튜토리얼: 개발 도구를 쉽게 활성화하세요 자세한 PyCharm 활성화 튜토리얼: 개발 도구를 쉽게 활성화하세요 Feb 20, 2024 pm 05:51 PM

자세한 PyCharm 활성화 튜토리얼: 개발 도구를 쉽게 활성화할 수 있는 강력한 Python 통합 개발 환경인 PyCharm은 많은 개발자들의 사랑을 받고 있습니다. 그러나 PyCharm을 처음 사용할 때 활성화 문제가 발생하고 소프트웨어 활성화 방법을 모르는 사람들이 많습니다. 이 글에서는 PyCharm의 활성화 방법을 자세히 소개하고, 이 개발 도구를 쉽게 활성화하는 데 도움이 되는 구체적인 코드 예제를 제공합니다. 1단계: 먼저 PyCharm 소프트웨어 다운로드

See all articles