小程序开发

1. 小程序看起来和 html + CSS + javascript 但是实际上深入后就会发现他们有很多的不同，这里面的坑就比较多了，比如小程序对 wxss 对标准的 css 支持多少没有明确文档说明，有时候出了问题，需要多方面考虑，就像我刚刚遇到一个问题 (mpvue 开发小程序) :class="{action:isAce, unaction: !isAce}"，在低版本测试中发现样式并没有出来，看到 dom 结构上 class=",unaction" 出现这样情况很无奈啊，但是 1.6 以上基础库就没有这问题。类似这样的坑还有好多，比如多次点击，事件跳转打开多个层
2. 小程序中项目开发中有很多问题和难点，需要多方面的考虑，像 mpvue 中午生命周期没有触发等

按照公司要求，需要一个生成短信截图的程序，但是有些傻眼，是不是安排错了，作为一个有梦想前端当然不能为这点事情而难住。

程序应用自己不会写，重新学习成本太高，只能用 html 来写了。

在网上找了资料，发现 canvas  有个一 canvas.toDataURL("image/png"); 可以转换成 base64 编码，哈哈，这不就一半完成了！！！最大的难题已经解决。

市场上的一些js库，如：html2canvas、dom-to-image，其本质也是通过toDataURL来转换成图片。

之后就是绘制 canvas 这里用到的一些简单的方法，然后用谷歌插件批量下载图片就搞定了！

在 css 样式上 -webkit-box-orient:vertical;  加上注释, 

如下：

/* autoprefixer: off */
 -webkit-box-orient: vertical; 
 /* autoprefixer: on */


		打包时必须使用这种方法打包，否则打包后  -webkit-box-orient: vertical 便会消失
	

		网上解决方案是这样的，但是我在我的项目中发现不起作用，
	


	解决方案



	optimize-css-assets-webpack-plugin这个插件的问题

注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),



								

最近学习了 angular 表单。

1. 表单绑定数据，目前有两种方法：

    1. [(ngModel)]="name";  // 双向绑定属性值

    2. formControlNam="name";  // 按名称FormControl将现有FormGroup的a 同步到表单控件元素。

例如：

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
 
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()"> <!-- 这里必须写 [formGroup]="form" 绑定下方 new FormGroup()  -->
      <div *ngIf="first.invalid"> Name is too short. </div>
 
      <input formControlName="first" placeholder="First name"> <!-- formControlName 绑定的是下方 new FormGroup() 中 first -->
      <input formControlName="last" placeholder="Last name">
 
      <button type="submit">Submit</button>
   </form>
   <button (click)="setValue()">Set preset value</button>
  `,
})
export class SimpleFormGroup {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),  last: new FormControl('Drew'), // 'Nancy' 是 值， validators.minLength(2) 是angular默认表单验证，也可以自定义验证
  });
 
  get first(): any { return this.form.get('first'); } // 必须写 这个方法，之后才可以获取到表单的值
 
  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'} // 获取 值
  }
 
  setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); } // 改变 first 与 last 表单的值
}

注：app.module.ts 引入必须 

否者 不可以用 formControlName

注：formControlName 与 ngModel 使用

在Angular v6中不支持将ngModel输入属性和ngModelChange事件与反应式表单指令一起使用，并且将在Angular v7中删除。

现已弃用：

content_copy<form [formGroup]="form"> <input formControlName="first" [(ngModel)]="value"> </form> <!-- 不要一起用了 -->

content_copythis.value = 'some value';

由于一些原因，这已被弃用。首先，开发人员发现这种模式令人困惑。看起来似乎ngModel正在使用实际的指令，但实际上它是ngModel在反应式表单指令上命名的输入/输出属性，它简单地近似（某些）其行为。具体来说，它允许获取/设置值和拦截值事件。然而，ngModel其他一些功能 - 比如延迟更新ngModelOptions或导出指令 - 根本不起作用，这可以理解地引起一些混乱。

此外，这种模式混合了模板驱动和反应形式策略，我们通常不建议这样做，因为它没有利用这两种策略的全部好处。在模板中设置值违反了反应形式背后的模板无关原则，而在类中添加FormControl/ FormGroup层则消除了在模板中定义表单的便利性。

类型

var a = 1; 隐式； var a:number = 1; 显示声明

var arr = []

类型：

基本类型：

联合类型：----- 选择

函数签名：

success:(a, b)=>void;

复合类型(Object Type):

var a:{x:xx, y:xx};

number, string, boolean, null, undefined, enum, any;

函数类型：

1. 参数
   • 函数签名
2. 返回值

function show(a:number, b:number)

外部变量

declare var $;

接口-interface

• 和 java 不同
• 接口：约定、限制；

真面向对象

class 写法, extend, 多继承

访问修饰符：

1. public 共有 任何人可以访问
2. private 私有 只有类内部可以访问
3. protected 受保护-友元 只有子类可以访问

泛型-- 别跟 “any” 搞混了 泛-- 宽泛

class Calc<T> {
    a:T;
    b:T;
    show (c  :T) {
        alert(a + b + c)
    }
} var obj = new Calc<number>();

obj.a = 12;
obj.b = 'abc'; // 报错 }

Array --- 泛型

interface Array<T> { 

    reverse() : T[]; 

    sort(compare?: a(a:T, b:T) =>number):T[];

    ...

}

// 泛型:类型当参数传入

数组完成写法：var arr:Array<number> = new Array<number>();

• Breakpoints 屏幕尺寸
• BreakpointObserver 观察器
• MediaMatcher 媒体查询匹配

import { Component, OnInit } from "@angular/core";
import {
  BreakpointObserver,
  BreakpointState,
  MediaMatcher,
  Breakpoints
} from "@angular/cdk/layout";
import { Observable } from "rxjs/Observable";
@Component({
  selector: "layout",
  templateUrl: "./layout.component.html",
  styleUrls: ["./layout.component.scss"]
})
export class LayoutComponent implements OnInit {
  isHandset: Observable<BreakpointState>;
  constructor(public breakpointObserver: BreakpointObserver, public media: MediaMatcher) {}

  ngOnInit() {
    // 手持设备
    let Handset = Breakpoints.Handset;
    // 手持landscape屏
    let HandsetLandscape = Breakpoints.HandsetLandscape;
    //手持portrait屏
    let HandsetPortrait = Breakpoints.HandsetPortrait;
    // 多媒体
    let Medium = Breakpoints.Medium;
    // 平板电脑
    let Tablet = Breakpoints.Tablet;
    // 平板电脑 Landscape
    let TabletLandscape = Breakpoints.TabletLandscape;
    // 平板电脑 Portrait
    let TabletPortrait = Breakpoints.TabletPortrait;
    // web
    let Web = Breakpoints.Web;
    // web landscape
    let WebLandscape = Breakpoints.WebLandscape;
    // web portrait
    let WebPortrait = Breakpoints.WebPortrait;
    // 大屏幕
    let Large = Breakpoints.Large;
    // 更大屏幕
    let XLarge = Breakpoints.XLarge;
    // 更小屏幕
    let XSmall = Breakpoints.XSmall;
    // 小屏幕
    let Small = Breakpoints.Small;

    // 是否满足多个条件
    this.breakpointObserver
      .observe([
        Handset,
        HandsetLandscape,
        Handset,
        Medium,
        Tablet,
        TabletLandscape,
        TabletPortrait,
        Web,
        WebLandscape,
        WebPortrait,
        Large,
        XLarge,
        Small,
        XSmall
      ])
      .subscribe(res => {
        console.log(res);
      });

      this.breakpointObserver
      .observe(Breakpoints.Handset)
        .subscribe((state: BreakpointState) => {
        if (state.matches) {
          console.log('手机设备尺寸内');
        } else {
          console.log('非手机设备尺寸内');
        }
      });

  }
}

今天看到 一个 PHP 疯狂的吐槽，JavaScript 面试人员 JS 写的不如 PHP 连 AMD 与 CMD 都不会，我心里默默的想了一下，自己脑海里只是有个浅薄的概念，吓的我赶紧查查资料。

参考资料

     AMD 规范

     CMD 规范

    SeaJS 与 RequestJS 差异可以参考 https://github.com/seajs/seajs/issues/277

微信网页样式经常跑偏一大部分是网页字体问题
;(function () {  
 if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  handleFontSize(); 
 } else { 
 if (document.addEventListener) { 
 document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); 
 } else if (document.attachEvent) {  
document.attachEvent("WeixinJSBridgeReady", handleFontSize); 
 document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  
}  }   function handleFontSize() { 
 // 设置网页字体为默认大小 
 WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0}); 
 // 重写设置网页字体大小的事件  
WeixinJSBridge.on('menu:setfont', function () {  WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});  });  }
 })()

								

在Web开发的时候经常会遇到浏览器不响应事件进入假死状态，甚至弹出“脚本运行时间过长“的提示框，如果出现这种情况说明你的脚本已经失控了，必须进行优化。
浏览器内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器至少实现三个常驻线程， GUI 渲染线程， 浏览器事件触发线程。

1. JavaScript 引擎是基于事件驱动的单线程执行的， JS 线程一直等待着任务队列中任务的到来然后加以处理， 浏览器无论再什么时候都只是一个 JS 线程在运行 JS 程序。
2. GUI 渲染线程负责渲染浏览器界面，当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行.
3. 事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

    了解了浏览器的内核处理方式就不难理解浏览器为什么会进入假死状态了，当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新，而后面的事件响应也被排在队列中得不到处理，从而造成了浏览器被锁定进入假死状态。另外JS脚本中进行了DOM操作，一旦JS调用结束就会马上进行一次GUI渲染，然后才开始执行下一个任务，所以JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器，如在IE6下一次插入大量的HTML。而如果真的弹出了“脚本运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。

       Nicholas C. Zakas认为不论什么脚本，在任何时间、任何浏览器上执行都不应该超过100毫秒，否则一定要将脚本分解成若干更小的代码段。那么我们该如何来做呢： 

        第一步，优化你的循环，循环体中包含太多的操作和循环的次数过多都会导致循环执行时间过长，并直接导致锁死浏览器。如果循环之后没有其他操作，每次循环只处理一个数值，而且不依赖于上一次循环的结果则可以对循环进行拆解，看下面的chunk的函数：

function chunk (array, process, context) { 
    setTimeout(function() {
         var item = array.shift()
         process.call(context, item) 
        if(array.length > 0) {
             setTimeout(arguments.callee, 100) 
        }
     }, 100) 
}

        chunk() 函数的用途就是将一个数组分成小块处理，它接受三个参数：要处理的数组，处理函数以及可选的上下文环境。每次函数都会将数组中第一个对象取出交给 process 函数处理，如果数组中还有对象没有被处理则启动下一个 timer，直到数组处理完。这样可保证脚本不会长时间占用处理机，使浏览器出一个高响应的流畅状态。

        借助JS强大的闭包机制任何循环都是可拆分的，下面的版本增加了 callback 机制，使可再循环处理完毕之后进行其他的操作。

function chunk ( array,  process,  cbfun ) { 
      var i  = 0, len = array.length  // 这里是要注意在执行过程中数组最好是不变的
      setTimeout(function () {  // 循环体要做的操作 
      process(array[i], i++)
         if( i < len ) { 
            setTimeout(farguments.callee, 100)
         }else { 
        cbfun()     // 循环结束之后要做的操作
         }
     }, 100} 
} 

    第二步， 优化你的函数，如果函数体内有太多不相干但又要在一起执行的操作则可以进行拆分，考虑下面的函数：

function dosomething () { 
    dosomething1() 
    dosomething2()
 }

    第三步，优化递归操作，函数递归虽然简单直接但是过深的递归操作不但影响性能而且稍不注意就会导致浏览器弹出脚本失控对话框，必须小心处理。

    看以下斐波那契数列的递归算法：

 function fibonacci (n) {
    return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2)
}

   fibonacci(40) 这条语句将重复调用自身331160280次,在浏览器中执行必然导致脚本失控，而采用下面的算法则只需要调用40次

fibonacci = function (n) {
    var memo = {0 : 0, 1 : 0}                            // 计算结果缓存
        var shell = function (n) {
            if ( typeof result != 'number' )         //  如果只没有被计算则进行计算
                memo[n] = shell (n - 1) + shell(n - 2) 
                return memo[n]
        }
    return shell(n)
}

这项技术被称为memoization,他的原理很简单就是同样的结果你没必要计算两次。另一种消除递归的办法就是利用迭代，递归和迭代经常会被作为互相弥补的方法。

第四步，减少DOM操作，DOM操作的代价是相当昂贵的，大多数DOM操作都会触发浏览器的回流(reflow)操作。例如添加删除节点，修改元素样式，获取需要经过计算的元素样式等。我们要做的就是尽量少的触发回流操作。

el.style.width = '300px' el.style.height = '300px'
el.style.backgroundColor = 'red'

上面的操作会触发浏览器的三次回流操作，再看下面的方式：

el.className = 'newStyle'

通过设置改元素的className一次设置多个样式属性，将样式写再CSS文件中，只触发一次回流，达到了同样是效果而且效率更高。因为浏览器最擅长的就是根据class设置样式。

还有很多可以减少DOM操作的方法，在此就不多说了，但是一个基本的原则就是让浏览器去做它自己擅长的事情，例如通过class来改变元素的属性。

weex 是阿里开发的一款 将 JavaScript 集成与 android 的一块框架（初步个人认为），但是里面的坑却又很多，官网第一板块开发环境搭建就有一个坑（报错 index 文件找不到，之后发现 "

weex-vue-render" 这个包的问题，将 weex-vue-render 包的版本改成 "^0.10.4"，否则跑不通）；
   我们用的是 集成到 android 开发项目里， android 集成也有一个坑就是 weex 版本的问题，低版本不支持 vue 语法注意，因为根据 官方文档生成项目是 src 文件下面 .vue 结尾的文件，可以新建 .we 文件写 weex 语法，【不支持】 ，
这里有几个坑就是 插件包，如何集成到 android 项目下 使用 weex-toolkit 工具可以生成的 js 文件 放到 android 项目下得 main 文件下就OK了！

一个很 Low 的程序员自述，因为机缘巧合的我无意间，接触到了计算机，这里我要感谢我的哥哥，也是我的启蒙老师。

首先作为一个程序员，要学会去总结，已经很长时间没有去停下来思考了，感觉有很多不足，到现在我还不了解 JavaScript 的底层原理，所以我还没有入门，在这里我希望可以记录下来工作与学习中的点点滴滴。