js 超濃縮雙向繫結

阿新 • • 發佈：2020-12-12

繫結確實是個有趣的話題。

現在我的繫結器有了不少的功能

1. 附著在Object物件上，一切以物件為中心

2. 與頁面元素進行雙向繫結

3. 與任意物件繫結，主要是應用在繫結到頁面元素的一些屬性上，比如style，當然也可以繫結到任意使用者自定義的物件上

4.可以繫結到方法，讓物件具有AddEventListener類似的功能，這應該是終極的擴充套件功能了

5. 支援selector，function，object 的引數寫法

6. 預設繫結到value或者innerhtml屬性上

Object.prototype.bind = function (key, obj, prop, event) {
    var 
 that = this
    if (this[key] == undefined) this[key] = ‘‘;
    var bc = undefined;
    if (!this.__bc__) {
        this.__bc__ = {};
        Object.defineProperty(this, "__bc__", { enumerable: false });
    }
    if (!this.__bc__[key]) {
        this.__bc__[key] = [];
        this.__bc__[key].value = this[key]
        bc = this.__bc__[key];
        Object.defineProperty(this, key, {
            get: function () {
                return bc.value
            },
            set: function (value) {
                if (bc.value == value) return;
                bc.forEach(function (l) { l(value); })
                bc.value = value
            }
        })
    }
    bc = this.__bc__[key];
    if (prop == undefined) prop = "value";
    if (event == undefined) event = ‘change‘;
    if (typeof obj == ‘string‘) {
        var els = document.querySelectorAll(obj);
        function b(el, p) {
            if (el[p] == undefined) p = "innerhtml 
"
            bc.push(function (value) { el[p] = value; });
            if (el.addEventListener) {
                el.addEventListener(event, function (e) {
                    that[key] = el[p];
                })
            }
            el[p] = bc.value;
        }
        for (var i = 0; i < els.length; i++) {
            var el = els[i];
            b(el, prop)
        }
    } else if (typeof obj == ‘function‘) {
        bc.push(obj);
        obj(bc.value);
    } else if (typeof obj == ‘object‘) {
        var p = prop
        if (obj[p] == undefined) p = "innerHTML"
        bc.push(function (value) { obj[p] = value; })
        obj[p] = bc.value;
        if (obj.addEventListener) {
            obj.addEventListener(event, function (e) {
                that[key] = obj[p];
            })
        }
    } else {
        console.log("obj = " + obj + " 不是 [selector,function,element] 中的任何一種，繫結失敗！")
    }
}

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

再來個簡單的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試專案</title>
    <script src="bind.js"></script>

</head>

<body>
    <h1 class="v1"></h1>
    <input class="v1" type="text" id="i1">
    <input type="text" id="i2">
    <script>
        var a = { value: ‘s‘, s: ‘red‘ }
        a.bind(‘value‘, ".v1", ‘value‘, ‘input‘)
        a.bind(‘s‘, i1.style, ‘background‘)
        a.bind(‘s‘, i2)
    </script>
</body>

</html>

js 超濃縮雙向繫結

繫結確實是個有趣的話題。現在我的繫結器有了不少的功能 1. 附著在Object物件上，一切以物件為中心

純JS如何實現vue.js下的雙向繫結功能

目錄首先說一下實現雙向繫結的思路：再說一下實現這些功能的js主要的方法有哪些：最後需要建立哪些工具程式設計客棧類？實現vue雙向繫結看下面截圖

js-變數實現雙向繫結

單向資料繫結指先把模板寫好，然後把模板和資料（資料可能來自後臺）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入到文件流裡

js實現資料雙向繫結（訪問器監聽）

本文例項為大家分享了實現資料雙向繫結的具體程式碼，供大家參考，具體內容如下

使用JS如何實現雙向繫結（1）

1.在ES5中給我們定義了一個Object.defineProperty方法（詳細可以參考MDN） Object.defineProperty()方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回此物件。

Vue.js 3.x 雙向繫結原理

什麼是雙向繫結？廢話不多說，我們先來看一個 v-model 基本的示例： <input type=\"text\" v-model=\"search\">

js實現檢視和資料雙向繫結的方法分析

本文例項講述了js實現檢視和資料雙向繫結的方法。分享給大家供大家參考，具體如下：

02、JS高階函式、v-model表單的雙向繫結

目錄JavaScript高階函式的使用JS中的for迴圈JS中與陣列有關的高階函式v-model表單輸入繫結v-model的基本使用v-model的原理v-model和radio的結合---單選框v-model和checkbox的結合---多選框v-model結合select標籤修飾

有關js的雙向繫結解除方法

最近碰到了一個bug var persons = [{ number: 1, age: 11, name: \"wanghaha\", money: -1 }, { number: 2, age: 12, name: \"王一一\", money: -3 }, { number: 3, age: 13, name: \"王三十\", money: 4 }];

JS中Object.defineProperty()方法實現資料雙向繫結

技術標籤：jsjavascriptjava Object.defineProperty() 方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回此物件。語法：Object.defineProperty(obj物件, prop屬性, descriptor描述符)

一點知識丨Vue.js 中 prop 如何科學地實現雙向繫結

技術標籤：網路jshtml程式語言css 這是「進擊的Coder」的第344篇技術分享作者：崔慶才

利用js實現Vue2.0中資料的雙向繫結功能

Object.defineProperty瞭解語法： Object.defineProperty(obj,prop,descriptor) obj 要定義屬性的物件。

js賦值變了，被賦值的物件也變了。封裝元件時，初始化一個物件，將初始化物件賦值給另一個物件，與form表單雙向繫結，form表單變了，與form表單雙向繫結的值也變了，最終導致初始化物件改變

就是在封裝元件時，初始化一個initForm物件，然後將這個物件賦值給一個formDat物件，傳入form元件與form表單雙向繫結。當form表單改變了，會引起formDat改變。然後想重置表單時，再令formData = initForm。這個時候

vue子元件改變父元件傳遞的prop值通過sync實現資料雙向繫結(DEMO)

最近開始在用elementUI做一個後臺管理系統專案，遇到一個問題，需求是這樣，在父元件有一個按鈕，點選按鈕會顯示彈窗（子元件），在子元件中用的是elementUI 的el-diolog彈窗元件，在關閉彈窗時（elementUI自帶事件）

javascript用defineProperty實現簡單的雙向繫結方法

defineProperty Object提供的方法，用於給物件新增自定義屬性具體用法如下： const obj = { _value: 1 };

Vue 的雙向繫結原理與用法揭祕

本文例項講述了Vue 的雙向繫結原理與用法。分享給大家供大家參考，具體如下：

Vue資料雙向繫結原理例項解析

Vue資料雙向繫結原理是通過資料劫持結合釋出者-訂閱者模式的方式來實現的，首先是對資料進行監聽，然後當監聽的屬性發生變化時則告訴訂閱者是否要更新，若更新就會執行對應的更新函式從而更新檢視

Vue 如何使用props、emit實現自定義雙向繫結的實現

下面我將使用Vue自帶的屬性實現簡單的雙向繫結。下面的例子就是利用了父元件傳給子元件（在子元件定義props屬性，在父元件的子元件上繫結屬性），子元件傳給父元件（在子元件使用$emit()屬性定義一個觸發方法，在父

手寫一個vue雙向繫結的過程

通過Object.defineProperty()來進行資料劫持demo.html <body> <div id=\"app\"> {{message}}

詳談Object.defineProperty 及實現資料雙向繫結

Object.defineProperty() 和 Proxy 物件，都可以用來對資料的劫持操作。何為資料劫持呢？就是在我們訪問或者修改某個物件的某個屬性的時候，通過一段程式碼進行攔截行為，然後進行額外的操作，然後返回結果。那麼vue

js 超濃縮 雙向繫結

相關推薦

js 超濃縮雙向繫結