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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
html实现随机点名器的示例代码
Apr 02 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python Pandas分组聚合的实现方法
2019/07/02 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python获取array中指定元素的示例
2019/11/26 Python
什么是python的函数体
2020/06/19 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
分公司任命书
2014/06/06 职场文书
经典团队口号大全
2014/06/21 职场文书
党员三严三实心得体会
2014/10/13 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技