精华内容
下载资源
问答
  • web组件化开发第一天

    2017-02-24 23:08:00
    web组件化开发第一天 技术选型 html5 css3 jq 应用的插件 FullPage.js 一、建一个测试页面,测试静态的功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8...

     

    技术选型

    html5 css3 jq

    应用的插件

    FullPage.js

    一、建一个测试页面,测试静态的功能

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    
        <title>慕课网2015课程学习情况</title>
        <style>
            body{
                margin:0;
                padding:0;
            }
            .component{
                width: 50%;
                height:50px;
                margin-bottom:20px;
                background-color: red;
                display: none;
            }
        </style>
    
        <body>
        <!-- 用于验证 fullpage.js 切换页面,以及内容组织结构可用,组件能够进行动画 -->
    
            <div id="h5">
      <!-- 给每个需要翻页的页面添加section类 给定不同的ID -->
                <div class="page section" id="page-1">
                    <div class="component">logo</div>
                    <div class="component slogan">slogan</div>
                </div>
                <div class="page section" id="page-2">
                    <div class="component">logo</div>
                    <div class="component slogan">slogan</div>
                </div>
                <div class="page section" id="page-3">
                    <div class="component">logo</div>
                    <div class="component slogan">slogan</div>
                </div>
            </div>
    
        </body>
    
    </html>

     

     

    二、首先载入fullpage.js

       <script type="text/javascript" src="../js/lib/jquery.js"></script>
        <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>

    三、测试功能是否完好。

    $(function (){
                $('#h5').fullpage({
                        //传入背景色 sectionsColor 后面接对象。
                        'sectionsColor': ['#254875', '#00ff00', '#245874'],
                        /*
                        * 传入回掉函数 onLeave afterLoad
                        * afterLoad
                        * 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,
                        * anchorLink 是锚链接的名称,index 是序号,从1开始计算
                        * onLeave
                        * 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:
                        * index 是离开的“页面”的序号,从1开始计算;
                        * nextIndex 是滚动到的“页面”的序号,从1开始计算;
                        * direction 判断往上滚动还是往下滚动,值是 up 或 down。
                        * */
                        onLeave: function (index, nextIndex, direction) {
                            //让page执行onLeave事件。
                            $('#h5').find('.page').eq(index-1).trigger('onLeave');
                        },
                        afterLoad: function (anchorLink, index) {
                            //让page执行onLoad事件。
                            $('#h5').find('.page').eq(index-1).trigger('onLoad');
    
                        },
    
                    });
                 //给page页面绑定onLeave事件。
                $('.page').on('onLeave',function () {
                    console.log($(this).attr('id'),'====>','onleave');
                    //让component执行onLeave事件。
                    $(this).find('.component').trigger('onLeave');
                })
                //给page页面绑定onLoad事件。
                $('.page').on('onLoad',function () {
                    console.log($(this).attr('id'),'====>','onLoad');
                    //让component执行onLoad事件。
                    $(this).find('.component').trigger('onLoad');
                })
                //给component页面绑定onLoad事件。
                $('.component').on('onLoad',function () {
                    $(this).fadeIn();
                    //防止事件冒泡。循环传播。
                    return false;
                })
                //给component页面绑定onLeave事件。
                $('.component').on('onLeave',function () {
                    $(this).fadeOut();
                    return false;
                })
    
    
            });

     

    posted on 2017-02-24 23:08 Viven张 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/vivenZ/p/6440663.html

    展开全文
  • java web 组件化开发?

    2008-07-15 14:03:11
    页面组件化,逻辑组件化,业务组件化,数据组件化,按一定的规律组合各种组件以期达到客户需求。 是个很美好的愿景。 对比一下.net和flex以及对应的...java web组件化开发又在哪里? 看好dojo,看好jsf。 ...
    页面组件化,逻辑组件化,业务组件化,数据组件化,按一定的规律组合各种组件以期达到客户需求。

    是个很美好的愿景。

    对比一下.net和flex以及对应的IDE:vs.net和flex builder

    java web组件化开发又在哪里?

    看好dojo,看好jsf。
    展开全文
  • <br />JEE中间件SSH,EJB(初步组件化思想,不是以服务组件为出发点) 前端UI组件化dojo,ext,jquery,DHtml(后端仍很混乱) JSF(技术难度高,数据绑定不灵活,页面与UI未分离) Spring DS(OSGI)(不...

    JEE中间件SSH,EJB(初步组件化思想,不是以服务组件为出发点)

    前端UI组件化dojo,ext,jquery,DHtml(后端仍很混乱)

    JSF(技术难度高,数据绑定不灵活,页面与UI未分离)

    Spring DS(OSGI)(不利于与其他中间件集成,难于和eclipse工具集成)

    Equinox httpService(OSGI)(扩展性强,易于与Eclipse集成),比如:开源OpenCore框架http://code.google.com/p/lintkalk

    展开全文
  • WebOSGi开发框架,旨在在解决传统Java EE web应用的功能耦合紧密、代码重用困难、功能组件动态热插拔等问题, 为大规模Web应用的持续开发和实施提供统一的、标准化、坚固的组件化开发、运行、组件依赖及版本管理、...
      WebOSGi开发框架,旨在在解决传统Java EE web应用的功能耦合紧密、代码重用困难、功能组件动态热插拔等问题, 为大规模Web应用的持续开发和实施提供统一的、标准化、坚固的组件化开发、运行、组件依赖及版本管理、开发文档获取的平台。在WebOSGi的基础上,可以开发大量的业务组件,互相依赖服务(api, web servie, resoueces),协同工作。同时,同样基于OSGi规范的eclipse swordfish项目,可以与此框架无缝集成,实现组件服务的SOA化部署,推动企业ESB服务器总线体系的建立。  WebOSGi实现的大概原理为:基于OSGi组件化开发规范,将普通java应用中的OSGi应用,扩展到Web开发领域中,实现将传统web工程中的各种资源,比如serlvet、jsp、html、jsp tags、images、css等各种资源,封装套独立的组件jar文件中,使其最终在OSGi运行时中,作为一个独立且可以互相api直接调用、Web Service调用的子web应用。这样,一个大型网站被分解为若干个业务资源封闭的小web应用,协同运行于整个网站之下,每个享有独立的ServletContext和各种内部jar库, 同时相互之间可以直接的API调用,互相调用OSGi service和扩展点。      其主要优点如下:  
      对普通Java EE开发习惯没有改变。
      架构设计中,尽可能的做到了不改变现有Java EE开发者习惯的开发模式,将大量的框架整合操作,集成在底层和工具支持中。所以,大大降低了普通Java EE开发者学习适应成本。
      方便的将大型Java EE应用按照功能和界面,拆分中相互依赖的组件,实现代码和资源最大程度的沉淀和复用。
      组件动态更新和热插拔机制。
      可以与eclipse开源swordfish项目无缝集成,实现基于SOA的企业服务器总线架构(ESB)的大型Web项目组件化开发部署。
      统一的组件管理控制台console支持:启动、停止、更新等组件生命周期管理和执行扩展命令。
      基于jsp tag的扩展框架,提供快速的发布UI界面封装的开发体系。运行在组件中,将包含业务的UI块封装为单一的tag。;
      统一的多语言、静态信息国际化支持体系。
      采用OSGi/Equinox实现采用上一节第二中方式,将OSGi容器集成于普通的JEE Server中。在OSGi容器中,实现对Web组件中资源的解析和对外界Http请求的调度,使得Web组件开发和普通JEE卡发没有区别不大
    展开全文
  •  2虽然已经有SSH,Ejb, jsf等中间件(初步的组件化思想),但存在以下不足:?没有实现业务和资源的组件化。?没有解决组件和jar包的依赖冲突问题(maven不完善)。?未规范服务组件的服务接口规范,版本依赖规范。...
  • 采用OSGi/Equinox实现采用上一节第二中方式,将OSGi容器集成于普通的JEE Server中。在OSGi容器中,实现对Web组件中资源的解析和对外界Http请求的调度,使得Web组件开发和普通JEE卡发没有区别不大
  • Web前端工程化与组件化开发实践
  • Web应用的组件化开发

    2019-09-16 12:21:42
    1. 为什么要做组件化?  无论前端也好,后端也好,都是整个软件体系的一部分。软件产品也是产品,它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途径来优化...
  • Web Component 是一种 W3C标准支持的组件化方案,通过它可以编写可复用的组件,同时也可以对自己的组件做更精细化的控制。更牛的是,Web Component可以在任何一种框...
  • Vue组件化开发

    2019-12-02 18:16:35
    Vue组件化开发 组件化开发思想 1.现实中的组件开发思想体现 2.编程中的组件化思想体现 3.组件化规范: Web Components 我们希望尽可能多的重用代码 自定义组件的方式不太容易 (html, css 和 js) 多次使用组件可能...
  • WEB组件化

    千次阅读 2013-12-09 13:47:38
    1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分。软件产品也是产品,它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途径来优化:...
  • Web应用的组件化开发(二)

    千次阅读 2017-05-27 20:32:43
    在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段去管控整个开发过程。从各种角度看,面对较大规模前端开发团队,都有必要建立这么一个开发阶段的协作平台。 在这个平台上...
  • Web应用的组件化开发(一)

    千次阅读 2017-05-27 20:28:39
    1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分。软件产品也是产品,它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途径来优化:...
  • Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分。软件产品也是产品,它的研发过程也必然是有其目的。绝大多数软件产品是追逐利润...
  • 展示厅:Web组件的通用开发和自动测试环境 安装 npm install -g showroom 在项目中创建.showroom文件夹,为Web组件添加描述符文件(请参阅)。 运行陈列室,看看魔术。 观看 支持: 任何堆栈:Polymer,...
  • Vue之组件化开发

    2021-03-21 21:35:39
    一、组件化开发思想 一块一块的,标准,分治,重用,组合; 跟之前的布局思想差不多吧,页面是一个一个盒子组成的,然后这个盒子的代码单独去写 组件化规范:Web Components但是有浏览器兼容问题;Web Components...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,210
精华内容 2,084
关键字:

web组件化开发