模拟 react 框架编码

最新推荐文章于 2023-10-03 20:07:17 发布

Rkatsiteli

最新推荐文章于 2023-10-03 20:07:17 发布

阅读量947

点赞数

分类专栏： JavaScript + JQuery 文章标签：框架

本文链接：https://blog.csdn.net/qq_16559905/article/details/51446206

版权

JavaScript + JQuery 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

前端 React 源码，真是无语，不得不说FaceBook写的就是牛逼，JS的逻辑特别的清晰，耦合性特别的强。

感觉 React 不错，所以就看了看源码，没事儿就模拟了下，代码附上：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <title></title>
    </head>

    <body>
        yubai
    </body>
    <script src="../../build/jquery.min.js"></script>
    <script src="man.js"></script>
    <script>
        console.log(React);
        console.log(React.render);
        React.render.search();
    </script>

</html>

main.js文件

(function(f){
    if (typeof exports === "object" && typeof module !== "undefined") {
        module.exports = f()
    } else if (typeof define === "function" && define.amd) {
        define([], f)
    } else {
        var g;
        if (typeof window !== "undefined") {
            g = window
        } else if (typeof global !== "undefined") {
            g = global
        } else if (typeof self !== "undefined") {
            g = self
        } else {
            g = this
        }
        g.React = f()
    }
})(function(){

    return (function e(t, n, r) {
        function s(o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = "MODULE_NOT_FOUND", f } var l = n[o] = { exports: {} }; t[o][0].call(l.exports, function(e) { var n = t[o][1][e]; return s(n ? n : e) }, l, l.exports, e, t, n, r) } return n[o].exports }
        var i = typeof require == "function" && require;
        for (var o = 0; o < r.length; o++) s(r[o]); return s })({ 1: [function(_dereq_, module, exports){ 'use strict'; var assign = _dereq_(2); var React = { render: assign, }; module.exports = React; }, { "2": 2, "3":3 }], 2:[function(_dereq_, module, exports){ console.log("222222222222222222222222222"); var strSub = { search:function(){ console.log("这里是数组1的 search()方法") }, searchName:function(){ console.log("这里是数组1的 searchName()方法") } }; module.exports = strSub; }, {}] }, {}, [1])(1)

});