之前一直是用vuejs来开发组件化项目,近期在搜狐实习期间,恰好是用AMD和jquery来开发项目,好久没有写过requirejs,想写个简单的小组件——自定义弹出框组件。
具体代码已上传github个人仓库,在过程中还是发现学的不够扎实。
- 首先是思想,将整个项目分层。分别是核心层,组件定制,框架core层,应用层,浏览器底层。
- html文件里按requirejs规则分别引入require.js和main.js。
- 应用层主要是用config对于插件路径和名称的处理,再用require添加依赖,主要起一个loader的作用。其他很明确,无非是生成实例,调用传参,所有以字典形式传入。
- 然后就是组件定制层,用define定义组件,定义原始值变量,以及prototype实现继承,添加方法,还有以面向对象的思想来写。
- 最后注意为了性能优化,尽量是子孙选择器来控制样式,于此还要注意优先级!important>行间样式>id>class>tag>伪类。
代码总结
在应用层里面,new生成实例,总是觉得不合适,因为这样一但多了之后,观察并不是很方便,尤其后期更改的时候,解决方法是将组件定制层里面的window再继承一个init()初始化的方法。在这个方法里用new生成实例,这样直接调用init()方法,虽然效果是一样的,但更明确,也跟符合面向对象的思想。