html代码用js实现复用

作为前端开发人员,大家都会碰到的一个问题就是重复的代码怎么处理,如果总是复制粘贴,会使得代码显得非常的庞大,不易读。虽然有一些语言如node.js可以模块化管理,但是用js或者jquery实现既简单又可以面对其他环境搭建的时间。

假如有一段html代码,我需要在多个页面使用,那就来实现以下:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>Document</title>
         <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
         <style>
            .asd{

                border:1px solid #ccc;
            }
            .sss{
                color:red;
                border:1px solid pink;
                float:left;
            }
            .ddd{
                color:blue;
            }
        
         </style>
    </head>
    <body>
        <div class="asd">
            我是原来的内容!
        </div>
    </body>
    <script>
        var a="";    //存取一个变量a
         a += ‘<div class="sss">‘+‘<a href="javascript:;" class="ddd">我是一个连接!</a>‘+‘<p>我是新插进来的!</p>‘+‘</div>‘;
        var  xx="";    //存取一个变量xx,我在这里自己假定了需要应用十次
        for(var  i=0;i<10;i++)
        {
         xx+=a;
        }

        $("div").html(xx);

    </script>
    </html>

其实代码很简单;我们做了几件事:

1,首先存一个变量a;

2,我们需要js拼接出我们的html代码,并将其作为一个变量赋值给a;

3,用for循环实现多次的引用;

时间: 2024-10-14 12:46:53

html代码用js实现复用的相关文章

分享一款jquery+css3实现的手风琴效果代码【js插件】

代码适用于大部分浏览器 演示Demo地址:请猛戳 效果图片 程序吧下载地址 分享一款jquery+css3实现的手风琴效果代码[js插件],布布扣,bubuko.com

一个只有99行代码的JS流程框架(二)

张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架. 导语 前面写了一篇文章,叫<一个只有99行代码的JS流程框架>,虽然该框架基本已经能实现一个流程正常的逻辑流转,但是在分模块应用下还是缺少一定的能力,无法将一个页面中的不同模块很好的连接在一起,于是对之前的框架进行了升级,新增了子流程的概念. 子流程 什么是子流程?在这个升级后的框架里(当然代码已经不止99行了,不要在乎标题),每个步骤不但可以是一个function,还可以引用另一个流程,这个被引

Google Analytics统计代码GA.JS中文教程

2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅 今天我们讲一讲Google Analytics新统计代码GA.JS,关于GA.JS脚本在这里跟大家深入浅出地进行探讨和学习.代码示例: 12345678910 <script type=”text/javascript”>var gaJsHost = ((”https:” == document.location.protocol) ?

Vue.js的复用组件开发流程

本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表. 首先看看quiList.vue //quiList.vue <template> <div class="qui-list"> &

百度搜索下拉框提示代码 opensug.js

opensug ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有"搜索框提示"功能的百度搜索框. HTML代码: <form action="http://www.baidu.com/baidu" target="_blank"> <table bgcolor="#FFFFFF"><tr><td>

30 行代码实现 JS 中的 MVC

一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁.但不论如何,MVC已经并将持续深刻地影响前端工程师们的思维方式和工作方法. 很多讲解MVC的例子都从一个具体的框架的某个概念入手,比如Backbone的collection或AngularJS中model,这当然不失为一个好办法.但框架之所以是框架,而不是类库(jQuery)或者工具集(Underscore),就是因为它们的背后有着众多优秀的设计理念和最佳实

网页中最常用的JS代码(js禁止右键、禁止复制,设为首页,加入收藏代码)

<body oncontextmenu=”return false”></body> <!– 禁用右键: –> <script> function stop(){ return false; } document.oncontextmenu=stop; </script> <body onselectstart=”return false”> 取消选取.防止复制 oncopy=”return false;” oncut=”return

JS可复用的多条件筛选插件

这是最近公司的一个系统需要用到的筛选功能,为了方便日后维护迭代升级,功能的增加,我写了一个插件,支持自定义模块.自定义默认显示几行,超出后出现更多按钮以及是否显示确定按钮, 不管一个页面中有多少个筛选模块,都可复用,只需要后台传给json数据,操作后通过回调函数实时返给后台同样的数据格式,以达到数据.表现.操作的分离. 这个插件使用非常方便,支持自定义模块.自定义默认显示几行,超出后出现更多按钮以及是否显示确定按钮等等功能. 下面直接上代码: * @Author:虾兵  @Blog:http:/

4行代码实现js模板引擎

在平时编码中,经常要做拼接字符串的工作,如把json数据用HTML展示出来,以往字符串拼接与逻辑混在在一起会让代码晦涩不堪,加大了多人协作与维护的成本.而采用前端模板机制就能很好的解决这个问题. 精妙的 tmpl 前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 “javascript micro templating” 最为精妙,寥寥几笔便实现了模板引擎核心功能. 它的介绍与使用方式请看作者博客:http://ejohn.org/blog/javascript-m