浅层次分析链式调用的部分原理

Sike 发布于2019-08-22 18:03 / 1431人阅读

摘要：本来是想写分析的部分原理，想想因为也没有去看过源码，就改了下标题。准备工作，用去实例化链式调用并非是无限延伸，而是调用完就回撤然后再次调用的过程。所以链式调用的基本原理是每个方法都要，并且每个方法调用都是基于的。

本来是想写分析jQuery的部分原理，想想因为也没有去看过jQuery源码，就改了下标题。

出发点很简单，写一个类似jQuery的简化版工具库。

准备工作，用$去实例化：

function $(domName) {
     return new obj(domName);
 }

链式调用并非是无限延伸，而是调用完就回撤然后再次调用的过程。
所以链式调用的基本原理是每个方法都要return this，并且每个方法调用都是基于this的。
就好比打拳，虽然打出去的动作不一样，但是打出去就得收回来，再出拳。

出于简化与个人水平原因，选择器方面，暂时只写了id 和 class类型的

function obj(domName) {
     if (String(domName)[0] === "#") {
         this.total = "singular";//表示选择器获得节点为单数，调用其他方法的时候无需循环
         this.init = document.getElementById(new String(domName).substring(1,new String(domName).length));//获取节点
     }else if(String(domName)[0] === "."){
         this.total = "majority";//表示选择器获得节点为多数，调用其他方法的时候需要循环
         this.init = document.getElementsByClassName(new String(domName).substring(1,new String(domName).length));//获取节点
     } 
     this.length = this.init.length;
 }

click事件(change,mouseover等事件原理类似)

obj.prototype.click  = function (cb) {
    this.init.onclick = cb;//节点点击触发回调函数
    return this;
}

eq选择器，eq是改变this的选择对象（this.init）

obj.prototype.eq= function (index) {
    this.init = this.init[index];
    this.total = "singular";//改变选择节点的数目类型
    return this;
}

hide（show需要获取一下之前的display。。。相比较hide复杂一些）

obj.prototype.hide  = function () {
    if (this.total  === "majority") {//选择的节点为多数需要循环
        for(let i = 0; i < this.init.length; i ++) {
        this.init[i].style.display = "none";
        }
    }else if( this.total === "singular"){
        this.init.style.display = "none";
    }
    
    return this;
}

GPU云服务器云服务器 php的链式写法云计算的层次子窗口的层次相关云计算的服务层次

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

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

30分钟，让你彻底明白Promise原理

摘要：链式是指在当前达到状态后，即开始进行下一个后邻。在中发现没有指定异步操作失败的回调时，会直接将函数返回的，后同设为状态，如此达成执行后续失败回调的效果。原文链接前言前一阵子记录了promise的一些常规用法，这篇文章再深入一个层次，来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解，可以移步我的上...

Profeel 2019-08-20 16:41 评论0 收藏0
从图像到知识：深度神经网络实现图像理解的原理解析

摘要：本文将详细解析深度神经网络识别图形图像的基本原理。卷积神经网络与图像理解卷积神经网络通常被用来张量形式的输入，例如一张彩色图象对应三个二维矩阵，分别表示在三个颜色通道的像素强度。本文将详细解析深度神经网络识别图形图像的基本原理。针对卷积神经网络，本文将详细探讨网络中每一层在图像识别中的原理和作用，例如卷积层(convolutional layer)，采样层(pooling layer)，...

UnixAgain 2019-04-25 18:03 评论0 收藏0
深度学习-LeCun、Bengio和Hinton的联合综述（上）

摘要：三大牛和在深度学习领域的地位无人不知。逐渐地，这些应用使用一种叫深度学习的技术。监督学习机器学习中，不论是否是深层，最常见的形式是监督学习。三大牛Yann LeCun、Yoshua Bengio和Geoffrey Hinton在深度学习领域的地位无人不知。为纪念人工智能提出60周年，的《Nature》杂志专门开辟了一个人工智能 + 机器人专题，发表多篇相关论文，其中包括了Yann LeC...

DrizzleX 2019-04-25 17:59 评论0 收藏0
jQuery 源码系列（一）总体架构

摘要：到目前为止，的贡献者团队共名成员，多条，可想而知，是一个多么庞大的项目。参考源码分析整体架构源码解析读书笔记第二章构造对象函数详解本文在上的源码地址，欢迎来。欢迎来我的专栏查看系列文章。决定你走多远的是基础，jQuery 源码分析，向长者膜拜！我虽然接触 jQuery 很久了，但也只是局限于表面使用的层次，碰到一些问题，找到 jQuery 的解决办法，然后使用。显然，这种做法的...

svtter 2019-08-21 15:13 评论0 收藏0
jQuery源码分析-整体架构（转）

摘要：文章出处拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。利用下的简单工厂模式，来将所有对于同一个对象的操作指定同一个实例。所以的中提供了以上中扩展函数。文章出处 http://www.cnblogs.com/aaronjs/p/3278578.html 拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，...

voidking 2019-08-21 10:39 评论0 收藏0