⑴ 如何自定义组件
在你的项目中可以“添加新项”，在里面选择“web自定义控件”，输入自己定义的名字就可以创建了。功能自己写代码。下面是我的一个控件页面代码：（网页头部）
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ADTop.ascx.cs" Inherits="mycontrol_ADTop" %>
<div class="bigtable ad1">
<div class="ad11">
</div>
<div class="ad12">
<img src="/images/ad_06.jpg" class="left mleft" />
<div class="adguide left">
<a href="/Default.aspx" target="_blank">首页</a>
<a href="/Html/AD/9" target="_blank">广告服务</a>
<a href="/Html/Intro/8" target="_blank">企业建站</a>
<a href="/Html/Channels/UserService" target="_blank">会员服务</a>
<a href="/Html/Help/18" target="_blank">帮助中心</a>
</div>
<img src="/images/ad_09.jpg" class="right" />
</div>
</div>
⑵ js前端组件是怎么封装的
JS即使封装了，你也是可以看得到的。JS运行于客户端，只要能看得到就能下载得到。只是一般都会做一些混淆处理罢了。
要知道是如何封装的，你首先要弄明白啥叫面向对象编程。不知道这个，就不知道如何封装一段代码。
⑶ 如何写一个前端组件
这个插件具体是干什么，哪一层例如中间件，一般都是假设一个请求过去，在这个过程中会有无数的handle，这个传递的对象是什么样的，怎么去处理这个过程中的数据，这个是中间件插件则有很多，UI插件，数据插件等如果要准备插件首先是数据接口规范，然后是API规范，例如jquery的扩展方法，或者angularjs的指令，这些都是API规范还有core，这个就像amd规范之类的如果楼主是指大型架构，我建议可以参考下android的概要架构图来理解，其实原理类似的。想学这门知识的话，你可以去后盾人平台上看一下的，里面还有视频教学，通通高质量的，我自己也是在里面学习。
⑷ 如何使用自己定义的组件
如果是另外一个项目里面可以在工具箱-〉右键（添加/移除选项卡）中添加近来，如果在同一工程下面可以在工具箱-〉我的工具控件里面找到
⑸ web前端组件怎么实现
模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，
更比如 ，一个页面 分好多个功能， 这时候你要是都写在一个js 中 会越来越大，
而你把他分成不同的模块，
比如评论是一块
分页又是一块，
已经上线，或你不做了，后期别人拉手，或你接手别人的项目， 这时候来个需求让你把分页去掉，或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的，
组件，更想当于一个通用的东西，有的分功能组件，有的分业务组件
大图切换，这种就是单纯的一个效果展示，只要调用就ok
一个分页，也是只单纯的调用，
组件更是一个多处都可以使用 ，不需要再单独开发的
⑹ 在前端中什么是组件化 什么是模块化
模块化更一种开发规范，比如cmd amd 是为了更好的解藕，比如一个网站，按照不同的模块来开发，比如你有个评论区，a 项目有，b 项目有，如果仅是单纯的模块开发，这个js 文件你就可以单独来回引用，
更比如 ，一个页面 分好多个功能， 这时候你要是都写在一个js 中 会越来越大，
而你把他分成不同的模块，
比如评论是一块
分页又是一块，
已经上线，或你不做了，后期别人拉手，或你接手别人的项目， 这时候来个需求让你把分页去掉，或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的，
组件，更想当于一个通用的东西，有的分功能组件，有的分业务组件
大图切换，这种就是单纯的一个效果展示，只要调用就ok
一个分页，也是只单纯的调用，
组件更是一个多处都可以使用 ，不需要再单独开发的
⑺ 前端设计JS
理论上是可以自定义的，不过还要在解析的时候要一致了，也就是说如果你改这里，在解析这个JS变量时，也要把相应的变量改一下的。
⑻ 如何理解前端模块化
前端模块化
在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀
这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（mole）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
模块
既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可
import java.util.ArrayList;
遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。
一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了
规范形成的过程是痛苦的，前端的先驱在刀耕火种、茹毛饮血的阶段开始，发展到现在初具规模，简单了解一下这段不凡的历程
函数封装
我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了
function fn1(){
statement
}
function fn2(){
statement
}
这样在需要的以后夹在函数所在文件，调用函数就可以了
这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。
对象
为了解决上面问题，对象的写法应运而生，可以把所有的模块成员封装在一个对象中
var myMole = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
这样我们在希望调用模块的时候引用对应文件，然后
myMole.fn2();
这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系
看似不错的解决方案，但是也有缺陷，外部可以随意修改内部成员
myModel.var1 = 100;
这样就会产生意外的安全问题
立即执行函数
可以通过立即执行函数，来达到隐藏细节的目的
var myMole = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
这样在模块外部无法修改我们没有暴露出来的变量、函数
上述做法就是我们模块化的基础，目前，通行的JavaScript模块规范主要有两种：CommonJS和AMD
CommonJS
我们先从CommonJS谈起，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。
定义模块
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块输出：
模块只有一个出口，mole.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块：
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的mole.exports对象
⑼ jQueryUI如何自定义组件
如何开始使用 首先用$.widget()方法开始定义你的组件，它只接收三个参数：第一个是组件名称，第二个是可选的基类组件（默认的基类是$.Widget），第三个是组件的原型。组件名称必须包含命名空间，要注意的是，官方组件的命名空间是以‘ui’开头的，比如:‘ui.tabs’。我在下面的用‘我’的拼音(‘wo’)。 $.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype) $.Widget基类含有一个重要的属性‘options’，它用来定义公有参数，组件初始化时外部调用的参数会覆盖内部定义的参数；以及三个重要的私有的方法‘_create’、‘_init’、‘’，前两个相当于构造函数的作用，按顺序执行，_create()方法执行之后会触发'create'事件。 _trigger()方法会将参数中的指定函数标准化为W3C事件，并且触发这个自定义事件。 另外还有三个公有方法‘enable’，‘disable’，‘destroy’，分别表示启用、禁用和销毁组件。 这里很有意思的，是私有方法和公有方法的实现。jQuerUI Widget暴露的方法都是不以‘_’开头的： // prevent calls to internal methods if ( isMethodCall && options.charAt( 0 ) === "_" ) { return returnValue; } 实际上，jQueryUI Widget还是保留了原始的API，比如这样使用： var $div = $('.demo:first'); var api = $div.data('divZoom'); // console.dir(api); api.zoomIn(); // 对比 $div.divZoom('zoomIn'); 一个实现完全私有变量的小技巧： (function($) { var privateVar = ''; $.widget(wo.divZoom,{}); })(jQuery) 所有代码 /* * @by ambar * @create 2010-10-20 * @update 2010-10-25 */ (function($) { var html = '<div class="icon-zoom">\ <span title="zoom in" class="zoom-in">zoom in</span>\ <span title="zoom out" class="zoom-out">zoom out</span>\ </div>'; $.widget("wo.divZoom",{ _init : function() { var self = this, opt = self.options, tgt = opt.target, $el = self.element ; // 初始一次 if($('div.icon-zoom',$el).length) return; $el.append(html); self.target = ( tgt == '' ? $el : $el.find(tgt) ); // 检测初始值 var level = self.target.attr(opt.dataPrefix); self.target.attr(opt.dataPrefix,level || opt.level[0]); self.btnZoomIn = $el.find('span.zoom-in').click( $.proxy(self.zoomIn,self) ); self.btnZoomOut = $el.find('span.zoom-out').click( $.proxy(self.zoomOut,self) ); }, destroy : function(){ this.element.find('div.icon-zoom').remove(); }, options : { level : [120,160,200], target : '', speed : 'normal', dataPrefix : 'data-zoom-level', zooming : null, select : null, show : null }, currentLevel : function(){ var self = this, opt = self.options, lvl = Number(self.target.attr(opt.dataPrefix)); return $.inArray(lvl,opt.level); }, zoomIn : function() { this.zoom(this.currentLevel() + 1); }, zoomOut : function() { this.zoom(this.currentLevel() - 1); }, zoom : function(i){ var self = this, opt = self.options,lvls = opt.level,$tgt = self.target; if( i<=-1 || i>=lvls.length ) return; var value = lvls[i], originalValue = lvls[self.currentLevel()], style = { width:value, height:value }; var data = { target : $tgt, css : style, originalCss : {width:originalValue,height:originalValue} }; var goon = self._trigger('start',null,data); if(!goon) return; $tgt.animate(style, { ration : opt.speed, step : function(val) { var css = { width:val, height:val }; self._trigger('zooming',null,$.extend({},data,{css:css})); }, complete : function(){ $tgt.attr(opt.dataPrefix,value); self._trigger('stop',null,data); } }); } }); })(jQuery) 在页面上调用 <script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery.ui.widget.js"></script> <!-- 自定义的 --> <script src="js/jquery.ui.wo.divZoom.js"></script> <script type="text/javascript"> $(function() { $('div.demo').divZoom({ target : '>a', level : [80,120,160,200], zooming : function(e,ui){ // console.log(e,ui.css); }, start : function(e,ui){ console.log('开始',this,e.type,ui); }, stop : function(e,ui) { console.log('结束',ui.css); } }); }); </script> 示例：/Files/ambar/demos/divZoom/demo.htmTag标签: jquery,jqueryui,widget,class [jquery]Web 前端设计模式--Dom重构... (佚名，10-28)
⑽ vue.js中自定义组件使用时，定义了两个内容，<span>和<button>，在显示的时候只能显示其中的一个。
<button @click='onclick'></button>
<div>
<mycomponent v-if='showcom'></mycomponent>
</div>
{
data: {
showcom: false
}
methods: {
onclick: function () {
this.showcom = true;
}
}
}