JavaScript插件化开发教程 (一)

一,开篇分析

Hi,大家!今天这系列文章主要是说说如何开发基于“JavaScript”的插件式开发,我想很多人对”插件“这个词并不陌生,

有的人可能叫“组件”或“部件”,这不重要,关键是看如何设计,如何做一个全方位的考量,这是本文的重点阐述的概念。我想大家对

“jQuery插件的方式”有一定的了解,我们结合这个话题一起讨论一下,最终给出相关的实现方案,来不断提高自己的谁能力。

二,进入插件正题

一般来说,jQuery插件的开发分为两种:一种是挂在jQuery命名空间下的全局函数,也可称为静态方法。

另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

(1),类级别的插件开发

类级别的插件开发最直接的理解就是给"jQuery"类添加类方法,可以理解为添加静态方法。典型的例子就是"$.ajax()"这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

1.1添加一个全局函数,我们只需如下定义,看代码: 

复制代码 代码如下:

$.hello = function(){
    alert("Hello,大熊君!") ;
} ;

1.2添加多个全局函数,可采用如下定义:

复制代码 代码如下:

$.extend({
    hello : function(name){
        // put your code here
    } ,
    world : function(){
        // put your code here
    }
}) ;

说明:”$.extend(target, [object1], [objectN])“(该方法主要用于合并两个或更多对象的内容(属性)到第一个对象,并返回合并后的第一对象。

如果该方法只有一个参数target,则该参数将扩展jQuery的命名空间,即作为静态方法挂在jQuery全局对象下)。

(2),对象级别的插件开发

 对象级别的插件开发需要如下的两种形式:

 2.1通过“$.fn.extend()”为原型动态挂载相关的属性。

复制代码 代码如下:

(function($){  
    $.fn.extend({  
        pluginName : function(opts){  
            // put your code here
        }  
    }) ;  
})(jQuery) ;

 2.2直接添加动态属性到原型链上。

复制代码 代码如下:

(function($) {    
     $.fn.pluginName = function(){  
         // put your code here 
     } ;  
 })(jQuery) ;

  说明一下:二者是等价的,对于一个jQuery插件,一个基本的函数就可以很好地工作,但是对于复杂一点的插件就需要提供各种各样的方法和私有函数。

你可能会使用不同的命名空间去为你的插件提供各种方法,但是添加过多的命名空间反而会使代码变得混乱,健壮性下降。所以最好的解决办法是适当地定义私有函数和方法。

所以我们通过自执行函数与闭包的结合实现模拟的私有插件单元,就像我们上面的实例中一样。

(三),下面给一个简单的例子看看实现的过程:

  (1),“html”片段代码,如下:

复制代码 代码如下:

<div id="bb" style="width:220px;border:1px solid #ccc;">
   <span></span>
   <div
       style="margin-top:10px;
       margin-bottom:30px;"
   >8     </div>
</div>

  (2),“data.json”定义如下:

复制代码 代码如下:

  {
    "text" : "你好,大熊君{{bb}} !" ;
  }

  (3),"bb.js"代码如下:

复制代码 代码如下:

$(function(){
    $("#bb").bigbear() ;
}) ;
(function($){
    $.fn.bigbear = function(opts){
        opts = $.extend({},$.fn.bigbear.defaults,opts) ;
        return this.each(function(){
            var elem = $(this) ;
            elem.find("span").text(opts["title"]) ;
            $.get(opts["url"],function(data){
                elem.find("div").text(data["text"]) ;
            }) ;
        }) ;
    } ;
    $.fn.bigbear.defaults = {
        title : "这是一个简单的测试" ,
        url : "data.json"
    } ;
})(jQuery) ;

  运行效果:

小结一下

  (1)“$.fn.bigbear.defaults”提供插件的默认参数选项一个扩展性良好的插件应该是可以让使用者根据需求自定义参数选项,并控制插件的行为,所以提供恢复默认选项是很有必要的。你可以通过jQuery的extend方法来设置这些选项。

  (2),“return this.each(){...}”遍历多个元素并返回jQuery使用Sizzle选择器引擎,Sizzle可以为你的函数提供多元素操作(例如对所有类名相同的元素)。这是jQuery几个优秀的特性之一,在开发插件过程中即使你不准备为你的插件提供多元素支持,但为这做准备仍然是一个很好的方式。另外,jQuery有一个很好的特点就是可以进行方法级联,也可称为链式调用,所以我们不应该破坏这个特性,始终在方法中返回一个元素。

(四),最后总结

  (1),jQuery为开发插件提拱了两个方法,分别是:jQuery.fn.extend(object);  给jQuery对象添加方法。
jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

  (2),把全部代码放在闭包(一个即时执行函数)里此时闭包相当于一个私有作用域,外部无法访问到内部的信息,并且不会存在全局变量的污染情况。官方创建开发规范的解释是:a) 避免全局依赖;b) 避免第三方破坏;c) 兼容jQuery操作符'$'和'jQuery '。

  (3),提供插件的默认参数选项一个扩展性良好的插件应该是可以让使用者根据需求自定义参数选项,并控制插件的行为,所以提供恢复默认选项是很有必要的。你可以通过jQuery的extend方法来设置这些选项

  (4),遍历多个元素并返回jQuery使用Sizzle选择器引擎,Sizzle可以为你的函数提供多元素操作(例如对所有类名相同的元素)。这是jQuery几个优秀的特性之一,在开发插件过程中即使你不准备为你的插件提供多元素支持,但为这做准备仍然是一个很好的实践。另外,jQuery有一个很好的特点就是可以进行方法级联,也可称为链式调用,所以我们不应该破坏这个特性,始终在方法中返回一个元素。

  (5),一次性代码放在主循环以外这一条很重要,但是常常被忽略。简单的讲,如果你有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都需要实例化,你应该把这段代码放在插件方法的外面。

  (6),大家学习完思考一下,如果项目技术选型换了这些插件又是强依赖“jQuery”机制,我们以前写的插件将会不能用(假设不用jQuery的情况),如何做重构那?

明天的文章就会说一下这个问题,并且将会重构插件的关键逻辑,敬请期待。。。

时间: 2015-01-25

Android实现Listview异步加载网络图片并动态更新的方法

本文实例讲述了Android实现Listview异步加载网络图片并动态更新的方法.分享给大家供大家参考,具体如下: 应用实例:解析后台返回的数据,把每条都显示在ListView中,包括活动图片.店名.活动详情.地址.电话和距离等. 在布局文件中ListView的定义: <ListView android:id="@id/maplistview" android:background="@drawable/bg" android:layout_width=&qu

Android应用开发中Fragment的静态加载与动态加载实例

1.Fragment的静态使用 Fragment是作为Activity的UI的一部分,它内嵌在Activity中,多个Fragment可以把一个Activity分成多个部分,这在大屏幕手机或者平板电脑中会比较多的用到,这样就不用使用多个Activity来切换这么麻烦了.当然Fragment也可以不显示,只在后台处理一些数据,这篇文章中就暂时不谈到这个.以下来看怎么静态地在Activity的布局文件中添加Fragment. 自定义的Fragment通常要继承Fragment这个类,也有一些特殊的是

JavaScript插件化开发教程 (三)

一,开篇分析 前面两篇文章我们主要讲述了以"jQuery的方式如何开发插件",以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利弊取长补短,本系列文章是以学习为导向的,具体场景大家自己定夺使用方式.那么今天从这篇文章开始,我们就以实例的方式带着大家由浅入深的开发属于自己的插件库.嘿嘿嘿,废话少说,进入正题.直接上实际效果图: 大家看到了吧,这是一个选项卡插件,在我们日常做那种单页应用("SPA")的时候或许会接触到,就拿今天的例子来说

Android动态加载布局

ListView我们一直都在用,只不过当Adapter中的内容比较多的时候我们有时候没办法去设置一些组件,举个例子: 可以看到京东的故事里面的这样一个布局,这个布局可以说是我目前见到的内容比较多的了,它的每一项都包含头像.姓名.分类.内容.图片.喜欢.评论.分享以及喜欢的头像.分析了一下布局之后我们不难发现,除了喜欢头像这部分,其余的都很好实现. 那么下面着重说一下这个头像这部分怎么实现? 第一种方案:我们可以用GridView来实现,GridView和ListView的用法是一样的,俗称九宫格

Android实现listview动态加载数据分页的两种方法

在android开发中,经常需要使用数据分页,比如要实现一个新闻列表的显示,或者博文列表的显示,不可能第一次加载就展示出全部,这就需要使用分页的方法来加载数据,在android中Handler经常用来在耗时的工作中,它接收子线程发送的数据,并使用数据配合更新UI,AsyncTask是在一个线程中执行耗时操作然后把结果传给UI线程,不需要你亲自去管理线程和句柄. 一.使用Handler+线程方法 1.基础知识 Handler在android系统中,主要负责发送和接收消息,它的用途主要有以下两种:

Android插件化之资源动态加载

Android插件化之资源动态加载 一.概述 Android插件化的一个重要问题就是插件资源访问问题,先列出会面对的问题 1.如何加载插件资源 2.如何处理插件资源与宿主资源的处突:插件化资源问题要做到的效果是,如果我们要获取的资源在插件中找得到,则加载优先加载插件的,如果找不到,则到宿主资源中找.这样能做到动态更新的效果. 3.如何确保插件和宿主使用到的是被修改过的资源. 二.原理分析 在做一件事之前必须先弄清楚原理,所以,这里先要弄清楚Android的资源体系原理. 1.资源链 Contex

Android 中动态加载.jar的实现步骤

首先第一个是 jar 文件的制作,Java 里面直接把 .class 文件打包到 .jar 文件里面就可以了,但是 Android 的 Dalvik VM 是不认 Java 的 byte code 的,所以不能直接这么打包,而要用 dx 工具转成 Dalvik byte code 才可以.当然,dx 工具转了之后,jar 包里面就不 是 .class 文件了,而是 .dex 文件. 第二个是,Android 里面虽然也提供了 URLClassLoader 的实现,但是并不能用.要动态加载其它类,

亲自动手实现Android App插件化

Android插件化目前国内已经有很多开源的工程了,不过如果不实际开发一遍,很难掌握的很好. 下面是自己从0开始,结合目前开源的项目和博客,动手开发插件化方案. 按照需要插件化主要解决下面的几种问题: 1. 代码的加载 (1) 要解决纯Java代码的加载 (2) Android组件加载,如Activity.Service.Broadcast Receiver.ContentProvider,因为它们是有生命周期的,所以要特殊处理 (3) Android Native代码的加载 (4) Andro

Android动态加载Activity原理详解

activity的启动流程 加载一个Activity肯定不会像加载一般的类那样,因为activity作为系统的组件有自己的生命周期,有系统的很多回调控制,所以自定义一个DexClassLoader类加载器来加载插件中的Activity肯定是不可以的. 首先不得不了解一下activity的启动流程,当然只是简单的看一下,太详细的话很难研究清楚. 通过startActivity启动后,最终通过AMS进行跨进程回调到ApplicationThread的scheduleLaunchActivity,这时

android动态加载布局文件示例

一.布局文件part.xml: 复制代码 代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="

JS获取浏览器语言动态加载JS文件示例代码

项目出于多语言版本的考虑,前台使用easyui,通过获取浏览器语言版本,来相对的加载easyui语言包,easyui默认语言包en-US 代码如下 <script type="text/javascript"> //ie if (navigator.browserLanguage != "undefined" && navigator.browserLanguage != null) { if (navigator.systemLangu

Android编程动态加载布局实例详解【附demo源码】

本文实例讲述了Android编程动态加载布局的方法.分享给大家供大家参考,具体如下: 由于前段时间项目需要,需要在一个页面上加载根据不同的按钮加载不同的布局页面,当时想到用 tabhot .不过美工提供的界面图完全用不上tabhot ,所以想到了动态加载的方法来解决这一需求.在这里我整理了一下,写了一个 DEMO 希望大家以后少走点弯路. 首先,我们先把界面的框架图画出来,示意图如下: 中间白色部门是一个线性布局文件,我喜欢在画图的时候用不同的颜色将一块布局标示出来,方便查看.布局文件代码如下:

动态加载js文件简单示例

本文实例讲述了动态加载js文件的方法.分享给大家供大家参考,具体如下: function loadScript(url){ var hd = document.getElementsByTagName('head')[0], js = document.createElement('script'); js.src = url; js.type = "text/JavaScript"; if(js.addEventListener){ js.addEventListener("

详谈LABJS按需动态加载js文件

LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的执行顺序. 简单示例 $LAB .script("script1.js", "script2.js", "script3.js") .block(function(){ // wait for all to load

Android LayoutInflater加载布局详解及实例代码

Android  LayoutInflater加载布局详解 对于有一定Android开发经验的同学来说,一定使用过LayoutInflater.inflater()来加载布局文件,但并不一定去深究过它的原理,比如 1.LayoutInflater为什么可以加载layout文件? 2.加载layout文件之后,又是怎么变成供我们使用的View的? 3.我们定义View的时候,如果需要在布局中使用,则必须实现带AttributeSet参数的构造方法,这又是为什么呢? 既然在这篇文章提出来,那说明这三

原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中保存了json数据之类的).要实现这样的功能,可以使用<script> 元素的load 事件(IE9+.chrome.FireFox等)和onreadystatechange 事件(IE8以下),直接上代码: function loadScript(src, callback) { var scr

动态加载JavaScript文件的两种方法

这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们

JS 动态加载js文件和css文件 同步/异步的两种简单方式

/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile