• 技术文章 >web前端 >js教程

    面向对象Javascript核心支持代码分享_javascript技巧

    2016-05-16 17:53:24原创362
    JQury框架绝对是页面开发的首选,代码短小强悍,缺点就是面向对象特性不足,所幸有不少插件!至于Ext就是一个庞然大物了,高度面向对象,类似于MFC的庞大API和控件库,运行起来,浏览器就累得够呛,开发也够呛,使用代码来创建界面绝对是个糟糕的方式,Javascript的弱语言类型使得Ext开发就像行走在雷区,减少bug的唯一方法就是不要写出bug,一旦出现bug,调试将是一件极为痛苦的事情 !在几千行代码里跟踪、跳转真让人抓狂!

    Javascript做面向对象开发的时候,总是会用到很多模拟面向对象特性的方法,这些方法就构成了支撑面向对象Javascript的核心代码,以下就是部分代码,其中参考了很多JQuery与Ext的核心代码,用来学习还不错,也可以做一些小的开发!
    复制代码 代码如下:

    /*
    功能:核心脚本方法
    作者:LQB
    2008-12-22
    */
    var JCore = {//构造核心对象
    version:1.0,
    $import:function(importFile){
    var file = importFile.toString();
    var IsRelativePath = (file.indexOf("$")==0 ||file.indexOf("//m.sbmmt.com/m/")==-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;
    }
    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="Stylesheet";
    newElement.href=path;
    }
    else
    return;
    var head=document.getElementsByTagName("head")[0];
    head.appendChild(newElement);
    },
    $dir : function(){
    var scriptTags = document.getElementsByTagName("script");
    for(var i=0;ilength;i++) {
    if(scriptTags[i].src && scriptTags[i].src.match(/JCore/.js$/)) {
    path = scriptTags[i].src.replace(/JCore/.js$/,"");
    return path;
    }
    }
    return "";
    }(),
    $ : function(element){
    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) == 'undefined')
    return false;
    this.domReady = false;
    if(typeof(functions) == 'undefined')
    var functions = [];
    functions.push(newFunction);

    var initial = function(){//执行事件列表
    for(var i=0; i< functions.length;i++){
    functions[i]();
    }
    }
    this.ready = function(){//加载事件
    if(this.domReady)
    initial();
    var Browser = JCore.browser;
    if (Browser.isFirefox || Browser.isOpera || Browser.isChrome) {//FX
    try {
    document.removeEventListener('DOMContentLoaded', initial);
    }catch(e){}
    document.addEventListener('DOMContentLoaded', initial, false);
    this.domReady = true;
    }
    else if (Browser.isIE) {//IE
    var timer = window.setInterval(function(){
    try {
    var IsReady = false;
    document.body.doScroll("left");
    IsReady=true;
    initial();
    window.clearInterval(timer);
    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);
    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) { continue; }
    oDes[p] = oSrc[p];
    }
    }
    return oDes;
    },
    override : function(origclass, overrides){//为类增加重载方法,eg:override(function class(){},{A:function(){},B:function(){}});
    if(overrides){
    var p = origclass.prototype;
    for(var method in overrides){
    p[method] = overrides[method];
    }
    }
    },
    extend :function(){
    // inline overrides
    var inlineOverride = function(o){
    for (var m in o) {
    this[m] = o[m];
    }
    };
    /*需要实现重载的基类方法需要在父类prototype中定义;
    * 在子类中方法的可见度:子类构造中的属性>父类构造中的属性>子类prototype定义的属性==overrides>父类prototype定义的属性
    * 由于overrides方法被附加到子类的prototype中,所以:子类prototype定义的属性与overrides,两者后定义的可见
    * extend方法将重写子类的prototype,因此在子类的prototype上定义属性则必须在extend()方法调用之后再定义才有效
    * 对于一个类:构造中定义的属性>prototype定义的属性
    *
    *类派生的准则:
    * 1.建议把基类中可重写的方法定义在基类prototype中
    * 2.如果在派生类的prototype中定义属性方法,必须在extend()方法之后
    * 3.在派生类的构造中调用基类的构造:
    * if(Sub.superclass) //sub即子类的名称
    * 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();
    * ObjectB.Show();
    */
    return function(subFn, superFn, overrides){//子类,父类,重载方法(可选)
    var F = function(){}, subFnPrototype, superFnPrototype = superFn.prototype;
    F.prototype = superFnPrototype;
    subFnPrototype = subFn.prototype = new F();
    subFnPrototype.constructor = subFn;
    subFn.superclass = superFnPrototype;//父类
    if (superFnPrototype.constructor == Object.prototype.constructor) {
    superFnPrototype.constructor = superFn;
    }
    subFn.override = function(obj){//override
    JCore.override(subFn, obj);
    };
    subFnPrototype.override = inlineOverride;
    if(overrides)
    JCore.override(subFn, overrides);
    return subFn;
    };
    }(),//括号不可少,表示调用内部返回的方法
    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 + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
    for (j=1; jlength; ++j) {
    o[d[j]]=o[d[j]] || {};
    o=o[d[j]];
    }
    }
    },
    isEmpty : function(value){
    return value === null || typeof(value) === 'undefined' || 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;
    }
    };
    /*--------------------------------------------Function对象扩展-------------------------------------------*/
    var FunctionExtendMethod ={
    createCallback : function(/*args...*/){//此参数即创造者的参数
    /*示例:function func1(arg1,arg2){alert(arg1+arg2);}
    * var myfunc = func1.createCallback(1,2);
    * myfunc();//即调用了func1
    **/
    var args = arguments;
    var method = this;
    return function(/*args...*/) {//如果在调用时传了参数,则创建时传的参数无效
    var callArgs = arguments.length>0 ? arguments : args;
    return method.apply(window, callArgs);
    };
    },
    createDelegate : function(argsArray,scope){//参数可选
    //参数一个数组,与createCallback区别:createCallback参数是可变参数,createDelegate的argsArray参数必须是数组
    var method = this;
    return function(/*args...*/) {//如果在调用时传了参数,则创建时传的参数无效
    var callArgs = typeof(argsArray)=="undefined"?[]:argsArray;
    callArgs = arguments.length>0 ? arguments : callArgs;
    return method.apply(scope||window, callArgs);
    };
    },
    defer : function(millis/*,args...*/){//参数:延迟时间(毫秒),可选参数列表
    /*示例:function func1(arg1,arg2){alert(arg1+arg2);}
    * func1.defer(1000,1,2);//延迟1秒调用了func1(1,2)
    **/
    var callArgs = Array.prototype.slice.call(arguments, 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 || window, arguments) === false){
    return;
    }
    return method.apply(this || window, arguments);
    };
    }
    };
    JCore.apply(Function.prototype,FunctionExtendMethod);
    /*--------------------------------------------String对象扩展----------------------------------------*/
    var StringExtendMethod ={
    trim : function(){//去掉首尾空格
    return this.replace(/(^/s*)|(/s*$)/g,"");//将字符串前后空格,用空字符串替代。
    },
    replaceAll : function (AFindText,ARepText){//替换所有,replace只替换第一个
    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(//},
    format : function(){
    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,{//静态方法
    trim : function(str){//去掉首尾空格
    return str.replace(/(^/s*)|(/s*$)/g,"");//将字符串前后空格,用空字符串替代。
    }
    });
    /*--------------------------------------------Array对象扩展----------------------------------------*/
    var ArrayExtendMethod ={//去掉数组中重复的元素
    strip : function(){
    if(this.length<2) return [this[0]]||[];
    var arr=[];
    for(var i=0;ivar repeat=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( item === this[i])
    return true;
    }
    return false;
    },
    indexOf : function(item){
    for (var i = 0; i < this.length; i++){
    if(this[i] === item) return i;
    }
    return -1;
    },
    remove : function(item){
    var index = this.indexOf(item);
    if(index != -1){
    this.splice(index, 1);
    }
    return this;
    }
    };
    JCore.apply(Array.prototype,ArrayExtendMethod);
    /*--------------------------------------------Date对象扩展----------------------------------------*/
    var DateExtendMethod ={//返回时间间隔(毫秒)
    getElapsed : function(date) {
    return Math.abs((date || new Date()).getTime()-this.getTime());
    }
    };
    JCore.apply(Date.prototype,DateExtendMethod);
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:面向对象
    上一篇:Javascript 面向对象(一)(共有方法,私有方法,特权方法)_js面向对象 下一篇:JavaScript基础语法让人疑惑的地方小结_基础知识
    Web大前端开发直播班

    相关文章推荐

    • 完全掌握JavaScript运行机制及原理• 一文浅析Angular中的响应式表单• 聊聊node中的fs模块、path模块• 浅析Angular中怎么用 Api 代理• 你能搞懂JS的this指向问题吗?看看这篇文章

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网