本系列文章记录在使用webpack中遇到的坑点，包含网友的解决方案，以及个性化的配置，仅用作参考。
Tips: 据我所知，webpack各个版本与其他不同版本的npm包搭配不同，实际采用的配置也不同，所以所有的设置仅针对个人开发环境，本文会尽量提供详细的开发配置，力争做到充分实践、上手即用，降低学习成本。
最近项目采用vue-cli 2 + webpack 3的开发环境，新版本的vue脚手架和webpack配置已有诸多不同，不在本文的讨论范围，往谅解。
Continue reading…
JSP项目中，直接在网页上添加一个script，jQuery写交互逻辑
优点：简单快速搭建demo
缺点：混乱，污染全局
例子一：
jQuery:
$(function(){
// do something
});
或者
$(document).ready(function(){
//do something
})
例子二：
JS:
document.ready(function () {
alert('im document.ready');
});
window.onload = function () {
alert('im window.onload');
};
用立即执行函数包裹作用域，
优点：可以防止全局污染；
缺点：变量常驻内存会消耗内存
例子一：
(function(){
//Coding…
})()
例子二:
outObj 作为参数传递过去，不用每个语句都去找outObj，提高了效率
(function(outObj){
var a = 1;
var obj ={ b:2};
window.obj = obj;
return obj;
})( outObj)
例子三：常驻内存
function f1(){
var n =9;
nAdd=function(){
n=n+1;
}
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result(); //9
nAdd();
result();//10
注意点：全局变量不用了记得置为null，方便垃圾回收
CommonJS, AMD, CMD, UMD, ES6 规范（CMD已经淘汰）
基本知识：
– require : 导入模块
– module.exports 或exports :导出模块
特点：
同步加载，依赖通过每个require一个个导入
例：
文件名: foo.js
// 依赖
var $ = require('jquery');
// 方法
function myFunc(){};
// 暴露公共方法（一个）
module.exports = myFunc;
注意点：
案列：
example1.js 文件
// 定义有依赖的模块
//CommonJS
var example2Obj = require('./example2');
example2Obj.sayHello();
module.exports = example2Obj;
example2.js 文件
//没有依赖的js
CommonJS
var me = {
sayHello:function(){
console.log('我是example2 in CommonJS!');
}
};
module.exports = me;
main.js
//CommonJS / AMD
var example1Obj = require('./assets/example1');
console.log("example1 in main",example1Obj)
基本知识：
return:导出模块
实际上也是一个闭包
define([module1,module2],function(){
return {};
});
特点：异步加载，不阻塞页面的加载，通过define导入多个模块，
案例：
example1.js 文件
//AMD
define([
'./example2'
],function(example2Obj){
example2Obj.sayHello();
return example2Obj;
});
example2.js 文件
//AMD
define([
],function(){
var we = {};
return {
sayHello:function(){
console.log('我是example2 in AMD!');
}
};
});
main.js同CommonJS
结合AMD + CommonJS的写法
（demo不生效,不举例了，有实验成功的童鞋分享下）
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = factory(require('b'));
} else {
// Browser globals
root.returnExports = factory(root.b);
}
}(this, function (b) {
//use b in some fashion.
return {};
}));
基本知识：
– import 导入
– export 或者 export default 导出
注意点：一个文件即模块中只能存在一个export default语句,export可以多个
案例：
example1.js 文件
//ES6
//名字任意
import ex2 from "./example2"
let ex1 = "ex1 ES6!!"
export {ex1,ex2}
example2.js 文件
//ES6
const str = "First ES6";
let obj = {
func:() => {
console.log("I am in ES6")
}
}
//只能一个default
export default{
str,
obj
}
main.js
//ES6
import {ex1,ex2} from './assets/example1'
console.log("ex1:",ex1,"ex2:",ex2)
demo源代码见：https://github.com/Dushusir/js-module-demo
演示环境：vue + webpack
npm install -g vue-cli
vue init webpack myDemo
npm run dev
去除eslint检查，防止对 “；” 报错：config/index.js中
module.exports = {
dev: {
//其他设置
useEslint: false,
参考：https://webpack.toobug.net/zh-cn/chapter2/commonjs.html ，感谢！
大家好，我是一名前端工程师，作为小组长带领3人左右一起开发，是一个半技术半管理的职能。个人从工作中发现了自己的不足，以及要改进的方向跟大家分享。
首先做好自己的第一位的，从程序员角度，尽量问题考虑全面，考虑扩展性，代码多加注释，思考更高性能的解决思路，做好代码优化，把开发文档整理好等，做好自己的开发工作，积极完成任务，也是做一个表率，不然没法一起合作，更没办法管理。
Continue reading…