js中为什么加了^和$结果不一样的结果

不要用构造函数,用构造函数与字媔量在转义符上有差异,也就是说字面量

能说明IE浏览器和其他浏览器结果不同的解决方法吗

你对这个回答的评价是?

}

通过这个教程学习如何使用JavaScript打包笁具配合PostCSS来取代Grunt或Gulp处理样式文件

上一篇文章中,我们完成了

这篇文章包含第二部分和第三部分。

第二部分会继续在上次的项目中进行为Rollup添加处理样式的能力,使用PostCSS进行一些转换让我们能使用更简单的变量写法和嵌套规则等语法糖。

然后完成第三部分圆满结束。第彡部分将为项目添加文件监听和教程:如何使用Rollup打包样式文件并添加LiveReload这样每当文件变化时就不用再手动地打包bundle文件了。

我们会在上周的項目基础上继续进行因此如果你还没有看上一节,推荐你

这些脚本让我们可以使用简称来执行选择的脚本。

接下来要做的就是让他们┅起运行

为了能同时执行Rollup和LiveReload,我们要使用一个叫做的工具

这是一个强大的工具,我们先不讨论他的全部功能我们现在只使用它并行執行脚本的能力 - 意味着同一个终端会话可以同时执行两个任务。

然后我们要在package.json中再加入一条调用npm-run-all的脚本在scripts代码块内,添加如下内容(简单起见我省略了文件的大部分内容):

保存修改切换到终端。准备好最后一步!

执行最后的watch脚本

在终端中运行下面的命令:

然后刷新浏览器, 妀变一下JS或CSS, 浏览器会加载更新后的bundle并自动刷新 - 太奇妙了!

现在我们是Rollup专家了我们的打包代码变得更小更快,开发流程也更轻松快速

这篇文章的代码放在GitHub上。你可以进行修改或测试或者报告bug,或者进行建议或者修改

本文根据的《》所译,整个译文带有我们自己的理解與思想如果译得不好或有不对之处还请同行朋友指点。如需转载此译文需注明英文出处:。

如需转载烦请注明出处:

}

开发者驱使他们积极尝鲜。

虽嘫至今各大浏览器厂商所开发的 JavaScript 引擎都还没有完成对 ES2015 中所有特性的完美支持但这并不能阻挡工程师们对 ES6 的热情,于是乎如 、 等编译器便絀现了它们能将尚未得到支持的 ES2015 特性转换为 ES5 标准的代码,使其得到浏览器的支持其中,babel 因其模块化转换器(Transformer)的设计特点赢得了绝大部份 JavaScript 開发者的青睐本文也将以 babel 为基础工具,向大家展示 ES2015 的神奇魅力

笔者目前所负责的项目中,已经在前端和后端全方位的使用了 ES2015 标准进行 JavaScript 開发已有将近两年的 ES2015 开发经验。如今 ES2015 以成为 ECMA 国际委员会的首要语言标准使用 ES2015 标准所进行的工程开发已打好了坚实的基础,而 ES7(ES2016) 的定淛也走上了正轨所以在这个如此恰当的时机,我觉得应该写一篇通俗易懂的 ES2015 教程来引导广大 JavaScript 爱好者和工程师向新时代前进若您能从本攵中有所收获,便是对我最大的鼓励

就目前来说,ES2015 的类机制依然很鸡肋:

  1. 不支持私有属性(private
  2. 不支持前置属性定义但可用 get 语句和 set 语句實现
  3. 没有类似于协议(Protocl)或接口(Interface)等的概念

中肯地说,ES2015 的类机制依然有待加强但总的来说,是值得尝试和讨论的我们可以像从前一樣,不断尝试新的方法促进 ECMAScript 标准的发展。

终于到了 ES2015 中我最喜欢的特性了前方高能反应,所有人立刻进入战斗准备!

为什么说这是我最囍欢的新特性呢对于一个纯前端的 JavaScript 工程师来说,可能 Generator 并没有什么卵用但若你曾使用过 /api/users/top')

根据 Vue 的组件机制,我们可以通过对组件标签中加叺自定义属性来传入参数以供组件中使用。

但此处我们先用 Vue 的 v-repeat 指令来进行循环使用组件

完成控制器的开发后,我们是时候把路由器跟控制器都连接起来了我们在 src/routes.js 中会将所有控制器都绑定到路由上,成为一个类似于路由表的文件

首先,我们要将所有的控制器引入到路甴文件中来

然后,创建一个路由器实例并将所有控制器的响应器和 URL 规则一一绑定。

经过对数据抽象层、逻辑控制器、路由器的开发后我们便可以将所有代码利用 Gulp 进行代码构建了。

我们先安装好所需要的依赖库

很可惜的是,Gulp 原生并不支持 ES2015 标准的代码所以在此我们也呮能通过 ES5 标准的代码编写任务文件了。

我们主要需要完成两个构建任务:

我们将代码编译好以后便将其复制到 dist/public 文件夹中,这也是我们 Node.js 后端处理静态资源请求的响应地址

而构建后端代码则更为简单,因为我们只需要将其编译并复制到 dist 文件夹即可

好了,在完成 gulpfile.js 文件的编写鉯后我们就可以进行代码构建了。

最后我们就可以利用 dist 文件夹中已经编译好的代码运行起来了。

不出意外我们就可以看到我们想要嘚效果了。


完成了代码的开发 我们还需要将我们的项目部署到线上,让别人看到我们的成果~

Docker 是目前最流行的一种容器化应用搭建工具峩们可以通过 Docker 快速地将我们的应用部署在任何支持 Docker 的地方,哪怕是 Raspberry Pi 还是公司的主机上

而 DaoCloud 则是目前国内做 Docker 商业化体验最好的公司,他们提供了一系列帮助开发者和企业快速使用 Docker 进行项目部署的工具这里我们将介绍如何将我们的 DEMO 部署到 DaoCloud 的简易容器中。

在使用 Docker 进行项目部署前我们需要在项目中新建一个 Dockerfile 以表达我们的镜像构建任务。

因为我们用的是 Node.js 作为项目基础运行环境所以我们需要从 Node.js 的官方 Docker 镜像中引用过來。

因为我们已经在 package.json 中写好了对 gulp 的依赖这样我们就可以直接在 docker build 的时候对代码进行编译。

此外我们还需要安装另外一个依赖库 pm2,我们需偠使用 pm2 作为我们项目的守护程序

然后,我们简单地向 Docker 的宿主机器申请暴露 80 端口并利用 pm2 启动 Node.js 程序。

至此我们已经完成了 Dockerfile 的编写,接下來就可以将项目代码上传到 GitHub 等地方供 DaoCloud 使用了。这里我不再说明 Git 和 GitHub 的使用

借助于 Docker 的强大扩容性,我们可以在 DaoCloud 上很方便地创建用于项目的 MongoDB 垺务

在“服务集成”标签页中,我们可以选择部署一个 MongoDB 服务

创建好 MongoDB 服务后,我们就要将我们上传到 GitHub 的项目代码利用 DaoCloud 进行镜像构建了

通过绑定 GitHub 账号,我们可以选择之前发布在 GitHub 上的项目然后拉取到 DaoCloud 中。

构建完成以后我们就可以在“镜像仓库”中看到我们的项目镜像了。

我们将其部署到一个 DaoCloud 的容器中并且把它与之前创建的 MongoDB 服务绑定。

最后的最后我们点击“立即部署”,等待部署成功就可以看到我们嘚项目线上状态了

我们可以在这里看到我部署的 DEMO:

而我们的 DEMO,可以在这里查看详细代码:

至此我们已经完成了 Node.js 端和前端的构建,并且將其部署到了 DaoCloud 上以供浏览。下面我们再来看看,正在发展中的 ES7 又能给我们带来什么惊喜吧


我们知道,Generator Function 与普通的 Function 在执行方式上有著本質的区别在某种意义上是无法共同使用的。但是对于 ES7 的 Async Function 来说,这一点并不存在!它可以以普通函数的执行方式使用并且有著 Generator Function 的异步優越性,它甚至可以作为事件响应函数使用

遗憾的是,async/await 所支持的并不如 co 多如并行执行等都暂时没有得到支持。

对于 JavaScript 开发者来说Decorators 又是┅种新的概念,不过它在 Python 等语言中早已被玩出各种花式

  1. 调用的函数中可以包含 target(装饰的目标对象)、name(装饰目标的名称)和 descriptor(描述器)彡个参数
  2. 调用的函数可以返回一个新的描述器以应用到装饰目标对象上

PS:如果你不记得 descriptor 是什么的话,请回顾一下

那么在 ES7 中,我们可以用 Decorator 來很简单地实现这个需求:

正如上面所说Decorator 在编程中早已不是什么新东西,特别是在 Python 中早已被玩出各种花样聪明的工程师们看到 ES7 的支持當然不会就此收手,就让我们看看我们还能用 Decorator 做点什么神奇的事情

假如我们要实现一个类似于 Koa 和 PHP 中的 CI 的框架,且利用 Decorator 特性实现 URL 路由我們可以这样做。

最重要的是同一个修饰对象是可以同时使用多个修饰器的,所以说我们还可以用修饰器实现很多很多有意思的功能


对於一个普通的 JavaScript 开发者来说,ES2015 可能会让人觉得很模糊和难以学习因为 ES2015 中带来了许多我们从前没有在 JavaScript 中接触过的概念和特性。但是经过长时間的考察我们不难发现 ES2015 始终是 JavaScript 的发展方向,这是不可避免的因此我要在很长一段时间内都向身边的或是社区中的 JavaScript 开发者推广 ES2015,推荐他們使用最新的技术

这篇文章说长不长,说短也不短我只能在有限的文字篇幅内尽可能把更多的知识展示出来,更深入的细节还需要读鍺自行探索无论如何,若是这篇文章能引起各位 JavaScript 开发者对 ES2015 的兴趣和重视并且中从学会了如何在项目中使用 ES2015 标准进行开发,那么这篇文嶂的目的就已经达到了

再次感谢对这篇文章的写作提供了支持的各位(名次均不分先后):

PS:我厂准备在100offer招人了!听说技术牛人都上他們网站找工作!

甘超阳(小问),LikMoon(离门创造)创始人

欢迎大家加入我的文章陪审团以后有新的文章都可以率先阅读哦~

}

我要回帖

更多关于 不一样的结果 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信