在写JS的过程中,为了调试我们常常会写很多 console.log、console.info、console.group、console.warn、console.error代码来查看JS的运行情况,但发布时又因为IE不支持console,又要去掉这些代码,一不小心就会出错。
本文分享自己昨晚写的一个console类来试图解决这一问题。当然,更好的做法是把测试代码分开写,那样就不会有这个问题。
解决思路
如何解决IE下不兼容的问题呢,那就是我们自己定义一个console类来覆盖浏览器提供的console功能,这样只要在页面中引用此JS文件就可以了。
另外,此类还提供了查看输出的调试信息功能,console 定义了哪些功能呢,我们可以在这里看到:http://getfirebug.com/wiki/index.php/Console_API,我们可以看到这里提供了很多方法,我们常用的有 console.log、console.info、console.group、console.warn、console.error、console.profile、console.time,最后两个是分析代码性能的,比较复杂,本文没有实现。
代码解析
第一步,当然是搭一个结构,覆盖浏览器(firebug、chrome)提供的console功能,这样直接引用此JS文件即可保证浏览器(主要是IE)中不出错:
console
var console={
assert:function(){
},
clear:function(){
},
count:function(){
},
debug:function(){
},
dir:function(){
},
dirxml:function(){
},
error:function(){
},
exception:function(){
},
group:function(name){
},
groupCollapsed:function(){
},
groupEnd:function(){
},
info:function(){
},
log:function(){
},
memoryProfile:function(){
},
memoryProfileEnd:function(){
},
profile:function(){
},
profileEnd:function(){
},
table:function(){
},
time:function(){
},
timeEnd:function(){
},
timeStamp:function(){
},
trace:function(){
},
warn:function(){
}
};
第二步,实现 console.log方法。在所实现的几个方法中这个是最复杂的。
从firebug的API中我们可以看到,console.log不仅仅可以输出信息,还提供了类似 string.Format的功能,直接引用原文如下:
Here is the complete set of patterns that you may use for string substitution:
Pattern | Type |
---|---|
%s | String |
%d, %i | Integer (numeric formatting is not yet supported) |
%f | Floating point number (numeric formatting is not yet supported) |
%o | Object hyperlink |
%c | Style formatting |
console.log('%cTest Output', 'color:white; background-color:blue');
実行後の結果は次のようになります。以下:
ここで、%c は %s、%d などと混合することもできます。
したがって、コード内で直接 replace を使用します。JS の replace はデフォルトで最初に一致する項目のみを置換するため、コードは次のようになります。
var args=Array.prototype.slice.call(arguments);
if(args. length>1){
var i=1,hasstyle=false;
if(args[0].indexOf("%c")==0){
args[0]=args[0] ].replace(/% c/,"");
i=2;
}
for(;i
args[0]=args[0].replace(/%s|%d|%i|% o/,args[i ]);
}
else{
break;
}
if(i
}
if(hasstyle){
consoleHelper.showlog(args[0],args[1]);
}
else{
consoleHelper.showlog(args[0]);
}
}
else if(args.length==1){
if(arguments [0] 配列のインスタンス) {
consoleHelper.showlog("[" args[0] "]");
}
else if(arguments[0] 関数のインスタンス){
consoleHelper.showlog (args[0], null,"console_log_function");
}
else{
consoleHelper.showlog(args[0]);
}
}
else{ >consoleHelper.showlog(" ");
}
console.log は複数のパラメータを受け入れることができ、その数は不確かであるため、ここには仮パラメータは記述されません。 %c については、Firebug では途中に書いても有効ですが、ここでは簡単さと直接性を考慮して先頭に書いた場合のみ有効とします。コードでは、まずパラメーターが配列に変換され、次に配列がケースバイケースで処理されます。
パラメータの数が 1 つの場合、配列の場合とメソッドの場合の 2 つの状況が存在します。配列の場合はfirebugの形式に従い、両端に角括弧を追加します。関数の場合は単語の色を緑色に変更します
パラメータの数が0の場合は、空の文字列
以下の consoleHelper.showlog は、出力の便宜のために書かれたメソッドです。このメソッドでは、さまざまなデバッグ情報の結果がページ上の div に表示されます (存在する場合)。
他のいくつかのメソッドの考え方はこれと似ていますが、スタイルが異なり、関数はパラメータを接続して直接出力するだけです。
コンソール クラス コード全体は次のとおりです:
コードをコピーします
console 全部代
var console={
assert:function(){
},
clear:function(){
},
count:function(){
}、
debug:function(){
}、
dir:function(){
}、
dirxml:function(){
},
error:function(){
var args=Array.prototype.slice.call(arguments);
consoleHelper.showerror(args.join(" "));
},
例外:function(){
},
group:function(name){
consoleHelper.showgroup(name);
}、
groupCollapsed:function(){
}、
groupEnd:function(){
}、
info:function(){
var args=配列。プロトタイプ.スライス.コール(引数);
if(args.length==1){
if(arguments[0] 配列のインスタンス){
consoleHelper.showinfo("[" args[0] "]");
}
else if(arguments[0] instanceof Function){
consoleHelper.showinfo(args[0],"console_log_function");
}
else{
consoleHelper.showinfo(args[0]);
}
}
else{
consoleHelper.showinfo(args.join(" "));
}
},
log:function(){
var args=Array.prototype.slice.call(arguments);
if(args.length>1){
var i=1,hasstyle=false;
if(args[0].indexOf("%c")==0){
args[0]=args[0].replace(/%c/,"");
i=2;
hasstyle=true;
}
for(;i
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]);
}
else{
ブレーク;
}
}
if(i
}
if(hasstyle){
consoleHelper.showlog(args[0],args[1]);
}
else{
consoleHelper.showlog(args[0]);
}
}
else if(args.length==1){
if(arguments[0] 配列のインスタンス){
consoleHelper.showlog("[" args[0] " ]");
}
else if(arguments[0] instanceof Function){
consoleHelper.showlog(args[0],null,"console_log_function");
}
else{
consoleHelper.showlog(args[0]);
}
}
else{
consoleHelper.showlog("");
}
}、
memoryProfile:function(){
}、
memoryProfileEnd:function(){
}、
profile:function(){
} 、
profileEnd:function(){
}、
table:function(){
}、
time:function(){
}、
timeEnd:function( ){
}、
timeStamp:function(){
}、
trace:function(){
}、
warn:function(){
var args= Array.prototype.slice.call(引数);
if(args.length==1){
if(arguments[0] 配列のインスタンス){
consoleHelper.showwarn("[" args[0] "]");
}
else if(arguments[0] instanceof Function){
consoleHelper.showwarn(args[0],"console_log_function");
}
else{
consoleHelper.showwarn(args[0]);
}
}
else{
consoleHelper.showwarn(args.join(" "));
}
}
};
consoleHelper代码如下:
var consoleHelper={
showlog:function(val,style,cla){
if(cla){
cla="console_log " cla;
}
else{
cla="console_log";
}
this.show(val,style,cla);
},
showinfo:function(val,cla){
if(cla){
cla="console_info " cla;
}
else{
cla="console_info";
}
this.show(val,null,cla);
},
showwarn:function(val,cla){
if(cla){
cla="console_warn " cla;
}
else{
cla="console_warn";
}
this.show(val,null,cla);
},
showerror:function(val){
this.show(val,null,"console_error");
},
showgroup:function(val){
if(!val){
val="";
}
this.show(val ":",null,"console_group");
},
show:function(val,style,cla){
if(document.getElementById("showconsole")){
var div=document.createElement("div");
if(div.setAttribute){
if(style){
div.setAttribute("style",style);
}
}
else{
if(style){
div=document.createElement("
}
}
if(cla){
div.className=cla;
}
var oText=document.createTextNode(val);
div.appendChild(oText);
document.getElementById("showconsole").appendChild(div);
}
}
};
注: 希望する場合は、トップページで showconsole のディレクトリの div を直接追加します。
):
.console_log{
border:1px ソリッド #CCC;
カラー:#333;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
}
.console_info{
border:1px ソリッド #CCC;
カラー:#333;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
背景: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGmChp mB sfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1 Q48koAAPHwXf w1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva cGRF7c hzKXgMqi7G4IDH5ZgbPlLduvhVWfnD n/cf6u7bVH2/a 9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsIaENYA hwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAapzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5 18r745jK XtllHWJWjkMS4CjfDE1 U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDEsssFNO TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw pgLYwDmbELmaBi4vy R/TZgRs3QwQi63VXLb1jgWXGiICbiyi O3CjuCh /JAt8e xckhZ87cv KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T BmT uQr92 1dW1dnhq4xMIBBYHfZe ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4 evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIO js7 fT0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6 IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAABJRU5ErkJggg===) リピートなしスクロール 0 1px #EBF5FF;
パディング左:30px;
}
.console_warn{
border:1px ソリッド #CCC;
カラー:#333;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
背景: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi CIqCBYUjVhE8a W0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c /xIUmTdlN86ouDw71zvnvu7xx SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/it 8UI osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAW d3iqow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2Hou vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYg FO3cR 8sRCj3J6/6 hSNrwdebZ0 / rbI4 yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKK swvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fmtzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEjZgUV52nfq1eFpd7oeXVn 1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI nsmVvgxeOpaWSqUGhhobG2NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH qbOunyvbX5Y4pwAK UkoAJyJORLS1VmdZpuI4VlEUrS/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") no -繰り返しスクロール 0 1px #FFFFC8;
パディング左:30px;
}
.console_error{
border:1px ソリッド #CCC;
色:#FF0000;
パディング:0px 5px;
最小高さ:24px;
行の高さ:24px;
マージンボトム:-1px;
背景: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQHS URBVDiNTZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j33N fMOfeMGGP 4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf c23oWzFMbHB4IZ82HVw4epFcET66 R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz xaZ3369ZgK6tfbm8NgCSy2 QixPVp8MNr/WmF zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo9Xhg1a8 fm hJorrptnyzbfE2ttRL71C8q9r KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5 YV9y8DGtj 26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch DWrRSmXaxYHB1wOh4DJ pq6 iUcaUIUAccmd ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/ 7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0 Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4 GAhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa EY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89 J9mfzlFRG6UiFiU7cJ7ho 50A J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo mUZZFYHUIKVay7 1edfp0qcMta5sTbW3lBUefRMneZbQn608t fer k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5 IyYoRpIGPymih9f3/XD1aeeeCf6v gfLYZXwkd5f2QAAABJRU5ErkJggg== ) リピートなしスクロール 0 1px #FFEBEB;
パディング左:30px;
}
.console_group{
margin-top:20px;
フォントサイズ:16px;
フォントの太さ:太字;
}
.console_log_function{
色:緑;
}
ここでは、パフォーマンスの便宜のため、3 つの小さな図形は、base64 形式の図形、つまり上のコード内の 3 つの長文字列であり、一般に使用される場合は図形の場所に置き換えることができます。
完整代码:
JSCode
ログイン
結果
JavaScript
HTML
CSS
ALL
編集
共有
ダウンロード
自定コンソール(Artwl.cnblogs.com)

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
