2月
20
更新于
2月20
2019

发表于 | 热度 ℃
| 字数统计： 494 (字) | 阅读时长： 2 (分钟)

熟悉前端的不会对console和alert陌生，两者在调试的时候可谓是法宝级别的工具，但是关于console，其实远远不止于console.log这一个简单的命令，它能做的事情有很多，那么让我们来一起了解一下，它有哪些冷门功能吧。

阅读全文 »
1月
20
更新于
1月20
2019

发表于 | 热度 ℃
| 字数统计： 1,544 (字) | 阅读时长： 7 (分钟)
  1. 设置函数默认值
  2. 结合解构赋值默认值使用
  3. 利用rest(…变量名)传入任意参数
阅读全文 »
1月
09
更新于
1月09
2019

发表于 | 热度 ℃
| 字数统计： 2,291 (字) | 阅读时长： 10 (分钟)

1年以前我就浅学过PHP，用thinkPHP框架开发起来确实比较轻松快捷流水化。最近闲来无事，再次回顾学习下这个世界上最好的语言。

简介

PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。

语法

PHP 脚本在服务器上执行，然后将纯 HTML 结果发送回浏览器。

PHP 脚本可以放在文档中的任何位置。

PHP 脚本以 <?php 开始，以 ?> 结束。很多语言的语法都相类似。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html> 
<html> 
<body> 
<?php 
echo "Hello World!";
// 单行注释
/*
多行注释
*/
?> 
</body> 
</html>
阅读全文 »
1月
02
更新于
1月02
2019

发表于 | 热度 ℃
| 字数统计： 324 (字) | 阅读时长： 2 (分钟)

什么是flutter

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world,and is free and open source.

环境安装

下载SDK

https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos 或者 git clone -b beta https://github.com/flutter/flutter.git

镜像

添加环境变量 .bash_profile 

1
2
3
4
5
6
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/chenyu/treasure/flutter/flutter/bin:$PATH

运行flutter doctor查看是否需要安装其它依赖项来完成安装：

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

创建项目

  1. 在AndroidStudio安装Dart插件。启动studio，搜索flutter，自动安装Dart插件，完成后重启studio。

  2. Android Studio - File - New -New Flutter Project

文件入口

项目路径下的lib文件夹下的main.dart文件

1
2
3
4
5
6
7
8
import 'package:flutter/material.dart'; //导包
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialAp
}
12月
20
更新于
12月20
2018

发表于 | 热度 ℃
| 字数统计： 2,232 (字) | 阅读时长： 10 (分钟)

在前端界，有三大 CSS 预处理器，分别是 SASS(SCSS), Less, Stylus。 本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。

我永远喜欢Stylus :>

什么是CSS预处理器

CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。

基本语法比较

Sass和Less

首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .scss 扩展名，而 Less 使用 .Less 扩展名。 

1
2
3
4
/* style.scss or style.Less */
h1 {
  color: #0982C1;
}
另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式。 
1
2
3
/* style.Sass */
h1
  color: #0982c1

而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名。可以随意地书写。 

1
2
3
4
5
6
7
8
9
10
/* style.styl */
h1 {
  color: #0982C1;
}
/* 省略花括号 */
h1
  color: #0982C1;
/* 省略花括号和分号 */
h1
  color #0982C1

阅读全文 »
12月
15
更新于
12月15
2018

发表于 | 热度 ℃
| 字数统计： 399 (字) | 阅读时长： 1 (分钟)

没有方向的船，任何方向都是逆风。

拼命活下去，发现更大的世界。

选择比努力更加重要。在中国这个有着特殊国情的国家里，个人的位置是很难找准定位的。混的差了，被人鄙夷。混的好了招人记恨。人就是喜欢互相比较，每个人的学习产出比是不一样的。不满足于现状，总想着明天一定比今天的自己强。

阅读全文 »
12月
15
更新于
12月15
2018

发表于 | 热度 ℃
| 字数统计： 418 (字) | 阅读时长： 2 (分钟)

为什么要加loading的效果

一款好的产品，都需要有一个漂亮的loading界面。lodaing界面不仅能给用户带来良好的体验，而且有效的消除了程序加载等待过程中的枯躁感。loading进度条更是对当前加载进度的一个良好反馈。从0%-100%的加载进度可以有效的告知用户还有多久即可打开页面。带有进度条的loading界面在程序中并不罕见，但是在web中呢？到目前为止浏览器并没有提供有效的浏览器对象来反馈页面的加载进度，所以无法直接、便捷的获得页面加载进度的反馈。

阅读全文 »
12月
15
更新于
12月15
2018

发表于 | 热度 ℃
| 字数统计： 218 (字) | 阅读时长： 1 (分钟)

trim 方法 (字串) (JavaScript) 移除字串前后的空白字元以及行结束字元。

  • 用法 string.trim()

  1. 递归截取(不推荐)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function trim(str){
    // 加入类型判断 
    if(str[0]===' '||str[str.length-1]===' '){
        if(str[0]===' '){
          str=str.substring(1,str.length)
        }
        if(str[str.length-1]===' '){
          str=str.substring(0,str.length-1)
        }
        trim(str)
      }else{
        console.log(str)
        return str
      }
    }

  2. 2次遍历记录不为空格的索引，最后截取

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function trim(str) {
        let start, end // 开始和结束为止 遍历记录不为空格的索引
        for (let i = 0; i < str.length; i++) {
            if (str[i] !== ' ') {
                start = i
                break
            }
        }
        for (let i = str.length - 1; i > 0; i--) {
            if (str[i] !== ' ') {
                end = i
                break
            }
        }
        return str.substring(start, end + 1)
    }

  3. 正则替换

    1
    2
    3
    4
    5
    6
    7
    function trim(str) {
        return str.replace(/(^\s*)|(\s*$)/g, "")
    }

    // 1. value.toString()
    // 2. String('123213') 
    // 3. '' + value
12月
15
更新于
12月15
2018

发表于 | 热度 ℃
| 字数统计： 967 (字) | 阅读时长： 3 (分钟)

学习开始前的准备

心态我认为世界上没有“困难”的内容，只有“简单但是不完整”的内容。爱因斯坦说：“如果你不能让一个五岁小孩理解你的概念，那就意味着你对这个概念不够了解。”这句话的含义很丰富。首先，为什么一个五岁小孩具备可以理解所有概念的能力？因为所有概念本质上都是一个逻辑链条，一环接一环。只要把每一个环节的逻辑理解了，那你对这个概念本身就理解透了。这个逻辑链条上的每一环都不困难，所以一个五岁小孩都能理解。理解一个概念最困难的地方在于填补一个断裂的逻辑链条。很多时候，教科书里会说：“因为A，所以C。” 然而那个概念其实是“因为A，所以B，所以C。”在这个时候我们就会头大：看不懂A和C之间的联系啊，难道是因为A所以D所以C？还是因为A所以E所以C？困难就是在这个过程中出现的。我们都曾有过这个经历：自己苦苦思索了许久的难题，在别人一两句话的点拨下就豁然开朗。这种经历的本质就是对方告诉了你：“A和C之间缺失的那个部分是B。”从A到B到C的逻辑不难，难的是修补A和C之间断裂的逻辑链条。因此，我再次重复：世界上没有“困难”的内容，只有“简单但是不完整”的内容。当你在学习上感到气馁时，记住上面这句话，它将会给你继续探索的信心和勇气。

阅读全文 »
12月
15
更新于
12月15
2018

发表于 | 热度 ℃
| 字数统计： 345 (字) | 阅读时长： 1 (分钟)

前端的工程化、模块化、组件化。

  1. 广义的前端工程化

前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现高效开发，有效协同，质量可控。

  1. 狭义的前端工程化

前端工程是指将开发阶段代码转变成生产环境的代码的一系列步骤。主要包括构建，分支管理，自动化测试，部署等。

前端工程化的具体内容

  1. 代码规范：保证团队所有成员以同样的规范开发代码。

  2. 分支管理：不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。

  3. 模块管理：一方面，团队引用的模块应该是规范的；另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。

  4. 自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。

  5. 构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，

  6. 部署：将构建好的代码部署到生产环境。