ホームページ >ウェブフロントエンド >jsチュートリアル >オブジェクト指向 JavaScript コアがコード共有をサポート_JavaScript スキル

オブジェクト指向 JavaScript コアがコード共有をサポート_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 17:53:24872ブラウズ

ページ開発には JQury フレームワークが最適です。欠点は、オブジェクト指向の機能が欠けていることです。非常にオブジェクト指向であり、MFC の巨大な API とコントロール ライブラリに似ています。実行するとブラウザが非常に疲れ、コードを使用してインターフェイスを作成するのは明らかに悪い方法です。バグを減らす唯一の方法はバグを書かないことです、バグ、デバッグは非常に苦痛なものになります。何千行ものコードをトレースしたりジャンプしたりするのは本当にイライラします。

JavaScript がオブジェクト指向の開発を行う場合、オブジェクト指向の機能をシミュレートするために常に多くのメソッドが使用されます。これらのメソッドは、オブジェクト指向の JavaScript をサポートするコア コードを構成します。 JQuery が豊富 Ext のコアコードがあるので学習にも悪くないし、ちょっとした開発もできます!

コードをコピー コードは次のとおりです:

/*
関数: コア スクリプト メソッド
作成者: LQB
2008-12-22
*/
var JCore = {//コア オブジェクトを構築
バージョン:1.0,
$import:function(importFile){
var file = importFile.toString();
var IsRelativePath = (file.indexOf("$")==0 ||file.indexOf ("/")==-1);//相対パス (JCore からの相対)
var path=file;
if(IsRelativePath){//パスを計算
if(file.indexOf(" $")==0)
file = file.substr(1);
path = JCore.$dir file;
}
var newElement=null,i=0;
var ext = path.substr(path.lastIndexOf(".") 1);
if(ext.toLowerCase()=="js"){
var scriptTags = document.getElementsByTagName("script"); 🎜>for(var i=0;ilength;i ) {
if(scriptTags[i].src && scriptTags[i].src.indexOf(path)!=​​-1)
return

newElement=document.createElement("script");
newElement.type="text/javascript";
newElement.src=path; ()=="css"){
var linkTags = document.getElementsByTagName("link");
for(var i=0;ilength;i ) {
if(linkTags[i].href && linkTags[i].href.indexOf(path)!=​​-1)
return;
}
newElement=document.createElement("link");
newElement.type="text/ css";
newElement.rel="Stylesheet";
newElement.href=path;
}
else
return;
var head=document.getElementsByTagName("head") [0];
head.appendChild(newElement);
$dir : function(){
var scriptTags = document.getElementsByTagName("script"); i=0;ilength;i ) {
if(scriptTags[i].src && scriptTags[i].src.match(/JCore/.js$/)) {
path = scriptTags[i]. src.replace(/JCore/.js$/,"");
戻りパス;
}
戻り値
}(),
$ : 関数(要素){
return (typeof(element) == 'object' ? element : document.getElementById(element));
},
browser : {
isFirefox:navigator.userAgent.toLowerCase ().indexOf ('gecko') != -1,
isChrome:navigator.userAgent.toLowerCase().indexOf ('chrome') != -1,
isOpera:navigator.userAgent.toLowerCase() .indexOf ('opera') != -1,
isIE:navigator.userAgent.toLowerCase().indexOf ('msie') != -1,
isIE7:navigator.userAgent.toLowerCase().indexOf ('7.0') != -1
},
onReady: function(newFunction){
if(typeof(newFunction) == '未定義')
return false; domReady = false;
if(typeof(functions) == '未定義')
var 関数 = [];

var 初期 = function() {//実行イベントリスト
for(var i=0; ifunctions[i]();
}
}
this.ready = function(){//イベントの読み込み
if(this.domReady)
initial();
var Browser = JCore.browser
if (Browser.isFirefox || Browser.isOpera || ブラウザ.isChrome) {//FX
try {
document.removeEventListener('DOMContentLoaded', 初期)
}catch(e){}
document.addEventListener('DOMContentLoaded', 初期, false );
this.domReady = true;
}
else if (Browser.isIE) {//IE
var timer = window.setInterval(function(){
try {
var IsReady = false;
document.body.doScroll("left");
initial();
this.domReady = true;
}
catch (e){
if(IsReady){//ドキュメントの読み込みが完了し、スローされた例外は、
var というメソッドにエラーがあることを示していますErrorMsg = "onReady メソッドでエラーが発生しました。/r/n";
ErrorMsg ="エラー メッセージ:" e.message "/r/n";
ErrorMsg ="エラーの説明:" e.description "/r/n";
ErrorMsg ="エラーの種類:" e.name "/r/n";
alert(ErrorMsg)
}
}
; 5);
}
}
this.ready();
},
apply:function(oDes, oSrc,bReplace){// オブジェクトの他のオブジェクトの属性をコピーします, bReplace オプションの
if(oDes && oSrc && typeof(oSrc) == 'object'){
for(var p in oSrc){
if(bReplace == false && oDes[p] != null ) { 続行; }
oDes[p] = oSrc[p];
}
}
override : function(origclass, overrides) / /オーバーロードされたメソッドをクラスに追加します。例: override(function class(){},{A:function(){},B:function(){}}); var p = origclass.prototype;
for(オーバーライドの var メソッド){
p[メソッド] = オーバーライド[メソッド];
}
}
},
extend :function ( ){
// インラインオーバーライド
var inlineOverride = function(o){
for (var m in o) {
this[m] = o[m]}
};
/*オーバーロードする必要がある基本クラスのメソッドは、親クラスのプロトタイプで定義する必要があります。
* サブクラス内のメソッドの可視性: サブクラス構築の属性 >親クラスの構築 >サブクラス プロトタイプによって定義された属性==overrides>親クラス プロトタイプによって定義された属性
* overrides メソッドはサブクラスのプロトタイプにアタッチされるため、次のようになります: サブクラス プロトタイプによって定義された属性とオーバーライドは 2 つのメソッドの後に定義されます。
* extend メソッドがサブクラスのプロトタイプをオーバーライドすることがわかります。そのため、サブクラスのプロトタイプの属性の定義を有効にするには、extend() メソッドが呼び出された後に定義する必要があります。 🎜>* クラスの場合: コンストラクターで定義された属性 >プロトタイプで定義された属性
*
* クラス派生のガイドライン:
* 1. クラスの基本クラスでオーバーライド可能なメソッドを定義することをお勧めします。基本クラスのプロトタイプ
* 2. 派生する場合 クラスのプロトタイプで定義された属性メソッドは extend() メソッドの後にある必要があります
* 3. 派生クラスの構築で基本クラスの構築を呼び出しますclass:
* if (Sub.superclass) //sub はサブクラス Name
* Sub.superclass.constructor.call(this, Args);//Args は親クラスのコンストラクター メソッドのパラメーター
* 4. 配列の浅いコピーの問題に注意してください
*例:
* var ClassA=function(){this.Show=function(){alert("Hello World!"); }};
* var ClassB=function(){};
* JCore.extend(ClassB ,ClassA);
* var ObjectB = new ClassB(); ;
*/
return function(subFn, superFn, overrides){//サブクラス、親クラス、オーバーロードされたメソッド (オプション)
var F = function(){}, subFnPrototype, superFnPrototype = superFn.prototype ;
F.prototype = superFnPrototype;
subFnPrototype = subFn.prototype = new F( ;
}
subFn.override = function(obj){//override
JCore.override(subFn) ,
};
subFnPrototype.override;
JCore.override(subFn, overrides); >}(),//括弧は必須であり、内部的に返されるメソッドが
namespace: function (ns){//eg: JCore.namespace("JCore", "JCore.util"); と呼ばれることを示します。 >var args=arguments, o=null, i, j, d, rt;
for (i= 0; ilength; i) {//トラバーサル パラメータ
d=args[i].split(". ");//トラバーサル ポイント セパレーター
rt = d[0];
eval(' if (typeof ' rt ' == "未定義"){' rt ' = {};} o = ' rt ' ;');
for (j=1; jlength; j) {
o[d [j]]=o[d[j]] || j]];
}
}
},
isEmpty : function(value){
戻り値 === null || typeof(value) === '未定義' ||値 === '';
idSeed : 0,
id : function(el, prefix){
prefix = prefix || "JCore-gen"; this.$(el);
var id = prefix (this.idSeed );
return el ? (el.id ? el.id : (el.id = id)) : id;
};
/*-------------- ------------------------ --------関数オブジェクト拡張----------------- ----------- ----*/
var FunctionExtendMethod ={
createCallback : function(/*args...*/ ){//このパラメータは作成者のパラメータです
/*例: function func1(arg1, arg2){alert(arg1 arg2);}
* var myfunc = func1.createCallback(1,2);
* myfunc();//つまり、func1 は
**/ var args = argument;
var method = this;
return function(/*args...*/) {//呼び出し時にパラメータが渡された場合、作成時に渡されたパラメータは無効ですcallArgs = argument.length>0 ? 引数 : args;
return method.apply(window, callArgs);
},
createDelegate: function(argsArray,scope)パラメータはオプションです
//パラメータは配列であり、createCallback とは異なります。createCallback パラメータは変数パラメータであり、createDelegate の argsArray パラメータは Array
var method = this; である必要があります。 (/*args...*/) {//呼び出し時にパラメータが渡された場合、作成時に渡されたパラメータは無効です
var callArgs = typeof( argsArray)=="undefine"?[]:argsArray; >callArgs = argument.length>0 ? 引数 : callArgs;
return method.apply(scope||window, callArgs);,
defer: function(millis/*,args...*/){//パラメータ: 遅延時間 (ミリ秒)、オプションのパラメータリスト
/*例: function func1(arg1,arg2){alert ( arg1 arg2);}
* func1.defer(1000,1,2);//Func1(1,2) は 1 秒の遅延で呼び出されました
**/
var callArgs = Array.プロトタイプ.slice.call(arguments, 1);
var fn = this.createDelegate(callArgs){
return setTimeout(fn, millis); fn( );
return 0;
},
createInterceptor : function(fcn,scope){
if(typeof fcn != "function"){
return this;
var メソッド = this;
return function() {
fcn.target = this;
fcn.method = メソッド;
if(fcn.apply(scope || this ||ウィンドウ、引数) === false){
return;
}
return メソッド.apply(この || ウィンドウ、引数)
}; 🎜> JCore.apply(Function.prototype,FunctionExtendMethod);
/*-------------------------------- -- ----------文字列オブジェクト拡張子----------------------------------- -- ---*/
var StringExtendMethod ={
trim : function(){//先頭と末尾のスペースを削除します
return this.replace(/(^/s*)|(/s* $)/g ,"");//文字列の前後のスペースを空の文字列に置き換えます。
},
replaceAll : function (AFindText,ARepText){//すべてを置換、置換は最初のもののみを置換します
raRegExp = new RegExp(AFindText,"g")
return this.replace (raRegExp,ARepText);
},
htmlEncode: function(){//HTML をエンコードし、HTML をデコードします。二重引用符、一重引用符、記号 &、記号 <、記号
return this.replace(/&/g,"&").replace(/<").replace(/>/g, ">").replace(//"/g,""").replace(//'/g,"'");
},
htmlDecode: function(){
return this.replace(//&/;/g, '/&').replace(//>/;/g, '/>').replace(//;/g, '/},
形式 : 関数(){
var args=arguments;
return this.replace(//{(/d )/}/g, function(m, i){
return args[i];
});
},
convertWarpSymbol : function(){
var reg1,reg2,reg3;
if(this.toLowerCase().indexOf("")!=-1){ 🎜>reg1 = / /gi; reg2 = //gi;
return this.replace(reg1," ").replace(reg2,"/r/n");
}
else{ 🎜>reg1 = / /g;reg2 = //r/n/gi;
return this.replace(reg1," ").replace(reg2,"
"); },
IsNum : function(){
var reg = /^/d $/g;
return reg.test(this);
}; apply(String.prototype,StringExtendMethod);
JCore.apply(String,{//静的メソッド
trim : function(str){//先頭と末尾のスペースを削除します
return str.replace(/( ^/ s*)|(/s*$)/g,"");//文字列の前後のスペースを空の文字列に置き換えます。
}
});
/*--------------------------------- - --------配列オブジェクトの拡張子--------------------------- --- --*/
var ArrayExtendMethod ={//配列内の重複要素を削除します
strip : function(){
if(this.lengthvar arr=[];
for(var i=0;ivarrepeat=false; jlength;j ){
if(this[i]===arr[j])
repeat=true;
}
if(!repeat)
arr.push(this[ i]) ;
}
return arr;
},
exists : function(item){
for( var i = 0 ; i if ( item === this[i])
return true;
}
indexOf : function(item){
for (var i = 0 ; i < this.length i ){
if(this[i] === item)
},
削除 : function (item){
varindex = this.indexOf(item);
if(index != -1){
this.splice(index, 1);
これを返します ;
}
}
JCore.apply(Array.prototype,ArrayExtendMethod); --- ------------------------日付オブジェクト拡張子---------- --- ----------------*/
var DateExtendMethod ={//戻り時間間隔 (ミリ秒)
getElapsed : function(date) {
return Math.abs ((date || new Date()).getTime()-this.getTime());
}
}; >
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。