/* 前言 */

自上而下的 职责和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();
});

  

 

 

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

  1. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  2. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

  3. 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)

    | 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...

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

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  5. C# 动态加载组件后怎么在开发环境中调试

    动态加载组件 那就是简单的Assembly.Load动态加载dll而以.这网上资料也有不少.基本的思路基本上就是在本地上一个指定目录如[plugs]存在着一堆dll文件.主程序在初始运行时一般会把指定 ...

  6. 带加载进度的Web图片懒加载组件Lazyload

    在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...

  7. nf-Press —— 在线文档也可以加载组件和编写代码

    如果帮助文档可以加载组件,那么在介绍的同时就可以运行演示demo,是不是很酷? 如果可以在线修改运行代码,那么是不是更容易理解? 上一篇 https://www.cnblogs.com/jyk/p/1 ...

  8. 【记录】VS2012新建MVC3/MVC4项目时,报:此模板尝试加载组件程序集“NuGet.VisualStudio.Interop...”

    最近电脑装了 VisualStudio "14" CTP,由于把其他版本的 VS 卸掉,由高到低版本安装,当时安装完 VisualStudio "14" CTP ...

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

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

随机推荐

  1. svn 被锁定

    遇到svn被锁定,clearup 不管用一直报错 用命令行解决了 问题 : command line -> cmd>svn help>svn cleanup>exit

  2. oracle3

    查看表结构 DESC emp; 查询所有列 SELECT * FROM dept; 切忌动不动就用select * set timing on; 打开显示操作时间的开关,在下面显示查询时间. CREA ...

  3. 构建tcpdump/wireshark pcap文件

      pcap文件格式是bpf保存原始数据包的格式,很多软件都在使用,比如tcpdump.wireshark等等,了解pcap格式可以加深对原始数据包的了解,自己也可以手工构造任意的数据包进行测试. p ...

  4. 启动hadoop,报错Error JAVA_HOME is not set and could not be found

    报如错误:JAVA_HOME is not set and could not be found,可能是因为JAVA_HOME环境没配置正确,还有一种情况是即使各结点都正确地配置了JAVA_HOME, ...

  5. 【转】cocos2d-x学习笔记03:绘制基本图元

    第一部分:基本图形绘制 cocos2dx封装了大量opengl函数,用于快速绘制基本图形,这些代码的例子在,tests\DrawPrimitivesTest目录下 注意,该方法是重载node的draw ...

  6. java 对象的this使用 java方法中参数传递特性 方法的递归

    一.this关键字,使用的情形,以及如何使用. 1.使用的情形 类中的方法体中使用this  --初始化该对象 类的构造器中使用this --引用,调用该方法的对象 2.不写this,调用 只要方法或 ...

  7. hdu2011java

    多项式求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  8. Java基础知识强化之IO流笔记28:BufferedOutputStream / BufferedInputStream(字节缓冲区流) 之BufferedOutputStream写出数据

    1. BufferedOutputStream / BufferedInputStream(字节缓冲区流)的概述 通过定义数组的方式确实比以前一次读取一个字节的方式快很多,所以,看来有一个缓冲区还是非 ...

  9. CSS hack常用方案(摘选)

    邮箱因为默认了line-height?:170%,导致采用table元素时继承问题,可以采用line-height:50% 很好解决. 常 在使用float时,后面的显示不正常,因为继承了float了 ...

  10. 一个小时成功安装SQL Server 2012图解教程

    在安装微软最新数据库SQL Server 2012之前,编者先确定一下安装环境:Windonws 7 SP1,32位操作系统.CPU是2.1GHz赛扬双核T3500,内存2.93GB. 安装SQL S ...