phpstudy集成环境

 首页 > 怎么提升Js水平啊。

怎么提升Js水平啊。

问这个问题的原因是，js水平很渣，入门水平，也很想提高。原型链、继承、类、闭包在能看到状态，也能写demo。但是不知道怎么应用到项目，一般就用一些jquery的api或者找一些开源控件什么的。

一句话：要多想

你说“不知道怎么应用到项目中去”，但你是否想过：为什么要用这些东西？ 因为高大上？随波逐流不好。能满足需求的才是最实在的，毕竟需求驱使一切。

不要为了使用 Feature 而使用 Feature。

这里的 Feature 是广义的，包括但不限于如 原型链 等语言特性，还有 设计模式以及各种插件 等开发中常会遇到的概念。Features 的出现都是为了解决一种或一类问题的。具体的如 时钟插件，是为了简化页面上的时钟显示；立即执行函数，可以创建一个作用域以保持变量，还可以防止内部变量污染外部环境；抽象的如 设计模式，是前人总结的一系列经验，可以解耦系统。既然这些都是解决方案，自然要在问题出现时才使用。

我建议：对于一个新接触的 Feature，用一句或几句简练的语言概括其功能，并记住它——记一句话比记住用法容易多了，具体用法不重要，忘了可以查。对于一个需求，将其拆解成若干个问题，并匹配出用得上的 Features，从而完成需求。

举个例子：

上司叫你完成一个无限加载文章列表。你应该这么思考：

具体的功能是什么？

首屏先加载一部分数据。监控滚动条，若滚动条到达底部，加载下一部分数据。以此类推，直至没有数据。

于是，你会得到两个问题：

  1. 如何动态加载数据？

  2. 如何监控滚动条？

如果有知识储备，很快就知道 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，可通用于所有的语言。时间长了，编程能力自然就提升了。

可以学习一下node

【热门文章】
【热门文章】