/* 前言 */

自上而下的 职责和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. typeof和instanceof 运算符

    instanceof运算符与typeof运算符相似,用于识别正在处理的对象的类型,但是在使用 typeof 运算符时采用引用类型存储值会出现一个问题. 无论引用的是什么类型的对象,它都返回 " ...

  2. Java中的三目运算符 详解

    对于有些选择分支结构,可以使用简单的条件运算符来代替. 如: if(a<b)    min=a;else    min=b; 可以用下面的条件运算符来处理 min=(a<b)?a:b; 其 ...

  3. MySQL linux二进制安装

    200 ? "200px" : this.width)!important;} --> 介绍 1.创建用户和目录 groupadd mysql useradd -r -g m ...

  4. 调试postgresql9.5.2最新源码

    最近在考量数据库的选型,考虑后期把数据切换到postgresql ,postgresql源码用c实现,代码很精炼完美,值得学习下 首先去pgsql官网下载最新的源码 ,然后还需要perl,bison ...

  5. pod 命令-bash: --: command not found

    pod 命令-bash: --: command not found 升级完系统执行 pod update 或者 pod install命令的时候出现: -bash: --: command not ...

  6. 纯IPv6环境App适配的坑

    来源:伯乐在线专栏作者 - MrPeak 链接:http://ios.jobbole.com/86580/ 苹果从2016年6月1号开始,强制所有app必须支持纯IPv6的网络环境.这项举措将对IPv ...

  7. Elasticsearch .Net Client NEST使用说明 2.x

    Elasticsearch .net client NEST使用说明 2.x Elasticsearch.Net与NEST是Elasticsearch为C#提供的一套客户端驱动,方便C#调用Elast ...

  8. enable cors in spring mvc with swagger

    a. In controller add @CrossOrigin(origins = "http://localhost:8080") b. In mvc-servlet.xml ...

  9. HIdernate入门

    简介: Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. Hibernate可以应用在任何使 ...

  10. 第三天关于网页sip的学习。平台win7 64位 freeSwitch jssip架构web网络电话

    上次我们出现了一种问题就是,当我们采用iis架构出jssipweb端的时候,我们无法注册freeswitch的电话.. 我们用别的客户端已经成功能够互通电话,可以录音,唯独使用jssip架构的web端 ...