正文 

当前位置： 首页 > java > java教程

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

author author     2022-07-31     578

关键词：

/* 前言 */

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

　　

 

 

前端之旅webpack模块打包工具

一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Ajax、Axios、Bootstrap、Node.js、Vue、小程序开发（Uniapp）以及各种UI组件库、前端框架的学习。【前端之旅】Web基础与开发工具【前端之旅】手把... 查看详情

blazor学习之旅mudblazor组件库介绍

...解决这个问题！MudBlaozr是啥MudBlazor是一个基于Blazor的前端UI组件库，它可以 查看详情

五vue组件与props自定义属性(代码片段)

...维护。1.2、vue中的组件化开发vue是一个支持组件化开发的前端框架。vue中规定：组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。1.3、vue组件的三个组成部分每个.vue组件 查看详情

五vue组件与props自定义属性(代码片段)

...维护。1.2、vue中的组件化开发vue是一个支持组件化开发的前端框架。vue中规定：组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。1.3、vue组件的三个组成部分每个.vue组件 查看详情

前端笔记11：使用webcomponents进行原生组件化开发(代码片段)

...合成独立组件文件示例演示与说明示例一示例二总结目的前端开发中组件化开发是一种趋势，方便界面中各种自定义组件的管理与复用。现在流行的React和Vue等框架都是组件化开发的。目前前端原生也支持一定程度上的组件... 查看详情

常用的前端开发工具？开发过啥应用或组件？

...Raphael.js等。（理解这些框架的功能、性能、设计原理）前端开发工具：WebStorm,Hbuilder,SublimeText、Eclipse、Notepad、Firebug、HttpWatch、Yslow。开发过的插件：城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，... 查看详情

web前端面试高频考点——vue的高级特性（动态组件异步加载keep-alivemixinvuexvue-router）(代码片段)

系列文章目录文章目录系列文章目录一、Vue高级特性1、动态组件2、vue异步加载组件3、vue缓存组件（keep-alive）4、mixin二、Vuex1、Vuex基本概念2、用于Vue组件三、Vue-router1、动态路由2、懒加载一、Vue高级特性1、动态组件按... 查看详情

前端vue框架父组件与子组件之间的相互调用

子组件调用父组件东西： 　　1.在父组件与子组件契合的标签的的template模板中绑定v-bind:自定义一个名字=“要调用的名字” 　　2.在子组件的script中props:["自定义的名字"] 　　　　　最严谨的props: 　　　　　　自定义的名... 查看详情

十大常用web前端ui组件库，赶紧收藏

今天主要介绍web前端常用的UI库，这些网站基本都是背靠互联网大厂，值得web前端开发者收藏，当然还是要多多学习使用。Vant一款有赞出品轻量、可靠的的移动UI组件库，目前支持Vue2、Vue3、React，微信和支付... 查看详情

前端开发的模块化和组件化的定义，以及两者的关系

前端开发的模块化和组件化的定义，以及两者的关系模块化中的模块一般指的是Javascript模块，比如一个用来格式化时间的模块组件则包含了template、style和script，而它的Script可以由各种模块组成。比如一个显示时间的组件会调用... 查看详情

2022-06-16——在vue中更优雅的封装第三方组件

...，节省开发时间成本，免不了会使用ui组件库，比如在web前端很受欢迎的element-ui。但有的时候，我们需要在原组件的基础上做些改造，比如一个image组件，我们需要统一在图片加载失败的时候展示的特定图，每次使用组件都加一... 查看详情

avalon探索之旅

...on2是一款基于虚拟DOM与属性劫持的迷你、易用、高性能的前端MVVM框架，拥有超优秀的兼容性,支持移动开发,后端渲染,WEBComponent式组件开发,无需编译,开箱即用。官网：http://avalonjs.coding.me/《Avalon探索之旅》第一讲：认识Avalonhttp://... 查看详情

微信小程序入门与实战常用组件api开发技巧项目实战

...章什么是微信小程序？介绍小程序的特点与适用场景、对开发者的影响以及课程特色！七月老师小程序进阶课《纯正商业应用——微信小程序实战》与《微信小程序商城构建全栈应用》已上线，全面进阶小程序！第2章小程... 查看详情

基于angularjs的个推前端云组件探秘

 基于AngularJS的个推前端云组件探秘AngularJS是google设计和开发的一套前端开发框架，帮助开发人员简化前端开发的负担。AngularJS将帮助标准化的开发web应用结构并且提供了针对客户端应用的未来开发使用的模板，AngularJS非常全... 查看详情

web前端框架（javascript，css）html组件css规范与第三方库

1、什么是前端框架前端框架一般指用于简化网页设计的框架，使用广泛的前端开发套件，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮&#... 查看详情

微信小程序入门与实战常用组件api开发技巧项目实战

...章什么是微信小程序？介绍小程序的特点与适用场景、对开发者的影响以及课程特色！七月老师小程序进阶课《纯正商业应用——微信小程序实战》与《微信小程序商城构建全栈应用》已上线，全面进阶小程序！第2章小程序环... 查看详情

06-前端开发框架vue技术应用总结(代码片段)

文章目录VUE基础MVVM设计VUE绑定原理设计虚拟DOM树分析VUE编程步骤实践绑定与指令应用绑定样式分析(了解):计算属性应用实践生命周期函数应用Axios方式的Ajax请求Get请求Post请求VUE组件化开发组件设计基本步骤运行分析组件类型组... 查看详情

如何做好一个前端业务组件库(代码片段)

如何做好一个前端业务组件库前言业务组件库与基础组件库的区别技术选型打包文件格式babel配置项目结构依赖包处理package.json的问题webpack配置typescript配置文档配置文档编写单元测试组件化开发国际化（中英文切换）自... 查看详情