js文档加载完毕有哪几种写法以及如何开发jq插件
分类:pc28.am

jQuery 插件通常分两类。

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员

一、jQuery插件开发两个底层方法jQuery.extend([deep ], target [, object1 ] [, objectN ] )将两个或更多对象的内容合并到第一个对象。

基于选择器的插件 不基于选择器的插件

今天给大家分享一下,修真院官网js任务4,深度思考中的知识点——js文档加载完毕有哪几种写法以及如何开发jq插件?**

1、deep 如果是true,合并成为递归2、target 一个对象,如果附加的对象被传递给这个方法将那么它将接收新的属性,如果它是唯一的参数则将扩展jQuery的命名空间,这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。3、object1 一个对象,它包含额外的属性合并到第一个参数4、包含额外的属性合并到第一个参数当我们提供两个或多个对象给,对象的所有属性都添加到目标对象将被修改,并且将通过).extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:var settings = $.extend({}, defaults, options);在默认情况下,通过$.extend()合并操作是不递归的;

前段时间简单学习了 jQuery 插件开发,开发了两个简单的插件,在此对两种插件的开发模式做简要总结。基于选择器的插件

1.背景介绍

js文档加载完毕有哪几种写法

1:js加载完毕有哪几种写法

一、当不引入jQuery框架,只写原生JS代码时,需要用window对象的onload事件

window.onload= function(){

//要执行的js代码段

}

(注:在使用时,window.onload可直接简写成onload,但是为了不发生歧义及造成不必要的错误,最好是把window写上)

二、在引入jQuery时,可以有多种写法,

这里只列出一种最复杂(其他写法基本都是此种的变形)的,和2种最常见的写法

1、最复杂的一种写法:

;(function($,window,document,undefined){

//要执行的js代码段

})(jQuery,window,document);

(1)、在最开始使用分号的目的是为了防止多个文件压缩合并时,因为其他文件最后一行语句没加分号,而引起合并后的语法错误(如果能确保不会有多个文件压缩合并的情况,可以不写这个分号)

(2)、这就是一个匿名函数的自执行,一般js库都采用这种自执行的匿名函数来保护内部变量

(3)、形参中的$是jQuery的简写,很多方法和类库也使用$,这里$接收jQuery对象,也是为了避免$变量冲突,保证多个插件之间可以正常运行(如果只引入了jQuery这一个插件,可以不写这个)

(4)、实参分别接收window,document这两个对象,window,document这两个对象都是全局环境下的,而在函数体内的window,document其实是局部变量,不是指全局的window,或是document对象。这样做有个好处就是可以提高性能,减少作用域的查询时间(如果在函数体内需要多次调用window,或是document对象,这样把window或是document对象作为参数传进去,是非常有必要的。如果代码中没有用到这两个对象,那么就不需要传这两个参数了)

(5)、使用undefined的原因:

①因为undefined是window的属性,声明为局部变量之后,在函数中如果再有变量与undefined做比较的话,程序就可以不用到window下搜索undefined,可以提高程序的性能

②undefined在有些版本较旧的浏览器是不被支持的,直接使用会报错,js框架就要考虑到兼容性问题,所以增加一个形参undefined

2、比较常用的写法:

$(document).ready(function(){

//要执行的js代码段

});

(注:①在不确定是否只引入jQuery一个js框架的时候,代码中的$可以像复杂写法那样通过参数的形式传递,②代码中的document可省略)

3、最简单的一种写法:

$(function(){

//要执行的js代码段

});

var object1 = {apple: 0,banana: {weight: 52, price: 100},cherry: 97};var object2 = {banana: {price: 200},durian: 100};$.extend;//{apple: 0, banana: {price:200}, cherry: 97, durian: 100}$.extend(true, object1, object2);//{apple: 0, banana: {weight: 52, price:200}, cherry: 97, durian: 100}jQuery.fn.extend()
(function { $.fn.PluginName = function { var defaults = { // 插件自定义选项的默认值 }; // 以用户的自定义选项覆盖默认选项 var options = $.extend; return this.each { // 让插件支持链式操作 // 在这里编写插件功能代码 }); };});

2.知识剖析

1:什么是jQuery插件?jQuery插件如何使用?

jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法;

jQuery插件的使用方式就是jQuery对象方法的调用

在jQuery源码中有jQuery.fn = jQuery.prototype = function(){……}即指向jQuery对象的原型链,对其它进行的扩展,作用在jQuery对象上面;

首先,创建一个匿名的自执行函数,形参为 $ 、 window 和 undefined,实参为 jQuery 和 window。

3.常见问题

2:jQuery插件有哪些常见的开发方式

总结

嗯?为什么没有为 undefined 对应地传入一个实参呢?这是一个小技巧,考虑到 undefined 这个变量名可能在其它地方的 JavaScript 代码赋过值,失去了它真正的意义,所以这里干脆不传入这个参数,以确保它在那个匿名自执行函数中是真正的 undefined。

4.解决方案

1:通过$.extend()来扩展jQuery;

2:通过$.fn 向jQuery添加新的方法;

3:通过$.widget()应用jQuery UI的部件工厂方式创建;

通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等,比较高级也比较复杂,就不细说了。

1、jQuery.extend()能够创建全局函数或选择器,在实际开发中常使用jQuery.extend()方法作为插件方法传递系列选项结构的参数2、jQuery.fn.extend()能够创建jQuery对象方法,一般用此方法来扩展jQuery的对象插件二、jQuery插件开发通用框架

jQuery 传入后对应为 $,这样可以保证插件内调用的 $ 一定是 jQuery 而非 Prototype 之类的库。

5、编码实战

先看一下它的基本格式:

$.fn.pluginName =function() {

//your code goes here

}

基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

比如我们将页面上所有链接颜色转成红色,则可以这样写这个插件:

$.fn.myPlugin =function() {

//在这里面,this指的是用jQuery选中的元素

//example :$('a'),则this=$('a')

this.css('color', 'red');

}

在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合,且这个集合已经是jQuery包装类型了,也就是说,在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。

所以在上面插件代码中,我们在this身上调用jQuery的css()方法,也就相当于在调用 $('a').css()。

理解this在这个地方的含义很重要。这样你才知道为什么可以直接商用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用,下面会讲到。初学容易被this的值整晕,但理解了就不难。

现在就可以去页面试试我们的代码了,在页面上放几个链接,调用插件后链接字体变成红色。

我的微博

我的博客

我的小站

这是p标签不是a标签,我不会受影响

$(function(){

$('a').myPlugin();

})

运行结果:

图片 1

下面进一步,在插件代码里处理每个具体的元素,而不是对一个集合进行处理,这样我们就可以针对每个元素进行相应操作。

我们已经知道this指代jQuery选择器返回的集合,那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了,但此刻要注意的是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。

比如现在我们要在每个链接显示链接的真实地址,首先通过each遍历所有a标签,然后获取href属性的值再加到链接文本后面。

更改后我们的插件代码为:

$.fn.myPlugin =function() {

//在这里面,this指的是用jQuery选中的元素

this.css('color', 'red');

this.each(function() {

//对每个元素进行操作

$(this).append(' ' $(this).attr('href'));

})) }

调用代码还是一样的,我们通过选中页面所有的a标签来调用这个插件

运行结果:

图片 2

到此,你已经可以编写功能简单的jQuery插件了。是不是也没那么难。

下面开始jQuery插件编写中一个重要的部分,参数的接收。

回到顶部

支持链式调用

我们都知道jQuery一个时常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。

要让插件不打破这种链式调用,只需return一下即可。

$.fn.myPlugin =function() {

//在这里面,this指的是用jQuery选中的元素

this.css('color', 'red');

returnthis.each(function() {

//对每个元素进行操作

$(this).append(' ' $(this).attr('href'));

})) }

让插件接收参数

一个强劲的插件是可以让使用者随意定制的,这要求我们提供在编写插件时就要考虑得全面些,尽量提供合适的参数。

比如现在我们不想让链接只变成红色,我们让插件的使用者自己定义显示什么颜色,要做到这一点很方便,只需要使用者在调用的时候传入一个参数即可。同时我们在插件的代码里面接收。另一方面,为了灵活,使用者可以不传递参数,插件里面会给出参数的默认值。

在处理插件参数的接收上,通常使用jQuery的extend方法,上面也提到过,但那是给extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,所以我们就可以在jQuery身上调用新合并对象里包含的方法了,像上面的例子。当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

利用这一点,我们可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。

为了演示方便,再指定一个参数fontSize,允许调用插件的时候设置字体大小。

$.fn.myPlugin = function(options) {    var defaults = {        'color': 'red',        'fontSize': '12px'    };    var settings = $.extend(defaults, options);    return this.css({        'color': settings.color,        'fontSize': settings.fontSize    }); }

现在,我们调用的时候指定颜色,字体大小未指定,会运用插件里的默认值12px。

$('a').myPlugin({    'color': '#2C9929' });

运行结果:

图片 3

同时指定颜色与字体大小:

$('a').myPlugin({    'color': '#2C9929',    'fontSize': '20px' });

图片 4

保护好默认参数

注意到上面代码调用extend时会将defaults的值改变,这样不好,因为它作为插件因有的一些东西应该维持原样,另外就是如果你在后续代码中还要使用这些默认值的话,当你再次访问它时它已经被用户传进来的参数更改了。

图片 5

一个好的做法是将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。

$.fn.myPlugin = function(options) {    var defaults = {        'color': 'red',        'fontSize': '12px'    };    var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数    return this.css({        'color': settings.color,        'fontSize': settings.fontSize    }); }

到此,插件可以接收和处理参数后,就可以编写出更健壮而灵活的插件了。

;(function($, window, document, undefined){ //Plugin code here})(jQuery, window, document);

此类插件的调用方式一般为 $.PluginName(); 这种形式。

6.拓展思考

如果插件体积较大,如何使插件结构更清晰,易维护

使用面向对象的方法去开发插件

使用分号是为了防止因前面的代码没有使用分号而导致插件函数不能正确解析传入jQuery是为了确保在匿名函数中正确的使用jQuery对象,防止多库共存时$冲突传入window、document并非必须,只不过为了更快的访问window和document传入undefined是为了防止undefined变量被更改,确保undefined的准确性

此类具体示例可参考

7.参考文献

教你开发jQuery插件

原生JS与jQuery文档加载完毕的写法

三、jQuery插件开发的3种形式1、类级别开发类级别写法:

由于此类插件不依赖于选择器,所以也无链式操作一说。一般开发模式如下:

8.更多讨论

在框架流行的今天,你有没有遇到过必须要使用jq插件的场景


视频链接

密码: gep4

ppt链接


感谢大家观看

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

我的邀请码:12361358,或者你可以直接点击此链接:http://www.jnshu.com/login/1/12361358

//方式1;(function($, window, document, undefined){ $.pluginName = function(){ //Plugin implementation code here }; })(jQuery, window, document);//方式2 当全局函数较多时;(function($, window, document, undefined){ $.extend({ pluginName = function(){ //Plugin code here }; })})(jQuery, window, document);
(function { $.PluginName = function { var defaults = { // 插件自定义选项的默认值 }; // 以用户的自定义选项覆盖默认选项 var options = $.extend; // 在这里编写插件功能代码 };});

调用方法:$.pluginName();

此类插件的调用形式一般为 $.PluginName(); 这种形式。

2、对象级别的插件开发对象级别插件写法:

//方式1;(function($, window, document, undefined){ $.fn.pluginName = function { return this.each { //this关键字代表了这个插件将要执行的jQuery对象 //return this.each()使得插件能够形成链式调用 var defaults = { //pro : value }; var settings = $.extend({}, defaults, options); // plugin implementationcode here }); }})(jQuery, window, document);//方式2;(function($, window, document, undefined){ $.fn.extend({ pluginName : function(){ return this.each{ // plugin code here }); }; })})(jQuery, window, document);//方式3 这种类型的插件架构允许您封装所有的方法在父包中,通过传递该方法的字符串名称和额外的此方法需要的参数来调用它们。;(function($, window, document, undefined){ // 在我们插件容器内,创造一个公共变量来构建一个私有方法 var privateFunction = function() { // code here } // 通过字面量创造一个对象,存储我们需要的公有方法 var methods = { // 在字面量对象中定义每个单独的方法 init: function() { // 为了更好的灵活性,对来自主函数,并进入每个方法中的选择器其中的每个单独的元素都执行代码 return this.each { // 为每个独立的元素创建一个jQuery对象 var $this = $; // 创建一个默认设置对象 var defaults = { propertyName: 'value', onSomeEvent: function() {} } // 使用extend方法从options和defaults对象中构造出一个settings对象 var settings = $.extend({}, defaults, options); // 执行代码 // 例如: privateFunction; }, destroy: function() { // 对选择器每个元素都执行方法 return this.each { // 执行代码 }); } }; $.fn.pluginName = function() { // 获取我们的方法,遗憾的是,如果我们用function{}来实现,这样会毁掉一切的 var method = arguments[0]; // 检验方法是否存在 if { // 如果方法存在,存储起来以便使用 // 注意:我这样做是为了等下更方便地使用each() method = methods[method]; // 如果方法不存在,检验对象是否为一个对象或者method方法没有被传入 } else if == 'object' || !method ) { // 如果我们传入的是一个对象参数,或者根本没有参数,init方法会被调用 method = methods.init; } else { // 如果方法不存在或者参数没传入,则报出错误。需要调用的方法没有被正确调用 $.error( 'Method '   method   ' does not exist on jQuery.pluginName' ); return this; } // 调用我们选中的方法 // 再一次注意我们是如何将each()从这里转移到每个单独的方法上的 return method.call(jQuery, window, document);//方式4 面向对象的插件开发 将原型和构造函数组合使用,使得通过构造函数创建的每个实例都能继承相关属性与方法;(function($, window, document, undefined){ //定义Beautifier的构造函数 var Beautifier = function { this.$element = ele; this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'none' }; this.options = $.extend({}, this.defaults, opt); } //定义Beautifier的原型方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function { //创建Beautifier的实体 var beautifier = new Beautifier; //调用其方法 return beautifier.beautify(jQuery, window, document);

调用方法:$.fn.pluginName();

3、通过$.widget()应用jQuery UI的部件工厂方式创建用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等

四、编写JQuery插件需要注意的地方:1、插件的推荐命名方法为:jquery.[插件名].js2、所有的对象方法都应当附加到JQuery.fn对象上面,而所有的全局函数都应当附加到JQuery对象本身上。3、可以通过this.each() 来遍历所有的元素4、在jQuery开发中,this关键词通常引用的是当前正在操作的DOM元素,但在当前的jQuery插件上下文中,this关键词引用的是当前jQuery实例自身,唯一的例外是在当前jQuery集合中遍历所有元素时,$.each循环体内的this引用的是这一轮遍历所暴露的DOM元素5、所有方法或函数插件,都应当以分号结尾,否则压缩的时候可能会出现问题。为了更加保险写,可以在插件头部添加一个分号,以免他们的不规范代码给插件带来 影响。6、插件应该返回一个JQuery对象,以便保证插件的可链式操作。

以上就是jQuery插件开发的知识点汇总,希望对大家的学习有所帮助。

本文由pc28.am发布于pc28.am,转载请注明出处:js文档加载完毕有哪几种写法以及如何开发jq插件

上一篇:存款和储蓄进度_jquery_脚本之家,oracle存款和储蓄 下一篇:没有了
猜你喜欢
热门排行
精彩图文