精华内容
下载资源
问答
  • 现在前后端分离是程序越来越多趋势了,今天在学习vue时,前期在本地跑得好好,然后和后端一对接就出问题了,但是前端和后端是不可能不和后端对接。 1. 即便是后台数据库比较花时间,但是用户体验也比前面...

    现在前后端分离是程序越来越多的趋势了,今天在学习vue时,前期在本地跑得好好的,然后和后端一对接就出问题了,但是前端和后端是不可能不和后端对接的。

    1. 即便是后台数据库比较花时间,但是用户体验也比前面的方式好,因为用户会先看到部分页面,过一小会儿再看到数据,比在空白页面打圈圈等待体验好。
    2. 后端只提供数据,所以前后端开发耦合度降低了很多,整体开发效率可以得到较大提高。

    @RequestMapping("/findAll/{page}/{size}")public Page findAll(@PathVariable("page") Integer page, @PathVariable("size") Integer size){    Pageable request = PageRequest.of(page,size);    return bookRepository.findAll(request);}
    be0fac27f98c3be84dcf53fbab83130f.png

    使用JPA 实现最简单的增删改查,以上就是:通过地址栏传递参数,后端通过@PathVariable属性获取地址栏中的参数,并将其传入代码中,并在数据库中查询到所需的数据,并显示出来。

    下图就是通过 访问 http://localhost:8181/book/findAll/1/6 接口来获取数据,其中localhost是ip,就像我们访问的那些网站,只不过那些网站都是域名的,如:baidu.com,qq.com。。

    在本地环境下,localhost 可以等于 127.0.0.1,已经你的ip,具体ip查看,win+R, 打开命令行窗口,输入ipconfig,找到你的ip,如我的ip是192.168.0.192,那么我通过,http://192.168.0.192:8181/book/findAll/1/6,也是可以访问的,但是通过ip访问,其他电脑也可以访问,但是通过

    localhost或者127.0.0.1,这种只能自己访问,如果别人访问,那将是访问别人自己的电脑。

    8181表示端口,若是端口为80,那么可以省略不写,就像我们访问的 www.baidu.com,没有在后面加端口,因为80端口是默认的,如果你不写端口,默认就是80端口,(不信???不信可以尝试去访问一下,www.baidu.com:80 www.baidu.com:8181)或是其他网站的非80端口试试,看能不能访问。

    46ba4330ab0402a6ce654b2df85dcff4.png

    /book/findAll 表示接口名称

    5b714df25b7792d2c7acc9261dc4a68f.png

    以上,就是后端代码的写法,通过集成的JPA可以很轻易的写出较为简单的查询,若是复杂一点的查询,JPA就不够用了,当然这是后话了

    展开全文
  • 前言:本篇讲解在PHP语言中小技术,将后台PDF格式文件内容输出到前端页面上。只需两行代码即可成功。如果还需其它模块,请参考其他详细资料。测试环境XAMPP7.0.2我是在苹果macOS系统,用XAMPP这款软件搭建...

    前言:本篇讲解在PHP语言中的小技术,将后台PDF格式的文件内容输出到前端页面上。只需两行代码即可成功。如果还需其它的模块,请参考其他详细资料。

    测试环境XAMPP7.0.2

    我是在苹果macOS系统,用XAMPP这款软件搭建的PHP开发环境。我用Sublime Text编写的代码。本篇用了最短的代码,讲解PDF格式内容的输出,想必大家都能看得到。

    XAMPP测试PHP环境软件

    5351197da3138d33c657c437528774c7.png

    PHP环测试境搭建

    XAMPP根目录下的"htdocs"文件内容:

    718dca620875435c4b6ebc403db6e31a.png

    根目录下的文件

    PHP代码

    第一个页面:index.php

    dd677752a2fa14e157af664598a85553.png

    index.php代码

    第二个页面:PDFtest.php,两行代码即可

    0f82fc57b53d5839b29b9e3eab1af991.png

    PDFtest.php

    第三个文件:文件夹“pdf”里面的文件,一个PDF格式的文件

    57043790396a724e120f408ab1f63968.png

    运行PHP代码

    开启XAMPP软件,打开localhost主页,Safari浏览器页面如下:

    eada9f2ef8f19c299195f75c70f05a83.png

    index.php

    鼠标点击链接后:页面内容如下

    66ed24070e48c49b58b9a4d1f7ef9f93.png

    PDFtest.php输出内容

    输出PDF格式文件内容总结

    以上,index.php页面其实可以不要,主要代码是PDFtest.php,但是为了更好的展示我才添加了index.php页面。

    确实2行代码就可以解决PDF格式内容的展示:

    1--<?php

    2--header("Content-type: application/pdf");

    3--readfile("pdf/Foundation.pdf");

    4--?>

    更多的类似需求,需要结合不同的需要。以上只是简单的输出。

    更多内容,请在下方留言告知。感谢收看!这里是“疯狂的iOS程序猿,主攻iOS,副攻PHP,玩转web前端”。欢迎订阅,更多内容后续准备中!

    展开全文
  • 如今 CPU、浏览器性能得到了极大提升,很多页面逻辑迁移到了客户端(表单验证等),随着 web2.0 时代到来,Ajax 技术得到广泛应用,jQuery 等前端库层出不穷,前端代码日益膨胀,此时在 JS 方面就会考虑使用模块...

    a11751f107c918f97deab838e476f8f0.png

    前言

    在 JavaScript 发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今 CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着 web2.0 时代的到来,Ajax 技术得到广泛应用,jQuery 等前端库层出不穷,前端代码日益膨胀,此时在 JS 方面就会考虑使用模块化规范去管理。

    本文内容主要有理解模块化,为什么要模块化,模块化的优缺点以及模块化规范, 并且介绍下开发中最流行的 CommonJS、AMD、 ES6、CMD 规范。本文试图站在小白的角度,用通俗易懂的笔调介绍这些枯燥无味的概念,希望诸君阅读后,对模块化编程有个全新的认识和理解!

    2075f38ac422d877317ac7260953e455.png

    一、模块化的理解1. 什么是模块?

    模块是指将一个复杂的程序依据一定的规则 (规范) 封装成几个块 (文件),并进行组合在一起,块的内部数据与实现是私有的, 只是向外部暴露一些接口 (方法) 与外部其它模块通信。

    2. 模块化的进化过程

    全局 function 模式:将不同的功能封装成不同的全局函数;

    编码: 将不同的功能封装成不同的全局函数;

    问题: 污染全局命名空间,容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系。

    function m1(){
     //...
    }
    function m2(){
     //...
    }
    

    namespace 模式:简单对象封装

    • 作用: 减少了全局变量,解决命名冲突
    • 问题: 数据不安全 (外部可以直接修改模块内部的数据)
    • let myModule = {
      data: 'www.baidu.com',
      foo() {
      console.log(`foo() ${this.data}`)
      },
      bar() {
      console.log(`bar() ${this.data}`)
      }
      }
      myModule.data = 'other data' // 能直接修改模块内部的数据
      myModule.foo() // foo() other data

    这样的写法会暴露所有模块成员,内部状态可以被外部改写。

    IIFE 模式:匿名函数自调用 (闭包)

    • 作用: 数据是私有的, 外部只能通过暴露的方法操作;
    • 编码: 将数据和行为封装到一个函数内部, 通过给 window 添加属性来向外暴露接口;
    • 问题: 如果当前这个模块依赖另一个模块怎么办?
    // index.html 文件
    <script type="text/javascript" src="module.js"></script>
    <script type="text/javascript">
       myModule.foo()
       myModule.bar()
       console.log(myModule.data) //undefined 不能访问模块内部数据
       myModule.data = 'xxxx' // 不是修改的模块内部的 data
       myModule.foo() // 没有改变
    </script>
    
    // module.js 文件
    (function(window) {
     let data = 'www.baidu.com'
     // 操作数据的函数
     function foo() {
       // 用于暴露有函数
       console.log(`foo() ${data}`)
     }
     function bar() {
       // 用于暴露有函数
       console.log(`bar() ${data}`)
       otherFun() // 内部调用
     }
     function otherFun() {
       // 内部私有的函数
       console.log('otherFun()')
     }
     // 暴露行为
     window.myModule = { foo, bar } //ES6 写法
    })(window)

    最后得到的结果:

    d3789c233ef7c3806e076c764e569005.png

    IIFE 模式增强:引入依赖

    这就是现代模块实现的基石。

    // module.js 文件
    (function(window, $) {
     let data = 'www.baidu.com'
     // 操作数据的函数
     function foo() {
       // 用于暴露有函数
       console.log(`foo() ${data}`)
       $('body').css('background', 'red')
     }
     function bar() {
       // 用于暴露有函数
       console.log(`bar() ${data}`)
       otherFun() // 内部调用
     }
     function otherFun() {
       // 内部私有的函数
       console.log('otherFun()')
     }
     // 暴露行为
     window.myModule = { foo, bar }
    })(window, jQuery)
    
    // index.html 文件
     <!-- 引入的 js 必须有一定顺序 -->
     <script type="text/javascript" src="jquery-1.10.1.js"></script>
     <script type="text/javascript" src="module.js"></script>
     <script type="text/javascript">
       myModule.foo()
     </script>

    上例子通过 jquery 方法将页面的背景颜色改成红色,所以必须先引入 jQuery 库,就把这个库当作参数传入。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。

    3. 模块化的好处

    • 避免命名冲突 (减少命名空间污染)
    • 更好的分离, 按需加载
    • 更高复用性
    • 高可维护性

    4. 引入多个<script>后出现出现问题

    • 请求过多

    首先我们要依赖多个模块,那样就会发送多个请求,导致请求过多。

    • 依赖模糊

    我们不知道他们的具体依赖关系是什么,也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。

    • 难以维护

    以上两种原因就导致了很难维护,很可能出现牵一发而动全身的情况导致项目出现严重的问题。模块化固然有多个好处,然而一个页面需要引入多个 js 文件,就会出现以上这些问题。而这些问题可以通过模块化规范来解决,下面介绍开发中最流行的 commonjs、AMD、ES6、CMD 规范。

    二、模块化规范1.CommonJS (1) 概述

    Node 应用由模块组成,采用 CommonJS 模块规范。每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。在服务器端,模块的加载是运行时同步加载的;在浏览器端,模块需要提前编译打包处理。

    (2) 特点

    所有代码都运行在模块作用域,不会污染全局作用域。

    模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。

    模块加载的顺序,按照其在代码中出现的顺序。

    (3) 基本语法

    • 暴露模块:module.exports = valueexports.xxx = value
    • 引入模块:require(xxx), 如果是第三方模块,xxx 为模块名;如果是自定义模块,xxx 为模块文件路径。

    此处我们有个疑问:CommonJS 暴露的模块到底是什么? CommonJS 规范规定,每个模块内部,module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。

    // example.js
    var x = 5;
    var addX = function (value) {
     return value + x;
    };
    module.exports.x = x;
    module.exports.addX = addX;
    

    上面代码通过 module.exports 输出变量 x 和函数 addX。

    var example = require('./example.js');// 如果参数字符串以“./”开头,则表示加载的是一个位于相对路径
    console.log(example.x); // 5
    console.log(example.addX(1)); // 6

    (4) 模块的加载机制

    CommonJS 模块的加载机制是,输入的是被输出的值的拷贝。也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。这点与 ES6 模块化有重大差异(下文会介绍),请看下面这个例子:

    // lib.js
    var counter = 3;
    function incCounter() {
     counter++;
    }
    module.exports = {
     counter: counter,
     incCounter: incCounter,
    };
    

    上面代码输出内部变量 counter 和改写这个变量的内部方法 incCounter。

    // main.js
    var counter = require('./lib').counter;
    var incCounter = require('./lib').incCounter;
    
    console.log(counter);  // 3
    incCounter();
    console.log(counter); // 3
    

    上面代码说明,counter 输出以后,lib.js 模块内部的变化就影响不到 counter 了。这是因为 counter 是一个原始类型的值,会被缓存。除非写成一个函数,才能得到内部变动后的值。

    (5) 服务器端实现

    ①下载安装 node.js

    ②创建项目结构

    注意:用 npm init 自动生成 package.json 时,package name(包名) 不能有中文和大写:

    |-modules
     |-module1.js
     |-module2.js
     |-module3.js
    |-app.js
    |-package.json
     {
       "name": "commonJS-node",
       "version": "1.0.0"
     }
    

    ③下载第三方模块

    npm install uniq --save // 用于数组去重;

    ④定义模块代码

    //module1.js
    module.exports = {
     msg: 'module1',
     foo() {
       console.log(this.msg)
     }
    }
    
    //module2.js
    module.exports = function() {
     console.log('module2')
    }
    
    //module3.js
    exports.foo = function() {
     console.log('foo() module3')
    }
    exports.arr = [1, 2, 3, 3, 2]
    
    // 引入第三方库,应该放置在最前面
    let uniq = require('uniq')
    let module1 = require('./modules/module1')
    let module2 = require('./modules/module2')
    let module3 = require('./modules/module3')
    
    module1.foo() //module1
    module2() //module2
    module3.foo() //foo() module3
    console.log(uniq(module3.arr)) //[ 1, 2, 3 ]
    

    ⑤通过 node 运行 app.js

    命令行输入 node app.js,运行 JS 文件。

    (6) 浏览器端实现 (借助 Browserify)

    ①创建项目结构

    |-js
     |-dist // 打包生成文件的目录
     |-src // 源码所在的目录
       |-module1.js
       |-module2.js
       |-module3.js
       |-app.js // 应用主源文件
    |-index.html // 运行于浏览器上
    |-package.json
     {
       "name": "browserify-test",
       "version": "1.0.0"
     }
    

    ②下载 browserify

    • 全局: npm install browserify -g
    • 局部: npm install browserify --save-dev

    ③定义模块代码 (同服务器端)

    注意:index.html 文件要运行在浏览器上,需要借助 browserify 将 app.js 文件打包编译,如果直接在 index.html 引入 app.js 就会报错!

    ④打包处理 js

    根目录下运行 browserify js/src/app.js -o js/dist/bundle.js

    ⑤页面使用引入

    在 index.html 文件中引入< script type="text/javascript" src="js/dist/bundle.js">

    2. AMD

    CommonJS 规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD 规范则是非同步加载模块,允许指定回调函数。

    由于 Node.js 主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以 CommonJS 规范比较适用。但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用 AMD 规范。此外 AMD 规范比 CommonJS 规范在浏览器端实现要来着早。

    (1) AMD 规范基本语法

    定义暴露模块:

    // 定义没有依赖的模块
    define(function(){
      return 模块
    })
    // 定义有依赖的模块
    define(['module1', 'module2'], function(m1, m2){
      return 模块
    })

    引入使用模块:

    引入使用模块:
    
    require(['module1', 'module2'], function(m1, m2){
      使用 m1/m2
    })
    

    (2) 未使用 AMD 规范与使用 require.js

    通过比较两者的实现方法,来说明使用 AMD 规范的好处。

    未使用 AMD 规范

    // dataService.js 文件
    (function (window) {
     let msg = 'www.baidu.com'
     function getMsg() {
       return msg.toUpperCase()
     }
     window.dataService = {getMsg}
    })(window)
    
    // alerter.js 文件
    (function (window, dataService) {
     let name = 'Tom'
     function showMsg() {
       alert(dataService.getMsg() + ', ' + name)
     }
     window.alerter = {showMsg}
    })(window, dataService)
    
    // main.js 文件
    (function (alerter) {
     alerter.showMsg()
    })(alerter)
    
    // index.html 文件
    <div><h1>Modular Demo 1: 未使用 AMD(require.js)</h1></div>
    <script type="text/javascript" src="js/modules/dataService.js"></script>
    <script type="text/javascript" src="js/modules/alerter.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    

    最后得到如下结果:

    ccf28119bef204fbe6ee7d0b3239c632.png

    这种方式缺点很明显:首先会发送多个请求,其次引入的 js 文件顺序不能搞错,否则会报错!

    使用 require.js

    RequireJS 是一个工具库,主要用于客户端的模块管理。它的模块管理遵守 AMD 规范,RequireJS 的基本思想是,通过 define 方法,将代码定义为模块;通过 require 方法,实现代码的模块加载。

    接下来介绍 AMD 规范在浏览器实现的步骤:

    ①下载 require.js,并引入

    官网: http://www.requirejs.cn/

    github : https://github.com/requirejs/requirejs

    然后将 require.js 导入项目: js/libs/require.js

    ② 创建项目结构

    |-js
     |-libs
       |-require.js
     |-modules
       |-alerter.js
       |-dataService.js
     |-main.js
    |-index.html
    

    ③定义 require.js 的模块代码

    // dataService.js 文件 
    // 定义没有依赖的模块
    define(function() {
     let msg = 'www.baidu.com'
     function getMsg() {
       return msg.toUpperCase()
     }
     return { getMsg } // 暴露模块
    })
    
    //alerter.js 文件
    // 定义有依赖的模块
    define(['dataService'], function(dataService) {
     let name = 'Tom'
     function showMsg() {
       alert(dataService.getMsg() + ', ' + name)
     }
     // 暴露模块
     return { showMsg }
    })
    
    // main.js 文件
    (function() {
     require.config({
       baseUrl: 'js/', // 基本路径 出发点在根目录下
       paths: {
         // 映射: 模块标识名: 路径
         alerter: './modules/alerter', // 此处不能写成 alerter.js, 会报错
         dataService: './modules/dataService'
       }
     })
     require(['alerter'], function(alerter) {
       alerter.showMsg()
     })
    })()
    
    // index.html 文件
    <!DOCTYPE html>
    <html>
     <head>
       <title>Modular Demo</title>
     </head>
     <body>
       <!-- 引入 require.js 并指定 js 主文件的入口 -->
       <script data-main="js/main" src="js/libs/require.js"></script>
     </body>
    </html>
    

    ④ 页面引入 require.js 模块:

    在 index.html 引入 < script data-main="js/main" src="js/libs/require.js">< /script>

    此外在项目中如何引入第三方库?只需在上面代码的基础稍作修改:

    // alerter.js 文件
    define(['dataService', 'jquery'], function(dataService, $) {
     let name = 'Tom'
     function showMsg() {
       alert(dataService.getMsg() + ', ' + name)
     }
     $('body').css('background', 'green')
     // 暴露模块
     return { showMsg }
    })
    
    // main.js 文件
    (function() {
     require.config({
       baseUrl: 'js/', // 基本路径 出发点在根目录下
       paths: {
         // 自定义模块
         alerter: './modules/alerter', // 此处不能写成 alerter.js, 会报错
         dataService: './modules/dataService',
         // 第三方库模块
         jquery: './libs/jquery-1.10.1' // 注意:写成 jQuery 会报错
       }
     })
     require(['alerter'], function(alerter) {
       alerter.showMsg()
     })
    })()
    

    上例是在 alerter.js 文件中引入 jQuery 第三方库,main.js 文件也要有相应的路径配置。

    小结:通过两者的比较,可以得出 AMD 模块定义的方法非常清晰,不会污染全局环境,能够清楚地显示依赖关系。AMD 模式可以用于浏览器环境,并且允许非同步加载模块,也可以根据需要动态加载模块。

    3.CMD

    CMD 规范专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行。CMD 规范整合了 CommonJS 和 AMD 规范的特点。在 Sea.js 中,所有 JavaScript 模块都遵循 CMD 模块定义规范。

    (1)CMD规范基本语法

    定义暴露模块:

    // 定义没有依赖的模块
    define(function(require, exports, module){
     exports.xxx = value
     module.exports = value
    })
    
    // 定义有依赖的模块
    define(function(require, exports, module){
     // 引入依赖模块 (同步)
     var module2 = require('./module2')
     // 引入依赖模块 (异步)
       require.async('./module3', function (m3) {
       })
     // 暴露模块
     exports.xxx = value
    })
    

    引入使用模块:

    define(function (require) {
     var m1 = require('./module1')
     var m4 = require('./module4')
     m1.show()
     m4.show()
    })
    

    (2) sea.js 简单使用教程

    ① 下载 sea.js, 并引入

    官网: http://seajs.org/

    github : https://github.com/seajs/seajs

    然后将 sea.js 导入项目: js/libs/sea.js

    ② 创建项目结构

    |-js
     |-libs
       |-sea.js
     |-modules
       |-module1.js
       |-module2.js
       |-module3.js
       |-module4.js
       |-main.js
    |-index.html

    ③ 定义 sea.js 的模块代码

    // module1.js 文件
    define(function (require, exports, module) {
     // 内部变量数据
     var data = 'atguigu.com'
     // 内部函数
     function show() {
       console.log('module1 show() ' + data)
     }
     // 向外暴露
     exports.show = show
    })
    
    // module2.js 文件
    define(function (require, exports, module) {
     module.exports = {
       msg: 'I Will Back'
     }
    })
    
    // module3.js 文件
    define(function(require, exports, module) {
     const API_KEY = 'abc123'
     exports.API_KEY = API_KEY
    })
    
    // module4.js 文件
    define(function (require, exports, module) {
     // 引入依赖模块 (同步)
     var module2 = require('./module2')
     function show() {
       console.log('module4 show() ' + module2.msg)
     }
     exports.show = show
     // 引入依赖模块 (异步)
     require.async('./module3', function (m3) {
       console.log('异步引入依赖模块 3  ' + m3.API_KEY)
     })
    })
    
    // main.js 文件
    define(function (require) {
     var m1 = require('./module1')
     var m4 = require('./module4')
     m1.show()
     m4.show()
    })
    

    ④ 在 index.html 中引入

    <script type="text/javascript" src="js/libs/sea.js"></script>
    <script type="text/javascript">
     seajs.use('./js/modules/main')
    </script>
    

    最后得到结果如下:

    a766c686c63893369b469a35790f8330.png

    4.ES6 模块化

    ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。

    (1) ES6 模块化语法

    export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。

    /** 定义模块 math.js **/
    var basicNum = 0;
    var add = function (a, b) {
       return a + b;
    };
    export { basicNum, add };
    /** 引用模块 **/
    import { basicNum, add } from './math';
    function test(ele) {
       ele.textContent = add(99 + basicNum);
    }
    

    如上例所示,使用 import 命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到 export default 命令,为模块指定默认输出。

    // export-default.js
    export default function () {
     console.log('foo');
    }
    
    // import-default.js
    import customName from './export-default';
    customName(); // 'foo'
    

    模块默认输出, 其他模块加载该模块时,import 命令可以为该匿名函数指定任意名字。

    (2) ES6 模块与 CommonJS 模块的差异

    它们有两个重大差异:

    ① CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

    ② CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

    第二个差异是因为 CommonJS 加载的是一个对象(即 module.exports 属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

    下面重点解释第一个差异,我们还是举上面那个 CommonJS 模块的加载机制例子:

    // lib.js
    export let counter = 3;
    export function incCounter() {
     counter++;
    }
    // main.js
    import { counter, incCounter } from './lib';
    console.log(counter); // 3
    incCounter();
    console.log(counter); // 4
    

    ES6 模块的运行机制与 CommonJS 不一样。ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

    (3) ES6-Babel-Browserify 使用教程

    简单来说就一句话:使用 Babel 将 ES6 编译为 ES5 代码,使用 Browserify 编译打包 js。

    ① 定义 package.json 文件

    {
      "name" : "es6-babel-browserify",
      "version" : "1.0.0"
    }
    

    ② 安装 babel-cli, babel-preset-es2015 和 browserify

    • npm install babel-cli browserify -g
    • npm install babel-preset-es2015 --save-dev
    • preset 预设 (将 es6 转换成 es5 的所有插件打包)

    ③ 定义.babelrc 文件

    {
       "presets": ["es2015"]
     }
    

    ④ 定义模块代码

    //module1.js 文件
    // 分别暴露
    export function foo() {
     console.log('foo() module1')
    }
    export function bar() {
     console.log('bar() module1')
    }
    
    //module2.js 文件
    // 统一暴露
    function fun1() {
     console.log('fun1() module2')
    }
    function fun2() {
     console.log('fun2() module2')
    }
    export { fun1, fun2 }
    
    //module3.js 文件
    // 默认暴露 可以暴露任意数据类项,暴露什么数据,接收到就是什么数据
    export default () => {
     console.log('默认暴露')
    }
    
    // app.js 文件
    import { foo, bar } from './module1'
    import { fun1, fun2 } from './module2'
    import module3 from './module3'
    foo()
    bar()
    fun1()
    fun2()
    module3()
    

    ⑤ 编译并在 index.html 中引入

    • 使用 Babel 将 ES6 编译为 ES5 代码 (但包含 CommonJS 语法) : babel js/src -d js/lib
    • 使用 Browserify 编译 js : browserify js/lib/app.js -o js/lib/bundle.js

    然后在 index.html 文件中引入:

    <script type="text/javascript" src="js/lib/bundle.js"></script>
    

    最后得到如下结果:

    ae88ce61d9ec1aa865509b3e889cb325.png

    此外第三方库 (以 jQuery 为例) 如何引入呢?

    首先安装依赖 npm install jquery@1;

    然后在 app.js 文件中引入:

    //app.js 文件
    import { foo, bar } from './module1'
    import { fun1, fun2 } from './module2'
    import module3 from './module3'
    import $ from 'jquery'
    
    foo()
    bar()
    fun1()
    fun2()
    module3()
    $('body').css('background', 'green')
    

    三、总结

    CommonJS 规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的,因此有了 AMD CMD 解决方案。

    AMD 规范在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD 规范开发成本高,代码的阅读和书写比较困难,模块定义方式的语义不顺畅。

    CMD 规范与 AMD 规范很相似,都用于浏览器编程,依赖就近,延迟执行,可以很容易在 Node.js 中运行。不过,依赖 SPM 打包,模块的加载逻辑偏重ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

    在这里我给大家准备了很多的学习资料,希望对大家的学习之路有用

    其实你与阿里工程师的差距只差这些东西

    展开全文
  • 前言JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU、浏览器性能得到了极大提升,很多页面逻辑迁移到了客户端,前端代码日益膨胀,此时在js方面就会考虑怎么样来管理使用模块化规范去管理。无论是什么...

    b43f9339eca102d4d82190db44b2bd15.png

    前言

    JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端,前端代码日益膨胀,此时在js方面就会考虑怎么样来管理使用模块化规范去管理。无论是什么语言一旦发展到一定地步,其工程化能力和可维护性势必得到相应的发展。模块化这件事,无论在哪个编程领域都是常见的事情,模块化存在的意义就是为了增加可复用性,以尽可能少的代码是实现个性化的需求。同为前端三剑客之一的 css 早在 2.1 的版本就提出了 @import 来实现模块化,但是 JavaScript 直到 ES6 才出现官方的模块化方案:ES Module (import、export)。尽管早期 JavaScript 语言规范上不支持模块化,但这并没有阻止 JavaScript 的发展,官方没有模块化标准开发者们就开始自己创建规范,自己实现规范。

    前端模块化

    JavaScript 在早期的设计中就没有模块、包甚至类的概念,虽然 ES6 中有了 class 关键字,那也只是个语法糖。随意随着项目复杂度的增加,开发者必然需要模拟类的功能,来隔离、封装、组织复杂的 JavaScript 代码,而这种封装和隔离,也被被我们称之为模块化。模块就是一个实现特定功能的文件 or 代码块。随着前端工程体系建设的愈发成熟,或许模块化的概念已经在前端圈子里已经耳熟能详了。但是对于很多开发者而言,ES6 中的 export、import,nodejs 中的 require、exports.xx、module.exports到底有什么区别?为什么又有 CommonJS,又有 AMD,CMD,UMD?区别是什么?甚至我们在编写 ts 文件的时候,还需要在配置文件里面说明什么模块方式,在项目中使用的时候,我们又是否真正知道,你用的到底是基于哪一种规范的模块化?

    模块化的价值

    可维护性,每一个模块都是独立的。良好的设计能够极大的降低项目的耦合度。以便于其能独立于别的功能被整改。至少维护一个独立的功能模块,比维护一坨凌乱的代码要容易很多。减少全局变量污染,前端开发的初期,我们都在为全局变量而头疼,因为经常会触发一些难以排查且非技术性的 bug。当一些无关的代码一不小心重名了全局变量,我们就会遇到烦人的“命名空间污染”的问题。在模块化规范没有确定之前,其实我们都在极力的避免于此。(后文会介绍)可复用性,前端模块功能的封装,极大的提高了代码的可复用性。这点应该就不用详细说明了。想想从 npm 上找 package 的时候,是在干啥?方便管理依赖关系,在模块化规范没有完全确定的时候,模块之间相互依赖的关系非常的模糊,完全取决于 js 文件引入的顺序。粗俗!丝毫没有技术含量,不仅依赖模糊且难以维护。

    模块化的进化过程

    1、函数封装

    回到我们刚刚说的模块的定义,模块就是一个实现特定功能的文件 or 代码块(这是我自己给定义的)。专业定义是,在程序设计中,为完成某一功能所需的一段程序或子程序;或指能由编译程序、装配程序等处理的独立程序单位;或指大型软件系统的一部分。而函数的一个功能就是实现特定逻辑的一组语句打包。并且 JavaScript 的作用域就是基于函数的,所以最原始之处,函数必然是作为模块化的第一步。将不同的功能封装成不同的函数编码: 将不同的功能封装成不同的全局函数问题: 污染全局命名空间, 容易引起命名冲突或数据不安全,而且模块成员之间看不出直接关系,模块之间的关系模糊。
    //函数1function fn1(){//statement}//函数2function fn2(){//statement}

    2、namespace模式 

    也可以理解为对象封装,其实就是把相关函数、变量在外面加了一层。

    let module1 = {let tag : 1,let name:'module1',  fun1(){console.log('this is fun1')  },  fun2(){console.log('this is fun2')  }}

    我们在使用的时候呢,就直接

    module1.fun2();

    优点

    一定程度上优化了命名冲突,降低了全局变量污染的风险

    有一定的模块封装和隔离,并且还可以进一步语义化一些

    缺点

    并没有实质上改变命名冲突的问题

    外部可以随意修改内部成员变量,还是容易产生意外风险

    3、IIFE模式:立即执行匿名函数(闭包)

    let global = 'Hello, I am a global variable :)';(function () {// 在函数的作用域中下面的变量是私有的const myGrades = [93, 95, 88, 0, 55, 91];let average = function() {let total = myGrades.reduce(function(accumulator, item) {return accumulator + item}, 0);return 'Your average grade is ' + total / myGrades.length + '.';  }let failing = function(){let failingGrades = myGrades.filter(function(item) {return item < 70;});return 'You failed ' + failingGrades.length + ' times.';  }console.log(failing());console.log(global);// 需要暴露的apireturn {// something}}());// 控制台显示:'You failed 2 times.'// 控制台显示:'Hello, I am a global variable :)'

    这种方法的好处在于,你可以在函数内部使用局部变量,而不会意外覆盖同名全局变量,但仍然能够访问到全局变量

    类似如上的 IIFE ,还有非常多的演进写法

    比如引入依赖:

    把内部需要的变量传进去。

    // module.js文件(function(window, $) {let data = 'www.baidu.com'//操作数据的函数function foo() {//用于暴露有函数console.log(`foo() ${data}`)    $('body').css('background', 'red')  }function bar() {//用于暴露有函数console.log(`bar() ${data}`)    otherFun() //内部调用  }function otherFun() {//内部私有的函数console.log('otherFun()')  }//暴露行为window.myModule = { foo, bar }})(window, jQuery)

    使用

    // index.html文件<script type="text/javascript" src="jquery-1.10.1.js">script><script type="text/javascript" src="module.js">script><script type="text/javascript">    myModule.foo()script>

    优点

    实现了基本的封装

    只暴露对外的方法操作,利用闭包实现了类似 public 和 private 的概念

    缺点

    模块依赖关系模糊

    模块与模块之间不好管理

    上述的所有解决方案,虽然每种方法都可行,但是始终没有哪一种可以很好的解决变量污染、各个模块之间依赖关系清晰、方便管理、与第三方代码方便集成。

    随着大前端时代的到来,在2009年提出了 CommonJS 规范,并且nodeJs 直接用该规范来管理模块化,随着时间的迁移,现在 JavaScript 模块规范也就有了:CommonJS、AMD、CMD、UMD、ES6 模块化。

    4、CommonJS

    CommonJS 是 JavaScript 的一个模块化规范(http://www.commonjs.org/),主要用于服务端Nodejs 中。

    根据规范,每一个文件既是一个模块,其内部定义的变量是属于这个模块的,不会污染全局变量。每个模块内部,module变量代表当前模块,这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。

    加载某个模块,其实是加载该模块的module.exports属性。

    CommonJS 的核心思想是通过 require 方法来同步加载所依赖的模块,然后通过 exports 或者 module.exprots 来导出对外暴露的接口。 

    基本用法

    暴露模块:module.exports = value 或 exports.xxx = value

    引入模块:require(xxx),如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径。

    // example.jslet x = 5;let addX = function (value) {return value + x;};module.exports.x = x;module.exports.addX = addX;
    let example = require('./example.js');console.log(example.x); // 5console.log(example.addX(1)); // 6

    require命令用于加载模块文件。require命令的基本功能是,读入并执行一个JavaScript文件,然后返回该模块的exports对象,如果没有发现指定模块,会报错,如果存在多个 exports  只有第一个exports 有效。

    require 是加载这个文件然后执行,在返回、输出 exports 这个对象。

    console.log('开始加载了') // 会输出 开始加载了function run (val) {console.log(val)}

    特点

    以文件为一个单元模块,代码运行在模块作用域内,不会污染全局变量

    同步加载模块,在服务端直接读取本地磁盘没问题,不太适用于浏览器

    模块可以加载多次,但是只会在第一次加载时运行,然后在加载,就是读取的缓存文件。需清理缓存后才可再次读取文件内容

    模块加载的顺序,按照其在代码中出现的顺序

    导出的是值的拷贝,这一点和 ES6 有着很大的不同(后面会介绍到)

    补充知识点

    Node 中,一个文件是一个模块->module

    源码定义如下:

    function Module(id = '', parent) {this.id = id;this.path = path.dirname(id);this.exports = {};this.parent = parent;  updateChildren(parent, this, false);this.filename = null;this.loaded = false;this.children = [];}
    //实例化一个模块var module = new Module(filename, parent);

    CommonJS 的一个模块,就是一个脚本文件。require命令第一次加载该脚本,就会执行整个脚本,然后在内存生成一个对象。

    {id: '...',  exports: { ... },loaded: true,  ...}

    上面代码就是 Node 内部加载模块后生成的一个对象。该对象的id属性是模块名,exports属性是模块输出的各个接口,loaded属性是一个布尔值,表示该模块的脚本是否执行完毕。其他还有很多属性。

    以后需要用到这个模块的时候,就会到exports属性上面取值。即使再次执行require命令,也不会再次执行该模块,而是到缓存之中取值。

    也就是说,CommonJS 模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。

    关于AMD、CMD

    CommonJS 在 Node.js 环境下取得了很不错的成功,很多人想把commonJs 规范推向浏览器端,但是浏览器不能像服务器那样直接读取磁盘上的内容所以又有了后面的AMD、CMD规范。

    ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案,因为我自己也是在近几年才做前端, AMD、CMD 并没有太多使用,所以AMD、CMD 这里只是做简单的介绍。

    5、AMD

    AMD 全称为 Asynchromous Module Definition(异步模块定义)

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出,它是一个在浏览器端模块化开发的规范。

    AMD 模式可以用于浏览器环境并且允许异步加载模块,同时又能保证正确的顺序,也可以按需动态加载模块。

    特点

    异步加载模块,不会造成因网络问题而出现的假死

    显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入

    在模块开始时,加载所有所需依赖

    定义模块

    define(id?: String, dependencies?: String[], callback: Function|Object);

    id,一个可选参数,类似给模块取个名字,但是却是模块的唯一标识。如果没有提供则取脚本的文件名

    dependence,依赖的模块数组

    callback,工厂方法,模块初始化的一些操作。如果是函数,只被执行一次。如果是对象,则为模块的输出值

    使用模块

    require([moduleName],callback);

    使用

    //article.js文件// 定义有依赖的模块define(['user'], function(user) {let name = 'THE LAST TIME'function consoleMsg() {console.log(`${name} by ${user.getAuthor()}`);  }// 暴露模块return { consoleMsg }})
    // 调用 article 模块种的 consoleMsgrequire(['article'], function(alerter) {    article.consoleMsg()  })

    关于 require.js 的使用,仔细看文档,其实还是有很多知识点的。但是鉴于我们着实现在使用不多(我也不熟),所以这里也就参考网上优秀文章和自己实践,抛砖引玉。

    6、CMD

    CMD 即Common Module Definition通用模块定义,CMD 是 SeaJS 在推广过程中对模块定义的规范化产出,是阿里的玉伯提出来,它和 AMD 其实非常的相似,文件即为模块。

    CMD最主要的区别是实现了按需加载,推崇依赖就近的原则,模块延迟执行,而 AMD 所依赖模块式提前执行(requireJS 2.0 后也改为了延迟执行)

    所以AMD和CMD最大的区别是对依赖模块的执行时机处理不同,注意不是加载的时机或者方式不同。

    CMD 规范尽量保持简单,并与 CommonJS 规范保持了很大的兼容性。

    通过 CMD 规范书写的模块,可以很容易在 Node.js 中运行。

    在 CMD 规范中,一个模块就是一个文件。格式如下:

    define(factory);

    define 是一个全局函数,用来定义模块,参数factory可以是对象、字符串、函数

    factory 为对象、字符串时,表示模块的接口就是该对象、字符串。比如可以如下定义一个 JSON 数据模块:

    define({ "foo": "bar" });

    也可以通过字符串定义模板模块:

    define('I am a template. My name is {{name}}.');

    factory 为函数时,表示是模块的构造方法。

    执行该构造方法,可以得到模块向外提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和 module:

    define(function(require, exports, module) {// 模块代码});

    使用sea.js

    /** sea.js **/// 定义模块 math.jsdefine(function(require, exports, module) {var $ = require('jquery.js');var add = function(a,b){return a+b;    }    exports.add = add;});// 加载模块seajs.use(['math.js'], function(math){var sum = math.add(1+2);});

    关于 sea.js 的使用,仔细看文档,其实还是有很多知识点的。但是鉴于我们着实现在使用不多(我也不熟),所以这里也就参考网上优秀文章和自己实践,抛砖引玉。

     7、UMD

    UMD 是 AMD 和 CommonJS 的综合产物。如上所说,AMD 的用武之地是浏览器,非阻塞式加载。CommonJS 主要用于服务端 Nodejs 中使用。所以人们就想到了一个通用的模式 UMD(universal module definition)。来解决跨平台的问题。
    没错!就是 ifElse 的写法。
    核心思想就是:先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。
    在判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。

    (function (root, factory) {if (typeof define === 'function' && define.amd) {//AMD        define(['jquery'], factory);    } else if (typeof exports === 'object') {//Node, CommonJS之类的module.exports = factory(require('jquery'));    } else {//浏览器全局变量(root 即 window)        root.returnExports = factory(root.jQuery);    }}(this, function ($) {//方法function myFunc(){};//暴露公共方法return myFunc;}));

    8、ES Module

    在 ES Module 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。

    ES Module 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

    ES Module 的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

    CommonJS 和 AMD 模块,其本质是在运行时生成一个对象进行导出,称为“运行时加载”,没法进行“编译优化”,而 ES Module 不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入。

    这称为“编译时加载”或者静态加载,即 ES Module 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES Module 模块本身,因为它不是对象。

    由于 ES Module 是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。

    特点

    静态编译

    输出的值引用,而非值拷贝

    import 只能写在顶层,因为是静态语法

    9、CommonJs、ESM 区别

    CommonJs ES6 Module 
    运行时加载;CommonJs模块就是对象(module.exports属性)),即在输入时是先加载整个模块、执行模块,生成一个对象,然后再从这个对象上面读取方法编译时加载;ES6 模块不是对象,而是通过 export 命令显式指定输出的代码,import时采用静态命令的形式。即在import时可以指定加载某个输出值,而不是加载整个模块。
    输出的是值的拷贝(一旦输出一个值,模块内部的变化就影响不到这个值。)输出的是值的引用(JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。即原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。)

    差异

    CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

    CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

    加载 & 编译

    因为 CommonJS 加载的是一个对象(module.exports),对象只有在有脚本运行的时候才能生成。而 ES6 模块不是一个对象,只是一个静态的定义。在代码解析阶段就会生成。

    ES6 模块是编译时输出接口,因此有如下2个特点:

    import 命令会被 JS 引擎静态分析,优先于模块内的其他内容执行

    export 命令会有变量声明提升的效果,所以import 和 export 命令在模块中的位置并不影响程序的输出。

    异步加载模块,不会造成因网络问题而出现的假死。

    显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入。

    在模块开始时,加载所有所需依赖。

    来源:http://www.fly63.com/article/detial/9827

    99cc636ca0cbe5d2a5bee79aaea4a96d.png

    展开全文
  • 前端(JavaScript)和后端(JSP/Servlet)是没法共用数据,只能是后端程序(JSP)把数据输出,生成页面前端,这时候生成的页面JavaScript代码才有可能得到所谓jsp数据。同样,只有把JavaScript里数据提交给...
  • Web前端面试题总结HTML+CSS理论知识1、讲讲输入完网址按下回车,到看到网页这个过程中发生了什么a.... 浏览器对页面进行渲染呈现给用户2、谈谈你对前端性能优化理解a. 请求数量:合并脚本和样式表,CSS ...
  • 前端页面时很多时候我们会遇到一种很多页面的架构都差不多,只需要标题变一变就可以的情况,比如说下图这个分类列表,我们以教育培训类和互联网运营类两个列表请求页面为例。 这两页面只有标题稍稍不同,当然...
  • vue商品列表页面获组件父传子的应用写前端页面时很多时候我们会遇到一种很多页面的架构都差不多,只需要标题变一变就可以的情况,比如说下图这个分类列表,我们以教育培训类和互联网运营类两个列表请求页面为例。...
  • vue商品列表页面获组件父传子的应用写前端页面时很多时候我们会遇到一种很多页面的架构都差不多,只需要标题变一变就可以的情况,比如说下图这个分类列表,我们以教育培训类和互联网运营类两个列表请求页面为例。...
  • 在内容快速迭代需求之下,以HTML5 和 JS 为主页面Web(single page web application,SPA)应用得到了充分发展,各种前端编译、打包等构件工具发展也达到了巅峰,这其中佼佼者要数 grunt、Browserify、 ...
  • 一个Web前端的请求发出之后,需要等待比较长时间,才能得到完整响应。针对这种情况,我们需要怎么考虑呢?三个方面:Web前端层面,应用服务器层面和存储层面。下面我们来简单说说。 一、Web前端性能优化 1.优化...
  • 最后面这个auid不知道该怎么得到。 我要数据应该在这个里面 这个问题困扰我很久了,做一个项目就差这一个功能了,不知道该如何下手。 应该是在代码里去post时候不会自动加载 onResponse方法返回是还...
  • 我们可以从以往基于一个个页面的开发,变为基于一个个组件进行开发。开发完成后使用 webpack 等工具进行打包构建,并通过基于 Node.js 实现的命令行工具将构建结果发布上线。前端开发开始变得规范化、...
  • 怎么解决这个问题,希望得到你们帮助。挺急! ``` var idTmr; function getExplorer() { var explorer = window.navigator.userAgent ; //ie if (explorer.indexOf("MSIE") >= 0) { return 'ie'; } //...
  • 1、一次完整HTTP事务是怎样一个过程? 基本流程: a.... 浏览器对页面进行渲染呈现给用户2、对前端工程师这个职位你是怎么样理解? a. 前端是最贴近用户程序员,前端的能力就是能让产品从 90分...
  • 前端面试

    千次阅读 2020-08-24 13:36:17
    二、一次完整http事务是怎么一个过程 域名解析 发起TCP三次握手 建立TCP连接后发起http请求 服务器端响应http请求,浏览器得到html码 浏览器解析html码,并请求html代码资源 浏览器对页面进行渲染并呈现给...
  •  经典,因返璞归真近几年,尤其是今年,常常会听到猿们吐槽“现在想简简单单写个前端怎么就变得这么难呢?”。嗯前端目前正处于一个超出常理,且疯狂造轮子黄金时代,标准化逐步设想与浏览器本身现状所...
  • 前言相信在我们日常遇到的项目中,无论是在前端网站还是后台管理系统中都会有功能类似的页面。...下面我们就来通过一个例子来探索一下怎么通过node来生成我们需要的前端代码。实例假设我们正在做一个后台管理系统...
  • 2020.08.17-2020.08.23学习计划:(1)完成前端知识积累HTML+CSS+JavaScript(周一至周四)(2)完成ssm两门课复习(周一至周五)(3)完成所有已学代码的熟悉与系统整理(周六周日)(4)系统整理初级java学习知识体系(周六周日)...
  • 网上关于网页授权后一步步获取openid文章大多是理论步骤解说,落实到代码上具体怎么尽可能快拿到openid内容很少。笔者十分愤怒,决定写下代码和大家分享 这个过程需要一个前端页面代码和一个后端辅助程序...
  • <p><em>想跳过技术细节直接看怎么实践同学可以拖到文章底部,直接看最后一节。</em></p> 目前社区有很多关于微前端架构介绍,但大多停留在概念介绍阶段。而本文会就某一个具体类型场景,...
  • |http://www.fly63.com/article/detial/9827前言JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU、浏览器性能得到了极大提升,很多页面逻辑迁移到了客户端,前端代码日益膨胀,此时在js方面就会考虑怎么样...
  • 1、一次完整HTTP事务是怎样一个过程? 基本流程: a.... 浏览器对页面进行渲染呈现给用户2、对前端工程师这个职位你是怎么样理解? a. 前端是最贴近用户程序员,前端的能力就是能让产品从 90分...
  • 这个系数据不能写死,因为后面可能随时会修改或者增加系信息,而写死后每次修改系信息后就要回来修改前端代码,这是很麻烦。这一篇博客就来记录一下怎么操作。 有个思路就是后端写好接口,用来查询数据库获取...
  • 网上关于网页授权后一步步获取openid文章大多是理论步骤解说,落实到代码上具体怎么尽可能快拿到openid内容很少。笔者十分愤怒,决定写下代码和大家分享 这个过程需要一个前端页面代码和一个
  • 那么异步的代码怎么测试呢? 比如这里<code>index.js的代码变成了一段异步代码: <pre><code> js 'use strict'; module.exports = (bu, callback) => process.nextTick(() =&...
  • 二是前端代码在用户端运行时增量安装。 <p>html、css和js配合才能保证webapp运行,增量安装是按需加载需要。开发完成后输出三种以上不同格式静态资源,静态资源之间有可能存在互相依赖关系&#...
  • 我们想得到的结果是10次循环a[i]保存着一个闭包,然后alert出从0到10,但是结果很出人意料,全部是10,为什么?哪里理解不对呢?a[i]明明是内部函数,然后让它访问另外...
  • 怎么做呢,对称加密一旦秘钥丢失则形同虚设,最好使用非对称加密方式,由后端事先生成公钥和私钥,公钥发给前端页面,私钥后端自己保留,前端进行认证时,把密码原文用公钥加密再发给后端,后端用私钥解密而得到...
  • 要求把图片显示在页面上,这个以前就做过很老套。把数据库中存储图片地址字段取出来,放进Json数组里面就好了。但是忽然发现这次图片是二进制,SQLServer中数据类型是Image类型。于是上网搜资料,看Demo。...

空空如也

空空如也

1 2 3 4
收藏数 61
精华内容 24
关键字:

怎么得到页面的前端代码