如何模块化写jquery面向对象写法

jQuery读写操作cookie的代码演示 - 为程序员服务
为程序员服务
jQuery读写操作cookie的代码演示
* jQuery Cookie Plugin v1.3
* /carhartl/jquery-cookie
* Copyright 2011, Klaus Hartl
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://www.opensource.org/licenses/mit-license.php
* http://www.opensource.org/licenses/GPL-2.0
(function ($, document, undefined) {
var pluses = /\+/g;
function raw(s) {
function decoded(s) {
return decodeURIComponent(s.replace(pluses, ' '));
var config = $.cookie = function (key, value, options) {
if (value !== undefined) {
options = $.extend({}, config.defaults, options);
if (value === null) {
options.expires = -1;
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
value = config.json ? JSON.stringify(value) : String(value);
return (document.cookie = [
encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path
? '; path=' + options.path : '',
options.domain
? '; domain=' + options.domain : '',
options.secure
? '; secure' : ''
].join(''));
var decode = config.raw ? raw :
var cookies = document.cookie.split('; ');
for (var i = 0, l = cookies. i & i++) {
var parts = cookies[i].split('=');
if (decode(parts.shift()) === key) {
var cookie = decode(parts.join('='));
return config.json ? JSON.parse(cookie) :
config.defaults = {};
$.removeCookie = function (key, options) {
if ($.cookie(key) !== null) {
$.cookie(key, null, options);
})(jQuery, document);
使用方法:
提供方便方法操作cookie :
$.cookie('the_cookie'); // 获得cookie
$.cookie('the_cookie', 'the_value'); // 设置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
//设置cookie的名值对,有效期,路径,域,安全
$.cookie(’name’, ‘value’, {expires: 7, path: ‘/’, domain: ‘’, secure: true});
如果在action中出现乱码,需URLDecoder.decode(cookievalue,&utf-8&)
您可能的代码
相关聚客文章
荣誉:1255
相关专栏文章以模块化的方式写“jQuery插件”(二) - 为程序员服务
以模块化的方式写“jQuery插件”(二)
在上一篇文章中,我们说明了为什么要使用一种新的模式来开发jQuery组件。在本文中,我们主要从如何设计这样一种模块化方式来考虑这个问题。
上面是我写的一个Base模块,用于实现这样一个机制。
Base做的事情包括:
给模块增加自定义事件支持
给模块增加set和get方法
设置一些默认执行的方法,比如_init
提供模块的构建功能
提供模块的扩展功能
自定义事件
自定义事件模式是非常实用的,自定义事件用比较专业的词语描述的话,可以称为观察者模式,这种模式背后的主要动机就是促进形成松散耦合。在这种模式中,并不是一个对象调用另外一个对象的方法,而是一个对象订阅另外一个对象的特定活动并在状态改变后等到通知。这意味着我们在做一些事情的时候,不需要关注另外事情的进展,让另外一件事情自己来监听你的进展,然后自己做出对应的处理即可。这样的话,不同的事情之间就不会存在太多的关联,从而降低开发的复杂度。
set和get方法
为了保护和更好地稳定模块的执行,我们需要对模块参数的修改做一些限制和处理。所以我们需要提供set和get方法(现在的Base还没有在get的时候做一些处理),set可以用于在设置模块属性的时候,做一些过滤和处理,保证设置值的正确性,而且更重要的是,你可以在set中触发一个属性修改的事件,从而可以做到修改属性的时候触发一些其他的变化。get则可以用于在访问属性的时候,对返回的属性做一些处理。对于模块内部而言,还需要有一个私有的_set和_get属性,从而可以和外部对模块的访问进行区分。
一些默认执行的方法
默认执行的方法会在两个地方存放,一个是在构造函数中,还有一个是在模块原型上的initliazer方法中。构造函数内主要处理模块间和实例的关系,这些处理是会继承到子模块中的,而在initliazer中主要处理模块真正相关的要执行的一些实例化方法,这样能保证模块在被继承的时候,自有的一些初始化方法不会被继承下去。而initliazer方法是由_init方法调用的,_init方法是模块实例化的时候必定会执行的方法,而initliazer是一个可选的初始化方法。
模块的构建和扩展
Base核心部分就是对模块的构建和扩展。先上代码
Base._build = function (moduleName, superModule, prototypeMethod, attrMember, staticMember, curConstructor) {
//使用prototype方式继承
var Module = function () {
Module.superclass.constructor.apply(this, arguments);
//保存对实例的引用
Module._instances[$.zid(this)] =
if(curConstructor){
Module = curC
//如果给定了构造函数,就在给定的构造函数上进行扩展,否则试用默认的构造函数
return Base._handlerClass(moduleName, Module, superModule, prototypeMethod, attrMember, staticMember)
Base._handlerClass = function (moduleName, module, superModule, prototypeMethod, attrMember, staticMember) {
var tempFn = function () {
name:moduleName,
value:module
//创建对象来保存实例的引用
module._instances = {};
//模块NAME
if (moduleName) {
module.NAME = moduleN
/*Module.toString = function(){
return moduleN
//如果没有传入要继承的对象,则默认为Base
superModule = superModule || B
attrMember = attrMember || {};
staticMember = staticMember || {};
prototypeMethod = prototypeMethod || {};
//挂载ATTRS属性
//如果是继承于另外一个模块,则需要将ATTRS进行合并处理
if (superModule.NAME !== BASE) {
$.extend(attrMember, superModule.ATTRS);
//@修复构造函数自带ATTRS时对应的处理方式
module.ATTRS = module.ATTRS || {};
$.extend(module.ATTRS, attrMember);
//挂在静态属性
$.extend(module, staticMember);
//拷贝一份prototype,防止构造函数直接执行
tempFn.prototype = superModule.
module.prototype = new tempFn();
//把方法添加到Module的原型上
$.extend(module.prototype, prototypeMethod);
//修改构造器,防止回溯失败
module.prototype.constructor =
//保存对超类的引用
module.superclass = superModule.
if (superModule.prototype.constructor == Object.prototype.constructor) {
superModule.prototype.constructor = superM
//保存生成的对象
Base.classList.push(o);
代码细节都有注释,就不多说,主要还是把具体做的事情描述下
确定构造函数。
创建一个空对象来保存实例的引用。
确定模块名。
确定是否继承于其他模块。
拷贝参数的策略(ATTRS)和静态成员
创建原型并拷贝实例成员(原型上的成员)
修复创建原型后构造器指向不对的问题
创建对超类的引用,从而可以手动访问超类
保存生存的对象引用
返回改造完成后的模块
注:以上构造模块的思路主要参考自YUI3的Base模块。
在下一篇中,我们将用这个Base模块来构建一个tab组件
我猜你也会喜欢这些o(∩_∩)o
保持学习的心态
原文地址:, 感谢原作者分享。
您可能感兴趣的代码JS模块化编程
在这之前的页面布局中,如果页面中要有那么就要有和有关的所有HTML标签,这就造成了一个页面中当有很多内容时,当你查看源文件时一大串的代码,编写及维护起来不方便,这个时候就可以想到把不同的功能项写在不同的JS文件中,在前台JS中时行组合,而这,就是本文要讲的JS功能模块编写。
新建MVC项目,并新建一个Index.cshtml页
引入Newtonsoft.Json.dll并添加引用,引入json2.js及jquery-1.7.1.min.js
使用JS模块化编程,不用每一个标签都手动添加到HTML页中,应该由另外的JS文件来动态的添加HTML标签,而前台页面只需做好页面布局即可,这个布局是指:只放置各版块DIV元素。前台页面完整代码如下:
您的浏览器不支持嵌入式框架,或者当前配置为不显示嵌入式框架。使用SeaJS实现模块化JavaScript开发_百度文库
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
评价文档:
使用SeaJS实现模块化JavaScript开发
使​用​S​e​a​J​S​实​现​模​块​化​J​a​v​a​S​c​r​i​p​t​开​发
阅读已结束,如果下载本文需要使用
想免费下载本文?
你可能喜欢

我要回帖

更多关于 jquery面向对象写法 的文章

 

随机推荐