JQury 프레임워크는 확실히 코드가 짧고 강력합니다. 단점은 객체 지향 기능이 부족하다는 것입니다. 매우 객체 지향적이며 MFC의 거대한 API 및 제어 라이브러리와 유사합니다. 브라우저는 매우 피곤하고 개발은 매우 어렵습니다. Javascript의 약한 언어 유형은 확실히 나쁜 방법입니다. 버그를 줄이는 유일한 방법은 버그를 작성하는 것이 아닙니다. 일단 버그가 나타나면 버그, 디버깅은 매우 고통스러운 일이 될 것입니다! 수천 줄의 코드를 추적하고 점프하는 것은 정말 실망스럽습니다!
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 파일;
}
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;
}
else if(ext.toLowerCase ()=="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="스타일시트";
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 ""; (요소){
return (typeof(element) == 'object' ? 요소 : document.getElementById(element))
},
browser : {
isFirefox:navigator.userAgent.toLowerCase ().indexOf ('게코') != -1,
isChrome:navigator.userAgent.toLowerCase().indexOf ('크롬') != -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) == 'undefine')
return false
this; domReady = false;
if(typeof(functions) == '정의되지 않음')
var function = []
functions.push(newFunction);
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',initial);
}catch(e){}
document.addEventListener('DOMContentLoaded',initial, false );
this.domReady = true;
}
else if (Browser.isIE) {//IE
var 타이머 = window.setInterval(function(){
try {
var IsReady = false;
document.body.doScroll("left");
IsReady=true;
window.clearInterval(timer); = 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);
window.clearInterval(timer)
}
}
}
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];
}
}
return oDes;
},
override: function(origclass, overrides) / /클래스에 오버로드된 메서드를 추가합니다. 예: override(function class(){},{A:function(){},B:function(){}})
if(overrides){
var p = origclass.prototype;
for(overrides의 var 메소드){
p[method] = overrides[method];
}
},
extend :function ( ){
// 인라인 재정의
var inlineOverride = function(o){
for (var m in o) {
this[m] = o[m]
}
};/*오버로드해야 하는 기본 클래스 메소드는 상위 클래스 프로토타입에 정의되어야 합니다.
* 하위 클래스의 메소드 가시성: 하위 클래스 구성의 속성 > 상위 클래스 구성 >하위 클래스 프로토타입에 의해 정의된 속성==overrides>상위 클래스 프로토타입에 의해 정의된 속성
* overrides 메소드가 하위 클래스의 프로토타입에 첨부되므로, 하위 클래스 프로토타입에 의해 정의된 속성과
* 확장 메서드가 하위 클래스의 프로토타입을 재정의하는 것을 볼 수 있으므로 하위 클래스의 프로토타입에 대한 속성 정의는 반드시 확장() 메서드가 호출된 후에 정의되어야 유효합니다. 🎜>* 클래스의 경우: 생성자에 정의된 속성 >프로토타입에 의해 정의된 속성
*
* 클래스 파생 지침:
* 1. 기본 클래스에서 재정의 가능한 메서드를 정의하는 것이 좋습니다. 기본 클래스 프로토타입
* 2. 파생하는 경우 클래스의 프로토타입에 정의된 속성 메서드는 반드시 확장() 메서드 뒤에 와야 합니다.
* 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(); ;
*/
반환 함수(subFn, superFn, 재정의){//하위 클래스, 상위 클래스, 오버로드된 메서드(선택 사항)
var F = function(){}, subFnPrototype, superFnPrototype = superFn.prototype ;
F.prototype = superFnPrototype;
subFnPrototype = subFn.prototype = new F( ;
}
subFn.override = function(obj){//override
JCore.override(subFn , obj);
subFnPrototype.override;
if(overrides)
JCore.override(subFn, overrides)
return subFn; >}(),//대괄호는 내부적으로 반환된 메서드가
namespace: function (ns){//예: 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 ' == "undefine"){' rt ' = {};} o = ' rt ' ;');
for (j=1; jlength; j) {
o[d [j]]=o[d[j]] {}; j]];
}
},
isEmpty : function( value){
반환 값 === null || typeof(value) === '정의되지 않음' || value === '';
idSeed : 0,
id : function(el, prefix){
prefix = prefix || "JCore-gen"
el = 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 = 인수;
var method = this;
return function(/*args...*/) {//호출 시 전달된 매개변수는 유효하지 않습니다.
var callArgs = 인수.길이>0 ? 인수: args;
return method.apply(window, callArgs)
},
createDelegate: function(argsArray,scope); 매개변수는 선택사항입니다
//매개변수는 createCallback과 다른 배열입니다. createCallback 매개변수는 가변 매개변수이고 createDelegate의 argsArray 매개변수는 Array여야 합니다
var method =
return function; (/*args...*/) {//호출 시 매개변수가 전달되면 생성 시 전달된 매개변수가 유효하지 않습니다.
var callArgs = typeof( argsArray)=="undefine"?[]:argsArray; >callArgs = 인수.길이>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(인수, 1);
var fn = this.createDelegate(callArgs);
if(millis){
return setTimeout(fn, millis)
fn( );
return 0;
},
createInterceptor: function(fcn,scope){
if(typeof fcn != "function"){
return this; }
var method = this;
return function() {
fcn.target = this;
fcn.method = method; if(fcn.apply(scope || this || 창, 인수) === false){
return;
}
return method.apply(this || 창, 인수)
}
}; 🎜> 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, '/< ;').replace(//"/;/g, '/'').replace(//&/#39/;/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)
}
JCore. apply(String.prototype,StringExtendMethod);
JCore.apply(String,{//Static 메서드
trim : function(str){//선행 및 후행 공백 제거
return str.replace(/( ^/ s*)|(/s*$)/g,"");//문자열 앞뒤의 공백을 빈 문자열로 바꿉니다.
}
})
/*---------------------- - ---------배열 객체 확장------------------------- --- --*/
var ArrayExtendMethod ={//배열에서 중복 요소 제거
strip : function(){
if(this.length<2) return [this[0]]| |[] ;
var arr=[];
for(var i=0;ivar 반복=false
for(var j=0; 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 < this.length ; i ){
if ( 항목 === this[i])
return true;
}
return false
},
indexOf: function(item){
for (var; i = 0 ; i < this.length; i ){
if(this[i] === item) return
}
return -1; 제거 : 함수(항목){
var index = this.indexOf(item);
if(index != -1){
this.splice(index, 1)
>return this ;
}
};
JCore.apply(Array.prototype,ArrayExtendMethod)
/*------ --- ----------날짜 객체 확장자--------- --- -*/
var DateExtendMethod ={//반환 시간 간격(밀리초)
getElapsed : function(date) {
return Math.abs ((날짜 || new Date()).getTime()-this.getTime())
}
}
JCore.apply(Date.prototype,DateExtendMethod); >