这段时间一直在用 Visual Studio Code 做 Meteor 开发,但一直苦于没有 Meteor 的代码只能提示插件可以用,今天偶然间在 VSCode 的 marketplace 上逛的时候看到了 Meteor 的插件。最后一次更新就是昨天11月29日,所以马上安装了一下试用。效果非常好,比目前 atom、sublime text 等工具提供的插件都完善,而且智能补全的代码也都是目前 Meteor 官网最新的代码,比如 onRendered。
Meteor 订阅数据浏览器端查看工具 msavin:mongol
在过去的开发 Meteor 项目过程中,我们如果想查看某个页面所订阅的数据是否成功或者查看已经订阅成功数据的内容的时候,往往是通过浏览器的控制台打印数据查看,这样非常不方便,而且容易混淆。今天给大家介绍一款工具 msavin:mongol
可以让我们在开发环境中很轻松的就看到我们需要的订阅的数据信息。先来一张图看看效果。
Mac OS X EI Capitan 下调试 Android 微信内嵌网页
做微信开发的朋友一定遇到过这样的问题,在电脑上测试正常的网页到微信里面就出错了,不知道原因只能使用排除法一点点的排除,因为微信客户端无法输出浏览器中抛出的异常信息,对我们开发带来了很大的问题。
onload 加载事件
前面我们写过的代码中,JavaScript 代码都是在整个 HTML 代码后面的,这样是为了确保 HTML 页面中的所有 DOM 元素都加载完毕了,才能让 JavaScript 代码正确的执行,如果我们把 JavaScript 代码写在了 head 里面,就会导致 JavaScript 代码先执行了,而有些 DOM 元素还没初始化,最终 JavaScript 代码报错。要避免这种问题,我们可以使用 onload 加载事件来解决。
事件对象的作用和案例
事件对象,就是在响应某些事件的处理函数内部第一个传递进来的参数。不同的事件,参数的内容也不同,我们可以根据每一个事件对象能用的功能来实现特殊的需求,下面就是几个案例。
JavaScript 设置事件流流向
多层标签嵌套如果绑定了相同的事件,那么触发其中某一个标签的事件后,其关联的其他标签也会同时响应该事件,如下图所示:
JavaScript DOM 操作给元素添加、删除事件
借用传智播客教师课件中得一句话,“通过鼠标、键盘对浏览器页面所做的动作就是事件”,比如鼠标点击、鼠标移入、鼠标移除、键盘按下、键盘抬起等等,都称之为事件,这些事件有如下几种。
添加 Visual Studio Code 命令行到 Mac OS X 环境变量
我使用过一些编辑器,可以在命令行下很方便的启动它,比如我想在一个代码的目录直接启动 atom,那么我可以使用 atom .
来启动并加载当前目录下的代码到 atom 中。sublime text 也有类似功能,而本文谈到的是如何把 Visual Studio Code 的环境变量添加到命令行中,微软官方给出了具体的回答。
JavaScript DOM 操作 CSS 样式
在 jQuery 中,修改和获取 CSS 样式只需要一个 .css 就可以搞定了。实际内部也是通过 DOM 操作实现。设置 CSS 样式实际就是设定 DOM 的 style 属性,我们可以根据当前 DOM 元素的 style 属性获取其 CSS 样式,也可以修改或追加新的样式。
JavaScript DOM 节点的拷贝、删除
拷贝一个节点相当于将一个节点作为对象存放在内存中,这个对象可以被其他的诸如 appendChild 等操作来使用。而节点删除则只能通过一个 removeChild 来实现,所以要删除某个元素,首先要获取这个元素的父节点。我们使用以下方法来实现,参考代码:
禁用 Visual Studio Code 语义检查(单词检查)
这几天在 Mac 下装了微软的 Visual Studio Code(下面简称 VSCode),用起来感觉非常不错,很多功能在 atom 上需要安装插件才能实现的,在 VSCode 中都是集成好的,比如 JavaScript 的智能提示、高亮显示已选同名单词等。但是有一个功能让我看着很不顺眼,就是它会将一些拼写错误的单词打上一条绿色的波浪线,如果代码里面有很多缩写的单词,就会出现非常多的波浪线,看着非常难看,如下图:
atom 代码检查插件 linter
linter 是一个系列的插件,它可以识别大部分语法,并对你的语法错误进行纠正。linter 只是一个框架,如果要找针对你使用语言的语法纠错插件必须要安装针对你语言的版本,但是 linter 也不能卸载,它是一切的基础。下面是其纠正 js 代码的错误截图。
Meteor 组合订阅包 publish-composite 使用
初看这个标题可能有点晕,说的有点过于专业化,但是我也想不到更好的标题了。不过我们用真实的场景来给大家描述,来充分表达我们想表达的内容。熟悉使用 Meteor 发布(publish)和订阅(subcribe)的朋友可能会遇到这样一种情况。在某个列表页面,我们需要的数据分别储存在不同的集合(collection) 中。我们设计了一个查看某用户的所有评论的页面,按常规模式,我们首先可以根据用户的 ID 去评论的集合中查询该用户的所有评论内容,并根据该评论所关联的文章的 ID 查找到这篇文章的标题(Title)信息,用来显示在评论列表页提供用户查看或者访问。你可能会注意到,如果我们想获取到某条评论所关联的文章标题,我们必须要订阅这篇文章的内容,而在这之前我们并不知道这个用户都在哪些文章中有评论,若想订阅就需要把所有文章的结合订阅到客户端来使用,这样无疑是浪费资源和消耗时间的。
Meteor Iron.Router 环境下微信 jssdk 报错 config:invalid signature
这几天做了微信分享功能的修改,通过微信 jssdk 可以修改微信右上角分享到朋友圈、分享给朋友、分享到QQ这些界面的 Title、Description和 Image,用来让分享更有质量。普通情况下如果你没有使用 jssdk 去配置你分享的 Title 等信息,微信会将分享出来的 Title 设置为你网页的 Title 内容,将 Description 设置为网站的 Url,而图片则取文章中第一幅图片,如果文章中没有图片,那么分享出去的图片就是空白的。