자신만의 JS Components_javascript 기술을 캡슐화하세요.
1. 기존 구성 요소 확장
1. 수요 배경
jquery.ajax를 사용하여
$.ajax({ type: "post", url: "/User/Edit", data: { data: JSON.stringify(postdata) }, success: function (data, status) { if (status == "success") { toastr.success('提交数据成功'); $("#tb_aaa").bootstrapTable('refresh'); } }, error: function (e) { }, complete: function () { } });
이런 종류의 코드는 너무 흔합니다. 현재로서는 필요 사항이 있습니다. Ajax 요청을 직접 호출할 때마다 error:function(e){}와 같은 코드를 작성하고 싶지는 않지만, 또한 매번 ajax 오류 메시지를 사용자가 볼 수 있도록 브라우저에 출력합니다. 무엇을 해야 할까요?
2. 실시원칙
위의 효과를 얻는 것은 어렵지 않습니다. $.ajax({})를 캡슐화하고 캡슐화된 공용 메서드에서 오류에 해당하는 이벤트를 정의할 수 있습니다. 실제로 이는 우리의 요구 사항을 충족할 수 있지만 완벽하지는 않습니다. 이유는 매우 간단합니다. 1) jquery 위에 레이어를 캡슐화하는 것은 충분히 효율적이지 않습니다. 2) 호출자의 습관을 변경해야 하며 ajax가 호출될 때마다. , 우리는 네이티브 $.ajax({}) 메서드를 직접 사용하는 대신 우리가 정의한 메서드의 규칙에 따라 작성된 것을 보고 싶지 않습니다.
이 경우 컨트롤을 캡슐화하지 않고 어떻게 위의 요구 사항을 달성할 수 있습니까? 대답은 $.extend를 통해 기본 jquery.ajax를 확장하는 것입니다.
실제로 다음 코드를 통해 우리의 요구 사항을 달성할 수 있습니다.
(function ($) { //1.得到$.ajax的对象 var _ajax = $.ajax; $.ajax = function (options) { //2.每次调用发送ajax请求的时候定义默认的error处理方法 var fn = { error: function (XMLHttpRequest, textStatus, errorThrown) { toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' }); }, success: function (data, textStatus) { }, beforeSend: function (XHR) { }, complete: function (XHR, TS) { } } //3.如果在调用的时候写了error的处理方法,就不用默认的 if (options.error) { fn.error = options.error; } if (options.success) { fn.success = options.success; } if (options.beforeSend) { fn.beforeSend = options.beforeSend; } if (options.complete) { fn.complete = options.complete; } //4.扩展原生的$.ajax方法,返回最新的参数 var _options = $.extend(options, { error: function (XMLHttpRequest, textStatus, errorThrown) { fn.error(XMLHttpRequest, textStatus, errorThrown); }, success: function (data, textStatus) { fn.success(data, textStatus); }, beforeSend: function (XHR) { fn.beforeSend(XHR); }, complete: function (XHR, TS) { fn.complete(XHR, TS); } }); //5.将最新的参数传回ajax对象 _ajax(_options); }; })(jQuery);
jquery의 $.extend 메소드를 접해보지 않았다면 위의 의미를 이해하지 못할 수도 있습니다. 좋아요, 먼저 jquery API가 $.extend() 메서드를 어떻게 설명하는지 살펴보겠습니다.
무슨 뜻인가요? 두 가지 공식 사례를 통해 알아보겠습니다
밤 1 :
var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; $.extend(settings, options);
결과:
settings == { validate: true, limit: 5, name: "bar" }
밤 2:
var empty = {}; var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = $.extend(empty, defaults, options);
결과:
settings == { validate: true, limit: 5, name: "bar" } empty == { validate: true, limit: 5, name: "bar" }
위의 두 가지 간단한 예는 확장() 메서드의 기능이 동일한 객체가 있으면 덮어쓰는 것임을 보여줍니다. 그렇게 간단합니다.
$.extend()의 역할을 이해하면 위 확장자 jquery.ajax의 구현을 대략적으로 이해할 수 있습니다. 주요 단계는 다음과 같이 구분됩니다.
1) 기본 오류 처리 방법을 정의합니다.
var fn = { error: function (XMLHttpRequest, textStatus, errorThrown) { toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' }); }, success: function (data, textStatus) { }, beforeSend: function (XHR) { }, complete: function (XHR, TS) { } }
2) $.ajax({})를 호출할 때 사용자가 error:function(){}을 사용자 정의했는지 확인합니다. 정의된 경우, 그렇지 않으면 기본 오류 처리 방법이 사용됩니다. 사용됩니다.
3) $.extend()를 사용하여 기본 오류 처리 방법을 $.ajax()의 매개변수에 전달합니다. options 매개변수를 보면 $.ajax() 메서드의 모든 매개변수가 포함되어 있으며 기본 fn을 사용하여 확장합니다.
위의 세 단계를 통해 $.ajax() 메서드에 기본 오류 처리 방법을 구현할 수 있습니다. 이번 확장을 통해 사용자는 $.ajax({});와 같은 ajax 요청을 계속 보낼 수 있습니다. 특별한 상황이 없으면 오류 처리 방법을 작성할 필요가 없습니다.
3.컴포넌트 확장의 의미
구성 요소 확장을 사용하면 시스템 비즈니스와 관련된 일부 처리 요구 사항을 원래 구성 요소에 추가하는 데 도움이 될 수 있습니다. 이를 사용할 때 기본 구성 요소를 사용하는 것처럼 계속 호출할 수 있으므로 다시 캡슐화할 필요가 없습니다. 부풀어 오른 층.
2. 자체 구성 요소 확장
$.ajax()의 오류 이벤트 처리 방법은 위에서 $.extend() 메서드를 통해 확장되었습니다. 우리 자신의 구성요소를 캡슐화해 보겠습니다. 함수는 매우 간단하지만 상대적으로 예시적입니다. select 구성 요소를 예로 들어 보겠습니다. 많은 경우 select의 옵션은 데이터베이스에서 데이터를 가져와야 하므로 일반적인 접근 방식은 ajax 요청을 보낸 다음 성공 메서드에 html을 입력하는 것입니다. 이제 원격 데이터 검색을 선택하는 방법을 캡슐화하겠습니다.
1. 코드 구현 및 사용 예시
실용적인 것부터 시작해 적어 보겠습니다.
(function ($) { //1.定义jquery的扩展方法combobox $.fn.combobox = function (options, param) { if (typeof options == 'string') { return $.fn.combobox.methods[options](this, param); } //2.将调用时候传过来的参数和default参数合并 options = $.extend({}, $.fn.combobox.defaults, options || {}); //3.添加默认值 var target = $(this); target.attr('valuefield', options.valueField); target.attr('textfield', options.textField); target.empty(); var option = $('<option></option>'); option.attr('value', ''); option.text(options.placeholder); target.append(option); //4.判断用户传过来的参数列表里面是否包含数据data数据集,如果包含,不用发ajax从后台取,否则否送ajax从后台取数据 if (options.data) { init(target, options.data); } else { //var param = {}; options.onBeforeLoad.call(target, options.param); if (!options.url) return; $.getJSON(options.url, options.param, function (data) { init(target, data); }); } function init(target, data) { $.each(data, function (i, item) { var option = $('<option></option>'); option.attr('value', item[options.valueField]); option.text(item[options.textField]); target.append(option); }); options.onLoadSuccess.call(target); } target.unbind("change"); target.on("change", function (e) { if (options.onChange) return options.onChange(target.val()); }); } //5.如果传过来的是字符串,代表调用方法。 $.fn.combobox.methods = { getValue: function (jq) { return jq.val(); }, setValue: function (jq, param) { jq.val(param); }, load: function (jq, url) { $.getJSON(url, function (data) { jq.empty(); var option = $('<option></option>'); option.attr('value', ''); option.text('请选择'); jq.append(option); $.each(data, function (i, item) { var option = $('<option></option>'); option.attr('value', item[jq.attr('valuefield')]); option.text(item[jq.attr('textfield')]); jq.append(option); }); }); } }; //6.默认参数列表 $.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: '请选择', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } }; })(jQuery);
먼저 맞춤 구성요소를 사용하는 방법을 살펴보겠습니다.
사용법 1: URL을 통해 원격으로 데이터 검색 및 초기화
먼저 빈 선택을 정의하세요
<select id="sel_search_plant" class="form-control"></select>
그런 다음 초기화하세요
$(function(){ $('#sel_search_plant').combobox({ url: '/apiaction/Plant/Find', valueField: 'TM_PLANT_ID', textField: 'NAME_C' }); })
매개변수는 매우 간단하므로 하나씩 소개하지는 않겠습니다. 엄청 간단한데 혹시 없나요~~
용법 2: 값 및 설정
var strSelectedValue = $('#sel_search_plant').combobox("getValue"); $('#sel_search_plant').combobox("setValue", "aaa");
其实对于简单的select标签,博主觉得这里的getValu和SetValue意义不大,因为直接通过$('#sel_search_plant').val()就能解决的事,何必要再封一层。这里仅仅是做演示,试想,如果是封装成类似select2或者multiselect这种组件,getValue和setValue的意义就有了,你觉得呢?
2、代码详细讲解
上面的实现代码,如果您一眼就能看懂,证明您是经常封组件的大虾了,下面的就不用看了。如果看不懂,也没关系,我们将代码拆开详细看看里面是什么鬼。
(1)首先看看我们最常看到的如下写法:
(function ($) { //....封装组件逻辑 })(jQuery);
初初看到这种用法,博主也是狂抓,这是什么鬼嘛,四不像啊。使用多了之后才知道原来这就是一个匿名函数的形式。将它拆开来看如下:
var fn = function($){ //.....组件封装逻辑 }; fn(jQuery);
也就是说这种写法就表示先定义一个方法,然后立即调用这个方法,jQuery相当于实参。打开jquery.js的原文件可以看到,jQuery是这个文件里面的一个全局变量。
(2)定义自己的组件的代码:
$.fn.combobox = function (options, param) { };
习惯这种写法的应该知道,这个就表示向jquery对象添加自定义方法,比如你想使用文章开始的 $("#id").MyJsControl({}) 这种用法,你就可以这样定义 $.fn.MyJsControl=function(options){} 。
(3) options = $.extend({}, $.fn.combobox.defaults, options || {}); 这一句,看过上文的朋友应该还记得extend这么一个方法吧,怎么样,又来了你。这句话其实就没什么好说的了,合并默认参数和用户传进来的参数。
(4)默认参数列表
$.fn.combobox.defaults = { url: null, param: null, data: null, valueField: 'value', textField: 'text', placeholder: '请选择', onBeforeLoad: function (param) { }, onLoadSuccess: function () { }, onChange: function (value) { } };
如果用户没有传参,就用默认的参数列表。如果你够细心,你会发现博主之前分享的其他bootstrap组件的js文件里面都有这么一个default参数列表。我们随便找两个:
bootstrap上传组件
bootstrap table组件
基本都是这么些用法。这样来看,是否也可以自己封一个js组件~~
以上就是对js组件扩展以及封装用法的认识和总结,希望大家喜欢。

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











4월 17일 이 사이트의 뉴스에 따르면 TrendForce는 최근 Nvidia의 새로운 Blackwell 플랫폼 제품에 대한 수요가 강세를 보이고 있으며, 이로 인해 TSMC의 전체 CoWoS 패키징 생산 능력이 2024년에 150% 이상 증가할 것으로 예상된다는 보고서를 발표했습니다. NVIDIA Blackwell의 새로운 플랫폼 제품에는 B 시리즈 GPU와 NVIDIA 자체 GraceArm CPU를 통합한 GB200 가속기 카드가 포함됩니다. TrendForce는 현재 공급망이 GB200에 대해 매우 낙관적이며, 출하량이 2025년에 100만 개를 초과할 것으로 예상되며 이는 Nvidia 고급 GPU의 40~50%를 차지할 것으로 확인했습니다. 엔비디아는 하반기에 GB200, B100 등의 제품을 출시할 계획이지만, 업스트림 웨이퍼 패키징에는 더욱 복잡한 제품을 채택해야 합니다.

이 웹사이트는 7월 9일에 AMD Zen5 아키텍처 "Strix" 시리즈 프로세서에 두 가지 패키징 솔루션이 있을 것이라고 보고했습니다. 더 작은 StrixPoint는 FP8 패키지를 사용하고 StrixHalo는 FP11 패키지를 사용합니다. 출처: videocardz 출처 @Olrak29_ 최근 밝혀진 바에 따르면 StrixHalo의 FP11 패키지 크기는 37.5mm*45mm(1687제곱밀리미터)로 Intel의 AlderLake 및 RaptorLake CPU의 LGA-1700 패키지 크기와 동일합니다. AMD의 최신 Phoenix APU는 25*40mm 크기의 FP8 패키징 솔루션을 사용합니다. 이는 StrixHalo의 F가

PHP의 캡슐화 기술과 애플리케이션 캡슐화는 객체 지향 프로그래밍에서 중요한 개념입니다. 이는 외부 프로그램에 대한 통합 액세스 인터페이스를 제공하기 위해 데이터와 데이터에 대한 작업을 함께 캡슐화하는 것을 의미합니다. PHP에서는 액세스 제어 수정자와 클래스 정의를 통해 캡슐화를 달성할 수 있습니다. 이 기사에서는 PHP의 캡슐화 기술과 해당 애플리케이션 시나리오를 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 1. 캡슐화된 액세스 제어 수정자 PHP에서 캡슐화는 주로 액세스 제어 수정자를 통해 이루어집니다. PHP는 세 가지 액세스 제어 수정자를 제공합니다.

Vue의 Axios 캡슐화 및 일반적인 방법 소개 Axios는 Promise를 기반으로 한 HTTP 라이브러리로 가독성, 사용 용이성 및 확장성이 뛰어나다는 장점이 있습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 Axios에 대한 완벽한 지원도 제공합니다. 이 기사에서는 Vue에서 Axios를 캡슐화하는 방법을 소개하고 일반적으로 사용되는 Axios 방법을 소개합니다. 1. Axios 캡슐화 개발 과정에서 우리는 종종 다음과 같은 Axios의 맞춤형 캡슐화를 수행해야 합니다.

C++ 함수는 코드를 캡슐화함으로써 GUI 개발 효율성을 향상시킬 수 있습니다. 코드 캡슐화: 함수는 코드를 독립적인 단위로 그룹화하여 코드를 더 쉽게 이해하고 유지 관리할 수 있도록 합니다. 재사용성: 함수는 애플리케이션 전체에서 재사용할 수 있는 공통 기능을 생성하여 중복과 오류를 줄입니다. 간결한 코드: 캡슐화된 코드는 기본 논리를 간결하고 쉽게 읽고 디버깅할 수 있도록 만듭니다.

Go 언어에서 캡슐화 및 상속을 구현하는 방법 캡슐화 및 상속은 객체 지향 프로그래밍에서 두 가지 중요한 개념으로, 코드를 보다 모듈화하고 유지 관리하기 쉽게 만들고 코드 재사용을 위한 편의성을 제공합니다. 이 글에서는 Go 언어로 캡슐화와 상속을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다. 캡슐화 캡슐화는 데이터와 기능을 캡슐화하고, 구현 세부 사항을 숨기고, 외부 사용을 위해 필요한 인터페이스만 노출하는 것입니다. Go 언어에서는 내보낸 식별자와 내보내지 않은 식별자를 통해 캡슐화가 이루어집니다. 대문자로 된 식별자는 다른 패키지에서 접근 가능

PHP 코드 캡슐화 기술: 클래스와 객체를 사용하여 재사용 가능한 코드 블록을 캡슐화하는 방법 요약: 개발 중에 재사용이 필요한 코드 블록을 자주 접하게 됩니다. 코드의 유지 관리성과 재사용성을 향상시키기 위해 클래스 및 객체 캡슐화 기술을 사용하여 이러한 코드 블록을 캡슐화할 수 있습니다. 이 문서에서는 클래스와 개체를 사용하여 재사용 가능한 코드 블록을 캡슐화하는 방법을 설명하고 몇 가지 구체적인 코드 예제를 제공합니다. 클래스와 객체를 사용하여 캡슐화하면 다음과 같은 장점이 있습니다. 1.1 중복을 줄여 코드 유지 관리 용이성을 높입니다.

11일 본 사이트의 소식에 따르면, 경제일보는 오늘(11일) 폭스콘그룹이 현재 주류인 패널레벨팬아웃패키징(FOPLP) 반도체 솔루션을 중심으로 첨단 패키징 분야에 진출했다고 보도했다. 1. 자회사 이노룩스에 이어 폭스콘그룹이 투자한 샤프도 일본 패널급 팬아웃 패키징 분야 진출을 발표해 2026년 생산에 들어갈 예정이다. 폭스콘 그룹 자체가 AI 분야에서 충분한 영향력을 갖고 있고, 첨단 패키징의 단점을 보완해 향후 더 많은 AI 제품 주문 수용을 촉진하는 '원스톱' 서비스를 제공할 수 있다. 이 사이트에서 참조한 공개 정보에 따르면 폭스콘 그룹은 현재 샤프 지분 10.5%를 보유하고 있으며 현 단계에서는 지분을 늘리거나 줄이지 않고 그대로 유지할 것이라고 밝혔습니다.
