Web前端
唯恋殊雨
这个作者很懒,什么都没留下…
展开
-
Web前端学习笔记——JavaScript之变量、操作符、表达式和语句
浏览器说明浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件。通俗的讲:可以显示页面的一个软件,国内网民计算机上常见的网页浏览器有,QQ浏览器、Internet Explorer、Firefox、Safari,Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等,浏览器是最...原创 2018-09-21 22:19:42 · 1010 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之基础案例:TodoMVC
基础案例:TodoMVC起步下载模板:git clone https://github.com/tastejs/todomvc-app-template.git --depth 1初始化项目:ng new todomvc-angularcd todomvc-angularng serve将 todomvc-angular\src\app\app.component....原创 2018-09-27 09:02:59 · 722 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之指令、表单处理、和服务端交互、路由处理、Angular CLI
目录指令NgClassNgStyleNgModelNgIfNgSwitchNgFor带索引的 *ngFor自定义指令表单处理和服务端交互启用 Http 服务发起一个 get 请求Reading the full response错误处理路由处理基本用法导航链接 routerLink路由对象动态路由匹配路由导航A...原创 2018-09-27 09:03:04 · 693 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之组件、模板语法
目录组件typora-copy-images-to: media组件的定义组件的模板组件通信父子通信:Input Down父子通信:Output Up父子通信:父组件直接访问子组件 public 成员没有直接关系通信:Service 单例利用 Cookie 和 localStorage 进行通信利用 Session 进行通信小结组件生命周期动...原创 2018-09-27 09:02:52 · 2328 阅读 · 0 评论 -
Web前端学习笔记——TypeScript
TypeScript内容纲要了解什么是 TypeScript TypeScript 基本语法TypeScript 介绍TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不...原创 2018-09-27 09:02:47 · 3125 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之简介、起步、特性
目录Angular 简介Angular 是什么特性发展历史起源困境Angular 2 横空出世ng2 相比 ng1现状那我为什么要学习使用 Angular ?学习 Angular 的一些建议相关链接起步Step 0. 安装依赖环境安装 Node.js安装 npm安装 Python安装 C++ 编译工具安装 cnpmSt...原创 2018-09-27 09:02:39 · 1102 阅读 · 0 评论 -
Web前端学习笔记——模块化开发
目录概述什么是模块化开发非模块化开发的问题为什么使用模块化开发实现模块化的推演step-01 全局函数step-02 封装对象step-03 划分私有空间step-04 模块的扩展与维护step-05 第三方依赖管理实现规范CommonJS规范AMD规范CMD规范•服务器端规范•浏览器端规范CMD实现-SeaJSAMD实现-R...原创 2018-09-14 22:31:24 · 953 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之豆瓣电影案例
step-01 构建项目结构克隆项目骨架bash $ git clone --depth=1 https://github.com/Micua/angular-boilerplate.git moviecat $ cd moviecat安装项目依赖bash $ bower install bootstrap --save.editorconfig -- 统一不同开发者的不同开发工具...原创 2018-09-14 21:29:41 · 948 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之TodoMVC案例
TODOMVC案例根据界面原型抽象数据成员(有哪些数据,每个数据的类型和结构) 设计模块,控制器 完成数据绑定 编写交互逻辑 下载地址:https://download.csdn.net/download/tichimi3375/10667891 <!-- package.json -->{ "private": true, "dependencies"...原创 2018-09-14 21:18:31 · 286 阅读 · 0 评论 -
Web前端学习笔记——AngularJS之过滤器、服务、路由
目录过滤器data 过滤器lowercase, uppercasenumberlimitTo 过滤器orderByfilter 过滤器自定义比较json 过滤器自定义过滤器Form 表单Form 表单 – 验证Form 表单 – 验证规则服务创建服务 内置服务 - $http$log服务$timeout自定义服务路由...原创 2018-09-14 21:06:52 · 348 阅读 · 0 评论 -
Web前端学习笔记——NodeJS之ECMAScript 6 基础语法、HTTP模块
目录ECMAScript 6 基础语法ECMAScript 6 简介ECMAScript 和 JavaScript 的关系ES6 与 ECMAScript 2015 的关系ECMAScript 发展历史部署进度Babel 转码器查看离线文档var、let、const解构赋值字符串的扩展函数的扩展数组的扩展对象的扩展for...of 循环...原创 2018-09-26 08:56:36 · 503 阅读 · 0 评论 -
Web前端学习笔记——NodeJS之文件操作路径、开发与测试、扩展技术
目录麻烦的文件操作路径路径分类相对路径操作的问题相对路径到底相对于谁?如何解决某些时候相对路径带来的问题?__dirname 和 __filename 两兄弟使用 path.join() 方法解决拼接的问题路径使用整理总结nodemonMocha参考链接JavaScript 代码风格代码风格JavaScript Standard Styl...原创 2018-09-26 08:57:21 · 646 阅读 · 0 评论 -
Web前端学习笔记——NodeJS之综合案例:多人社区
多人社区该案例以 Node.js 中文开源技术社区 CNode 为原型。准备在 GitHub 上创建一个仓库 ithub 使用 Git 将远程仓库下载到本地 git clone 远程仓库地址初始化目录结构.├── node_modules├── controllers 控制器├── models 模型├── public 静态资源├── views 视图├── a...原创 2018-09-26 08:57:14 · 1038 阅读 · 0 评论 -
Web前端学习笔记——NodeJS之回调函数、Promise对象、async 函数
目录回调函数回调函数概念JavaScript 回调函数示例:封装原生的 ajax 操作示例:实现拷贝方法示例:读取文件中的 todos 列表数据示例:把任务持久化保存到文件中异常处理try-catch 处理异常Callback 处理异常Promise 对象回调地狱Promise 概念Promise 基本用法几个例子错误处理Prom...原创 2018-09-26 08:57:08 · 1066 阅读 · 0 评论 -
Web前端学习笔记——VueJS之组件、路由
定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;全局组件定义的三种方式使用...原创 2018-09-20 19:44:07 · 782 阅读 · 0 评论 -
Web前端学习笔记——Webpack
在网页中会引用哪些常见的静态资源?JS.js .jsx .coffee .ts(TypeScript 类 C# 语言)CSS.css .less .sass .scssImages.jpg .png .gif .bmp .svg字体文件(Fonts).svg .ttf .eot .woff .woff2...原创 2018-09-20 20:15:35 · 642 阅读 · 0 评论 -
Web前端学习笔记——CSS样式、外观、复合选择器
CSS字体样式属性font-size:字号大小font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下C...原创 2018-09-20 21:43:20 · 494 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之数组、函数、作用域
数组为什么要学习数组之前学习的数据类型,只能存储一个值(比如:Number/String。我们想存储班级中所有学生的姓名,此时该如何存储?数组的概念所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。数组的定义数组是一个有序的列表,可以在数组中存放任意的数据,并且数组的长度可以动态的调整。通过数组字面量创建数组// 创建...原创 2018-09-21 22:16:07 · 544 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之对象
对象为什么要有对象function printPerson(name, age, sex....) {}// 函数的参数如果特别多的话,可以使用对象简化function printPerson(person) { console.log(person.name); ……}什么是对象现实生活中:万物皆对象,对象是一个具体的事物,一个具体的事物就会有行为和特征。举例: 一部...原创 2018-09-21 22:14:58 · 791 阅读 · 0 评论 -
Web前端学习笔记——Webpack结合VueJS使用、Mint-UI、MUI
注意:有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D在普通页面中使用render函数渲染组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2018-09-21 20:53:33 · 1553 阅读 · 0 评论 -
Web前端学习笔记——Web Worker
HTML 5 Web WorkersHTML5 应用缓存 HTML5 服务器发送事件web worker 是运行在后台的 JavaScript,不会影响页面的性能。什么是 Web Worker?当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何...转载 2018-09-27 09:03:20 · 780 阅读 · 0 评论 -
Web前端学习笔记——CSS基础、选择器
CSS的发展历程从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。CSS 网页的美容师CSS的出现,拯救了混乱的HTML,当让更加...原创 2018-09-21 14:34:16 · 454 阅读 · 0 评论 -
Web前端学习笔记——CSS3 新增选择器
CSS3 新增选择器结构(位置)伪类选择器(CSS3):first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型:nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一...原创 2018-09-21 14:34:25 · 469 阅读 · 0 评论 -
Web前端学习笔记——HTML5新标签与特性
HTML5新标签与特性文档类型设定documentHTML: sublime 输入 html:4sXHTML: sublime 输入 html:xtHTML5 sublime 输入 html:5 字符设定:HTML与XHTML中建议这样去写:HTML5的标签中建议这样去写常用新标签w3c 手册中文...原创 2018-09-20 21:56:03 · 895 阅读 · 0 评论 -
Web前端学习笔记——CSS京东案例、BFC
京东项目(一)京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分。项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需要的技术也是较为复杂的,这里用京东电商网站复习、总结、提高前面所学布局技术。其实,最主要的原因还是,为啥写京东? 因为刘强东,赚了我们的钱,抢了我们的女神, 我们也要学刘强东,赚别人的钱,抢别人…...原创 2018-09-20 21:55:12 · 3000 阅读 · 2 评论 -
Web前端学习笔记——CSS定位、高级技巧、文字溢出、精灵图、Web字体
定位(position)background-position 背景定位如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的js特效,天天和定位打交道。不要抵触它,反而要爱上它,它可以让我们工作更加轻松哦!为什么要用定位?那么定位,最长运用的场景...原创 2018-09-20 21:52:42 · 3922 阅读 · 0 评论 -
Web前端学习笔记——CSS之Photoshop切图
Photoshop基本使用PS界面组成:ctrl + r 显示隐藏标尺 右击 标尺 — 把里面的单位一律改为像素ctrl+ d 取消选区菜单栏、选项栏、工具栏、浮动面板(拖拽名称,可单独操作面板)、绘图窗口 窗口菜单,可显示隐藏所有面板工作区:(新建)调整浮动面板图层操作(重点)图层面板快捷键 F7 其实图层就是一张张透明的纸 可以实现叠加问题。...原创 2018-09-20 21:49:25 · 845 阅读 · 0 评论 -
Web前端学习笔记——CSS版心和布局流程、清除浮动
版心和布局流程阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰、易读。同样,在制作网页时,要想使页面结构清晰、有条理,也需要对网页进行“排版”。“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。布局流程为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如...原创 2018-09-20 21:48:20 · 5772 阅读 · 1 评论 -
Web前端学习笔记——CSS盒子模型、浮动
盒子模型(CSS重点)其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。要求这三部分,无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。看透网页布局的本质网页布局中,我们是如何把里面的文字,图片,按照美工...原创 2018-09-20 21:46:41 · 1268 阅读 · 1 评论 -
Web前端学习笔记——CSS显示模式、特性、背景
标签显示模式(display)非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用。欧洲白人: 生活寒带或着是说常年温度较低的地缘,加上年日照时间少,身体的黑色素沉淀比较少``所以出现皮肤、发色、瞳晕都呈现浅色最重要的总结: 是为了更好的适应环境而完成的自然选择。同理,我们网页的标...原创 2018-09-20 21:45:19 · 703 阅读 · 0 评论 -
Web前端学习笔记——NodeJS之操作MySQL、MongoDB
操作 MySQL 数据库参考文档:https://github.com/mysqljs/mysql安装npm install mysqlHello Worldvar mysql = require('mysql');var connection = mysql.createConnection({ host : 'localhost', us...原创 2018-09-26 08:57:01 · 1014 阅读 · 0 评论 -
Web前端学习笔记——NodeJS之小案例:在线留言本
小案例:在线留言本Edit on github案例Github仓库地址:https://github.com/lipengzhou/express-guestbook-case零、准备完整目录结构如下:.├── node_modules npm安装的第三方包目录,使用 npm 装包会自动创建├── public 页面需要使用的静态资源│ ├── css│ ...原创 2018-09-26 08:56:55 · 976 阅读 · 0 评论 -
Web前端学习笔记——NodeJS之Express
目录ExpressExpress 介绍起步安装Hello World基本路由处理静态资源使用模板引擎配置使用 art-template 模板引擎其它常见模板引擎解析表单 post 请求体使用 Session路由路由方法路由路径路由处理方法app.route()express.Router在 Express 中获取客户端请求...原创 2018-09-26 08:56:47 · 935 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之面向对象游戏案例:贪吃蛇
面向对象游戏案例:贪吃蛇案例相关源码以上传到 GitHub :https://github.com/lipengzhou/new-snake案例介绍游戏演示在线演示地址:贪吃蛇案例目标游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力,使用面向对象的方式分析问题,需要一个漫长的过程。功能实现搭建页面放一个容器盛放游戏场景 div#map,设置样式#map { ...原创 2018-09-24 21:56:07 · 1550 阅读 · 0 评论 -
Web前端学习笔记——JavaScript 之继承、函数进阶
函数进阶函数的定义方式函数声明函数表达式new Function函数声明function foo () {}函数表达式var foo = function () {}函数声明与函数表达式的区别函数声明必须有名字函数声明会函数提升,在预解析阶段就已创建,声明前后都可以调用函数表达式类似于变量赋值函数表达式可以没有名字,例如匿名函数函数表达式没有变量提升,...原创 2018-09-24 21:53:53 · 526 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之正则表达式、伪数组、垃圾回收
JavaScript 中使用正则表达式创建正则对象方式1:var reg = new Regex('\d', 'i');var reg = new Regex('\d', 'gi');方式2:var reg = /\d/i;var reg = /\d/gi;参数标志说明i忽略大小写g全局匹配gi全局匹配+忽略大小写正则匹配// 匹...原创 2018-09-24 21:51:07 · 294 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之事件、创建元素、节点操作
事件事件:触发-响应机制Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。事件三要素事件源:触发(被)事件的元素事件类型:事件的触发方式(例如鼠标点击或键盘点击)事件处理程序:事件触发后要执行的代码(函数形式)事件的基本使用var box = document.getElementById('box');box.oncli...原创 2018-09-24 21:31:53 · 760 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之事件详解
事件详解注册/移除事件的三种方式var box = document.getElementById('box');box.onclick = function () { console.log('点击后执行');};box.onclick = null;box.addEventListener('click', eventCode, false);box.removeEvent...原创 2018-09-24 21:31:39 · 403 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之特效
特效偏移量offsetParent用于获取定位的父级元素offsetParent和parentNode的区别var box = document.getElementById('box');console.log(box.offsetParent);console.log(box.offsetLeft);console.log(box.offsetTop);console.lo...原创 2018-09-24 21:31:27 · 1743 阅读 · 0 评论 -
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web APIWeb API介绍API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())We...原创 2018-09-24 21:31:15 · 2484 阅读 · 0 评论