Gulp.js
Gulp基于node平台开发的前端构建工具将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了用机器代替手工,提高开发效率。
Gulp能做什么
项目上线,HTML、CSS、JS文件压缩合并
语法转换(es6、less …)
公共文件抽离
修改文件浏览器自动刷新
Gulp使用
使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行gulp任务
下载gulp命令npm install gulp-cli -g
Gulp中提供的方法
gulp.src():获取任务要处理的文件
gulp.dest():输出文件
gulp.task():建立gulp任务
gulp.watch():监控文件的变化
Gulp插件
gulp-htmlmin :html文件压缩
gulp-csso :压缩css
gulp-babel :JavaScript语法转化
gulp-less: less语法转化
...
Node.js
Node.js为什么选择Node?
使用JavaScript语法开发后端应用
一些公司要求前端工程师node开发
生态系统活跃,有大量的开源库可以使用
前端开发工具大多基于node开发
Node是什么?Node是一个基于Chrome V8引擎的JavaScript代码运行环境。
运行环境。
浏览器(软件)能够运行JavaScript代码,浏览器就是JavaScript代码的运行环境
Node(软件)能够运行JavaScript代码,Node就是JavaScript代码的运行环境
Node.js运行环境安装官网:https://nodejs.org/en/
LTS = Long Term Support 长期支持版 稳定版
Current 拥有最新特性 实验版
Node.js 的组成
JavaScript 由三部分组成,ECMAScript,DOM,BOM。
Node.js是由ECMAScript及Node 环境提供的一些附加API组成的,包括文件、网络、路径等等一些更加强大的 API。
Node.js基础语法所有ECMAScript语法在Node环境中都可以使用。在Node环 ...
JS红宝书之类与面向对象编程
对象创建自定义对象的通常方式是创建 Object 的一个新实例,然后再给它添加属性和方法
123456789101112131415let pn = new Object();pn.name = "Nicholas";pn.age = 29;pn.job = "web";pn.sayName = function() { console.log(this.name);};let pn = { name: "Nicholas", age: 29, job: "web", sayName() { console.log(this.name); }};
属性的类型属性分两种:数据属性和访问器属性。
1. 数据属性数据属性包含一个保存数据值的位置。值会从这个位置读取,也会写入到这个位置。数据属性有 4个特性描述它们的行为。
[[Configurable]]:表示属性是否可以通过 delete 删除并重新定义,是否可以修改它的特性,以及是否可以把它改为访问 ...
JS红宝书之期约与异步
期约与异步 ECMAScript 6 及之后的几个版本逐步加大了对异步编程机制的支持,提供了令人眼前一亮的新特性。ECMAScript 6 新增了正式的 Promise(期约)引用类型,支持优雅地定义和组织异步逻辑。接下来几个版本增加了使用 async 和 await 关键字定义异步函数的机制。
期约的主要功能是为异步代码提供了清晰的抽象。可以用期约表示异步执行的代码块,也可以用期约表示异步计算的值。在需要串行异步代码时,期约的价值最为突出。作为可塑性极强的一种结构,期约可以被序列化、连锁使用、复合、扩展和重组。
异步函数是将期约应用于 JavaScript 函数的结果。异步函数可以暂停执行,而不阻塞主线程。无论是编写基于期约的代码,还是组织串行或平行执行的异步代码,使用异步函数都非常得心应手。异步函数可以说是现代 JavaScript 工具箱中最重要的工具之一。
异步编程同步行为和异步行为的对立统一是计算机科学的一个基本概念。特别是在 JavaScript 这种单线程事件循环模型中,同步操作与异步操作更是代码所要依赖的核心机制。异步行为是为了优化因计算量大而时间长的操作。如果 ...
JS红宝书之函数
函 数函数是ECMAScript中最有意思的部分之一,这主要是因为函数实际上是对象。每个函数都是Function类型的实例,而 Function 也有属性和方法,跟其他引用类型一样。因为函数是对象,所以函数名就是指向函数对象的指针,而且不一定与函数本身紧密绑定。函数通常以函数声明的方式定义
12345678910111213141516 //声明一个函数function myfun() { alert("我是一个函数")} //函数的调用 myfun();// 声明一个带有参数的函数function add(num1, num2) { var sum = (num1 + num2); return sum;}console.log(add(3, 5));console.log(add(99, 1));console.log(add(-15, 6));
箭头函数 ECMAScript 6 新增了使用胖箭头(=>)语法定义函数表达式的能力。很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建 ...
JS红宝书之对象与数组
Object到目前为止,大多数引用值的示例使用的是 Object 类型。Object 是 ECMAScript 中最常用的类型之一。虽然 Object 的实例没有多少功能,但很适合存储和在应用程序间交换数据。123let decade = new Object();decade.name = "MSS";decade.age = 29;
另一种方式是使用对象字面量(object literal)表示法。对象字面量是对象定义的简写形式,目的是为了简化包含大量属性的对象的创建。1234let person = { // 与 new Object()相同 name: "Nicholas", age: 29};
Array创建数组有几种基本的方式可以创建数组。一种是使用 Array 构造函数,比如:12345678910111213let colors = new Array();let colors = new Array(20); //创建一个初始 length 为 20 的数组let colors = new Arra ...
JS红宝书之字符串增删改查
增删改查字符串操作方法concat()用于将一个或多个字符串拼接成一个新字符串。来看下面的例子1234let str = "hello ";let res = str.concat("world");console.log(res); // "hello world"console.log(str); // "hello"
也可以操控多个参数1234let str = "hello ";let res = str.concat("world", "!");console.log(res); // "hello world!"console.log(str); // "hello"
slice()返回调用它们的字符串的一个子字符串,而且都接收一或两个参数。第一个参数表示子字符串开始的位置,第二个参数表示子字符串结束的位置。12345let str = "hello world";co ...
电商网站构图之商品详情
1. 品优购项目(四)1). 详情页 detail.html 常用单词
名称
说明
主体
de_container
面包屑导航
crumb_wrap
产品介绍
product_intro ( introduction介绍)
预览包
preview_wrap(左侧部分)
预览缩略图
preview_img
预览列表
preview_list
左按钮
arrow_prev
右按钮
arrow_next
小图列表
preview_items
产品详细信息区域
itemInfo_wrap (右侧部分)
头部名称
sku_name skull 头骨
新闻
news
摘要
summary
评价
remark
价格摘要
summary_price
配送至
summary_stock
支持
summary_support
选择
choose
选择按钮组
choose_btns
选择数量
choose_amount
减去
reduce
加入购物车
addshopcar
产品细节
prod ...