DOM-12【模块化开发Todolist】

一、HTML/CSS部分

（1）类命名

wrap、wrapper

包裹一个特定的区域

j-show-input

在企业级开发里面有一个原则：就是能不用id就不用id，因为id在前端开发中在进行模块化重组的时候是提供给后端用，而不是给前端进行交互用的。

写这个类名的目的不是为了写样式的，而是为了在后端去调取这个dom对象，所以在前面加个j或J

（2）生态

每一门编程语言或对应的框架、库，都涉及到一个生态的东西，就是跟这门语言相关的一些资料、信息、社区、讨论组有多少，问题、回答、解答有多少，我能在互联网上能找到能解决我问题的地方就是生态。比如一个框架很好，它的中文文档不行就很少人去用，但如果中文文档做的好，这个框架也好，它的生态就好。

一门语言，为它做贡献的人越多，它的生态就越强

Vue的生态好就是因为它是中国人开发的

（2）字体图标网站

fontawesome：https://fontawesome.dashgame.com/

（3）样式初始化文件

1. common.css
2. global.css
3. reset.css，
4. normalize.css

reset.css、normalize.css国外都有相应的库文件，这些库文件就是专门用来样式初始化的，在网上都可以下载到，所以为了避免文件名相重合，一般不会拿它们用来命名

（4）CSS顺序

（1）定位属性：position display float left top right bottom overflow clear z-index

（2）自身属性：width height padding border margin background

（3）文字样式：font-family font-size font-style font-weight font-varient color

（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

（5）css3中新增属性：content box-shadow border-radius transform……

按照上述1 2 3 4 5的顺序进行书写。

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

（6）级联样式

级联样式越长效率就越低，因为它要匹配，所以能直接用的就直接用

1. 它是从左到右匹配还是从右到左匹配？（面试题）

.list-hd .list-hd .a .b .c .d {}

答：它是从右到左找的，显然比从左往右效率更高。

2. 在企业级开发里面，外层盒子写了就不用写ul了，如果外层盒子没写就要写ul

二、JS部分

（1）模块化开发

1. dom结构划分
2. 功能划分（组件化开发）

模块化开发： 单独一个功能抽象出来作为一个单独的开发个体，开发出来的东西可以和任何的模块相合并互相调用而产生更多的效果，而且互相之间不会有作用域上的影响

模块标配：

// window.onload = function(){
// 	init();
// }
init();

function init(){
	initVariable;
}

var initVariable = (function(){

})()

一个变量接收了一个立即执行函数的一系列的变量和函数，这个立即执行函数不一定要有返回值

（2）模板写法

方法一：正则替换

方法二：拼接字符串

（3）立即执行函数的作用

除了可以写插件，还可以封闭一个独立的作用域

; (function () {

})()

一般插件都是面向对象开发，所有的对象方法都必须得放在这个构造函数的原形上面

写在原形上的好处是可以优化性能，因为写在原形上的方法是不用实例化的，它是直接继承过来的

只要是固定的，不需要配置的属性都可以写在原形上面

; (function () {
    var Test = function (b) {
        this.b = b;
    }

    Test.prototype = {
        a: '1',
        test1: function () {

        }
    }
	window.Test = Test;
})()