发表于 | 分类于

关于元素的一些属性

在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些：

  1. 尺寸相关：offsetHeight、clientHeight、scrollHeight；
  2. 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY；
  3. 获取相对视口位置：Element.getBoundingClientRect()；
  4. 获取元素的style对象：Window.getComputedStyle(Element)；
阅读全文 »

发表于 | 分类于

为什么需要react hooks

从2013开始对外发布react，作为开发者，对于react的开发习惯经历了一些变化，如下：

  1. 最开始的React 提供 React.createClass API 创建 React 组件，【此时class还没有正式进入ecma规范】；
    • 此时开发者需要按照规范去使用createClass API，
  2. React 在 V0.13.0 版本中引入 React.Component API，允许开发者使用原生 JavaScript class 方式创建组件；
    • 此时需要开发者了解 constructor 和 super调用，已经 this 的绑定；
    • 后面有了试验中 class filed 特性来帮助我们跳过 constructor；
    • 高阶组件、render props、生命周期分散处理等引入；
  3. react hook带来的灵活，给函数组件注入了新的生命力；

更多参考

阅读全文 »

发表于 | 分类于

Unicode字符在前端的表现

对于Unicode字符，HTML、CSS、JS的计算方式完全不一样，但可以相互转换。

  1. HTML字符计算方式
    对于Unicode，HTML采用十、十六进制方式计算，并以&#{unicode};方式进行表示，例如对于|字符，HTML的表示方式如下：
  • 十进制：|
  • 十六进制：︤

需要特别注意的是，十进制必须至少4位数，也就是说如果不足4位，则“&#”后面补0，再强调一遍，千万不要省略0。

  1. CSS字符计算方式
    对于Unicode，CSS采用十六进行方式进行计算，并以\{unicode}方式进行表示，同样以|字符为例，CSS的表示方式如下： 

    1
    2
    3
    4
    /* 这里并没有4个字符的要求，所以\007C并不是必须的 */
    span:before {
        content : '\7C'
    }

  2. JS计算方式
    对于Unicode，JS也采用十六进制的方式进行计算，但以“\u{unicode}”的方式表示，继续以“|”字符为例，JS的表示如下：

    1
    document.querySelector('span').innerHTML = '\u007C';

这里需要特别指出的是，对于innerHTML的赋值即可以采用\u007C方式，也可以采用|HTML方式，但对于input输入框，或者alert打印信息，只能采用\u007C方式。

  1. 玩转font-awesome
    通过上面的转换关系，现在我们就可以对font-awesome的字体进行任意的使用了，例如以HTML的方式，如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <html>
    <header>
        <style>
        /* 十六进制 */
        span::after{
            content: "\7c";
            content: "\007c";
        }
        </style>
    </header>
    <body>
        <!-- 十进制 -->
        <span>&#0124;</span>
        <!-- 十六进制 -->
        <span>&#e007c;</span>
        <span id="js"></span>
        <script>
        // 十六进制
        document.querySelector('#js').innerHTML = '\u007C';
        </script>
    </body>
    </html>

这也是我们在开发过程中、html、css、js对于iconfont的表述不一致的原因

String.fromCharCode方法

静态 String.fromCharCode() 方法返回由指定的UTF-16代码单元序列创建的字符串。
String.fromCharCode(num1, ..., numN)

  • 参数: num1, …, numN
    一系列UTF-16代码单元的数字。 范围介于0到65535（0xFFFF）之间。 大于0xFFFF的数字将被截断。 不进行有效性检查。
  • 返回值
    一个长度为N的字符串，由N个指定的UTF-16代码单元组成.
1
2
3
String.fromCharCode(65, 66, 67);  // returns "ABC"
String.fromCharCode(0x2014)       // returns "—"
String.fromCharCode(0x12014)      // also returns "—"; the digit 1 is truncated and ignored

发表于 | 分类于

快应用

快应用官网介绍：快应用是一种新的应用形态，以往的手机端应用主要有两种方式：网页、原生应用；网页无需安装，却体验不是很好；原生应用体验流畅，却需要从应用商店下载安装，难以一步直达用户；快应用的出现，就是希望能够让用户无需下载安装，并且还能流畅的体验应用内容。

为了达到上面的目标，快应用建立一种新的语言开发规范，同时提供一系列的开发套件辅助支持。简单来说，开发者主要利用前端知识与技能，以及对应的IDE，手机设备就可以做原型的开发。快应用使用前端技术栈开发，原生渲染，同时具备H5与原生应用的双重优点，开发者使用的前端技术栈资料多，学习成本低。

2018年3月份，由小米，OPPO，VIVO，华为等10家国内主流厂商成立了快应用联盟，从技术规范层面做了统一，并保证了开发者开发的快应用可以直接在所有的联盟内厂商的手机设备上运行。

快应用框架深度集成进各手机厂商的手机操作系统中，可以在操作系统层面形成用户需求与应用服务的无缝连接，很多只用在原生应用中才能使用的功能，在快应用中可以很方便的实现，享受原生应用体验，同时不用担心分发留存等问题，资源消耗也比较少。

对于每台手机设备，应用可以从多个系统入口，引用用户体验产品。比如：全局搜索、负一屏、浏览器搜索等。

快应用开发

开发者参与快应用开发，主要分为以下几个步骤:

  • 快应用官网注册
  • 完善资料
  • 绑定厂商开发者账号(至少一家)
阅读全文 »

发表于 | 分类于

服务器

一般而言开发者选择服务器会使用linux系统，常见的是Ubuntu和centos，不过现在的云服务上多得很，根据自己的喜好来选择吧。

初始化

  • 购买服务器
  • 登录服务器
  • 初始化设置

用户添加

禁止root用户，并新建含有root权限的用户：

  • 新增用户：adduser userName
  • 设置密码：passwd userName
  • 增加root权限： vim /etc/sudoers；添加内容 userName ALL=(ALL) ALL
  • 修改ssh，禁止root登录，修改 ssh 登录的 端口号 【可以设置密码登录或者私钥登录】
  • 阿里云实例安全组设置 打开需要对外的端口号包括 80、443、和ssh对应的端口号
阅读全文 »

发表于 | 分类于

简析eval

一般而言，作为前端开发，我们经常听到开发环境尽量不要使用eval；

  • eval 太神秘了，以至于很多人用错。所以不推荐使用。
  • eval的可读性和不容易调试
  • 无法优化和性能问题
  • 安全问题

eval使用注意和执行上下文

首先看看一下几个实例：eval运行时的上下文context

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
var context = 'outside';
(function(){
  var context = 'inside';
  return eval('context');
})();
// inside

var context = 'outside';
(function(){
  var context = 'inside';
  return eval.call(null, 'context');
})();
// outside

var context = 'outside';
(function(){
  var context = 'inside';
  return (1, eval)('context');
})();
// outside

var context = 'outside';
(function(){
  var context = 'inside';
  return (eval)('context');
})();
// inside

var context = 'outside';
(function(){
  var context = 'inside';
  var my_eval = eval;
  return my_eval('context');
})();
// "outside"

可以看到这和eval 的调用方式有关， 需要看是 direct or indirect。

direct vs indirect call

new function

参考：
[Exploring Javascript’s eval() Capabilities And Closure Scoping(https://www.bennadel.com/blog/1926-exploring-javascript-s-eval-capabilities-and-closure-scoping.htm)
javascript eval: direct vs indirect call
Global eval. What are the options?

发表于 | 分类于 ，

如何在react的Hook中请求数据

原文：How to fetch data with React Hooks?

In this tutorial, I want to show you how to fetch data in React with Hooks by using the state and effect hooks. We will use the widely known Hacker News API to fetch popular articles from the tech world. You will also implement your custom hook for the data fetching that can be reused anywhere in your application or published on npm as standalone node package.

本文将会讲述如何在React中通过使用useState和uesEffect来fetch异步获取数据，例子中将使用广为人知的Hacker News API来获取技术领域上的一些受欢迎的文章，同时还会尝试使用自定义Hook来获取数据，以便在开发者的工程或者npm包中来提高复用性。

If you don’t know anything about this new React feature, checkout this introduction to React Hooks. If you want to checkout the finished project for the showcased examples that show how to fetch data in React with Hooks, checkout this GitHub repository.

如果你还不太清楚react的Hook新特性，那么建议先去官方文档或者关于hook的介绍查看相关内容，本文的全部完整示例代码都在这个github仓库中

If you just want to have a ready to go React Hook for data fetching: npm install use-data-api and follow the documentation. Don’t forget to star it if you use it :-)

如果你只是想通过使用Hook来获取数据，可以通过npm install use-data-api，并配合文档use-data-api文档来使用，如果有帮助的话请➕星；

Note: In the future, React Hooks are not be intended for data fetching in React. Instead, a feature called Suspense will be in charge for it. The following walkthrough is nonetheless a great way to learn more about state and effect hooks in React.

注意：在将来，React Hooks并不计划一直成为异步获取数据的方式，而是使用以后的新特性 Suspense 来获取数据，不过通过本文的内容依然是一个学习好state和effect相关Hook的不错方法。

阅读全文 »

发表于 | 分类于

redux的中间件

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

这是 redux 作者 Dan 对 middleware 的描述，middleware 提供了一个分类处理 action 的机会，在 middleware 中你可以检阅每一个流过的 action，挑选出特定类型的 action 进行相应操作，给你一次改变 action 的机会。

redux使用中间件机制的动机

redux是一个单向数据流库， 下图是redux中一个简单的同步单向数据流动的场景，点击 button 后，在回调中 dispatch 一个 action，reducer 收到 action 后，更新 state 并通知 view 重新渲染。单向数据流，

redux

在开发者使用的时候并没有什么问题，如果在复杂场景中，我们再dispatch 一个 action的时候需要去服务端获取数据，并且需要打印请求发起reque记录和请求结果response记录，如果只是修改某一次的dispatch，那么其他我们直接修改就好了，但是如果每一次的dispatch都需要被记录呢？如果还是在原来的代码中添加的话，那么将会变得不可控，意于是redux 作者 Dan引入了 middleware，

redux

这种模式就是可以组合的，自由插拔的插件机制，借鉴于KOA的中间件思想，使用 middleware 来增强 dispatch ，完成我们需要的一些功能。

阅读全文 »

发表于 | 分类于

前端概述

Web前端开发是从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

而随着移动端的便利性，大前端的概念也是影响广泛，前端已经不仅限于在web端进行界面的呈现，大前端已经包括但不限于：

  • web站点开发(后台、中台、前台等页面)
  • 移动端混合应用集成(RN、weex、flutter)
  • 多端小程序/块应用
  • 桌面应用(electron)
  • 服务端node层
阅读全文 »

发表于 | 分类于

react-native

react-native是一个可以使用JavaScript+react编写移动端native应用的框架，是目前一种很是热门的一种移动应用开发方案。但是react-native通用存在着很多的问题，这让很多开发人员不得不注意其中的问题所在，并避免踩坑，这里记录一下常见的坑点，主要是分为三类：

  1. 通用坑点
  2. Android坑点
  3. IOS的坑点
阅读全文 »