资讯专栏INFORMATION COLUMN

jQuery,zepto源码的简单实现记录

Dean / 3447人阅读

摘要:本文记录,对的一些封装库的知识,我希望从本文开始去深入学习这门语言,以及在面向对象,原型上封装的使用。让自己在方面有能够有一定进步。

本文记录jQuery,Zepto对js的一些封装库的知识,我希望从本文开始去深入学习js这门语言,以及在面向对象,原型上封装的使用。让自己在js方面有能够有一定进步。共勉
jQuery库 简单的jQuery库的实现

需要先了解闭包,立即执行函数以及JavaScript原型的概念

(function(window) {
    var jQuery = function(selector) {
        // 一个对象工厂,以后生成新对象就不用new了,直接执行这个方法即可
        // 第一步就用new 关键字来实例化一个构造函数
        return new jQuery.fn.init(selector);
    }
    // 定义构造函数
    var init = jQuery.fn.init = function(selector) {
        var slice = Array.prototype.slice;
        var dom = slice.call(document.querySelectorAll("*"));
        var i, len = dom.length;
        for(i = 0; i < len; i++) {
            this[i] = dom[i];
        }
        this.length = len;
        this.selector = selector || "";
    }
    
    jQuery.fn = jQuery.prototype = {
        // 改变构造器的指向
        constructor: jQuery,
        css: function(key, val) {
        
        },
        html: function(val) {
            
        }
    }
    
    // 连接初始化实例的原型
    // init.prototype = jQuery.fn;
    jQuery.fn.init.prototype = jQuery.fn;
})(window);   
    
Zepto库 简单的zepto库的实现
(function(window) {
    var zepto = {};

    function Z(dom, selector) {
        var i,
      len = dom ? dom.length : 0;
    for(i=0; i

附上待学习连接:

[几个JS代码手写专题](https://www.imooc.com/article/23902)


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103285.html

相关文章

  • Zepto 源码分析 1 - 进入 Zepto

    摘要:选择的理由是一个用于现代浏览器的与大体兼容的库。环境搭建分析环境的搭建仅需要一个常规页面和原始代码一个常规页面打开的首页即可,在开发人员工具中即可使用原始代码本篇分析的代码参照,进入该代码分支中即可。 选择 Zepto 的理由 Zepto is a minimalist JavaScript library for modern browsers with a largely jQue...

    Aklman 评论0 收藏0
  • Zepto 源码分析 2 - Polyfill 设计

    摘要:此模块包含的设计思路即为预以匹配降级方案。没有默认编译该模块,以及利用该模块判断后提供平台相关逻辑的主要原因在于其设计原则的代码完成核心的功能。此处,也引出了代码实现的另一个基本原则面向功能标准,先功能覆盖再优雅降级。 在进入 Zepto Core 模块代码之前,本节简略列举 Zepto 及其他开源库中一些 Polyfill 的设计思路与实现技巧。 涉及模块:IE/IOS 3/Dete...

    chuyao 评论0 收藏0
  • 库,组件,框架 - 收藏集 - 掘金

    摘要:哈哈,我理解,架构就是骨架,如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。 翻译 | 上手 Webpack ? 这篇就够了! - 掘金译者:小 boy (沪江前端开发工程师) 本文原创,转载请注明作者及出处。 原文地址:https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

    tommego 评论0 收藏0
  • zepto源码分析之form模块

    摘要:形如源代码在的原型上添加了相关方法。类似源代码每个表单的和都通过编码最后通过符号分割有了的基础,就是将相应的和都通过编码,然后用符号进行分割,也就达到了我们要的结果。 前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto中form模块关于表单处理的几个方法,serialize、serializeArray、sub...

    Muninn 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<