使用

在用IDE开发的时候,验证php代码的错误和标准格式化.

这是遇到了几个插件.在用VSCode的时候安装了 php-cs-fixer
composer global require friendsofphp/php-cs-fixer
这个配置很简单只要用 composer 安装 php-cs-fixer 然后配置 php.exe 的位置就可以使用了

在使用 sublime 的时候 安装了 phpcs 和 phpmd
安装也是用 composer
composer global require "squizlabs/php_codesniffer=*"

这个配置(php code sniffer)就繁琐点了 配置如下

大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解，心里难免会想调试的时候用alert不就行了，干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢，下面我就介绍一些调试的入门技巧，让你爱上console.log

先的简单介绍一下chrome的控制台，打开chrome浏览器，按f12就可以轻松的打开控制台

sync-settings简介

sync-settings是一款备份插件，可以备份ATOM的全局设置、插件、按键绑定(keymaps)、界面样式、代码片段(snippets )、 init script。这样不管走到那里使用的Atom都是自己最熟悉的那个,这样省去了很多麻烦.

这套教材非常好 非常适合我.
Webpack傻瓜式指南（一）
Webpack傻瓜指南（二）开发和部署技巧
Webpack傻瓜指南（三）和React配合开发

不过有个小问题: 里面的方法不能加括号app.appendChild(sub()); 这个应当这么写 app.appendChild(sub); 这个错误原因可能是他手误了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//之前
//只需要 sub
//这个是CommonJS风格代码
function generateText(){
	var element = document.createElement('h2');
	element.innerHTML = "Hello hddddaa world";
	return element;
}
module.exports = generateText();

--------------------------------------------------------------------
//后面
// 所以需要sub()
//这个是ES6风格代码
export default function() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world hahaha";
  return element;
}

Vue Start Kit: 一个国内搞的用 Vue+Bulma UI 开发的后台模版.不过我在本地测试时报错 已经没问题了,必须用cnpm 安装node-sass才可以.
Demo地址: http://vue-kit.gismall.com/

一些总结吧

• 父组件和子组件之间通信用广播: vue可以用多种方法实现组件间沟通,比如用一个属性,
  不过这必须用上同步 :test.sync 要不然子组件的状态父组件不知道.
  但是这有个问题就是不利于解耦,捆绑太紧密了不能复用了,所以还是用广播.
  不过还是有个小小的疑问,如果两个同名事件怎么办呢?? 按文档里说是第一个,那可能是父组件加载子组件的顺序吧
  我想可能是这样的,如果存在同名的话,那就得手动调整顺序,我感觉最好不要同名.

• v-bind:fields=”columns” 绑定解释: 有时用简写就比较懵,简单记忆下: 如果原有属性就是绑定属性到vue属性.如果不是自带属性,那就是组件自定义的.比如 :fields="columns" 这里就是一个. fields 子组件 : columns 父组件. 反正等号后面都是当前组件的.可以看下面例子.

前言

js的数组和php有些不同,他的定义方法,自定义下标只有一种方法 var arr['a'] = 1,不能像php一样 $arr = ['a'=>1],还有种没有下标的自定义方法 就是下面方法一那种方法

方法一：直接定义并且初始化，这种遇到数量少的情况可以用

1

var _TheArray = [["0-1","0-2"],["1-1","1-2"],["2-1","2-2"]]

前言

今天遇到个很bug的问题.在chrome里当窗口很小的时候,一个div就会偏移,但是当用鼠标调正窗口,又会变好.而且只有在chrome下有这个问题,最后确认原来是margin-top失效的原因.再次说明: 上面那个问题,并没有因使用overflow:hiden而解决.只是放在火狐里这个bug不存在了.后来是通过删除了子容器的 float:left 解决的.但到底是哪里冲突还是不明白.但下面这些方法解决一些浮动漂移是有用的.

问题的解决

正统说法:

1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”
2： 当第一个层浮动，而第二个没浮动层的margin会被压缩，详见–浮动元素后非浮动元素的margin的处理。

一 如果是两个容器并列,一般出现问题,是因为第一个容器加了浮动,第二个没有加 所以造成第二个margin出问题.解决办法是在第二个容器前增加一个<divstyle="clear:both;"></div>.像下面这样,或者给box2也增加float;

前言

现在大部分前端开发,都用npm或者bower.因为这样不仅升级组件方便,而且兼容性也能得到保障.但是对于简单开发来说,过于庞大的组件也是比较麻烦的.所以这个Sea.js还是有一定存在价值的.

我也是在KodExplorer里发现这个插件的.没有太多使用,所以这里就点一下,以便以后记住.如果需要用就看官方吧,里面文档很详细的.

[TOC]

项目地址:

https://github.com/mailru/FileAPI

前言

原本打算是操作本地文件,如打开文件,新建文件,保存文件.但好像js是无法坐到这些的.
只能通过一些特别的手段达到一定的效果而已.
这个组件就是搜索时找到的,主要是通过上传时得到文件一些信息,他主要用作图片上传,
文件上传时获得相关内容.而且他还能操作摄像头用于头像.
并且他还有个jquery的插件,主要用处也是上传头像时的相关操作.

这里就写几个主要的,详细请看这篇文章:
http://www.iteye.com/news/27580
使用Emmet加速Web前端开发

• 初始化

HTML文档需要包含一些固定的标签，比如、、等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：

• 嵌套

现在你只需要1行代码就可以实现标签的嵌套。

1
2
3

>: 子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号前的标签提升一行

• 分组

你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码

1
2
3
4
5
6

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

• 快速添加类名、ID、文本和属性

1. 使用E#ID添加ID名
2. 使用E.class添加类名
3. 使用E[attr]添加属性
4. 使用E{text}添加文本

简单说下gulp使用流程

• 首先进入 项目目录 npm install –save-dev gulp
• 其次安装其他所需插件 配置文件里有 就不赘述了
• 规划目录开始编写

项目地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

gulp #目录结构
├─.idea
│  └─libraries
├─app
│  └─assets     # 随便找的测试例子
│      ├─css
│      │  └─font
│      ├─images
│      └─js
├─build         # 第一个实例 输出目录
├─dist          # 第二个实例 输出目录
├─js            # 第一个实例 随便写的js
└─web           # browser-syn 测试 随便写的scss     
    ├─css
    └─scss

Note:
因为gulp-sass需要node-sass的支持才能用,不过node-sass被墙住了,所以这里共享一个,不过版本是3.7的 如果升级了就自行更换吧
https://yunpan.cn/cPI3SEfajJeX9 访问密码 a6b0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

{
  "name": "studyangular",
  "version": "0.0.0",
  "dependencies": {},
  "repository": {},
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^2.0.0",
    "grunt-concurrent": "^1.0.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-compass": "^1.0.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-copy": "^0.7.0",
    "grunt-contrib-cssmin": "^0.12.0",
    "grunt-contrib-htmlmin": "^0.4.0",
    "grunt-contrib-imagemin": "^0.9.2",
    "grunt-contrib-jshint": "^0.11.0",
    "grunt-contrib-uglify": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-filerev": "^2.1.2",
    "grunt-google-cdn": "^0.4.3",
    "grunt-newer": "^1.1.0",
    "grunt-ng-annotate": "^0.9.2",
    "grunt-svgmin": "^2.0.0",
    "grunt-usemin": "^3.0.0",
    "grunt-wiredep": "^2.0.0",
    "jshint-stylish": "^1.0.0",
    "load-grunt-tasks": "^3.1.0",
    "time-grunt": "^1.0.0"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  }
}

Private
最喜欢这个字段 设置为true下面那些就全部用写了,开发时 或者 不想共享时 就用这个
可选字段，布尔值。如果private为true，npm会拒绝发布。这可以防止私有repositories不小心被发布出去。

npm search 搜索包

npm install 安装nodejs的依赖包

npm install -g 将包安装到全局环境中
但是代码中，直接通过require()的方式是没有办法调用全局安装的包的。全局的安装是供命令行使用的，就好像全局安装了vmarket后，就可以在命令行中直接运行vm命令

npm install –save 安装的同时，将信息写入package.json中

项目路径中如果有package.json文件时，直接使用npm install方法就可以根据dependencies配置安装所有的依赖包
这样代码提交到github时，就不用提交node_modules这个文件夹了。

npm init 会引导你创建一个package.json文件，包括名称、版本、作者这些信息等

npm ls 列出当前安装的了所有包

npm ls -g 查看全局安装的模块及依赖