下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作。

传统开发思路如下:

缺点:所有代码写在一个html中,难以阅读,难以维护,难以复用!

使用requirejs开发思路如下(且看笔者如何解耦模块化代码):

缺点:编写过程较为复杂

优点:代码解耦,便于复用。什么时候你想复用,只需require你编写好的js模块,即可!里面的bootstrap,jquery,模态框等等所有东西都会加载好(因为你在定义的时候,已经写好依赖关系了)

举个例子:我们项目中关于项目授权的使用至少存在三个页面,编写好这样一个js模块,可以很轻易的在那三个页面上复用。如果使用传统办法,估计要复制粘贴大量的html和js。

看一下代码运行效果吧:

源代码地址:

https://github.com/lewis617/myflask/tree/master/requirejsModal

使用RequireJs和Bootstrap模态框实现表单提交的更多相关文章

  1. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  2. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  3. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  4. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  5. BootStrap 模态框基本用法

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...

  6. 前端之bootstrap模态框

    简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...

  7. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  8. bootstrap模态框传值操作

    1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

  9. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

随机推荐

  1. java实现面向对象和javaScript基于对象的区别&java垃圾回收机制和其他编程语言的比较

    java javaScript javaGC和C语言内存分配和内存释放

  2. Redis集群最佳实践

    今天我们来聊一聊Redis集群.先看看集群的特点,我对它的理解是要需要同时满足高可用性以及可扩展性,即任何时候对外的接口都要是基本可用的并具备一定的灾备能力,同时节点的数量能够根据业务量级的大小动态的 ...

  3. hadoop---前期准备---屌丝

    hadoop要求有多台机子进行后续的数据处理,作为屌丝一枚,怎么才能搭建一个合适的环境学习hadoop?这就是本篇将要介绍的----前期准备. 搭建环境没啥好说的,说一下搭建环境多需要的吧 硬件:电脑 ...

  4. Odoo 二次开发教程(三)-第一个Model及Form、Tree视图

    创建完我们的模块,接下来我们就要为我们的模块添加一些对象.今天我们将要创建一个学生对象(tech.student)和一些基本的属性,并将用form和tree视图将其展示出来: 一. 创建tech.st ...

  5. Python之路Day16--JavaScript(二)

    本节内容: 1.上节内容回顾 2.JavaScript补充 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ 一.上节内容回顾 1.作业问题: a.页面布局不好 ...

  6. nodejs 模块恩仇录

    anywhere 一句话:随时随地将你的当前目录变成一个静态文件服务器的根目录. 安装 npm install anywhere -g anywhere -h localhost -p 8060 fa ...

  7. CSS 使用母版页的内容页如何调用css和javascript

    方案一: 把所有的css样式和javascript函数放到母版页的<head></head>中,我觉得这样做的弊端就是导致母版页的<head></head&g ...

  8. STOMP协议介绍

    STOMP,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息 ...

  9. 剑指Offer面试题:33.二叉树的深度

    一.题目一:二叉树的深度 1.1 题目说明 题目一:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度.例如下图中的二叉树的 ...

  10. 作业六:团队项目——编写项目的Spec

    主要内容: 各组结合所选项目,编写项目的规格说明书(Spec),Spec应至少包含以下内容:(20分) 1. Spec的目标 2. 项目的典型用户和场景 3. 项目的用例模型 4. 项目中涉及到的术语 ...