原生js怎么编写插件组件？
原生js怎么编写插件组件？
小白一直想学习js面向对象，看了这么久还是蒙的，经常在用大牛插件或框架的时候会这么调用，如：
name:"liming",
width:200px,
min-height: 300px
没写出来得直接采用默认值小白请问如果是这种形式的调用，那插件的结构一般都是怎么写的？？才可以以这种形式调用？？因为我一般只会写这种最基础的function foo(a,b,b){...}调用就直接foo("aa","bb","cc")，如果另一个地方改动有点大就很不好复用
面向对象大概知道这种
function foo(a,b,b){
foo.prototype={
method:function(){},
var nfoo=new foo();
但只是知道这种写法，却还是不知道怎么实际来写一个函数并调用运行？谢谢解答
&&Javascript高级程序设计&&里面有具体讲解，基本原理如下，// 定义一个构造函数function Foo(para){
this.para =
}// 原型链上添加方法Foo.prototype.doSomething = function(){
console.log(this.name);
}// para就是初始化时设置的各种参数var foo = new Foo(para);foo.doSomething()
name:"liming",
width:200px,
min-height: 300px
}这一块主要用于初始化插件时 设置一些默认参数
参数是一个object类型
function Foo(param){
this.param=param
一般写插件的时候我们可能会设置默认值
var default_param={
name:'default name'
// 可以自行了解一下jquery extend的用法，或者自己写一个
function Foo(param){
this.param=$.extend({},default_param,param)
来来来可以看看这个，这个思路简单适合初学看啊弹出层
既然对面向对象比较懵……那么为什么不去看JS的基础书籍？一开始就看这些成熟的插件，当然会觉得摸不着头脑……
name:"liming",
width:200px,
min-height: 300px
对于你这个，首先，函数括号里面是个对象直接量，这句话其实就是它
name:"liming",
width:200px,
min-height: 300px
new foo(a);
这和普通的函数调用没啥区别。至于这种情况的类要怎么写……这得看你的需求啊，你需求是怎么样的，那就怎么写。
从基础看起吧！其实那些：new foo({a:'a',b:'b'})，还有采用默认值的，也没什么神奇的，就是只传一个参数进去，这个参数是一个json:
function Foo(json){
/*如果json.a不存在，那就将0赋值给this.a,这样就达到了采用默认值的结果*/
this.a=json.a||0,
this.b=json.b||0
再?嗦一点，面向对象的一个优点在于：专注。比如开发一个弹窗插件，把这个弹窗当成对象，那么这个弹窗具有：
弹窗窗口长度
弹窗窗口高度
一切对象之所以是对象，就是因为它存在自己的属性和方法，不然即使成为的对象也是白搭。
function _Alert(json){
/*假设下面这个是弹窗的窗口*/
this.win=document.getElementById('#demoWin');
this.w=json.w||200;
this.h=json.h||150;
this.content=json.content||'';
this.win.style.height=this.h+'px';
this.win.style.width=this.w+'px'
_Alert.prototype.open=function(){
//open code
_Alert.prototype.close=function(){
//close code
new _Alert({
content:'this is content'
希望对你的学习有所启发。。。
其实就是个函数，js里的函数也可以是定义对象
Copyright & 2016 phpStudy如何写一个Jquery 的Plugin插件 - Just Code - ITeye技术网站
博客分类：
Plugin插件，如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站：
好了，下面有一些我觉得想做一个好的插件必须应有的要求：
1、在JQuery命名空间下声明只声明一个单独的名称
2、接受options参数，以便控制插件的行为
3、暴露插件的默认设置 ，以便外面可以访问
4、适当地将子函数提供给外部访问调用
5、保持私有函数
6、支持元数据插件
下面将逐条地过一遍：
只声明一个单独的名称
这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件（像$.fn.doSomething()和$.undoSomething()），那么你可以根据要求声明多个名称。但一般情况下，力争用单一的名称来维持插件现实的所有细节。
在本例中，我们将声明一个叫“hilight”的名称
// 插件的定义
$.fn.hilight = function( options ){
// 这里就是插件的实现代码了...
然后我们可以像这样调用它：
$("divTest").hilight();
接受一个options参数，以便控件插件的行为
$.fn.hilight = function(options){
var defaults = {
foreground
background
//Extends out defaults options with those privided 扩展我们默认的设置
$.extend(defaults,options);
而我们可以这样使用它：
$('#myDiv').hilight({
foreground: 'blue'
暴露插件的默认设置 ，以便外面可以访问
作为插件的提升和优化，我们应该将上面的代码暴露出来作为插件的默认设置。
这非常重要，这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势：
$.fn.hilight = function(options){
//Extend our default options with those provided
//Note that the first arg to extend is an empty object
//this is to keep from overriding our "defaults" object
var opts = $.extend({},$.fn.hilight.defaults,options);
$.fn.hilight.defaults = {
foreground
background
这里值得注意的是$.extend()第一个参数是一个空的对象，这样可以让我们重写插件的默认设置
用户可以像这样使用插件：
// override plugin default foreground color
$.fn.hilight.defaults.foreground = 'blue';
// invoke plugin using new defaults
$('.hilightDiv').hilight();
// override default by passing options to plugin method
$('#green').hilight({
foreground: 'green'
适当地将子函数提供给外部访问调用
这个例子延续前面的例子，你会发现有一个有趣的方法可以扩展你的插件（然后还可以让其他人扩展你的插件 :)）。例如，我们在插件里声明了一个函数叫“format”用来高这显示文本，我们的插件实现代码可能是这样子的：
$.fn.hight = function(options){
//iterate and reformat each mached element
return this.each(function(){
var $this = $(this);
var markup = $this.html();
//call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
//define our format function
$.fn.hilight.format = function(txt){
return '&strong&' + txt + '&/strong&';
保持私有函数
暴露插件有部分内容提供重写看上去似乎非常强大，但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来，你就需要考虑这些变化点，一般情况下，如果你没有把握哪部分需要暴露出来，那么你可以不这样做。
那如何才能够定义更多的函数而不将其暴露出来呢？这个任务就交给闭包吧。为了证实，我们在插件中添加一个函数叫“debug”，这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包，我们将插件定义的整部分都包装起来：
//create closure
(function($){
//plugin definition
$.fn.hilight = function(options){
debug(this);
//private function for debuggin
function debug($obj){
if(window.console && window.console.log){
window.console.log('hilight selection count :' + $obj.size());
//end of closure
})(jQuery);
这样“debug”方法就不能被闭包这外调用了
支持元数据插件
依赖于所写的插件类型，并支持元数据插件会使得其本身更加强大。个人来讲，我喜欢元素据插件，因为它能让你分离标签中重写插件的配置
（这在写demo和示例时特别有用）。最重要的是，想现实它特别的容易！
$.fn.hilight = function(options){
//build main options before element interation
var opts = $.extend({},$.fn.hilight.defaults,options);
return this.each(function(){
var $this = $(this);
//build element specific options
var o = $.meta ? $.extend({},opts,$this.data()) :
//一般句话，搞定支持元数据 功能
几行的变化完成了以下几件事：
1、检测元数据是否已经配置
2、如果已配置，将配置属性与额外的元数据进行扩展
&div class="hilight { background: 'red', foreground: 'white' }"&
Have a nice day!这是元数据
&div class="hilight { foreground: 'orange' }"&
Have a nice day!在标签中配置
&div class="hilight { background: 'green' }"&
Have a nice day!
然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签：
$('.hilight').hilight();
最后，将全部代码放在一起：
//create closure
(function($){
// plugin definition
$.fn.hilight = function(options){
debug(this);
//build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
//iterate and reformat each matched element
return this.each(function(){
$this = $(this);
//build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) :
//update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
var markup = $this.html();
//call our format function
// private function for debugging
function debug($obj){
if(window.console && window.console.log){
window.console.log('hilight selection count: ' + $obj.size());
// define and expose our format function
$.fn.hilight.format = function(txt){
return '&strong&' + txt + '&/strong&';
// plugin defaults
$.fn.hilight.defaults = {
foreground
background
// end of clousure
})(jQuery);
如何写一个Jquery 的Plugin插件
最近做项目想要一个控制会计数字输入的jquery插件,找了好久找不到, 没用办法,只有自己操刀上阵了,其实要求也不高, 就是:
1. 默认是: 0.00
2. 只能输入数字和小数点, 其它输入将被忽略
3. 输入整数后继续自动保持两位小数
4. 可以定义自己想保留几位小数
OK, 开始动手:
首先, 通过将函数封装为jquery plugin包, 可以将这个包非常容易的在各种项目和页面中使用, 而且代码管理维护起来方便. 再说, jquery的plugin实现起来超简单,为什么不这么做呢?如果你是第一次开发, 先阅读下这篇文章吧:
一. Jquery Plugin 的基本框架
(function($) {
$.fn.extend({
MyPlugin: function(options) {
var defaults = {
decimal_length: 2,
var options = $.extend(defaults, options);
var len = parseInt(options['decimal_length']);
return this.each(function() {
alert('edison');
})(jQuery);
其中options就是参数, 调用方法为:
$('#ddd').MyPlugin({decimal_length:2});
好的, 我们接着完成要的功能: 文件名为 money.js
(function($) {
var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask";
$.fn.extend({
money_type: function(options) {
var defaults = {
decimal_length: 2,
var options = $.extend(defaults, options);
var len = parseInt(options['decimal_length']);
return this.each(function() {
var input = $(this);
function caret() {
var input_value = input.val();
var reCat = /\d+\.?\d{0,2}/i;
var_new_value = reCat.exec(input_value);
input.val(var_new_value);
input.bind("click", function(e) {
if (input.val() == '0.00') {
input.select();
.bind(pasteEventName, function() {
setTimeout(caret, 0);
})(jQuery);
OK, 插件完成, 在使用的时候要包含这个文件和jquery文件, 然后通过以下代码就可以调用了
$('#ddd').money_type();// 默认保留两位小数
浏览: 7946035 次
来自: 洛杉矶
写的非常好
还得引用tcpdf?
[url][img]引用[/img][/url]:
要是包含C1Calendar，内容就更完善了
实现客户端扫码登录分为下列四步：1. Web页面生成二维码生成 ...