分类 JavaScript 下的文章

今天正好有个老朋友聊起来jquery源码,他对于源码不了解,我抱着学习交流的心态,给他讲解了核心实现。(好像自己也鸽了好长时间)

顺便在哪个cdn服务商找个jquery文件打开, 我这里用的1.2.3版本为例,最新版本也差不多,只有两三处变化https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js

源码分析

17-20行传入选择器,返回自身new出来的init方法,估计你们也没用过$()的第二个参数,这里省略掉

var jQuery = window.jQuery = function(selector) {
    return new jQuery.prototype.init(selector);
}

26-27行这就是为什么总是用$开头的原因,挂载到window对象下,属于全局变量

// Map the jQuery namespace to the '$' one
window.$ = jQuery;

36-547行剔除我们不需要的保留核心,留下init方法,内部做了jquery实例与选择器的判断,这里我们忽略掉,简化

jQuery.fn = jQuery.prototype = {
    init: function(selector) {
        var nodes = document.querySelectorAll(selector);
        for (var i in nodes) {
            this[i] = nodes[i];
        }
        return this;
    }
    //此处省略十万字
}

549行来上一段这个,jquery原型链传递给jquery原型下init方法的原型,回头再看new时候的代码,很清楚明了

jQuery.prototype.init.prototype = jQuery.prototype;

完整实现

在jQuery的原型上继续增加功能就很接近初版jQuery了,这里我是简单实现了text()方法

    var jQuery= function (selector) {
        return new jQuery.fn.init(selector);
    }

    jQuery.fn = jQuery.prototype = {
        init: function (selector) {
            var nodes = document.querySelectorAll(selector);
            for (var i in nodes) {
                this[i] = nodes[i];
            }
            return this;
        },
        element: function (callback) {
            for (var i = 0; i < this.length; i++) {
                callback(this[i]);
            }
        },
        text: function (content) {
            if (content == '' || content) {
                this.element(function (node) {
                    node.innerHTML = content;
                })
                return content;
            } else {
                return this[0].innerHTML;
            }
        },
    }

    jQuery.prototype.init.prototype = jQuery.prototype;

    window.$ = jQuery;

结束

核心其实一点不复杂,插件的实现我倒是很喜欢,自身的功能我看来大部分全是用插件实现的,工具自身的巧妙设计加上便利性。

在传统页面制作上jquery一把梭用的很舒服,但MVVM的出现改变了大家的思考方式,只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,对于项目管理轻松不少。

如果有简单需求的单页上,jquery还是有用武之地的,上MVVM只能是徒增麻烦。

新版本看这里


简单表白墙实现

手机适配,电脑访问不是很友好

表白墙这个灵感来自初夏千秋,当时看了ta(他?她?)的表白墙,不是很满意,于是想着自己做了一个

表白墙这个有点像超小型的微博系统,所需要的数据库结构也不复杂,表结构如下:

CREATE TABLE IF NOT EXISTS `unburden` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `你的名字` varchar(12) NOT NULL,
  `ta的名字` varchar(12) NOT NULL,
  `内容` text NOT NULL,
  `ip` varchar(15) NOT NULL COMMENT '后期控制滥发刷屏',
  `utime` datetime NOT NULL COMMENT '这是个预留,现在不知道干嘛',
  `mid` varchar(32) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `mid` (`mid`)
) ENGINE=MyIsAM  DEFAULT CHARSET=utf8mb4 AUTO_INCREMENT=1 ;
  • 存储引擎用 InnoDB ,可以支持事务处理 MyIsAM 不能 还是用 MyIsAM
  • 这里设置 ip 字段呢,防止有熊孩子滥发,限制表白次数。(你也没必要一段时间内发那么多啊,滥情小渣男吗)
  • utime 字段暂时没有用,后期可以考虑 按时间分类查看相应表白
  • 我这里用 mid 字段是来分开每条表白页面的(不要笑我),不至于url上面是 id=1,id=2
  • 表的字符集用的是 utf8mb4(utf爸麻痹死?)这是可以支持 emoji 表情哦~

utf8只支持1-3个字节,差不多就是0000-ffff。而 utf8mb4 支持4个字节并且兼容utf8,所以支持更多的字符。

- 阅读剩余部分 -