JavaScript(JS)库

27111 阅读 0 评论 237 点赞

JS库通常是一组预先编写好的JS函数，可以用于解决常见的编程问题或提供额外的功能。下面是几个常用的JS库以及他们的主要用途：

库/框架名称	主要用途和特点
jQuery	简化HTML文档遍历、事件处理、动画和Ajax交互，提供实用函数
Lodash	数据处理实用程序库，用于数组、对象、数字操作，提供过滤、映射、排序等功能
React	构建用户界面的库，组件化开发，由Facebook开发，用于复杂UI构建
Vue.js	构建用户界面的渐进式框架，响应式组件，简单API，快速开发现代Web应用
Angular	构建单页应用的完整框架，组件化架构，由Google开发，适合复杂Web应用
Node.js	JS运行时环境，允许服务器端编程，非传统库但重要
D3.js	数据可视化库，创建动态、交互式可视化效果，使用HTML、SVG和CSS
Three.js	3D图形库，在浏览器中创建和显示3D图形

使用JS库进行前端开发会更省事，这里拿Vue.js（前端领域的热门选择，它通过一套独特的机制极大地提升了开发效率）和原生JS做一个对比。

这里我们就分别用Vue.js和原生JS做一个计数器：

<!DOCTYPE html>
<html>
<head>
    <title>原生JS计数器</title>
</head>
<body>
    <div id="app">
        <h2>计数器: <span id="count">0</span></h2>
        <button id="add">+1</button>
        <button id="sub">-1</button>
        <button id="reset">重置</button>
    </div>
    <script>
        let count = 0;
        /* 1. 获取元素 */
        const countElement = document.getElementById('count');
        const addBtn = document.getElementById('add');
        const subBtn = document.getElementById('sub');
        const resetBtn = document.getElementById('reset');
        /* 2. 准备页面渲染函数 */
        function render() {
            countElement.textContent = count;
        }
        /* 3. 进行事件监听 */
        addBtn.addEventListener('click', function() {
            count++;
            render();
        });
        subBtn.addEventListener('click', function() {
            count--;
            render();
        });
        resetBtn.addEventListener('click', function() {
            count = 0;
            render();
        });
        // 初始化显示
        render();
    </script>
</body>
</html>

原生JS需要进行元素获取、进行事件监听以及页面渲染等步骤，如果我们使用Vue.js的话，会减少很多冗余步骤，具体指的是通过创建一个Vue应用实例管理我们的目标容器，通过声明式的方式定义数据和方法，vue会自动处理数据和视图的同步更新。

<!DOCTYPE html>
<html>
<head>
    <title>Vue计数器</title>
    <!-- 这里引入vue.js库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h2>计数器: {{ count }}</h2><!-- 双花括号用于数据绑定 -->
        <button @click="add">+1</button>
        <button @click="sub">-1</button>
        <button @click="reset">重置</button>
    </div>
    <script>
        const { createApp } = Vue;//1. 从Vue中解构createApp方法
        createApp({
          /* 2. data()定义响应式数据 */
            data() {
                return {
                    count: 0
                }
            },
            /* 3. methods定义操作方法 */
            methods: {
                add() {
                    this.count++;
                },
                sub() {
                    this.count--;
                },
                reset() {
                    this.count = 0;
                }
            }
        }).mount('#app');//4. 把这个应用挂载到id='app'的标签上
    </script>
</body>
</html>

总结：学会熟练运用目前流行的JS库可以大幅提高我们的开发效率，让前端工作更加轻松。