快速开发静态页面——前端框架和插件总结

Posted 2021-04-05 蓝桥云课精选

关注「实验楼」，每天分享一个项目教程   

简介

最近很久没有写文章，不忙也忙的生活节奏，博客相关的东西也没法做成文章来详细讲，最多就是SEO相关，倒也没多少人会真正用到，所以过了一段时间，就目前开发完的学院实训系统web网页项目做个回顾，整个团队就我一个前端开发，所以我负责了需求分析、原型设计、UI/UE设计等工作。团队其他成员和老师都是负责java web后台。个人从用框架开发浅谈对框架开发的效率和效果的意义。

前端页面开发框架

常见web页面框架

web页面开发的框架，可能常用并且熟悉也就那几个.

页面布局框架：、

JS框架： 

一眼看过去似乎有点少哦，其实开发web网站只要需求不是特别多的，基本就够了，有些甚至JS都用的少。

开发中前台页面开发最简单，因为需求的不多，其实如果复杂了，也就会多用到H5和CSS3的一些东西外加JS和Ajax。

框架浅谈

Bootstrap

这个框架确实厉害，我也不多介绍了。就跟它的宣传语一样。

Bootstrap 是最受欢迎的 html、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。所有开发者、所有应用场景而设计。

Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

确实目前很多网页都用了这个框架，确实为开发省力不少，不过一些大公司的网页都是把里面需要用的组建封装成自己的，并加以改变利用。

新手可能很难上手并做到自己DIY，还是建议按着文档的方法来调用。等到有实际需求需要整合代码才去把代码独立并入到工程中。

学会如何把别人框架组件的代码整合进自己项目的CSS和JS中确实很有用，因为框架下载的很多都是压缩好的，大小很大，如果只用少部分JS和CSS样式就有点大材小用了，所以得下对应的组建并入到自己的工程中。

Materialize

此框架出自谷歌可能知名度没有Bootstrap大，但是它的设计感、配色和动画效果，在目前看来是框架中最完美的！

官网给出了很多组件的效果和使用方法，大家自行去看看效果吧.。

此框架除去它的其他页面布局外，我最看重它的配色表和它给出的模版页面，可以极大降低前端对于网页的设计和布局的困惑，因为没有独立的平面设计师来规划整个布局，前端开发借助框架能更快开发出想要的效果并且很好看。

总结

其实没讲到Jquery，因为这个JS框架，对开发其实作用不大，主要是因为框架自身都需要Jquery来支持，它是一个必需品，因为它让JS语言更优美实用，writer less，do more。

其实到最后，我都没有用上述的框架，而是发现了一个国外团队自己组建的新框架。
这个框架结合了Google’s Material Design Standards 和 Bootstrap.

用过后，我发现了将Materialize框架的一些优点结合了Bootstrap的一些布局特点，将两者共有的组件进行优化和美化，配色和动画效果主要参考的Material，让Bootstrap的一些组件更生动，提高了用户的体验。后面详细讲下这个框架。

Propeller前后台页面框架

What is propeller?

前面提到了，就是一个极其好用的前后台结合了Materialize和Bootstrap框架。我更看重后台的一些组件效果，比如很多后台需要用到的，图表、数据表格、日历选择都有，虽然可选性不多，但足够用了。

使用效果

登录页面

后台主页面

因为Propeller提供提供了包含它组件的后台管理页面，所以开发起来难度不大。

登录模块用到了验证框架后面会说，然后根据项目需求自己DIY设置了一些东西和样式。让开发效率得到了解放和提示，并利于二次开发。

后台这块的难度主要在于二期开发中可能会涉及到数据的图表展示，需要用到JS插件来完成，目前还未着手开发。然后就是数据的表格、表单展示，用插件自带的数据表格，实现了对表单的排序和搜索，简化了后台开发的工作量。

bootstrapValidator表单验证

表单验证的第三方插件确实有不少，bootstrapValidator这个是我在一个网站偶然发现的，由别人整理出来发表过，我就拿来用了。只是这个框架是根据查询表单的ID来定位的，但是我开发的时候用的Propeller框架，它的模版页面把项目需求的三个页面集合到了一个上，即登录、注册、找回页面，产生了三个页面，所以我在JS一共调用了3次来检测，不知道有什么更方便简洁的方法不。因为我的一个页面上面有三个表单，通过按钮点击来控制隐藏和显示。

做验证这块，设计到了正则表达式，因为要验证邮箱和密码长度、强度，所以网上百度了下，这方面的正则写法。

regexp: {
regexp: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,12}$/,
message: '必须包含数字和字母，以字母开头（长度为6-12位）'
},

var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
//获取输入邮箱并用正则表达式把空格替换为空字符

邮箱检验其实bootstrapValidator中可以用正则来检验，我当时为了实现点击发送验证码的效果，所以把这块的检验又重复了一遍，因为控制其邮箱的规范来发送邮件，实现自动倒计时的效果。必须保证邮箱有效。因为不知道如何在bootstrapValidator框架中来调用自己的方法和函数，所以就这样用了个单独的JS来完成。完整代码如下：

//  验证码js
var sends = {
        checked: 1,
        send: function() {
            var email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
            //获取输入邮箱并用正则表达式把空格替换为空字符
            var val = $('#forgot-email').val().replace(/\s+/g, "");
            var vall = $('#fotgot-email').val().replace(/\s+/g, "");
            if ($('.div-email').find('span').length == 0 && $('.div-email a').attr('class') == 'send1') {
                if (!email.test(val) || val.length == 0) {
                    $('.div-email').append('<span class="error">Error</span>');
                    return false;
                }
            }
            if ($('.div-email').find('span').length == 0 && $('.div-email a').attr('class') == 'send1') {
                if (!email.test(vall) || vall.length == 0) {
                    $('.div-email').append('<span class="error">Error</span>');
                    return false;
                }
            }
            if (email.test(val)) {
                var time = 60;
                $('.div-email span').remove();
                function timeCountDown() {
                    if (time == 0) {
                        clearInterval(timer);
                        $('.div-email a').addClass('send1').removeClass('send0').html("发送验证码");
                        sends.checked = 1;
                        return true;
                    }
                    $('.div-email a').html(time + "S后再次发送");
                    time--;
                    return false;
                    sends.checked = 0;
                }
                $('.div-email a').addClass('send0').removeClass('send1');
                timeCountDown();
                var timer = setInterval(timeCountDown, 1000);
            }
            if (email.test(vall)) {
                var time = 60;
                $('.div-email span').remove();
                function timeCountDown() {
                    if (time == 0) {
                        clearInterval(timer);
                        $('.div-email a').addClass('send1').removeClass('send0').html("发送验证码");
                        sends.checked = 1;
                        return true;
                    }
                    $('.div-email a').html(time + "S后再次发送");
                    time--;
                    return false;
                    sends.checked = 0;
                }
                $('.div-email a').addClass('send0').removeClass('send1');
                timeCountDown();
                var timer = setInterval(timeCountDown, 1000);
            }
        }
    }
    // 消除重复错误样式
$(".register-login").click(function() {
    $('.div-email span').remove();
})

这个验证框架还有点小问题，就是当验证失败的时候，应该要阻止表单提交的默认事件发生，框架没有做这方面处理，需要我们自己来完善，代码如下：

// 验证成功前提交按钮不起作用
$("#defaultForm").submit(function(ev) { ev.preventDefault(); });
$("#defaultFormm").submit(function(ev) { ev.preventDefault(); });
$("#submit").on("click", function() {
    var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
    bootstrapValidator.validate();
    if (bootstrapValidator.isValid())
        $("#defaultForm").submit();
    else return;
});

保证只要有表单错误，按钮不起作用，全部正确后按钮可用。

注意：bootstrapValidator验证框架用的字体图标有2套(glyphicon和FontAwesome)，推荐大家使用FontAwesome，至于为什么，glyphicon在火狐浏览器会出现问题，FontAwesome目前在火狐、IE、谷歌内核浏览器不会出现问题，问题主要是加载不出来字体文件。

缺陷：表单验证中，我还没找到正则表达式来实现验证密码，首字母开头并要有大写，并且由数字和字母组成的正则表达式写法，因为对正则不熟悉，也算是一个遗憾了。目前的效果是只要包含了字幕和数字长度大于6位验证就通过。

使用其他小插件收获

基于Bootstrap的导航

为什么想到用这个插件来实现导航，因为考虑到效率和效果，因为团队没有美工啊，我自己考虑到了兼容性问题，想做个适配手机端的首页效果，后台和登录界面没有做适配移动端的设计，所以为了快速开发并且好看用到了网上开源的一个插件，有23种基于Bootstrap设计的导航效果。

现在都是框架开发，很多东西其实真的不想从底层开始写，加之原型图根本没有美工，自己来设计要浪费很多时间成本。
浏览器没有下拉时

浏览器下拉后

hover的css效果

hover的CSS3动画效果，只支持IE9以上的浏览器，是为了增加用户体验而添加的效果。
具体的效果要自己看，我这里就不录GIF动画来展示效果了，效果主要在首页的列表新闻的更多按钮那，和顶部菜单导航也用到了动画效果。

End

框架开发解放了生产力，让一个静态页面效果更逼真，也让用户体验逐渐上去，但是目前对网站的需求主要还是为了展示和宣传一些东西，反观教育机构和政府部门的网站都是偏动画少，体现了公关的严肃性。所以动画效果尽量还是分对象来使用。

框架和插件在计算机领域的各行业都是持续不减的话题，有人鼓励直接用框架和插件，有人赞成原生手写辅以框架。有人注重页面展示效果，却不关心底层的实现，有人重视底层实现原理，愿意自己照葫芦画瓢花大量时间自己写，还有人兼顾两者，利用完框架实现页面效果后，重新看框架实现的源代码，理解其中来龙去脉，根据自己实现选择是否深入研究。

出处：Water Sister's Blog

链接：http://www.cduyzh.com/web-front/

推荐阅读：

• 
  

• 
  

•