浙江铃声推荐联盟

[JavaScript从入门到放弃系列] 中级篇1. 写个自己的JS插件吧?

慎独网只说真话2018-06-28 14:08:38

 设计插件的时候,也要想好,这个插件是干嘛的,适应哪些场景,能不能通用,如果需求发生一点变化,能不能尽量不去修改内部代码,而通过配置解决。



我们之前已经学习了JS/ES的函数、对象、以及DOM操作。大家可能一直觉得学ES那些对象啊,原型啊,this啊没啥用。那么今天我们就来实践一下,把之前所学都用起来。


其实还有个最难的知识点叫“闭包”,我们暂时按下不讲。因为大多数人放弃JS就是从这里开始的。


做点有趣的事情吧。我们今天来做一个简单的插件。所谓插件,你可以想一想收麦子的收割机,用了之后,大幅解放了生产力。


当然了,造收割机也是要有设计的,得想好这个收割机是为了多大的田准备的,核心作用是干嘛,我们不能最后造出个卡车出来。


所以在设计插件的时候,也要想好,这个插件是干嘛的,适应哪些场景,能不能通用,如果需求发生一点变化,能不能尽量不去修改内部代码,而通过配置解决。


那现在场景来了,我们做后台系统,经常使用表格来展示列表信息。比如管理员列表或者学生列表或者订单列表,既然是表格总是免不了行和列嘛。


所以我们想做一个插件,只要给个行数、列数,就直接生成个表格出来。还可以给个class类名以及容器,表示这个表格长啥样,放在啥地方。


千里之行,始于足下。



01


插件的一些小规范


就一句,插件中的内部变量应该是与世隔绝的,外面访问不到里面,里面也不去访问外面。总之互不干扰,即使其他地方定义了重复的变量名称,也不会混淆掉。用个更贴切的词叫不要让你的变量造成污染。

看下这段代码:

先解释一下这种写法,将一个函数用括号包起来,紧随其后跟一个括号,这样写是没毛病的,意思是定义一个函数并且立即调用。他也是可以传参的:

后面学到JQuery的时候,会发现JQuery源码也是这样做的。

我们都知道在方法中用var定义变量,就会成为局部变量,函数外面是不能直接访问的(闭包除外),当然要注意js不存在块作用域,比如if/while这些。


务必要牢记这个区别。

好我们开始定义插件的核心方法。


首先看这段代码,我们定义了一个函数,指定了需要一个对象类型参数params,同时为了防止用户不传参进来,我们给了些默认配置。比如行数rowCount,列数columnCount,父级容器对象,class类名。


然后判断参数,如果用户传进来有效参数,则覆盖掉默认配置。

注意if(params)和if(params.rowCount),我们前面说JS是个特殊的语言,当对象感觉不舒服的时候,会自行转化以适应当前环境。所以这里的判断相当于if(params != null && params != undefined)和 if(params.rowCount>0 ),这些具体内容我们课上再讲吧。你可以自己先试试。


我们看下调用时怎么传参:

这里传了个对象进去,当然你可以用别的方式创建对象。都一样。


02


插件的功能主体


好了,我们插件的模型已经出来了。下面就是实现功能了。代码很简单,循环创建表格呗,很简单。在刚才的代码后面继续写。


务必注意这些代码都是被前面说的(function(){  .....  })包含起来的。





03


插件的注意点


我们现在来调用一下。发现会报错,说这个方法没定义。其实就是外部没找到嘛。因为我们前面说了,()()里面的东西都是与世隔绝的,所以我们需要想办法传个对象进去,然后把这个函数绑到这个对象上。显然首选是全局对象global或者window嘛。

这样,window对象里面就挂上了createTable方法,我们可以用window.createTable()直接调用了,其实连window都可以省略掉,直接用。因为根据作用域链,总会找到这个方法的嘛。


事实上可以直接简化,啥都不给,只把函数的定义方式改成变量表达式。这个createTable就自动挂到window对象上去了。



这里没有给容器,就用了默认值body对象,如果要传的话,可以传 document.getelementbyid(xxx)这种。


同时给了个样式名tb,可以再外面设置样式,因为各个项目或者各个页面可能风格不一样,所以最好不要再插件里面给样式,导致不通用。应该让调用方给样式。


看一下效果吧:

完美。


真的完美了吗?我们是不是可以通过配置,指定跨行跨列呢?抛砖引玉,大家自己思考一下该怎么做。


    

04


插件的封装


其实我们刚刚只是一个小小的生成表格的插件,日常工作中为了提高开发效率,我们可能会写很多歌小插件,但又不想搞那么多的JS文件,所以我们可以整合在一起,用一个大的对象来调用这些有趣的方法。

注意看这里我定义了一个大的全局对象,然后把之前的生成表格的方法放进去了,并且又搞了个字符串的帮助类,里面暂时只写了一个去开头空格的方法,可以看到我们用到前面所学,arguments.call()实现了递归。


这就是活学活用。


那么现在调用方式也得改一改了。


这样是不是好管理多了,当然这样显得名字有点长了,自己想办法解决嘛,比如搞成$$啥的



05


插件的注释


注意,本章最重要的东西来了,辛辛苦苦写了一个插件,就是为了方便自己以及跟别人装逼。怎么能没有注释呢?注释的意义就是告诉别人怎么用,以及作者是谁

我就先注为敬了:


感觉如何



好了今天就这样吧,只是举例个简单的例子,介绍插件这个概念。抛砖引玉,各位可以展开奇思妙想,如何写自己的插件。


好好搞吧。





最后依然是软广:

一个口碑换十节课。




看完不转发吗?