Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use seajs library and Bootstrap framework to build a common front-end framework, the article is very detailed, has a certain reference value, interested friends must read!

The front-end framework mainly studies four points

1. Research on dynamic loading technology of Web framework

In view of the limited memory, traffic and battery resources of the mobile terminal in the mobile Internet environment, the program file is broken into multiple small files by using dynamic loading technology, and the on-demand loading technology is used to improve the user experience and reduce the resource utilization rate of the mobile terminal. In terms of business and style, front-end developers only need to refer to the js library and css style they need at the head of the JS code block. Logically, the developer simply calls the interface provided by the backend for reading and displaying. The main advantages of this technology include high maintainability, fast dynamic loading, and good front-end performance optimization.

2. Research modular construction technology

On the basis of front-end personnel developing mobile application projects, each page is divided into multiple functions for block processing by using modular construction technology, which can not only quickly realize page acquisition on mobile side, but also quickly locate related problems when debugging on mobile side. By defining multiple modules to call each other, it not only ensures that there is no conflict between each module, but also improves the coding efficiency of developers. Its advantages are mainly single responsibility and dependence on proximity.

3. Research on multi-resolution and size Mobile device interface adaptation technology

For each terminal device on the mobile end, on the basis of bootstrap framework, set unified style through media query function, set equal proportion window through meta attribute content, thus realizing the problem that terminals with different resolutions and different size of different mobile phone models cannot adapt, further reducing code redundancy and redevelopment.

4. Study the encapsulation of mobile common components

Based on the bootstrap framework some components package limited, through the plug-in for time (datatime), dialog, echarts, Refresh, swipe, province/city selection (citypicker) plug-ins, prompt information plug-ins (UED) and other plug-ins are packaged, called on demand, loaded on demand, so that different pages refer to different plug-ins to realize the call of components, which greatly reduces the time of front-end developers and improves the user experience.

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

Let me show you the renderings first

弹窗，基本上每个应用都会用到，而各式各样的弹窗有那么多，许多程序员，这边写一套，那边写一套，代码特别乱，这里我在网上也找了一套，自己单独整理了一下，希望大家以后使用共同的一套代码，做到简洁，简单。

前端h6代码

h6页面要做到简洁，简单，不允许有单独的css和js逻辑代码（下面一句css代码是为了测试使用）

首页 .col-xs-6 { padding: 10px 1px; } 默认的弹窗 success primary danger warning 可设置背景色 自定义标题、描述 点后回调 box-shadow box-shadow box-shadow 无进入动画 单个按钮 bootstrap弹窗 无标题 这里是用户获取到的内容,获取的内容，可直接设置在这里，然后在页面显示 var basepath = "../../";//定义当前目录的位置（如果全部在根目录的话，则不需要定义） seajs.use("../js/dialogs");

View Code

上面代码，是用我的通用框架代码，大家如果用到弹窗，可直接引用dialog.js 、dialog.css、jquery.js和dialogtest.js即可

dialogtest.js代码如下

define(function (require) { require("bootstrap");//加载bootstrap require('dialog');//加载弹窗 require('dialogcss');//加载弹窗 var modal = new Modal({ title: '测试案例', content: $('#modal-tpl').html(), width: "90%", onOk: function () { //操作 alert("你点击了确定"); }, onModalShow: function () { //弹窗初始化操作 } }); $(".btn").each(function (index) { $(this).on("click", function () { if(index==0) { $('body').dailog({ type: 'defalut' }); }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(33,11,22,0.5)' }) } else if (index ==6) { $('body').dailog({ type: 'danger', title: '我是自定义标题', discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧' }, function (ret) { if (ret.index == 0) { alert("你点击了确定按钮"); } else { alert("你点击了取消操作"); } console.log("信息为："+JSON.stringify(ret)); }) } else if (index ==7) { $('body').dailog({ type: 'danger', title: '错误提示', discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧', isInput: true }, function (ret) { console.log(ret); if (ret.index === 0) { alert('你点击的是第' + ret.index + '个按钮,状态:' + ret.input.status + ';输入的值为:' + ret.input.value) }; }); } else if (index == 8) { $('body').dailog({ type: 'defalut', 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: ['确定'], discription: '也许有点问题!' }) }else if(index==13) { modal.open(); } else if (index == 14) { $('body').dailog({ type: 'defalut',showBoxShadow: true, animateStyle: 'none',isnobutton:false, bottons: ['关闭'], discription: '也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!' }); } }) })})以上是"如何使用seajs库和Bootstrap框架搭建通用前端框架"这篇文章的所有内容，感谢各位的阅读!希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.