step1:

进入项目根目录
npm init 创建 package.json
npm install –save-dev webpack

step2:

创建app文件夹：用来存放依赖模块js和主模块js
在app中创建Greeter.js main.js
创建public文件夹：用来存放webpack打包之后用于浏览器引用的文件夹
在public中创建index.html, 并且引入bundle.js （bundle.js也就是最终打包后的一个集合js的文件）

step3:

原生javascript实现的小demo

• 增删查dom，实现模糊查询
• 可视化dom节点排序
• 可视化遍历dom tree
• form表单输入检索
• form表单条件检索
• 实现成绩排序
• 弹出层实现
• 做条贪吃蛇
• 滚动的小球
• css3画一只小猫
• 发射炮弹游戏
• 拖放方块
• 导航界面
• 商店导航

1.浮动元素会先按照正常流进行布局，然后脱离文档流，并向左或者向右顶到头，这个就是部分流动性
2.如果浮动元素在内联元素或者块状元素前面，内联元素碰到浮动元素会让位，块状元素会忽略浮动元素
3.当为浮动元素创建bfc后，浮动元素会挤开在它后面的元素

区别：

• 绝对定位与浮动元素：
  1.绝对定位脱离文档流后布局，在没有设置left/top情况下不会覆盖之前的元素，后面的元素会无视它进行布局
  2.浮动元素先按正常流布局，然后脱离文档流向左向右顶到头

浮动元素会破坏自身的高度，由于内部存在文字或者图片这一类的实体

负数表示负数绝对值的二进制的反码加一

按位非 (~)

~num —> 返回num的反码 本质：操作数的负值减1，但是按位非实在数值表示的最底层执行操作的，所以运行速度会更快

按位与 (&)

num1 & num2 —-> num1和num2数值的二进制的每一位对齐，当两个数值同为1时返回1，有0时返回0

按位

num1 | num2 —>num1和num2数值的二进制的每一位对齐，当两个数值有一个为1时，返回1，两个都为0时返回0

按位异或 (^)

num1 ^ num2 —> num1和num2数值对应为上只有一个1时返回，如果两个同为1或者0返回0 特点：a两次异或同一个数返回a （a = a ^ b ^ b 返回a）

创建

git init （创建.git文件夹：将这个目录dev变成git可以管理的仓库）
git add . (. 表示添加dev中的所有文件夹：添加到仓库)
git commit -m “这是注释” （把文件提交到仓库：提交到仓库）

• add与commit 区别：add可以添加多个文件放置在暂存区stage，commit一次性添加add中的文件提交到master(其他分支)分支上
  git remote add origin 仓库地址 （关联远程仓库）
  git push -u origin master （把dev中的文件夹所有内容推送到远程库中，-u指的是上流分支，这个概念有点模糊，大概是上流(远程仓库)和下流(本地仓库)做的一个关联吧）
  阅读全文 »

利用这个就可以自己在线绘制贝塞尔曲线~还可以调整节点位置

主要思路

关于渲染：用两层canvas渲染，第一层是静止渲染，只渲染静态不变的线段和圆点，第二层是动态渲染，渲染点的运动形成的曲线运动情况。
关于曲线的构成：根据贝塞尔函数

功能需求

• 取色板可点击，长按移动，获取颜色
• 取色条拖动改变色相
• 可修改十六进制值，RGB，HSL，HSV值改变所有显示数据
• 用户输入的数据进行校验（十六进制自动补全；不正确的十六进制自动显示为黑色；rgb值的极限范围，S,V,L 小数点输入的实时校验并纠正）
  阅读全文 »

HtmlCollection & NodeList 的区别

HTMLCollection将仅包含任何元素节点，具有一个namedItem方法
NodeList可以包含任何节点类型（包括元素节点，文本节点，属性节点等）

node.childNodes 返回NodeList （动态）
node.children 返回HTMLCollection （动态）
document.getElementsByXXX() 返回HTMLCollection（动态）
document.querySelectorAll(返回NodeList （静态）