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 相关文章推荐
javascript引导程序
Oct 26 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
python 实现归并排序算法
2012/06/05 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python实现textrank关键词提取
2018/06/22 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
英国网上电器商店:Electricshop
2020/03/15 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
税务会计岗位职责
2014/02/18 职场文书
党员创先争优承诺书
2014/03/26 职场文书
运动会方阵口号
2014/06/07 职场文书
目标责任书格式
2014/07/28 职场文书
竞选学委演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
Redis keys命令的具体使用
2022/06/05 Redis