前端开发web组件之旅(一)-- 定义与加载组件

/* 前言 */

自上而下的 职责和API
应用层
框架层
框架
浏览器

一 组件定义与调用

1.增加一个组件

tabview.css
--------------------------------------------
.tabview_menu{xxxxx};
.tabview_content{xxxxx};

  

tabview.js
----------------------------------
        var abc =5;
        function TabView(cfg){
                  this.a = cfg.a;
                  this.b = cfg.b;
}    

      TabView.prototype = {
                 c: function(){ abc++;},
                 d: function(){ abc--;}
}

 

2.引用一个组件 

  <link type="text/css" rel="stylesheet" href="css/tabview.css" >
  <script  type="text/javascript" src="js/tabview.js" ></script>
   <script type="text/javascript">
     (function(){
           var tabview = new TabView();
})()
  </script>

 

3.CSS命名空间和js匿名空间

treeview.css
----------------------------------
.treeview_menu{xxxx}
.treeview_content{xxxx}
/**Js通过匿名空间隔开公有私有,通过匿名函数形成域,把对象挂载到window上暴露出来接口/*window.TabView = TabView  //闭包的经典应用

**/
tabview.js
------------------------------------
(function() {
     var abc = 5;
     function TabView(cfg){
             this.a = cfg.a;
             this.b = cfg.b;
  }
    TabView.prototype = {
            c: function(){ abc++},
            d: function(){abc--;}
    }
        window.TabView = TabView;
})();

  

4.基于require.js重写代码

animate.js
----------------------------------
define(function(){
   function Animate(){};
   return {Animate: Animate};
});

  

treeview.js
----------------------------------------
define(function(){
         function TreeView(){};
         return {TreeView:TreeView};
});

  

tabview.js
----------------------------
define([ ‘animate‘ ],function(a){
      function TabView(){
              this.animate = new a.Animate();
};
return {TabView: TabView};
});

  

main.js
-------------------------------------
require ([  ‘tabview‘ ,‘ treeview‘ ],function(tab,tree){
               var tabView = new tab.TabView(),
                     treeView = new tree.TreeView();
});

  

 

 

时间: 2024-10-07 16:52:17

前端开发web组件之旅(一)-- 定义与加载组件的相关文章

webpack入坑之旅(五)加载vue单文件组件

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 需要什么? 在经过前面的四

Android Demo之旅 ListView底部添加加载更多按钮实现数据分页

在我们的实际项目中,数据应该说是很多的,我们的ListView不可能一下子把数据全部加载进来,我们可以当滚动条滚动到ListView的底部的时候,给一个更多的提示,当我们点击它即加载下一页的数据,相当与我们的分页效果,参考网上的东西,写了一个小小的demo,并总结了一些知识点,功能图如下:    源代码下载地址:http://download.csdn.net/detail/harderxin/7762625 掌握知识点: 1)自定义Adapter,将数据和ListView绑定起来 2)理解La

webpack和vue的按需加载组件、console、抓包

1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被import()替换. const Recommend = (resolve) => { import('components/recommend/recommend').then((module) => { resolve(module) }) } export default new Router(

java web.xml listener servlet 和filter的加载顺序

在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是,加载顺序与它们在 web.xml 文件中的先后顺序无关.即不会因为 filter 写在 listener 的前面而会先加载 filter. 最终得出的结论是:listener -> filter -> servlet 同时还存在着这样一种配置节:context-param,它用于向 Servle

利用简洁的图片预加载组件提升h5移动页面的用户体验

在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题.虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影

web.xml之context-param,listener,filter,servlet加载顺序及其周边

先以加载spring为例子看看加载顺序的作用: Spring加载可以利用ServletContextListener 实现,也可以采用load-on-startup Servlet 实现,但比如filter 需要用到 bean ,但加载顺序是: 先加载filter 后加载spring,则filter中初始化操作中的bean为null:所以,如果过滤器中要使用到 bean,此时就可以根据加载顺序listener>filter>servlet,将spring 的加载 改成 Listener的方式.

jQuery.imgLazyLoad图片懒加载组件

一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad:使用该组件应在img标签中设置一个imglazyload-src属性,存放图片地址. 二.应用实例demo /** * component: imgLazyLoad 2013/12/12 华子yjh * invoking: jQuery.imgLazyLoad(

Fresco一种超强图片加载组件初体验

Fresco来自Facebook开源的一个超强图片加载组件,项目体验地址:https://github.com/facebook/fresco 在公司开发应用的时候由于应用中肯定会涉及到图片加载,我们就要考虑到OOM以及内存占用问题,所以我们基本上都是用来自第三方开源的图片下载库:Universalimageloader,picasso,glide,volley等优秀的开源库,苦于自己无力写出更优秀的所以我一直在寻找一种更优秀的库,直到我遇到了Fresco.所以这里记录一些我是如何在Androi

VS2013 此模板尝试加载组件程序集”NuGet.VisualStudio.interop,Version=1.0.0.0 的解决办法 ZT

情景再现 使用VS2013新建ASP.NET MVC项目时,出现下面的错误: 具体错误信息: 错误: 此模板尝试加载组件程序集 “NuGet.VisualStudio.Interop, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”.有关此问题和如何启用此模板的详细信息,请参见有关“自定义项目模板”的文档. 分析错误 既然错误信息提示模板尝试加载组件程序集,那说明NuGet.VisualStudio.Inter