今天看了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的副本,这种方法不太好。
分享到:
相关推荐
每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来。今天,我就来谈谈js写法,我在开发过程中,也写了几种。对于性能方面,如果代码结构或逻辑写的不好,会造成计算机CPU的运算加大...
常见的vue组件写法有四种,各有特色,适用于不同的场景。 1、全局组件 结构: // 组件的注册 Vue.component( 'componentName', { template: // 组件的html结构, data(){ return{ // 组件中的属性 } }, ...
vue-2 组件支付写法; export default { name: 'pay', props: { propCurrencySymbol: { type: String, default: app.globalData.currency_symbol(), }, propPayUrl: { type: String, default: '', }, ...
今天看了rank的一篇javascript脚本控件topic,突然想总结一下一些写JS组件的方法,或者说一些不同人的不同coding style。
所以这里面地图相关的dom并不是react渲染的,真正创建地图之类的还是使用百度地图JavaScript Api,React-BMap只是利用了React组件的写法来封装百度地图JavaScript Api,使我们在使用React的时候能更方便的使用百度...
移动端rem开发自适应js写法
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll 前言 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件。 vscroll 一款基于vue2.x开发的网页端轻量级超小巧...
有一点需要注意的是,react.js会给所有的属性事件名称前加上”on”,后面则为驼峰式写法。例如原生的click事件,在react.js里应使用onClick事件。 我的组件使用的拖放属性如下: draggable 当设置为true时,当前控件...
说说Vue.js组件 什么是组件:组件是Vue.js最强大的功能之一。...one—-全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:’ 模版字符串’ Vue.component('tab-home', { template: `<div>Hom
因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildren="getChildren"></children>...
每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来。今天,我就来谈谈js写法,我在开发过程中,也写了几种。对于性能方面,如果代码结构或逻辑写的不好,会造成计算机CPU的运算加大...
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少。经过这几个月的时间,Vue的发展也是异常迅猛...
vue3.0实现复选框组件的封装 本文实例为大家分享了vue3.0... 改造成 @vueuse/core 的函数写法 <!-- 组件基本样式 --> <template> ()"> <i v-if="checked" class="iconfont icon-checked"></i> <i v-else clas
数据结构为数组中包含对象–树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据。本文为用Vue实现方式,另有一篇为用knockout.js的实现方法。 ...
基本写法:例如-父组件对应 Home.vue ;子组件对应 HomeChild.vue 父组件: 1.首先父组件引入子组件,并且注册子组件: improt HomeChild from './HomeChild.vue' 2.其次在父组件components内注册: components:...
焦点轮播图js组件使用说明开始调用组件,在html页面中写下如下代码...js组件就是面向对象的写法。组件就像一个黑匣子,我们不需要知道其内部功能就可以像如上的那样去调用他。但是我们开发者是要开发组件的,所以不仅要
- 然后在页面的 js 文件中,先引入组件的类,定制各个组件的初始数据,然后实例化,与上面的代码对应的写法如下: //index.js const ImageUploader = require('../common/image_uploader/image_uploader.js'); Page...
3、在index.js中导入组件,并把他们暴露出去 1、写法一 import studentCourse1 from './studentCourse.vue' import studentInfo1 from './studentInfo.vue' export var studentCourse=studentCourse1 export ...
用react写法来实现,思路+步骤: 第一步:准备数据 首先,需要创建一段假数据,模拟后端接口返回的数据。 第二步:根据数据结构渲染Dom 这一步,我们要根据数据接口,看看要设计几个搜索框。 根据第一步我们设计的...
如ymprompt.alert('消息内容',300,200,'消息标题',handler)和ymprompt.alert({message:'消息内容',width:300,height:200,title:'消息标题',handler:handler}),这两种写法是等价的。 10、只需要一个回调函数,可捕获...