Javascript $jQuery外部

此应用程序接受上传的照片，将二维码附加到照片上，然后允许您共享照片。除了QR功能之外，我已经在下面附上了JavaScript。该应用程序不使用jQuery，但在开始时它为$分配了一个函数

  window.onload = function(){
                    var $ = function(id){
                            console.log(id);
                            return document.getElementById(id);
                        },

当我在上面的位置运行console.log应用程序时，它显示有相当多的“id”通过console.log（id）传递。当文件加载时，它会记录“surface”、“cam”和“upload”，当你使用应用程序时，它会记录“result”、“sharer”、“UploadeUrl”和许多其他内容。问题是，我看不出console.log如何始终通过该函数记录代码中该点的不同id。因此，我想知道“$”在这个上下文中的意义是什么（没有jQuery）。具体地说，通过创建“$”函数，它是否可以在运行带有$的任何其他事件时调用，例如

$（'upload'）。onclick=function（）{…

它的工作方式是否与在jquery中使用

$.prototype.function（）

在jquery中添加原型的工作方式类似。如果是，如果没有jquery，它从何处获得此功能

window.onload = function(){
                var $ = function(id){
                        console.log(id);
                        return document.getElementById(id);
                    },
                    canvas = $('surface'),
                    ctx = canvas.getContext('2d'),
                    watcher, loc='No location provided', located;

                $('cam').onchange = function(event){
                    console.log(event);
                    console.trace();
                    var files = event.target.files,
                        file;

                    if (files && files.length > 0) {
                        file = files[0];
                        try {
                        var URL = window.URL || window.webkitURL || window.mozURL;
                        var imgURL = URL.createObjectURL(file);

                        var img = new Image();
                            img.id = "tester";

                        //Load it onto the canvas
                        img.onload = function() {
                            console.trace();

                            canvas.width = this.width;
                            canvas.height = this.height;
                            $('info').innerHTML = ("Width: " + this.width + "px, Height: " + this.height + "px");
                            $('result').width = 400;
                            $('result').height = (400 / (this.width/this.height)) >> 0;
                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                            var codeSize = (canvas.height/4) >> 0;
                            var imgn = new Image(); 
                            imgn.onload = function(){
                                ctx.drawImage(imgn, (canvas.width-5- codeSize), (canvas.height-5-codeSize), codeSize, codeSize);
                                $('result').src = canvas.toDataURL();
                            }
                            imgn.src = (QR.encode(loc, codeSize, 5));
                        }

                        img.src = imgURL;

                        } catch (e) {
                            console.log("error: " + e);
                        }
                    }
                },
                // borrowed this functionality from cgack's demo
                // https://developer.mozilla.org/en-US/demos/detail/snap-and-share 
                $('upload').onclick = function(){
                    $('infomsg').style.display = 'block';
                    var url = "http://api.imgur.com/2/upload.json",
                    params = new FormData(),
                    http = new XMLHttpRequest();

                    params.append('key','29a8b1db1d8fda0df87006def2307242');
                    params.append('image',canvas.toDataURL().split(',')[1]);

                    http.open("POST", url);
                     http.onload = function() {
                        var url = JSON.parse(http.responseText).upload.links.imgur_page;
                        $('uploadedUrl').href = url;
                        $('uploadedUrl').innerHTML = url;
                        $('shareFb').href = ("http://www.facebook.com/sharer.php?u="+url);
                        $('shareTwitter').href = ("http://twitter.com/intent/tweet?url="+url);
                        $('sharer').style.display = 'block';
                         $('infomsg').style.display = 'none';

                    };
                    http.send(params);
                    console.log(params);
                };
                watcher = navigator.geolocation.watchPosition(function(position){
                    console.trace();
                    console.log("navigator"); 
                    loc = "geo:" + position.coords.latitude + "," +position.coords.longitude;
                    located = true;
                }, function(error){
                    if(error.code == error.PERMISSION_DENIED || error.code == error.POSITION_UNAVAILABLE)
                        alert('damn, we were not able to locate you. sorry.');
                    }
                );
            };

---

$

和其他变量一样，只是一个变量名。它没有特殊意义

“问题是，我看不出console.log在代码中记录“id”时如何始终通过该函数传递所有信息。”

任何时候你看到

$

，它都是对函数的引用。因此，

（）

在它使用给定参数调用它之后。它就像任何其他函数一样，只是有一个有趣的名称引用它

因此，我想知道“$”在这个上下文中的意义是什么（没有jQuery）。具体地说，通过创建“$”函数，它是否可以在运行任何其他带有$的事件时被调用

同样，没有实际意义。它只是一个函数名。如果您将

$

的所有实例重命名为

byId

，它的行为将是相同的

window.onload = function(){
           //   var $ = function(id){
                var byId = function(id){
                        console.log(id);
                        return document.getElementById(id);
                    },
                    canvas = foo('surface'),
                    ctx = canvas.getContext('2d'),
                    watcher, loc='No location provided', located;

                byId('cam').onchange = function(event){
                   /* a bunch of code */
                },
                byId('upload').onclick = function(){
                   /* a bunch of code */
                };
                // rest of the code
            };

---

这里的错误是认为

$

意味着jQuery。jQuery使用

$

，就像任何其他Javascript代码一样。它只是一个。你的问题是什么？还可以注意到$被其他库（如Prototype.js）使用。