深入 CommonJs 与 ES6 Module
目前主流的模块规范
- UMD
- CommonJs
- es6 module
umd 模块(通用模块)
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.libName = factory());
}(this, (function () { 'use strict';})));
如果你在js
文件头部看到这样的代码,那么这个文件使用的就是 UMD
规范
实际上就是 amd + commonjs + 全局变量 这三种风格的结合
这段代码就是对当前运行环境的判断,如果是 Node
环境 就是使用 CommonJs
规范, 如果不是就判断是否为 AMD
环境, 最后导出全局变量
有了 UMD
后我们的代码和同时运行在 Node
和 浏览器上
所以现在前端大多数的库最后打包都使用的是 UMD
规范
CommonJs
Nodejs
环境所使用的模块系统就是基于CommonJs
规范实现的,我们现在所说的CommonJs
规范也大多是指Node
的模块系统
模块导出
关键字:module.exports
exports
// foo.js
//一个一个 导出
module.exports.age = 1
module.exports.foo = function(){}
exports.a = 'hello'
//整体导出
module.exports = { age: 1, a: 'hello', foo:function(){} }
//整体导出不能用`exports` 用exports不能在导入的时候使用
exports = { age: 1, a: 'hello', foo:function(){} }
这里需要注意 exports
不能被赋值,可以理解为在模块开始前exports = module.exports
, 因为赋值之后exports
失去了 对module.exports
的引用,成为了一个模块内的局部变量
模块导入
关键字:require
const foo = require('./foo.js')
console.log(foo.age) //1
模块导入规则:
假设以下目录为 src/app/index.js
的文件 调用 require()
./moduleA
相对路径开头
在没有指定后缀名的情况下
先去寻找同级目录同级目录:src/app/
src/app/moduleA
无后缀名文件 按照javascript
解析src/app/moduleA.js
js文件 按照javascript
解析src/app/moduleA.json
json文件 按照json
解析src/app/moduleA.node
node文件 按照加载的编译插件模块dlopen
同级目录没有 moduleA
文件会去找同级的 moduleA
目录:src/app/moduleA
src/app/moduleA/package.json
判断该目录是否有package.json
文件, 如果有 找到main
字段定义的文件返回, 如果main
字段指向文件不存在 或main
字段不存在 或package.json
文件不存在向下执行src/app/moduleA/index.js
src/app/moduleA/index.json
src/app/moduleA/index.node
结束
/module/moduleA
绝对路径开头
直接在/module/moduleA
目录中寻找 规则同上
react
没有路径开头
没有路径开头则视为导入一个包
会先判断moduleA
是否是一个核心模块 如path
,http
,优先导入核心模块
不是核心模块 会从当前文件的同级目录的node_modules
寻找
/src/app/node_modules/
寻找规则同上 以导入react
为例先 node_modules 下 react 文件 -> react.js -> react.json -> react.node ->react目录 -> react package.json main -> index.js -> index.json -> index.node
如果没找到 继续向父目录的node_modules
中找/src/node_modules/
/node_modules/
直到最后找不到 结束
require wrapper
Node
的模块 实际上可以理解为代码被包裹在一个函数包装器
内
一个简单的require demo
:
function wrapper (script) {
return '(function (exports, require, module, __filename, __dirname) {' +
script +
'\n})'
}
function require(id) {
var cachedModule = Module._cache[id];
if(cachedModule){
return cachedModule.exports;
}
const module = { exports: {} }
// 这里先将引用加入缓存 后面循环引用会说到
Module._cache[id] = module
//当然不是eval这么简单
eval(wrapper('module.exports = "123"'))(module.exports, require, module, 'filename', 'dirname')
return module.exports
}
也可以查看:node module 源码
从以上代码我们可以知道:
- 模块只执行一次 之后调用获取的
module.exports
都是缓存哪怕这个js
还没执行完毕(因为先加入缓存后执行模块) - 模块导出就是
return
这个变量的其实跟a = b
赋值一样, 基本类型导出的是值, 引用类型导出的是引用地址 exports
和module.exports
持有相同引用,因为最后导出的是module.exports
, 所以对exports
进行赋值会导致exports
操作的不再是module.exports
的引用
循环引用
// a.js
module.exports.a = 1
var b = require('./b')
console.log(b)
module.exports.a = 2
// b.js
module.exports.b = 11
var a = require('./a')
console.log(a)
module.exports.b = 22
//main.js
var a = require('./a')
console.log(a)
运行此段代码结合上面的require demo
,分析每一步过程:
执行 node main.js -> 第一行 require(a.js)
,(node
执行也可以理解为调用了require方法,我们省略require(main.js)
内容)进入 require(a)方法: 判断缓存(无) -> 初始化一个 module -> 将 module 加入缓存 -> 执行模块 a.js 内容
,(需要注意 是先加入缓存, 后执行模块内容)a.js: 第一行导出 a = 1 -> 第二行 require(b.js)
(a 只执行了第一行)进入 require(b) 内 同 1 -> 执行模块 b.js 内容
b.js: 第一行 b = 11 -> 第二行 require(a.js)
require(a) 此时 a.js 是第二次调用 require -> 判断缓存(有)-> cachedModule.exports -> 回到 b.js
(因为js
对象引用问题 此时的cachedModule.exports = { a: 1 }
)b.js:第三行 输出 { a: 1 } -> 第四行 修改 b = 22 -> 执行完毕回到 a.js
a.js:第二行 require 完毕 获取到 b -> 第三行 输出 { b: 22 } -> 第四行 导出 a = 2 -> 执行完毕回到 main.js
main.js:获取 a -> 第二行 输出 { a: 2 } -> 执行完毕
以上就是node
的module
模块解析和运行的大致规则
es6 module
ES6
之前 javascript
一直没有属于自己的模块规范,所以社区制定了 CommonJs
规范, Node
从 Commonjs
规范中借鉴了思想于是有了 Node
的 module
,而 AMD 异步模块
也同样脱胎于 Commonjs
规范,之后有了运行在浏览器上的 require.js
es6 module
基本语法:
export
export * from 'module'; //重定向导出 不包括 module内的default
export { name1, name2, ..., nameN } from 'module'; // 重定向命名导出
export { import1 as name1, import2 as name2, ..., nameN } from 'module'; // 重定向重命名导出
export { name1, name2, …, nameN }; // 与之前声明的变量名绑定 命名导出
export { variable1 as name1, variable2 as name2, …, nameN }; // 重命名导出
export let name1 = 'name1'; // 声明命名导出 或者 var, const,function, function*, class
export default expression; // 默认导出
export default function () { ... } // 或者 function*, class
export default function name1() { ... } // 或者 function*, class
export { name1 as default, ... }; // 重命名为默认导出
export
规则
export * from ''
或者export {} from ''
,重定向导出,重定向的命名并不能在本模块使用,只是搭建一个桥梁,例如:这个a
并不能在本模块内使用export {}
, 与变量名绑定,命名导出export Declaration
,声明的同时,命名导出, Declaration就是:var
,let
,const
,function
,function*
,class
这一类的声明语句export default AssignmentExpression
,默认导出, AssignmentExpression的 范围很广,可以大致理解 为除了声明Declaration
(其实两者是有交叉的),a=2
,i++
,i/4
,a===b
,obj[name]
,name in obj
,func()
,new P()
,[1,2,3]
,function(){}
等等很多
import
// 命名导出 module.js
let a = 1,b = 2
export { a, b }
export let c = 3
// 命名导入 main.js
import { a, b, c } from 'module'; // a: 1 b: 2 c: 3
import { a as newA, b, c as newC } from 'module'; // newA: 1 b: 2 newC: 3
// 默认导出 module.js
export default 1
// 默认导入 main.js
import defaultExport from 'module'; // defaultExport: 1
// 混合导出 module.js
let a = 1
export { a }
const b = 2
export { b }
export let c = 3
export default [1, 2, 3]
// 混合导入 main.js
import defaultExport, { a, b, c as newC} from 'module'; //defaultExport: [1, 2, 3] a: 1 b: 2 newC: 3
import defaultExport, * as name from 'module'; //defaultExport: [1, 2, 3] name: { a: 1, b: 2, c: 3 }
import * as name from 'module'; // name: { a: 1, b: 2, c: 3, default: [1, 2, 3] }
// module.js
Array.prototype.remove = function(){}
//副作用 只运行一个模块
import 'module'; // 执行module 不导出值 多次调用module.js只运行一次
//动态导入(异步导入)
var promise = import('module');
import
规则
import { } from 'module'
, 导入module.js
的命名导出import defaultExport from 'module'
, 导入module.js
的默认导出import * as name from 'module'
, 将module.js的
的所有导出合并为name
的对象,key
为导出的命名,默认导出的key
为default
import 'module'
,副作用,只是运行module
,不为了导出内容例如 polyfill,多次调用次语句只能执行一次import('module')
,动态导入返回一个Promise
,TC39
的stage-3
阶段被提出 tc39 import
ES6 module
特点
ES6 module
的语法是静态的
import
会自动提升到代码的顶层
export
和 import
只能出现在代码的顶层,下面这段语法是错误的
//if for while 等都无法使用
{
export let a = 1
import defaultExport from 'module'
}
true || export let a = 1
import
的导入名不能为字符串或在判断语句,下面代码是错误的
import 'defaultExport' from 'module'
let name = 'Export'
import 'default' + name from 'module'
静态的语法意味着可以在编译时确定导入和导出,更加快速的查找依赖,可以使用lint
工具对模块依赖进行检查,可以对导入导出加上类型信息进行静态的类型检查
ES6 module
的导出是绑定的
使用 import
被导入的模块运行在严格模式下
使用 import
被导入的变量是只读的,可以理解默认为 const
装饰,无法被赋值
使用 import
被导入的变量是与原变量绑定/引用的,可以理解为 import
导入的变量无论是否为基本类型都是引用传递
// js中 基础类型是值传递
let a = 1
let b = a
b = 2
console.log(a,b) //1 2
// js中 引用类型是引用传递
let obj = {name:'obj'}
let obj2 = obj
obj2.name = 'obj2'
console.log(obj.name, obj2.name) // obj2 obj2
// es6 module 中基本类型也按引用传递
// foo.js
export let a = 1
export function count(){
a++
}
// main.js
import { a, count } from './foo'
console.log(a) //1
count()
console.log(a) //2
上面这段代码就是 CommonJs
导出变量 和 ES6
导出变量的区别
es module 循环引用
// bar.js
import { foo } from './foo'
console.log(foo);
export let bar = 'bar'
// foo.js
import { bar } from './bar'
console.log(bar);
export let foo = 'foo'
// main.js
import { bar } from './bar'
console.log(bar)
执行 main.js -> 导入 bar.js
bar.js -> 导入 foo.js
foo.js -> 导入 bar.js -> bar.js 已经执行过直接返回 -> 输出 bar -> bar is not defined, bar 未定义报错
我们可以使用function
的方式解决:
// bar.js
import { foo } from './foo'
console.log(foo());
export function bar(){
return 'bar'
}
// foo.js
import { bar } from './bar'
console.log(bar());
export function foo(){
return 'foo'
}
// main.js
import { bar } from './bar'
console.log(bar)
因为函数声明会提示到文件顶部,所以就可以直接在 foo.js
调用还没执行完毕的bar.js
的 bar
方法
CommonJs 和 ES6 Module 的区别
其实上面我们已经说到了一些区别
CommonJs
导出的是变量的一份拷贝,ES6 Module
导出的是变量的绑定(引用)CommonJs
是单个值导出,ES6 Module
可以导出多个CommonJs
是动态语法可以写在判断里,ES6 Module
静态语法只能写在顶层CommonJs
的this
是当前模块,ES6 Module
的this
是undefined
易混淆点
模块语法与解构
module语法
与解构语法
很容易混淆,例如:
import { a } from 'module'
const { a } = require('module')
尽管看上去很像,但是不是同一个东西,这是两种完全不一样的语法与作用,ps:两个人撞衫了,穿一样的衣服你不能说这俩人就是同一个人module
的语法: 上面有写 import/export { a } / { a, b } / { a as c} FromClause
解构
的语法:
let { a } = { a: 1 }
let { a = 2 } = { }
let { a: b } = { a: 1 }
let { a: b = 2, ...res } = { name:'a' }
let { a: b, obj: { name } } = { a: 1, obj: { name: '1' } }
function foo({a: []}) {}
他们是差别非常大的两个东西,一个是模块导入导出,一个是获取对象的语法糖
导出语法与对象属性简写
同样下面这段代码也容易混淆
let a = 1
export { a } // 导出语法
export default { a } // 属性简写 导出 { a: 1 } 对象
module.exports = { a } // 属性简写 导出 { a: 1 } 对象
export default
和 module.exports
是相似的
ES6 module 支持 CommonJs 情况
先简单说一下各个环境的 ES6 module
支持 CommonJs
情况,后面单独说如何在不同环境中使用
因为 module.exports
很像 export default
所以 ES6模块
可以很方便兼容 CommonJs
在ES6 module
中使用CommonJs
规范,根据各个环境,打包工具不同也是不一样的
我们现在大多使用的是 webpack
进行项目构建打包,因为现在前端开发环境都是在 Node
环境原因,而 npm
的包都是 CommonJs
规范的,所以 webpack
对ES6
模块进行扩展 支持 CommonJs
,并支持node
的导入npm
包的规范
如果你使用 rollup
,想在ES Module
中支持Commonjs
规范就需要下载rollup-plugin-commonjs
插件,想要导入node_modules
下的包也需要rollup-plugin-node-resolve
插件
如果你使用 node
,可以在 .mjs
文件使用 ES6
,也支持 CommonJs
查看 nodejs es-modules.md
在浏览器环境 不支持CommonJs
node 与 打包工具webpack,rollup
的导入 CommonJs
差异
// module.js
module.export.a = 1
// index.js webpack rollup
import * as a from './module'
console.log(a) // { a: 1, default: { a:1 } }
// index.mjs node
import * as a from './module'
console.log(a) // { default: { a:1 } }
node
只是把 module.exports
整体当做 export default
打包工具除了把 module.export
整体当做 export default
,还把 module.export
的每一项 又当做 export
输出,这样做是为了更加简洁 import defaultExport from './foo'
, defaultExport.foo()
import { foo } from './foo'
, foo()
使用 ES6 Module
可以在 es6module example 仓库中获取代码在本地进行测试验证
浏览器中使用
你需要起一个Web服务器
来访问,双击本地运行 index.html
并不会执行 type=module
标签
我们可以对 script
标签的 type
属性加上 module
先定义两个模块
// index.js
import module from './module.js'
console.log(module) // 123
// module.js
export default 123
在html
中内联调用
```<!-- index.html -->
<script type="module">
import module from './module.js'
console.log(module) // 123
</script>
```
在html
中通过 script
的 src
引用
```<!-- index.html -->
<script type="module" src="index.js"></script>
// 控制台 123
```
浏览器导入路径规则
https://example.com/apples.mjs
http://example.com/apples.js
//example.com/bananas
./strawberries.mjs.cgi
../lychees
/limes.jsx
data:text/javascript,export default 'grapes';
blob:https://whatwg.org/d0360e2f-caee-469f-9a2f-87d5b0456f6f
补充:
- 不加 后缀名 找不到具体的文件
- 后端可以修改接口
/getjs?name=module
这一类的,不过后端要返回Content-Type: application/javascript
确保返回的是js
,因为浏览器是根据MIME type
识别的
因为 ES6 Module
在浏览器中兼容并不是很好兼容性表,这里就不介绍浏览器支持情况了,我们一般不会直接在浏览器中使用
Nodejs中使用
在 Node v8.5.0
以上支持 ES Module
,需要 .mjs
扩展名
NOTE: DRAFT status does not mean ESM will be implemented in Node core. Instead that this is the standard, should Node core decide to implement ESM. At which time this draft would be moved to ACCEPTED.
(上面链接可以知道ES Module
的状态是DRAFT
, 属于起草阶段)
// module.mjs
export default 123
// index.mjs
import module from './module.mjs'
console.log(module) // 123
我们需要执行 node --experimental-modules index.mjs
来启动
会提示一个 ExperimentalWarning: The ESM module loader is experimental.
该功能是实验性的(此提示不影响执行)ES Module
中导入 CommonJs
// module.js
module.exports.a = 123 // module.exports 就相当于 export default
// index.mjs
import module from './module.js'
console.log(module) // { a: 123 }
import * as module from './module.js'
console.log(module) // { get default: { a: 123 } }
import { default as module } from './module.js';
console.log(module) // { a: 123 }
import module from 'module'; // 导入npm包 导入规则与 require 差不多
导入路径规则与require
差不多
这里要注意 module
扩展名为 .js
,.mjs
专属于 es module
,import form
导入的文件后缀名只能是.mjs
,在 .mjs
中 module
未定义, 所以调用 module.exports,exports
会报错
node
中 CommonJs
导入 es module
只能使用 import()
动态导入/异步导入
// es.mjs
let foo = {name: 'foo'};
export default foo;
export let a = 1
// cjs
import('./es').then((res)=>{
console.log(res) // { get default: {name: 'foo'}, a: 1 }
});
webpack中使用
从 webpack2
就默认支持 es module
了,并默认支持 CommonJs
,支持导入 npm
包, 这里 import
语法上面写太多 就不再写了
rollup中使用
rollup
专注于 es module
,可以将 es module
打包为主流的模块规范,注意这里与 webpack
的区别,我们可以在 webpack
的 js
中使用 Commonjs
语法, 但是 rollup
不支持,rollup
需要 plugin
支持,包括加载 node_modules
下的包 form 'react'
也需要 plugin
支持
可以看到 es module
在浏览器
与node
中兼容性差与实验功能的
我们大多时候在 打包工具 中使用
Tree-shaking
在最后我们说一下经常跟 es module
一起出现的一个名词 Tree-shaking
Tree-shaking
我们先直译一下 树木摇晃 就是 摇晃树木把上面枯死的树叶晃下来,在代码中就是把没有用到的代码删除Tree-shaking
最早由 rollup
提出,之后 webpack 2
也开始支持
这都是基于 es module
模块特性的静态分析
rollup
下面代码使用 rollup
进行打包:
// module.js
export let foo = 'foo'
export let bar = 'bar'
// index.js
import { foo } from './module'
console.log(foo) // foo
在线运行 我们可以修改例子与导出多种规范
打包结果:
let foo = 'foo';
console.log(foo); // foo
可以看到 rollup
打包结果非常的简洁,并去掉了没有用到的 bar
是否支持对导入 CommonJs
的规范进行 Tree-shaking
:
// index.js
import { a } from './module'
console.log(a) // 1
// module.js
module.exports.a = 1
module.exports.b = 2
打包为 es module
var a_1 = 2;
console.log(a_1);
可以看到去掉了未使用的 b
webpack
我们下面看看 webpack
的支持情况
// src/module.js
export function foo(){ return 'foo' }
export function bar(){ return 'bar' }
// src/index.js
import { foo } from './module'
console.log(foo())
执行 npx webpack -p
(我们使用webpack 4,0配置,-p开启生成模式 自动压缩)
打包后我们在打包文件搜索 bar
没有搜到,bar
被删除
我们将上面例子修改一下:
// src/module.js
module.exports.foo = function (){ return 'foo' }
module.exports.bar = function (){ return 'bar' }
// src/index.js
import { foo } from './module'
console.log(foo())
打包后搜索 bar
发现bar
存在,webpack
并不支持对CommonJs
进行 Tree-shaking
pkg.module
webpack
不支持 Commonjs
Tree-shaking
,但现在npm
的包都是CommonJs
规范的,这该怎么办呢 ?如果我发了一个新包是 es module
规范, 但是如果代码运行在 node
环境,没有经过打包 就会报错
有一种按需加载的方案
全路径导入,导入具体的文件:
// src/index.js
import remove from 'lodash/remove'
import add from 'lodash/add'
console.log(remove(), add())
使用一个还好,如果用多个的话会有很多 import
语句
还可以使用插件如 babel-plugin-lodash, & lodash-webpack-plugin
但我们不能发一个库就自己写插件
这时就提出了在 package.json
加一个 module
的字段来指向 es module
规范的文件,main -> CommonJs
,那么module - es module
pkg.module
webpack
与 rollup
都支持 pkg.module
加了 module
字段 webpack
就可以识别我们的 es module
,但是还有一个问题就是 babel
我们一般使用 babel
都会排除 node_modules
,所以我们这个 pkg.module
只是的 es6 module
必须是编译之后的 es5
代码,因为 babel
不会帮我们编译,我们的包就必须是 拥有 es6 module 规范的 es5 代码
如果你使用了 presets-env
因为会把我们的代码转为 CommonJs
所以就要设置 "presets": [["env", {"modules":false}]
不将es module
转为 CommonJs
webpack
与 rollup
的区别
webpack
不支持导出es6 module
规范,rollup
支持导出es6 module
webpack
打包后代码很多冗余无法直接看,rollup
打包后的代码简洁,可读,像源码webpack
可以进行代码分割,静态资源处理,HRM
,rollup
专注于es module
,tree-shaking
更加强大的,精简
如果是开发应用可以使用 webpack
,因为可以进行代码分割,静态资源,HRM
,插件
如果是开发类似 vue
,react
等类库,rollup
更好一些,因为可以使你的代码精简,无冗余代码,执行更快,导出多种模块语法
结语
本文章介绍了 Commonjs
和 ES6 Module
,导入导出的语法规则,路径解析规则,两者的区别,容易混淆的地方,在不同环境的区别,在不同环境的使用,Tree-shaking
,与 webpack
,rollup
的区别
希望您读完文章后,能对前端的模块化有更深的了解
参考链接
- ECMAScript® 2015 Language Specification sec-imports/sec-exports
- MDN import
- github nodejs lib/module
- github nodejs node-eps/002-es-modules
- nodejs docs modules
- Understanding ECMAScript 6
- ECMAScript 6 入门
- es6-modules-final
来源:https://segmentfault.com/a/1190000017878394
深入 CommonJs 与 ES6 Module的更多相关文章
- CommonJS与ES6 Module的使用与区别
CommonJS与ES6 Module的使用与区别 1. CommonJS 1.1 导出 1.2 导入 2. ES6 Module 2.1 导出 2.2 导入 3. CommonJS 与 ES6 Mo ...
- 再次梳理AMD、CMD、CommonJS、ES6 Module的区别
AMD AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制.后来由该草案的作者以RequireJS实现了AMD规范, ...
- 彻底掌握 Commonjs 和 Es Module
目录 Commonjs commonjs 实现原理 require 文件加载流程 require 模块引入与处理 require 加载原理 require 避免重复加载 require 避免循环引用 ...
- 探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...
- 前端模块化IIFE,commonjs,AMD,UMD,ES6 Module规范超详细讲解
目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...
- JavaScript ES6 module 模块
在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题.其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突. 本篇着重介绍ES6 module中的export和imp ...
- ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export
1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...
- CommonJS与ES6、AMD、CMD比较
Javascript,javascript是一种脚本编程语言,有自己独立的语法与语义,没有javascript,也就没有其他的那些概念了. 关于ES6,可直接理解为javascript的增强版(增加了 ...
- 通过ES6 Module看import和require区别
前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...
随机推荐
- awk sed grep 详解
Linux的文本处理工具浅谈 awk [功能说明] 用于文本处理的语言(取行,过滤),支持正则 NR代表行数,$n取某一列,$NF最后一列 NR==20,NR==30 从20行到30行 FS竖着切,列 ...
- 【BZOJ2879】[Noi2012]美食节 动态加边网络流
[BZOJ2879][Noi2012]美食节 Description CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食 ...
- layerui如何设置显示的位置?
转自:http://www.layui.com/doc/modules/layer.html#offset layer.open({ type: 1,//默认:0 (0表示信息框,1表示页面层,2表示 ...
- 进击的RecyclerView入门三(要是能拖动就好了)
还是接着上一讲"进击的RecyclerView入门二(来点小装饰?)",在上一讲中我们学到了怎么给不同的Item定制不同的外观,但貌似那个蓝色的框实在太丑了,咱还是把它干了吧. @ ...
- JDK的图文安装教程
JDK的安装 什么是JDK? JDK就是Java开发工具包,即Java Development Kit.就是做Java开发所需要的最基本的工具.包括Java编译器(把人使用的Java语言变成JVM能运 ...
- IOS 简洁输入框的实现
我们在朋友圈,qq空间或微博的app看到这样的操作,点击回复,在视图的下面立即显示一个输入框.输入我们的文字后点击发送就可以.那么这个小小的输入框是怎么实现的呢 我也试着自己写了一个小小对话框,先看一 ...
- php和jsCOOKIE实现前端交互
w如何精简? <script> document.cookie = 'wjs_cookie=' + 'amz_reviews'; function w(id) { document.coo ...
- 4.2 - MySQL
一.表关系 请创建如下表,并创建相关约束 班级表:class 学生表:student cid caption grade_id sid sname gender class_id 1 一年一班 1 1 ...
- golang: multiple http.writeHeader calls
背景: golang的http服务,读取文件,提供给client下载时候. 出现 multiple http.writeHeader calls 错误. func DownloadFile(w htt ...
- 利用AES算法加密数据
准备工作: 模块安装问题: 首先在python中安装Crypto这个包 但是在安装模块后在使用过程中他会报错 下面是解决方法: pip3 install pycrypto 安装会报错 https:// ...