手把手教你开发Jquery插件(一)
早就想开这一帖子了 准备了好久 有些内容转载了网上现成的 因为我不是专业做前端的 有些吧可能说不太好 或者理解不够 所以请一定要给我指出来 大家共同进步 1 为什么不说原生JS插件?
本人水平问题 另外一方面现在的开发很少用JS开发原生JS插件 因为太过麻烦 我只说常用的 经常用的 以后新人工作后会砸到自己头上的
学会使用jQuery并不难 因为它简单易学 有DEMO 有在线演示 调用不难 并且相信如果你接触jQuery后肯定也使用或熟悉了不少其插件
现在招聘前端的 会插件开发那是必备的技能
写之前看一看书是必备的
根据《jQuery高级编程》的描述 jQuery插件开发方式主要有三种:
1.通过$.extend()来扩展jQuery
2.通过$.fn 向jQuery添加新的方法
3.通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发 说简单是相对于第三种方式 第三种方式是用来开发更高级jQuery部件的
该模式开发出来的部件带有很多jQuery内建的特性
比如插件的状态信息自动保存
各种关于插件的常用方法等 非常贴心这个以后有机会我在给大家说道说道 今天先说第一种
而第一种方式又太简单 仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以 在原有的代码上改进出带自己业务的插件
第一种方式 请看例子
程序代码:
$.extend({ sayHello: function(name) { console.log('Hello,' + (name ? name : 'Dude') + '!'); } }) $.sayHello(); //调用 $.sayHello('Wayou'); //带参调用面代码中 通过$.extend()向jQuery添加了一个sayHello函数 然后通过$直接调用 到此你可以认为我们已经完成了一个简单的jQuery插件了
但如你所见 这种方式用来定义一些辅助方法是比较方便的 比如一个自定义的console 输出特定格式的信息 定义一次后可以通过jQuery在程序中任何需要的地方调用它
程序代码:
$.extend({ log: function(message) { var now = new Date(), y = now.getFullYear(), m = now.getMonth() + 1, //!JavaScript中月分是从0开始的 d = now.getDate(), h = now.getHours(), min = now.getMinutes(), s = now.getSeconds(), time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s; console.log(time + ' My App: ' + message); } }) $.log('initializing...'); //调用大家所见到或使用的插件也大多是通过此种方式开发 难么? ??????不难 所以有时候你看到有人骄傲的说 我去开发插件去了 没什么大不了的 因为几分钟你也学会
[ 本帖最后由 wangnannan 于 2015-6-10 14:10 编辑 ]