文档章节

Js组件的一些写法

墨飞2015
 墨飞2015
发布于 2015/03/31 10:16
字数 587
阅读 119
收藏 3

今天看了rank的一篇javascript脚本控件topic,突然想总结一下一些写JS组件的方法,或者说一些不同人的不同coding style。

今天看了rank的一篇javascript脚本控件topic,突然想总结一下一些写JS组件的方法,或者说一些不同人的不同coding style。 

  首先看下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的副本,这种方法不太好。 


本文转载自:

共有 人打赏支持
墨飞2015
粉丝 2
博文 22
码字总数 5150
作品 0
昌平
code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_
06/07
0
0
五分钟 Styled-components 高级实用技巧

写在前面的废话 回到2013年,React凭空出世。但是在那时,我们会想,oh shit! 我们好不容易分离了HTML/CSS/JS, 为什么出现了JSX,我们又需要把HTML和JS耦合在一起?React 创造了 HTML in JS...

二哲
09/03
0
0
学习React从接受JSX开始

详情参考官方JSX规范 虽然JSX是扩展到ECMAScript的类XML语法,但是它本身并没有定义任何语义。也就是说它本身不在ECMAScript标准范围之内。它也不会被引擎或者浏览器直接执行。通常会利用很编...

cherryvenus
09/05
0
0
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
0
10
利用TypeScript构建优雅的React Native项目

很长一段时间就想把ts引入公司的项目,但总是因为一些原因被搁置。接下来有机会重构之前的rn项目,借此机会正好可以引入ts,为了使后期的项目架构更加完善,近期我会梳理rn的一些知识点和新特...

百叶
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算卷积神经网络浮点数运算量

前言 本文主要是介绍了,给定一个卷积神经网络的配置之后,如何大概估算它的浮点数运算量。 相关代码:CalFlops,基于MXNet框架的 Scala 接口实现的一个计算MXNet网络模型运算量的demo。 正文...

Ldpe2G
今天
1
0
Sql语言与MySql数据库

1. 数据库简介 1. 数据库,就是存储数据的仓库,只能通过sql语言来访问,数据库也是一个文件系统。通常,MySQL、Oracle等数据库,也被称为关系型数据库,其保存的不仅仅只是数据,还包括数据...

江左煤郎
今天
1
0
IDEA 取消自动import .*

打开设置 > Editor > Code Style > Java > Scheme Default > Imports ① 将 Class count to use import with "*" 改为 99 (导入同一个包的类超过这个数值自动变为 * ) ② 将 Names count ......

乔老哥
今天
3
0
PostGIS学习笔记(开篇)

PostGIS事实上算是笔者开始写博客的第一篇内容。而事实上那篇博文的内容并不丰富,笔者对PostGIS的了解仍然不多,然而17年在OSGeo课程学习时对PostGIS又有了进一步了解,并逐步发现它的强大。...

胖胖雕
今天
3
0
【Centos】在nginx服务器中配置php和mysql

接上一章《【Centos】利用Vultr服务器和namesilo布网》(https://my.oschina.net/u/3776619/blog/2051986),在Centos中配置好nginx,并在iptables中开启了80端口,和为了远程mysql操作方便开...

yongh701
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部