CDBlog

cfca的一个加密失败的问题
Oct 7, 2019
在金融领域，cfca(中国金融认证中心)是必然会接触的，使用了cfca键盘，提供了客户端到服务端的加解密功能。

在某个需求时遇到一个cfca加解密失败。

功能伪代码如下, 先接口获取开关配置，再决定展示UI。
...more
移动端iOS部分兼容
Oct 7, 2019
1. iOS引入图片资源时，在https下因为安全机制，不能渲染http的图片
2. img标签的onload事件无法在iOS中识别，但js的onload则可以。替换为 {const img = new Image(); img.onload=function(e){}; img.src=”http://src..."};
3. iOS下的input光标层级较高，会在弹出的mask层上展示，需要在 input 的父元素增加postion:relative
4. input输入时，iOS键盘弹起，关闭键盘后，页面内容不自动回弹。iOS下还存在 focusin focusout 表单两个事件，监听focusout时，页面进行dom回弹即可。
5. iOS不像安卓一样，存在开放的文件夹入口，只提供了图片/视频的入口。当iOS下载文件时，比如word pdf，需要先用APP授权并打开，之后在APP中进行访问。APP间类似独立沙盒，数据不能直接互通。
  所以，涉及文件下载的功能点时，需要考虑这点。比如，提供预览，和复制url，引导用户外部下载。
...more
css实现文字镂空
Oct 7, 2019
...more

改变上下文bind apply call

May 4, 2019

bind 返回一个函数， call apply 直接执行。

// bind
if ( !Function.prototype.bind ){
Function.prototype.bind = function(context){
  if ( typeof this !== 'function' ){
    console.log('this is not function');
    throw new Error('this is not function');
    return ;
  }

  var args = Array.prototype.slice.call(arguments, 1),
      self = this;
  var tmpFunc = function(){};           // 构造函数原型链继承
  var mainFunc = function(){
      var innerArgs = Array.prototype.slice.call(arguments);  //改变上下文之后的arguments
      var finalArgs = args.concat(innerArgs);
      return self.apply(this instanceof tmpFunc ? this : context || window,finalArgs);
  };

  tmpFunc.prototype = this.prototype;
  mainFunc.prototype = new tmpFunc();
  return mainFunc;
};
}

...more

实现继承inherit

May 4, 2019

function Parent(name, value) {
  console.log('parent', name, value);
  this.name = name;
  this.value = value;
}
Parent.prototype.foo = function () {
  console.log(`${this.name}--${this.value}`);
};

function inherit(parentClass, { property }) {
  function Child() {
    console.log('child', arguments);
    parentClass.apply(this, [].slice.call(arguments));
  }
  // Child.prototype = parentClass.prototype, 避免Parent prototype 更新传递
  // Child.prototype = new parentClass() 避免实例化两次parentClass
  function tmp(){}
  tmp.prototype = parentClass.prototype;
  Child.prototype = new tmp();
  Child.prototype.constructor = Child;     // constructor 指向
  for (key in property) {
    Child.prototype[key] = property[key];
  }

  return Child;
}

...more

var let 箭头函数与普通函数
May 4, 2019
箭头函数对比普通函数：
1. 箭头函数没有this，执行bind apply call 不能改变上下文
2. 没有arguments
3. 匿名函数，不能new 实例，没有prototype
4. 不能作为generator函数，不能调用yeild
...more
instanceOf
May 4, 2019
instanceOf 的判断是基于原型链，即比对右侧表达式是否在左侧表达式的原型链上。
...more

排序与树的遍历算法实现

Mar 2, 2019

// 冒泡
function sort1(arr){
  for ( let i=0, len=arr.length; i<len-1; i++ ){
    for ( let j=i+1; j<=len-1; j++ ){
      if ( arr[i] > arr[j] ){
        let tmp = arr[i];
        arr[i] = arr[j];
        arr[j] = tmp;
      }
    }
  }
  return arr;
}

...more

初次开发hybrid H5的坑及方案
Mar 2, 2019
hybrid h5
hybrid 翻译为杂交， hyrid h5 是指将web前端页面嵌入到原生APP( iOS和Android )中的运行的方案。
相对于原生开发，web前端的开发发展时间更长、从业人员更多、生态更为繁荣，而且开发效率也更高。
但web并不能直接调用原生API，而且运行内存、调度也差与原生，流畅性就显得不足。
基于以上原因，协调开发资源，将一些展示性、交互不多的页面让web开发，嵌入原生Webview中运行，就可以大大提高APP开发效率，利用团队开发资源。
...more
小程序探索
Dec 2, 2018
微信小程序
- 小程序需要申请账号，主体可以是企业，也可以是个人，里面有小程序的AppID，配置服务地址(比如localhost)
- 小程序开发工具，创建工程需要AppID
- 开发工具包含代码编辑器+调试器+客户端模拟器+版本管理器，基本做到了一站式开发
- 模拟器只有ios和 nexus，再加上原生组件，真机调试不可少
框架
整个框架像个大杂烩，整体设计并不统一，包含了OO、函数式和面向过程。或许，是为了不同技术栈背景的开发人员都能找到一套适合的开发模式。
- 样式层上来看，wxss像个css的子集，缺少了一些特性支持
- 模板wxml来看，Mustache语法，类似ng1.js的语法，数据与视图绑定，但数据流不是双向，不是响应式，而是类似React语法的setData，异步单项数据流
- 逻辑层js中，Page(Object)类似于Vue1的data设置，逻辑方法写法，同时也包含生命周期函数，可直接访问路由
- wxs和template可直接在wxml中扩展，分别对应了script和模板引擎，可在多个地方引入调用，虽然提供了组件，但开发并不是组件化
...more

hybrid h5

微信小程序

框架