fozero / frontcode Goto Github PK

View Code? Open in Web Editor NEW

52.0 52.0 21.0 13.62 MB

个人博客，用于总结平时工作和学习中的经验

Home Page: https://cnblogs.com/fozero

CSS 6.55% HTML 31.05% JavaScript 61.14% Shell 0.07% Vue 1.11% TSQL 0.07%

frontcode's People

Stargazers

Watchers

frontcode's Issues

如何將檔案存放至本地端

你好，

$.ajax({
            url: 'http://zhangykwww.yind123.com/webapi/feedback',
            type: 'POST',
            data: formFile,
            async: true,  
            cache: false,  
            contentType: false, 
            processData: false, 
            // traditional:true,
            dataType:'json',
            success: function(res) {
                console.log(res);
            }
        })

這一段看起來是將檔案存放至雲端，請問如果要存放至本地端，是不是應該還有一個接收檔案的程式，像是這樣的

<?php
    
    if(is_array($_FILES)) {
        if(is_uploaded_file($_FILES['file']['tmp_name'])) {
            $sourcePath = $_FILES['file']['tmp_name'];
            $targetPath = "images/".$_FILES['file']['name'];
        
        if(move_uploaded_file($sourcePath,$targetPath)) {
            $newname = "temp-.jpg";
            rename($targetPath,"images/".$newname);
            $targetPath = "images/".$newname;
            }
        }
    }
?>

然後把這一行
url: 'http://zhangykwww.yind123.com/webapi/feedback',
改成
url: 'upload.php',
可是不知道哪裡出錯，總是無法存檔至本地端～～

Webpack，Browserify和Gulp三者之间的关系

Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。

seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

browserify / webpack : 是一个预编译模块的方案，相比于上面，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。
这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

Javascript Object常用方法总结

Object.keys方法

Object.keys方法是JavaScript中用于遍历对象属性的一个方法。它传入的参数是一个对象，返回的是一个数组，数组中包含的是该对象所有的属性名。
如：

var cat= { 
name:’mini’, 
age:2, 
color:’yellow’, 
desc:”cute” 
}
console.log(Object.keys(cat)); // ["name", "age", "color", "desc"]

这里有一道关于Object.keys的题目

输出对象中值大于2的key的数组

var data = {a: 1, b: 2, c: 3, d: 4};
Object.keys(data).filter(function(x) { return 1 ;})

期待输出：[“c”,”d”]
请问1处填什么？

正确答案：1 ：data[x]>2

Object.keys是es5中新增的方法，用来获取对象自身所有的可枚举的属性名，但不包括原型中的属性，然后返回一个由属性名组成的数组。注意它同for..in一样不能保证属性按对象原来的顺序输出。
Object.getOwnPropertyNames也是es5中新增的方法，返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。

Array.filter(function)对数组进行过滤返回符合条件的数组。

Object.values()方法

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。

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

返回数组的成员顺序，属性名为数值的属性，是按照数值大小，从小到大遍历的，因此返回的顺序是b、c、a。Object.values只返回对象自身的可遍历属性。

var obj = { 100: 'a', 2: 'b', 7: 'c' };  
Object.values(obj)  
// ["b", "c", "a"]

如果Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组。

Object.values('foo')  
// ['f', 'o', 'o']

上面代码中，字符串会先转成一个类似数组的对象。字符串的每个字符，就是该对象的一个属性。因此，Object.values返回每个属性的键值，就是各个字符组成的一个数组。
如果参数不是对象，Object.values会先将其转为对象。由于数值和布尔值的包装对象，都不会为实例添加非继承的属性。所以，Object.values会返回空数组。

Object.create()

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
语法
Object.create(proto, [propertiesObject])
参数
proto
新创建对象的原型对象。
propertiesObject
可选。如果没有指定为 undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。
返回值
一个新对象，带着指定的原型对象和属性。
如：

var parent = {
    x : 1,
    y : 1
}
var child = Object.create(parent,{
    z : {                           // z会成为创建对象的属性
        writable:true,
        configurable:true,
        value: "newAdd"
    }
});
console.log(child)//{z: "newAdd"}z: "newAdd"__proto__: x: 1y: 1__proto__: Object

Object.create()创建继承

function A(){
  this.a = 1;
  this.b = 2;
}
A.prototype.drive = function(){
  console.log('drivvvvvvvvvv');
}
//方式1
function B(){}
B.prototype = Object.create(new A()); //这里采用了new 一个实例
//方式2
function C(){
  A.call(this);
}
C.prototype = Object.create(A.prototype) //这里使用的是父类的原型

以上两种方式有什么区别?
1的缺点：
执行了 new，相当于运行了一遍 A ，如果在 A 里做了一些其它事情（如改变全局变量）就会有副作用。
用 A 创建的对象做原型，里面可能会有一些冗余的属性。
2模拟了 new 的执行过程

Object.hasOwnProperty()方法

判断对象自身属性中是否具有指定的属性。
obj.hasOwnProperty('name')
在某个对象是否拥有某个属性，判断的方法有很多，常用的方法就是object.hasOwnProperty('×××')，这个方法是不包括对象原型链上的方法的

var obj = {
    name:'fei'
}
    console.log(obj.hasOwnProperty('name'))//true
    console.log(obj.hasOwnProperty('toString'))//false

以上，obj对象存在的name属性的时候，调用这个方法才是返回true，我们知道其实每个对象实例的原型链上存在toString方法，在这里打印false，说明这个方法只是表明实例对象的属性，不包括原型链上的属性。

Object.getOwnPropertyNames()方法

Object.getOwnPropertyNames()方法返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。

function A(a,aa) {
  this.a = a;
  this.aa = aa;
  this.getA = function() {
    return this.a;
  }
}
// 原型方法
A.prototype.aaa = function () {};

var B = new A('b', 'bb');
B.myMethodA = function() {};
// 不可枚举方法
Object.defineProperty(B, 'myMethodB', {
  enumerable: false,
  value: function() {}
});

Object.getOwnPropertyNames(B); // ["a", "aa", "getA", "myMethodA", "myMethodB"]

Object.getOwnPropertyNames和Object.keysq区别

Object.getOwnPropertyNames和Object.keys的区别，即Object.keys只适用于可枚举的属性，而Object.getOwnPropertyNames返回对象自动的全部属性名称。

'use strict';
(function(){
    if(!Object.getOwnPropertyNames){
        console.log('浏览器不支持getOwnPropertyNames');
        return;
    }

    //人类的构造函数
    var person = function(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
        
        this.sing = function(){
            console.log('sing');
        }
    }
    //new 一个ladygaga
    var gaga = new person('ladygaga', 26, 'girl');

    //给嘎嘎发放一个不可枚举的身份证
    Object.defineProperty(gaga, 'id', {
        value : '1234567890',
        enumerable : false
    });

    //查看gaga的个人信息
    var arr = Object.getOwnPropertyNames(gaga);
    document.write(arr); //output: name,age,sex,sing,id

    document.write('</br>');
    
　　 //注意和getOwnPropertyNames的区别，不可枚举的id没有输出
    var arr1 = Object.keys(gaga);
    document.write(arr1); //output: name,age,sex,sing
})();

es6 javascript对象方法Object.assign()

Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。

var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

1、如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
2、如果只有一个参数，Object.assign会直接返回该参数。

var obj = {a: 1};  
Object.assign(obj) === obj // true

3、如果该参数不是对象，则会先转成对象，然后返回。
4、由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。
5、Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

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

上面代码中，源对象obj1的a属性的值是一个对象，Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。

常见用途

（ 1 ）为对象添加属性

class Point {  
    constructor(x, y) {  
        Object.assign(this, {x, y});  
    }  
}

上面方法通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。

（ 2 ）为对象添加方法

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

上面代码使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用 assign 方法添加到 SomeClass.prototype 之中。
（ 3 ）克隆对象

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

上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆。
不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。
（ 4 ）合并多个对象
将多个对象合并到某个对象。

const merge =(target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一个新对象，可以改写上面函数，对一个空对象合并。

const merge =(...sources) => Object.assign({}, ...sources);

（ 5 ）为属性指定默认值

const DEFAULTS = {  
    logLevel: 0,  
    outputFormat: 'html'  
};  
function processContent(options) {  
    let options = Object.assign({}, DEFAULTS, options);  
}

上面代码中，DEFAULTS对象是默认值，options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。
注意，由于存在深拷贝的问题，DEFAULTS对象和options对象的所有属性的值，都只能是简单类型，而不能指向另一个对象。否则，将导致DEFAULTS对象的该属性不起作用。

参考https://blog.csdn.net/qq_30100043/article/details/53422657

Object.defineProperty()方法理解

Object.defineProperty可以用来定义新属性或修改原有的属性

使用构造函数定义对象和属性

var obj = new Object; //obj = {}
obj.name = "张三"; //添加描述
obj.say = function(){}; //添加行为

语法

Object.defineProperty(obj, prop, descriptor)

参数说明
obj：必需。目标对象
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述

数据描述

修改或定义对象的某个属性的时候，给这个属性添加一些特性，数据描述中的属性都是可选的

var obj = {
test:"hello"
}
//对象已有的属性添加特性描述Object.defineProperty(obj,"test",{
configurable:true | false,
enumerable:true | false,
value:任意类型的值,
writable:true | false
});
//对象新添加的属性的特性描述Object.defineProperty(obj,"newKey",{
configurable:true | false,
enumerable:true | false,
value:任意类型的值,
writable:true | false
});

value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

存取器描述

使用存取器描述属性的特性的时候，允许设置以下特性属性，当使用了getter或setter方法，不允许使用writable和value这两个属性

var obj = {};
Object.defineProperty(obj,"newKey",{
get:function (){} | undefined,
set:function (value){} | undefined
configurable: true | false
enumerable: true | false
});

getter/setter
getter 是一种获得属性值的方法
setter是一种设置属性值的方法。
使用get/set属性来定义对应的方法

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
get:function (){
//当获取值的时候触发的函数
return initValue;
},
set:function (value){
//当设置值的时候触发的函数,设置的新值通过参数value拿到
initValue = value;
}
});
//获取值console.log( obj.newKey ); //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

兼容性

在ie8下只能在DOM对象上使用，尝试在原生的对象使用 Object.defineProperty()会报错。
参考https://segmentfault.com/a/1190000007434923

使用shell脚本来自动化处理我们的工作，解放双手

Shell脚本介绍

1、Shell脚本,就是利用Shell的命令解释的功能，对一个纯文本的文件进行解析，然后执行这些功能，也可以说Shell脚本就是一系列命令的集合。
2、Shell可以直接使用在win/Unix/Linux上面，并且可以调用大量系统内部的功能来解释执行程序，如果熟练掌握Shell脚本，可以让我们操作计算机变得更加轻松，也会节省很多时间。
3、Shell是一种脚本语言，那么，就必须有解释器来执行这些脚本，常见的脚本解释器有：
（1）、bash：是Linux标准默认的shell。bash由Brian Fox和Chet Ramey共同完成，是BourneAgain Shell的缩写，内部命令一共有40个。
（2）、sh：由Steve Bourne开发，是Bourne Shell的缩写，sh 是Unix 标准默认的shell。
另外还有：ash、 csh、 ksh等。

常见的编程语言分为两类：一个是编译型语言，如：c/c++/java等，它们远行前全部一起要经过编译器的编译。另一个解释型语言，执行时，需要使用解释器一行一行地转换为代码，如：awk, perl, python与shell等。

4、使用场景，能做什么
（1）、将一些复杂的命令简单化(平时我们提交一次github代码可能需要很多步骤，但是可以用Shell简化成一步)
（2）、可以写一些脚本自动实现一个工程中自动更换最新的sdk(库)
（3）、自动打包、编译、发布等功能
（4）、清理磁盘中空文件夹
总之一切有规律的活脚本都可以尝试一下

编写一个简单的shell脚本

#!/bin/bash
# 上面中的 #! 是一种约定标记, 它可以告诉系统这个脚本需要什么样的解释器来执行;
echo "Hello, world!”

将以上内容保存在一个.sh格式的文件中，执行以下命令
bash test1.sh 或者 . test1.sh
最后输出 Hello, world!

创建一个shell脚本，通过shell脚本当前目录创建一个test文件夹，复制test1.sh文件到test文件夹里，进入文件夹test初始化一个npm并按照一个npm模块，通过执行 bash test2.sh命令

#!/bin/bash
# 上面中的 #! 是一种约定标记, 它可以告诉系统这个脚本需要什么样的解释器来执行;

echo "test2.sh start..."
mkdir test
cp -rf test1.sh test/
cd test
npm init
npm i --save lodash
echo "test2.sh end..."

写成一行，使用&&符号连接

mkdir test && cp -rf test1.sh test/  && cd test && npm init && npm i --save lodash

行尾使用反斜杠\使其能接着输入其他命令，不马上执行命令

echo "test2.sh start..."
mkdir test && \
    cp -rf test1.sh test/ && \
    cd test && \
    npm init && \
    npm i --save lodash
echo "test2.sh end..."

行尾添加反斜杠 ,作用是不马上执行命令可接着输入其他命令，如下

[yd@bogon:~/Documents/www/workspa/test/shell]$ mkdir test2 && \
> cd test2 && \
> npm init && \
> npm install loadsh --save

shell脚本参数传递，通过$0，$1，$2可以接收命令行传递的参数，$0 就是你写的shell脚本本身的名字，$1 是你给你写的shell脚本传的第一个参数，$2 是你给你写的shell脚本传的第二个参数

复制以下内容到test2.sh文件中

echo "shell脚本本身的名字: $0"
echo "传给shell的第一个参数: $1"
echo "传给shell的第二个参数: $2”

然后执行命令bash test2.sh 1 2，可以看到输出结果
shell脚本本身的名字: test2.sh
传给shell的第一个参数: 1
传给shell的第二个参数: 2

编写一个自动提交git的shell脚本

创建gitautopush.sh文件，将以下内容复制进去

#!/bin/bash
# 上面中的 #! 是一种约定标记, 它可以告诉系统这个脚本需要什么样的解释器来执行;

echo "gitautopush start..."
git add .
git commit -m $1
echo "git提交注释:$1"
git push origin master
echo "gitautopush end..."

以上自动提交git脚本就写好了，现在输入以下命令执行脚本
bash gitautopush.sh 自动提交测试

控制台输出，代码已经成功提交到git服务器了

gitautopush start...
[master be8d56b] shell
 3 files changed, 51 insertions(+)
 create mode 100644 shelldemo/gitautopush.sh
 create mode 100644 shelldemo/test1.sh
 create mode 100644 shelldemo/test2.sh
git提交注释:自动提交测试
Counting objects: 6, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 1.14 KiB | 1.14 MiB/s, done.
Total 6 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 1 local object.
To https://github.com/fozero/frontcode.git
   2e79d26..be8d56b  master -> master
gitautopush end...

参考

https://www.cnblogs.com/gaosheng-221/p/6794429.html
https://www.cnblogs.com/yinheyi/p/6648242.html

h5开发总结

解决图片变形的问题

一般设计给我们的图都特别的大，假如一个banner我们设置width为100%时，那么在低分辨率的电脑上显示就会变形，
可以通过background-size设置cover或者contain值来裁剪，这样就不会造成图片变形了，当然还有其他办法，比如响应式设置媒体查询，但这样无疑增加了工作量，还是比较麻烦

图片如何切图及布局

如果一个body的背景被它的子类的一个背景覆盖了，层级可能是背景在上面。可以通过单独设置这两个背景为绝对定位，然后设置他们的z-index属性就能解决

vue项目中使用了vw适配方案，引入第三方ui框架mint-ui时，适配问题解决

问题分析：

一般第三方ui框架用的都是不同的适配方式，如果我们使用了vw适配，那么在使用mint-ui框架时，就会发现px单位会被转换成vw，从而导致样式变小的问题，如图

解决方案

网上看到了很多种解决方案，这里推荐第四种

1、重写第三方组件ui样式大小
2、在postcss.config.js中的selectorBlackList选项中增加不需要vw转换的类名
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
3、使用rem适配方案，将原本750的宽度设置为一半，配置成37.5
https://www.jianshu.com/p/8f9aab666c4a
4、添加exclude选项，将node_modules目录排除掉，即不会受影响

在node_mudule中找到postcss-px-to-viewport，修改index.js新增对exclude选项的处理

module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {

  var opts = objectAssign({}, defaults, options);
  var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);

  return function (css) {

    css.walkDecls(function (decl, i) {
      if (options.exclude) {  // 添加对exclude选项的处理
        if (Object.prototype.toString.call(options.exclude) !== '[object RegExp]') {
          throw new Error('options.exclude should be RegExp!')
        }
        if (decl.source.input.file.match(options.exclude) !== null) return;
      }
      // This should be the fastest test and will remove most declarations
      if (decl.value.indexOf('px') === -1) return;

      if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;

      decl.value = decl.value.replace(pxRegex, pxReplace);
    });

    if (opts.mediaQuery) {
      css.walkAtRules('media', function (rule) {
        if (rule.params.indexOf('px') === -1) return;
        rule.params = rule.params.replace(pxRegex, pxReplace);
      });
    }

  };
});

然后在.postcssrc.js添加postcss-px-to-viewport的exclude选项

"postcss-px-to-viewport": {
  viewportWidth: 750,
  viewportHeight: 1334,
  unitPrecision: 3,
  viewportUnit: 'vw',
  selectorBlackList: ['.ignore', '.hairlines'],
  minPixelValue: 1,
  mediaQuery: false,
  exclude: /(\/|\\)(node_modules)(\/|\\)/
},

这里需要注意了，在没有修改postcss-px-to-viewport的index.js文件，直接在.postcssrc.js中添加了以下代码也成功了

exclude: /(\/|\\)(node_modules)(\/|\\)/

然后我去node_mudele下找到postcss-px-to-viewport的index.js打开发现了如下代码，看来是postcss-px-to-viewpor这个插件增加了对这个问题的处理，我使用的版本是"postcss-px-to-viewport": "^1.1.0",

if (opts.exclude && file) {
        if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {
          if (isExclude(opts.exclude, file)) return;
        } else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {
          for (let i = 0; i < opts.exclude.length; i++) {
            if (isExclude(opts.exclude[i], file)) return;
          }
        } else {
          throw new Error('options.exclude should be RegExp or Array.');
        }
      }

参考阅读

Vue+ts下的移动端vw适配（第三方库css问题）

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble