10.css模块化 10.1.什么是css模块? CSS模块就是所有的类名都只有局部作用域的CSS文件,当你在一个JavaScript模块中导入一个CSS文件时,CSS模块将会定义一个对象,将文件中类的名字动态的映射为JavaScript作用域中可以使用的字符串,CSS模块不是浏览器中的官方标准(official spec) 或者 实践(implementation) 而是一个(在Webpack或者Browserify的帮助下)改变类名和选择器的作用域到当前文件(类似于命名空间)的构建过程 通俗…

9.路径相关 原来我们打包的东西都存放到了dist目录下,并没有进行分类存储,乱成一团,这一节我们就要处理一下打包的路径,让打包后的目录看起来更加优雅 9.1.代码准备 我们先建立起这样一个目录结构 . ├── node_modules ├── src | ├── assets | └── css | └── index.css | └── img | └── noding.jpg | └── js | └── index.js | └── index.html ├── .babelrc ├──…

7.使用字体 7.1.安装字体库-font-awesome 我们通过npm来安装字体 npm install font-awesome --save 这个时候,我们的package.json配置文件变成这样: { "name": "code", "version": "1.0.0", "description": "", "main": "index.js&…

6.使用图片 6.1.尝试在css中引入图片 在src目录下新建css文件夹,并且在css文件夹下创建app.css文件,在src目录下新建images文件夹,放入一张图片,在app.css中引入这张图片 body{ background: url('../images/nodeing.jpg') } 在index.js文件中引入app.css这个模块 import module_1 from './module_1' import module_2 from './module_2' impo…

3.插件 在前端迅速发展的今天,许多没有太多技术含量并且感觉是在浪费时间的事情,就可以交给构建工具来做,例如:我们去手动创建index.html,手动引入打包好的js文件等操作,都可以叫个webpack来做,帮助我们提升效率,因此,你只需要理解,插件其实就是webpack的一些扩展功能,旨在帮助我们提示效率的工具 3.1.html-webpack-plugin插件 这个插件就是帮我们自动生成html文件并且自动引入打包好的js文件 1.插件安装 npm install html-webpack-…

1.webpack简介 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler).它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 1.1.webpack安装 在安装webpack之前你需要先安装Node.js,最理想的Node.js版本是长期支持版本(LTS - Long Term Support) 查看Node.js版本 node -v 1.1.1.全局安装 npm install -g webpack 查看版本 webpac…

webpack的入门实践 我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 文中的文件夹如果没有说创建,并且项目默认没有的是需要你手动增加的 不会特别细致,但是足够入门 资源 视频教程 我的个人博客 什么是webpack Web浏览器使用HTML,CSS和JavaScript.随着项目的发展,跟踪和配置所有这些文件变得非常复杂,解决这个问题就需要一个新的工具 类似webpa…

前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 Manuallyselec…

勿在浮沙筑高台,无论什么技术,掌握核心精神和api,是很重要的. 但是入门过程也可能不是一帆风顺的,这里有八个入门任务,看看你完成了没有: http://code.tutsplus.com/articles/the-best-way-to-learn-python--net-26288…

13.模块化 13.1.什么是模块化 模块化是一种处理复杂系统分解为更好的可管理模块的方式.通俗的讲就是把一个复杂的功能拆分成多个小功能,并且以一种良好的机制管理起来,这样就可以认为是模块化.就像作家把书分成很多章节来写一样,程序员写代码分模块来写也是一种良好的习惯.从本质上来讲,一个模块就是一堆代码而已 使用模块化方式写代码,有非常多的优点,例如,可维护性好.避免全局变量污染.可复用性好等,下面我们来看看es5中如何实现模块化封装 var module1 = (function () { va…

1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 Manuallyselectfeatures. 接下来,只需确保选择了 TypeScript和 Babel选项,如下图: 完成此操作后,它会询问你是否要使用 class-style component syntax. 然后配置其余设置,使其看起来如下图所示. Vue CLI工具现在将安装所有依赖项并…

14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字符串的应用场景 在es5中,我们经常会遇到字符串拼接的情况,例如:输入标题1-6 for(let i = 1; i <= 6; i++){ document.write('<h'+i+'>标题'+i+'</h'+i+'>') } 在es6中,支持模版字符串的写法,我们可以写成下面…

12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this.age = age; } Person.prototype.showName = function () { console.log(this.name); }; let p = new Person("xiaoqiang", 10); p.showName(); 上面这种写法与传统的面…

11.async函数 async 函数是什么?一句话,它就是 Generator 函数的语法糖.通俗的说就是Generator函数的另一种写法,这种写法更简洁,除此之外,async函数还对Genrator进行了一些改进 首先,来回顾一下Generator函数实现文件读取 const fs = require('fs'); const co = require('co'); function readFile(path) { return new Promise((resolve, reject)…

10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator函数后返回一个迭代器对象,使用这个迭代器对象可以遍历出Generator函数内部的状态 Generator函数和传统函数的不同点有:1 函数定义的时候,function关键字后面加"*", 2 内部使用yield关键字定义内部状态 function* HelloGenerator() {…

9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有了这个接口可以做不同的事情,在编程中所说的接口最终都是要通过一段代码块来实现这个接口功能的.而Iterator接口提供的统一访问机制主要表现为遍历操作,任何数据类型只要具有Iterator接口,就可以完成遍历操作(遍历操作指依次处理该数据结构的所有成员),总结起来就是说我们需要一种统一的机制来依次处…

8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0) setTimeout(function () { alert(1); }, 2000); setTimeout(function () { alert(2) }, 1000); alert(3) 上面代码的弹出顺序是 0 3 2 1 ,像这种不按从上到下依次执行的代码叫做异步代码,其实还有很多类…

7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = new Set([1,2,2,3,3,4]) console.log(st) // [1,2,3,4] Set的size属性可以知道set中有多少元素,类似于数组的length属性 let st = new Set([1,2,2,3,3,4]) console.log(st.size); //4…

6.Symbol用法 6.1.什么是Symbol? Symbol是es6中一种新增加的数据类型,它表示独一无二的值.es5中我们把数据类型分为基本数据类型(字符串.数字.布尔.undefined.null)和引用数据类型(Object),在es6中新增的Symbol数据类型划分到基本数据类型 为什么会有这样一种数据类型呢? //别人给了你一个定义好的对象 var obj = { name: "xiaoqiang", showName: function(){alert(1)} } //…

5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : name, age : age } 在es6中,我们可以简写成这样一种形式 let name = "xiaoqiang"; let age = 12; let obj = { name, age } 以上只是属性的简写,如果有方法应该怎么写呢?首先我们来回顾一下es5中的写法 var obj =…

4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "nodeing"; return a + b } console.log(Fn("hello")) 这样写有一个缺点就是当我传入一个空字符串的时候,返回的结果并不是我想要的结果,正确的输出结果应该是:hello,但是因为空字符串会被转换成false, b = '' || "…

3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...arr); //打印结果 1 2 3 //等价于 console.log(1,2,3); 从上面代码中,我们可以看出...arr展开后的形式是这样的 1,2,3,用逗号隔开的参数序列 在函数调用的时候,可以用这个扩展运算符把数组里面的元素展开,分别传给函数的形参 let arr = [4, 5, 6]…

2.解构赋值 2.1.什么是解构赋值? 什么是解构赋值?这里的关键字还是赋值,这是说如何去赋值的问题,这里说的解构可以理解为解散重新构造,所以解构赋值可以理解为解散重新构造后进行赋值,通常是左边一种结构,右边一种结构,左右的结构拆开来一一对应进行赋值,例如: let a, b [a, b] = [1, 2] console.log(a, b) 这里就相当于把1赋值给a,把2赋值给b,这样的操作就叫做解构赋值,从本质上来说,结构解构赋值是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被…

1.let和const 1.1.let和块级作用域 在es5中,js的作用域分为全局作用域和局部作用域,通常是用函数来区分的,函数内部属于局部作用域,在es6中新增了块级作用域的概念,使用{}括起来的区域是一个块级作用域 { var a = 10 } // 输出10 console.log(a) 如果上述代码中定义变量的时候使用let,在外面使用变量a就会报错 { let a = 10 } // 以下输出会报错 console.log(a) es6中新增了块级作用域,let定义的a只能在当前的{…

其他章节请看: webpack 快速入门 系列 性能 本篇主要介绍 webpack 中的一些常用性能,包括热模块替换.source map.oneOf.缓存.tree shaking.代码分割.懒加载.渐进式网络应用程序.多进程打包.外部扩展(externals)和动态链接(dll). 准备本篇的环境 虽然可以仅展示核心代码,但笔者认为在一个完整的环境中边看边做,举一反三,效果更佳. 这里的环境其实就是实战一一文完整的示例,包含打包样式.打包图片.以及打包javascript 项目结果如下: w…

分布式学习系列[dubbo入门实践] dubbo架构 组成部分:provider,consumer,registry,monitor: provider,consumer注册,订阅类似于消息队列的注册订阅 一.环境安装 1.dubbo admin 管理控制台安装(Windows环境) #下载dubbo-admin-2.5.3.war,部署到tomcat下,根据需要编辑WEB-INF/dubbo.properties文件: dubbo.registry.address=zookeeper://12…

本文主要介绍了在本地搭建并运行一个Spring应用,演示了Spring依赖注入的特性 1 环境搭建 1.1 Maven依赖 目前只用到依赖注入的功能,故以下三个包已满足使用. <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <ma…

nodejs 实践:express 最佳实践系列 nodejs 实践:express 最佳实践(一) 项目结构 nodejs 实践:express 最佳实践(二) 中间件 nodejs 实践:express 最佳实践(三) express 解析 nodejs 实践:express 最佳实践(四) express-session 解析 nodejs 实践:express 最佳实践(五) connect解析 nodejs 实践:express 最佳实践(六) express 自省获得所有的路由 no…

一.上集回顾 在<Java入门到实践系列(1)--Java简介>中提到过,Java程序是运行在Java虚拟机的,也展示过下面这张图. JDK:Java程序开发工具包. JRE:Java运行时环境. JVM:Java虚拟机. 从这张图可以看出,JDK包含JRE,JRE包含JVM.而我们作为Java开发人员,肯定是要安装JDK的啦. 二.JDK的安装 JDK1.8官网下载地址: https://www.oracle.com/java/technologies/javase/javase-jdk8-…

其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpack 最基础的知识.在继续学习 webpack 更多用法之前,我们先从更底层的角度来认识 webpack. 自定义 webpack 分上下两篇,上篇介绍 webpack 的两个核心,loader和plugin:下篇我们自己实现一个简单的 webpack. 初始化项目 loader 和 plugin 将使用此环境…