Hopepdm's Blog

03-25离开讯飞有感

Sun, 19 Apr 2026 00:01:00 +0000

离开其实有点突然，但是也在预期之内。今年是ai大爆发的一年，刚过完年，claude code等agent工具强势出现，给我的工作带来了很大的便利。也给整个行业带来了恐慌。老板从中看到了巨大的降本增效机会，大力推进超级员工模式。

而我也在顺势而为积极思考，拥抱ai。但是在公司始终处理的是一些边边角角不痛不痒的业务。乱七八糟的技术栈和混乱的业务流程。

元旦后，被安排去支撑智慧医疗，又开始接触uniapp，qiankun等技术。其实这些技术都是应用层业务测的一些解决方案。但是每次都是被要求一会去vue的项目，一会去react的项目，一会去去electron或者react-native的项目，想想真的蛮崩溃。

也幸好随着工作经验的积累也不再抗拒新技术的从0-1过程。而且越来越能更好把控项目进度，这算是频繁切换技术栈的一个好处吧。

记得是hrbp在飞书上找我的时候，我立刻就领会到我可能面临的遭遇。结果如约而至，被协商一致解除劳务合同。n + 1的赔偿，年假转为薪资。hrbp还帮忙办理失业金的申请，让我感觉还行。

离开前一天和公司其他同时聊天说明了自身遭遇，聊了许多。事后想想，n 应该可以争取去年工资+奖金 / 12 作为赔偿。这样能够争取更多。我是一个比较随意的人，所以没有太在意这个。现在想想，能争取的不争取，纯属sb了是，还是经验不足。因此有了这篇文章来记录下。工作要留痕，内容要按照STAR（场景-任务-行动-结果）原则记录并汇报，将工作内容数据化，可量化。积极向上反馈，工作等成果你不说，上面就不会看见，不要傻傻的只知道埋头干活呐！！！

还有在公司5年了，交还电脑后，所有资料文件项目基本都无了。我哭死，现在一想到那个破电脑，我就觉得可笑，公司最该降本增效的就是换电脑。打工人要在职场中好好保护自己的产出成果！！！

现在已经04-20了，算算日子，快一个月了。给我的感受是这次的就业形势非常悲观，面试机会几乎为零。好点的公司还得认真准备面试，才能找到自己的位置。而且我现在这个年纪，已经没有那么年轻了。以前常常调侃35岁魔咒，等真轮到自己，只能接受现实笑嘻嘻。这里非常感谢我的宝宝，始终如一的陪伴我支持我，我很爱她^_^。

周一晚上会有一场面试，积极准备中。先写到这里吧～

ps: 好久没更新博客了，今天更新遇到点bug这里记录下

这通常说明你现在很可能“开了两套发布机制”：

一套是你仓库里的自定义 Actions workflow，文件是 .github/workflows/jekyll-docker.yml 另一套是仓库 Settings -> Pages 里仍然配置成了 Deploy from a branch，于是 GitHub Pages 自己又跑了一次内建部署如何屏蔽：

打开 GitHub 仓库 Settings -> Pages 找到 Build and deployment 把 Source 切到 GitHub Actions 不要再用 Deploy from a branch 这样保留你自己的 workflow 后，pages-build-deployment 一般就不会再作为那种“分支发布”的内建流程重复触发了。

刚开始部署更新后，页面打不开，发现是需要重新解析域名

js设计模式

Thu, 22 Mar 2018 12:00:00 +0000

//单例模式
场景：一个单一对象，比如：弹窗，点击多少次只创建一次
class CreateUser {
    constructor(name) {
        this.name = name;
        this.getName();
    }
    getName() {
        return this.name;
    }
}
//代理实现单例
var ProxyMode = (function(){
    var instance = null;
    return function(name) {
        if(!instance) {
            instance = new CreateUser(name);
        }
        return instance
    }
})() //由于闭包，导致变量instance始终存在于内存之中
var a = new ProxyMode('aaa');
var b = new ProxyMode('bbb');
console.log(a === b);

//策略模式
//我认为比较简单的，策略类：可变，环境类：调用策略类的方法
var levelObj = {
    'a': function(b){
        return b * 1
    },
    'b': function(b){
        return b * 2
    },
    'c': function(b){
        return b * 3
    }
}
var calculateBouns = function(level, b){
    return levelObj[level](b);
}
console.log(calculateBouns('a',1)) //1

//代理模式
//适用场景：图片懒加载的方式，先通过loading图占位，然后异步加载图片至img标签
var imgFunc = (function() {
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
        setSrc: function(src) {
            imgNode.src = src;
        }
    }
})();
var proxyImage = (function() {
    var img = new Image();
    img.onload = function() {
        imgFunc.setSrc(this.src);
    }
    return {
        setSrc: function(src) {
            imgFunc.setSrc('./loading,gif');
            img.src = src;
        }
    }
})();
proxyImage.setSrc('./pic.png');


//中介者模式
//中介者模式适用的场景：例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。
var goods = {   //手机库存
    'red|32G': 3,
    'red|64G': 1,
    'blue|32G': 7,
    'blue|32G': 6,
};
//中介者
var mediator = (function() {
    var colorSelect = document.getElementById('colorSelect');
    var memorySelect = document.getElementById('memorySelect');
    var numSelect = document.getElementById('numSelect');
    return {
        changed: function(obj) {
            switch(obj){
                case colorSelect:
                    //TODO
                    break;
                case memorySelect:
                    //TODO
                    break;
                case numSelect:
                    //TODO
                    break;
            }
        }
    }
})();
colorSelect.onchange = function() {
    mediator.changed(this);
};
memorySelect.onchange = function() {
    mediator.changed(this);
};
numSelect.onchange = function() {
    mediator.changed(this);
};


//装饰者模式
//在不改变对象自身基础之上，在程序运行期间给对象动态地添加方法
Function.prototype.before = function(beforefn) {
    var self = this;    //保存原函数引用
    return function(){  //返回包含了原函数和新函数的 '代理函数'
        beforefn.apply(this, arguments);    //执行新函数，修正this
        return self.apply(this,arguments);  //执行原函数
    }
}
Function.prototype.after = function(afterfn) {
    var self = this;
    return function(){
        var ret = self.apply(this,arguments);
        afterfn.apply(this, arguments);
        return ret;
    }
}
var func = function() {
    console.log('2');
}
//func1和func3为挂载函数
var func1 = function() {
    console.log('1');
}
var func3 = function() {
    console.log('3');
}
func = func.before(func1).after(func3);
func();

私有变量在对象内部使用’var’关键字来声明，而且它只能被私有函数和特权方法访问。私有函数在对象的构造函数里声明（或者是通过var functionName=function(){…}来定义），它能被特权函数调用（包括对象的构造函数）和私有函数调用。特权方法通过this.methodName=function(){…}来声明而且可能被对象外部的代码调用。它可以使用：this.特权函数() 方式来调用特权函数，使用：私有函数()方式来调用私有函数。公共属性通过this.variableName来定义而且在对象外部是可以读写的。不能被私有函数所调用。公共方法通过ClassName.prototype.methodName=function(){…}来定义而且可以从对象外部来调用。原型属性通过ClassName.prototype.propertyName=someValue来定义。静态属性通过ClassName.propertyName=someValue来定义。

//构造函数  
  
function myConstructor(message){  
        //公有属性  
    this.myMessage = message;  
        //私有属性  
    var separator = '_';  
    var myOwner = this;  
    //构造函数内私有方法  
    function alertMessage(){  
        alert(myOwner.myMessage);  
    }  
    alertMessage();  
    //特权方法 可以访问构造函数里的私有变量  
    this.appendToMessage = function(string){  
        this.myMessage += separator + string;  
        alertMessage();  
    }  
  }  
  
//公有方法  
  
myConstructor.prototype.clearMessage = function(str){  
   this.myMessage = "";  
}  
  
//静态成员  
myConstructor.name = "jeff";  
  
//静态方法  
myConstructor.alertName = function (){  
  alert(this.name)  
}  
  
var obj = new myConstructor("hello !");  
obj.appendToMessage("kate");  

链接：https://juejin.im/post/59df4f74f265da430f311909 来源：掘金

react笔记

Tue, 20 Mar 2018 12:00:00 +0000

参考git上react项目react-cnode

项目使用create-react-app搭建，搭建过程比较简单，在全局create-react-app环境下，执行以下指令

create-react-app demo
npm i //安装项目依赖
npm run-script start //看到默认demo首页

//此时项目目录主要是
public
src
package.json
readme.md

npm run eject //暴露配置文件config/script，就能在webpackage中配置相关的loader等等。

example：less(sass)

安装less-loader和less

npm install less-loader less --save-dev
(npm install sass-loader node-sass --save-dev)

修改webpack配置

webpack.config.dev.js和webpack.config-prod.js

改动1：

/\.css$/改为/\.(css|less)$/
exclude: [
  /\.html$/,
  /\.(js|jsx)$/,
  /\.(css|less)$/,
  /\.json$/,
  /\.bmp$/,
  /\.gif$/,
  /\.jpe?g$/,
  /\.png$/,
],

改动2：

test: /\.(css|less)$/, /////////////////////////////////
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ],
},

react语法是jsx，项目路口文件一般是在src/indenx.js或者app.js。 src目录一般分为如下及部分：

api：url配置 assets：静态资源图片和全局css等 components：组建header、footer、sidebar、topics-list router：管理路由 store：管理状态 utils：方法管理 views：视图

需要重点学习的就是router和store了。

promise用法详解

Mon, 19 Mar 2018 12:00:00 +0000

es6原生提供了promise对象，用于实现异步回调，以同步的写法实现异步过程，避免回调地狱。

特点：1、对象的状态不受外界的影响。Promise对象代表一个异步操作，有三种状态：pending、fulfilled、rejected。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。Promise-承若，的名字也因此而来。2、一旦状态改编，就不会再变，任何时候都可以得到这个结果。promise对象状态的改变只有两种可能：从pending到resolved和从pending到rejected。

优缺点：优点是避免回调地狱；缺点是promise无法取消，一旦新建就会立即执行，无法中途取消，内部抛出的错误不会反应到外部，当处于pending状态时无法得知目前进展到哪一阶段。

用法：

var promise = new Promise(function(resolve, reject) {
    //异步处理
    //处理结束后、调用resolve或reject
})

//实例
var myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        console.log('hhhh');
		reject("failed!"); //代码正常执行！
    }, 250);
});
 
myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型，这里只是举个例子
    console.log("Yay! " + successMessage);
}).catch(function(error){
	console.log(error);
});
//'hhhh'
//'failed'


//Promise构造函数挂载在window上，有resolve和reject方法
var p = Promise.resolve('Hello');
 
p.then(function (s){
  console.log(s)
});
// Hello

注：performance对象用于精度度量、控制、增强浏览器的性能表现。

threejs效果tips

Sun, 18 Mar 2018 12:00:00 +0000

FBX模型效果

var manager = new THREE.LoadingManager();
manager.crossOrigin = '';
manager.onProgress = function(item, loaded, total) {
    console.log(item, loaded, total);
};

texture = new THREE.TextureLoader().load( "https://security-press.com/fbx/model/DigestiveSystem_2k.png",function(tx){
    tx.anisotropy = 0;
    tx.magFilter = THREE.NearestFilter;
    tx.minFilter = THREE.LinearFilter;
} );

//var material = new THREE.MeshBasicMaterial();
//material.transparent =true
var material = new THREE.MeshStandardMaterial({ map: texture, roughness: 0.25, metalness:0.9,fog:true,});
//var material=new THREE.MeshLambertMaterial({ map: texture});

var loader = new THREE.FBXLoader(manager);
loader.crossOrigin = '';
loader.load('https://security-press.com/fbx/model/FBXHighPoly.fbx', function(object) {
//	object.materials[0].shading = THREE.SmoothShading;
//		object.computeVertexNormals();

//重点！！！！！！！！！！！！！！！！！！！！traverse是three模型对象得一个方法，可以遍历属性
	object.traverse(function(child) {
      if (child instanceof THREE.Mesh) {
		  child.material = material;
//        child.material.map = texture;
      }
    });


	object1 = object;
	object.mixer = new THREE.AnimationMixer( object );
    mixers.push( object.mixer );

	var box3 = new THREE.Box3().setFromObject(object);
	var shift = box3.getCenter();
    var action = object.mixer.clipAction( object.animations[ 0 ] );
    action.play();
	object.position.sub(shift);
	console.log(box3.getSize());
	var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians
	var dist = box3.getSize().y / ( 2 * Math.tan( camera.fov * Math.PI / 360 ) );
	var vheight = 2 * Math.tan( vFOV / 2 ) * dist; // visible height
	camera.position.set( 0, 0, dist );
	scene.add(object);

	generateMarker();

  }, onProgress, onError);

//

light = new THREE.HemisphereLight(0xc7cbff, 0x4c3333, 1.0);
  light.position.set(0, 50, 50);
//  light.position.set(1, 1, 1);
  scene.add(light);
  //light = new THREE.DirectionalLight(0xffffff, 0.7);
//  light.position.set(0, 0, 0);
// scene.add(light);

	directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
  directionalLight.position.setScalar(10);
  scene.add(directionalLight);

beforcompile shader 一段扭曲模型的shader

var material = new THREE.MeshNormalMaterial();

material.onBeforeCompile = function ( shader ) {

    // console.log( shader )

    shader.uniforms.time = { value: 0 };

    shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
    shader.vertexShader = shader.vertexShader.replace(
        '#include <begin_vertex>',
        [
            'float theta = sin( time + position.y ) / 2.0;',
            'float c = cos( theta );',
            'float s = sin( theta );',
            'mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );',
            'vec3 transformed = vec3( position ) * m;',
            'vNormal = vNormal * m;'
        ].join( '\n' )
    );

    materialShader = shader;

};

canvas图片编码与保存

Mon, 05 Mar 2018 12:00:00 +0000

canvas有个方法toDataURL(),可以将当前canvas转为base64编码的字符串，那么怎么讲此编码保存为图片并指定存储位置呢？

首先获取base64编码，可能有时候你使用toDataURL()方法得到的编码打开时是空白的，为什么？你需要做一下设置：

//webgl
var context = canvas.getContext('experimental-webgl',{preserveDrawingBuffer: true});

//three.js
new THREE.WebGLRenderer({
    preserverDrawingBuffer: true
})

设置之后就能如愿获得当前画布的base64了，然后将base64保存为本地图片，我找网上的有两种方法

一：canvas2image.js封装了对应的方法，很简单能保存到本地。

二：因为我的要保存到服务器，所以一的方法不适合我，于是我就找了找node.js的原生方法，通过fs模块对base64进行存储，代码如下：

var fs = require('fs');
var str = 'iVBORw0KGgoAAAANSUhEUgAAABkAAAASCAYAAACuLnWgAAABm0lEQVRIS+3Sz0/TcBjH8feXtlvrLEMzfriUTRDm4hImYnQxxIORyI0D4a/yj/CkZ0hI5olwIWoylRCI8SA/IsFlg3ZQiivdWjMSrmym82L4np/v55V8nkfMzS8E/OMnrpG/abjjul5O52lYp5w6DinDYO/I4kWhwOs3b9t6HSEzUzk2P38g6FHxAUnyQNHoi8X5VrW7gzzP3mWxuEzNcfG8BpLUgyzLCATpBw+7g6iRgK1SiezkBKZpEfg+SjNgdGyMdCrFx43vV0Jt67oZFUwXHlG2jtn+sY1pmmiahuvWeTr1hPGREd4tvQ+H5DNJPn3dIJm8w95umf7BPhz7nIHEDY6PbGZnX7G8shYOMRIq+XyO4lKRwaEhdn6WiUQUqpUKUVVl2DCwm1I4pLXkeNRD13XWv2whyfLFTpxalXpTkJnI0fDVcEjrdyqhs7K6ihJT0RUNKRZFuA2833Xu3c9QOxfhkVaCXSsT4BPvvYVpHRIRKm7zjNv96e6c8GWKe1Lh1/4BhydnPC48axt+OdD2hDtOumLw/0H+AODhpV/UDNO1AAAAAElFTkSuQmCC';
var strs = new Buffer(str, 'base64');
fs.writeFileSync('demo.png',strs);

完美。

另外我在学习canvas2image的时候，发现本地保存base64，只需要将var str=’data:image/png;base64,···省略编码···’替换为’data:image/octet-stream;base64,···省略编码···’之后，documnent.location.href=str,则会弹出下载窗口。

所以，有必要解释一下Buffer对象和octet-stream

阮一峰对Buffer解释的很清楚

关于octet-stream只知道是二进制流，暂时没找到过多的说明。

github绑定顶级域名

Tue, 27 Feb 2018 12:00:00 +0000

用过gitpage的都知道，默认域名是{username}.github.io;那么我们怎么将该域名与其他域名绑定，比如通过www.username.com来访问咧。

很简单，首先需要在万维网（阿里云）上购买你喜欢的域名，一般是顶级域名，比如：username.com；

然后打开cmd，输入：ping username.github.io，找到你gitpage的ip地址：比如：111.111.111.111；

登录阿里云找到域名与网站，进入域名模块，对域名进行解析，有两个地方设置，1是添加记录类型为A，主机记录为@，记录值为gitpage的ip，2是记录类型为CNAME,主机记录为www，记录值为username.github.io。

上面设置完了之后，在gitpage项目跟目录下创建文件CNAME(必须大写)，里面的内容为你购买的顶级域名：username.com；

等几分钟，搞定了。

简介glsl

Wed, 31 Jan 2018 12:00:00 +0000

glsl是一门类C语言，有着与C接近的语法特征。作为webgl的重要组成部分，glsl有着极高的性能优势和操作性。

#ifdef GL_ES
precision mediump float;
#endif

void main() {
    vec4 red() {
        return vec4(1.0, 0.0, 0.0, 1.0);
    }
    gl_FragColor = red();
}

glsl有许多内建变量和数据类型 gl_FragColor: vec4:四分量浮点向量， vec3:三分量浮点向量， vec2:二分量浮点向量

int float bool

预定义程序宏指令，它是预编译的一部分，所有的宏都以#开始。

#define //定义全局变量和基础条件运算（#ifdef、#endif）

//GLSL语言并不保证变量自动转换。所以，所有的number类型都以浮点形式（.00）表示，否则可能编译出错。

由于显卡的架构，所有的线程输入值必须是统一的（uniform），而且必须为只读。他们的数据类型通常是：float、vec2、vec3、vec4、mat2、mat3、mat4、sampler2D、samplerCube。uniform值的数据类型前后需一致，而且在shader的开头设定精度后就定义。

#ifdef GL_ES
prescision mediump float;
#endif

uniform vec2 u_resolution; //画布尺寸（宽高），gl_FragCoord.xy/u_resolution 就归一化了每个像素点的坐标，gl_FragColor.x（.y）
uniform vec2 u_mouse; //鼠标位置
uniform float u_time; //时间（加载后的秒数）

//通过以上变量即可从时间和空间对每个像素点进行计算
//业界传统是对每个uniform值前加前缀u_，但是依然有iResolution、iMouse、iTime等名字（ShaderToy.com）

//GLSL支持常规的数学函数，sin()、cos()、abs()、min()、max()等等

//gl_FragCoord的数据类型是vec4，但是他是变化的值varying

<body>
    <div id="container"></div>
    <script src="js/three.min.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4( position, 1.0 );
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform vec2 u_resolution;
        uniform float u_time;

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            gl_FragColor=vec4(st.x,st.y,0.0,1.0);
        }
    </script>
    <script>
        var container;
        var camera, scene, renderer;
        var uniforms;

        init();
        animate();

        function init() {
            container = document.getElementById( 'container' );

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

            uniforms = {
                u_time: { type: "f", value: 1.0 },
                u_resolution: { type: "v2", value: new THREE.Vector2() }
            };

            var material = new THREE.ShaderMaterial( {
                uniforms: uniforms,
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent
            } );

            var mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );

            container.appendChild( renderer.domElement );

            onWindowResize();
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onWindowResize( event ) {
            renderer.setSize( window.innerWidth, window.innerHeight );
            uniforms.u_resolution.value.x = renderer.domElement.width;
            uniforms.u_resolution.value.y = renderer.domElement.height;
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            uniforms.u_time.value += 0.05;
            renderer.render( scene, camera );
        }
    </script>
</body>

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float plot(vec2 st, float pct){
  return  smoothstep( pct-0.02, pct, st.y) -
          smoothstep( pct, pct+0.02, st.y);
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;

    // Smooth interpolation between 0.1 and 0.9
    float y = smoothstep(0.428,0.9,st.x);

    vec3 color = vec3(y);

    float pct = plot(st,y);
    color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

    gl_FragColor = vec4(color,1.0);
}

简介js中的正则

Tue, 30 Jan 2018 12:00:00 +0000

正则表达式（Regular Expression，代码中常见regex，regexp或RE）是使用单个字符串来描述、匹配一系列符合一定语法规则的字符串搜索模式。通常用于搜索或者匹配、判定。

语法：/正则表达式主体/修饰符（可选）

var demo = /runoob/i
//  runoob是主体
//  i是修饰符表示搜索不区分大小写

//  使用实例
//  eg.1
var str = 'visit runoob';
var n1 = str.search(/runoob/i); // 6
var n2 = str.search('runoob'); // 6

var n3 = str.replace('visit', 'go'); // go runoob
var n4 = str.replace(/visit/i, 'go'); // go runoob

// /regex/.test(str)用于检测字符串str是否符合匹配模式，返回布尔值
var pat = /e/;
pat.test('express'); // true

// exec(str) 返回匹配字符串，没有则为null
/e/.exec('exc'); // 'e'

整理常见的正则

//正整数
/^[0-9]*[1-9][0-9]*$/;
//负整数
/^-[0-9]*[1-9][0-9]*$/;
//正浮点数
/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;   
//负浮点数
/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;  
//浮点数
/^(-?\d+)(\.\d+)?$/;
//email地址
/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
//url地址
/^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/;
/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$; 
// 年/月/日（年-月-日、年.月.日）
/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
//匹配中文字符
/[\u4e00-\u9fa5]/;
//匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线)
/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
//匹配空白行的正则表达式
/\n\s*\r/;
//匹配中国邮政编码
/[1-9]\d{5}(?!\d)/;
//匹配身份证
/\d{15}|\d{18}/;
//匹配国内电话号码
/(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/;
//匹配IP地址
/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
//匹配首尾空白字符的正则表达式
/^\s*|\s*$/;
//匹配HTML标记的正则表达式
< (\S*?)[^>]*>.*?|< .*? />;
//sql 语句
^(select|drop|delete|create|update|insert).*$
//提取信息中的网络链接
(h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? 
//提取信息中的邮件地址
\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 
//提取信息中的图片链接
(s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)? 
//提取信息中的 IP 地址
(\d+)\.(\d+)\.(\d+)\.(\d+)
//取信息中的中国手机号码
(86)*0*13\d{9} 
//提取信息中的中国邮政编码
[1-9]{1}(\d+){5} 
//提取信息中的浮点数（即小数）
(-?\d*)\.?\d+ 
//提取信息中的任何数字
(-?\d*)(\.\d+)?
//电话区号
^0\d{2,3}$
//腾讯 QQ 号
^[1-9]*[1-9][0-9]*$ 
//帐号（字母开头，允许 5-16 字节，允许字母数字下划线）
^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 
//中文、英文、数字及下划线
^[\u4e00-\u9fa5_a-zA-Z0-9]+$

详解shader，three.js

Mon, 22 Jan 2018 12:00:00 +0000

three.js中常见的着色器代码是写在html中的

<script id='vs' type='x-shader/x-vertex'>
    //顶点着色器代码
    varying vec2 vUv;
    void main()
    {    
        // passing texture to fragment shader
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        //投影矩阵、模型矩阵、position顶点在物体坐标系中的位置
    }
</script>

<script id='fs' type='x-shader/x-fragment'>
    //片元着色器代码
    varying vec2 vUv;
    void main() {
        gl_FragColor = vec4(vUv.x, vUv.y, 1.0, 1.0);
    }
</script>

<!-- 引用着色器代码 -->
<script>
    //···
    material = new THREE.ShaderMaterial( {
        vertexShader:document.getElementById('vs').textContent,
        fragmentShader:document.getElementById('fs').textContent
    } );
</script>

webgl定义了四种限定符，限定数据类型

const:常量 attribute:从js传递到顶点着色器中，每个顶点对应不同的值 uniform:每个顶点/片元对应相同的值 varying:从顶点着色器传递到片元着色器中。ps:片元着色器本身不能访问uv信息，如果需要得到这一值的话，需要从顶点着色器中传递过去。

uv:three.js预设属性，代表了该顶点在UV映射时的横纵坐标