js重学7—数组自定义属性prototype

JavaScript0102

js重学7—数组自定义属性prototype,第1张

prototype属性可以为数组对象添加自定义的属性或方法

参数:

name 要添加的属性名或方法名

value添加的属性的值或执行方法的函数

例如:使用prototype自定义一个方法,用于显示数组中的最后一个元素

使用 Vue + LeanCloud 开发的一个周报系统,纯前端实现。并利用 LeanCloud 云引擎服务,实现每周五给全员发送邮件,提醒填写周报。周六周日分别再次对未填人员发送邮件提醒。

LeanCloud 应用配置

前往 LeanCloud 或 LeanCloud 国际版新增应用。并导入 /appSchema/ 下的 schema

修改 src/config/av.config-example.js 文件,填入 LeanCloud 应用的 App ID App key 服务器地址

此 id 、 key 、 url 可以从 LeanCloud 要关联的应用 =>设置 =>应用 Key 中获取。

LeanCloud 国际版应用不强制要求绑定自有域名,如果使用 LeanCloud 国际版应用, url 可以留空( url: '' )。

周报配置

可以从 src/config/input.config.js 和 src/config/group.config.js 中配置周报填写的类型、说明以及小组配置,格式相应参见文件即可。

发送邮件配置

修改 mail/mailer-example.php 文件,配置完成后重命名为 mailer.php 即可

无需邮件服务器,直接使用各个邮箱的 SMTP 服务即可完成。

这里发送邮件的实现是使用了 PHPMailer 简单包装来实现的。

以上展示了配置发送邮件的功能,还需要定时查找用户或未提交的用户来发送邮件。

此处使用 LeanCloud 云引擎中的定时任务来实现:

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

相关文档可参考 LeanCloud 开发指南 。

构建使用步骤

此项目直接使用 Vue-cli 工具初始化,配置进行了略微修改,相关命令如下:

关于打包后的部署使用,请根据要放的目录,自行调整 /config/index.js 中的 assetsPublicPath 路径,并将打包生成的文件(默认在 /dist/ 下)全部拷贝到你指定目录下即可。

周报填写页面

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

周报汇总展示

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

汇总图表

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

只想看你关心的?这里有!

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

个人信息维护

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

管理员对成员查看和管理

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

支持任意时段的历史查看,并且支持导出 csv 表格。

<figcaption style="line-height: inheritmargin: 0pxpadding: 0pxmargin-top: 10pxtext-align: centercolor: rgb(153, 153, 153)font-size: 0.7em">在这里插入图片描述</figcaption>

点击查看更多云引擎项目示例 。

js并不难学。Js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。B:本身内容很多,如函数库、对象库就一大堆。C:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。就好像又是新的一样,让你对曾经学的面向对象产生了怀疑......D:辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后,变量、函数、对象你也都略知一二,但一到公司开发项目的时候,却又难以下手。因为公司在开发实际项目的时候通常都是直接用它的衍生库,如:jquery,angular,boostrap,amaze,layui,ueditor等,而这些库又多如牛毛,同时还有自己的难点。让你都不知道该学哪个好,甚至都怀疑自己学的是不是js了,好像有多个版本的js一样,总是学不完......那么,怎么才能在js领域内学的轻松甚至游刃有余呢?我总结了一些实战意义的js学习经验:1.首先要紧紧抓住它的地位时刻都不能忘记,否则很容易犯“一叶障目不见泰山”的错误。不要学了很久就知道js是编程语言,就是写代码,而且特点就是乱七八糟就完了,那样是学不好js的。要时时抓住它的地位,确切的说是它在整个Web中的地位:它属于前端的核心,主要用来操控和重新调整DOM,通过修改DOM结构,从而来达到修改页面效果的目的。要用这个中心思想去指导后续的一切js的学习,并且形成条件反射。 2.要有一条清晰的学习路线这个只能是过来人给你提供参考了。我的学习路线如下:A:js基础部分,如:定义变量、函数、数组、字符串等的处理,内置函数、内置对象等;B:js面向过程编程思想,封装出各个函数,试着用这些去做一些常见的小功能,如:选项卡、自定义多选按钮、自定义播放器、3D幻灯片;C:js面向对象编程思想,试着去封装一些你自己的对象,提供出有意义的接口出来;D:学了上述的内容,然后学常用的库,这里必须学jquery;E:学基于jquery之上的常见插件,如:bootstrap,Layer,富文本编辑器等;F:综合应用上面的多种库写实际项目的模板,多写几套。 3.从多角度去学习和领悟充分调动你所学的东西,从多角度去做某一功能,如:以前你是从面向过程角度做的,现在改为从面向对象的角度再来做,或者继续做成可以直接使用的插件,提供属性、方法等出来。争取让你做的这个功能逐渐能使用到实际项目中来。这样的好处:既综合应用了你的所学,又能有实际意义。 4.注意培养信心此时的你,不适合一来就看很复杂很炫的网页效果的源代码,也不适合一来就学jquery,angular,vue,bootstrap这些东西。这些内容包含了很多深奥的知识在里面,在没有任何基础的情况下直接学这些,会严重打击你的自信心。而此时你是弱小的,你需要的是培养信心,而不是反过来,否则结局很可能是“夭折”,离学有所成也就遥遥无期了。 5. 多写总结这种总结不但包括源代码、显示效果截图,还应该很容易犯的错误和对应的解决方法以及最后一两句精简的结论性语句。对自己写的总结不是写完了就了事了,要多回顾、多改进、多精简。到做项目的时候,应该是看里面的一两句话就知道是讲什么了,而不要再去看长篇大论了。 6.构建知识导图这个可以让你越学越清晰,你可以按你喜欢的任何形式去做,只要自己印象深刻就行。注意:知识导图也应该是经常修改、修正,让它更合理、更清晰。学习编程知识,就来北京尚学堂,优秀的师资和多年的编程教育经验,会让你在学习的道路上快人一步。