Modular development sass less

Modular development

Basic writing of modules

Common method

function a() {
            console.log("a");
 }
 function b() {
            console.log("b");
 }
a();
b();

Advantages: Direct call
Disadvantages: Variables may be polluted by repetition, and structural classification is not possible

Object writing

var obj={
           _a:false,
           a:function () {
               console.log("a");
           },
           b:function () {
             console.log("b");
           }
 };
obj.a();
obj.b();
obj._a=3;

Advantages: Variables will not be directly polluted, and it is easy to categorize and describe the content.
Disadvantages: All members will be exposed, and the internal state can be rewritten externally.

Execute function immediately

var obj=(function () {
            var _num=3;
            return{
                a:function () {
                    console.log(a);
                },
                set num(value){
                    _num=value;
                },
                get num(){
                    return _num;
                }
            }
      })();
obj.num=5;
console.log(obj.num)//5;
console.log(obj._num)//undefined
obj.a();//a

优点：外部代码无法读取到里面的_num变量，保证了变量不被污染

基本上这种就是模块的写法了，但是单纯的这样描述仍然不算完美，因此我们在其基础上进行了一下的修改

Zoom mode

var module=(function () {
              return {
                  a:1,
                  b:2,
                  c:function () {
                      
                  }
              }
        })();
        module=(function (mode) {
            mode.d=10;
           return mode;
        })(module);

Wide zoom mode

var module=(function () {
              return {
                  a:1,
                  b:2,
                  c:function () {
                      
                  }
              }
        })();
 module=(function (mode) {
            mode.d=10;
            return mode;
        })(module || {});
        console.log(module);

Modular specification

commanJS specification

module.exports=obj exports one
exports.obj=obj; export multiple
For the server
In CommonJS, there is a global method require() for loading modules.

var math = require('math');

　var math = require('math');
　　math.add(2,3); // 5

注意此处是同步

Node routing configuration

module.exports export methods or objects

function a(res) {
    res.write("a");
    res.end();
}
module.exports=a;

function b(res) {
    res.write("b");
    res.end();
}
module.exports=b;

var a=require("./a");
var b=require("./b");
var route={a:a,b:b};
var server=require("./server");
server.start(route);

var http=require("http");
var queryStr=require("querystring");
var server;
var route;
function start(_route) {
    route=_route;
    server=http.createServer(createServer);
    server.listen(3005,"10.9.25.176",function () {
            console.log("开启服务");
    })
}
function createServer(req,res) {
    req.on("data",function (_data) {

    });
    req.on("end",function () {
        console.log(req.url);
        var obj=queryStr.parse(req.url.split("?")[1]);
        res.writeHeader(200,{"content-type":"text/html","Access-Control-Allow-Origin":"*"});
        if(Number(obj.type)===1){
            route.a(res);
        }else if(Number(obj.type)===2){
            route.b(res);
        }
    })
}
exports.start=start;

Router route

One server, multiple interfaces
ES5 needs a browser

AMD specifications

AMD is the abbreviation of "Asynchronous Module Definition", which means "Asynchronous Module Definition".
Configure path paths baseURL non-local path
The module must be defined with a specific define() function. If a module does not depend on other modules, it can be directly defined in the define() function.

No dependency module specification

define(function () {
    function add(x,y) {
        return x+y;
    }
    function product(x,y) {
        return x*y;
    }
    return{
        add:add,
        product:product
    }
});

这里我们定义了一个加法和一个乘法的方法，return是返回的方法，这两个方法都被卸载一个固定的模块中。等待被加载调用

Dependent module specification

有依赖表示，该模块中的方法需要用到别的模块，必须依赖于别的模块被加载调用时。
define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

例如这里我们需要依赖于mylib这个模块，定义的时候我们就需要第一个参数以数组的形式写入需要加载的前提模块，后面的这个方法是表示加载完成mylib这个模块后回调的方法，这时候再写明需要定义的模块就好了。

- Insert picture description here

- Insert picture description here
self-executing function

You cannot return functions directly, only objects.

Module loading method

a.js

define((function () {
    return {
        a:1,
        b:2,
        c:function () {
            console.log(this.a);
        }
    }
})());

main.js

require(["a"],function (obj) {
    obj.c();
});

html

 <script src="js/require.js" data-main="js/main" defer></script>

Module loading

Why do we need module loading

Load require, because it is asynchronous, so you need to set async to true, but ie does not support this attribute, so you need to add defer, which is an asynchronous attribute supported by ie.

Unify the current path

require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

使用require下的config方法加载配置内容，注意：该内容必须写在主模块的顶部。

这个对象的paths属性指定各个模块的加载路径。

Different paths

　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});

如果这些模块在其他目录，比如js/lib目录，则有两种写法。需要逐一指定路径

Base road diameter

　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

当多个内容基于一个路径下，我们不需要逐一写这些路径，增加baseUrl值是该基路径就可以了。

Non-local path

如果某个模块在另一台主机上，也可以直接指定它的网址，比如：

require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

sass

Sass is a meta-language higher than CSS. It can be used to describe file styles clearly and structured and has more powerful functions than ordinary CSS
Can not be used directly on the web
installation
- sass is developed based on Ruby language, so you need to install Ruby before installing sass
- During installation, please check Add Ruby executables to your PATH to add it to the system environment variables.
- gem install sass
- gem install compass
Where to write code
$variable
path
monitor

& Parent selector

span{
   color: red;
  &:hover{
    color: blue;
  nav +&hover{
    color:yellow//兄弟元素
  }
}

The & here is that the selector of span itself adds hover to itself

scss

Scss is the new syntax introduced by Sass 3, shorthand for Sassy CSS, and a superset of CSS3 syntax, which means that all valid CSS3 styles are also suitable for Sass.
scss to sass
Import the b file

mixer

function

inherit

.div0
{
  $r:100px;
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  div{
    @extend .div0;
  }
}
//这里使用@extend 继承了类div0的样式

List loop

less

Download less
[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-wvXiTgak-1597757353285) (C:\Users\admin\AppData\Roaming\Typora\typora-user-images\ image-20200818205058382.png)] introduce less first and then js
- function
- inherit
  - ```
  .div0
  {
    $r:100px;
    width: $r;
    height: $r;
    border-radius: $r/2;
  }
  
  div{
    div{
      @extend .div0;
    }
  }
  //这里使用@extend 继承了类div0的样式
```
List loop