Js组件的一些写法

首先看下Prototype里的写法:

var Class = {
create: function() {
return function() { this.init.apply(this, arguments); }
}
}
var A = Class.create();
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A("myMsg");
a.fn(); 

如果你不喜欢上面这一大堆Class.create之类的,你也可以这样:

function A() { } //var A = function(){}
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A();
a.init("myMsg");
a.fn(); 

当然,也可以把this.msg的初始化放到function A(msg){this.msg=msg;}里。总之你会发现这样调用很麻烦,并且参数是固定对应好的。 
你如果既不愿搞一大堆Class.create,也不愿调用不方便,那就把Prototype里的var Class = {...} 和 var A = Class.create();合并起来。得到:

function A() {
this.init.apply(this, arguments);
}
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A("myMsg");
a.fn(); 

看上去干净了许多,但是如果你的库里有很多组件,则每个组件都要写一遍this.init.apply(this, arguments); 如果用Class.create的话,则只要写一个Class,然后每个组件执行下Class.create()即可。当然,每个组件都写一遍this.init.apply(this, arguments);也没啥不好的,还是看个人喜好了。另外写原型方法是合在一起还是分开来写也是个人喜好,出于封装的角度,合一起好,但是分开有时候显的更清晰。譬如A.prototype.init=function(msg){...} A.prototype.fn=function(){...}

然后还有人喜欢这样去写组件:

var A = function(msg) {
this.msg = msg;
var _this = this;
var privateFn1 = function() {
alert(_this.msg);
}
var privateFn2 = function() {
alert(_this.msg);
}
return { fn1: privateFn1, fn2: privateFn2 };
}
var a = new A("myMsg");
a.fn1(); 

这边一定要把A构造的对象this放到临时变量_this中哦,因为运行时,privateFn1的函数体内this实际是{fn1:...,fn2:...}这样的匿名对象,你可以用this.hasOwnProperty("fn1")去测试。this是在运行时才有意义的一个东西。另外这种方法每个对象都会有privateFn1 和 privateFn2的副本,这种方法不太好。

时间: 2024-11-06 06:45:33

Js组件的一些写法的相关文章

Js组件的一些写法【转】

首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, arguments); } } } var A = Class.create(); A.prototype = { init: function(msg) { this.msg = msg; }, fn: function() { alert(this.msg); } } var a = new A("my

JS组件系列——封装自己的JS组件

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur

JS组件系列——封装自己的JS组件,你也可以!

前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件,我们该如何去做呢,别急,我们慢慢来看看过程. 一.扩展已经存在的组件 1.需求背景 很多时候,我们使用jquery.ajax的方式向后台发送请求,型如 $.ajax({ type: "post", ur

JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

阅读目录 一.为什么组件很重要 二.Vue里面的组件基础知识 1.组件的概念 2.组件原理 3.组件使用 三.封装自己的Component 1.使用Component封装bootstrapTable 2.封装select 3.查看其他Vue框架源码 四.总结 正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博

JS组件系列——分享自己封装的Bootstrap树形组件:jqTree

前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣.看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第一个Jquery Tree,只是用简单样式和js去实现了效果,没有给出一个系统的封装,这篇博主就来试试在此样式的基础上封装一个稍微完整点的树形组件. 一.组件效果预览 其实效果和之前的那个差不多,博主只是在之前的基础上加了一个选中的背景色. 全部收起 展开 全部展开 二.代码示例 其实效果很简单,重

JS组件系列——Form表单验证神器: BootstrapValidator

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do

JS组件系列——KnockoutJS用法

前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Knockout去实现一个简单的增删改查,来体验一把神奇的MVVM.关于WebApi的剩余部分,博主一定抽时间补上. 一.Knockout.js简介 1.Knockout.js和MVVM 如今,各种前端框架应接不暇,令人眼花缭乱,有时不得不感叹作为程序猿也真是苦逼,总有学不完的技术,何时是尽头,除非你转化

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x

JS 组件化开发 系列(一)

JS 组件化开发 系列 作为前端开发,组件化开发是你成长的必经之路.时间的积累逐渐摸索出自己比较好的开发方式. --- zenking (1)实现最简单的组件化: var jdb ={ alert: function(str) { alert(str); }, console:function (str) { console.log(str) } } 这样就是简单的实现 jdb.alert.jdb.console 两个方法. 但是呢? 现在需求改了, 需要实现链式调用. 就是像jquery 一样