JavaScript

Vue 概览 阅读完，你会知道Vue特性，懂得在项目中如何使用(小项目和复杂项目component) 什么是Vue Vue是构建用户界面的渐进式框架，自底向上设计。核心库只关注视图层，所以很容易与其他库或现有项目进行集成。 什么是渐进式？ pro‧gres‧sive /prə’ɡresiv / adjective 1. happening or developing gradually or in stages; proceeding step by step 逐步或分阶段发生或发展; 一步一步地进行 项目的不同阶段可以使用不同的部分，可增量地采用。非侵入式，你可以只用它的一部分，而不会因为用了它这一部分就必须用其它所有部分。有时可以把它当成库来用，也可以是框架，也可以用它的全家桶（SFC、Vuex、Router、SSR等）。 比如： 你可以把vue 当成一个js库来使用，就用来收集form表单，和表单验证。 可以把 整个页面的dom 用Vue 来管理，你会发现关注点由操作dom变成了关注数据的变化，用数据驱动DOM的变化。 可以用 webpack + vue-router控制路由。 可以用vuex 处理数据在组件之间的流动，做状态管理。 可以考虑用vue的SSR 做优化。 参考: vue渐进式概念讨论 Evan You分享的ppt 安装 直接<script>引入，直接下载开发或生产版本并用<stript>标签引入，也可以用CDN链接，这时Vue会被注册为一个全局变量。 NPM安装，在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue也提供配套工具(vue-loader)来开发单文件组件。 命令行工具（CLI），Vue提供了一个vue-cli工具，为单页面应用(SPA)快速搭建繁杂的脚手架(包含vue、webpack及相关插件)。 对不同构建版本的解释 在npm包的dist/目录里会找到很多不同的 Vue.js 构建版本详见 UMD CommonJS ES Module 完成版 vue.js vue.common.js vue.esm.js 只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js 完整版（生产环境） vue.min.js - - 只包含运行时版（生产环境） vue.runtime.min.js - - 完整版：同时包含编译器和运行时的版本。 编译器：用来将模板字符串编译为JavaScript渲染函数的代码。 运行时：基本上是除去编译器的其它一切。 UMD：UMD版本可以通过<script>标签直接用在浏览器中。 CommonJS：构建工具browserify或webpack1会用到CommonJS版本。 ES Module：构建工具webpack2+或rollup，会使用ES Module版本（看后面的vue的引入机制分析）。 参考: 项目引入vue的方式 webpack 里resolve的mainfields Vue 选项对象中的 el 属性、template属性和 render 渲染函数的关系...

Webpack是什么 Webpack是模块打包器，它可以处理CommonJS、AMD以及ES6模块系统；Webpack有一些灵活、酷炫的功能特性, 如: 代码分离：可以把多个模块所引用到的代码打包到一个文件，即抽取公共代码并打包至单独的文件里 加载器(loader)：有了loader，你可以在js中加载各种类型文件 插件(plugin)：可让你定制打包操作 使用教程 先看本教程最终webpack配置，看不懂没关系，教程会一步步说明每个配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const variables = require('./variables.js'); const package = require('./package.json'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const devMode = process.env.NODE_ENV != 'production'; module.exports = { mode: 'development', // watch: true, entry: { app: './src/index.js', vendor: Object.keys(package.dependencies), settings: './src/settings.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { extensions: ['....

JavaScript模块化演进 什么是模块化 就是把原来聚合在一起的各类代码，按功能、职责（逻辑层、数据层、测试）等划分，分散到不同的模块文件中，分离关注点 使用模块的好处 模块化可以降低代码（功能）之间耦合，同时具有以下好处： 命名空间：可以避免命名（变量、函数、类名等重名）污染，减少不必要的全局变量 代码易维护和扩展：设计良好的模块，彼此间会尽量减少依赖，方便对其独立改造或扩展，比起一坨代码，维护独立的模块肯定轻松的多 代码复用：跟复制粘贴说拜拜，因为你有个可重复使用的模块 ...