从prototype.js中学习到的js封装

最近在学习prototype.js,发现这里面的代码适合像我这种初学者(使用过一些库和框架,并用一些框架写过一些项目的人)学习,下面从源码截取一些面向对象封装的代码用于学习。

1、给Object的原型添加extend方法,功能是对象的扩展,把一个对象的值赋值给源对象,如果源对象存在属性,则修改,这种方法以前在jQuery中经常用到

Object.prototype.extend=function(object){
for(property in object){
this[property]=object[property];
}
//return this;
};

a.extend(b);

2、创建一个带构造函数的类型,在当时看到这段代码时,不是很好理解

var Class = {
   create: function() {
              return function() {
                    this.initialize.apply(this, arguments);
             }
    }
};

//调用

//首先通过new创建一个myClass,返回的是一个函数,

//给函数添加prototype方法initialize

var myClass=Class.create();
myClass.prototype={
          initialize:function(){
               alert("IS Create ");
          }
};

//new myClass时执行这行语句this.initialize.apply(this, arguments),调用initialize方法。

var b=new myClass();//弹出IS Creste

2、给String添加原型方法

Object.extend(String.prototype, (function() {

function empty() {
return this == ‘‘;
}

return {
empty:empty
};
})());

//可以

‘abc‘.empty();

3、给Array添加原型方法

(function() {
   var arrayProto = Array.prototype;

function size() {
        return this.length;
   }

Object.extend(arrayProto, {
        size: size
   });

});

4、给Date添加原型方法

(function(proto) {

function toISOString() {
      return this.getUTCFullYear() + ‘-‘ +
          (this.getUTCMonth() + 1).toPaddedString(2) + ‘-‘ +
          this.getUTCDate().toPaddedString(2) + ‘T‘ +
          this.getUTCHours().toPaddedString(2) + ‘:‘ +
          this.getUTCMinutes().toPaddedString(2) + ‘:‘ +
          this.getUTCSeconds().toPaddedString(2) + ‘Z‘;
  }

function toJSON() {
       return this.toISOString();
  }

if (!proto.toISOString) proto.toISOString = toISOString;
  if (!proto.toJSON) proto.toJSON = toJSON;

});

5、创建一个新的类型

var Enumerable = (function() {

function each(){

}

funciton ...

return {
each: each

...
};

});

时间: 2024-10-06 10:47:42

从prototype.js中学习到的js封装的相关文章

js中调用mangeto的js翻译

第一步: <script type="text/javascript"> Translator.add('英文','<?php echo this->__('目标语言')?>'); </script> 第二步: 在你模块的etc文件夹下创建jstranslator.xml,并添加一下内容 <jstranslator> <validate-select translate="message" module=&

Vue.js中学习使用Vuex详解

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取.进行修改,并且你的修改可以得到全局的响应变更.下面咱们一步一步地剖析下vuex的使用:首先要安装.使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex : npm install vuex --save 然后 在src文件目录下新建一个名为store的文件

JS中的运算符和JS中的分支结构

JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链接字符串作用, 链接之后的结果为字符串. 除+外,其余符号运算时,会先尝试将左右变量用Number函数转为数字: /:结果会保留小数点. ++:自增运算符,将变量在原有基础上+1: --:自增运算符,将变量在原有基础上-1: [a++和++a的异同] ①相同点:无论a++还是++a,运算完以后,a的

node.js中函数的两种封装方式

1.创建一js文件(funs.js)function  controller(req,res){          //res.write("发送");          call('hello',req,res);          res.end("");      }module.exports  =  controller;    //此文件中只有一个函数被发布 其他文件中调用:require('./models/funs.js'); controller(

js中动态载入css js样式

js中动态载入css样式,方法如下: //<link rel="stylesheet" type="text/css" href="http://css.static.m1905.cn/base.min.css"> var addCssLink = function(url){ var link = $('<link>'); link.attr('rel','stylesheet'); link.attr('type','

bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一点特别的是另外一个js的方法中会进行一个ajax, 会根据ajax返回的结果来进行返回true或者false. 在测试的过程中我发现不管怎么弄, 最后返回的都是undefind. 下面来模拟一下这个场景 上面这个例子中,flag一直都是undefind,ajax已经是同步的情况下依旧返回undefi

JS中的phototype是JS中比较难理解的一个部分

本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子: function People(name){this.name=name;//对象方法this.Introduce=function(){alert("My name is "+this

vue.js 源代码学习笔记 ----- codegenEvents.js

/* @flow */ const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/ const simplePathRE = /^\s*[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?']|\[".*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*\s*$/ // keyCode aliases const keyCodes = { esc: 27, tab:

vue.js 源代码学习笔记 ----- fillter-parse.js

/* @flow */ export function parseFilters (exp: string): string { let inSingle = false let inDouble = false let inTemplateString = false let inRegex = false let curly = 0 let square = 0 let paren = 0 let lastFilterIndex = 0 let c, prev, i, expression,