この記事では、30行未満のJSコードでExcelテーブルを実装する方法について説明します。 jQueryはかけがえのないものではないことがわかります。参照のためにそれを共有してください。特定の分析は次のとおりです。
外国のプログラマーは、ネイティブJSによって書かれたExcelテーブルアプリケーションを実証し、次の機能を備えたサードパーティライブラリに依存していません。
30行未満のネイティブJavaScriptコードで実装
shirdサードパーティライブラリへの依存性はありません
③エクセルスタイルのセマンティック分析(式は「=」で始まります)
expressionsからサポートする(= A1+B2*C3)
circular円形参照を防ぎます
localStorageに基づく自動ローカルの永続的なストレージ
効果ディスプレイを以下の図に示します。
コード分析:
CSSは省略されており、HTMLコアは1行のみです。
次のようにコードをコピーします:<table> </table>
JavaScriptコードは次のとおりです。
次のようにコードをコピーします:for(var i = 0; i <6; i ++){
var row = document.queryselector( "table")。insertrow(-1);
for(var j = 0; j <6; j ++){
var lette = string.fromCharcode( "a" .charcodeat(0)+j-1);
row.insertcell(-1).innerhtml = i && j? "":i ||文字;
}
}
var data = {}、inputs = []。slice.call(document.queryselectorall( "input"));
inputs.foreach(function(elm){
elm.onfocus = function(e){
e.target.value = localStorage [e.target.id] || "";
};
elm.onblur = function(e){
localStorage [e.target.id] = e.target.value;
ComputeAll();
};
var getter = function(){
var value = localstorage [elm.id] || "";
if(value.Charat(0)== "="){
(data)return eval(value.substring(1));
} else {return isnan(parsefloat(value))?値:parsefloat(value); }
};
object.defineProperty(data、elm.id、{get:getter});
object.defineProperty(data、elm.id.tolowercase()、{get:getter});
});
(window.computeall = function(){
inputs.foreach(function(elm){try {elm.value = data [elm.id];} catch(e){}});
})();
実際、上記の記事を通して、最もコアステップでは、次のようなEmaScript5やHTML5の機能を使用していることがわかります。
QuerySeLectorall:jQueryセレクターと同様のクエリを提供します。 jQueryなどのサードパーティのJSライブラリが必ずしも多数ではないことがわかります。
コードコピーは次のとおりです。VARMATCES= DOCUMENT.QUERYSELECTRELL( "div.note、div.alert");
DefinePropertyは、JavaのGet and Set Access/Set Preprocessingメソッドのクラスと、次のような他の構成プロパティを提供します。
コードコピーは次のとおりです。Object.defineProperty(o、 "b"、{get:function(){return bvalue;}、
set:function(newValue){bvalue = newValue; }、
列挙可能:本当、
構成可能:true});
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。