집 > 기사 > 웹 프론트엔드 > 프론트엔드 프레임워크 팝업창 연구

프론트엔드 프레임워크 팝업창 연구

大家讲道理원래의: 2017-07-15 11:52:272763검색

저는 전력회사에서 2년째 근무하고 있는데, 개발된 애플리케이션은 모두 H5 애플리케이션을 기반으로 하고 있습니다. H5 레퍼런스는 cordova.js 라이브러리를 기반으로 개발되었습니다. 여러 아웃소싱 회사에서 애플리케이션을 받았지만 모두 혼란스럽고 개발 방법을 몰랐습니다. 이 기사에서는 주로 seajs를 기반으로 구축된 프런트 엔드의 사용을 설명합니다. 라이브러리 및 부트스트랩 프레임워크.

프론트엔드 프레임워크는 주로 4가지 사항을 연구합니다

1. 웹 프레임워크의 동적 로딩 기술 연구

모바일 인터넷에서 모바일 단말의 메모리, 트래픽, 배터리 자원의 한계를 고려하여 환경에서는 동적 로딩 기술을 사용하여 프로그램이 파일을 여러 개의 작은 파일로 나누고 지연 로딩 기술(LazyLoading)을 사용하여 온디맨드 로딩을 달성하여 사용자 경험을 개선하고 모바일 단말기의 리소스 사용량을 줄입니다. 비즈니스와 스타일 측면에서 프런트엔드 개발자는 JS 코드 블록의 헤드에서 필수 js 라이브러리와 CSS 스타일만 참조하면 됩니다. 논리적으로 개발자는 읽고 표시하기 위해 백엔드에서 제공하는 인터페이스만 호출하면 됩니다. 이 기술의 주요 장점은 높은 유지 관리성, 빠른 동적 로딩 및 우수한 프런트엔드 성능 최적화를 포함합니다.

모듈형 구성 기술 학습

프런트 엔드 인력의 모바일 애플리케이션 프로젝트 개발을 기반으로 모듈형 구성 기술을 사용하여 각 페이지를 분할 처리를 위한 여러 기능으로 나누어 두 가지 모두 빠르게 달성합니다. 모바일 단말기에서 페이지를 획득하고 모바일 단말기 디버깅 중에 관련 문제를 신속하게 찾을 수도 있습니다. 여러 모듈을 정의하여 서로 호출함으로써 모듈 간 충돌이 발생하지 않도록 할 뿐만 아니라 개발자의 코딩 효율성도 향상됩니다. 주요 장점은 단일 책임과 인근 의존성입니다.

다중 해상도, 멀티 사이즈 모바일 단말 인터페이스 적응 기술 연구

각 모바일 단말 장치별로 bootstrap 프레임워크 기반으로 미디어 쿼리 기능(Medie Query)을 활용하여 통일된 스타일 설정 , 창(메타) 속성 콘텐츠를 통해 비례 창을 설정합니다. 이는 서로 다른 휴대폰 모델의 서로 다른 해상도와 크기의 단말기가 적응할 수 없는 문제를 해결하고 코드 중복과 재개발을 더욱 줄입니다.

모바일 단말의 공용 구성 요소 캡슐화에 대한 연구

부트스트랩 프레임워크 하에서 일부 구성 요소의 제한된 캡슐화를 기반으로 시간 플러그인 (datatime), 팝업 플러그 -인(대화상자), 그래픽 플러그인(echarts), 풀다운 새로 고침 및 풀업 로딩 플러그인(Refresh), 슬라이딩 플러그인(스와이프), 지방 및 도시 선택(citypicker) 플러그인, 프롬프트 정보 플러그인(UED) 및 기타 플러그인은 캡슐화되어 요청 시 호출되고 요청 시 로드되어 다양한 페이지를 구현합니다. 다양한 플러그인을 참조하여 구성 요소 호출을 구현하므로 프런트 엔드 개발자의 시간이 크게 단축됩니다. 사용자 경험을 향상시킵니다.

여기서 플러그인 중 하나인 팝업 창을 사용하여 설명하겠습니다.

먼저 렌더링을 보여드리겠습니다

팝업 창은 기본적으로 모든 응용 프로그램이 온갖 종류의 팝업창이 너무 많아요. 많은 프로그래머들이 여기에 한 세트를 쓰고, 다른 세트를 저기에 씁니다. 저도 여기 인터넷에서 세트를 찾아서 직접 정리했길 바랍니다. 앞으로는 공통 코드 세트를 사용하여 간결하고 단순하게 유지할 것입니다.

프런트엔드 h5 코드

h5 페이지는 간결하고 단순해야 하며 별도의 CSS 및 js 로직 코드는 허용되지 않습니다. (다음 CSS 코드는 테스트용입니다.)

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
    0f3eabac747cdf61a51589c5584ae6e8
    8955b5d433b6cb2d7ba68ca7a2e6ee09
    b2386ffb911b14667cb8f0f91ea547a7首页6e916e0f7d1e588d4f442bf645aedb2f
    8492913265be600fb60cbb94f9489386
    c9ccee2e6ea535a969eb3f532ad9fe89.col-xs-6 {
            padding: 10px 1px;
        }531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    a3d26fddad773596419d66c0738d6f77

        5ee7ff1279557bf9d3442c1fbc9f99d0
            bb3a85de1217dcfe63c99733c3b467084a76263d43a77990c6bcabbb9005e721默认的弹窗65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8success65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467087b7f438a32e350a4b0de075e3701c07bprimary65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644danger65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708d31fa24aaf9ecd4007f06f20e49092efwarning65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8可设置背景色65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644自定义标题、描述65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467081322bddd8b40166d1d002487d9690644点后回调65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467084a76263d43a77990c6bcabbb9005e721box-shadow65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708c54469d496a24a9c1e0568153a1716e8box-shadow65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                7b7f438a32e350a4b0de075e3701c07bbox-shadow65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b467087b7f438a32e350a4b0de075e3701c07b无进入动画65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708d31fa24aaf9ecd4007f06f20e49092ef单个按钮65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                a31450e006f06f8a717195c1bfafb650bootstrap弹窗65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
            bb3a85de1217dcfe63c99733c3b46708
                d15026b8666219832a1630ab13015612无标题65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    c353704c8b8ff0531df1112c5633c2ae
        9e8587a87e6ffb3735caf5892f257228这里是用户获取到的内容,获取的内容，可直接设置在这里，然后在页面显示16b28748ea4df4d9c2150843fecfba68
    2cacc6d41bbb37262a98f745aa00fbf0
    3f1c4e4b6b16bbbd69b2ee476dc4f83avar basepath = "../../";//定义当前目录的位置（如果全部在根目录的话，则不需要定义）2cacc6d41bbb37262a98f745aa00fbf00a3ba3c2fbc6d9cc3f003f0c2028cc75
    00dc4eb34cf264c27bd9438ee6b3973b2cacc6d41bbb37262a98f745aa00fbf0
    db2b95b9b93e43c57162d16b53b263cc
    8b88c59b03c43ad401f7885b437e24852cacc6d41bbb37262a98f745aa00fbf0
    2d83d03ec17e47ecba30435d234fd99c
    3f1c4e4b6b16bbbd69b2ee476dc4f83aseajs.use("../js/dialogs");2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

코드 보기

위 코드는 내 일반 프레임워크 코드를 사용합니다. 팝업창을 사용하는 경우에는Dialog.js,Dialog.css,jquery.js및Dialogtest.js

dialogtest.js 코드는 다음과 같습니다

define(function (require) {
    require("bootstrap");//加载bootstrap
    require(&#39;dialog&#39;);//加载弹窗  
    require(&#39;dialogcss&#39;);//加载弹窗  
  
 
    var modal = new Modal({
        title: &#39;测试案例&#39;,
        content: $(&#39;#modal-tpl&#39;).html(),
        width: "90%",
        onOk: function () {
            //操作
            alert("你点击了确定");
        },
        onModalShow: function () {
            //弹窗初始化操作
            
        }
    });
    $(".btn").each(function (index) {
        $(this).on("click", function () {
            if(index==0)
            {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39; });
            }else if(index==1)
            {
                $(&#39;body&#39;).dailog({ type: &#39;success&#39; })
            }
            else if (index == 2) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39; })
            }
            else if (index == 3) {
                $(&#39;body&#39;).dailog({ type: &#39;danger&#39; })
            }
            else if (index == 4) {
                $(&#39;body&#39;).dailog({ type: &#39;warning&#39; })
            }
            else if (index ==5) {
               $(&#39;body&#39;).dailog({ type: &#39;success&#39;, maskBg: &#39;rgba(33,11,22,0.5)&#39; })
            }
            else if (index ==6) {
                $(&#39;body&#39;).dailog({
                    type: &#39;danger&#39;, title: &#39;我是自定义标题&#39;, 
                    discription: &#39;这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧&#39;
                }, function (ret) {
                    if (ret.index == 0)
                    {
                        alert("你点击了确定按钮");
                    } else
                    {
                        alert("你点击了取消操作");
                    }
                    console.log("信息为："+JSON.stringify(ret));
                })
            } else if (index ==7) {
                $(&#39;body&#39;).dailog({
                    type: &#39;danger&#39;, title: &#39;错误提示&#39;,
                    discription: &#39;这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧&#39;,
                    isInput: true
                }, function (ret) {
                    console.log(ret);
                    if (ret.index === 0)
                    {
                        alert(&#39;你点击的是第&#39; + ret.index + &#39;个按钮,状态:&#39; + ret.input.status + &#39;;输入的值为:&#39; + ret.input.value)
                    };
                });
            } else if (index == 8) {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39;, showBoxShadow: true })
            } else if (index ==9) {
                $(&#39;body&#39;).dailog({ type: &#39;success&#39;, showBoxShadow: true, maskBg: &#39;#fff&#39; })
            } else if (index == 10) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39;, showBoxShadow: true, maskBg: &#39;#ccc&#39; })
            } else if (index == 11) {
                $(&#39;body&#39;).dailog({ type: &#39;primary&#39;, showBoxShadow: true, animateStyle: &#39;none&#39; })
            } else if (index == 12) {
                $(&#39;body&#39;).dailog({
                    type: &#39;warning&#39;, showBoxShadow: true, animateStyle: &#39;none&#39;,
                    bottons: [&#39;确定&#39;], discription: &#39;也许有点问题!&#39;
                })
            }else if(index==13)
            {
                modal.open();
            } else if (index == 14) {
                $(&#39;body&#39;).dailog({ type: &#39;defalut&#39;,showBoxShadow: true, animateStyle: &#39;none&#39;,isnobutton:false,
                    bottons: [&#39;关闭&#39;], discription: &#39;也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!&#39;
                });
            }
        })
    })

})

위 내용은 프론트엔드 프레임워크 팝업창 연구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：도트 효과를 얻기 위해 CSS3를 사용하는 예 설명다음 기사：도트 효과를 얻기 위해 CSS3를 사용하는 예 설명