JavaScript-odoo

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式

一、标准

JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA（European computer manufactures association，欧洲计算机制造联合会），希望这种语言能够成为国际标准，随后 ECMA 发布了规定浏览器脚本语言的标准，即 ECMAScript。这也有利于这门语言的开放和中立。

•1997 年 ECMAScript 1.0 诞生。
•1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
•1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
•2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
•2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。
•2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
•2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；
•2015年6月， ES6 正式通过，成为国际标准。
•后续版本以年份迭代，命名为ES2016、ES2017…ES2021

二、定义函数、变量

•声明变量：var 变量名;
•变量赋值：变量名 = 值; （缩写var 变量名 = 值）
•定义函数：
1、function name(){ //函数体};
2、var name = funtion () { // 函数体}; – 匿名函数
3、() => {//函数体} // ES6箭头函数，不会变更this指向

三、函数优先

由于JS编译器的作用，函数声明和变量声明都会被提升，但是一个值得注意的细节是函数会首先被提升，然后才是变量。

提升：变量和函数声明从它们在代码中出现的位置被“移动”到了最上面，这就叫提升。分为两个部分，第一部分是将所有的变量声明和函数声明放在了代码的最上方，第二部分的代码运行到指定位置时再执行。(函数声明会整个被提升，函数表达式不会整个被提升)

顺序总结：函数形参声明 ----> 函数声明 ----> 变量声明

四、let、const变量声明

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。在 ES6 之前，是没有块级作用域的概念的。ES6 可以使用 let 关键字来实现块级作用域。

•let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。
•相同的作用域或块级作用域内，var可以重复声明，let、const不可以
•var有变量提升，let、const没有
•const 声明一个只读的常量，声明时必须进行初始化，一旦声明，常量的值就不能改变。（object、array本身不可变，内部元素可变）- 实质：引用不变
目前前端js规范普遍禁止使用var，只能使用let、const

五、解构赋值
解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值的简便写法。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

六、Map与Set、Proxy代理

•Map 对象：Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

1、Maps 和 Objects 的区别
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
Map 中的键值是有序的，而添加到对象中的键则不是。
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。

2、•Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
+0 与 -0 在存储判断唯一性的时候是恒等的，所以重复；
undefined 与 undefined 是恒等的，所以重复；
NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，重复。
set可以用于数组去重，也可以字符串去重，因为里面的值都是唯一的。
案例：

3、Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。
owl中的useState内部就是代理模式

一个 Proxy 对象由两个部分组成： target 、 handler 。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为，取值、赋值使用的get、set属性方法

七、class类

class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。owl组件即用的class
•拥有匿名和命名定义方式
•类定义不会被提升，必须在访问前对类进行定义
•类中方法不需要 function 关键字
•静态属性：class 本身的属性，static 即直接定义在类内部的属性，不需要实例化
•实例属性：定义在实例对象（ this ）上的属性。
•子类 constructor 方法中必须有 super ，且必须出现在 this 之前；调用父类构造函数,只能出现在子类的构造函数；调用父类方法, super 作为父类对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

/**@odoo-module **/

import {registry} from "@web/core/registry";
const {Component,useState} = owl;
const {xml} = owl.tags;
import {useService} from "@web/core/utils/hooks";

const fncClient = async function(env,action){
      let result=env.services['orm'].call(
          'odoo_web.demo',
          'notify'
      ).then(()=> {
         env.services['action'].doAction(result)
      })

}
registry.category('actions').add('FncClient',fncClient);



class NewClient extends Component{
      static template = 'NewClient';
      state = useState({'css':''});
      users = useState({'list':[]});

      setup() {
            this.actionsService=useService('action');
            this.orm = useService('orm');
      }

      async onClick(){
            this.users.list.push({'id':1,'name':"melon",'age':'30'});
            // this.state.css='background-color:red;height:100px;width:100px';
      }
}
registry.category('actions').add('NewClient',NewClient);

八、Promise异步对象

•Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。
•Promise 对象只有从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）
•then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。
•通过 .then 形式添加的回调函数，不论什么时候，都会被调用。可以添加多个then，它们会按照插入顺序并且独立运行
•then 方法将返回一个 resolved 或 rejected 状态的 Promise 对象用于链式调用，且 Promise 对象的值就是这个返回值
•为避免回调地狱，ES6使用了async、awiat关键字
•async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数
•await针对所跟不同表达式的处理方式：Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值；非 Promise 对象：直接返回对应的值。

/**
 * Lazily play the 'beep' audio on sent notification
 *
 * @private
 */
_beep: function () {
    if (typeof(Audio) !== "undefined") {
        if (!this._audio) {
            this._audio = new Audio();
            var ext = this._audio.canPlayType("audio/ogg; codecs=vorbis") ? ".ogg" : ".mp3";
            this._audio.src = session.url("/mail/static/src/audio/ting" + ext);
        }
        Promise.resolve(this._audio.play()).catch(_.noop);
    }
},

九、模块

在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 的模块化分为导出（export） @与导入（import）两个模块。

•ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

•模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

•每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

•每一个模块只加载一次， 若再去加载同目录下同文件，直接从内存中读取。

•odoo15使用es6模块功能需要首行加上/** @odoo-module **/，import方式分为import(‘模块名’)和import(‘@模块路径’)和import(‘./相对路径’)

/** @odoo-module */
// 方式一、owl方式实现 渲染模板
import SystrayMenu from 'web.SystrayMenu';
import Widget from 'web.Widget';

class esWebclientWidget extends owl.Component{
     static template=='demo_html.esWebclientWidgetItem',

}




/** @odoo-module */
//方式二、ES6方式实现 渲染模板
import SystrayMenu from 'web.SystrayMenu';
import Widget from 'web.Widget';
const esWebclientWidget = Widget.extend({
      template:'demo_html.esWebclientWidgetItem',
      events: {
        'click a.js_alert_windows_Another': '_onClick',
      },

//      _onClick(ev) {
//        ev.preventDefault();
//        let self = this,
//        $target = $(ev.currentTarget);
//        //获取a标签的值
//        alert(ev.currentTarget.innerText);
//      },面包屑

      _onClick(ev) {
        //去除面包屑
        var options={clear_breadcrumbs:true};
        this.do_action({
            type: 'ir.actions.act_window',
            res_model: 'sale.order',
            target:'main',
            views: [[false, 'form']],
            res_id: 1,
        },options)
      },
});
SystrayMenu.Items.push(esWebclientWidget);//push一个组件






//方式三、define方式实现 渲染模板
odoo.define("demo_html.esWebclient",function(require){
   //引入模块
   const SystrayMenu = require('web.SystrayMenu');
   const Widget = require('web.Widget');

   const esWebclientWidget = Widget.extend({
         template:'demo_html.esWebclientWidgetItem'
   });
   SystrayMenu.Items.push(esWebclientWidget);//push一个组件


})