-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Translated cookbook/adding-instance-properties.md #687
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
||
``` js | ||
Vue.prototype.$appName = 'My App' | ||
``` | ||
|
||
Now `$appName` is available on all Vue instances, even before creation. If we run: | ||
这样 `$appName` 就在所有的 Vue 实例中可用来,甚至在实例被创建之前就可以。如果我们运行: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可用来 → 可用了
|
||
``` js | ||
new Vue({ | ||
data: { | ||
// Uh oh - appName is *also* the name of the | ||
// instance property we just defined! | ||
// 哦,`appName` *也*是一个我们定义的实例属性名!😯 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Uh oh → 啊哦
|
||
## Real-World Example: Replacing Vue Resource with Axios | ||
## 真实的示例:通过 Axios 替换 Vue 资源 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Vue Resource 不用翻译吧?
|
||
Let's say you're replacing the [now-retired Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4). You really enjoyed accessing request methods through `this.$http` and you want to do the same thing with Axios instead. | ||
比如你需要替换已经废弃的 [Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4) 库。你实在是很喜欢通过 `this.$http` 来访问请求方法,希望还能这样使用 Axios。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
比如你打算/准备……?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
「……希望换成 axios 以后还能继续这样用」
|
||
In case you're not aware, methods added to a prototype in JavaScript gain the context of the instance. That means they can use `this` to access data, computed properties, methods, or anything else defined on the instance. | ||
在例子中你可能没有意识到,在 JavaScript 中一个原型的方法会获得该实例的上下文。也就是说它们可以使用 `this` 访问数据、计算属性、方法或其它任何定义在实例上的东西。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In case → 防止
这里感觉写成「你可能没有意识到」就可以了。
|
||
### When Not Using a Module System | ||
### 什么时候不要使用模块系统 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
当没有使用模块系统时
reverseText: function (text) { | ||
return text.split('').reverse().join('') | ||
} | ||
} | ||
}) | ||
``` | ||
|
||
<p class="tip">If you raised an eyebrow at `Object.freeze`, what it does is prevent the object from being changed in the future. This essentially makes all its properties constants, protecting you from future state bugs.</p> | ||
<p class="tip">如果你在好奇 `Object.freeze`,它做的事情是阻止这个对象在未来被修改。它有效的保证了其属性的持久性,避免在未来出现状态的 bug。</p> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这实质上将它的属性都设为常量
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个 bug 没翻译,那么之前的一个「错误」也不翻译?
@@ -186,8 +185,8 @@ new Vue({ | |||
}) | |||
``` | |||
|
|||
### When Using a Module System | |||
### 何时使用模块系统 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
当使用模块系统时
|
||
When you have access to a module system, you can easily organize shared code into modules, then `require`/`import` those modules wherever they're needed. This is the epitome of explicitness, because in each file you gain a list of dependencies. You know _exactly_ each one came from. | ||
当你使用模块系统的时候,你可以在模块中轻松的将共享的代码组织起来,然后把那些模块 `require`/`import` 到任何你所需要的地方。这是一种显性的做法,因为在每个文件里你都能得到一份依赖清单。你可以_准确_的知道每个依赖的来历。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
你可以轻松地把共享的代码组织成模块
建议删掉第一个「你」
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这是一个典型的显式做法
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
准确地
|
||
While certainly more verbose, this approach is definitely the most maintainable, especially when working with other developers and/or building a large app. | ||
虽然更加明晰,但是这种做法确实是最好维护的,尤其是当和多人一起协作一个大型应用的时候。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
虽然这样显然更啰嗦,但是这种方法确实是最可维护的
All done. Thanks. |
Thanks.