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压缩混淆工具
May 16 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
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 list()函数的详解
2013/06/05 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
python 图片验证码代码
2008/12/07 Python
python字典get()方法用法分析
2015/04/17 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
书法比赛获奖感言
2014/02/10 职场文书
超市中秋节活动方案
2014/02/12 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
党性观念心得体会
2014/09/03 职场文书
团代会闭幕词
2015/01/28 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
高中团支书竞选稿
2015/11/21 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js