tianlman / good_things Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 318 KB

something about front end 前端各方面的一些东西

HTML 56.61% JavaScript 43.39%

good_things's People

Contributors

Watchers

good_things's Issues

JavaScript里面函数本身的length属性和arguments.length区别

函数对象的length属性是形式参数的个数；
arguments伪变量的length属性是某次调用的实际参数的个数
例如：

function func(a,b,c){
    console.log(arguments.length);
}

console.log(func.length)//输出：3

func(1);//输出: 1

函数本身也是对象，对象就有属性，函数有length属性，比如： function fn(x,y,z) {}中 fn.length=3,说明了函数的形参个数；而在函数体内，arguments.length表示传入函数的实参个数，比如：function fun(1,2) { console.log(arguments.length)} 中实参的个数为arguments.length=2

jquery的jsonp请求

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  
$.ajax({
  type: "get",
  async: false,
  url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
  dataType: "jsonp",
  jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
  jsonpCallback:"message",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  success: function(json){
   alert('你的名字：' + json.name + ' 年龄： ' + json.age);    
  },
  error: function(){
   alert('fail');
  }
 });
});
</script>

type：请求类型，GET 或 POST,默认为 GET；
async:true（异步）或 false（同步）,默认情况下为true,同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行;
url:发送请求的地址(跨域请求时应为绝对地址);
dataType:指定服务器返回的数据类型;
jsonpCallback:自定义JSONP回调函数名称;
success:请求成功后回调函数;
error:请求失败时调用此方法。

css实现带箭头的流程条

<ul class="navs">
　　　　<li>1</li>
　　　 <li>2</li>
　　　 <li>3</li>
　　　　<li>4</li>
</ul>

.navs {
    height: 100px;
}
.navs li {
    padding: 0px 10px 0 30px;
    line-height: 40px;
    background: #50abe4;
    display: inline-block;
    color: #fff;
    position: relative;
}
 
.navs li:after {
    content: '';
    display: block;
    border-top: 20px solid #50abe4;
    border-bottom: 20px solid #50abe4;
    border-left: 20px solid #fff;
    position: absolute;
    right: -20px;
    top: 0;
}
 
.navs li:after {
    content: '';
    display: block;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #50abe4;
    position: absolute;
    right: -20px;
    top: 0;
    z-index: 10;
}
 
.navs li:before {
    content: '';
    display: block;
    border-top: 20px solid #50abe4;
    border-bottom: 20px solid #50abe4;
    border-left: 20px solid #fff;
    position: absolute;
    left: 0px;
    top: 0;
}
 
.navs li:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 25px;
}
 
.navs li:last-child,
.cssNavEnd {
    border-radius: 0px 4px 4px 0px;
    padding-right: 25px;
}
 
.navs li:first-child:before {
    display: none;
}
 
.navs li:last-child:after,
.cssNavEnd:after {
    display: none;
}
 
.navs li.active {
    background-color: #ef72b6;
}
 
.navs li.active:after {
  
```  border-left-color: #ef72b6;
}

解决 Chrome打开.md文件乱码问题

在Chrome浏览器中菜单栏-->更多工具-->拓展程序-->获取更多扩展程序（如果打不开就要翻墙可以用蓝灯）-->搜索Markdown Preview Plus-->然后添加-->勾上允许访问文件地址-->打开选项勾上第一和第三的框即可

Vscode常用插件配置以及设置Webstorm界面风格以及快捷键

webstorm界面插件
Webstorm IntelliJ Darcula Theme
webstorm快捷键插件
IntelliJ IDEA Keybindings


- 其他常用插件

Auto Close Tag
Auto Rename Tag
Beautify
Bracket Pair Colorizer
Chinese (Simplified) Language Pack for Visual Studio Code
CSS Peek
Debugger for Chrome
File Peek
Git History
HTML CSS Support 智能提示CSS类名以及id
HTML Snippets 智能提示HTML标签，以及标签含义
JavaScript (ES6) code snippets ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue
language-stylus
Path Intellisense 自动提示文件路径，支持各种快速引入文件
Prettier - Code formatter 自动代码格式化程序
Vetur Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。
Vue TypeScript Snippets vue的 typescript 代码片段
VueHelper vue代码片段
Babel ES6/ES7
vue-helper 鼠标左键+ctrl可实现方法跳转
Element UI Snippets element-ui框架开发可安装
Code Spell Checker 检查单词拼写是否正确

内容来自跳转

jquery方法

some():方法
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
输出结果为: true    (检测数组中是否有元素大于 18)

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。


<script type="text/javascript">

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

</script>
以上代码的输出：
0
-1
6

在做一个移动端页面，内容只占页面的一大半，但是下面有背景色，怎样设置高度呢？

html {
min-height: 100%;
background-color: red
}

vue实现分环境打包步骤（给不同的环境配置相对应的打包命令）

https://blog.csdn.net/zuoyiran520081/article/details/80812788

关于node升级10.x之后node-sass安装一拉报错问题

···
Module build failed: Error: Missing binding G:\myCode\YB\clientapps\AccountV4\node_modules_node-sass@4.9.0@node-sass\vendor\win32-x64-64\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 10.x
Found bindings for the following environments:

Windows 64-bit with Node.js 8.x

npm rebuild node-sass

安装完重新启动就ok了，所以没事还是别更新node，最好保持团队的环境一致~

scrollTop 浏览器各种高度的获取

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
Post by molong on 2009-05-19 11:57 PM #1

要获取当前页面的滚动条纵坐标位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 对应的是 html 标签，而 body 对应的是 body 标签。

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;
如果你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop，如果你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。
ie5.5之后已经不支持document.body.scrollX对象了。
所以在编程的时候，请加上这样的判断

if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;    
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}

异步的终极解决方案-ES7的Async/Await

Async/Await应该是目前最简单的异步方案了，首先来看个例子。

这里我们要实现一个暂停功能，输入N毫秒，则停顿N毫秒后才继续往下执行。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start();
控制台先输出start，稍等3秒后，输出了end。

基本规则

async 表示这是一个async函数，await只能用在这个函数里面。

await 表示在这里等待promise返回结果了，再继续执行。

await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）

获得返回值

await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 返回 ‘ok’
            resolve('ok');
        }, time);
    })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); // 收到 ‘ok’
};

捕捉错误

既然.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的try catch语法捕捉错误。

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 模拟出错了，返回 ‘error’
            reject('error');
        }, time);
    })
};

var start = async function () {
    try {
        console.log('start');
        await sleep(3000); // 这里得到了一个返回错误
        
        // 所以以下代码不会被执行了
        console.log('end');
    } catch (err) {
        console.log(err); // 这里捕捉到错误 `error`
    }
};

循环多个await

await看起来就像是同步代码，所以可以理所当然的写在for循环里，不必担心以往需要闭包才能解决的问题。

..省略以上代码

var start = async function () {
    for (var i = 1; i <= 10; i++) {
        console.log(`当前是第${i}次等待..`);
        await sleep(1000);
    }
};

值得注意的是，await必须在async函数的上下文中的。

..省略以上代码


let 一到十 = [1,2,3,4,5,6,7,8,9,10];

// 错误示范
一到十.forEach(function (v) {
    console.log(`当前是第${v}次等待..`);
    await sleep(1000); // 错误!! await只能在async函数中运行
});

// 正确示范
for(var v of 一到十) {
    console.log(`当前是第${v}次等待..`);
    await sleep(1000); // 正确, for循环的上下文还在async函数中
}

jquery的ajax()先后台传参方式

一、Type属性为Get时：

(1)第一种方法：（通过url传参）

function GetQuery(id) {
     if (id ==1||id==7) {
         var name = "语文";
         $.ajax({
             url:"../ajaxHandler/ChartsHandler.ashx?id="+id+"&name="+name +"",
             type: "get",
             success: function (returnValue) {
                 $("#cId").val(returnValue);
             },
             error: function (returnValue) {
                 alert("对不起！数据加载失败！");
             }
         })
     }
}

(2)第二种方法：（通过data传参）

function GetQuery(id) {
     if (id ==1||id==7) {
         var name = "语文";
         $.ajax({
             url:"../ajaxHandler/ChartsHandler.ashx",
             type: "get",
             //获取某个文本框的值
             //data: "id=" + id + "&name=" + $("#name").val(),
             data: "id=" + id + "&name=" + name,
            // 或者(注意：若参数为中文时，以下这种传参不会造成后台接收到的是乱码)
             //data: {
             //    "id": id,
             //    "name": name
             //},
             success: function (returnValue) {
                 $("#cId").val(returnValue);
             },
             error: function (returnValue) {
                 alert("对不起！数据加载失败！");
             }
         })
     }
}

(2)后台获取参数：（.ashx一般处理程序）

public void ProcessRequest(HttpContext context)
        {
            string 科目Id = context.Request.QueryString["id"];
            string 科目名称 = context.Request.QueryString["name"];
            }

二、Type属性为post时：

(1)第一种方法：（通过url传参）

function GetQuery(id) {
     if (id ==1||id==7) {
         var name = "语文";
         $.ajax({
             url:"../ajaxHandler/ChartsHandler.ashx?id="+id+"&name="+name +"",
             type: "post",
             success: function (returnValue) {
                 $("#cId").val(returnValue);
             },
             error: function (returnValue) {
                 alert("对不起！数据加载失败！");
             }
         })
     }
}

$.ajax({
type: "get",
async: false,
url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"message",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('你的名字：' + json.name + ' 年龄： ' + json.age);

},
error: function(){
 alert('fail');
}

});

$.ajax({
type: "get",
async: false,
url: "/home/ReturnJson",
dataType: "jsonp",
success: function(data){
alert(data.name);
},
error: function(){
alert('fail');
}
});

关于background-size问题

background-size: length|percentage|cover|contain;
length ：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

body {
    background: url("images/抽奖背景.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

注意：如果在background：url("images/抽奖背景.jpg") no-repeat; 里面在加一个center可能会无法填满盒子，使盒子左右出现没有背景图的情况；

es6

let命令

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

的块级作用域

为什么需要块级作用域？

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

/deep/ 深度选择器

/deep/ 、>>> 深度选择器用于将全局的组件或者类的样式转换为局部的类从而达到在scoped内部添加样式后起作用的目的，比如要给scoped内部的.sys_info_box的子类组件添加样式，而.el-card__header属于全局组件，无法在局部scoped中起作用，所以可以在leiming前加上/deep/

修改UI库的默认样式样式也可以用

tianlman / good_things Goto Github PK

good_things's People

Contributors

Watchers

good_things's Issues

Recommend Projects

Recommend Topics

Recommend Org