当前位置：首页>前端>正文

关于做drupal项目遇到的问题-（前端篇）

前端2024-10-16 12:37:05

一、框架问题记录

js的加载问题？

按需加载js 或 libraries.yml里引入js (上篇有介绍如何引入)
很多小伙伴按功能模块去分片js,再通过class去按需加载，这样会导致页面有类似多个组件时, 每个页面都会请求各个分片的js，这样页面请求次数就变多了，最终导致页面加载缓慢，缓存也较多。
因此，针对比较简单的或者通用的功能直接打包成一个js加载就好了，不用去切片搞按需加载。
只有比较大的功能或者这个功能只有个别页面才有，才去考虑切片按需加载。

分片打包js且按需加载写法：

if ($('xxx').length) {
   import(/* webpackChunkName: "xxx */ 'xxx的路径');
}

如何设置标题换行？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ 标题中插入<br/>
twig中添加如下：

{% autoescape 'html' %}
    Everything will be automatically escaped in this block
    using the HTML strategy
{% endautoescape %}

ckeditor不能插入空标签？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ 可以空标签中插入(&zwnj;||&zwj;)0宽度的空白字符;
如何在js中添加翻译？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ Drupal.t('anything');
如何页面变化时就执行某些方法？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$

(function ($, Drupal) {
  Drupal.your_namespace = Drupal.your_namespace || {};

  Drupal.behaviors.yourFnCommon = {
    attach: function (context) {
      Drupal.your_namespace.fn();
      Drupal.your_namespace.fn2(context);
    },
  };

  Drupal.your_namespace.fn = () => {
    // do anything;
  };

  Drupal.your_namespace.fn2 = (context) => {
    $('body', context)
      .once('yourFnCommon')
      .each(function () {
        $(window).on('load resize', function () {
          // Execute as content changes;
        });
      });
  };
})(jQuery, Drupal);

如何阻止默认外链popup？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ 加上class external-link-popup-disabled
twig中特殊字符处理

|render|striptags|trim|lower|preg_replace('/[^a-z0-9]/', '-')

drupal模块js覆盖重写
theme.info.yml 中加入如下

libraries-override:
  module_name/library_name:
     js:
      js/module.js:  js/module.js

Ckeditor 中粘贴无格式文本
在 Mac 上，你可以按 Option + Cmd + Shift + V 来粘贴无格式文本。
在 Windows 、linux上，你可以按 Ctrl + Shift + V 来粘贴无格式文本。
打补丁
1.去drupal 社区搜索相关问题
2.composer.json 中添加类似如下
3.执行composer install

"patches": {
    "drupal/module name": {
          "问题描述或问题链接": "xxx.patch"
     },
}

二、需求问题记录

最大的问题无非就是设计改来改去？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{建议：}\,第6张$ 能封装的尽量都封装起来，最后只需调整已封装的内容，页面无非就是各个class组装起来的，因此通用模块的class命名不要太具体化。
视频自动播放（兼容ios）？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ JSMpeg github
如何利用js生成pdf？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ jspdf 解决中文乱码
sessionStorage跨页面共享？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ shared-session
bootstrap tootip插件如何设置鼠标移出提示框隐藏？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ tootip 解决方案
页面迁移问题
做页面迁移时有很多不可控的因素，比如这些迁移的页面布局样式是否统一是未知的，页面是否有一些不规范的写法（比如dom结构写了行内样式）也是未知的。
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{建议：}\,第6张$ 利用puppeteer工具，抓取页面。
之前有介绍一篇puppeteer screenshot; 很多写法与之类似。
click 多个事件
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$

elem.onclick = function (fn) {
    var bak = elem.onclick;
    return function (e) {
        bak && bak.call(this, e);
        fn.call(this, e);
    };
}(new_callback)

如何使100vw不包含滚动条？
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$

function setVw() {
  let vw = document.documentElement.clientWidth / 100;
  document.documentElement.style.setProperty('--vw', ${vw}px);
}

setVw();
window.addEventListener('resize', setVw);

width: calc((var(--vw, 1vw) * 100);

Mktoforms2的监听？
Mktoforms2 Doc
元素之间缝隙问题
水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定的空隙(例子如下，主要针对inline-block元素)。
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$ 两个标签不换行即可
eg:
寻找周边城市
$关于做drupal项目遇到的问题-（前端篇）,\color{red}{解决：}\,第1张$
1. google map nearbySearch 有最大限制最大搜索半径50km.
2. 这个免费的接口可搜索到很多城市http://api.geonames.org/findNearbyPlaceNameJSON?lat=-6.21462&lng=106.8451&cities=cities15000&radius=300&maxRows=4&username=xxx
$关于做drupal项目遇到的问题-（前端篇）,\color{orange}{注意：}\,第17张$ 需要先注册账号https://www.geonames.org/login
图表插件
echarts官网
地图geojson数据
地图demo
给特殊字符补上转义符
适用场景前端搜索字符串时搜索特殊字符报错。

  const pattern = /([`~!@#_$%^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？\s])/g
  const value = this.value.replace(pattern, '\');
  const reg = new RegExp(value.toLowerCase());

替换字符串中的特殊字符

function replaceSpecialChars(text) {
  const map = {
    '&nbsp;': ' ',
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&nbsp;': ' ',
    '&#039;': "'",
    '&quot;': '"'
  };
  const keys = Object.keys(map);
  const pattern = new RegExp(keys.join('|'), 'g');
  return text.replace(pattern, function(m) { return map[m]; });
}

pdf 自定义分页
添加样式style="page-break-before: always;"

查看全文

https://www.xamrdz.com/web/2bd1994070.html

一、框架问题记录

二、需求问题记录

相关文章：