javascript - 怎么提升Js水平啊。
问题描述
问这个问题的原因是,js水平很渣,入门水平,也很想提高。原型链、继承、类、闭包在能看到状态,也能写demo。但是不知道怎么应用到项目,一般就用一些jquery的api或者找一些开源控件什么的。
一句话:要多想
你说不知道怎么应用到项目中去,但你是否想过:为什么要用这些东西? 因为高大上?随波逐流不好。能满足需求的才是最实在的,毕竟需求驱使一切。
不要为了使用 Feature 而使用 Feature。
这里的 Feature 是广义的,包括但不限于如 原型链 等语言特性,还有 设计模式以及各种插件 等开发中常会遇到的概念。Features 的出现都是为了解决一种或一类问题的。具体的如 时钟插件,是为了简化页面上的时钟显示;立即执行函数,可以创建一个作用域以保持变量,还可以防止内部变量污染外部环境;抽象的如 设计模式,是前人总结的一系列经验,可以解耦系统。既然这些都是解决方案,自然要在问题出现时才使用。
我建议:对于一个新接触的 Feature,用一句或几句简练的语言概括其功能,并记住它——记一句话比记住用法容易多了,具体用法不重要,忘了可以查。对于一个需求,将其拆解成若干个问题,并匹配出用得上的 Features,从而完成需求。
举个例子:
上司叫你完成一个无限加载文章列表。你应该这么思考:
具体的功能是什么?
首屏先加载一部分数据。监控滚动条,若滚动条到达底部,加载下一部分数据。以此类推,直至没有数据。
于是,你会得到两个问题:
如何动态加载数据?
如何监控滚动条?
如果有知识储备,很快就知道 1 的答案是 ajax,2 的答案是监听 scroll 事件。不知道也不要紧,Google 一下就记住了。
于是你会写:
var hasNext = true;
function loadData() {
// ajax load data
}
$(window).on('scroll', function () {
if (hasNext)
// call loadData
})
写完了,这很好,功能都有了,也并没用到一些所谓高大上的东西。这时你应该想想:这么做是不是最好呢?
好像的确不是,比如 hasNext 暴露在顶级作用域,容易被熊孩子篡改。限定作用域?对啦,就是 IIFE:
(function () {
var hasNext = true;
function loadData() {
// ajax load data
}
$(window).on('scroll', function () {
if (hasNext)
// call loadData
})
})()
你会看到很多jQuery 插件都是这么写的,这并不是为了装逼,而是确有用处。
再想一想:如果上司加需求,还有好多其他的列表也要无限加载呢?复制粘贴?绝对不行,这是开发一大忌。这里边好多东西都是相似的,如 loadData,以及 scroll。只不过 参数如 url 有些不同罢了。因此我们可以把公共逻辑提取出来,封装成类——你知道,类有可重用性,易扩展性:
(function () {
function List (url, $container) {
this.hasNext = true
this.url = url
this.$container = $container
$(window).on('scroll', function () {
if (this.hasNext)
// call loadData
}.bind(this))
this.loadData();
}
List.prototype.loadData = function () {
// ajax load data
}
})()
如果上司又说:每篇文章需要定时更新内容。这怎么办?如果用传统方法,DOM 操作会非常繁琐,前面动态加载时的 HTML 拼接已经够烦人的了。数据与呈现保持同步?那不就是 MVVM 嘛!你所学习的 MVVM 框架又可以用上了。
总而言之:要多想。
功能做好了,想一想:能不能更简洁?需求改了怎么办?
这些都是问题,而只要有问题,就能用上对应的解决方案。
这种习惯不止限于 js,可通用于所有的语言。时间长了,编程能力自然就提升了。
这篇关于javascript - 怎么提升Js水平啊。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!