乐趣区

关于前端:现代前端开发

jiezi

思考

传统网页开发，根本就是 HTML + CSS + JQUERY 的模式。但当初网页越来简单，很多网页其实就是一个 APP，复杂度和以前的网页曾经不是一个层级。实际上，当初人们曾经在用 HTML + CSS + JS 开发各种 APP，网页和 APP 的开发曾经没有了界线。

在进行 APP 级别的开发时，传统 HTML + CSS + JQUERY 的模式就力不从心了，所以新的技术就诞生了。

首先，是 JavaScript 语言的变动，呈现了 ES6 规范，以前的 JavaScript 是 ES5 规范，过于简略，比方没有模块的概念。而模块能够说是在进行大型项目开发时，应用的开发语言必不可少的一个个性。

但 ES6 的呈现随之引入了另外一个问题，目前很多浏览器的对 ES6 的反对并不欠缺，也就是说如果代码中用了 ES6 的个性，碰到了不反对的浏览器，就没法运行，所以 Babel 就呈现了，Babel 负责将 ES6 的源码转化成 ES5 源码。

对于 Webpack，官网说它是一个打包器，但我感觉叫自动化构建工具很适合。比方，Webpack 能够调用 Babel 对 JS 代码进行转化，它自动化了转化这个步骤，不须要你手动去操作 Babel 一个一个对 JS 源文件进行转化。

而后对于 Webpack 打包这个最根底的性能，能够这样了解，就是将一个 JS 源文件援用的所有模块 (这个模块就是下面提到的 ES6 中的模块的概念) 打包到一个 JS 文件外面，而后 HTML 页面只须要援用这个打包后的 JS 文件就能够了，而不是像在传统网页开发外面，用 <script>、<style> 标签一一援用用到的 JS、CSS 文件。这个过程有点像 C ++ 程序的编译，源代码有好多文件，但编译后的后果只有一个 .exe 文件。

更进一步，正是因为 Webpack 能让咱们自动化对 JS 文件进行一些解决，才有了 VUE 的单文件组件开发模式、TypeScript 这些货色。总而言之，甭管你源码用咋写，写啥，只有在用 Webpack 自动化解决之后的 JS 代码能在浏览器运行，那就没问题。

下面 ES6、Webpack 一个是从语言角度，一个是从构建角度呈现的新技术。Vue、React 之类则是从网页开发角度呈现的新技术，相比于 JQUERY 指间接操作 DOM，它们提供了一种更不便、更弱小操作 DOM 的形式，也让应用 HTML 开发 APP 真正成为事实。

在传统我的项目中引入古代 Web 开发技术

以一个基于的 Laravel 的传统我的项目为例，能够分为三种档次。

  1. 间接引入 Vue 等新的开发框架。原生 Vue 等只是提供了一种新的操作 DOM 的形式，并没有应用 ES6 之类的新的语言规范（即便应用了，自身也会提供转换过后的版本），所以间接应用就好，并不需要用 Webpack 做什么预处理
  1. 应用基于 Vue 等开发的 UI 框架，如 Ant Design of Vue。这类框架尽管在开发时都采纳了 ES6 或者其余的一些新的技术（如 Ant Design of Vue 应用的 Vue 的单文件组件），但也能够间接应用，但要抉择它们提供的通过转化之后的版本，或者本人用 Webpack 进行转换。
  1. 全面引入新技术。以在一个基于的 Laravel 的传统我的项目中应用 ES6 + Ant Design of Vue + Vue 的单文件组件为例，基本思路，每一个 View 对应一个 Vue 单文件组件，本来放到 View 文件中的内容都放到 Vue 单文件组件中，而后在 View 对应的 blade 文件中，只须要引入这个组件就能够了，至于 Laravel 与 blade 文件的交互（指 Laravel 通过传变量给 blade 文件管制 blade 文件的显示），能够通过将这些变量转成 JS 变量，而后传给这个 View 对应的 Vue 单文件组件。示例如下：
// view 文件
<!doctype html>
<html lang="{{app()->getLocale()}}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <-- view 文件对应的 Vue 组件编译后的 css 文件 -->
        <link href="/css/app.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">        
        </div>

        <script type="text/javascript">
            // 将 Laravel 传给 view 的变量都转成 JS 变量，从而传给 VUE 组件，// 用于管制页面显示
            var msg = "{{isset($msg) ? $msg :'welcome'}}";
        </script>
        <-- view 文件对应的 Vue 组件编译后的 js 文件 -->
        <script type="text/javascript" src="/js/manifest.js"></script> 
        <script type="text/javascript" src="/js/vendor.js"></script> 
        <script type="text/javascript" src="/js/app.js"></script> 
    </body>
</html>
// view 对应的入口文件
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
    
Vue.use(Antd);
    
// ExampleComponent 蕴含本来放到 view 文件里的所有内容
import ExampleComponent from './components/ExampleComponent.vue'
    
// msg 变量对应 view 文件中的 msg 变量，这里用它初始化组件。new Vue({render: h => h(ExampleComponent, {props: {msg:msg}}),
}).$mount('#app')
  1. 更进一步，前端齐全独自架构，后端只负责提供数据接口。临时就不在持续摸索了。
退出移动版