亦舒的海角

  想象一下viewportlayoutviewport是一张大的不能改变大小和角度的图片 现在你有个更小的框来观看这张大图片
这个框被不透明的材料包围 因而你只能看到大图片的一部分 你通过这个框子看到的大图片的那部分就叫做虚拟视口（viewportvisualviewport）

你拿着这个框拿着站的离大图原点（用户的缩小页面功能）以一次性看到这个大图片
你站的离的近一点（用户的放大页面功能）以看到一部分
你能改变这个框框的远近 但是这张大图片的大小和形状都不会改变

<meta name="viewport" content="width=320">

<meta name="viewport" content="width=320">

产品：咦？这块不是那样儿的吗？怎么是这样的？

开发：？ 前两天不是专门讨论过这个问题吗，这个就是这样儿的！

产品：哦？是吗？ 但是这样儿看起来好诡异啊！就应该是那样儿的 改一下吧

开发：...当初接口设计的就是这样儿的，怎么不早说？这都要上线啦！😩

产品："之前流程没走通 不太清楚这块儿的逻辑，现在改一下吧" 然后就走了

开发：...

产品：昂昂，你这儿不行啊 时间太长了 能不能缩短点

开发：我按工时算的 每一项 都列出来了 不会差太多

产品：这不行啊 因为我们要XX提审 测试需要XX天 所以你必须 XX天提测

开发：这等于 XX 天的工期 你给我压到 XX／2 天

产品：嘿嘿😉

开发：...

开发OS："赶紧开发 为了给测试腾时间😂😭🙈，尼萌给开发时间充足了 问题自然就会少很多好吗 测试好像是最重要的噻"

开发：设计小哥，对比原型 是不是缺了一张图

设计：？

开发：搜索中状态

设计：沉默

产品：哦 那个不就是在未搜索的状态基础上把导航去掉吗？还用出图吗？

一分钟后～～

设计：突然扔出来一张图  @开发:好了

开发：瞅了一眼 @设计：嗯 ？不是这样儿的吧

设计：？

开发：把产品的话 @设计：“哦 那个不就是在未搜索的状态基础上把导航去掉吗？还用出图吗？”

设计：沉默

两分钟后～～

设计：扔出来一张图 呐 上传了

开发：嗯 现在才是对的

设计：嗯

上午～

产品：今天周五 需要把UI提的问题都改完

开发：ok

设计：ok

下午～

开发：什么时候有空，当面改

设计：嗯

下午四点～

开发：什么时候有空

设计：现在过去

开发：嗯

改了大概有两个之后 设计被叫走

又过了一个小时～

开发：快下班了 啥时候改尼

设计：今天比较忙 现在可以开始了

开发： 嗯？我看了一下 你拿到的不是最新版吧 好些问题现在不能复现了

设计：哦

一个小时之后

开发：改完了 我下班了啊 今天有点事儿

设计：嗯 好的 下班吧

开发 走了

两个小时后 忙完 开发都到家了～～

产品：@开发：在哪里呢 啥时候回来

开发：？我到家了啊

产品：你咋走了？设计小哥还在等你呢

开发：？我走的时候跟他说了啊 他知道啊

产品：我不是说了今天要改完吗 设计review了 还有一点问题

开发：... 那我明天去加班吧

第二天，到公司之后

开发：在群里@设计@产品 ：这个只有截图看不出来哪有问题噻

设计：沉默

产品：沉默

开发：...

X
wx.request({
    url: 'http://api.example.com',
    success: function (res) {
        if (res.statusCode === 200) {
            // success
        } else {
            // server failure
        }
    }
})
像这样使用 === 就错了 不要判断类型
使用 ==即可

 wx.openBluetoothAdapter()
} else {
  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}

scaleToFill{

background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

}

aspectFit{

background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

}

aspectFill{

background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

}

<navigator class="navigator" redirect  url="../login/index" >登录页</navigator>

.media {

display: flex;

justify-content:center;
align-items:center;
}

.media .content {

flex: 1;

}

.media {

display: flex;

justify-content:center;
align-items:center;
}

.media .content {

flex: 1;

}

wxml
    <view>这是个按钮</view>
    <view class="marginB"></view>

    css

    .marginB{
        	height: 0rpx;
        	font-size: 0rpx;
        }

问题代码一

WXML

<view  bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="editAddress" >

JS

editAddress: function (event) {  
   let that = this;  
   //触摸时间距离页面打开的毫秒数  
   var touchTime = that.data.touch_end - that.data.touch_start;  
   console.log(touchTime);  
   //如果按下时间大于350为长按  
   if (touchTime > 350) {

    //TODO..

   } else {  

    //TODO..

   }  
 },  
 //按下事件开始  
 mytouchstart: function (e) {  
   let that = this;  
   that.setData({  
     touch_start: e.timeStamp  
   })  
   console.log(e.timeStamp + '- touch-start')  
 },  
 //按下事件结束  
 mytouchend: function (e) {  
   let that = this;  
   that.setData({  
     touch_end: e.timeStamp  
   })  
   console.log(e.timeStamp + '- touch-end')  
 }

问题代码二

wxml

<view  bindlongtap="longPress"   bindtap="tapFun" style="width: 100%;height:100%" mode="scaleToFill" src="{{img_url}}"></view>

js

longPress(e){
  var that = this;
  console.log('你点击了长按时间',e)
  // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
  wx.getSetting({
      success(res) {
        console.log('222222222222222222')
          if (!res['scope.writePhotosAlbum']) {
              wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success() {
                   //  调起操作菜单
                   console.log('33333333333333333333')
                   console.log('wx.showActionSheet()',wx.showActionSheet)
                    wx.showActionSheet({
                         itemList: ['保存到本地'],
                         success: function(res) {
                           console.log('操作菜单弹出成功','第'+res.tapIndex+'个操作菜单弹出成功')
                           // 下载文件资源到本地。客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
                         if(res.tapIndex ==0){
                          console.log('wx.downloadFile',wx.downloadFile)
                           wx.downloadFile({
                           url: that.data.img_url, //仅为示例，并非真实的资源
                           success: function(res) {
                             wx.playVoice({
                               filePath: res.tempFilePath
                             });
                             console.log('wx.playVoice()',wx.playVoice)
                             console.log('将图片先保存到本地--res.tempFilePath',res.tempFilePath);
                                     // 用户已经同意小程序使用功能，后续调用 wx.startRecord 接口不会弹窗询问
                                     console.log('wx.saveImageToPhotosAlbum()',wx.saveImageToPhotosAlbum)
                                     wx.saveImageToPhotosAlbum({
                                       filePath:res.tempFilePath,
                                       success(res) {
                                         wx.showToast({
                                         title: '保存成功',
                                         icon: 'success'
                                       });
                                       setTimeout(function(){
                                         wx.hideToast();
                                       },3000)
                                       },
                                       fail(res){
                                         wx.showToast({
                                         title: '保存失败',
                                         icon: 'success'
                                       });
                                       setTimeout(function(){
                                         wx.hideToast();
                                       },3000)
                                       }
                                   })

                           }
                         })
                         }
                         },
                         fail: function(res) {
                           console.log('操作菜单弹出失败',res.tapIndex)
                         }
               })


                  }
              })
          }
      }
  })
},


tapFun: function(event) {
        that.setData({
        qrShow:false
        })
}


很显然 这也是有问题的

因为事件机制。总会触发 tap事件 表现形式比 问题一还难以接受

WXml

 <image  wx:if="{{img_url !=''}}"  bindlongtap="editAddress1"   bindtouchstart="mytouchstart" bindtouchend="mytouchend"  style="width: 100%;height:100%" mode="scaleToFill" src="{{img_url}}"></image>


js

//按下事件开始
mytouchstart:function(e){
  let that = this;
  that.setData({
    touch_start: e.timeStamp
  })
  console.log(e.timeStamp + '- touch-start')
},

//按下事件结束
mytouchend:function(e){
  let that = this;
  that.setData({
    touch_end: e.timeStamp
  })
  console.log(e.timeStamp + '- touch-end')
  that.editAddress(e);
},

// 判断是长按操作还是短按操作
editAddress: function(event) {
      var that = this;
      if(that.data.touch_end - that.data.touch_start < 350){
        that.setData({
        qrShow:false
        })
      }


},

editAddress1(e){}   // 同问题二  longPress（）

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;

var content='<strong>content</strong>';

React.render(
    <div>{content}</div>,
    document.body
);

<stonrg>content</strong>

var content='<strong>content</strong>';    

React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);

React.render(
    <div dd='xxx'>content</div>,
    document.body
);

React.render(
    <div data-dd='xxx' aria-dd='xxx'>content</div>,
    document.body
);

<script src="js/require.js" defer async='true'></script>
async   表明这个文件需要异步加载
在require.js的基础上加载自己的 main.js
<script src="require.js" data-main="js/main"></script>
ata-main:指定程序的主模块，这个人间会第一个被require.js加载，由于require.js默认的文件后缀名是js，所以可以把main.js 简写成main

//main.js

require(['moduleA', 'moduleB', 'moduleC'],   function (moduleA, moduleB, moduleC){
　　　　// some code here
　　})``

　　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});
　　
　　另一种形式
　　
　　　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});
　　
　　再或者
　　　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

//math.js 定义了一个math模块
define(function(){
var add = function(){
   return x+y;
};

return {
 add:add
}
})

加载方法：

// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});
　　
　　如果这个模块还依赖其他模块，那么那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
　　　define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});
　　当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

eg：加载非AMD规范模块 underscore，backbone
　　require.config({
　　　　shim: {

　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});
　　
　　shim属性：专门用来配置不兼容的模块。具体来说，每个模块要定义
　　（1）exports值（输出的变量名），表明这个模块外部调用时的名称；
　　（2）deps数组，表明该模块的依赖性。
　　
　　eg：
　　   jQuery的插件可以这样定义：
　　　　shim: {
　　　　'jquery.scroll': {
　　　　　　deps: ['jquery'],
　　　　　　exports: 'jQuery.fn.scroll'
　　　　}
　　}

define([
　　　　'text!review.txt',
　　　　'image!cat.jpg'
　　　　],

　　　　function(review,cat){
　　　　　　console.log(review);
　　　　　　document.body.appendChild(cat);
　　　　}
　　);

function m1(){}
function m2(){}

var moudle = new Object({
 _count = 0;
 m1:function(){},
 m2:function(){}
})

var moudle1 = (function(){
var count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};

return {
         m1:m1,
         m2:m2
       }
})();

var moudle1 = (function(mod){
   mod.m3 = function(){
   //...
   }
   return mod;
  })(moudle1);

var moudle1 = (function(mod){
  mod.m3 = function(){
  //...
  }
  return mod;
 })(window.moudle1 || {});

var moudle1 = (function($,YAHOO){
      //...
  })(jQuery, YAHOO);

eg:
var math = require('math');
  调用math模块提供的方法：
  math.add(2,3); // 5

var math = require('math');
math.add(2,3); // 5

require([module], callback)
require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

function createObject(name,age){
var obj = new Object();
obj.name= name;
obj.age = age;
obj.run = function(){
 return this.name + this.age + '运行中'
}
return obj;
}

var box1 = createObject（‘lee’,100）
var box2 = createObject（‘jack’,200）

function Box(name,age){
 this.name= name;
 this.age = age;
 this.run = function(){
  return this.name + this.age + '运行中'
 }
}
var box3 = new Box（‘lee’,100）
var box4 = new Box（‘jack’,200）

var  o = new Object();
Box.call(o,'Lee',100)

function Box(){}

Box.prototypr.name 原型属性
Box.prototypr.run=function(){} 原型方法

var box1 = new Box()
box1.constructor 指向构造函数
box1._proto_指向原型对象

Box.prototype.isPrototypeOf(box1)

var datamodel = {    
    table : [],    
    tree : {}    
};    

(function(dm){    
    for(var i = 0; i < dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
           drawCell(i, j);    
       }    
    }    

    //build dm.tree      
})(datamodel);  

创建了一个匿名的函数并立即执行它，由于外部无法引用它内部的变量，因此在执行之后很快就会被释放 不会污染全局对象

var person = function(){    
    //变量作用域为函数内部，外部无法访问    
    var name = "default";       

    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    

print(person.name);//直接访问，结果为undefined    
print(person.getName());    
person.setName("abruzzi");    
print(person.getName());   

let arrayLike = {
'0':'a',
'1':'b',
'2':'c',
'3':'d'
}

var arr1 = [].slice.call(arrayLike)

let arr2 = Array.form(arrayLike)

// arguments对象
function foo() {
  var args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]

Array.from还可以接受第二个参数，作用类似于数组的map方法

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.of()
Array.of方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

['a', 'b', 'c'].fill(7)

[1, 2, 3].includes(2);     // true

function foo() {}
foo.name // "foo"

var o = {
method:function(){}
} ==
var o = {
 method(){}
}

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

不同之处只有两个：一是+0不等于-0，二是NaN等于自身

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2; 如果值更改 则拷贝之后的值也是变化的
obj2.a.b // 2

如果该参数不是对象，则会先转成对象，然后返回。

typeof Object.assign(2) // "object"

Object.assign可以用来处理数组，但是会把数组视为对象。

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

Object.assign(someClass.prototype,{
someMethod(){
...
},
antherMethod(){
...
}
})

===
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

function clone(origin){
 return Object.assign({},origin)
}

function clone(origin) {
  let originProto = Object.getPrototypeOf(origin);
  return Object.assign(Object.create(originProto), origin);
}

Object.getOwnPropertyDescriptor 获取该属性的描述对象
let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

var obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

// es6的写法
var obj = {
  method: function() { ... }
};
obj.__proto__ = someOtherObj;

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40
上面代码将proto对象设为obj对象的原型，所以从obj对象可以读取proto对象的属性。

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

var set = new Set([1, 2, 3, 4, 4]);
[...set]

[...new Set(array)]
var set = new Set([1,1,2,2,3,4,5,5,6])
[...set]

let map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },

  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

var proxy = new Proxy(target, handler);


var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

var promise = new Promise(function(resolve,reject){

if('异步操作成功'){
resolve(value)
}else{
reject(error)
}
})


promise.then(function(value){
成功
},function(error){
失败
})

function* gen(x){
 try{
 var y = yield x +2;
 }catch(e){
 console.log(e)
 }
 return y
 }

var fetch = require('node-fetch');

 function* gen(){
 var url = 'http://api.github.com/users/github';
 var result = yield fetch (url);
 console.log('ds')
 }

 f(x + 5)
// 传名调用时，等同于
f(x + 5)

 f(x + 5)
// 传值调用时，等同于
f(6)

var x = 1;
function f(m){
 return m*2;
}

f(x+5)

等同于

var thunk = function(){
  return x+5
}

function (thunk){
return thunk()*2
}

var asyncReadFile = async function () {
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了');
  });
}

async function main() {
  try {
    var val1 = await firstStep();
    var val2 = await secondStep(val1);
    var val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

class Point{

constructor(x,y){

this.x = x;
this.y = y

}


toString(){
 return  '(' + this.x + ', ' + this.y + ')';
}
}

const MyClass = class Me {
  getClassName() {
    return Me.name;
  }
};

import {stat，exut，readFile} from 'fs'

function  f(){}
 export {f}

import {lastName as surname} from './profile'
import命令具有提升效果

导出
export default

引入
import * as circle from './circle'; 模块的整体加载

export default function (){
 console.log('foo')
 }

import customName from  ..

 export default function ee (){
 console.log('foo')
}
==

function foo (){
console.log('ee')
}

export default foo;

 // 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

import { default as xxx } from 'modules';

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

export {add as default};

// export default add;

<script type="module" src="foo.js"></script>