美文网首页
The working principle of Browser

The working principle of Browser

作者: Zparkle | 来源:发表于2018-08-22 18:19 被阅读0次

File Create

First of all, follow Browserify to install browserify, and follow the way to build an simple bundle of js files with moudels.
As you can see in the Browserify, I build a simple .js file called "main.js" and bundled it.

//main.js
var unique = require('uniq');
var data  =[1,2,2,3,4,5,5,5,6];
console.log(unique(data));

Then use browserify to make a bundle

browserify main.js -o bundle.js

Now I get a bundle.js file which I can see how it work out like a complete .js file with all it depandenies.

Structure

First of all, format the js file, you will see the code structure like below:

(function(){
    function r(e,n,t){
        function o(i,f){
            //this is the major which try to run the specific moudule file and return the file's moudule.export
        }
        for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)
        {
            //this loop will run every ID in the given list(thes files should be the user js files)
            o(t[i]); 
        }
        return o 
    }
    return r;
})()(
    {
        //this is a object look like a dict use ID to get module
    },
    {
        //this is a object to save all export of modules(so always be empty at the beginning)
    },
    [1] //this is a list which should be the ID of modules which should run automaticily
);

How it work

function "o" is the major which try to run the specific moudule file and return the file's moudule.export

If you really carefully read the code show you last section, you can easily understand how it working.

  1. First of all put all codes in a anonymous function then call it
  2. The anonymous function return another function named "r"
  3. Call "r" with a dict{ ID : Module Code}, a empty object{} and a list of IDs of user modules in first attribute
  4. "r" will go into a loop, and in the loop you will see it rotativily call function "o" with every IDs in the last attribute of "r"
  5. Generally, first user module will be called, in this page, is below:
function (require, module, exports) {
    var unique = require('uniq');
    var data  =[1,2,2,3,4,5,5,5,6];
    console.log(unique(data));
}
  1. When use function "require" in the code, It call function below:
function (r) { var n = e[i][1][r]; return o(n || r) }

This function will get a obj which contain string with a ID like

{ "uniq": 2 }

This is the object just follow the user script module, so can be access through e[i][1[r]. You can see "r" is the name of module, and the object provide the dict of module name with it's ID. This is a useful dict created by Browserify system.

  1. Then the function will call function "o"
  2. Function "o" will try to use ID to find the specific module and then recursively read all modules which needed and finally return the export of the specific module.
  3. User code run successfully.

Important
You will see that the inner code in the above function is very similar to the code I provided in very front this page. But the real code now has been putted into a function by the Browserify.
To find out what the three attribute really is and to understand how it work as normal require,module and exports, we go to the line which call the real module in function "o".

Function Detail

function o(i, f) { 
            if (!n[i]) { 
                //for n is nothing at first, here will always be true when first call
                if (!e[i]) {
                    var c = "function" == typeof require && require;
                    if (!f && c) 
                        return c(i, !0); 
                    if (u) 
                        return u(i, !0); 

                        //find that in the list no moudle function fit the number, try use require to get the moudle directly,
                        //if no require, can't find module
                    var a = new Error("Cannot find module '" + i + "'"); 
                    throw a.code = "MODULE_NOT_FOUND", a 
                } 
                // in the list some thing can be found with the number given
                var p = n[i] = { exports: {} };
                //set {exports:{}} both to n[i] and p
                e[i][0].call(p.exports, function (r) { var n = e[i][1][r]; return o(n || r) }, p, p.exports, r, e, n, t)
            } 
            return n[i].exports 
        } 

Need complete later, but above is enough for you to understand how Browserify work.(Xia Ban Le)

相关文章

  • The working principle of Browser

    File Create First of all, follow Browserify to install br...

  • 5月5日 学习方法论整理

    Working memory And non-working memory Non-working memory ...

  • browser-Browser-Introduction to

    Blockstack浏览器使用户能够探索和使用去中心化的应用程序(DApps)。DApps是一种与互联网互动的新方...

  • Titan browser navigation

    Titan browser navigation, professional browser navigation...

  • Browser Helper Objects: The Brow

    Browser Helper Objects: The Browser the Way You Want It 本...

  • Principle

    《Principles》 by Ray Dalio 阅读笔记 会持续更新 fundamental princip...

  • principle

    It is easier to fight for principles than to live up to t...

  • principle

    经验:坚持自己的底线,突破他人的底线,也要誓死维护自己的底线。底线是要用生命来维护的。 别人爱怎么想怎么想,跟我没...

  • principle

    1只做必要之中最必要的事 2了解前人做了什么,已经足够 3只有远离人群才会获得独特的知识框架和思维结构 4只有你足...

  • 《Principle》

    我认为社会上“犯错恐惧症”会带来严重后果。这个问题从小学就开始了,老师教什么,我们就学什么,也不会教我们树立自己的...

网友评论

      本文标题:The working principle of Browser

      本文链接:https://www.haomeiwen.com/subject/kipyiftx.html