Front-End General Framework feasibility study report pop-up window, framework feasibility study report

Front-End General Framework feasibility study report pop-up window, framework feasibility study report

I have been working in the power company for two years. All applications developed are based on H5 applications. The H5 reference is based on cordova. the js library is developed, and various outsourcing companies are confused about how to develop their applications. (In the next article, I will introduce the basic points of Power Information Development Based on cordova, this article mainly describes the use of common plug-ins and problems encountered.) This article mainly describes a set of front-end general frameworks built based on the seajs library and Bootstrap framework.

The front-end framework focuses on four points

1,Research on Dynamic Loading technology of Web frameworks

In mobile Internet environments, mobile memory, traffic, and battery resources are limited. By using dynamic loading technology, program files are split into multiple small files to use LazyLoading technology ), it enables On-Demand Loading to improve user experience and reduce resource usage on mobile terminals. In terms of business and style, front-end developers only need to reference the JS library and css style in the header of the js Code block. Logically, developers only need to call the interfaces provided by the backend to read and display data. The main advantages of this technology include high maintainability, fast dynamic loading, and good front-end performance optimization.

2,Research ModularizationConstruction Technology

Based on the development of mobile application projects by front-end personnel, the modular construction technology is used to divide each page into multiple functions for segmented processing. This allows you to quickly obtain mobile pages, you can also quickly locate problems during mobile debugging. Multiple modules are defined to call each other, which not only ensures that there is no conflict between modules, but also improves the coding efficiency of developers. Its main advantage is its single responsibility and proximity.

3,Research on Multi-Resolution and multi-dimensional mobile terminal interface adaptation technology

Based on the bootstrap framework, various mobile terminal devices use the Medie Query function to set a unified style, the proportional window is set to further reduce code redundancy and re-development. In this way, different resolutions of different mobile phone models and terminals of different sizes cannot be adapted.

4,Research on mobile terminal public component Encapsulation

Limited Component encapsulation Based on the bootstrap framework. The time plug-in (datatime), the pop-up window plug-in (dialog), the graphics plug-in (echarts), and the pull-down Refresh plug-in (Refresh) swiper, citypicker, and UED are encapsulated, called as needed, and loaded as needed, different plug-ins can be referenced on different pages to call components, which greatly reduces the time required by front-end developers and improves the user experience.

 

Here, we will use one of the plug-ins-a pop-up window to explain

Let's take a look.

The pop-up window is basically used by every application, and there are so many pop-up windows. Many programmers write one set here and one set over there, and the code is messy, here I also found a set on the Internet and sorted it out separately. I hope you will use a set of code in the future to make it simple and simple.

Front-end h5 code

H5 pages must be concise and simple. Separate css and js logic Code are not allowed (the following css code is used for testing)

<! DOCTYPE html> View Code
The above Code uses my general framework code. If you use a pop-up window, you can directly reference dialog. js 、dialog.css, jquery. js, and dialogtest. js.
The Code of dialogtest. js is as follows:
Define (function (require) {require ("bootstrap"); // load bootstrap require ('Dialog '); // load the pop-up window require ('dialogcss '); // load the pop-up window var modal = new Modal ({title: 'test case', content: ('your modal-tpl'{.html (), width: "90%", onOk: function () {// operate alert ("You clicked OK") ;}, onModalShow: function () {// pop-up window initialization operation }}); $ (". btn "). each (function (index) {$ (this ). on ("click", function () {if (index = 0) {$ ('body '). dailog ({type: 'de Falut '});} else if (index = 1) {$ ('body '). dailog ({type: 'success'})} else if (index = 2) {$ ('body '). dailog ({type: 'primary'})} else if (index = 3) {$ ('body '). dailog ({type: 'danger '})} else if (index = 4) {$ ('body '). dailog ({type: 'warning'})} else if (index = 5) {$ ('body '). dailog ({type: 'success', maskBg: 'rgba (0.5, 22,) '})} else if (index = 6) {$ ('body '). dailog ({type :' Danger ', title:' I am a custom title', discription: 'Here is a custom description. You can write your description or his description. In short, you can write a lot of text, you can do it yourself '}, function (ret) {if (ret. index = 0) {alert ("You clicked OK");} else {alert ("You clicked cancel Operation");} console. log ("information:" + JSON. stringify (ret);})} else if (index = 7) {$ ('body '). dailog ({type: 'danger ', title: 'error message', discription:' Here is a custom description. You can write your description or its description, in short, you can write a lot of text, you can do it yourself ', isInput: true}, function (ret) {console. log (r Et); if (ret. index = 0) {alert ('the number you clicked is '+ ret. index + 'buttons, status: '+ ret. input. status + '; input value:' + ret. input. value) };});} else if (index = 8) {$ ('body '). dailog ({type: 'delete', showBoxShadow: true})} else if (index = 9) {$ ('body '). dailog ({type: 'success', showBoxShadow: true, maskBg: '# fff'})} else if (index = 10) {$ ('body '). dailog ({type: 'primary', showBoxShadow: true, maskBg :'# Ccc '})} else if (index = 11) {$ ('body '). dailog ({type: 'primary', showBoxShadow: true, animateStyle: 'none'})} else if (index = 12) {$ ('body '). dailog ({type: 'warning', showBoxShadow: true, animateStyle: 'none', bottons: ['OK'], discription: 'may be a problem! '})} Else if (index = 13) {modal. open ();} else if (index = 14) {$ ('body '). dailog ({type: 'delete', showBoxShadow: true, animateStyle: 'none', isnobutton: false, bottons: ['offset'], discription: 'Maybe a problem may be a problem. Maybe a problem may be a problem! '});}})})})
Dialog. js and css. I have a pack. You can download it if you want to download it.
Http://files.cnblogs.com/files/dinghouchuanqi/dialog.zip
If you think it is okay, scan the following QR code to enjoy more and less is your greatest encouragement to me.