1. 如何用javascript写个插件
开发插件 其实说白了 插件里面就是一个或多个函数的组合 你只需要将一些能实现某些功能的代码做成函数 然后将这些函数全部放在一个js文件里面 到需要用的时候 直接调用这个js文件 他里面的方法 就可以直接进行调用了 像现在流行的jquery 就是里面定义了许多的方法 就比如: function aa(){ //写一个函数 var obj=this;//这里获取当前操作的对象,也就是下面调用时的id="btn"的元素 。
在这里进行实现某些功能 } 然后在调用它的时候 function clicks(){ document.getElementById("btn").aa(); }。
2. 如何用javascript写个插件
开发插件 其实说白了 插件里面就是一个或多个函数的组合你只需要将一些能实现某些功能的代码做成函数 然后将这些函数全部放在一个js文件里面到需要用的时候 直接调用这个js文件 他里面的方法 就可以直接进行调用了 像现在流行的jquery 就是里面定义了许多的方法 就比如:function aa(){ //写一个函数var obj=this;//这里获取当前操作的对象,也就是下面调用时的id="btn"的元素。
在这里进行实现某些功能}然后在调用它的时候function clicks(){document.getElementById("btn").aa();}。
3. js插件有哪些常见的写法,有哪些扩充的插件
//用法实例
var config={
name:'huang',
sex:'nv'
};
//先初始化参数配置,在执行各个主体函数,函数中可以调用config的变量,其实就是jquery的链式操作
$('div.mydiv').pluginName(config).pluginName('getContent').pluginName('val','bing');
</script>
</body>
</html>
4. 怎么写一个机场选择功能的js插件
插件的目的是为了实现一系列功能。一般来讲是分为两种,一种是独立插件,一种是依赖插件。独立插件的话,只要把插件写在一个js文件里面,把js引进来就可以了。依赖插件的话,是本身需要依赖于其他的js,比如常见的jq插件,需要依赖jq,使用的时候要先把jq引进来,然后再把这个js引进来。
js插件的开发需要几个注意点:
独立变量,方法。防止和其他js产生冲突,一般采用闭包。
暴露设置,暴露方法调用。为了插件根据需要做一些设置上的改变。
防止重复定义,一般有一个初始化,建议采用匿名函数实现只能初始化一次。
5. 如何自己开发一款js或者jquery插件
引子现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢?首先是有扎实的js和jquery技术基础,其次还有一些写插件的方法和技巧。
关于js和jquery的技术基础,那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧,本文可以略微介绍一下,方便以后写插件的时候用得到。
jquery插件开发模式jquery插件一般有三种开发方式:通过$.extend()来扩展jQuery通过$.fn 向jQuery添加新的方法通过$.widget()应用jQuery UI的部件工厂方式创建第一种$.extend()相对简单,一般很少能够独立开发复杂插件,第三种是一种高级的开发模式,本文也不做介绍。第二种则是一般插件开发用到的方式,本文着重讲讲第二种。
插件开发第二种插件开发方式一般是如下定义$.fn.pluginName = function() { //your code here}插件开发,我们一般运用面向对象的思维方式例如定义一个对象var Haorooms= function(el, opt) { this.$element = el, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'none' }, this.options = $.extend({}, this.defaults, opt)}//定义haorooms的方法haorooms.prototype = { changecss: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); }}$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象,保留对象的默认值。$.fn.myPlugin = function(options) { //创建haorooms的实体 var haorooms= new Haorooms(this, options); //调用其方法 return Haorooms.changecss();}调用这个插件直接如下就可以$(function() { $('a').myPlugin({ 'color': '#2C9929', 'fontSize': '20px' });})上述开发方法的问题上面的开发方法存在一个严重的问题,就是定义了一个全局的Haorooms,这样对于插件的兼容等等各个方面都不好。
万一别的地方用到了Haorooms,那么你的代码就悲催了!现在我们把上面的代码包装起来,用一个自调用匿名函数(有时又叫块级作用域或者私有作用域)包裹,就不会出现这个问题了!包括js插件的开发,也是一样的,我们用一个自调用匿名函数把自己写的代码包裹起来,就可以了!包裹方法如下:(function(){})()用上面的这个包裹起来,就可以了。但是还有一个问题,当我们研究大牛的代码的时候,前面经常看到有“;”,那是为了避免代码合并等不必要的错误。
例如,我们随便定义一个函数:var haoroomsblog=function(){}(function(){ })()由于haoroomsblog这个函数后面没有加分号,导致代码出错,为了避免这类情况的发生,通常这么写!;(function(){ })()把你的插件代码包裹在上面里面,就是一个简单的插件了。(注js插件和jquery插件都是如此)还有一个问题把你的插件包裹在;(function(){ })()基本上可以说是完美了。
但是为了让你开发的插件应用更加广泛,兼容性更加好,还要考虑到用插件的人的一些特殊的做法,例如,有些朋友为了避免jquery和zeptojs冲突,将jquery的前缀“$”,修改为“jQuery”,还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行,那么我们的做法是,把代码包裹在如下里面:;(function($,window,document,undefined){ //我们的代码。
})(jQuery,window,document);就可以避免上面的一些情况了!至此,你开发的插件就算完美了。
6. javaScript插件写法
试下这个(function($){ $.fn.highly = function(options){ var _this = this; var _highly=$(_this).position().top; $(window).scroll(function(){ if ($(window).scrollTop()>=_highly){ $(_this).css({ "position":"fixed", "top":"38px" }); }else{ $('.index-hot').css({ "position":"static" }); } }})(jQuery);。
7. js插件写法 除了jQuery以外的写法
1.vartemp={}是定义Object对象,Object包含很多键值对。
这里面的b,bd,at都是键,对应了三个值,这个值可以是函数。这是javascript的语言特性,如果你看jquery的源代码的话,会发现其中很多地方都是用这个实现的。
包括JSON对象,实质上也是Object。2.关键一点就是button在执行你为它绑定的函数的时候,this指的是自己。
第一次点击的时候你用的是temp.bd(),那么就通过temp这个对象调用bd函数,中间有temp这个中间层,那么bd函数的this指的是temp,点击完了以后你将b1绑定了a.at这个函数,注意,你直接把这个函数绑到了button的click事件上,下回它调用的时候会直接用这个函数,而不是类似于第一次的temp.at(),那么这时候没有temp这个中间层,这里的this指的的button这个对象(不是jquery对象,而是butto这个dom对象),它没有b这个属性,所以就报错了。P.S.这里有个写法,你替换掉就会发现那两个方法又有效了bd:function(){vara=this;a.b.bind("click",function(){a.at.call(temp);});},这里用了call这个javascript的语言特性,把at这个函数运行时的this指针强制设为temp,就没有问题了。