FLEX 布局中的兼容性写法汇总

前言 随着浏览器的发展 FLEX 布局已经慢慢地走进了前端世界,虽然这样,但 FLEX 在实际的使用当中我们还得考虑下它的兼容性问题。即使现在已经是移动端横行霸道的时代,并且老版本的 IE 也已经慢慢退出历史的舞台,但浏览器之间也还是坚持着自己的一套方案。所以在这里有必要,也应该为给自己整理下 FLEX 布局当中的一些兼容性写法。虽然有很多编辑器也已经很智能,自带自动补全功能。 FLEX 兼容性之旅 ...

2017
09-10

AngularJs 数据表格化(完美展示)

前言 AngularJs 的强大之处不必多说,在平时的开发中我们经常会用来表格来展示相关数据,并且可以新增、删除、修改数据,你甚至还可以按不同的关键字对数据进行排序。这个功能都是极常见的。所以在这里我们在必要用专门一篇文章来分享它。 AngularJS 数据表格化之旅 HTML 代码 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>...

2017
09-10

Bower 前端依赖包管理器

前言 Bower 是一个软件包管理器(如JavaScript、HTML、CSS之类的网络资源),你可以在应用程序中用它来安装新的软件包,它可以让你很好地管理前端中各种依赖比如:jQuery、Boostrap、Angular、React 等。下面我们就来看看 Bower 这个好东西。 为什么是 Bower 在项目用使用 Bower 来管理依赖如以下几个好处: 管理项目中所有依赖的版本号 可以下载依赖源码 让依赖关系处理起来变得前所未有的简单,可以...

2017
09-09

纯手工实现 WordPress 文章阅读量统计功能(非插件)

要想实现纯手工打造的文章阅读量功能,我们有必要先来了解实现这个功能的一些基本元素。下面我们先来简单的了解下有关 post meta 的几个函数。 WordPress 中有四个关于 post meta 的函数,他们分别是:get_post_meta()、update_post_meta()、delete_post_meta()、add_post_meta()。这四个函数分别用来检索、更新、删除、添加对应文章中的自定义字段的值,这些字段保存在 postmeta 表中。 基本语法 add_p...

2017
09-07

移动端布局解决方案

前言 在移动 WEB 开发中页面整体框架的布局极其重要,如果你曾经感受过这种痛苦,你就会觉得这篇文章就是为你而写。还是那句话:好的开始,你就成功了一半。我们开始吧? 这也是我自己踩过的一个大坑,在项目中没有做好页面整体框架的规划,也就是整个页面上中下如何布局。对于头部和底部我用了fixed 看起来没有什么毛病,但在实践的使用中就会发现一些让你抓狂的 BUG。在 IOS(如:iphone 5s) 下弹出键...

2017
09-06

关于移动端开发的一些忠告

有好的开始,你就成功的一半,在移动端开发中也不例外。对于一个项目来说框架的选择以及整个项目的结构布局极其重要。下面就分享下自己在平时开发过程中遇到的一些问题,会文会一直更新。 问题一:要不要选择前端 UI 框架 对于这个问题得根据项目的实践情况来进行选择。比如:你的项目采用了敏捷开发,那么框架对于你来说就很有必要了,但是这里有一个问题需要注意,你得提前跟交互同事、UI 同事沟通好。...

2017
09-04

JavaScript 正则表达式用法及常用的正则表达式整理

前言 正则表达式功能之强大,不用多说,不敢想象没有正则表达式的程序世界里会是怎么样的。正则表达式是一种匹配的模式,用于匹配一个或者多个字符串。 字符串常用的一方法如: indexOf 查找下标(通过字符串) substring 获取子字符串(有两个参数,开始位置,结束位置,但不包含结束位置) charAt 获取某个字符(通过下标) split 分割字符获取数组 但在这里我们通过正则来完成字符串的一些操作。 判...

2017
08-26

WAMP SERVER 环境下,手机端访问电脑本地站点(localhost)

前言 移动开发盛行,移动端页面调度就显示极其重要。很多东西只有在真机下才能看到最终效果。于是我们就需要通过手机端来访问电脑中的站点来进行调试,包括但不限于样式调整。下面就分享一个移动端套装。不能说是最好的,但至少是够用。本文主要分享的东西是通过手机端访问页面,从而达到提高开发效率的目的。 准备 要想使用这个功能来提高工具效率的,我们必需先安装两个软件:Wamp Server 和 360 手...

2017
08-08

腾讯地图 API 使用指南

前言 地图功能对于我们的日常生活来说非常地重要,不管你去到哪里都需要地图为你保驾护航,这次整理了下调用腾讯地图 API 时的一些有用的东西,不为别的只为让看到的人节省点时间,时间无价,但我愿意把浪费了自己时间的一些东西分享出来,让“前人种树后人乘凉”的美好品质传承下去。 资料整理 在项目中如果我们是通过 requirejs 来管理 js 。那么你肯定会遇到这样的问题。 看这里 require.config({ ...

2017
08-05

angularjs 自定义指令(directive)

前言 一个指令(directive)就相当一个模块,可以把它当作一个功能的模块。把一个功能做成指令后,你就可以反复重用它,而不需要写多份代码。 基本用法 基本用法就直接上码了: HTML 代码 <!DOCTYPE html> <html lang="en" ng-app="yunkus"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2017
08-02

AngularJS 事件传播($broadcast() || $emit())

前言 由于某种原因我们需要在不同的 controller 之间进行通信,以达到一些特别的需要。那么我们就可以用AngularJS 给我们提供的两个方法配合使用来达到预期效果。这两个方法就是$broadcast() 和 $emit()。 费话少说 $broadcast() $broadcast() 翻译成中文就是广播。也就是上级向下级推送信息。类似于原生 JavaScript 中的事件捕获。 $emit() $emit() 与$broadcast() 正好相反。$emit() 方法向上推...

2017
07-30

Angularjs ngRoute 用法

前言 Angularjs (即Angular 1),虽然 Angular 2 及以上版本已经放出,但 Angular 1 想全身而退,似乎又有点早,所以对于前辈我们需要送上足够的尊重。所以本文只要分享的是 Angularjs 中的ngRout 插件。 ngRoute 初识 ngRoute 中包含的东西也不是很多,主要有以下一些: 1、$routeProvider(when、otherwise) 2、$routeParams (参数) 3、事件($on、$routeChangeStart、$routeChangeSuccess、rout...

2017
07-29

Angular 4.x NgPlural 指令用法

基本用法 下面是官方给出的用法样例: 官方套路 <some-element [ngPlural]="value"> <ng-template ngPluralCase="=0">there is nothing</ng-template> <ng-template ngPluralCase="=1">there is one</ng-template> <ng-template ngPluralCase="few">there are a few</ng-template> </some-element> 示例 其实 NgPlural 的用法跟 NgSwitch...

2017
07-23

Angular 4.x NgSwitch 指令用法

基本用法 下面是官方给出的基本套路,看完估计该懂的都应该懂了,不懂的联想一下也应该懂得差不多了。 用法 <container-element [ngSwitch]="switch_expression"> <some-element *ngSwitchCase="match_expression_1">...</some-element> <some-element *ngSwitchCase="match_expression_2">...</some-element> <some-other-element *ngSwitchCase="match_exp...

2017
07-18

Angular 4.x NgStyle 指令用法

基本用法 官方给出的用法就只有两种不同的形式,行内添加及或者通过一个对象添加。下面就是 NgStyle 的全部内容。 语法 <some-element [ngStyle]="{'font-style': styleExp}">...</some-element> <some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element> <some-element [ngStyle]="objExp">...</some-element> 示例 套路一 行间添加...

2017
07-18

Angular 4.x NgClass 指令用法

用法 语法 <some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> <some-elemen...

2017
07-16

Angular 4.x HTTP 示例

启动服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。 提供 HTTP Services HttpModule 并不是核心的 NgModule。HttpModule 是一个可选项。你可以引入这个包@angular/http。 您可以从@ angular / http导入,因为systemjs.config配置了SystemJS,以便在需要时加载该库。 注册 HTTP services 应用将依赖于Angular 的 htt...

2017
07-14

Angular 4.x 路由示例(Routing)

现在应用有了新的需求: 1、添加一个 Dashboard 页面 2、添加导航功能 3、用户不管在任意一个页面中点击都能进入详情 4、当用户点击一个深度链接可以打开指定英雄详情 当你完成了以上这些,用户就可以像下面这样进行导航(页面跳转): 为了能达到上面的这些需求你得给应用添加一个路由。 准备 请确保你的项目结构目录如下: 启动服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命...

2017
07-08

Angular 4.x 服务示例(Services)

随着应用的不断完善,更多的组件需要用到 hero 数据。 你无需一遍又一遍地复制、拷贝代码,因为在这遍文章里我们要通过服务来提供数据,创建一个数据服务,然后在需要英雄数据的组件中注入这个数据服务。 通过把数据独立出来做成一个服务,可以让你的组件更轻、更爽、更专注。还可以更容易的去做单元测试。 因为数据服务总是异步,所以你需要通过 Promise-based version 的数据服务来完成数据交互。 准备 ...

2017
07-05

Angular 4.x 多组件示例(Multiple Components)

AppComponent 为我们做了很多事件,在示例的一开始它完成了单个英雄信息的显示,接着就是多个英雄列表及对应英雄的详情信息。接下来我们将会看到新的需求及新的功能。你不可能在一个组件里完成所有东西,这维护起来会很吃力。 我需要把它们拆分成几个子组件,每一个子组件都专注一种任务或者工作流。而 AppComponent 就可以成为一个简单的壳来管理那些子组件。 在这篇文章里,你要做的第一件事就是把英雄的...

2017
07-03

Angular 4.x 列表与详情示例(Master/Detail)

在这篇文章中,我们将会做一个英雄列表,并且显示选中英雄的详情。 在开始英雄列表之旅前,请确定你已经有以下文件结构(或者新创建一个项目)。 启动服务 运行下面的命令行: ng serve --open 上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。 显示 heroes 要想在页面中显示heroes ,你就得添加 heroes 。 创建 heroes 创建一个heroes 数...

2017
07-02

Angular 4.x 入门示例(Hero Editor)

创建工程 按照下面的说明创建一个名为 angular-tour-of-heroes 的项目名。 结构如下: 注:图片来自官网截图 启动应用服务 ng serve --open 上面的命令行就是启动服务并运行 应用。这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。 声明 hero 在AppComponent中添加两个属性,一个是用于应用名的 title 属性,一个是用于英雄名的 hero 属性。 app.component.ts (AppComponent cl...

2017
07-02

Angular 4.x 工程项目搭建之旅

前言 Angular 2 时代的到来,终结了不少开发者对未来的向往,但完全独立于Angularjs(Angular 1)的实现,让我们对这个框架充满了前所未有的好奇。存在即使合理,所以Angular 2 的横空出世也就理所当然了。这是 Angular 2 的开始篇,本文主要讲解在使用 Angular 2 开发之前的一些准备(环境)。 安装环境 首先我们需要安装 Node.js 和 npm ,版本号也是有要求的,Node.js 至少是6.9.x 的版本以上,npm ...

2017
07-02

Sublime Text Snippets 模板库插件

前言 模板库插件对于我们做前端的人来说也很有历史的了,还记得以前刚做前端的时候,如果遇到经常用到的代码,就是把这些代码放到一个文件中,到用的时候就打开文件,复制粘贴完成手动版的模板库功能,但是现在就不用这个纯手工的方法了,因为我们有了Sublime Text Snippets 模板库插件。 Snippets 之旅 安装配置 安装方法也是一如既往地简单,在这里就不多说了。安装完后就可以用了,但要怎么用呢?...

2017
06-27

Sublime Text Clipboard Manager 剪切板历史管理插件

Clipboard Manager 是 Sublime Text 3 里的一个剪切板历史管理插件。虽然不是很强大,但可以让你用得爽爽哒。这样的功能真的得收藏好,到用的时候才知道它有多贴心,多么令人动容。好,费话不多说,开始! Clipboard Manager 的安装我想在这里也不用多说了,会用 Sublime Text 的都会。这篇文章只想说说它的配置及用法,我估计这才是你来到这里的原因。我相信你肯定不会白来一趟。 首选配置一些快捷键:复...

2017
06-26

Sublime Text CTags 插件

Sublime Text CTags 插件用来定位函数,这个方法跟搜索功能比起来有着异曲同工之妙,不过你不需要输入任何字符,直接键盘+鼠标键就可以找到你要找的函数。用法可以看这里:https://github.com/SublimeText/CTags。这个插件的安装方法可能会让你觉得不适,但你得挺住。 要想成功在 Sublime Text 中使用这个插件,你只需要做两件事: 1. 在 Sublime Text 的Package Control 中安装此插件。 2.下载一个压缩包...

2017
06-24

Sublime Text 让天下没有难敲的代码

前言 Sublime Text 非常地轻量,以至于可以用秒来的形容,轻量归轻量,但强大也是它的墓志铭。所以这是一篇 Sublime Text 的专卖。不要怀疑,就是它。 准备 官方下载地址:http://www.sublimetext.com/ 官方文档:http://www.sublimetext.com/docs/3/(这里是 Sublime Text 3 的文档) 官方放出的安装方法有两种,一种是 .exe 安装,一种是直接解压就可以用。至于那一种好,其实看你自己怎么用。如果是...

2017
06-24

JavaScript 实现照片墙效果

照片墙效果相信你也看到过不少,在这里我们也尝试去做了一个,没有炫丽的效果,没有多余的文字,一时按捺不住成就感,在此把在大神眼里不值一提的照片墙效果献上。请多多包含! HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墙效果-云库前端</title> <link rel="stylesheet" href="./css/style.css">...

2017
06-21

Eclipse 搭载 Tomcat 部署 WEB 项目

前言 在本地部署 WEB  项目,对于从事前端开发的人来说也是一个必备的技能。本文 eclipse 搭载 tomcat 来配置本地服务。其实这个配置也很简单,甚至很多人会觉得也没什么必要拿来说事,但我相信会有很多小白会在这上面花了不少时间。所以此文就诞生了。 准备 下载 Eclipse 、jdk、apache tomcat。可以都下载最新的版本,也可以下载较旧的版本。这个就看你自己在这方面有什么特别的喜好的。 Eclipse EE...

2017
06-19

本地 apache tomcat 之 web 项目部署

前言 在团队开发软件时,项目的协同合作就非常重要了。这个协同合作包括很多方面,如:git 的运用,本地调试,代码封装等,但这篇文章主要是想分享下在本地调试的时的环境配置问题。也就是把 web 项目部署到本地的 apache tomcat。说真的这个部署步骤非常地简单,但如果没有了解其中的套路,估计也得折腾好长一段时间。 下载安装 工欲善其事必先利其器,所以我们现在先来把所有需要的资源都一一准备好...

2017
06-16