• 724 阅读
  • 3 回复

Zepto 1.2.0 20171127

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。


中文文档:http://www.css88.com/doc/zeptojs_api/

开发版未压缩:
zepto.js (您是游客您没有权限下载)



生产版已压缩:
zepto.min.js (您是游客您没有权限下载)





文档声明:
Zepto.js (1.1.6)文档请移步http://www.css88.com/doc/zeptojs-1.1.6_api/;
Zepto.js (1.1.2)文档请移步http://www.css88.com/doc/zeptojs-1.1.2_api/;
本帖最后由 张小鱼 于 2017-11-27 09:04 编辑
小鱼的淘宝店铺-多多支持哇

zepto插件区

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
https://www.baidu.com/s?wd=Zepto++plugin&rsv_spt=1&rsv_iqid=0xec273de200044c73&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&rqlang=&tn=58025142_oem_dg&ch=&rsv_enter=0&inputT=3203


百度搜:Zepto plugin
小鱼的淘宝店铺-多多支持哇
视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

zepto和jquery的md5加密插件
一、先来复习下两种插件的扩展写法。
http://doc.okbase.net/jinhuazhe2013/archive/194921.html


jQuery插件的写法:

代码 复制 - 运行

//为避免冲突,将我们的方法用一个匿名方法包裹起来
;(function($) {
    //扩展这个方法到jquery
    $.fn.extend({
        //插件名字
        myPlugin: function() {
            //遍历匹配元素的集合
            return this.each(function() {
                //在这里编写相应代码进行处理 
            });
        }
    });
 //传递jQuery到方法中,这样我们可以使用任何javascript中的变量来代替"$"      
})(jQuery);
//调用如下
//$("#box").myPlugin(); 

扩展jQuery对象本身:

代码 复制 - 运行

//扩展jQuery对象本身
;(function($) {
    //扩展这个方法到jquery
    $.extend({
        //插件名字
        md5: function() {
            //..
        }
    });    
})(jQuery); 
//调用如下
//$.md5();



zepto插件的写法:

代码 复制 - 运行

;(function($){
    $.fn.myPlugin = function(option){
      //..
    };
})(Zepto);
//调用如下
//$("#box").myPlugin();

或者:

代码 复制 - 运行

;(function($){
    $.extend($.fn, {
    myPlugin: function(option){
       //..
    })
})(Zepto);
//调用如下
//$("#box").myPlugin();

还有另外一种:

代码 复制 - 运行

;(function($){
    $.extend($, {
    md5: function(option){
       //..
    })
})(Zepto);
//调用如下
//$.md5();
小鱼的淘宝店铺-多多支持哇

jquery插件及zepto插件 写法异同

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
jquery插件及zepto插件,写法上有些区别。


区别点:
1、自定义事件的命名空间
jq的时间命名空间是用点“.”,而zepto是用冒号“:”



//jquery
$(this).trigger('cusevent.pluginname');


//zepto
$(this).trigger('cusevent:pluginname');
2、data() 方法
jq的data方法非常强大,可以存储字符串、对象、函数等一切js数据
而zepto的data方法则非常简陋,只能纯一下字符串。
由于写插件时,常用data方法来缓存插件实例化后的内容,所以这里需要做一下兼容修改。


// i is simply a counter, the rest
// of what is stored will be instances
$.waiting.lookup = {
 i: 0
};


// store the new instance.. $t=$(this)
$.waiting.lookup[++$.waiting.lookup.i] = new $.waiting($t, o);
$t.data('waiting', $.waiting.lookup.i);


// retrieve the instance
var inst = $.waiting.lookup[$(this).data('waiting')];
最后附上,JQ插件的编写模板,写插件的时候就不用考虑代码组织结构了。


/**
* Created by hugohua on 14-4-1.
* jQuery plugin template
*/


/**
* 将插件封装在一个闭包里面,防止外部代码污染  冲突
*/
(function ($) {
   /**
    * 定义一个插件 Plugin
    */
   var Plugin,
       privateMethod;  //插件的私有方法,也可以看做是插件的工具方法集


   /**
    * 这里是插件的主体部分
    * 这里是一个自运行的单例模式。
    * 这里之所以用一个 Plugin 的单例模式 包含一个 Plugin的类,主要是为了封装性,更好的划分代码块
    * 同时 也 方便区分私有方法及公共方法
    * PS:但有时私有方法为了方便还是写在了Plugin类里,这时建议私有方法前加上"_"
    */
   Plugin = (function () {


       /**
        * 插件实例化部分,初始化时调用的代码可以放这里
        * @param element 传入jq对象的选择器,如 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element
        * @param options 插件的一些参数神马的
        * @constructor
        */
       function Plugin(element, options) {
           //将dom jquery对象赋值给插件,方便后续调用
           this.$element = $(element);


           //将插件的默认参数及用户定义的参数合并到一个新的obj里
           this.settings = $.extend({}, $.fn.plugin.defaults,options);
           //如果将参数设置在dom的自定义属性里,也可以这样写
           this.settings = $.extend({}, $.fn.plugin.defaults, this.$element.data(), options);


           //初始化调用一下
           this.init();
       }


       /**
        * 写法一
        * 插件的公共方法,相当于接口函数,用于给外部调用
        */
       Plugin.prototype.doSomething = function () {
           /**
            * 方法内容
            */
       };


       /**
        * 写法二
        * 将插件所有函数放在prototype的大对象里
        * @type {{}}
        */
       Plugin.prototype = {


           init:function(){
               console.log('init');
           },


           doSomething2:function(){


           }
       };


       return Plugin;


   })();


   /**
    * 插件的私有方法
    */
   privateMethod = function () {


   };


   /**
    * 这里是将Plugin对象 转为jq插件的形式进行调用
    * 定义一个插件 plugin
    */
   $.fn.plugin = function (options) {
       return this.each(function () {
           var $me = $(this),
               instance = $me.data('plugin');
           if(!instance){
               //将实例化后的插件缓存在dom结构里(内存里)
               $me.data('plugin', new Plugin(this, options));
           }


           /**
            * 优雅处: 如果插件的参数是一个字符串,则 调用 插件的 字符串方法。
            * 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething();
            * doSomething是刚才定义的接口。
            * 这种方法 在 juqery ui 的插件里 很常见。
            */
           if ($.type(options) === 'string') instance[options]();
       });
   };


   /**
    * 插件的默认值
    */
   $.fn.plugin.defaults = {
       property1: 'value',
       property2: 'value'
   };


   /**
    * 优雅处: 通过data-xxx 的方式 实例化插件。
    * 这样的话 在页面上就不需要显示调用了。
    * 可以查看bootstrap 里面的JS插件写法
    */
   $(function () {
       return new Plugin($('[data-plugin]'));
   });
})(JQuery);
/**
* Created by hugohua on 14-4-1.
* zepto plugin template
*/


/**
* 将插件封装在一个闭包里面,防止外部代码污染  冲突
*/
(function ($) {
   /**
    * 定义一个插件 Plugin
    */
   var Plugin,
       privateMethod;  //插件的私有方法,也可以看做是插件的工具方法集


   /**
    * 这里是插件的主体部分
    * 这里是一个自运行的单例模式。
    * 这里之所以用一个 Plugin 的单例模式 包含一个 Plugin的类,主要是为了封装性,更好的划分代码块
    * 同时 也 方便区分私有方法及公共方法
    * PS:但有时私有方法为了方便还是写在了Plugin类里,这时建议私有方法前加上"_"
    */
   Plugin = (function () {


       /**
        * 插件实例化部分,初始化时调用的代码可以放这里
        * @param element 传入jq对象的选择器,如 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element
        * @param options 插件的一些参数神马的
        * @constructor
        */
       function Plugin(element, options) {
           //将插件的默认参数及用户定义的参数合并到一个新的obj里
           this.settings = $.extend({}, $.fn.plugin.defaults, options);
           //将dom jquery对象赋值给插件,方便后续调用
           this.$element = $(element);
           //初始化调用一下
           this.init();
       }


       /**
        * 写法一
        * 插件的公共方法,相当于接口函数,用于给外部调用
        */
       Plugin.prototype.doSomething = function () {
           /**
            * 方法内容
            */
       };


       /**
        * 写法二
        * 将插件所有函数放在prototype的大对象里
        * @type {{}}
        */
       Plugin.prototype = {


           init:function(){


           },


           doSomething2:function(){


           }
       };


       return Plugin;


   })();


   /**
    * 插件的私有方法
    */
   privateMethod = function () {


   };


   /**
    * 这里是将Plugin对象 转为jq插件的形式进行调用
    * 定义一个插件 plugin
    * zepto的data方法与jq的data方法不同
    * 这里的实现方式可参考文章:http://trentrichardson.com/2013/08/20/creating-zepto-plugins-from-jquery-plugins/
    */
   $.fn.plugin = function(options){
       return this.each(function () {
           var $this = $(this),
               instance = $.fn.plugin.lookup[$this.data('plugin')];
           if (!instance) {
               //zepto的data方法只能保存字符串,所以用此方法解决一下
               $.fn.plugin.lookup[++$.fn.plugin.lookup.i] = new Plugin(this,options);
               $this.data('plugin', $.fn.plugin.lookup.i);
               instance = $.fn.plugin.lookup[$this.data('plugin')];
           }


           if (typeof options === 'string') instance[options]();
       })
   };


   $.fn.plugin.lookup = {i: 0};


   /**
    * 插件的默认值
    */
   $.fn.plugin.defaults = {
       property1: 'value',
       property2: 'value'
   };


   /**
    * 优雅处: 通过data-xxx 的方式 实例化插件。
    * 这样的话 在页面上就不需要显示调用了。
    * 可以查看bootstrap 里面的JS插件写法
    */
   $(function () {
       return new Plugin($('[data-plugin]'));
   });
})(JQuery);


FROM:http://blog.csdn.net/cengjingcanghai123/article/details/44097033

参考文章:
http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/


http://trentrichardson.com/2013/08/20/creating-zepto-plugins-from-jquery-plugins/
本帖最后由 张小鱼 于 2017-11-27 09:14 编辑
小鱼的淘宝店铺-多多支持哇