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 验证日期的函数
Mar 18 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
JavaScript实现留言板案例
Mar 17 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
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
javascript 原型继承介绍
2011/08/30 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
javascript this详细介绍
2016/09/19 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python读取oracle函数返回值
2016/07/18 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python3.7 sys模块的具体使用
2019/07/22 Python
python类共享变量操作
2020/09/03 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
J2EE模式面试题
2016/10/11 面试题
霸王洗发水广告词
2014/03/14 职场文书
毕业留言寄语大全
2014/04/10 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书