编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章

简介: 这些年主要关注于项目管理方面的工作,编码就比较少了。这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧。       言归正传,这次写的是Javascript类库。

      这些年主要关注于项目管理方面的工作,编码就比较少了。这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧。

      言归正传,这次写的是Javascript类库。大家都知道,Javacript是一种很有意思的语言。虽然它是前端语言,但是它能做的事情远远超出我们的想象。Javascript同样是一种面向对象的语言,使用它,同样可以自定义对象,同样也具备对象的一些特性,即封装,继承,多态性。同时,Javascript同样也有设计模式,同样能过编写出高质量的代码,虽然在很多时候不是很需要这样。

      这次要写的Javascript类库,其实很简单,只是用jQuery插件的方式将各种自定义函数进行封装而已,便于调用。下面是Visual Studio 2013的解决方案图。

                       

      这里其实也是定义了Javascript的一种架构,即jQuery的架构方式(基于目录的架构)。后续将会继续补充和完善该jQuery插件的使用方法等等。关于架构方面,以前关注得也相对比较多,但是最近想再翻出来玩玩,所以后续也会陆续有关于.NET架构方面的文章发出。

      这次写的类库其实很简单,就是用jQuery封装了一下,使用了Javascript的匿名函数进行的。具体可以看我以前的一片博文:jQuery扩展插件和拓展函数的写法(匿名函数使用的典型例子)

下面简要对该类库做个说明。先看编写方式说明:

      

 

      相信有一点Javascript基础的人就能看得懂了。使用方法很简单,就是基于jQuery的匿名函数编写的静态函数而已。

      使用方法:$.JSFn.FunctionWithOutParam();

      然后开始看代码:

     

      这里用jQuery的extend方法进行了扩展,就是基于这种方式的一种封装。定义了该插件,即函数名称为JSFn,这里没有使用Common,主要是认为这个是Javascript的一些自定义函数,应该封装在函数库中。上面同时定义了PlugInInfo这个静态变量,使用静态变量的方式声明了该类库的一些基本信息。

      下面拿一个库中的函数进行下说明:

     

      首先,声明函数名称CheckBrowser,用function匿名函数封装起来。在函数的{号下面添加函数声明注释。

                /// <summary>

                /// 检测浏览信息

                /// </summary>

                /// <returns>返回包含浏览器信息的变量</returns>

      这里必须这样子添加注释,否则在使用该类库的时候无法取得智能函数提示了。见下图。

     

      下面看看测试用例:

      

      这里只是简单的获取了该类库的一些静态变量的基本信息而已。

      上面的测试方法,同样能使用下面的方式进行测试:

     

      使用上面的代码,就能够把该代码插入到页面的任意位置,反正也是在页面各元素控件加载完毕后再执行。

 

      最后,提供该函数类库的下载,欢迎大家添加并共享出来。

      http://files.cnblogs.com/lzhdim/JSFn.js

      上面简要的描述了基于jQuery匿名函数的Javascript函数类库的编写方法,希望能够对大家有那么点帮助那就够了。

 

 

Ps.今天已经周四了,时间过得很快,马上又要到年底了。祝愿在剩下的几个月中能有好的文章写出来。

目录
相关文章
|
4月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
11月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
79 1
|
8月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
110 1
JavaScript中的原型 保姆级文章一文搞懂
|
8月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
168 14
|
8月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
79 0
|
9月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
184 3
|
10月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
9月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
100 0
|
9月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
54 0
|
9月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法