zepto设计和源码分析（推荐）

时间 2019-11-17

标签 zepto 设计源码分析推荐繁體版

原文原文链接

课程地址：https://www.imooc.com/learn/745javascript

1、简单介绍

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" http-equiv="X-UA-Compatible" content="IE=edge,width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0">
    <title>zepto</title>
    <style>
        .blue{color:blue;}
    </style>
    <script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.js"></script>
</head>
<body>
    <p id="p1">测试</p>
    <div>
        <span>test</span>
        <span>test</span>
        <span>test</span>
    </div>
    <script >
        var $p1 = $('#p1')
        var $span = $('span')
        console.log($p1);
        console.log($span);
    </script>
</body>
</html>

arr.__proto__.addClass = function(){alert(456)}

2、js原型基础

constructor是指向这个对象自己css

这两种写法彻底同样html

写法等价java

数组：数组

整理：函数

//第一句话----------------每一个函数都有一个prototype属性
var fn = function(){}
fn.prototype
fn === fn.prototype.constructor

//第二句话----------------全部经过函数new出来的东西，这个东西都有一个__proto__指向这个函数的prototype
//空函数
var fn = new Function()
fn.__proto__
fn === arr.prototype.constructor//true

//数组
var arr = []//等同下面一行的写法
var arr = new Array()//写法2，等同上一行
arr.__proto__
arr === arr.prototype.constructor//true

//对象
var a = {}//等同下面一行的写法
var a = new Object()//写法2，等同上一行
a.__proto__
a === arr.prototype.constructor//true


//第三句话----------------当你想要使用一个对象（或者一个数组）的某个功能时：若是该对象自己具备这个功能，则直接使用；若是该对象自己没有这个功能，则去__proto__中找

//举例
arr.push(1)
arr//[1]
arr.__proto__.addClass= function(){alert(111)}//数组没有addClass方法，在__proto__自定义添加
arr1.addClass()//执行，结果是弹出111的对话框



//----------------原理：原型对象
Array
Array.prototype
Object
Object.prototype
Function
Function.prototype

//等价写法
[].concat === Array.prototype.concat;//true
arr.__proto__ === Array.prototype;//true

3、源码分析

3.1分析结构

var arr = [1,2,3]
arr.__proto__ ={
    addCLass:function(){
        console.log('this is addClass')
    },
    concat:Array.prototype.concat,
    push:Array.prototype.push
}

//验证
var $p = $('p');
// 使用constructor验证
arr.__proto__.constructor === $p.__proto__.constructor//true

// 使用instanceof验证
console.log($p instanceof Array);//false
console.log(arr instanceof Array);//false

插件机制源码分析

双斜线支持http，https，须要cdn支持测试

之上是core模块的内容ui

3.2分析inint函数

视频附加信息连接：http://www.kancloud.cn/wangfupeng/zepto-design-srouce/173680this

qsa

返回数组

返回函数

3.3 Z函数

空数组

IE低版本不支持

zepto设计和源码分析（推荐）

1、简单介绍

2、js原型基础

3、源码分析

3.1分析结构

3.2分析inint函数

3.3 Z函数

3.4对比新旧zpeto的版本

4、总结