独书先生 Menu

Node搭建本地服务器

除了使用 Python搭建本地服务器,还可以前端程序员可以直接使用Node搭建简易服务器

  1. Node.js官网下载对应自己电脑的最新版Node 安装(注意:默认安装不用设置环境变量,否则需要手动配置环境变量)

  2. WIN + R 进入CMD命令行界面 ->  输入:node -v  -> 按Enter , 显示版本号即安装成功

  3. CMD命令行继续输入,

    • Windows输入: npm install anywhere -g
      MAC输入:sudo npm install anywhere -g
  4. CD到你的项目所在的文件夹,输入:anywhere

python开启本地Web服务器

<img class="wp-image-373 size-full" src="https://dushusir.com/wp-content/uploads/2018/06/python_web_server.png" alt="python_web_server" width="600" height="300" /> python_web_server

1.安装python3.6

  1. 在相应文件目录地址栏敲击cmd

3.输入:python -m http.server

4.保证本地目录包含index.html之类的首页文件,谷歌浏览器地址栏输入:http://localhost:8000/即可访问

 

注意:(1)默认端口 8000,如果想要自定义端口如2333,使用 python -m http.server 2333

(2)如果电脑里已有python 2.X版本,而你运行的也是python 2.X版本, 则需要使用 命令:
python -m SimpleHTTPServer
(3) 如果提示: ”python” 不是内部或外部命令,也不是可运行的程序
或批处理文件,则按下列步骤操作:

[1]使用系统目录方式进入cmd(win+R==>cmd)

[2]输入python 确认环境变量已配置,未配置的去配置Python环境变量

[3]cd到当前目录下(如:cd /d D:\Code)

[4]重新输入python -m http.server即可

 

精确判断js对象类型的方法

1.区别数组还是对象

var arr = [1, 2, 3];

var obj = {“a”: 3, “b”: 4};

判断数组:typeof arr  == “object” && arr.length != undefined

或者arr instanceof Array == true

注意 :arr instanceof Object == true所以instanceof和typeof一样不能单独使用来判断对象

判断对象:typeof obj== “object” && obj.length == undefined

原理:(1) 数组和对象使用typeof都是object

(2) 对象没有长度

 

2.判断数据类型:

编写数据类型判断的通用函数

function getType(obj){
var toString = Object.prototype.toString;
var map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object'
};
if(obj instanceof Element) {
return 'element';
}
return map[toString.call(obj)];
}

引用自:sysuzhyupeng 感谢!

前端开发资源工具汇总 | 长期更新

vue

vue

1.编程学习: 视频教程: imooc.com cn.udacity.com

文档: 菜鸟教程 实验楼 谷歌开发者 MDN WEB

2.js在线编程工具: jsbin.com jsrun.net jsfiddle.net codepen.io

3.开发框架 前端三大框架:Vue  /  angular   /  React

UI库:element  /  antd  / material.io

web app:   PWA  + AMP

原生APP:flutter + Dart  / React Native  / 安卓Kotlin

4.开源开发库

css3动画库:animate.css

JS动画库:  Velocity.js

canvas 库:spritejs.org

5.HTML5游戏开发

引擎: phaser.io / phaser Examples  cocos.com egret.com

js库:2D js物理引擎: Arcade Physics matter.js

教程:html5gamedevs.com gamedevjs.com

6.产品设计 shejidaren.com relativewave.com principleformac.com  (收费+MAC)

Sublime Text3 注册码(Windows/Build 3176版本)| 开发工具

1.修改hosts文件(路径:C:\Windows\System32\drivers\etc):

0.0.0.0 www.sublimetext.com

0.0.0.0 license.sublimehq.com

2.sublime text 3 注册码(2018/06/19):

----- BEGIN LICENSE -----
sgbteam
Single User License
EA7E-1153259
8891CBB9 F1513E4F 1A3405C1 A865D53F
115F202E 7B91AB2D 0D2A40ED 352B269B
76E84F0B CD69BFC7 59F2DFEF E267328F
215652A3 E88F9D8F 4C38E3BA 5B2DAAE4
969624E7 DC9CD4D5 717FB40C 1B9738CF
20B3C4F1 E917B5B3 87C38D9C ACCE7DD8
5F7EF854 86B9743C FADC04AA FB0DA5C0
F913BE58 42FEA319 F954EFDD AE881E0B
------ END LICENSE ------

3.sublime会自动更新后,注册码即失效,所以需要禁止自动更新
方法:Preferences - setting - 右侧user界面 ,添加
 "update_check": false

比如我的结构:
{
 "font_size": 14,
 "ignored_packages":
 [
 "Vintage"
 ],
 "update_check": false
}


剪切一个HTML元素到页面上的另一个地方 | Web基础

前端基础知识点巩固

方法:先clone 再append

代码:

HTML:

<div class="container">
    <div class="div1">
        <p class="p1" style="color:red;">
            文字
        </p>
    </div>
    <div class="div3"></div>
</div>

JS:

var $p1 =$(".div1").find(".p1");
var copyP = $p1.clone(true);
$(".div3").append(copyP);
$p1.remove();

 

PS :1.样式也会带过去

2.记得引用jQuery

JS滑动删除列表项:左滑出现删除按钮交互特效 | 移动端

分类:Web

需求:

移动端类似通讯录、短信列表中实现左滑出现删除按钮,右滑或点击空白处隐藏删除按钮。

分析:

可直接使用手势插件处理可能会更方便,考虑到功能单一,可用监听原生touchstart,touchmove事件实现

效果:

swipe_delete_gif

Continue reading…