studyNotes icon indicating copy to clipboard operation
studyNotes copied to clipboard

Learning the various documents and small projects

Results 41 studyNotes issues
Sort by recently updated
recently updated
newest added

参考文献: https://zhuanlan.zhihu.com/p/22835128

Git

下面是在做网页的过程中考虑的一些问题,这些问题不能忽略,其中很经典的是雅虎13规。 - 发布前必要检查项 所有图片必须有进行过压缩 考虑适度的有损压缩,如转化为80%质量的jpg图片 考虑把大图切成多张小图,常见在banner图过大的场景 - 加载性能优化, 达到打开足够快 数据离线化,考虑将数据缓存在 localStorage 初始请求资源数 < 4 图片使用CSS Sprites 或 DataURI 外链 CSS 中避免 @import 引入 考虑内嵌小型的静态资源内容 初始请求资源gzip后总体积

Performance optimization

话不多少,直接look代码 ```javascript let currentWatcher = null //设置一个全局唯一的一个,data中属性的观测者 let id = 0 //每个主题有唯一的ID class mvvm{ constructor(opts){ this.init(opts)//初始化 observer(this.$data)//把所有要观测的数据,推入observer中进行数据拦截 new Compile(this)//解析模板同时让对应的属性添加watcher } init(opts){ this.$el = document.querySelector(opts.el) this.$data = opts.data || {} this.$methods...

Design Patterns

1. 生成指定范围内的随机数 例如随机获取颜色rgba的参数值时 ```javascript function setRandomNum(m,n){   return Math.floor(Math.random()*(n-m+1)) + m; } ``` 2. json转url参数 当进行http请求,可能需要把json转化为url参数 ```javascript function json2url(json) { var arr = []; for(var name in json) { arr.push(name+'='+json[name]) }...

Javascript

官方文档:https://docs.mongodb.com/getting-started/shell/ --- Homebrew安装mongodb ```bash brew update brew install mongodb ``` 默认的安装路径: ```bash The databases are stored in the /usr/local/var/mongodb/ directory The mongod.conf file is here: /usr/local/etc/mongod.conf The mongo logs can...

MongoDb

### webpack最好的学习方式 [getting-started](https://webpack.js.org/guides/getting-started/)

0. 范例 0.1 [] 表示可选 0.2 COMMENT 表示任意注释 0.3 PATH/TO/FILE 表示文件路径 0.4 SHA 标识提交或合并的 SHA-1 值 0.5 BRANCH_NAME 标识为自己的分支名 0.6 以 git 开头的为命令行操作,以 TGit 开头的为桌面操作 0.7 操作如果为分页模式,输入 q 退出 0.8...

Angular

>在我们编程过程中对于React学习最重要的就是生命周期了,学习react生命周期对于自己的编程也会有很大的帮助。 如果你基础够好的话建议直接看代码[https://github.com/facebook/react/blob/master/src/renderers/dom/__tests__/ReactDOMProduction-test.js#L89-L175](https://github.com/facebook/react/blob/master/src/renderers/dom/__tests__/ReactDOMProduction-test.js#L89-L175),从代码中可以看出ReactDOM的生成过程,下面详讲React的生命周期: 1. 实例化 - getDefaultProps 调用 React.createClass,然后触发getDefaultProps 方法,该方法返回一个对象,然后与父组件指定的props对象合并,最后赋值给 this.props 作为该组件的默认属性,该方法只调用一次 - getInitialState 初始化state 的值,返回值会赋给this.state,在这个方法里,你已经可以访问到this.props。 - componentWillMount 操作state,不会触发再次渲染,建议用constructor代替 - render 根据 state 的值,生成页面需要的虚拟 DOM 结构 - componentDidMount 可以设置state,会触发再次渲染,组件内部可以通过 ReactDOM.findDOMNode(this)来获取当前组件的节点操作DOM 2....

React

占个坑,后写 参考文献: https://segmentfault.com/a/1190000004913592 对比vue diff https://segmentfault.com/a/1190000008782928

React

最近我们前端组需要做场景化的探索,所以这里就搜索了一些资料先了解前端可视化。 --- 数据可视化的过程分为七个步骤:获取、分析、过滤、挖掘、表现、改善、交互。 前面4步分别属于数据采集、数据分析、数据处理和数据挖掘领域,数据可视化的处理范围主要是后面三步。 目前市面上可视化的插件主要有以下: echarts http://echarts.baidu.com/ 底层基于canvas highcharts https://www.hcharts.cn/ 底层基于svg,老牌图表库,商业用途需购买版权 D3.js https://d3js.org/ v3 svg v4 svg+canvas 可自由设计图表,适合展示丰富多样的图表样式 --- 下面从兼容性、是否开源、难易程度三方面简单介绍下。 1、兼容性 使用每个插件之前必须考虑它的兼容性问题,否则项目完成后发现部分浏览器不能用就需要重新选型或解决兼容性问题,事倍功半,得不偿失! - Highcharts 兼容 IE6 及以上的所有主流浏览器,完美支持移动端缩放、手势操作。 - Echarts 兼容...

Data visualization