今天分享一下快速使用jquery+zepto.js的技巧,需要的记得收藏
1.jquery的引入:本地下载jquery(后面简称jq)的源文件,开发版本使用非min版,线上使用min版,zepto.js类似,同样的一些基于jq的插件也是如此用法,如果使用requrejs也就是模块化加载注意插件的依赖性;zepto.js(可以认为是移动端简版jq,用法基本相同,唯一不同的是点击事件的触发,一个是click,一个touch)
2.注意事项点:jq的使用是基于我们的选择器去绑定方法从而实现交互效果的。jq常用的方法如下:
3.面向对象的封装
面向对象的思想其实不是很复杂,就是根据我们的业务或者开发划分的模块,比如nav,swiper,toats,登录验证等;从字面入手,面向对象首先需要我们暴露一个对象出来,供大家使用,这个暴露的对象依赖谁很重要,下面以示例说一下我们如何封装一个插件对象(感谢懒人之家)
我们需要再自己的独立的js中加入立即执行函数,这个插件是依赖于jq的,所以传入了jquery,利用$.fn.extend()绑定我们新的属性和方法,如果插件中需要传入一下参数,我们也可以使用这个方法生成我们最后的对象
以上是一种,还有一种简单的粗暴的写法
;(function(exports){
var keyboard = function(params){
var defaults = {
width:100,
height:100,
};
//合并使用插件初始化参数
var optionscur = extend(defaults,params);
//初始化,
keyboard.prototype.init = function(optionscur){
}
// 这个我们可以添加其他的方法,依据插件的功能
exports.keyboard = keyboard;
}
})(window)
希望大家多多练习,积累自己知识点
如对本文有疑问, 点击进行留言回复!!
网友评论