[8-15每日学习总结]平凡代码人生

最新推荐文章于 2024-09-29 10:18:25 发布

BEconfidence

最新推荐文章于 2024-09-29 10:18:25 发布

阅读量212

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/a197p/article/details/99622913

版权

web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

9点到10点：看完了两节深入浅出webpack的内容，学了webpack的安装以及构建命令，学习了loader的使用方法，对css进行解析，使用style-laoder时候有3种方式，一、使用use数组，内容是url querystring传入参数的字符串，二、使用use对象数组，可以是对象加options的形式，三、在源码中require的时候使用！加上loader进行解析例如，require('style-loader!css-loader!./main.css')。

10点20到11点25：看完了《深入理解ES》第三章函数的内容，之前有看一部分，其中包括了函数的默认参数，这参数可以为变量值，剩余参数，用三个点表示所有的剩余参数数组，必须放在参数最后的位置；扩展运算符...，可以方便的传入参数数组，例如Math.max可以直接传入...arrr；ES6的名称属性，给所有函数添加name属性，其中3个特殊的如，getter、setter函数会带有前缀、bind函数会带有bound，new Function函数带有anonymous。通过new.target元属性判断函数是否由new调用以及new运算符的作用目标；ES6的块级函数，会被提升到函数或全局环境的顶部，而不是ES3时候的代码块的顶部。然后很重要的一部分是箭头函数：没有this、arguments、super、new.target（即没有construct构造函数）、prototype，不能new,其中箭头函数语法需要注意返回对象字面量时用圆括号包裹；然后是立即调用函数，对于箭头函数的立即调用函数要注意只能使用(()=>{})()这种方式去包裹。箭头函数的识别typeof、instanceof和其他函数完全一样，在箭头函数上使用call、apply、bind时候哦this绑定不受影响；最后了解了尾调用优化，具体区别是在满足这三点条件时，尾调用会清除当前栈帧并再次利用他，而不是为尾调用创建新的栈帧。1，不能引用变量，即不能是闭包，2不能做额外操作，加减乘除都不行，3不能已返回值的方式返回函数结果。尾调用可以保持更小的调用栈，使用更少的内存，防止堆栈溢出，尤其针对递归函数非常有效。

12点10分到1点30分：看完了react写大众点评视频的webpack部分和react的前两个。webpack主要是写其基本配置，包括了环境的初始化npm init，package.json的介绍,尤其--save-dev和--save的区别，前者针对开发环境的依赖在package.json的devDependencies下，后者为上线环境中所需要的依赖dependencies下，前面的依赖不会在打包的时候包含进去。然后对于webpackde很多的配置，最小化压缩React：

new webpack.DefinePlugin({
    'process.env':
    {'NODE_ENV':JSON.stringify(process.env.NODE_ENV)}
})

npm run build命令：

"script":{
    "start":"NODE_ENV=dev webpack-dev-server --progress --colors",
    "build":"rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
}

前者使用webpack.config.js作为配置文件，后者webpack.production.config.js作为配合文件，dev和production可以在代码中通过process.env.NODE_ENV获取。

分离css，使用：

new ExtractTextPlugin('/css/[name].[chunkhash:8].css')

Uglify压缩使用：warning：false去掉代码warning。

还包括了分模块、md5后缀，可以使文件强缓存、vender将第三方依赖单独打包、发布path，以上这些是配置webpack.production.config.js,后面还有配置webpack.config.js的内容，定义全局变量：

new webpack.DefinePlugin({
    __DEV__:JSON.stringify(JSON.parse((process.env.NODE_ENV=='dev)||'false))
})

配置plugins，使用热加载和自动打开浏览器插件，module是怎么查找文件内容的，一般就是找到依赖中的字符串名称然后去查找依赖文件夹中的对应的package.json的main，找到js。webapck主要就是这些，我对webpack的基础用法不熟练，要多用一用。此外react部分就是jsx的基础。

3点到4点：在看webpack入门的一个文章，结合webpack中文文档的官网看的，目前看到了laoder那部分，以及server。

6点到7点：看完了《大众点评教程》的react部分，显示jsx基础语法部分，要注意样式需要两个中括号，并且可以使用？：表达式，对于循环一般用到的是map，对于智能组件和木偶组件，分为两个目录componnets目录内存放木偶组件，其意思就是接受数据和函数进行展示，比较傻瓜的操作，智能组件存放于containers中，每个页面存放一个文件夹，文件夹内也可以有subpage文件夹，获取数据和定义数据操作，然后交给木偶组件执行。然后介绍react最常用的生命周期，componentDidMount，第一次加载完成获取网络数据使用，shouldComponentUpdate性能优化使用，componentDidUpdate，用于触发事件后的数据更新，componentWillUnmount在组件卸载之前执行。

7点到10点20：看《深入浅出react和redux》，到了些todoslist应用的部分，但是对flux和redux的原理换有点不熟悉，回头在把这一部分的内容看一下。

10点30到0点20：js权威指南看了一部分，包括类型转换，等。效率有点低了，玩了会手机。