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