EffIdong-CSDN博客

原创百度云天工平台+20行代码DIY一个智能家居环境监测站

1、准备清单 - 开发板这里我选择的是一款叫做 NodeMCU 的开发板。这个是非常好用方便且便宜的物联网开发板，自带 USB 转串口芯片、WiFi 及多个 GPIO 接口，可连接多个传感器。硬件基于 ESP8266 构建，内置 WiFi 支持。- 传感器我对精度要求不是很高，所以选择一款廉价的温湿度传感器——DHT11。可以用来测试环境温湿度，该传感器的的温度测量范围为 0...

2018-08-13 17:26:21 5613 3

原创 error in ./src/main.js ✘ http://eslint.org/docs/rules/quotes Strings must use singlequote

使用es6时报错;error in ./src/main.js✘ http://eslint.org/docs/rules/quotes Strings must use singlequote /home/liangxiaodong/WebstormProjects/xiaodong/music-play/src/main.js:7:8 import “common/stylus

2017-09-08 16:36:32 8292

原创 dependencies 与 devDependencies 的区别

npm在安装npm包时，有两个中命令参数可以把他们的信息放在package.json中 1.–save 2.–save-dev–save会把依赖包名称放到dependencies键下，–save-dev放到devDependencies键下 devDependencies 下列出的模块，是我们开发时用的，比如 grunt-contrib-uglify，我们用它混淆 js 文件，它们不会被部署到

2017-09-07 15:39:53 1409

原创 meta部分参数

2017-09-06 21:39:27 649

原创 vue依赖webpack的环境配置（一）

创建项目$ mkdir [project name]$ cd [project name]$ npm init安装webpack、webpack-dev-server以及相关loader# 安装webpack，webpack-dev-server$ npm install webpack$ npm install webpack-dev-server# 为项目安装其他依赖$ npm i

2017-08-20 22:20:22 1755

原创子作用域和父作用域的事件传播

angular优秀特性之一–事件传播机制$emit方法实现事件从子作用域路径到父作用域<!DOCTYPE html><html lang="en" ng-app="eventModule"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../angular.min.js"></sc

2017-07-28 17:17:23 525

apply和apply和digest在angularjs中是两个核心概念，上篇探讨完$watch方法，作用主要用来监听数据的变化，并作出相应的反应，并且更新VIEW，但是还有一个问题，angular是如何知道数据发生了变化？ angular内置了digest循环，他会周期性的检查scope模型中的数据是否发生变化，在digest循环，他会周期性的检查scope模型中的数据是否发生变化，在diges

2017-07-28 15:48:12 368

原创 Angular之$watch方法监视作用域

在使用angular时，常常对作用域中的属性进行监视，当其发生改变时，作出相应处理，angular为我们提供了watch方法watch方法 watch是对类型的属性进行监视，熟悉js就会知道，js语言中有七种数据类型numberstringnullundefinedbooleanobjectsymbol (ES6加入）以上其中数据类型中，又有基本类型和引用类型的区别（此处不做

2017-07-25 16:33:54 781

原创 node中的global、exports和module.exports

globaljavascript一定会有一个顶层对象，在浏览器环境中，顶层对象是window，这意味着在浏览器中var something就会定义一个全局变量。而在node中，顶层作用域并不是全局作用域，在node模块中使用var something 只是就只局限在当前文件中的作用域中。node中的顶层对象是global，通过var 定义的变量也是global的属性。global是什么？打开一个

2017-07-23 19:57:00 3952

原创 Nginx服务器安装配置

本机为ubuntu16.04 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。刚刚接触服务器知识，许多概念也是比较模糊，所以暂时不对其优势以及概念进行详细解释，我们先把其安装到我们电脑并让其正常运行。安装方式官网下载 http://nginx.org/en/download.htmlwget下载 wget htt

2017-07-23 12:15:12 463

原创利用伪元素制作盒子阴影

本文参考https://paulund.co.uk/learn-css-box-shadow 因为box-shadow和:before以及:after没有什么值得深度剖析的方式，在去解释也不会让自己学到太多东西，如果对伪元素不太熟悉可以参考这个地址（http://blog.jobbole.com/49173/），以下代码也没有什么很绕的逻辑<!DOCTYPE html><html lang="e

2017-07-14 21:04:35 793

原创 Canvas之绘制字符串

上篇我们我们已经了解完了canvas绘制基本图形（除了圆形）的知识，这一篇我们将了解到canvas如何绘制字符串的方法。在绘制字符串时也有两个属性字符串属性 - fillText(String Text, float x, float y, [float maxWidth]) 填充字符串 - strokeText(String Text, float x, float y, [

2017-07-12 11:53:10 1233

原创 css动画之animation

相对于脚本驱动动画的优势更加快捷方便在中等系统中加载性能比js好将动画序列交给浏览器控制，让浏览器对性能优化animation的配置我们使用animation属性及其子属性对需要应用动画的元素进行设定，但是实际的展现形式将在@keyframe中定义子属性 animation-name：动画名称（在@keyframes时使用） animation-duration:完整动画的周期 a

2017-07-09 15:15:05 467

原创翻书效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body{ tex

2017-07-09 11:14:49 424

原创 Canvas入门

是什么 canvas–画布，canvas是HTML5的一个标签用来定义图形，提供了强大的图片处理功能，但是需要注意的是canvas并不绘制图形，只是一张画布，我们要通过脚本在上面绘制图形。能做什么基本图形绘制（直线、三角形、矩形、图标等）文字绘制图形变形和图片合成图片以及视频的处理动画实现小游戏制作IE8及以下不支持canvas标签如何定义画布 - 在html中引入

2017-07-08 19:40:18 550

原创 css动画之transition

用途用于控制页面中元素的变化速度特点需要用户触发（和animate最大的的区别）解决问题 .change{ width:100px; height:100px; } .change:hover{ width:200px; height；100px; }如以上代码所示，我们把鼠标hover在元素上时，元素宽度瞬间变成200px，减少了用户体

2017-07-04 16:45:30 393

原创具名函数和匿名函数

废话不说，先上代码具名函数var a = 2;function foo() {var a = 3;console.log( a ); //3} foo(); console.log( a ); // 2虽然这种技术可以解决一些问题,但是它并不理想,因为会导致一些额外的问题。首先, 必须声明一个具名函数 foo() ,意味着 foo 这个名称本身“污染”了所在作用域(在这个例子中是全

2017-06-30 21:34:17 4802

原创 css编写

css编写简单，但是初期的结构设计，以及后期的代码维护，是一件很麻烦的事情。 css的两种类名方式语义化类名根据模块给html起名字，比如ueser-info，menu-wrap视觉类名根据视觉风格呈现的代码，比如red、big-OOCSS（Object Oriented CSS）面向对象的css是什么：是一种容易重新使用的css规则，简单来说，就是定义一个css样式，我们可以再h

2017-06-29 15:42:49 513

原创文字如何与单选框垂直对齐

今天写代码，写到单选框部分，发现更改完字体和单选框大小之后，两者就不对齐了。代码如下.type-1{ font-size: 20px; } input{ width: 20px; height: 20px; }<div class="choosetype"> <s

2017-06-28 11:09:41 1192

原创 z-index的负值使用

有时候遇到这种情况，一个页面中我们设置了header和背景图，这个时候我们不想把背景图的图片放到header标签前，应该怎么办代码实例 html<div class="d1"></div><div class="d2"></div>css.d1{ width: 100px; height: 100px; background-

2017-06-26 15:40:52 1966

原创 jquery中如何在$()中传入形参

function textRed(classname) { $(classname).hover( function () { $(this).css('color','red') },

2017-06-25 17:03:59 1242

原创旋转轮播图

最近觉得手生，看到优酷官网的轮播图，所以决定写个旋转轮播图效果。与之前自己写的轮播图最大不同的是：之前我做轮播图有两种方式通过设置ul和li，把li排成一行，计算宽度，达到轮播图左右切换的效果把li摞在一起，设置渐变隐藏或者显示，类似慕课网官网效果旋转轮播图实现的原理又给我提供了一种新的思路，通过在切换中改变标签的内容和位置来达到切换效果实例代码： html<div clas

2017-06-24 17:07:29 772

原创 box-shadow

定义：向框添加一个或者多个阴影语法：box-shadow: h-shadow v-shadow blur spread color inset;

2017-06-23 14:17:48 395

原创 javascript引擎、编辑器、作用域之间的合作

引擎：从头到尾负责js程序编译以及执行过程编辑器：负责语法分析以及代码生成作用域:负责收集维护所有声明的变量是一套规则，用于管理引擎如何确定在何处以及如何查找变量实例如果我们写一段程序 var a =2；编译器询问作用域是否存在变量a 有，忽略没有，生成一个叫做a的代码，并生成引擎运行的代码引擎询问作用域，是否存在a变量有，赋值没有，抛出异常（undefined）

2017-06-22 20:38:55 346

原创 bootstrap响应式布局注意

核心-栅格化布局 1.1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。/* 超小屏幕（手机，小于 768px） *//* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） *//

2017-06-21 11:18:54 790

原创网页四大布局

当前网页方式大概有四种静态布局窗口缩小后内容被遮挡时，拖动滚动条显示布局设计方法： pc端，居中显示，分辨率变化时，通过拖动条显示布局，移动端：另外建立移动网站，以m.域名为域名自适应布局网页内容随这分辨率改变高度或者宽度，但是内容和位置不会发生变化设计方法：把宽度px值换成百分比，文字px单位换算成em单位响应式布局在不同的屏幕中，都能自动调整布局和分辨率。并且会根

2017-06-20 15:14:28 577

原创 vertical-align: middle的用法

在开发前端网页的过程中，水平居中有text-align:center和margin：0 auto。但是垂直居中始终没有一个比较好的解决方案，css中的vertical-align是垂直居中的意思，但是使用起来让人很难以理解。vertical-align在css中有着丰富的属性，是我见过为数不多的，今天着重研究vertical-align: middle的用法，其他属性基本与此同理。首先从定义上

2017-06-20 12:06:31 4392

原创如何让文字在表格中垂直居中与水平居中

th{ text-align: center; vertical-align: middle !important; }

2017-06-20 10:07:45 1614

原创 css3-Media Query实现最简单的响应式布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>   <link rel="stylesheet" href="max.css" media="on

2017-06-15 19:21:11 381

原创框架与设计模式的区别

框架通常是代码重用，而设计模式是设计重用，架构则位于这两者之间，部分代码重用，部分设计重用，有时分析也可重用从复用角度讲，设计模式是代码级复用、框架是模块级复用、架构是系统级复用、平台是企业应用级复用。软件生产三种级别的重用：内部重用，在同一应用中能公共使用的抽象快代码重用，用模块组合成库或者工具集，以便于在多个领域和应用都能使用应用框架重用，为专用领域提供通用的或者现成的基础结构，以

2017-06-09 14:31:39 614

原创 MVVM

（百度）MVVM（Model-View-ViewModel）框架是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架，属于.NET Frame

2017-06-09 14:04:13 450

原创 MVP

1.MVP是由MVC演化而来 2.MVP与MVC的区别在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。 3.MVP优点模型与视图完全分离，我们可以修改视图而不影响模型可以更高效

2017-06-09 13:56:53 1252

原创 MVC

1.复杂的软件必须有清晰合理的架构，否则无法开发和维护。 2.（百度）MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。3.MVC模式的意思是，软件可以分

2017-06-09 13:43:01 1027

原创 WebUi

以上图片为幕布软件导出的思维导图主要记下了web设计的基本知识，例如网站的分类、网页的排版、模块的概念等

2017-06-08 21:26:56 554

原创 vue开发中在页面代码中一律不能使用this

<div @click='this.limitNum=this.address.length'></div>以上代码是错误的，因为当前代码的作用域就已经是this了正确写法<div @click='limitNum=address.length'></div>

2017-06-07 17:09:59 4149

原创 vue--computed

-类型: { [key: string]: Function | { get: Function, set: Function } }详细:计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。注意，不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上

2017-06-07 17:00:22 2330

原创 vue--完成购物车demo

跟着视频做了两天的购物车demo，总算告一段落，写下博客总结下步骤如图学到了很多东西，写出效果时，也感受了其相比一些框架的简洁整个页面js代码不到一百行，通过在vue函数中定义属性以及方法，然后在回到html标签中通过 v-for渲染表单， v-bind改变标签的class、style、src v-on绑定用户点击事件，在其中绑定vue定义的函数 v-module双向绑定整个js

2017-06-05 19:35:45 1077 1

原创 vue--创建对象属性

如果我们遇到以下情况当我们在页面中想完成一个动态效果，例如通过鼠标点击控制class的隐藏或者显示，然而我们的代码或者引用的数据中没有这个属性，这个时候我们可以通过vue中的set方法创建属性，并且为其赋值。2.例如以下代码以下并不是完整代码，由于完整代码有点多，所以仅截取相关代码 HTML+Vue<div class="cart-item-check"><!--我们没有在标签中创建名

2017-06-04 15:31:26 6836

原创 vue--过滤器

1.Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：2.目的：用于文本转换3.代码html+vue<div class="cart-tab-2"> <div class="item

2017-06-04 11:16:15 571

原创 vue--mounted

1.钩子函数钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。（百度百科）2.相对于前端来讲对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即钩住我感兴趣的函数，只要它执行，我就先执行。3.vue中的mount

2017-06-04 10:29:02 68009 1

空空如也

空空如也