⑴ 如何自定義組件
在你的項目中可以「添加新項」，在裡面選擇「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;
}
}
}