2016年3月 – Uncle.C 的前端旅程

webpack学习教程使用的插件记录

html-webpack-plugin

作用：自动快速的帮我们生成HTML

config文件用法：

plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

2. webpack-dev-server

作用：新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器。

config文件用法：

devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },

webpack使用loader的方式来处理各种各样的资源

//样式处理loader
css-loader
style-loader
sass-loader

//图片和其他静态文件的处理loader
url-loader

//添加ES6的支持
babel-loader
babel-preset-es2015

//检测JS规范
jshint-loader

//JQ插件或者古老的库引入
imports-loader

win10安装webpack问题

最近开始接触webpack，用win10来安装出现了环境变量的问题。具体情况如下：运行webpack命令的时候，CMD出现：

Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

搜索一番后发现原来是windows的环境变量没设置好，可能和我用的用户不是超级用户有关系，后面把环境变量补上去，关掉cmd重新打开就可以运行指令了。

具体步骤：

解决方法是：

配置环境变量，指定webpack/lib/node/NodeTemplatePlugin的准确路径；

1.右键我的电脑点击属性，弹出以”系统“为标题的窗口；

2.点击左侧高级系统，弹出系统属性窗口；

3.点击环境变量，弹出环境变量窗口；

4.

    4.1如果你的webpack是是用cnpm安装的，则在dos下执行cnpm config get prefix，然后会在界面输出一个路径；我的是F:\Program Files\nodejs

然后在第3步弹出的环境变量窗口中 系统变量里新建变量NODE_PATH，值为：以第4步得到的路径开头，F:\Program Files\nodejs\node_modules;然后一直点击确定；

    4.2如果你的webpack是是用npm安装的，则在dos下执行npm config get prefix；后续步骤同4.1所述；

5.关闭dos窗口，再次打开dos；就好了；

参照这篇文章：webpack问题

npm failed to fetch from registry解决方法：

最近在win10上面安装了webpack，但是出现下面情况：

上网找了一下解决方案：

就是把HTTPS改成了HTTP

npm config set registry http://registry.npmjs.org/

原生JS快速获取和更改标签里面的属性值

今天看代码的时候遇到一个原生JS的知识点，下图的

code1 code2

this.id.split('-')[1]

/* 
这里的this是点击那个<button></button>整个对象代码
假设点击了第一个default的<button>
this.id = "switcher-default"
this.id.split('-') = [switcher,default]
this.id.split('-')[1] = "default"
*/

原生javascript扩展知识：

getAttribute：取得属性；
setAttribute：设置属性；

a[0].id
//"header"
a[0].className
//"Xman"
a[0].getAttribute('attrName');
//获取attrName的值，例如 title、style、data-XX等
a[0].setAttribute('attrName','value');
/*
设置attrName的值，在value处输入对应的值，这个value是直接覆盖原来的值，如果你设置了style，如果里面已经有一个样式了，你要加个背景就要在原有的值上加上背景的样式。
例：font-size:16px; 增加背景：font-size:16px; background:#ccccccc;
*/

console.log

最近做的一些JS代码

一、立即执行匿名函数，详细内容请参考：JavaScript中的立即执行函数表达式

方法一：

(function(){ 
 console.log("test");
})();

方法二：

(function(){ 
 console.log("test");
}());

jQuery和一些流行库的方法：

(function( window, undefined ) {
 // code here
}) ( window );

其他方法：

// 如果本身就是expression，那么根本不需要做任何处理
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

// 如果你不在乎返回值，可以这么做
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

// 还有更奇葩的方式，但是不知道性能如何，来自
// http://twitter.com/kuvos/status/18209252090847232
new function(){ /* code */ }
new function(){ /* code */ }()

二、根据URL来判断当前页面用的语言，调用预设好的样式；

var pathname = location.pathname;

if (pathname.indexOf("/ru/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_ru";
} else if (pathname.indexOf("/es/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_es";
} else if (pathname.indexOf("/it/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_it";
} else if (pathname.indexOf("/fr/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_fr";
} else if (pathname.indexOf("/pt/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_pt";
} else if (pathname.indexOf("/de/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_de";
}

三、内部函数可以使用外部的$(this)对象，直接在后面加.bind(this)

!function(){
 var hoverTimer, outTimer;
 $(document).on('mouseenter', '.myac', function(){
 clearTimeout(outTimer);
 hoverTimer = setTimeout(function(){
 $(this).addClass('myac_show').find('.myac_list').slideDown(); 
 }.bind(this), 300)
 }
 )
 $(document).on('mouseleave', '.myac', function(){
 clearTimeout(hoverTimer);
 outTimer = setTimeout(function(){
 $(this).removeClass('myac_show').find('.myac_list').slideUp('fast');
 }.bind(this), 150)
 }
 )
}()

四、ajax替换html内容后，原先写的时间无效：

修改前代码：

 $('.myac').hover(
     function(){
     $(this).find('.myac_list').slideDown();
     $(this).addClass('myac_show');
 },
 function(){
     $(this).find('.myac_list').slideUp();
     $(this).removeClass('myac_show');
 });

解决方法一：

ajax替换html内容不能替换改变.myac层的内容，可以替换修改里面的子元素内容，例如.myac_list的；因为.myac拿来触发事件了；

解决方法二：

把.hover()事件用.on()绑定 document，具体代码如下：

$(document).on('mouseenter', '.myac', function(){
         /*function code*/
     }
 );
 $(document).on('mouseleave', '.myac', function(){
         /*function code*/
     }
 );