tangram.js库实现js类的方式实例分析


Posted in Javascript onJanuary 06, 2018

本文实例讲述了tangram.js库实现js类的方式。分享给大家供大家参考,具体如下:

前面一篇https://3water.com/article/25781.htm对tangram.js库做了较为详细的介绍,这里结合实例分析一下tangram.js库实现js类的方式。代码如下:

/*
 * Tangram
 * Copyright 2010 Baidu Inc. All rights reserved.
 *
 * @author: meizz
 * @namespace: baidu.lang.createClass
 * @version: 1.6.0
 */
///import baidu.lang;
///import baidu.lang.Class;
///import baidu.lang.Event;
/**
 * 创建一个类,包括创造类的构造器、继承基类Class
 * @name baidu.lang.createClass
 * @function
 * @grammar baidu.lang.createClass(constructor[, options])
 * @param {Function} constructor 类的构造器函数
 * @param {Object} [options]
 * @config {string} [type] 类名
 * @config {Function} [superClass] 父类,默认为baidu.lang.Class
 * @version 1.2
 * @remark
 *
      使用createClass能方便的创建一个带有继承关系的类。同时会为返回的类对象添加extend方法,使用obj.extend({});可以方便的扩展原型链上的方法和属性
 * @see baidu.lang.Class,baidu.lang.inherits
 *
 * @returns {Object} 一个类对象
 */
baidu.lang.createClass = /**@function*/function(constructor, options) {
  options = options || {};
  var superClass = options.superClass || baidu.lang.Class;
  // 创建新类的真构造器函数
  var fn = function(){
    var me = this;
    // 20101030 某类在添加该属性控制时,guid将不在全局instances里控制
    options.decontrolled && (me.__decontrolled = true);
    // 继承父类的构造器
    superClass.apply(me, arguments);
    // 全局配置
    for (i in fn.options) me[i] = fn.options[i];
    constructor.apply(me, arguments);
    for (var i=0, reg=fn["\x06r"]; reg && i<reg.length; i++) {
      reg[i].apply(me, arguments);
    }
  };
  // [TODO delete 2013] 放置全局配置,这个全局配置可以直接写到类里面
  fn.options = options.options || {};
  var C = function(){},
    cp = constructor.prototype;
  C.prototype = superClass.prototype;
  // 继承父类的原型(prototype)链
  var fp = fn.prototype = new C();
  // 继承传参进来的构造器的 prototype 不会丢
  for (var i in cp) fp[i] = cp[i];
  // 20111122 原className参数改名为type
  var type = options.className || options.type;
  typeof type == "string" && (fp.__type = type);
  // 修正这种继承方式带来的 constructor 混乱的问题
  fp.constructor = cp.constructor;
  // 给类扩展出一个静态方法,以代替 baidu.object.extend()
  fn.extend = function(json){
    for (var i in json) {
      fn.prototype[i] = json[i];
    }
    return fn; // 这个静态方法也返回类对象本身
  };
  return fn;
};

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jquery实现网页定位导航
Aug 23 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 #Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 #Javascript
jQuery中库的引用方法
Jan 06 #jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 #Javascript
js生成word中图片处理方法
Jan 06 #Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
计数器详细设计
2006/10/09 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
详解vue v-model
2020/08/31 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python正则-re的用法详解
2019/07/28 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python 的topk算法实例
2020/04/02 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
给同学的道歉信
2014/01/16 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS