Home > Developer > JavaScript
JS simple console plug-in [For blogs and forums to run js]
I wrote this item last year, but the level was not very good at the time, but I still implemented simple functions. Let me briefly introduce how to use this item. This is because when I write something in a forum or blog, I very much want to have a running function. Of course, most of the functions are implemented open. And there is no console for debugging in the IE6-7, so the brain was writing this thing as soon as it was hot. Maybe you will say that Firebug Lite is not very convenient and compatible with IE6 .. Yes, but my starting point is different. I just wrote a small plug-in that can output the console results. At present, I have experienced a year of baptism in the forum of the fallen leaf brothers, and have encountered various amazing bugs. At the same time, I have learned a lot. One of the bugs that impressed me a lot is that regular expressions cannot be used to process the results. This is because values such as RegExp. $1 and RegExp. $ _ exist during regular expression debugging. If the plug-in uses regular expressions to process the results, the results will be overwritten. For example, Run "aaaa123aaa" in the text ". match (/(\ d +)/); console. log (RegExp. $1); // 123 click Run in the upper right corner to see the effect. If I use regular expressions when processing the results, $1 here will be overwritten or lost. There are still many questions like this, And I really learned a lot. Okay, let's continue with the plug-in. You can go to my Git @ OSC to download the "simple console plug-in" plug-in is very small, min 4.58KB, pure js write is not still any library, compatible with modern browsers and IE6-11. PS: my blog because of syntax highlighting plug-ins, so does not support IE6-8, to test IE6-11 friends can go to the fallen brother forum to see. To call the method, write the file call to the body label. An error occurs when writing the file in the header because the dom ready check is not written. Do not call the console asynchronously because the script determines whether to hijack the console Based on parameters. Therefore, for simplicity and security, you can directly call it in <body>. If the text <script type = "text/javascript" src = "Simple-Console.min.js"> </script> is used during IE6-7 debugging, we recommend that you enable the hijacking mode. Text <script type = "text/javascript" src = "Simple-Console.min.js? Rep "> </script> the global method provides a runjs method to facilitate use in blogs, forums, and other places. Run runjs ('alert ("test. ") '); runjs ('console. log ("test. ") '); runjs ('console. dir ({key: "val"}) '); the console debugging interface level is limited. Only a few simple and commonly used interfaces are provided. Text alert (str); // display information console. log (arg1 [, arg2...]); // displays information about multiple parameters. dir (obj); // if it is an object, the console is displayed. time (str); // test the code running time console. timeEnd (str); // test the code running time console. error (str); // output error information (provided to the plug-in itself) console. clear (); // clear the display (which is actually provided for the plug-in itself). Currently, the basic usage is the same as that of native, but the function is not as powerful as that of native .. PS: for the usage of time and timeEnd, refer to "talking about = and = performance issues" or refer to the official Google documentation. Next, let's talk about how to call this plug-in your blog or forum. Text var runit = {js: function (code, istry) {// run js, whether istry captures runtime errors runjs (code, istry);}, html: function (code) {// run html var newwin = window. open (''," _ blank ",''); newwin.doc ument. open ('text/html ', 'replace'); newwin. opener = null; newwin.doc ument. write (code); newwin.doc ument. close () ;}} this is my current online code, which is very simple. Add a run button to highlight your syntax and bind the event. For example: Text $ (". codeBox "). on ("click ",'. cb-run', function () {var className = this. className, runType = className. indexOf ('html ')>-1? "Html": "js", istry = ~ ClassName. indexOf ("notry"), code = $ (this ). partnet (). find ("pre "). text (); // get the code text in the pre // or so // var code = $ (this ). partnet (). data ("code"); // The source code bound when highlighted, which is more efficient than getting text each time. Runit [runType] (code, istry); // run code}); this is almost the core idea of running the function of my blog. Of course, I also did some other processing, because the syntax highlighting plug-in I used is only a highlighted function, and all the buttons and things were added by myself. Well, today's sharing is almost like this. If you have any questions or encounter bugs, you can leave a message and I will handle it in time.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
